/* =========================================================================== LOT 03 — COLONNE D'ANCRAGE DES TABLES LARGES Chargée après les feuilles de coquille. Elle ne concerne que les tables écrites à la main dans les pages (Compta, Budget, Gestion) et celles rendues par DataGrid.razor, et non le gabarit de liste .tbl-* servi par Tableau.razor. DATAGRID EST UN APPELANT DEPUIS LE 2026-08-21 : le paramètre « Ancre » du composant rend l'attribut data-ancre, « tbl-ancree » se passant par ClasseTable. Premier appelant : /admin/terminaux et son sélecteur de 29 colonnes. CE QUE CE FICHIER CORRIGE Quarante-six tables du dépôt portent une largeur minimale posée en style inline ; treize dépassent 960 px, jusqu'à 1300 px (ElaborationBudget:77). À 1280 px la colonne de contenu fait environ 990 px une fois le rail de 256 px retiré : le défilement horizontal commence donc sur un poste fixe, pas sur un mobile. Et une fois la table décalée, plus rien ne dit à quelle ligne appartient le nombre qu'on lit. CE QU'IL FAIT, ET CE QU'IL NE FAIT PAS Il fige la colonne d'ANCRAGE — celle qui nomme la ligne — pour que le défilement reste lisible. Il ne supprime pas le défilement : y parvenir demande de décider quelles colonnes cèdent, et « secondaire » se décide par métier, pas en CSS. Cet arbitrage est posé dans docs/tables-larges.md et reste ouvert. POURQUOI UNE CLASSE ET NON LE MOTIF INLINE Le motif existait déjà, recopié cellule par cellule dans la grille budgétaire (position:sticky;left:0;background:… sur chaque th et chaque td). Recopié, il se perd à la première colonne ajoutée, et il échappe aux jetons. Ici : une classe sur la table, rien sur les cellules. AUCUNE COULEUR LITTÉRALE : le fond de la colonne figée est --et-surface, comme toutes les surfaces de la charte, donc le thème sombre suit. =========================================================================== */ /* La colonne figée est désignée par son RANG : ces tables n'ont pas de classe par colonne, et leur en ajouter une supposerait de toucher chaque cellule — exactement ce que ce lot cherche à éviter. data-ancre="1" pour la première colonne, "2" quand la première n'est qu'un numéro de ligne ou une case à cocher. Trois rangs couvraient les treize tables d'origine. QUATRE DEPUIS LE 2026-09-04, et c'est une réparation, pas une extension. La reprise Trésorerie a écrit Ancre="4" sur TROIS tables — Mouvements (1 250 px), ReglementsClients (1 110 px), ReglementsFournisseurs (1 100 px) — sans que personne n'ajoute le rang ici : leur attribut était rendu et ne figeait rien. Le rang 4 y désigne, dans les trois cas, LA COLONNE QUI NOMME LA LIGNE — « Libellé » derrière date, date de valeur et compte ; « Client » et « Fournisseur » derrière facture, date et échéance. C'est bien la colonne d'ancrage au sens de ce lot, elle arrive simplement en quatrième position. Les sélecteurs ci-dessous reprennent donc 1 à 4 ; le PIED, lui, reste au seul rang 1, pour la raison écrite à sa propre règle. :not([colspan]) DANS LE CORPS, ajouté le 2026-08-21 pour la même raison qu'au pied plus bas : la cellule visée doit être une VRAIE colonne. Trois natures de rangée fusionnent leur première cellule dans un — l'état vide (« Aucune ligne… »), le panneau de détail déplié (CoutComplet:136, colspan="9") et la rangée de REGROUPEMENT (Terminaux:83, ). Les épingler à gauche ne les déplace pas d'un pixel, puisqu'elles occupent déjà toute la largeur, mais leur imposait --et-surface : la teinte table-light qui distingue la rangée de regroupement disparaissait, et le panneau de détail perdait son fond propre. Sans la garde, Bootstrap reprend la main et les peint lui-même. Vérifié sur les treize tables de docs/tables-larges.md : aucune ne fusionne la première cellule d'une rangée de DONNÉES. La garde ne change donc leur rendu que sur leurs états vides, qui n'avaient rien à ancrer. */ .tbl-ancree[data-ancre="1"] > thead > tr > :nth-child(1), .tbl-ancree[data-ancre="1"] > tbody > tr > :nth-child(1):not([colspan]), .tbl-ancree[data-ancre="2"] > thead > tr > :nth-child(2), .tbl-ancree[data-ancre="2"] > tbody > tr > :nth-child(2):not([colspan]), .tbl-ancree[data-ancre="3"] > thead > tr > :nth-child(3), .tbl-ancree[data-ancre="3"] > tbody > tr > :nth-child(3):not([colspan]), .tbl-ancree[data-ancre="4"] > thead > tr > :nth-child(4), .tbl-ancree[data-ancre="4"] > tbody > tr > :nth-child(4):not([colspan]) { position: sticky; left: 0; z-index: 2; /* Le filet est une ombre et non une bordure : sous border-collapse (le défaut de Bootstrap) les bordures appartiennent à la table et ne suivent pas la cellule figée — elles resteraient en arrière au défilement. */ box-shadow: 1px 0 0 var(--et-hairline); } /* Une cellule figée doit être OPAQUE, sinon les colonnes passent au travers en défilant — et chacune reprend le fond de sa propre rangée, pas un fond commun. C'est le piège de ce motif : un --et-surface posé partout rendrait l'en-tête blanc sur blanc, puisque .table thead th est peint en --et-table-head avec un texte blanc (easytech-theme.css:456). */ .tbl-ancree[data-ancre="1"] > tbody > tr > :nth-child(1):not([colspan]), .tbl-ancree[data-ancre="2"] > tbody > tr > :nth-child(2):not([colspan]), .tbl-ancree[data-ancre="3"] > tbody > tr > :nth-child(3):not([colspan]), .tbl-ancree[data-ancre="4"] > tbody > tr > :nth-child(4):not([colspan]) { background: var(--et-surface); } /* La tête passe aussi AU-DESSUS du corps : si l'en-tête 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. */ .tbl-ancree[data-ancre="1"] > thead > tr > :nth-child(1), .tbl-ancree[data-ancre="2"] > thead > tr > :nth-child(2), .tbl-ancree[data-ancre="3"] > thead > tr > :nth-child(3), .tbl-ancree[data-ancre="4"] > thead > tr > :nth-child(4) { background: var(--et-table-head); z-index: 4; } /* LE PIED, SOUS DEUX CONDITIONS. Une rangée de total fusionne souvent ses premières cellules (colspan="5" dans SaisiePiece) : le rang n'y désigne alors plus la même colonne, et figer « le deuxième enfant » y épinglerait une somme au bord gauche. D'où les deux gardes : :not([colspan]) — la cellule visée doit être une vraie colonne ; data-ancre="1" — au-delà, une cellule fusionnée QUI LA PRÉCÈDE décalerait le rang sans que le sélecteur puisse le voir. Les tables ancrées en 2 ou 3 ont de toute façon un numéro de ligne ou une case en tête, que leur pied ne reprend jamais. Sans cette règle, la grille budgétaire perdrait le « Total » figé qu'elle portait déjà en inline — c'est une reprise de l'existant, pas un ajout. */ .tbl-ancree[data-ancre="1"] > tfoot > tr > :nth-child(1):not([colspan]) { position: sticky; left: 0; z-index: 2; background: var(--et-surface); box-shadow: 1px 0 0 var(--et-hairline); } /* Une rangée qui porte SA teinte — total, sous-total, mise en garde — la pose en style inline dans la page, qui l'emporte sur les règles ci-dessus : sa cellule d'ancrage garde donc son fond, et la teinte ne s'interrompt pas sur la colonne figée. Rien à écrire pour ça ; la note est là pour qu'on ne « corrige » pas cette absence. LIMITE CONNUE : le survol de rangée du module Compta (.ecran-compta .table tbody tr:hover) ne repeint pas la cellule figée, qui garde son fond opaque. Le motif inline qu'on remplace ici avait déjà ce défaut ; le corriger demanderait de reprendre cette teinte, aujourd'hui codée en dur dans compta-ux.css et sans jeton. Écrit dans docs/tables-larges.md. */ /* =========================================================================== COLONNES QUI CÈDENT — la seconde moitié du lot 03 Ajouté le 2026-08-20, après arbitrage des colonnes secondaires table par table (docs/tables-larges.md, « L'arbitrage »). POURQUOI ET visibility: collapse, ET NON display:none PAR RANG Ces tables ont un pied de total dont la première cellule FUSIONNE deux à quatre colonnes (colspan). Masquer « le quatrième enfant » de chaque rangée y viserait une autre colonne que dans le corps : mesuré, le total se décalait d'une colonne et débordait dans une colonne fantôme. Une colonne collapsée, elle, est retirée par le moteur de table : les cellules fusionnées du pied rétrécissent d'autant et restent alignées. Vérifié au navigateur. Le repli, si un moteur ignore « collapse » : la colonne reste affichée et la table défile — c'est-à-dire l'état d'aujourd'hui. Aucune casse possible, seulement l'absence du gain. DEUX PALIERS, DEUX NATURES .tbl-cede-1280 Métadonnée ou texte libre : type, référence, cause, justification, format, liste de comptes. Ces colonnes rongent la largeur sans porter de décision. .tbl-cede-1024 Composante RECALCULABLE d'une colonne gardée : budget initial + révisions quand le budget révisé reste, coût direct + indirect quand le coût complet reste, un taux dérivé de deux colonnes présentes. CE QU'ON NE MASQUE JAMAIS : l'identifiant, le libellé, et la colonne de DÉCISION — celle sur laquelle on agit. Masquer une colonne qu'aucune autre ne résume, ce n'est plus retirer de la redondance, c'est retirer de l'information. =========================================================================== */ @media (max-width: 1280px) { .tbl-ancree > colgroup > col.tbl-cede-1280 { visibility: collapse; } } @media (max-width: 1024px) { .tbl-ancree > colgroup > col.tbl-cede-1024 { visibility: collapse; } }