/* ===========================================================================
   ÉCRAN FEUILLE DE PRÉSENCE (/app/feuille-presence)
   Maquette « Feuille de présence » (docs/modeles/design_handoff_feuille_presence),
   posée le 2026-10-01, portée le 2026-10-04.

   SA PROPRE FEUILLE, SON PROPRE PRÉFIXE (.fpr-*) : ecran-rapports-heures.css (.rh-*) reste
   celle des menus déroulants partagés (.rh-pop*), et la bande de contexte est
   PanneauGenerationHeures en mode EnBande, dessinée par ecran-cumul-heures.css. Les pastilles
   viennent du gabarit.

   LE PRÉFIXE EST « .fpr- » ET NON « .fp- » (2026-10-04) : .fp-* est celui de la fiche
   salarié (ecran-fiche-personnel.css). La première version de cette feuille l'avait repris ;
   les blocs homonymes (.fp-nav, .fp-tuiles, .fp-jour, .fp-lib-carte…) fusionnaient, et la
   fiche affichait cinq colonnes de tuiles au lieu de quatre. Rien ne l'avait signalé.

   AUCUNE COULEUR EN DUR : tout passe par les jetons --et-*.
   =========================================================================== */

.fpr-corps { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.fpr-outils { flex-wrap: wrap; }
.fpr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 14px;
    background: var(--et-surface); border: 1px solid var(--et-form-border); border-radius: 0;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--et-ink); cursor: pointer; white-space: nowrap;
}
.fpr-btn:hover { background: var(--et-rang); }
.fpr-btn[aria-expanded="true"] { border-color: var(--et-form-blue); }
.fpr-btn-plein { width: 100%; }
.fpr-compte { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.fpr-cta { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.fpr-pop { width: 262px; z-index: 30; }
.fpr-pop-droite { right: 0; left: auto; }
.fpr-pop-item { min-height: 44px; }

/* --- La bascule de rupture, posée dans la bande ----------------------------- */
.fpr-seg { display: flex; margin-left: auto; }
.fpr-seg > button {
    min-height: 44px; padding: 0 14px; margin-left: -1px;
    background: var(--et-surface); border: 1px solid var(--et-form-border); border-radius: 0;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--et-ink); cursor: pointer; white-space: nowrap;
}
.fpr-seg > button:first-child { margin-left: 0; }
.fpr-seg > button.est-actif { position: relative; background: var(--et-table-head); border-color: var(--et-table-head); color: var(--et-sur-ardoise-plein); }

/* --- Le salarié --------------------------------------------------------------- */
.fpr-salarie {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 24px;
    padding: 14px 16px; background: var(--et-surface); border: 1px solid var(--et-hairline);
}
.fpr-nav { display: flex; flex-direction: column; gap: 4px; flex: 0 1 420px; min-width: 0; }
.fpr-lbl { font-size: 12px; font-weight: 600; color: var(--et-muted); }
.fpr-nav-ligne { display: flex; gap: 8px; }
.fpr-carre {
    flex: none; width: 44px; height: 44px; display: inline-grid; place-items: center;
    background: var(--et-surface); border: 1px solid var(--et-form-border); color: var(--et-ink); cursor: pointer;
}
.fpr-carre:disabled { cursor: default; color: var(--et-inerte); }
.fpr-select {
    flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px;
    background: var(--et-surface); border: 1px solid var(--et-bord-champ); border-radius: 0;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--et-ink);
}
.fpr-ident { display: flex; flex-direction: column; gap: 2px; flex: 2 1 320px; min-width: 0; padding-bottom: 2px; }
.fpr-ident > strong { font-size: 18px; color: var(--et-ink); }
.fpr-ident > span { font-size: 13px; color: var(--et-muted); }
.fpr-code { font-family: var(--et-font-mono); font-weight: 600; color: var(--et-form-blue-d); }

.fpr-neg { color: var(--et-danger-ink); }

/* --- Cartes ------------------------------------------------------------------- */
.fpr-carte { min-width: 0; background: var(--et-surface); border: 1px solid var(--et-hairline); }
.fpr-carte-tete {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
    padding: 12px 16px; border-bottom: 1px solid var(--et-hairline);
}
.fpr-carte-titre { flex: 1 1 auto; margin: 0; font-size: 16px; font-weight: 700; color: var(--et-ink); }
.fpr-carte-meta { font-size: 13px; color: var(--et-muted); }

/* --- Le relevé ------------------------------------------------------------------ */
.fpr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fpr-table thead th {
    padding: var(--et-cellule-tete-y) 10px; background: var(--et-table-head); color: var(--et-sur-ardoise-plein);
    font-weight: 600; text-align: left; white-space: nowrap;
}
.fpr-table thead th:first-child { padding-left: 16px; }
.fpr-table .num { text-align: right; }
.fpr-table tbody td {
    padding: var(--et-cellule-y) 10px; border-top: 1px solid var(--et-hairline); color: var(--et-ink); vertical-align: middle;
}
.fpr-table tbody td:first-child { padding-left: 16px; }
.fpr-table tbody td:last-child { padding-right: 16px; }
.fpr-table tbody tr:hover > td { background: var(--et-rang); }
.fpr-table td.num { font-family: var(--et-font-mono); font-weight: 500; white-space: nowrap; }
.fpr-table td.est-fort { font-weight: 700; }
.fpr-table td.est-tiret { color: var(--et-muted); font-weight: 500; }
.fpr-table td.est-neg { color: var(--et-danger-ink); }
.fpr-jour { font-family: var(--et-font-mono); font-weight: 600; white-space: nowrap; }
.fpr-nature { min-width: 0; }
.fpr-motif { display: block; font-size: 12px; font-weight: 600; color: var(--et-avertissement-ink); }

/* Repos et férié se reculent ; une journée à anomalie se signale (fond ambre, filet). */
.fpr-table tbody tr.est-repos > td,
.fpr-table tbody tr.est-ferie > td { background: var(--et-surface-2); color: var(--et-muted); }
.fpr-table tbody tr.est-anomalie > td { background: var(--et-avertissement-bg); }
.fpr-table tbody tr.est-anomalie > td:first-child { box-shadow: inset 3px 0 0 var(--et-avertissement-mark); }
/* Le tiret gris tombe sous AA sur le fond ambre en sombre : il prend l'encre de la rangée. */
.fpr-table tbody tr.est-anomalie > td.est-tiret { color: var(--et-ink); }

.fpr-semaine > th { padding: 0; border-top: 1px solid var(--et-form-border); background: var(--et-surface-3); }
.fpr-semaine button {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 16px;
    border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--et-ink); text-align: left; cursor: pointer;
}
.fpr-semaine button:hover { background: var(--et-rang); }
.fpr-semaine strong { flex: 1 1 auto; }
.fpr-semaine .bi { transition: transform .15s; }
.fpr-semaine .bi.est-ouvert { transform: rotate(90deg); }
.fpr-semaine-total { font-family: var(--et-font-mono); font-weight: 600; white-space: nowrap; }

.fpr-total {
    display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px;
    padding: 12px 16px; border-top: 2px solid var(--et-table-head); background: var(--et-surface-2); font-size: 13px; color: var(--et-ink);
}
.fpr-total > span { font-family: var(--et-font-mono); font-weight: 700; }

/* Le libellé d'une valeur, affiché en carte seulement — écrit en texte et non en ::before,
   pour qu'un lecteur d'écran le lise. */
.fpr-lib-carte { display: none; }

/* --- Anomalies ----------------------------------------------------------------- */
.fpr-ano {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px;
    padding: 12px 16px; border-top: 1px solid var(--et-hairline);
}
.fpr-carte-tete + .fpr-ano { border-top: 0; }
.fpr-ano-date { flex: none; font-family: var(--et-font-mono); font-size: 13px; color: var(--et-muted); }
.fpr-ano-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; font-size: 13px; color: var(--et-muted); }
.fpr-ano-txt > strong { font-size: 14px; color: var(--et-ink); }

/* --- Visas ---------------------------------------------------------------------- */
.fpr-visas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 16px; }
.fpr-visas > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fpr-visas .l, .fpr-visas .a { font-size: 12px; color: var(--et-muted); }
.fpr-visas .l { font-weight: 600; }
.fpr-visas strong { font-size: 14px; color: var(--et-ink); }
.fpr-visas .trait { height: 40px; border-bottom: 1px solid var(--et-form-border); }

/* --- Sous 1024 px : une carte par jour ------------------------------------------ */
@media (max-width: 1024px) {
    .fpr-seg { flex: 1 1 100%; margin-left: 0; }
    .fpr-nav { flex: 1 1 100%; }

    .fpr-table, .fpr-table tbody { display: block; width: 100%; }
    .fpr-table thead { display: none; }
    .fpr-table tbody tr:not(.fpr-semaine) {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px;
        padding: 12px 16px; border-top: 1px solid var(--et-hairline);
    }
    .fpr-table tbody tr.fpr-semaine, .fpr-table tbody tr.fpr-semaine > th { display: block; }
    .fpr-table tbody td { display: block; padding: 0 !important; border: 0; text-align: left; background: transparent !important; box-shadow: none !important; }
    .fpr-table tbody td.fpr-jour, .fpr-table tbody td.fpr-nature { grid-column: span 2; }
    .fpr-table tbody td.num { text-align: left; }
    .fpr-table tbody td.est-tiret { display: none; }
    .fpr-table tbody tr:hover > td { background: transparent; }
    .fpr-table tbody tr.est-repos, .fpr-table tbody tr.est-ferie { background: var(--et-surface-2); }
    .fpr-table tbody tr.est-repos > td.num, .fpr-table tbody tr.est-ferie > td.num { display: none; }
    .fpr-table tbody tr.est-anomalie { background: var(--et-avertissement-bg); box-shadow: inset 3px 0 0 var(--et-avertissement-mark); }
    .fpr-lib-carte { display: block; font-family: var(--et-font); font-size: 12px; font-weight: 600; color: var(--et-muted); }
    /* Sur le fond ambre d'une journée à anomalie, le gris secondaire tombe sous AA en sombre. */
    .fpr-table tbody tr.est-anomalie .fpr-lib-carte { color: var(--et-ink); }
    .fpr-visas { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
    .fpr-outils { width: 100%; }
    .fpr-outils > .rh-pop-hote { flex: 1 1 auto; }
    .fpr-outils .fpr-btn, .fpr-outils .fpr-cta { width: 100%; justify-content: center; }
    .fpr-seg > button { flex: 1 1 50%; }
    .fpr-table tbody tr:not(.fpr-semaine) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fpr-semaine button { flex-wrap: wrap; }
}
@media print {
    .fpr-outils, .fpr-seg { display: none !important; }
}