/* ===========================================================================
   ÉCRAN RAPPORT DU PERSONNEL (/app/rapport-personnel, /app/etat-salaries)
   Port de la passation « Rapport Employes » (Projet EasyTime, Design 4).

   SA PROPRE FEUILLE, ET NON LA QUEUE DE modele-erp.css comme le demandait la
   passation : c'est là que toutes les branches ouvertes le même jour entrent en
   conflit — sur la dernière ligne du fichier et sur la clé de cache partagée,
   jamais sur la substance. Le <link> est dans App.razor, APRÈS modele-erp.css.

   AUCUNE COULEUR EN DUR. La passation en écrivait une soixantaine (#0A6ED1,
   #354A5F, #89919A, #EDF1F7…). Elles sont toutes des jetons --et-* de la
   charte — mêmes valeurs, mais qui suivent la bascule de thème au lieu de la
   trouer. Corollaire : l'écran ne pose plus une seule couleur en style inline ;
   ce qui variait par une teinte calculée en C# passe par une CLASSE d'état.

   CE QUI N'EST PAS ICI, PARCE QUE LE GABARIT LE PORTE DÉJÀ
     · l'en-tête de page blanc à filet bleu ......... .ecran-tete (easytime-shell)
     · la trame « filtre latéral + corps » repliable  .ecran-filtre (easytime-shell)
     · le sélecteur segmenté des trois vues ......... .mx-seg (modele-erp §11)
     · les boutons plats et blancs .................. .mx-btn* (modele-erp)
     · le popover d'export et ses vignettes ......... .tbl-menu*, .tbl-ext* (shell)
     · les pastilles de moyens de pointage .......... .tbl-moyen* (shell)
   Les redéclarer sous un préfixe .rp-* aurait fait une cinquième copie du
   segmenté et une troisième du menu d'export. Rien ici n'est générique : une
   classe que deux écrans emploieraient monterait en section 11 du gabarit.
   =========================================================================== */

/* --- Corps de l'écran ---------------------------------------------------- */
.rp-cold { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* --- Barre d'outils en bande : c'est un écran de LISTE, elle vient en premier
       du corps — repli du filtre, sélecteur de vue, signature du périmètre. --- */
.rp-outils {
    display: flex; align-items: center; gap: 8px; row-gap: 8px; flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--et-surface-2); border: 1px solid var(--et-hairline);
}
.rp-signature {
    margin-left: auto;
    font-family: var(--et-font-mono); font-size: 12px;
    color: var(--et-faint); white-space: nowrap;
}

/* Compteur porté PAR un bouton (« Colonnes 9 / 11 ») : même chasse fixe que la
   signature, mais sans la marge automatique qui la pousse en bout de bande. */
.rp-compte {
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 400;
    color: var(--et-faint); white-space: nowrap;
}

/* Le popover du gabarit s'ancre à gauche sous son bouton (.tbl-menu-liste) ;
   celui-ci pend d'un bouton collé au bord droit de l'en-tête de page, où il
   déborderait de la fenêtre. Seul l'ancrage change — le dessin reste celui du
   gabarit. */
.rp-menu-droite { right: 0; left: auto; }

/* --- Indicateurs : filets obtenus par une gouttière de 1px sur fond de filet.
       Ils restent visibles dans les TROIS vues — le périmètre ne doit jamais
       quitter l'écran. --- */
.rp-ind {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
    gap: 1px; background: var(--et-hairline); border: 1px solid var(--et-hairline);
}
.rp-ind .k { background: var(--et-surface); padding: 13px 15px; }
/* Seule tuile teintée, et seulement quand elle mord : un présent sans moyen de
   pointage ne peut pas badger, ses journées remonteront en absence. */
.rp-ind .k.est-alerte { background: var(--et-avertissement-bg); }
.rp-ind .hdr { display: flex; align-items: center; gap: 7px; }
.rp-ind .pc { width: 6px; height: 6px; border-radius: var(--et-r-pill); flex: none; }
.rp-ind .pc-bleu    { background: var(--et-form-blue); }
.rp-ind .pc-vert    { background: var(--et-ok); }
.rp-ind .pc-gris    { background: var(--et-muted); }
.rp-ind .pc-orange  { background: var(--et-avertissement); }
.rp-ind .pc-ardoise { background: var(--et-table-head); }
.rp-ind .l {
    flex: 1; min-width: 0; font-size: 12px; color: var(--et-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-ind .val { margin-top: 6px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.rp-ind .v {
    font-family: var(--et-font-mono); font-size: 19px; font-weight: 500; color: var(--et-ink);
}
.rp-ind .v.est-ok     { color: var(--et-ok); }
.rp-ind .v.est-alerte { color: var(--et-avertissement-ink); }
.rp-ind .v.est-inerte { color: var(--et-inerte); }
/* La précision accompagne TOUJOURS la valeur : « 41 % » sans « du périmètre »
   ne se vérifie pas. Un pourcentage sans dénominateur est une erreur. */
.rp-ind .d { flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--et-faint); }

/* --- Cartes --------------------------------------------------------------- */
.rp-carte { background: var(--et-surface); border: 1px solid var(--et-hairline); overflow: hidden; }
.rp-carte-hdr {
    display: flex; align-items: baseline; gap: 10px; row-gap: 8px; flex-wrap: wrap;
    padding: 12px 18px;
    background: var(--et-surface-2); border-bottom: 1px solid var(--et-hairline);
    font-size: 14px; font-weight: 700; color: var(--et-table-head-encre);
}
.rp-carte-hdr.est-reglee { align-items: center; }
.rp-carte-hdr .t { flex: 1 1 160px; min-width: 140px; }
.rp-carte-hdr .cpt {
    margin-left: auto;
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 400; color: var(--et-faint);
}
.rp-carte-hdr .cpt.est-collee { margin-left: 0; }
.rp-carte-hdr .ax {
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .12em; color: var(--et-muted);
}
/* LA MÉTHODE SE DIT, PARTOUT. Chaque série et chaque table porte sa formule
   sous elle : deux séries voisines peuvent avoir des logiques opposées, et sans
   la note la seconde se lit comme la première. */
.rp-carte-pied, .rp-methode {
    font-size: 12px; line-height: 1.5; color: var(--et-faint); text-wrap: pretty;
}
.rp-carte-pied {
    padding: 11px 18px;
    background: var(--et-surface-3); border-top: 1px solid var(--et-hairline);
}

.rp-paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 980px) { .rp-paire { grid-template-columns: minmax(0, 1fr); } }

/* --- Barres — LA RÈGLE DE LA VALEUR --------------------------------------
   Pilule de 17px sur piste --et-piste. La valeur SUIT la fin du remplissage :
   posée hors de la pilule, en frère à sa droite. Elle passe DEDANS, en blanc
   aligné à droite, seulement au-delà de 70 % de remplissage — quand la barre
   couvre les glyphes. La couleur, elle, ne se décide JAMAIS sur une fraction de
   piste : elle est celle de la série, et le gris inerte celle d'une valeur
   nulle. Une valeur nulle garde sa ligne et une barre de largeur zéro, sinon on
   croit la valeur absente du référentiel. */
.rp-barres { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 11px; }
.rp-barre .lig { display: flex; align-items: baseline; gap: 8px; }
.rp-barre .lb {
    flex: 1; min-width: 0; font-size: 13px; color: var(--et-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-barre .part { flex: none; font-size: 12px; color: var(--et-faint); }
.rp-barre .piste { margin-top: 5px; display: flex; align-items: center; gap: 7px; }
.rp-barre .pil {
    position: relative; flex: 1; min-width: 44px; height: 17px;
    background: var(--et-piste); border-radius: var(--et-r-pill);
    overflow: hidden; display: flex; align-items: center;
}
.rp-barre .fill { flex: none; height: 100%; background: var(--et-form-blue); }
.rp-barre .dedans {
    position: absolute; left: 0; padding: 0 8px; text-align: right;
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 500; color: var(--et-sur-aplat);
}
.rp-barre .dehors {
    flex: none; font-family: var(--et-font-mono); font-size: 12px; font-weight: 500;
    color: var(--et-ink); white-space: nowrap;
}
/* Deux séries, deux teintes, et une troisième pour le zéro. */
.rp-barre.est-moyen .fill { background: var(--et-table-head); }
.rp-barre.est-nulle .fill { background: var(--et-inerte); }
.rp-barre.est-nulle .lb, .rp-barre.est-nulle .dehors { color: var(--et-inerte); }

/* --- Histogramme d'ancienneté --------------------------------------------- */
.rp-hist-corps { padding: 14px 18px 16px; }
.rp-hist { display: grid; gap: 10px; align-items: end; min-height: 130px; }
.rp-hist .col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rp-hist .v {
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 500; color: var(--et-ink);
}
/* 3px minimum même à zéro : la tranche reste lisible comme VIDE, non absente. */
.rp-hist .b { width: 100%; min-height: 3px; background: var(--et-form-blue); }
.rp-hist .col.est-vide .v { color: var(--et-inerte); }
.rp-hist .col.est-vide .b { background: var(--et-piste); }
.rp-hist-axe {
    display: grid; gap: 10px; border-top: 1px solid var(--et-hairline);
    padding-top: 7px; margin: 4px 0 12px;
}
.rp-hist-axe span { text-align: center; font-size: 12px; color: var(--et-muted); overflow-wrap: anywhere; }

/* --- « À revoir » : vigilance, pas anomalie -------------------------------
   Le titre du bloc le dit : deux des trois lignes ne signalent aucune faute.
   Seule la ligne critique porte l'ambre ; les autres restent bleues. */
.rp-alertes { padding: 4px 18px 12px; }
.rp-alertes .al {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 0; border-bottom: 1px solid var(--et-rang);
}
.rp-alertes .al:last-child { border-bottom: none; }
.rp-alertes .pc { flex: none; width: 6px; height: 6px; background: var(--et-form-blue); }
.rp-alertes .al.est-critique .pc { background: var(--et-avertissement); }
.rp-alertes .tx { flex: 1; min-width: 0; }
.rp-alertes .t { font-size: 13px; font-weight: 600; color: var(--et-ink); }
.rp-alertes .d { margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--et-muted); }
.rp-alertes .v {
    flex: none; font-family: var(--et-font-mono); font-size: 13px; font-weight: 500;
    color: var(--et-form-blue-encre);
}
.rp-alertes .al.est-critique .v { color: var(--et-avertissement-ink); }

/* --- Tables --------------------------------------------------------------- */
.rp-table-hote { overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rp-table thead th {
    padding: 9px 16px;
    background: var(--et-table-head); border-bottom: 1px solid var(--et-table-head-fonce);
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .14em; color: var(--et-sur-ardoise);
    white-space: nowrap; text-align: left;
}
.rp-table th.d, .rp-table td.d { text-align: right; }
.rp-table th.triable { cursor: pointer; user-select: none; }
.rp-table th.triable:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }
.rp-table th .fl { color: var(--et-form-blue-encre); }
.rp-table th.tot { background: var(--et-table-head-fonce); color: var(--et-sur-ardoise-plein); }
.rp-table tbody td {
    padding: 6px 16px; border-bottom: 1px solid var(--et-rang);
    color: var(--et-ink); white-space: nowrap;
}
.rp-table tbody tr.alt td { background: var(--et-surface-3); }

/* LA CELLULE ANCRÉE REPREND LA TEINTE DE SA RANGÉE — même raison que dans
   ecran-rapports-heures.css (section 8), où le cas est expliqué au long. Résumé : le
   sélecteur du lot 03 sur la cellule figée pèse (0,4,2), plus que la zébrure
   ci-dessus (0,2,3) et que .rp-total td (0,2,1) plus bas. Sans ces deux règles,
   la colonne du matricule perdait sa zébrure une ligne sur deux, et la rangée
   de total son bandeau, à l'endroit même qui les nomme. Les deux règles
   ci-dessous pèsent (0,5,2) : elles gagnent par spécificité, sans dépendre de
   l'ordre de chargement des feuilles.

   Les rangées .rp-bloc (rupture de groupe) n'en ont pas besoin : première
   cellule fusionnée, donc hors du :not([colspan]) du lot. */
.rp-table.tbl-ancree[data-ancre="1"] > tbody > tr.alt > :nth-child(1) { background: var(--et-surface-3); }
.rp-table.tbl-ancree[data-ancre="1"] > tbody > tr.rp-total > :nth-child(1) { background: var(--et-surface-2); }
.rp-table .mono { font-family: var(--et-font-mono); font-size: 13px; }
.rp-table .mat { color: var(--et-table-head-encre); }
.rp-table .nom { font-weight: 600; }
/* Un salarié sorti reste LISIBLE, neutralisé et non masqué. */
.rp-table .nom.est-sorti { color: var(--et-faint); font-weight: 500; }
.rp-table .gris { color: var(--et-muted); }
.rp-table .sep { border-right: 1px solid var(--et-rang); }
.rp-table td.tot { border-left: 1px solid var(--et-hairline); font-weight: 500; }
.rp-table.croise tbody td { padding: 9px 14px; }
/* Cellule sans salarié : un TIRET, pas un zéro — un zéro se lit comme un
   résultat, un tiret comme une absence de matière. Elle n'est pas masquée. */
.rp-table.croise td.est-vide { color: var(--et-inerte); }
/* Quatre paliers de teinte, et non une couleur calculée par cellule : la nuance
   dit « plus dense », elle ne code aucune valeur. Repli sur le fond de surface
   là où color-mix() n'est pas connu. */
.rp-table.croise td.n1 { background: var(--et-surface); background: color-mix(in srgb, var(--et-tint) 35%, var(--et-surface)); }
.rp-table.croise td.n2 { background: var(--et-surface); background: color-mix(in srgb, var(--et-tint) 60%, var(--et-surface)); }
.rp-table.croise td.n3 { background: var(--et-surface); background: color-mix(in srgb, var(--et-tint) 80%, var(--et-surface)); }
.rp-table.croise td.n4 { background: var(--et-tint); }

.rp-total td {
    padding: 10px 16px !important;
    border-top: 2px solid var(--et-filet-fort); border-bottom: none;
    background: var(--et-surface-2); font-weight: 700;
}

/* Bandeau de rupture : teinte d'information — il annonce un groupe et son poids. */
.rp-bloc {
    display: flex; align-items: baseline; gap: 10px; padding: 7px 16px !important;
    background: var(--et-tint);
    border-top: 1px solid var(--et-filet-fort); border-bottom: 1px solid var(--et-filet-fort);
    white-space: normal;
}
.rp-bloc .e { font-size: 13px; font-weight: 700; color: var(--et-table-head-encre); }
.rp-bloc .s {
    margin-left: auto; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted);
}
.rp-bloc.est-total {
    padding: 9px 16px !important;
    background: var(--et-surface-2); border-top: 2px solid var(--et-filet-fort); border-bottom: none;
}
.rp-bloc.est-total .s { font-weight: 500; color: var(--et-ink); }

/* --- Pastille d'état de la ligne ------------------------------------------ */
.rp-etat {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
    font-size: 12px; font-weight: 600;
    background: var(--et-neutre-bg); color: var(--et-neutre);
}
.rp-etat .pc { width: 6px; height: 6px; border-radius: var(--et-r-pill); background: currentColor; }
.rp-etat.est-actif     { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.rp-etat.est-vigilance { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }

/* --- Vide et pagination --------------------------------------------------- */
.rp-vide { padding: 42px 24px; text-align: center; }
.rp-vide .t { font-size: 14px; font-weight: 600; color: var(--et-ink); }
.rp-vide .d { margin-top: 6px; font-size: 13px; color: var(--et-muted); }

.rp-pagination {
    display: flex; align-items: center; gap: 12px; row-gap: 10px; flex-wrap: wrap;
    padding: 12px 18px; background: var(--et-surface-2); border-top: 1px solid var(--et-hairline);
}
.rp-pagination .etat { flex: 1 1 220px; min-width: 200px; font-size: 13px; color: var(--et-muted); }
.rp-pagination .cmd { margin-left: auto; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rp-pagination .lg {
    font-family: var(--et-font-mono); font-size: 12px; text-transform: uppercase;
    letter-spacing: .12em; color: var(--et-faint); white-space: nowrap;
}
.rp-pg, .rp-pgn {
    height: 31px; border: 1px solid var(--et-form-border); background: var(--et-surface);
    font-family: inherit; font-size: 13px; color: var(--et-ink); cursor: pointer;
}
.rp-pg { padding: 0 11px; white-space: nowrap; }
.rp-pgn { min-width: 31px; }
.rp-pg:disabled { color: var(--et-inerte); cursor: not-allowed; }
.rp-pgn:hover { border-color: var(--et-inerte); }
/* Numéro de page actif en BLEU : jamais l'orange, ce n'est pas un engagement. */
.rp-pgn.est-actif {
    border-color: var(--et-form-blue); background: var(--et-tint);
    color: var(--et-form-blue-d); font-weight: 600;
}

/* --- Impression ----------------------------------------------------------
   Filet de sécurité seulement : le document remis passe par l'export PDF, qui
   met en page les sections cochées. Ce bloc évite qu'un Ctrl+P imprime le
   filtre latéral et la pagination. */
@media print {
    .rp-outils, .rp-pagination { display: none; }
    .rp-carte { border-color: var(--et-filet-fort); break-inside: avoid; }
    .rp-paire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rp-table { font-size: 10pt; }
    .rp-table thead { display: table-header-group; }
    .rp-table tr { break-inside: avoid; }
}