/* Scène « Le calendrier de paie » — Paie & RH. À plat : traits, aplats, aucune ombre colorée. Classes préfixées cp-. */
.cp-carte, .cp-pastille, .cp-jalon, .cp-statut, .cp-titre-m, .cp-case, .cp-piste, .cp-tige, .cp-tete { position: absolute; left: 0; top: 0; }

/* Bureau : le mois en grille */
.cp-carte { box-sizing: content-box; background: var(--surface); border: 1px solid var(--line-fort); border-radius: var(--r-2); opacity: 0; }
.cp-carte::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; border-top: 1px solid var(--line); }
.cp-entete { position: absolute; left: 0; top: 0; width: 100%; height: 64px; opacity: 0; }
.cp-entete b { position: absolute; left: 12px; top: 14px; font-size: 13.5px; font-weight: 700; line-height: 1; color: var(--ink); white-space: nowrap; }
.cp-entete > span { position: absolute; right: 12px; top: 15px; font-size: 11.5px; font-weight: 600; line-height: 1; color: var(--muted); white-space: nowrap; }
.cp-semaine { position: absolute; left: 0; right: 0; top: 40px; height: 24px; display: grid; grid-template-columns: repeat(7, 1fr); align-items: center; }
.cp-semaine i { padding-left: 8px; font-style: normal; font-size: 11.5px; font-weight: 700; line-height: 1; color: var(--muted); }
.cp-rang { position: absolute; left: 0; width: 100%; box-sizing: border-box; display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--line); opacity: 0; }
.cp-jour { position: relative; border-left: 1px solid var(--line); }
.cp-jour:first-child { border-left: 0; }
.cp-jour.repos { background: var(--bg-doux); }
.cp-jour span { position: absolute; left: 8px; top: 6px; font-size: 11.5px; font-weight: 600; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Les trois dates du cycle : les chiffres qui se lisent d’abord */
.cp-jour.jalon span { left: 7px; top: 2px; font-size: 16px; color: var(--accent-texte); font-weight: 700; }

/* Le trait de progression du mois, et sa tête */
.cp-fil { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.cp-tete { width: 11px; height: 11px; margin: -5.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); opacity: 0; z-index: 1; will-change: transform, opacity; }

/* Les jalons : une étiquette au trait, pleine une fois atteinte */
/* Pas de will-change sur les étiquettes : leur texte doit rester net quand le cadre est agrandi (tablette). */
.cp-jalon { opacity: 0; }
.cp-jalon span { position: absolute; inset: 0; box-sizing: border-box; display: grid; place-items: center; border-radius: 6px; background: var(--surface); border: 1.5px solid var(--accent); color: var(--accent-texte); font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; }
.cp-jalon .cp-plein { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; opacity: 0; }

/* Les variables : sans date, elles flottent (pointillé, ombre neutre) ; posées, elles tiennent dans leur jour */
.cp-pastille { box-sizing: border-box; display: grid; place-items: center; border-radius: var(--r-pilule); background: var(--surface); border: 1px dashed var(--muted); box-shadow: var(--flottant); color: var(--ink); font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; opacity: 0; }
.cp-pastille.posee { background: var(--surface); border: 2px solid var(--ink); box-shadow: none; }
.cp-pastille.retard { border-color: var(--ambre); color: var(--ambre-texte); box-shadow: inset 0 0 0 1px var(--ambre); }

/* Les coches : une par variable au contrôle, une plus nette à la validation */
.cp-coche { position: absolute; right: -6px; top: -7px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-fonce); box-shadow: 0 0 0 1.5px var(--surface); opacity: 0; }
.cp-coche svg { width: 9px; height: 9px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cp-nette { right: 1px; top: -20px; width: 18px; height: 18px; box-shadow: none; }
.cp-nette svg { width: 11px; height: 11px; }

.cp-statut { transform: translate(-50%, -50%); padding: 6px 14px; border-radius: var(--r-pilule); background: var(--surface); border: 1px solid var(--line-fort); font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--d-2); }
.cp-statut.alerte { color: var(--ambre-texte); border-color: var(--ambre); }
/* Temps fort : le cycle est validé, l’état passe en aplat d’accent */
.cp-statut.ok { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; }

/* Relief : le calendrier est posé à plat ; les jalons et les variables à leur date sont posés dessus ;
   une variable sans date flotte bien plus haut, puis descend se poser (la classe .posee change sa hauteur). */
.cp-jalon { translate: 0 0 calc(8px * var(--relief)); }
.cp-pastille { translate: 0 0 calc(40px * var(--relief)); transition: translate var(--d-2) ease-out; }
.cp-pastille.posee { translate: 0 0 calc(8px * var(--relief)); }
.cp-statut { translate: 0 0 calc(24px * var(--relief)); }

/* Petit écran : une frise de deux semaines, les variables plantées dessus, les jalons dessous */
.cp-titre-m { font-size: 12px; font-weight: 700; line-height: 1; color: var(--ink); white-space: nowrap; opacity: 0; }
.cp-case { box-sizing: border-box; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-fort); font-size: 11px; font-weight: 600; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; opacity: 0; }
.cp-case.jalon { color: var(--accent-texte); font-size: 14px; font-weight: 700; }
.cp-piste { height: 4px; background: var(--line); opacity: 0; }
.cp-piste .cp-fil { top: 0; width: 100%; height: 4px; }
/* Les tiges : le lien entre une variable et sa date. Elles remontent un peu sous la pastille, qui est en relief. */
.cp-tige { box-sizing: content-box; width: 1.5px; margin: -5px 0 0 -.75px; padding-top: 5px; background: var(--ink); opacity: 0; }
.cp-tige.j { margin-top: 0; padding-top: 0; }
.cp-tige.j { background: var(--accent); }
.cp-tige.retard { background: var(--ambre); }
.cp-compact .cp-pastille, .cp-compact .cp-jalon span { font-size: 11px; }
.cp-compact .cp-coche { right: -5px; top: -6px; width: 14px; height: 14px; }
/* Le dernier jalon réserve la place de sa coche : un rond vide, puis la coche une fois le cycle validé */
.cp-compact .cp-jalon.final span { padding-right: 20px; }
.cp-compact .cp-jalon.final span:first-child::after { content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px; box-sizing: border-box; border-radius: 50%; border: 1px dashed var(--accent); }
.cp-compact .cp-nette { right: 4px; top: 4px; width: 14px; height: 14px; background: #fff; }
.cp-compact .cp-nette svg { width: 9px; height: 9px; stroke: var(--accent-fonce); }
.cp-compact .cp-statut { font-size: 12px; padding: 5px 12px; }