/* ==========================================================================
   ÉCRAN — Un état du catalogue (/app/etats/{clé}) — famille .etx-*

   UNE feuille pour VINGT-SIX états : la page est générique, ses classes le sont
   donc aussi. C'est l'inverse du cas habituel — ici, une feuille d'écran par
   état aurait été vingt-six copies du même fichier.

   Feuille d'ÉCRAN : elle ne porte que ce qui sert à celui-là. Tout le reste
   vient de plus haut — la carte et la barre d'outils du gabarit (.mx-*),
   l'en-tête de page de la coquille (.ecran-tete), la colonne d'ancrage du lot 03
   (.tbl-ancree). Aucune couleur en dur : jetons --et-* seulement, donc bascule
   sombre gratuite.

   POURQUOI PAS .rh-* : les deux rapports d'heures ont un panneau de filtre
   visuellement voisin, mais leurs classes vivent dans css/ecran-rapports-heures.css
   — une feuille d'ÉCRAN, qu'un autre écran ne lit pas (CLAUDE.md : « une classe
   utilisée par deux écrans monte dans le gabarit, jamais l'inverse »). Le jour
   où les deux familles doivent vraiment converger, c'est le panneau lui-même qui
   monte en composant partagé, pas la feuille qui se met à servir deux écrans.
   ========================================================================== */

/* --- 1. Trame : critères collants à gauche, état à droite ------------------
   268 px, la mesure du panneau des rapports d'heures : les deux écrans se
   suivent dans le rail, et deux colonnes de filtre de largeurs différentes se
   voient à la navigation. `sticky` parce qu'on change de période ou de service
   en lisant la table. */
.etx-grille {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.etx-colg { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 14px; }
.etx-cold { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 1100px) {
    .etx-grille { grid-template-columns: minmax(0, 1fr); }
    .etx-colg { position: static; }
}

/* --- 2. Les critères ------------------------------------------------------- */
.etx-champs { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.etx-lbl {
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em; color: var(--et-table-head-encre);
    margin: 0;
}
.etx-champ {
    width: 100%; height: 32px; padding: 0 9px;
    border: 1px solid var(--et-form-border); border-radius: 0;
    background: var(--et-surface); color: var(--et-ink);
    font-family: inherit; font-size: 13px; outline: none;
}
.etx-champ:focus { border-color: var(--et-form-blue); box-shadow: 0 0 0 3px var(--et-focus); }

/* La note dit CE QUE LE CHIFFRE VAUT — la règle de bornage, la formule. Elle est
   sous le champ qu'elle qualifie, pas en pied de page : une contrainte lue après
   la faute ne sert à rien. */
.etx-note { font-size: 12px; line-height: 1.5; color: var(--et-faint); text-wrap: pretty; }

.etx-appliquer { width: 100%; }

/* --- 3. Bandeau de l'état ------------------------------------------------- */
.etx-bandeau {
    display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
    padding: 12px 14px;
}
.etx-bandeau-titre { flex: 1; min-width: 220px; }
.etx-bandeau-titre .t { font-size: var(--et-fs-tete); font-weight: 600; color: var(--et-ink); }
.etx-bandeau-titre .s { font-size: 12px; color: var(--et-muted); margin-top: 2px; }

/* Les marques de l'état : domaine, rythme, destinataire, et les deux qui
   engagent — pièce légale, période clôturée. Ce sont des PASTILLES, donc la seule
   exception d'angle arrondi de la charte. */
.etx-marques { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.etx-marque {
    padding: 2px 8px; border-radius: 999px;
    background: var(--et-neutre-bg); color: var(--et-neutre);
    font-family: var(--et-font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: .06em; white-space: nowrap;
}
.etx-marque.est-legale { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.etx-marque.est-cloture { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }

/* --- 4. La table ---------------------------------------------------------- */
/* Le défilement est porté par un cadre PROPRE à la table et non par la page :
   ces états sont larges par construction (un calendrier d'absences porte
   trente-quatre colonnes), et une page qui défile en largeur emmène l'en-tête et
   le rail avec elle. */
.etx-carte-table { padding: 0; }
.etx-defile { overflow-x: auto; }

.etx-table { width: 100%; border-collapse: collapse; font-size: var(--et-fs-cell); }
.etx-table thead th {
    padding: 6px 13px;
    background: var(--et-table-head); border-bottom: 1px solid var(--et-table-head-fonce);
    font-family: var(--et-font-mono); font-size: var(--et-fs-tete); font-weight: 500;
    text-transform: uppercase; letter-spacing: .14em; color: var(--et-sur-ardoise);
    white-space: nowrap; text-align: left;
}
.etx-table tbody td {
    padding: 4px 13px; border-bottom: 1px solid var(--et-rang);
    white-space: nowrap; color: var(--et-ink);
}
.etx-table tbody tr:hover td { background: var(--et-rang); }

/* Une colonne numérique s'aligne à droite ET passe en mono : c'est le serveur
   qui dit laquelle (ColonneEtat.Numerique), pas la page — le même drapeau sert
   au PDF. Des chiffres alignés à gauche en proportionnelle ne se comparent pas
   d'une ligne à l'autre. */
.etx-table th.est-num, .etx-table td.est-num { text-align: right; }
.etx-table td.est-num { font-family: var(--et-font-mono); }

/* Le total vient du SERVEUR : il n'est pas la somme des lignes recalculée ici.
   Il se rend comme un pied de table, en gras sur la teinte de total. */
.etx-table tfoot td {
    padding: 6px 13px; border-top: 1px solid var(--et-filet-fort);
    background: var(--et-tint); color: var(--et-ink);
    font-weight: 600; white-space: nowrap;
}
.etx-table tfoot td.est-num { font-family: var(--et-font-mono); }

/* La cellule ancrée du lot 03 est peinte en --et-surface pour rester opaque au
   défilement ; le pied doit garder la sienne, sinon le total se lit blanc à
   l'endroit qui le nomme. Même raison que la note de .rh-table dans
   css/ecran-rapports-heures.css, et même remède : le sélecteur du lot pèse plus,
   on le rejoue. */
.etx-table.tbl-ancree[data-ancre="1"] > tfoot > tr > :nth-child(1) {
    background: linear-gradient(var(--et-tint), var(--et-tint)), var(--et-surface);
}

/* La formule sous la table : elle voyage aussi dans le préambule du tableur et
   les critères du PDF. Un taux sans son dénominateur ne se vérifie pas trois
   jours plus tard, loin de l'écran. */
.etx-formule {
    padding: 9px 14px; border-top: 1px solid var(--et-hairline);
    font-size: 12px; line-height: 1.5; color: var(--et-faint); text-wrap: pretty;
}

.etx-vide {
    padding: 26px 16px; text-align: center;
    background: var(--et-surface); border: 1px solid var(--et-hairline);
    font-size: 13px; line-height: 1.6; color: var(--et-muted); text-wrap: pretty;
}

/* --- 5. Paliers ------------------------------------------------------------
   Sous 1024 px, les cibles de la barre d'outils et des critères tiennent la
   règle tactile du lot 02 (44 px) ; la table garde sa densité, elle défile.
   Sous 640 px les paddings de la carte sont rendus. Aucune couleur ici. */
@media (max-width: 1024px) {
    .etx-champ { height: 44px; }
    .etx-appliquer { min-height: 44px; }
}
@media (max-width: 640px) {
    .etx-champs { padding: 10px 11px; }
    .etx-bandeau { padding: 10px 11px; }
}

@media print {
    /* À l'impression, le PDF du bouton est le document ; ce qui s'imprime depuis
       l'écran ne doit au moins pas perdre de colonnes. */
    .etx-grille { display: block; }
    .etx-colg { display: none; }
    .etx-defile { overflow: visible; }
}