/* ===========================================================================
   LOT 06 — COLONNE D'ANCRAGE DU GABARIT DE LISTE
   À charger APRÈS easytime-shell.css (qui porte le gabarit .tbl-*) et après
   lot02-cibles-tactiles.css, dont ce fichier reprend un palier.

   CE QUE CE FICHIER CORRIGE
     Le lot 03 a figé la colonne d'ancrage des tables écrites à la main et de
     celles rendues par DataGrid. Il excluait explicitement le gabarit .tbl-* de
     Tableau.razor — servi par une quarantaine d'écrans, dont la liste de
     référence. Ce gabarit n'avait donc AUCUN ancrage : zéro « position: sticky »
     dans easytime-shell.css. Et il est le plus exposé, parce que son sélecteur
     de colonnes peut ramener douze colonnes de complément dans une liste qui en
     montre six par défaut : la largeur ne se lit dans aucun balisage.

   POURQUOI UNE CLASSE POSÉE PAR LE COMPOSANT, ET NON UN RANG
     Le lot 03 désigne sa colonne par son rang (data-ancre="1|2|3") parce qu'il
     s'applique à des tables sans modèle de colonnes. Ici Tableau.razor connaît
     ses colonnes : il pose « tbl-ancre » sur les bonnes cellules et « tbl-ancre-
     case » sur la colonne de cases, aux dix points de rendu du composant. Aucun
     :nth-child, donc rien à recalculer quand le sélecteur masque une colonne, et
     rien à corriger quand la colonne de cases apparaît.

   AUCUNE COULEUR LITTÉRALE : tous les fonds viennent des jetons du gabarit.
   =========================================================================== */

/* --- Le figeage ----------------------------------------------------------- */

/* .tbl-defile porte déjà overflow-x:auto : le conteneur de défilement existe,
   il n'y a rien à ajouter côté trame.

   Le filet est une OMBRE et non une bordure, pour la même raison qu'au lot 03 :
   sous border-collapse (le défaut de .tbl) les bordures appartiennent à la table
   et ne suivent pas la cellule figée — elles resteraient en arrière. */
.tbl .tbl-ancre,
.tbl .tbl-ancre-case {
    position: sticky; z-index: 2;
    box-shadow: 1px 0 0 var(--et-hairline);
}

/* La case à cocher précède la colonne d'ancrage : elle se colle au bord, et
   l'ancre se décale de sa largeur. Sans le décalage, les deux se superposeraient
   au bord gauche. */
.tbl .tbl-ancre-case { left: 0; }
.tbl .tbl-ancre      { left: var(--tbl-ancre-x, 0px); }

/* Le filet n'a lieu d'être qu'au BORD DROIT du bloc figé : entre la case et
   l'ancre, deux cellules figées côte à côte, il ferait un trait parasite. */
.tbl .tbl-ancre-case { box-shadow: none; }

/* --- Le décalage suit le palier tactile ----------------------------------- */

/* Sans colonne de cases, l'ancre EST au bord : décalage nul, le cas courant.

   Avec cases, elle se décale de leur largeur — 40 px (easytime-shell.css), qui
   passe à 52 px sous 1024 px (lot02-cibles-tactiles.css, règle .tbl-case-col).
   Le décalage doit suivre ce palier, sinon l'ancre chevaucherait la case sur
   mobile, le seul endroit où le défilement horizontal est certain. D'où une
   variable CSS et non un style inline, qui l'emporterait sur le palier.

   « tbl-ancre-decalee » est posée par Tableau.razor quand Ancree ET
   Selectionnable sont vrais. Le composant le sait : inutile de le déduire d'un
   :has(), que les navigateurs anciens ignorent — et l'ignorer laisserait une
   gouttière vide à gauche de l'ancre.

   Posé sur .tbl et non sur :root : deux tableaux de la même page peuvent
   différer par la présence de la colonne de cases. */
.tbl { --tbl-ancre-x: 0px; }
.tbl.tbl-ancre-decalee { --tbl-ancre-x: 40px; }
@media (max-width: 1024px) {
    .tbl.tbl-ancre-decalee { --tbl-ancre-x: 52px; }
}

/* --- L'OPACITÉ, qui est tout le sujet ------------------------------------
   Une cellule figée doit être opaque, sinon les colonnes passent au travers en
   défilant. Or le gabarit peint ses fonds SUR LES CELLULES, en quatre couches
   qui se succèdent dans easytime-shell.css :

     .tbl tbody tr:nth-child(even) td   --tbl-zebre     zébrure
     .tbl tbody tr:hover td             --tbl-survol    survol
     .tbl tbody tr.tbl-alerte td        --et-avertissement-bg
     .tbl tbody tr.tbl-inerte td        --et-surface-3

   Les rangées IMPAIRES, elles, n'ont aucun fond : elles laissent voir le
   --et-surface de .tbl-defile. C'est le cas le plus fréquent, et le plus
   transparent.

   Chacune de ces règles pèse (0,2,3) — plus que « .tbl .tbl-ancre » à (0,2,0).
   Les reprendre une à une en ajoutant .tbl-ancre les porte à (0,3,3) : elles
   gagnent par spécificité. L'ORDRE ENTRE ELLES EST CELUI DE LA FEUILLE
   D'ORIGINE (zébrure, survol, alerte, inerte) pour que le comportement ne
   change pas : aujourd'hui une rangée en alerte GARDE sa teinte au survol,
   parce que sa règle vient après. Inverser l'ordre ici la lui ferait perdre.

   POURQUOI PAS « background: inherit » : ces fonds sont sur les cellules, pas
   sur la rangée. Un inherit ne remonterait rien et rendrait la cellule
   transparente — l'inverse du but. Même conclusion qu'au lot 03.
   ------------------------------------------------------------------------- */

/* Base : la surface de la carte. Elle couvre les rangées impaires, qui n'ont
   pas de fond propre, et sert de dessous aux couches suivantes. */
.tbl tbody .tbl-ancre,
.tbl tbody .tbl-ancre-case { background: var(--et-surface); }

/* Zébrure et survol : jetons OPAQUES dans les deux thèmes (#ffffff / #0f1828 et
   #EDEDED / #16202f), la teinte se pose donc telle quelle. */
.tbl tbody tr:nth-child(even) .tbl-ancre,
.tbl tbody tr:nth-child(even) .tbl-ancre-case { background: var(--tbl-zebre); }

.tbl tbody tr:hover .tbl-ancre,
.tbl tbody tr:hover .tbl-ancre-case { background: var(--tbl-survol); }

/* ALERTE : deux couches, et c'est le thème sombre qui l'impose.
   --et-avertissement-bg vaut #FEF7F1 en clair mais rgba(244,154,71,.16) en
   sombre — translucide, parce qu'une couleur pleine y écraserait la surface.
   Posée telle quelle sur une cellule figée, les colonnes défilantes passeraient
   au travers. Le dégradé plat empile la teinte sur --et-surface : le composé
   reproduit au pixel ce que voit une cellule non figée, tout en étant opaque.

   Ne pas « simplifier » en une seule couleur : en clair on ne perdrait rien, en
   sombre on reperdrait la transparence voulue par la charte. */
.tbl tbody tr.tbl-alerte .tbl-ancre,
.tbl tbody tr.tbl-alerte .tbl-ancre-case {
    background: linear-gradient(var(--et-avertissement-bg), var(--et-avertissement-bg)), var(--et-surface);
}

/* Le liseré d'alerte vit sur la PREMIÈRE cellule de la rangée
   (.tbl tbody tr.tbl-alerte td:first-child, une ombre intérieure). Or les règles
   du figeage plus haut écrivent box-shadow sur ces mêmes cellules — filet pour
   l'ancre, « none » pour la case : sans reprise, le liseré serait perdu.

   DEUX CAS, PARCE QUE LA PREMIÈRE CELLULE N'EST PAS LA MÊME
     avec colonne de cases : le liseré est sur la case, et le filet du bloc figé
     reste sur l'ancre, à sa droite — donc la case ne porte QUE le liseré ;
     sans colonne de cases : la même cellule porte les deux, le liseré intérieur
     d'abord pour qu'il se superpose au bon endroit. */
.tbl.tbl-ancre-decalee tbody tr.tbl-alerte .tbl-ancre-case {
    box-shadow: inset 3px 0 0 var(--et-avertissement);
}
.tbl:not(.tbl-ancre-decalee) tbody tr.tbl-alerte .tbl-ancre {
    box-shadow: inset 3px 0 0 var(--et-avertissement), 1px 0 0 var(--et-hairline);
}

/* INERTE : --et-surface-3 est opaque dans les deux thèmes (#FAFAFA / #1B2739). */
.tbl tbody tr.tbl-inerte .tbl-ancre,
.tbl tbody tr.tbl-inerte .tbl-ancre-case { background: var(--et-surface-3); }

/* SOUS-TOTAL DE L'ÉTAT ANALYSE — le seul fond que le gabarit met à « none »
   explicitement (.tbl tbody tr.tbl-sstotal td, easytime-shell.css). Une rangée
   de sous-total EST une rangée de colonnes, pas une cellule fusionnée : elle
   reçoit donc la classe d'ancrage, et sans ces deux règles sa cellule figée
   serait la seule transparente du tableau. Le --et-surface la ramène à la
   surface de la carte, ce que « none » laissait voir de toute façon.

   La variante en cadre (.tbl-cadre … :nth-child(even), (0,4,3)) doit être
   reprise à part : elle pèse plus que la règle générale de zébrure. */
.tbl tbody tr.tbl-sstotal .tbl-ancre,
.tbl tbody tr.tbl-sstotal .tbl-ancre-case { background: var(--et-surface); }
.tbl-cadre .tbl tbody tr.tbl-sstotal:nth-child(even) .tbl-ancre,
.tbl-cadre .tbl tbody tr.tbl-sstotal:nth-child(even) .tbl-ancre-case { background: var(--tbl-chrome); }

/* --- L'en-tête et le pied ------------------------------------------------- */

/* L'en-tête passe AU-DESSUS du corps : si le thead est par ailleurs figé en
   haut, les deux ancrages se croisent dans la cellule du coin, et c'est
   l'en-tête qui doit rester lisible. Même raisonnement qu'au lot 03.

   --tbl-tete-actif pour la colonne triée et pour le survol de l'en-tête
   triable : le gabarit les distingue, la cellule figée doit suivre. */
.tbl thead .tbl-ancre,
.tbl thead .tbl-ancre-case { background: var(--tbl-tete-fond); z-index: 3; }
.tbl thead .tbl-ancre.tbl-actif,
.tbl thead .tbl-ancre.tbl-triable:hover { background: var(--tbl-tete-actif); }

/* Pied de totaux : son fond est --tbl-chrome, opaque dans les deux thèmes. */
.tbl tfoot .tbl-ancre,
.tbl tfoot .tbl-ancre-case { background: var(--tbl-chrome); }

/* --- Ce que ce lot NE fige PAS -------------------------------------------
   Les rangées à cellule FUSIONNÉE — état vide et chargement (.tbl-etat), ligne
   de groupe de l'état Analyse (.tbl-grp) — n'ont pas de cellule d'ancrage : le
   composant ne pose la classe que sur les cellules DE COLONNE. Elles restent
   donc dans le flux, avec leur teinte, sans qu'aucune garde :not([colspan]) soit
   nécessaire ici. C'est l'avantage de poser la classe au rendu plutôt que de
   viser un rang en CSS.

   Le SOUS-TOTAL (.tbl-sstotal), lui, est bien une rangée de colonnes et reçoit
   la classe — voir sa règle de fond plus haut, sans quoi il aurait été la seule
   cellule figée transparente.

   L'état Vignettes et l'état Chronologie ne sont pas des tables : hors sujet.
   ------------------------------------------------------------------------- */