/* ============================================================================ ÉCRAN — TABLEAU DE BORD TRÉSORERIE, ONGLET SYNTHÈSE (TRE-15) Feuille d'ÉCRAN, préfixe .tb-, refaite d'après la passation « Tableau de bord de trésorerie » (design_handoff_tresorerie_synthese). CE QUI N'EST PAS ICI, ET NE DOIT PAS Y REVENIR : - le rail des six onglets (.tbd-*) et la carte de section (.eca-carte / .eca-tete / .eca-corps) — gabarit de module, css/easycompta-onglets.css ; - le petit tableau de carte (.eca-tab), qui vaut dans une carte comme dans une fenêtre — css/easycompta-modal.css ; - la vignette (.tb-kpi / .tb-kpis) — css/easycompta-vignette.css, la feuille qui les unifie sur les dix-neuf écrans à vignettes du module ; - la fenêtre (.xp-voile / .xp-modal / .xp-tete / .xp-pied) — même feuille. La maquette nomme ces objets .tb-carte et .tb-tab. Le dépôt porte déjà le même dessin sous .eca-* pour deux tableaux de bord : une classe employée par deux écrans vit dans le gabarit, jamais recopiée sous un second nom — sans quoi les deux divergent au premier réglage. AUCUNE COULEUR EN DUR, et aucune couleur d'état en encre nue : une teinte d'état est un aplat, un filet ou une marque, l'encre posée dessus est le rang --et-*-ink (docs/couleurs-en-dur.md). ========================================================================== */ /* ---------------------------------------------------------------------------- LES ALERTES Elles viennent en premier et elles sont NOMMÉES : « Point bas prévu en S7 à 3 400 000, sous le seuil d'alerte de 500 000 », plus le lien vers l'écran qui traite — pas un voyant rouge. Rouge pour un découvert constaté, ambre pour un point bas prévu : le fait avant la prévision. Aplat pâle et encre de rang : la teinte d'état posée en encre nue sur ce même aplat rend 2,0:1 en ambre et 4,2:1 en rouge, sous AA dans les deux cas. -------------------------------------------------------------------------- */ .appgrid .tb-alerte { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; margin-bottom: 10px; font-size: 13px; line-height: 1.5; } .appgrid .tb-alerte > i { flex: none; margin-top: 2px; } .appgrid .tb-alerte.est-grave { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); } .appgrid .tb-alerte.est-signal { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); } .appgrid .tb-alerte-l { flex: 1; min-width: 0; } /* Le lien hérite l'encre de son bandeau : deux bleus dans un aplat rouge se disputent l'œil, et c'est le texte qui perd. */ .appgrid .tb-alerte-a { flex: none; font-size: 12px; font-weight: 600; color: inherit; } /* ---------------------------------------------------------------------------- LES DEUX COLONNES : ce qui se lit à gauche, ce qui se fait à droite. Les tables de position tiennent mal sous 520 px ; la colonne des files se lit à l'étroit sans dommage — d'où la colonne fixe à droite et non deux moitiés. -------------------------------------------------------------------------- */ .appgrid .tb-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 14px; align-items: start; margin-top: 14px; } .appgrid .tb-cols .eca-carte { margin-bottom: 14px; } .appgrid .tb-cols .eca-carte:last-child { margin-bottom: 0; } /* ---------------------------------------------------------------------------- L'HISTOGRAMME DES HUIT SEMAINES Trois états, trois teintes : bleu au-dessus du seuil, ambre en dessous, rouge sous zéro. Ce sont des MARQUES et non des encres — d'où --et-avertissement-mark pour l'ambre, qui seul passe le seuil graphique de 3:1. -------------------------------------------------------------------------- */ .appgrid .tb-courbe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 4px; height: 150px; } .appgrid .tb-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; } .appgrid .tb-col > b { font-family: var(--et-font-mono); font-size: 12px; font-weight: 600; color: var(--et-ink); } .appgrid .tb-col > span { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); white-space: nowrap; } .appgrid .tb-bar { width: 100%; background: var(--et-form-blue); } .appgrid .tb-bar.bas { background: var(--et-avertissement-mark); } .appgrid .tb-bar.neg { background: var(--et-danger); } /* ---------------------------------------------------------------------------- LES FILES UNE FILE EST UN BOUTON, pas une ligne de tableau : elle ouvre sa fiche. Le compteur porte l'urgence en PASTILLE tintée — c'est le seul chiffre qu'on lit de loin, et une encre nue sur le fond de carte ne le porterait pas. -------------------------------------------------------------------------- */ .appgrid .tb-file { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; background: transparent; border: 0; border-bottom: 1px solid var(--et-hairline); text-align: left; cursor: pointer; font: inherit; } .appgrid .tb-file:last-child { border-bottom: 0; } .appgrid .tb-file:hover { background: var(--et-surface-3); } .appgrid .tb-file:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; } .appgrid .tb-file > i { flex: none; width: 20px; font-size: 14px; } .appgrid .tb-file .l { flex: 1; min-width: 0; } .appgrid .tb-file .l b { display: block; font-size: 13px; font-weight: 600; color: var(--et-ink); } .appgrid .tb-file .c { flex: none; min-width: 34px; padding: 1px 8px; text-align: center; font-family: var(--et-font-mono); font-size: 13px; font-weight: 700; } /* ---------------------------------------------------------------------------- LA JAUGE DE PLAFOND « 1 200 000 / 5 000 000 » se lit ; la barre dit d'un regard qu'il reste de la ligne ou non. Sans plafond accordé la jauge est pleine — le découvert est intégralement non autorisé. -------------------------------------------------------------------------- */ .appgrid .tb-dec { font-family: var(--et-font-mono); font-size: 12px; } .appgrid .tb-jauge { height: 5px; margin-top: 6px; background: var(--et-piste); } .appgrid .tb-jauge > i { display: block; height: 100%; } /* ---------------------------------------------------------------------------- LES ÉTATS VIDES ET L'EXPLICATION DE FICHE Un état vide DIT POURQUOI et où remplir : « aucune échéance connue sur huit semaines » vaut mieux qu'une carte blanche, qui laisse croire à une panne. -------------------------------------------------------------------------- */ .appgrid .tb-vide { padding: 14px 12px; font-size: 13px; color: var(--et-muted); line-height: 1.55; } .xp-corps .tb-explication { margin-bottom: 10px; font-size: 12px; color: var(--et-muted); line-height: 1.55; } @media (max-width: 1100px) { .appgrid .tb-cols { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1024px) { /* Une file se vise au doigt comme n'importe quelle cible du gabarit (docs/cibles-tactiles.md) : 44 px, et une cible ne rétrécit jamais. */ .appgrid .tb-file { min-height: 44px; } }