/* ecran-grand-livre-tiers.css — ETA-09. Préfixe `.glt-`, vérifié libre avant d'être posé — et `.gl-` écarté pour cela : il est celui du grand livre général (ecran-grand-livre.css), et deux blocs homonymes ne cassent pas la construction, ILS FUSIONNENT, propriété par propriété, later-wins, sans que rien ne le signale (docs/conventions-nommage.md, « La même règle, côté CSS et jetons »). Deux grands livres voisins dessinés chacun à moitié faux, et aucun garde pour le voir : c'est exactement le cas que la règle décrit. La balance des tiers avait dû écarter `.ba-` et la balance générale `.bg-` pour la même raison. Les règles communes aux états du lot — bandeau de périmètre, mention, bascule Général / Auxiliaire — vivent dans ecran-grand-livre.css, chargée avant. S'y sont ajoutés le 2026-09-13 les ATOMES DE PILE que les deux grands livres partagent une fois ETA-09 passé au gabarit : `.glt-pile`, `.glt-compte`, `.glt-compteur`, `.glt-cumul`, `.glt-chevron`, `.glt-chip`, `.glt-report`, `.glt-brouillon`, `.glt-fort`, `.glt-note`, `.glt-cel-libelle`, `.glt-suite`, `.glt-pied`, `.glt-etat-vide` — chacun écrit là-bas à côté de son jumeau `.gl-`, en une seule règle. La règle du §6.3 fait remonter ce qui sert deux écrans ou plus, et une copie par écran aurait divergé au premier filet retouché. CE FICHIER NE GARDE QUE CE QUI EST PROPRE AU GRAND LIVRE DES TIERS, et c'est peu de chose : la clé de regroupement n'est pas la même. ETA-01 empile des COMPTES ; ETA-09 empile des comptes qui empilent des TIERS. D'où les deux objets qui n'existent qu'ici — la barre de compte collectif (.glt-barre) et le bloc d'un tiers avec son en-tête dépliant (.glt-bloc / .glt-tete) —, plus les gestes offerts sous un tiers déplié et les largeurs de colonnes de sa table. 2026-09-13 — CE QUI EST PARTI AVEC LA BARRE HORIZONTALE. `.glt-champ-date`, `.glt-champ-prefixe`, `.glt-champ-type` et `.glt-champ-recherche` : largeurs maximales d'une rangée de filtres qui n'existe plus. Le volet fait 268 px et ses champs prennent leur colonne — une largeur maximale par champ y redessinerait le bord droit en escalier. 2026-09-23 — MAÎTRE / DÉTAIL (maquette « Grand livre des tiers — ETA-09 »). La pile de tiers dépliables (.glt-barre, .glt-bloc, .glt-tete, .glt-gestes) est partie avec l'accordéon. Sont arrivés : la barre de critères (.glt-criteres, .glt-seg), la rangée des critères actifs (.glt-actifs, .glt-pastille), la trame à deux volets (.glt-md), la liste des tiers (.glt-liste, .glt-groupe, .glt-item), le détail (.glt-detail, .glt-chiffres, .glt-courbe, .glt-onglets) et la marque d'échéance dépassée. 2026-09-23 (après-midi) — PORTAGE DE LA MAQUETTE DE REFONTE. Arrivent : l'ancienneté (.glt-age-mini dans la liste, .glt-age dans le détail, quatre rangs .est-non / .est-30 / .est-echu / .est-retard), la marque de bascule de la courbe (.glt-courbe-marque, .glt-courbe-bornes), l'onglet « Échues » en alerte (.glt-onglet.est-alerte), la colonne de coche et la barre de lettrage (.glt-col-coche, .glt-lettrage). .glt-encours est parti : l'encours est désormais dans la synthèse, ventilé. Aucune couleur littérale. */ /* 1 · Les mentions du bandeau : deux rôles, comme aux autres états du lot. Ce qui est NET (comptabilisé, concordant) et ce qui est SOUS RÉSERVE (brouillard inclus, écart avec le général, état restreint, état tronqué). L'encre est le rang -ink : à 12 px une couleur d'état ne passe pas l'AA sur son propre fond pâle. Le troisième rôle — `est-ecart`, du pied général — est au commun du lot, où le grand livre général l'écrit déjà. */ .glt-mention.est-net { background: var(--et-succes-bg); color: var(--et-succes-ink); } .glt-mention.est-reserve { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); } /* =========================================================================== 2 · CE QUI N'EST QU'AU GRAND LIVRE DES TIERS. La barre de critères, les critères actifs et la trame maître / détail sont montés depuis le 2026-09-23 par ETA-01 aussi, et sont donc remontés dans ecran-grand-livre.css (sections 7 à 9), sous leur nom d'origine `.glt-`. Restent ici l'onglet « Échues » en alerte et l'ancienneté — deux objets qu'un compte général n'a pas. =========================================================================== */ /* Des lignes échues dans un onglet qu'on ne regarde pas : son compteur le dit. */ .appgrid .glt-onglet.est-alerte .glt-onglet-nb { padding: 0 5px; background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); box-shadow: inset 0 0 0 1px var(--et-avertissement-mark); } /* ---- L'ancienneté : quatre rangs, du plus frais au plus vieux ---- Ce sont des MARQUES (seuil 3:1), jamais des encres : l'ambre passe par son rang -mark, et le plus vieux prend le rouge le plus sombre — l'intensité suit l'âge. La barre est décorative (aria-hidden) : les montants sont écrits à côté. */ .appgrid .glt-age .est-non, .appgrid .glt-age-mini .est-non, .appgrid .glt-legende .est-non { background: var(--et-form-blue); } .appgrid .glt-age .est-30, .appgrid .glt-age-mini .est-30, .appgrid .glt-legende .est-30 { background: var(--et-avertissement-mark); } .appgrid .glt-age .est-echu { background: var(--et-danger); } .appgrid .glt-age .est-retard, .appgrid .glt-age-mini .est-retard, .appgrid .glt-legende .est-retard { background: var(--et-danger-ink); } .appgrid .glt-age-mini { display: inline-flex; flex: 0 0 72px; height: 6px; align-self: center; overflow: hidden; background: var(--et-rang); } .appgrid .glt-age-mini > span { height: 100%; } .appgrid .glt-item-meta { flex: 1 1 auto; min-width: 0; } .appgrid .glt-item-l2 { align-items: center; } .appgrid .glt-item-l2 .glt-chip { padding: 0 5px; } .appgrid .glt-legende { display: inline-flex; align-items: center; gap: 4px; } .appgrid .glt-legende > i { display: inline-block; width: 10px; height: 6px; } .appgrid .glt-liste-pied { flex-wrap: wrap; gap: 4px 12px; } .appgrid .glt-age { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; border: 1px solid var(--et-hairline); min-width: 0; } .appgrid .glt-age-tete { display: flex; align-items: baseline; gap: 8px; font-size: 12px; } .appgrid .glt-age-tete b { margin-left: auto; font-size: var(--et-fs-tete); color: var(--et-ink); } .appgrid .glt-age-barre { display: flex; height: 10px; overflow: hidden; background: var(--et-rang); } .appgrid .glt-age-barre > span { height: 100%; } .appgrid .glt-age-legende { display: grid; /* Une colonne : le bloc tient dans ~260 px, et à deux colonnes « À échoir » passait sur deux rangs, loin de son montant. */ grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; font-size: 12px; } .appgrid .glt-age-legende > div { display: flex; align-items: center; gap: 6px; min-width: 0; } .appgrid .glt-age-legende dt { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: var(--et-muted); } .appgrid .glt-age-legende dt > i { display: inline-block; width: 8px; height: 8px; } .appgrid .glt-age-legende dd { margin: 0 0 0 auto; font-family: var(--et-font-mono); font-weight: 600; color: var(--et-ink); white-space: nowrap; } .appgrid .glt-age-note { padding: 4px 8px; background: var(--et-surface-2); font-size: 12px; color: var(--et-muted); } .appgrid .glt-age-note.est-affecter { background: var(--et-tint); color: var(--et-lien); } .appgrid .glt-age-note b { color: var(--et-ink); } /* =========================================================================== 5 · LA TABLE DU TIERS RETENU — le gabarit de liste, plus ses largeurs. La largeur minimale est ICI et non dans la page : une largeur écrite dans un Razor est ce que docs/conventions-responsive.md interdit, et c'est d'ici qu'un palier peut la relâcher. 820 px et non plus les 1 100 du grand livre général : la table vit À CÔTÉ de la liste des tiers, et à 1 100 px le SOLDE — la colonne pour laquelle on ouvre un grand livre — sortait de la fenêtre dès 1 440 px. Rien n'a été retiré pour cela : l'état de la ligne est passé en pastille dans le libellé (seulement brouillard et échue, les deux qui disent quelque chose), et les largeurs fixes ont été resserrées. La date reste ancrée (.tbl-ancree, posée par la page) pour les fenêtres où la table défile encore. =========================================================================== */ .appgrid .glt-table { min-width: 864px; table-layout: fixed; } /* LA TÊTE ANCRÉE PREND LE FOND DE SA TABLE. lot03-tables-larges.css peint la cellule figée de l'en-tête en --et-table-head, le fond des tables Bootstrap ; or cette table est une .tbl posée hors de .tbl-cadre, dont la tête n'a pas de fond : « Date » ressortait seule sur l'ardoise, encre sombre sur fond sombre (banc du 2026-09-23). Elle reste OPAQUE — c'est ce qui la fait tenir au-dessus des colonnes qui défilent. */ .appgrid .glt-table.tbl-ancree > thead > tr > th { background: var(--tbl-tete-fond, var(--et-surface)); } /* LES COLONNES QUI CÈDENT, AU GABARIT DU DÉTAIL ET NON DE LA FENÊTRE : le détail vit à côté de la liste des tiers, et sa largeur ne suit pas celle de l'écran — 698 px à 1 280, 670 à 768. Trois paliers, calés sur la somme des colonnes fixes restantes pour que le libellé garde au moins cent vingt pixels : 1 · le journal et la lettre (métadonnée ; le lettrage se lit aux onglets) ; 2 · l'échéance (le retard reste dit dans le libellé, « échue N j ») ; 3 · la pièce, en dernier : c'est la référence qu'on recopie. display:none par cellule et non visibility:collapse sur : Chromium ne rend pas la largeur d'une colonne collapsée et ne recalcule pas la hauteur des rangs (vu sur la balance des tiers, ETA-08). C'est pourquoi le report et le pied n'ont plus de colspan. */ .appgrid .glt-defile { container: glt-detail / inline-size; } @container glt-detail (max-width: 863px) { .appgrid .glt-table { min-width: 0; } .appgrid .glt-table .glt-cede-1 { display: none; } } @container glt-detail (max-width: 779px) { .appgrid .glt-table .glt-cede-2 { display: none; } } /* SOUS 680 PX DE DÉTAIL, LES ÉCRITURES PASSENT EN BLOCS (2026-10-14). La table gardait 590 px de largeur minimale et défilait : à 390 px, le solde sortait de l'écran (banc d'écran, eta-09-tiers). En bloc, chaque montant est nommé par son `data-lib`, et les colonnes qui cédaient reviennent — la place n'y est plus comptée en largeur. */ @container glt-detail (max-width: 679px) { .appgrid .glt-table { min-width: 0; table-layout: auto; } .appgrid .glt-table, .appgrid .glt-table > tbody, .appgrid .glt-table > tfoot { display: block; width: 100%; } .appgrid .glt-table > thead { display: none; } .appgrid .glt-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 12px; border-bottom: 1px solid var(--et-hairline); height: auto; } .appgrid .glt-table tr > td { display: block; padding: 0; border: 0; white-space: normal; position: static; background: transparent; } /* Les colonnes qui cèdent reviennent : en bloc, la place n'est plus comptée en largeur. */ .appgrid .glt-table .glt-cede-1, .appgrid .glt-table .glt-cede-2, .appgrid .glt-table .glt-cede-3 { display: block; } .appgrid .glt-table tr > td:empty { display: none; } .appgrid .glt-table tr > td[colspan], .appgrid .glt-table td.glt-cel-libelle { flex: 1 1 100%; } .appgrid .glt-table td[data-lib] { order: 6; flex: 1 0 auto; } .appgrid .glt-table td[data-lib]::before { content: attr(data-lib); display: block; font-size: 12px; font-weight: 400; color: var(--et-muted); } } .appgrid .glt-col-coche { width: 36px; text-align: center; } .appgrid .glt-coche { margin: 0; cursor: pointer; } .appgrid .glt-table tr.est-coche > td { background: var(--et-tint); } /* ---- La barre de lettrage : sous la table, tant qu'une ligne est cochée ---- */ /* bottom: -28px : même bande de rembourrage de .et-scroll que sous le pied du journal général — à 0, les lignes défilaient sous la barre. */ .appgrid .glt-lettrage { position: sticky; bottom: -28px; z-index: 3; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 16px; background: var(--et-tint); border-top: 2px solid var(--et-form-blue); font-size: var(--et-fs-cell); } .appgrid .glt-lettrage .est-juste { color: var(--et-succes-ink); } .appgrid .glt-lettrage .est-ecart { color: var(--et-danger-ink); } .appgrid .glt-lettrage-gestes { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } /* BLEU ET NON ORANGE : l'orange est au relevé, le bouton d'engagement de l'écran. */ .appgrid .glt-btn-lettrer { background: var(--et-form-blue); border-color: var(--et-form-blue); color: var(--et-sur-aplat); } .appgrid .glt-btn-lettrer:hover:enabled { background: var(--et-form-blue-d); border-color: var(--et-form-blue-d); } .appgrid .glt-btn-lettrer:disabled { opacity: .45; cursor: not-allowed; } .appgrid .glt-lettrage-msg { margin: 8px 16px; padding: 6px 10px; font-size: var(--et-fs-cell); } .appgrid .glt-lettrage-msg.est-net { background: var(--et-succes-bg); color: var(--et-succes-ink); } .appgrid .glt-lettrage-msg.est-reserve { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); } /* LA LETTRE EST UN CODE DE SEPT SIGNES (« L000001 », tel que POST /api/compta/lettrage le pose), et non une lettre : à 52 px sa pastille débordait sur le débit — vu au banc le 2026-09-23 sur le premier lettrage posé depuis l'écran. 76 px, repris à la date, au journal et à l'échéance, qui avaient du jeu sur leur contenu réel. */ .appgrid .glt-col-date { width: 90px; } .appgrid .glt-col-journal { width: 44px; } .appgrid .glt-col-piece { width: 144px; } .appgrid .glt-col-echeance { width: 84px; } /* « Échéance » en tête : 81 px de texte */ .appgrid .glt-col-lettrage { width: 76px; } .appgrid .glt-col-montant { width: 104px; } .appgrid .glt-col-solde { width: 124px; } /* DENSITÉ DES TABLES DE GRAND LIVRE (2026-10-14) : 12 px et des marges de 6 px, comme les présentations Standard et Continue. La pièce passe à la ligne au lieu de déborder : à 108 px et sans retour, « ACH-FF-2026-000045 » s'écrivait PAR-DESSUS le libellé (capture du banc, eta-09-tiers, 1 440 px) — 144 px la font tenir sur une ligne. */ .appgrid .glt-table tbody td, .appgrid .glt-table tfoot td, .appgrid .glt-table .tbl-mono { font-size: 12px; } .appgrid .glt-table th, .appgrid .glt-table tbody td, .appgrid .glt-table tfoot td { padding-left: 6px; padding-right: 6px; } .appgrid .glt-table thead th { letter-spacing: .04em; } .appgrid .glt-table td.glt-cel-piece { white-space: normal; overflow-wrap: anywhere; } /* La pastille d'état dans le libellé : elle passe AVANT le texte, qui se coupe, elle non. */ .appgrid .glt-table td.glt-cel-libelle .glt-chip { margin-right: 6px; } /* =========================================================================== 6 · PALIERS. Échelle retenue de docs/conventions-responsive.md. Le volet, lui, se replie à 1100 px par `.ecran-filtre` du gabarit : il n'a pas à être redit ici. =========================================================================== */ /* Les paliers de la barre de critères, de la trame et du détail sont remontés avec eux dans ecran-grand-livre.css. Ne restent ici que ceux des objets propres à cet écran. */ @media (max-width: 1024px) { /* Sous 1024 px, aucune cible POSÉE PAR CET ÉCRAN ne descend sous 44 px. */ .appgrid .glt-lettrage .mx-btn { min-height: 44px; } .appgrid .glt-col-coche { width: 48px; } .appgrid .glt-coche { width: 22px; height: 22px; } } @media (max-width: 720px) { .appgrid .glt-lettrage-gestes { margin-left: 0; } } /* En blocs, la colonne figée (date) est relâchée : son filet d'ombre restait comme un trait après la date (capture à 768 px, sombre). Voir ecran-grand-livre.css, même règle. */ @container glt-detail (max-width: 679px) { .appgrid .glt-table.tbl-ancree[data-ancre] > tbody > tr > td:nth-child(n) { position: static; box-shadow: none; background: transparent; } }