/* ============================================================================ ÉCRAN — CPT-01, TABLEAU DE BORD COMPTABLE (onglet Synthèse) Portée de la passation « Pilotage comptable, onglet Synthèse » (2026-09-05), fichier ecran-pilotage.css. À charger après modele-erp.css. PRÉFIXE `.sy-` ET NON `.tb-`. La passation écrit `.tb-` soixante-deux fois. `.tb-` est DÉJÀ le préfixe du tableau de bord de TRÉSORERIE (ecran-tableau-bord-tresorerie.css : .tb-kpi, .tb-file, .tb-col, .tb-alerte, .tb-jauge…), et `.tb-kpi` est en plus la vignette du module. Importer la feuille telle quelle aurait repeint l'écran du trésorier sans une erreur ni un avertissement — c'est exactement la collision que le portage précédent avait relevée et contournée par `.sy-`. Même choix, même raison. CE QUI N'EST PAS ICI, ET OÙ C'EST LE BANDEAU D'EN-TÊTE (.et-bandeau*) est monté dans easytech-theme.css : il est porté par les 45 écrans du module, donc c'est un gabarit, pas un écran. LA VIGNETTE (.sy-fait) vient de easycompta-vignette.css, la feuille qui l'unifie sur les vingt écrans à vignettes du module. Ne la redéfinissez pas ici : la seule chose que l'écran choisit est son rôle, par --vig. LE RAIL D'ONGLETS (.tbd-*) vient de easycompta-onglets.css, partagé avec le rail du trésorier. LA COULEUR D'ÉTAT NE S'ÉCRIT JAMAIS EN `color:`. La passation posait `color: var(--et-danger)` et `var(--et-succes)` sur des fonds pâles ; la charte du dépôt réserve ce rang aux encres `-ink`, et l'ambre en marque graphique à `-mark`. Corrigé partout ci-dessous — mesuré, pas supposé : --et-succes sur --et-succes-bg rend 3,16:1, sous AA pour du 12 px. ========================================================================== */ /* ---- Barre d'outils de l'écran ---------------------------------------- */ .appgrid .sy-outils { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } /* ---- Bandeau d'état de la période ------------------------------------- Ce que la période refuse ou attend, AVANT tout total. */ .appgrid .sy-bandeau { display: flex; align-items: center; gap: 9px; flex-shrink: 0; padding: 9px 14px; margin-bottom: 12px; border-left: 3px solid var(--et-inerte); font-size: var(--et-fs-cell); font-weight: 600; } .appgrid .sy-bandeau.est-grave { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); border-left-color: var(--et-danger); } .appgrid .sy-bandeau.est-info { background: var(--et-info-bg); color: var(--et-info); border-left-color: var(--et-form-blue); } .appgrid .sy-bandeau.est-neutre { background: var(--et-surface-2); color: var(--et-muted); font-weight: 400; } /* ---- Rangée de vignettes ---------------------------------------------- Six colonnes : au-delà, la clé passe à la ligne et la rangée perd son alignement. Deux paliers de repli avant le mobile, sur l'échelle retenue de docs/conventions-responsive.md — 1100 et 720. Le premier était à 1280, un cran hors échelle. Entre 1101 et 1280 px, rail déplié, une vignette fait 125 à 155 px et « Dettes fournisseurs » passe sur deux lignes (mesuré) : la rangée le tolère parce que chaque vignette range sa clé en haut et sa valeur en bas — la ligne des valeurs reste droite, c'est elle qu'on lit. */ .appgrid .sy-mesures { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .appgrid .sy-fait { display: grid; grid-template-rows: minmax(0, 1fr) auto; } @media (max-width: 1100px) { .appgrid .sy-mesures { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .appgrid .sy-mesures { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- Corps : blocs et colonnes ---------------------------------------- */ .appgrid .sy-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; } @media (max-width: 1024px) { .appgrid .sy-deux { grid-template-columns: minmax(0, 1fr); } } .appgrid .sy-bloc { background: var(--et-surface); border: 1px solid var(--et-hairline); padding: 12px 14px; margin-bottom: 14px; } .appgrid .sy-deux > .sy-bloc { margin-bottom: 0; } .appgrid .sy-bloc-t { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .appgrid .sy-bloc-t::before { content: ""; flex: none; width: 3px; height: 14px; background: var(--et-form-blue); } .appgrid .sy-bloc-t > span { font-family: var(--et-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--et-table-head-encre); } .appgrid .sy-vide { padding: 14px 2px; font-size: var(--et-fs-cell); color: var(--et-muted); text-align: center; } .appgrid .sy-pied { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--et-hairline); font-size: 12px; color: var(--et-muted); } /* ---- Cartes « Ce qui attend » ----------------------------------------- La carte EST le lien : cliquer n'importe où mène à l'écran qui traite. Un bloc-lien demande color:inherit, sinon le titre prend le bleu de lien. */ .appgrid .sy-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .appgrid .sy-carte { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; background: var(--et-surface); border: 1px solid var(--et-hairline); border-left: 3px solid var(--et-avertissement-mark); color: inherit; text-decoration: none; } /* Bloquant : le travail est non seulement en attente, mais empêché. Les deux n'appellent pas le même geste — l'un se termine, l'autre se débloque. */ .appgrid .sy-carte.est-bloquant { border-left-color: var(--et-danger); } .appgrid .sy-carte:hover { border-color: var(--et-form-blue); color: inherit; text-decoration: none; } .appgrid .sy-carte:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; } .appgrid .sy-pastille { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; font-size: 15px; background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); } .appgrid .sy-carte.est-bloquant .sy-pastille { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); } .appgrid .sy-carte-l { min-width: 0; } .appgrid .sy-carte-h { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: var(--et-fs-cell); } .appgrid .sy-carte-h > strong { font-size: 15px; font-weight: 700; } .appgrid .sy-ref { flex: none; font-size: 12px; color: var(--et-muted); font-weight: 400; } .appgrid .sy-enjeu { margin-top: 3px; font-size: 12px; color: var(--et-ink); } /* L'action porte la couleur de lien : c'est elle qui dit que la carte mène quelque part. */ .appgrid .sy-action { display: inline-block; margin-top: 7px; font-size: 12px; font-weight: 600; color: var(--et-form-blue); text-decoration: underline; } .appgrid .sy-carte:hover .sy-action { color: var(--et-form-blue-d); } /* ---- Histogramme d'activité ------------------------------------------- */ .appgrid .sy-histo { display: flex; align-items: flex-end; gap: 6px; height: 130px; } .appgrid .sy-barre-col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .appgrid .sy-barre { display: block; width: 100%; } .appgrid .sy-barre-lab { margin-top: 5px; font-size: 12px; color: var(--et-muted); text-align: center; } /* ---- Barres de proportion (âgée, prévisions, qualité, concentration) --- */ .appgrid .sy-agees { display: flex; flex-direction: column; gap: 7px; } .appgrid .sy-agee { display: flex; align-items: center; gap: 10px; font-size: var(--et-fs-cell); } .appgrid .sy-agee-lab { flex: 0 0 128px; } .appgrid .sy-agee-piste { flex: 1; min-width: 40px; display: inline-block; height: 8px; background: var(--et-piste); vertical-align: middle; } .appgrid .sy-agee-piste > span { display: block; height: 100%; } .appgrid .sy-agee-m { flex: 0 0 96px; text-align: right; font-family: var(--et-font-mono); } .appgrid .sy-agee-m.est-alerte { color: var(--et-danger-ink); font-weight: 600; } .appgrid .sy-agee-p { flex: 0 0 52px; text-align: right; font-size: 12px; color: var(--et-muted); font-family: var(--et-font-mono); } .appgrid .sy-creux { margin-left: 7px; padding: 1px 6px; background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); font-family: inherit; font-size: 12px; font-weight: 600; } .appgrid .sy-seuil { font-size: 12px; color: var(--et-muted); } .appgrid .sy-rang { color: var(--et-inerte); } .appgrid .sy-code { margin-left: 7px; font-size: 12px; color: var(--et-muted); } .appgrid .sy-part { margin-left: 8px; font-size: 12px; color: var(--et-muted); } .appgrid .sy-solde { font-weight: 600; } .appgrid .sy-solde.est-negatif { color: var(--et-danger-ink); } /* ---- Tableaux de l'écran ---------------------------------------------- Le gabarit de liste du dépôt (.tbl) porte le cadre et le défilement ; ces deux classes-ci ne font que l'alignement des nombres et la fonte à chasse fixe, que la passation nommait .tbl-n et .tbl-mono — deux classes que ce dépôt n'a pas. */ .appgrid .sy-tbl .sy-n { text-align: right; } .appgrid .sy-mono { font-family: var(--et-font-mono); } /* ---- Listes (échéances, points de période, activité) ------------------ */ .appgrid .sy-liste { display: flex; flex-direction: column; } .appgrid .sy-echeance, .appgrid .sy-point, .appgrid .sy-fait-l { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--et-hairline); font-size: var(--et-fs-cell); } .appgrid .sy-liste > *:first-child { border-top: 0; } .appgrid .sy-lib { flex: 1; min-width: 0; } .appgrid .sy-jour { flex: 0 0 48px; color: var(--et-muted); font-size: 12px; } .appgrid .sy-echeance.est-total { border-top: 2px solid var(--et-filet-fort); font-weight: 600; } .appgrid .sy-echeance .est-entree { color: var(--et-succes-ink); } .appgrid .sy-echeance .est-negatif { color: var(--et-danger-ink); } .appgrid .sy-point.est-tenu > i { color: var(--et-succes-ink); } .appgrid .sy-point.est-manquant > i { color: var(--et-danger-ink); } .appgrid .sy-etat, .appgrid .sy-quand { flex: none; font-size: 12px; color: var(--et-muted); } /* ---- Paliers ---------------------------------------------------------- Échelle retenue de docs/conventions-responsive.md. La cible tactile de 44 px sous 1024 px est la règle du lot 02, étendue ici comme les feuilles de module le font depuis le lot 04. */ @media (max-width: 1024px) { .appgrid .sy-agee-lab { flex: 0 0 104px; } .appgrid .sy-agee-m { flex: 0 0 84px; } .appgrid .sy-action { min-height: 44px; display: inline-flex; align-items: center; } } /* Le champ de l'exercice dans la barre d'outils. Sa largeur vivait EN DUR dans le Razor (style="max-width:120px" sur le