/* ==========================================================================
   Zone « paie » : paie, bulletins, primes & retenues, avances, registre,
   déclaration CNPS, congés. Classes préfixées « paie- ».
   Couleurs : uniquement les jetons du système de design (thème sombre auto).
   ========================================================================== */

/* ---------- Éléments communs ---------- */

.paie-zero { color: var(--texte-3); }
.paie-btn-icone { width: 30px; padding: 0; }
.paie-btn-icone .ico { width: 15px; height: 15px; }
.paie-croix { font-size: 1.15rem; font-weight: 500; line-height: 1; margin-top: -1px; }
.paie-plus { font-size: 1.15em; font-weight: 500; line-height: 1; margin-right: 1px; }

/* Encadré d'information / d'avertissement (sans la classe .message,
   réservée aux notifications de l'application) */
.paie-note {
    display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; margin: 0 0 16px;
    border-radius: var(--rayon); border: 1px solid; font-size: .87rem; line-height: 1.5;
    background: var(--info-fond); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent);
}
.paie-note > .ico { width: 17px; height: 17px; margin-top: 1px; }
.paie-note > div { min-width: 0; color: var(--texte); }
.paie-note strong { color: inherit; }
.paie-note-attention { background: var(--attention-fond); color: var(--attention); border-color: color-mix(in srgb, var(--attention) 25%, transparent); }
.paie-note-alerte { background: var(--alerte-fond); color: var(--alerte); border-color: color-mix(in srgb, var(--alerte) 25%, transparent); }
.paie-note-ok { background: var(--ok-fond); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }

/* Commande segmentée (navigation par année, filtres) */
.paie-segments { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 11px; background: var(--surface-3); max-width: 100%; }
.paie-segments a, .paie-segments span {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 12px; border-radius: 8px;
    font-size: .85rem; font-weight: 550; color: var(--texte-2); text-decoration: none; white-space: nowrap;
    transition: color var(--d-2), background var(--d-2), box-shadow var(--d-2);
}
.paie-segments a:hover { color: var(--texte); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.paie-segments .actif { color: var(--texte); background: var(--surface); box-shadow: var(--ombre-2); }
.paie-segments .ico { width: 15px; height: 15px; }
.paie-segments .paie-precedent .ico { transform: rotate(180deg); }

/* En-tête de carte avec pastille d'icône */
.paie-carte-titre { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.paie-carte-titre h2 { margin: 0; }
.paie-carte-titre p { margin: 2px 0 0; color: var(--texte-2); font-size: .86rem; }
.paie-pastille-icone {
    width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center;
    color: var(--ton, var(--marque-vif)); background: color-mix(in srgb, var(--ton, var(--marque-vif)) 12%, transparent);
}
.paie-pastille-icone .ico { width: 18px; height: 18px; }
.paie-pastille-icone.ok { --ton: var(--ok); }
.paie-pastille-icone.info { --ton: var(--info); }
.paie-pastille-icone.attention { --ton: var(--attention); }
.paie-pastille-icone.alerte { --ton: var(--alerte); }

/* Personne dans un tableau */
.paie-personne-texte { min-width: 0; display: flex; flex-direction: column; }
.paie-personne-texte strong { font-weight: 600; color: var(--texte); white-space: nowrap; }
.paie-personne-texte a { font-weight: 600; }
.paie-personne-texte small { color: var(--texte-2); font-size: .78rem; white-space: nowrap; }
.paie-insecable { white-space: nowrap; }
.paie-tableau .avatar, .paie-liste .avatar { width: 32px; height: 32px; font-size: .72rem; }

/* Tableaux de la zone : apparition des lignes en cascade, montants alignés */
.js .paie-tableau tbody tr { animation: paie-ligne var(--d-4) var(--ease-out) both; animation-delay: calc(120ms + var(--i, 0) * 28ms); }
.paie-tableau th, .paie-tableau td { padding-left: 8px; padding-right: 8px; }
.paie-tableau td { white-space: nowrap; }
.paie-tableau th.paie-th-double { white-space: normal; line-height: 1.3; min-width: 74px; max-width: 110px; }
.paie-tableau .paie-personne-texte small { white-space: normal; max-width: 190px; line-height: 1.35; }
.paie-tableau tfoot td { white-space: nowrap; }
.paie-tableau .paie-retenue { color: var(--texte-2); }
.paie-tableau .paie-net strong { font-weight: 700; color: var(--texte); }
.paie-montant-plus { color: var(--ok); font-weight: 650; }
.paie-montant-moins { color: var(--alerte); font-weight: 650; }

/* Tableaux qui défilent horizontalement : un liseré ombré signale le contenu masqué.
   Les caches (attachement « local ») suivent le contenu et recouvrent l'ombre en bout de course. */
.paie-defile {
    background:
        linear-gradient(90deg, var(--surface) 45%, transparent) left / 40px 100%,
        linear-gradient(270deg, var(--surface) 45%, transparent) right / 40px 100%,
        radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--texte) 16%, transparent), transparent) left / 14px 100%,
        radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--texte) 16%, transparent), transparent) right / 14px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
}

/* Indicateurs alignés d'une carte à l'autre : libellé, valeur et aide
   partagent les mêmes lignes, même quand un libellé passe sur deux lignes */
@supports (grid-template-rows: subgrid) {
    :is(.paie-stats, .paie-stats-3, .paie-stats-4, .paie-stats-5, .paie-stats-conges) > :is(.stat, .stat-lien),
    :is(.paie-stats, .paie-stats-3, .paie-stats-4, .paie-stats-5, .paie-stats-conges) > .stat-lien > .stat {
        display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 4px; align-content: start;
    }
    :is(.paie-stats, .paie-stats-3, .paie-stats-4, .paie-stats-5, .paie-stats-conges) .stat-haut { align-items: flex-start; }
    :is(.paie-stats, .paie-stats-3, .paie-stats-4, .paie-stats-5, .paie-stats-conges) .stat-valeur { align-self: end; }
}

/* Grille formulaire (1/3) + liste (2/3) */
.paie-grille-formulaire { grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 1100px) { .paie-grille-formulaire { grid-template-columns: minmax(0, 1fr); } }
.paie-grille-formulaire .champs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 14px; }
@media (max-width: 420px) { .paie-grille-formulaire .champs { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1101px) { .paie-formulaire-colle { position: sticky; top: calc(var(--topbar) + 18px); } }

/* Champ estompé quand il ne s'applique pas (CSS :has, sans JavaScript) */
.paie-champ-inactif { transition: opacity var(--d-3) var(--ease-out); }

/* Grille à une seule colonne (le contenu ne l'élargit jamais) */
.paie-grille-seule { grid-template-columns: minmax(0, 1fr); }

/* Grille suivie d'une autre carte */
.paie-grille { margin-bottom: 18px; }

/* Graphique sur une année civile : le dernier libellé (décembre) n'est pas mis en avant */
.paie-graphe-annuel .graphe-axe text.graphe-libelle-dernier { fill: var(--texte-3); font-weight: inherit; }

/* Carte de graphique */
.paie-carte-graphe .graphe-legende { justify-content: center; }

/* ---------- Paie du mois (paie.php) ---------- */

.paie-pilote { padding: 0; }
.paie-pilote-entete { display: flex; align-items: center; gap: 14px; padding: 20px 22px 4px; flex-wrap: wrap; }
.paie-pilote-icone {
    width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(145deg, var(--btn-haut, var(--marque-vif)), var(--btn-bas, var(--marque-fonce)));
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--marque-vif) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.paie-pilote-icone .ico { width: 21px; height: 21px; }
.paie-pilote-titre { flex: 1; min-width: 220px; }
.paie-pilote-titre h2 { margin: 0; font-size: 1.12rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.paie-pilote-titre p { margin: 3px 0 0; color: var(--texte-2); font-size: .85rem; }
.paie-pilote-outils { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.paie-pilote-outils .btn .ico { width: 15px; height: 15px; }
.paie-pilote-effectif {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
    background: var(--surface-3); color: var(--texte-2); font-size: .8rem; font-weight: 550; white-space: nowrap;
}
.paie-pilote-effectif .ico { width: 15px; height: 15px; }

/* Indicateur d'étapes */
.paie-etapes { list-style: none; margin: 0; padding: 22px 22px 20px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.paie-etape { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; min-width: 0; }
.paie-etape::before, .paie-etape::after {
    content: ''; position: absolute; top: 16px; height: 2px; left: calc(50% + 24px); right: calc(-50% + 24px); border-radius: 2px;
}
.paie-etape::before { background: var(--bord); }
.paie-etape::after {
    background: linear-gradient(90deg, var(--marque-vif), var(--dore)); transform-origin: left; transform: scaleX(0);
}
.paie-etape.fait::after { transform: none; animation: barre-grandit var(--d-4) var(--ease-out) both; animation-delay: calc(260ms + var(--i, 0) * 140ms); }
.paie-etape:last-child::before, .paie-etape:last-child::after { display: none; }
.paie-etape-pastille {
    position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
    font-size: .86rem; font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--surface-3); color: var(--texte-2); box-shadow: inset 0 0 0 1px var(--bord-fort);
    animation: echelle var(--d-4) var(--ease-ressort) both; animation-delay: calc(140ms + var(--i, 0) * 140ms);
    transition: transform var(--d-3) var(--ease-ressort);
}
.paie-etape-pastille .ico { width: 16px; height: 16px; stroke-width: 2.6; }
.paie-etape.fait .paie-etape-pastille {
    color: #fff; background: linear-gradient(145deg, var(--btn-haut, var(--marque-vif)), var(--btn-bas, var(--marque))); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--marque-vif) 70%, transparent);
}
.paie-etape.courant .paie-etape-pastille {
    color: var(--marque-texte); background: var(--surface); box-shadow: inset 0 0 0 2px var(--marque-vif), 0 0 0 5px var(--marque-doux);
}
.paie-etape.courant .paie-etape-pastille::after {
    content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--marque-vif); opacity: 0;
    animation: paie-halo 2.4s var(--ease-out) 1s infinite;
}
.paie-etape:hover .paie-etape-pastille { transform: scale(1.08); }
.paie-etape-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }
.paie-etape-texte strong { font-size: .88rem; font-weight: 650; color: var(--texte-2); }
.paie-etape-texte small { font-size: .76rem; color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paie-etape.fait .paie-etape-texte strong { color: var(--texte); }
.paie-etape.courant .paie-etape-texte strong { color: var(--marque-texte); }
@media (max-width: 700px) {
    .paie-etapes { padding: 18px 10px 16px; }
    .paie-etape { gap: 7px; }
    .paie-etape::before, .paie-etape::after { top: 14px; left: calc(50% + 19px); right: calc(-50% + 19px); }
    .paie-etape-pastille { width: 29px; height: 29px; font-size: .78rem; }
    .paie-etape.courant .paie-etape-pastille { box-shadow: inset 0 0 0 2px var(--marque-vif), 0 0 0 4px var(--marque-doux); }
    .paie-etape-texte strong { font-size: .74rem; }
    .paie-etape-texte small { display: none; }
}

/* Progression des paiements */
.paie-paiements { margin: 0 22px 18px; padding: 14px 16px; border-radius: var(--rayon); background: var(--surface-2); border: 1px solid var(--bord); }
.paie-paiements-haut { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.paie-paiements-libelle { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.paie-paiements-libelle .ico { width: 17px; height: 17px; color: var(--marque-vif); }
.paie-paiements-compte { color: var(--texte-2); font-size: .86rem; font-variant-numeric: tabular-nums; }
.paie-paiements-compte strong { color: var(--texte); }
.paie-paiements-pourcent { margin-left: auto; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.paie-progression { height: 10px; }
.paie-progression > span { animation-delay: .35s; }
.paie-paiements.complet .paie-progression > span { background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 65%, var(--dore))); }
.paie-paiements.complet .paie-paiements-libelle .ico, .paie-paiements.complet .paie-paiements-pourcent { color: var(--ok); }
.paie-paiements-detail { margin: 8px 0 0; color: var(--texte-2); font-size: .8rem; font-variant-numeric: tabular-nums; }

/* Prochaine étape */
.paie-prochaine {
    display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; padding: 16px 22px 18px;
    border-top: 1px solid var(--bord); background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border-radius: 0 0 calc(var(--rayon-l) - 1px) calc(var(--rayon-l) - 1px);
}
.paie-prochaine-texte { flex: 1 1 340px; min-width: 0; }
.paie-prochaine-surtitre { display: block; font-size: .7rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--marque-texte); margin-bottom: 2px; }
.paie-prochaine-texte > strong { display: block; font-size: .98rem; font-weight: 650; letter-spacing: -.01em; }
.paie-prochaine-texte p { margin: 3px 0 0; color: var(--texte-2); font-size: .87rem; max-width: 680px; }
.paie-prochaine-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.paie-raccourcis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.paie-raccourcis a {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px;
    border: 1px solid var(--bord); background: var(--surface); color: var(--texte-2); font-size: .8rem; font-weight: 550; text-decoration: none;
    transition: border-color var(--d-2), color var(--d-2), transform var(--d-2) var(--ease-out), box-shadow var(--d-2);
}
.paie-raccourcis a .ico { width: 14px; height: 14px; color: var(--texte-3); transition: color var(--d-2); }
.paie-raccourcis a:hover { color: var(--texte); border-color: var(--bord-fort); transform: translateY(-1px); box-shadow: var(--ombre-1); }
.paie-raccourcis a:hover .ico { color: var(--marque-vif); }

/* Paiement groupé */
.paie-paiement-groupe { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
.paie-paiement-groupe .paie-prochaine-texte { flex: 1 1 280px; }
.paie-paiement-champs { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.paie-paiement-champs > div { display: flex; flex-direction: column; }
.paie-paiement-champs label { font-size: .76rem; color: var(--texte-2); margin-bottom: 4px; }
.paie-paiement-champs input, .paie-paiement-champs select { width: auto; min-height: 38px; }
.paie-paiement-champs input[type=text] { width: 150px; }
@media (max-width: 640px) {
    .paie-paiement-champs, .paie-paiement-champs > div { width: 100%; }
    .paie-paiement-champs input, .paie-paiement-champs select, .paie-paiement-champs input[type=text], .paie-paiement-champs .btn { width: 100%; }
}

/* Points à vérifier */
.paie-vigilance { border-color: color-mix(in srgb, var(--attention) 30%, var(--bord)); background: linear-gradient(180deg, var(--attention-fond), var(--surface) 140px); }
.paie-vigilance-entete { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.paie-vigilance-entete h2 { margin: 0; }
.paie-vigilance-entete p { margin: 1px 0 0; color: var(--texte-2); font-size: .85rem; }
.paie-vigilance-icone { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--attention); background: color-mix(in srgb, var(--attention) 14%, transparent); }
.paie-vigilance-icone .ico { width: 18px; height: 18px; }
.paie-vigilance-liste { margin: 0; padding: 0; list-style: none; columns: 2 320px; column-gap: 28px; }
.paie-vigilance-liste li { position: relative; padding: 5px 0 5px 16px; font-size: .86rem; color: var(--texte); break-inside: avoid; }
.paie-vigilance-liste li::before { content: ''; position: absolute; left: 2px; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--attention); }

/* Synthèse : indicateurs + répartition */
.paie-synthese { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); margin-bottom: 18px; align-items: stretch; }
.paie-synthese > .stats { margin-bottom: 0; }
.paie-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.paie-repartition { display: flex; flex-direction: column; }
.paie-repartition .carte-entete { margin-bottom: 8px; }
.paie-anneau-ligne { flex: 1; display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 18px; }
.paie-anneau-ligne .graphe-centre strong { font-size: 1.12rem; }
.paie-anneau-ligne .graphe-centre small { font-size: .7rem; }
.paie-anneau-ligne .graphe-legende { margin: 0; flex-direction: column; gap: 9px; font-size: .8rem; }
.paie-anneau-ligne .graphe-legende span { display: grid; grid-template-columns: 9px 1fr; column-gap: 8px; line-height: 1.3; }
.paie-anneau-ligne .graphe-legende i { margin-top: 3px; }
.paie-anneau-ligne .graphe-legende strong { grid-column: 2; color: var(--texte); font-weight: 650; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .paie-anneau-ligne { grid-template-columns: minmax(0, 1fr); justify-items: center; } .paie-anneau-ligne .graphe { max-width: 200px; } }
@media (max-width: 1250px) { .paie-synthese { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1250px) and (min-width: 701px) {
    .paie-repartition .paie-anneau-ligne { grid-template-columns: 168px minmax(0, 520px); justify-content: center; gap: 28px; }
    .paie-repartition .paie-anneau-ligne .graphe-legende { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
}
@media (max-width: 760px) { .paie-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Tableau des bulletins (première colonne fixe au défilement horizontal ;
   l'ombre pleine masque les cellules qui défilent sous la marge de la carte) */
.paie-bulletins .paie-tableau th:first-child, .paie-bulletins .paie-tableau td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: -23px 0 0 var(--surface); }
.paie-bulletins .paie-tableau thead th:first-child { background: var(--surface-2); z-index: 2; }
.paie-bulletins .paie-tableau tfoot td:first-child { background: var(--surface-2); }
.paie-bulletins .paie-tableau tbody tr:hover td:first-child { background: var(--surface-2); }
@media (max-width: 640px) {
    .paie-bulletins .carte-entete > .actions { width: 100%; }
    .paie-bulletins .carte-entete > .actions .btn { flex: 1 1 100%; }
}
.paie-a-verifier { margin-top: 3px; }
.paie-a-verifier .badge { font-size: .7rem; padding: 0 8px 0 7px; }
.paie-col-paiement .badge { font-variant-numeric: tabular-nums; }
.paie-mode { display: block; margin-top: 3px; color: var(--texte-2); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; line-height: 1.35; }
.paie-actions-ligne { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.paie-actions-ligne .btn .ico { width: 15px; height: 15px; }

/* Paiement individuel (volet dépliable) */
.paie-payer > summary { list-style: none; }
.paie-payer > summary::-webkit-details-marker { display: none; }
.paie-payer[open] > summary { background: var(--surface-3); border-color: var(--bord-fort); }
.paie-payer-form {
    display: grid; gap: 6px; width: 204px; margin-top: 8px; padding: 10px; border-radius: var(--rayon);
    border: 1px solid var(--bord); background: var(--surface-2); box-shadow: var(--ombre-2);
    transform-origin: top left; animation: paie-deplie var(--d-3) var(--ease-out);
}
.paie-payer-form input, .paie-payer-form select { min-height: 34px; padding: 6px 10px; font-size: .84rem; }
.paie-payer-form select { padding-right: 30px; }

/* ---------- Congés (conges.php) ---------- */

.paie-retour .ico { transform: rotate(180deg); width: 16px; height: 16px; }
.paie-retour { display: inline-flex; }

/* Familles de congé : couleur commune (pastilles, blocs du calendrier) */
.paie-famille-annuel { --famille: var(--info); }
.paie-famille-maladie { --famille: var(--attention); }
.paie-famille-autre { --famille: var(--marque-vif); }

.paie-stats-conges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .paie-stats-conges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.paie-onglets a { display: inline-flex; align-items: center; gap: 7px; }
.paie-onglets a .ico { width: 16px; height: 16px; opacity: .7; transition: opacity var(--d-2); }
.paie-onglets a.actif .ico, .paie-onglets a:hover .ico { opacity: 1; }
.paie-onglets a.actif .ico { color: var(--marque-vif); }
@media (max-width: 560px) {
    .paie-onglets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .paie-onglets a { justify-content: center; padding: 8px 10px; }
}
.paie-onglet-compte {
    min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
    background: var(--marque); color: var(--surface); font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Demandes à valider */
.paie-demandes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.paie-demande {
    position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 18px 20px; overflow: hidden;
    transition: transform var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out), border-color var(--d-2);
}
.paie-demande::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--famille, var(--marque-vif)); opacity: .85; }
.paie-demande:hover { transform: translateY(-2px); box-shadow: var(--ombre-2); border-color: var(--bord-fort); }
.paie-demande-entete { display: flex; align-items: center; gap: 12px; }
.paie-demande-entete .avatar { width: 42px; height: 42px; font-size: .82rem; }
.paie-demande-entete .paie-personne-texte { flex: 1; }
.paie-demande-entete h2 { margin: 0; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.paie-demande-entete small { white-space: normal; }
.paie-type-conge {
    flex: none; max-width: 46%; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.45; text-align: center;
    color: var(--famille); background: color-mix(in srgb, var(--famille) 12%, transparent);
}
.paie-demande-periode { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.paie-feuille {
    display: inline-flex; flex-direction: column; align-items: center; min-width: 78px; padding: 0 0 6px; overflow: hidden;
    border: 1px solid var(--bord); border-radius: 11px; background: var(--surface); box-shadow: var(--ombre-1); text-align: center;
}
.paie-feuille-mois {
    align-self: stretch; padding: 2px 8px; font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--famille, var(--marque-texte)); background: color-mix(in srgb, var(--famille, var(--marque-vif)) 11%, var(--surface));
}
.paie-feuille strong { font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin-top: 3px; font-variant-numeric: tabular-nums; }
.paie-feuille small { font-size: .72rem; color: var(--texte-2); }
.paie-demande-fleche { color: var(--texte-3); display: grid; place-items: center; }
.paie-demande-fleche .ico { width: 18px; height: 18px; }
.paie-demande-duree {
    margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; padding: 6px 14px; border-radius: 11px;
    background: var(--surface-2); border: 1px dashed var(--bord-fort);
}
.paie-demande-duree strong { font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.paie-demande-duree small { font-size: .74rem; color: var(--texte-2); white-space: nowrap; }
.paie-demande-motif { display: flex; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); color: var(--texte-2); font-size: .87rem; font-style: italic; }
.paie-demande-motif .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--texte-3); }
.paie-demande .paie-note { margin: 0; }
.paie-demande-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bord); }
.paie-demande-actions input { flex: 1 1 100%; width: auto; min-height: 38px; }
.paie-demande-actions .btn { flex: 1 1 0; }
.paie-demande-actions .btn-danger { order: 1; }
.paie-demande-actions .btn-ok { order: 2; }
.paie-demande-attente { display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--bord); color: var(--texte-2); font-size: .87rem; }
.paie-demande-attente .ico { width: 16px; height: 16px; color: var(--attention); }
@media (max-width: 520px) {
    .paie-demande { padding: 16px; }
    .paie-feuille { min-width: 70px; }
    .paie-demande-duree { margin-left: 0; flex: 1 1 100%; flex-direction: row; align-items: baseline; gap: 8px; }
    .paie-demande-entete { flex-wrap: wrap; row-gap: 8px; }
    .paie-demande-entete .paie-personne-texte { flex: 1 1 calc(100% - 54px); }
    .paie-type-conge { order: 3; max-width: none; margin-left: 54px; }
}

/* Mini-barre de solde avant / après */
.paie-solde-mini { padding: 11px 13px; border-radius: 11px; border: 1px solid var(--bord); background: var(--surface-2); }
.paie-solde-mini-haut { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .84rem; color: var(--texte-2); margin-bottom: 8px; }
.paie-solde-mini-valeurs { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.paie-solde-mini-valeurs .ico { width: 14px; height: 14px; color: var(--texte-3); }
.paie-solde-mini-valeurs strong { color: var(--texte); font-size: .95rem; }
.paie-solde-mini-barre { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.paie-solde-mini-barre span { display: block; height: 100%; transform-origin: left; animation: barre-grandit var(--d-5) var(--ease-out) .25s both; }
.paie-solde-mini-barre .reste { background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 70%, var(--dore))); }
.paie-solde-mini-barre .pris {
    background: repeating-linear-gradient(135deg, var(--famille, var(--info)) 0 4px, color-mix(in srgb, var(--famille, var(--info)) 45%, transparent) 4px 8px);
    animation-delay: .5s;
}
.paie-solde-mini.negatif { border-color: color-mix(in srgb, var(--alerte) 35%, transparent); background: var(--alerte-fond); }
.paie-solde-mini.negatif .paie-solde-mini-valeurs strong { color: var(--alerte); }
.paie-solde-mini.negatif .pris { background: repeating-linear-gradient(135deg, var(--alerte) 0 4px, color-mix(in srgb, var(--alerte) 45%, transparent) 4px 8px); }

/* Pastille de type dans les listes */
.paie-type-point { display: inline-flex; align-items: flex-start; gap: 8px; white-space: normal; max-width: 210px; line-height: 1.4; }
.paie-type-point::before { content: ''; width: 8px; height: 8px; margin-top: .4em; border-radius: 3px; background: var(--famille); flex: none; }
.paie-periode { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.paie-periode .ico { width: 13px; height: 13px; color: var(--texte-3); }
.paie-decision small { color: var(--texte-2); white-space: normal; display: block; min-width: 140px; }

/* Soldes */
.paie-col-solde { width: 200px; }
.paie-solde-cellule { display: grid; grid-template-columns: 52px minmax(80px, 1fr); align-items: center; gap: 12px; }
.paie-solde-cellule strong { text-align: right; font-variant-numeric: tabular-nums; }
.paie-solde-barre { height: 7px; }
.paie-solde-barre > span { background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 60%, var(--dore))); animation-delay: calc(200ms + var(--i, 0) * 30ms); }
.paie-solde-cellule.negatif .paie-solde-barre, .paie-solde-barre.negatif { background: var(--alerte-fond); }
.paie-tableau tr { --i: 0; }

/* Formulaire de nouvelle demande */
.paie-grille-demande { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; }
@media (max-width: 1000px) { .paie-grille-demande { grid-template-columns: minmax(0, 1fr); } }
.paie-formulaire-titre { margin-bottom: 18px; }
.paie-case-carte {
    align-items: flex-start; gap: 11px; padding: 12px 14px; border: 1px solid var(--bord); border-radius: var(--rayon);
    background: var(--surface-2); transition: border-color var(--d-2), background var(--d-2);
}
.paie-case-carte input { margin-top: 2px; }
.paie-case-carte span strong { display: block; font-weight: 600; }
.paie-case-carte span small { display: block; color: var(--texte-2); font-size: .8rem; font-weight: 400; }
.paie-case-carte:hover { border-color: var(--bord-fort); }
.paie-case-carte:has(input:checked) { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-fond); }
.paie-aside { display: flex; flex-direction: column; gap: 18px; }
.paie-aside .carte { margin: 0; }
.paie-solde-titre { margin: 0 0 14px; font-size: .95rem; }
.paie-solde-vide { display: flex; align-items: center; gap: 12px; color: var(--texte-2); font-size: .87rem; }
.paie-solde-vide p { margin: 0; }
.paie-solde-vide[hidden], .paie-solde-carte [data-solde-plein][hidden] { display: none; }
.paie-solde-carte .paie-solde-chiffre { margin: 14px 0 8px; color: var(--texte-2); font-size: .88rem; }
.paie-solde-carte .paie-solde-chiffre strong { font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; color: var(--texte); margin-right: 4px; }
.paie-bon-a-savoir h2 { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.paie-bon-a-savoir h2 .ico { color: var(--info); width: 17px; height: 17px; }
.paie-bon-a-savoir ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.paie-bon-a-savoir li { position: relative; padding-left: 16px; font-size: .86rem; color: var(--texte-2); }
.paie-bon-a-savoir li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--marque-vif); }
.paie-bon-a-savoir strong { color: var(--texte); }

/* Calendrier des absences */
.paie-legende { margin: 0 0 14px; gap: 8px 18px; }
.paie-legende i { border: 0; width: 16px; height: 12px; }
.paie-legende .paie-cal-bloc { position: static; display: inline-block; height: 12px; border-radius: 4px; }
.paie-cal-temoin { border-radius: 4px; box-shadow: inset 0 0 0 1px var(--bord-fort); }
.paie-cal-temoin.ferie { background: color-mix(in srgb, var(--dore) 22%, var(--surface)); }
.paie-cal-temoin.we { background: var(--surface-3); }
.paie-cal-temoin.auj { background: color-mix(in srgb, var(--marque-vif) 14%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--marque-vif); }
.paie-cal { font-size: .76rem; }
.paie-cal th, .paie-cal td { min-width: 26px; height: 40px; padding: 0; border-right-color: color-mix(in srgb, var(--bord) 60%, transparent); }
.paie-cal thead th { height: 46px; padding: 4px 0; vertical-align: middle; }
.paie-cal-jsem { display: block; font-size: .64rem; font-weight: 600; color: var(--texte-2); letter-spacing: .04em; }
.paie-cal-num { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; font-size: .78rem; font-weight: 650; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.paie-cal-num { transition: background var(--d-2), color var(--d-2), transform var(--d-2) var(--ease-ressort); }
.paie-cal th.survol .paie-cal-num { background: var(--surface-3); color: var(--texte); transform: scale(1.08); }
.paie-cal th.auj .paie-cal-num { background: var(--marque); color: var(--surface); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--marque-vif) 80%, transparent); }
.paie-cal th.auj .paie-cal-jsem { color: var(--marque-texte); }
.paie-cal td.auj, .paie-cal th.auj { background: color-mix(in srgb, var(--marque-vif) 7%, var(--surface)); }
.paie-cal .nom { min-width: 180px; padding: 0 12px; box-shadow: -23px 0 0 var(--surface); }
.paie-cal thead th.nom { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; vertical-align: middle; }
.paie-cal tbody th.nom { font-weight: inherit; }
.paie-cal tbody tr { height: 46px; }
.paie-cal-personne { display: flex; align-items: center; gap: 9px; color: var(--texte); }
.paie-cal-personne .avatar { width: 26px; height: 26px; font-size: .62rem; }
.paie-cal-personne strong { font-size: .8rem; font-weight: 600; line-height: 1.25; }
.paie-cal-personne small { font-size: .7rem; line-height: 1.25; }
.paie-cal td { position: relative; transition: background var(--d-1); }
.paie-cal tbody tr:hover td { background: color-mix(in srgb, var(--marque-vif) 5%, var(--surface)); }
.paie-cal tbody tr:hover .nom { background: color-mix(in srgb, var(--marque-vif) 7%, var(--surface)); }
.paie-cal tbody td:not(.nom):hover { box-shadow: inset 0 0 0 1.5px var(--marque-vif); }
.paie-cal-bloc {
    position: absolute; inset: 9px 3px; display: flex; align-items: center; justify-content: flex-start; padding-left: 6px;
    border-radius: 7px; font-size: .68rem; font-weight: 700; color: var(--famille);
    background: color-mix(in srgb, var(--famille) 20%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--famille) 35%, transparent);
    transform-origin: left; animation: paie-bloc var(--d-4) var(--ease-out) both; animation-delay: 220ms;
}
.paie-cal-bloc.suite-g { left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.paie-cal-bloc.suite-d { right: -1px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.paie-cal-bloc.suite-g:not(.suite-d) { box-shadow: inset -1px 0 0 color-mix(in srgb, var(--famille) 35%, transparent), inset 0 1px 0 color-mix(in srgb, var(--famille) 35%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--famille) 35%, transparent); }
.paie-cal-bloc.suite-g.suite-d { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--famille) 35%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--famille) 35%, transparent); }
.paie-cal-bloc.suite-d:not(.suite-g) { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--famille) 35%, transparent), inset 0 1px 0 color-mix(in srgb, var(--famille) 35%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--famille) 35%, transparent); }
.paie-cal-bloc.attente {
    --famille: var(--attention);
    background: repeating-linear-gradient(135deg, var(--attention-fond) 0 4px, var(--surface) 4px 8px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--attention) 45%, transparent);
}
.paie-cal tfoot td { height: 36px; background: var(--surface-2); border-top: 1px solid var(--bord-fort); }
.paie-cal tfoot td.nom { background: var(--surface-2); font-size: .74rem; }
.paie-cal-compte { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--surface-3); color: var(--texte-2); font-weight: 700; font-size: .7rem; }
.paie-cal-compte.fort { background: var(--attention-fond); color: var(--attention); }
@media (max-width: 700px) {
    .paie-cal .nom { min-width: 150px; padding: 0 8px; }
    .paie-cal-personne .avatar { display: none; }
}

/* ---------- Bulletin de paie (bulletin.php) ----------
   Barre d'outils soignée à l'écran ; le bulletin reste un document papier
   sobre, blanc dans les deux thèmes, imprimable en A4. */

.paie-barre-bulletin {
    position: sticky; top: calc(var(--topbar) + 10px); z-index: 20; align-items: center; gap: 12px 16px; max-width: 880px; margin: 0 auto 18px; padding: 10px 10px 10px 12px;
    border: 1px solid var(--bord); border-radius: var(--rayon-l); background: var(--verre); box-shadow: var(--ombre-2);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
}
.paie-barre-titre { flex: 1; min-width: 0; text-align: center; }
.paie-barre-titre h1 { margin: 0; font-size: 1rem; letter-spacing: -.01em; }
.paie-barre-titre p { margin: 2px 0 0; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; color: var(--texte-2); }
.paie-barre-titre .badge { font-size: .7rem; }
@media (max-width: 640px) {
    .paie-barre-bulletin { position: static; padding: 8px; }
    .paie-barre-titre { order: -1; flex: 1 1 100%; }
    .paie-barre-bulletin > .btn { flex: 1 1 0; }
}

.paie-bulletin-employeur h2 { display: flex; align-items: center; gap: 9px; }
.paie-bulletin-logo {
    width: 26px; height: 26px; flex: none; border-radius: 7px; display: inline-grid; place-items: center; color: #fff7ea;
    background: linear-gradient(145deg, #f6c46e, #d9792a 70%, #b85a16); -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.paie-bulletin-logo svg { width: 18px; height: 18px; }
.paie-bulletin .bulletin-titre h1 { font-size: 1.08rem; letter-spacing: .12em; font-weight: 750; }
.paie-bulletin .bulletin-infos strong { font-weight: 600; text-align: right; }
.paie-bulletin table { font-variant-numeric: tabular-nums; }
.paie-bulletin td.num { text-align: right; white-space: nowrap; }
.paie-bulletin th { color: var(--b-texte-2); font-weight: 650; white-space: nowrap; }
.paie-bulletin th:not(:first-child), .paie-bulletin td.num { width: 1%; }
/* Le bulletin est un document papier : couleurs fixes, identiques dans les deux thèmes */
.paie-bulletin { --b-ligne: #e6ddd3; --b-net: #faf6f1; }
.paie-bulletin tbody tr:not(.total) td { border-top-color: var(--b-ligne); border-bottom-color: var(--b-ligne); }
.paie-bulletin .net { background: var(--b-net); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.paie-bulletin .net span { font-weight: 650; letter-spacing: .06em; font-size: .92rem; }
.paie-bulletin .net strong { font-variant-numeric: tabular-nums; }
.paie-bulletin-pied strong, .paie-bulletin .bulletin-pied strong { color: var(--b-texte); }

@media screen {
    .paie-bulletin { max-width: 880px; padding: 40px 44px 36px; border-radius: 6px; border-color: transparent; box-shadow: 0 1px 2px rgba(28, 23, 20, .08), 0 18px 40px -16px rgba(28, 23, 20, .28); }
    .paie-bulletin + .paie-bulletin { margin-top: 28px !important; }
    :root[data-theme="dark"] .paie-bulletin { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 56px -16px rgba(0, 0, 0, .8); }
}
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .paie-bulletin { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 56px -16px rgba(0, 0, 0, .8); }
}
@media screen and (max-width: 640px) {
    .paie-bulletin { padding: 18px 14px; }
    .paie-bulletin table { min-width: 640px; }
    .paie-bulletin td:first-child { min-width: 190px; }
}
@media print {
    /* style.css repasse :root en clair, mais :root[data-theme="dark"] (plus spécifique) garde
       color-scheme: dark : le fond de page (marges @page) s'imprimerait alors en noir. */
    :root:has(body.paie-page-bulletin) { color-scheme: light !important; background: #fff; }
    /* Chaque bulletin commence en haut de sa page (l'espacement inline ne sert qu'à l'écran) */
    .paie-bulletin { font-size: 10.5px; margin-top: 0 !important; }
    .paie-bulletin th, .paie-bulletin td { padding: 3px 6px; }
    .paie-bulletin .bulletin-entete { padding-bottom: 8px; margin-bottom: 8px; }
    .paie-bulletin .bulletin-infos { margin-bottom: 10px; }
    .paie-bulletin .bulletin-infos div { padding: 2px 0; }
    .paie-bulletin tr { break-inside: avoid; }
    .paie-bulletin .net, .paie-bulletin .bulletin-pied { break-inside: avoid; }
}

/* ---------- Primes & retenues, avances (elements.php, avances.php) ---------- */

.paie-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.paie-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .paie-stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .paie-stats-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .paie-stats-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.paie-formulaire .form-actions { padding-top: 16px; border-top: 1px solid var(--bord); }
.paie-champ-suffixe { position: relative; }
.paie-champ-suffixe input { padding-right: 58px; font-variant-numeric: tabular-nums; }
.paie-champ-suffixe span {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 2px 8px; border-radius: 6px;
    font-size: .72rem; font-weight: 650; letter-spacing: .03em; color: var(--texte-2); background: var(--surface-3); pointer-events: none;
}
.paie-libelle { white-space: normal !important; min-width: 150px; color: var(--texte); }
.paie-libelle-texte { display: block; margin-bottom: 4px; font-weight: 550; }
.paie-libelle .badge { font-size: .7rem; padding: 0 8px 0 7px; }

/* Champs qui ne s'appliquent pas : case « non imposable » pour une retenue,
   retenue mensuelle pour un acompte */
.paie-form-element:has(#sens option[value="retenue"]:checked) .paie-champ-imposable,
.paie-form-avance:has(#type option[value="acompte"]:checked) .paie-champ-mensualite { opacity: .42; }
.paie-form-element:has(#sens option[value="retenue"]:checked) .paie-champ-imposable { pointer-events: none; }

.paie-champs-avance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .paie-champs-avance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .paie-champs-avance { grid-template-columns: minmax(0, 1fr); } }

.paie-remboursement { display: flex; flex-direction: column; gap: 5px; min-width: 124px; }
.paie-remboursement .progression { height: 6px; }
.paie-remboursement .progression > span { animation-delay: calc(240ms + var(--i, 0) * 35ms); }
.paie-remboursement small { color: var(--texte-2); font-size: .76rem; font-variant-numeric: tabular-nums; }
.paie-remboursement.solde .progression > span { background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 60%, var(--dore))); }
.paie-aide-bas { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; }
.paie-aide-bas .ico { width: 15px; height: 15px; margin-top: 1px; }

/* ---------- Registre des paiements, déclaration (registre.php, declaration.php) ---------- */

.paie-impayes { border-color: color-mix(in srgb, var(--attention) 30%, var(--bord)); background: linear-gradient(180deg, var(--attention-fond), var(--surface) 120px); }
.paie-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 8px 18px; }
.paie-liste li {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 9px 10px; border-radius: var(--rayon);
    background: var(--surface); border: 1px solid var(--bord); transition: border-color var(--d-2), box-shadow var(--d-2), transform var(--d-2) var(--ease-out);
}
.paie-liste li:hover { border-color: var(--bord-fort); box-shadow: var(--ombre-1); transform: translateY(-1px); }
.paie-liste .personne { flex: 1 1 200px; min-width: 0; }
.paie-liste .paie-personne-texte strong { white-space: normal; line-height: 1.3; }
.paie-liste-droite { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }

.paie-mode-paiement { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.paie-mode-paiement::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--famille); flex: none; }
.paie-tableau code, .paie-code { padding: 2px 7px; border-radius: 6px; background: var(--surface-3); color: var(--texte-2); font-size: .78rem; }
.paie-date { font-variant-numeric: tabular-nums; }

.paie-stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1250px) {
    .paie-stats-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .paie-stats-5 > * { grid-column: span 2; }
    .paie-stats-5 > :nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 760px) {
    .paie-stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .paie-stats-5 > *, .paie-stats-5 > :nth-child(n+4) { grid-column: auto; }
    .paie-stats-5 > :last-child { grid-column: 1 / -1; }
}

.paie-filtre-declaration .filtres { margin-bottom: 14px; align-items: stretch; }
.paie-filtre-declaration .filtres > div:not(.paie-filtre-periode) { display: flex; flex-direction: column; justify-content: flex-end; }
.paie-filtre-periode {
    margin-left: auto; display: flex; flex-direction: column; justify-content: center; padding: 8px 16px; border-radius: var(--rayon);
    background: var(--marque-doux); border: 1px solid color-mix(in srgb, var(--marque-vif) 22%, transparent); min-width: 200px;
}
.paie-filtre-libelle { font-size: .7rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--marque-texte); }
.paie-filtre-periode strong { font-size: 1.05rem; letter-spacing: -.01em; }
.paie-filtre-periode small { color: var(--texte-2); font-size: .78rem; }
.paie-filtre-texte { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--texte-2); font-size: .86rem; }
.paie-filtre-texte .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--info); }
.paie-filtre-declaration .paie-note { margin: 12px 0 0; }
@media (max-width: 640px) {
    .paie-filtre-declaration .filtres > div { min-width: 0; flex: 1 1 140px; }
    .paie-filtre-declaration .filtres > div:has(#periode) { flex-basis: 175px; }
    .paie-filtre-periode { margin-left: 0; flex-basis: 100% !important; }
}

.paie-versement { display: flex; flex-direction: column; }
.paie-versement .paie-anneau-ligne { align-items: center; }
.paie-versement-liste li { padding: 9px 0; font-size: .87rem; }
.paie-versement-liste li span { display: inline-flex; align-items: center; gap: 9px; color: var(--texte-2); }
.paie-versement-liste li i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.paie-versement-liste li strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.paie-versement-liste .paie-versement-total { border-top: 1px solid var(--bord-fort); margin-top: 2px; }
.paie-versement-liste .paie-versement-total span, .paie-versement-liste .paie-versement-total strong { color: var(--texte); font-size: .95rem; }
@media (max-width: 1250px) and (min-width: 901px) { .paie-versement .paie-anneau-ligne { grid-template-columns: minmax(0, 1fr); justify-items: center; } .paie-versement-liste { width: 100%; } }
@media (max-width: 520px) { .paie-versement .paie-anneau-ligne { grid-template-columns: minmax(0, 1fr); justify-items: center; } .paie-versement-liste { width: 100%; } }

/* ---------- Animations propres à la zone ---------- */

@keyframes paie-halo { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(1.75); opacity: 0; } }
@keyframes paie-ligne { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes paie-bloc { from { opacity: 0; transform: scaleX(.4); } to { opacity: 1; transform: none; } }
@keyframes paie-deplie { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

@media print {
    .paie-pilote, .paie-vigilance, .paie-synthese { display: none !important; }
}