/* ============================================================================ EasyControlling (CG) — feuille de MODULE Vingt écrans de /app/gestion/* partagent la même grammaire : une BANDE DE CONTEXTE (l'exercice, la période, le périmètre — ce sur quoi tout l'écran est calculé), une bande de vignettes, des cartes de section, des tables de nombres, et une NOTE DE MÉTHODE en pied qui dit d'où viennent les chiffres. Un contrôleur de gestion ne lit pas un chiffre sans savoir sur quoi il porte. POURQUOI UNE FEUILLE DE MODULE ET NON VINGT FEUILLES D'ÉCRAN. La règle du dépôt est explicite — « une classe employée par deux écrans ou plus remonte dans un gabarit, jamais l'inverse ». La bande de contexte est portée par VINGT écrans : recopiée sous vingt préfixes, elle aurait divergé au premier réglage, et le premier écran qui l'oublie affiche ses sélecteurs empilés. C'est la même raison qui a fait exister easypaie.css et easyconso.css. CE QUI N'EST PAS ICI, ET NE DOIT PAS Y VENIR · La vignette d'indicateur — .tb-kpi / .tb-kpis (easycompta-vignette.css) : fond de surface, filet, bord gauche coloré par --vig. Les vignettes de ce module en sont, et n'en redessinent rien. · Le rail d'onglets interne et la carte de section — .eca-onglets, .eca-carte / .eca-tete / .eca-corps, .eca-tab (easycompta-onglets.css et easycompta-modal.css). Le nom du fichier dit d'où ils viennent, pas qui les lit : ils servent déjà cinq domaines. · Les fenêtres — .xp-* (easycompta-modal.css), gabarit de fait du dépôt. · Les contrôles, les boutons, les pastilles, la jauge, la liste — .mx-* du gabarit (modele-erp.css) et .tbl-* / Tableau.razor du gabarit de liste. AUCUNE COULEUR EN DUR : tout vient des jetons --et-*. Préfixe .ctg-, libre dans le dépôt au 2026-09-08. ========================================================================== */ /* ---------------------------------------------------------------------------- 1. LA BANDE DE CONTEXTE Elle porte ce sur quoi l'écran ENTIER est calculé — exercice, bornes de mois, axe, périmètre, inclusion du brouillard — et le bouton qui recalcule. Elle est AU-DESSUS de tout le reste, jamais dans une carte ni dans un onglet : un réglage posé dans une carte se lit comme un réglage de cette carte-là. Elle remplace le « d-flex align-items-center gap-2 mb-3 flex-wrap » que les dix-neuf écrans écrivaient à la main avec des .form-select-sm : trois utilitaires Bootstrap, une hauteur de champ qui n'était pas celle de la charte, et rien qui dise que c'est un contexte plutôt qu'une rangée de boutons. -------------------------------------------------------------------------- */ .appgrid .ctg-barre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } /* L'intitulé d'un réglage de la bande. Gris et 12 px : il nomme, il ne pèse pas — c'est la VALEUR à côté de lui qu'on vient lire. */ .appgrid .ctg-lab { font-size: 12px; color: var(--et-muted); white-space: nowrap; } /* Trois largeurs, et pas une de plus : un millésime (4 chiffres), un mois (« Septembre »), un choix long (un axe, un centre, un modèle). Écrites ici et non en ligne dans les pages — docs/conventions-responsive.md, « jamais une largeur en dur dans une page ». */ .appgrid .ctg-an { width: 96px; } .appgrid .ctg-mois { width: 132px; } .appgrid .ctg-long { width: 230px; max-width: 100%; } /* Ce qui se pousse à droite de la bande : le bouton de recalcul, l'export. */ .appgrid .ctg-fin { margin-left: auto; } /* Le résumé de ce que la bande vient de produire — « 4 axes · 128 valeurs ». Il suit les réglages et se lit avec eux, d'où sa place dans la bande. */ .appgrid .ctg-resume { font-size: 12px; color: var(--et-muted); } /* Un séparateur vertical entre deux groupes de réglages de la même bande : « exercice » d'un côté, « périmètre » de l'autre. Un filet, pas une marge — une marge ne dit pas qu'il y a deux groupes. */ .appgrid .ctg-sep { flex: none; width: 1px; align-self: stretch; min-height: 22px; background: var(--et-hairline); } /* ---------------------------------------------------------------------------- 1 bis. LE JETON DE DÉCOMPTE D'UN ONGLET Combien de valeurs porte cet axe, combien d'indicateurs tient la bibliothèque. Il est DANS l'onglet et non dans la page parce que c'est ce qu'on compare AVANT de cliquer — un axe à deux valeurs et un axe à quarante ne se lisent pas pareil. Il vivait sous .ax-jeton, dans la feuille de l'écran des axes. Un deuxième écran l'emploie (TDB-03) : la règle du dépôt le fait remonter ici, où le troisième le trouvera au lieu de le recopier. 12 px et pas moins : l'échelle de la charte ne descend plus sous 12 px depuis la révision des valeurs du 2026-09-02. -------------------------------------------------------------------------- */ .appgrid .ctg-jeton { display: inline-block; min-width: 20px; margin-left: 2px; padding: 0 5px; background: var(--et-surface-3); border: 1px solid var(--et-form-border); font-family: var(--et-font-mono); font-size: 12px; font-weight: 600; line-height: 17px; text-align: center; white-space: nowrap; } /* ---------------------------------------------------------------------------- 2. L'ATTENTE ET L'ÉTAT VIDE Ils occupent la MÊME boîte : la page ne saute pas quand les chiffres arrivent. C'est ce que la carte-avec-spinner des écrans d'origine ne donnait pas — un bloc de 60 px pendant le calcul, un écran entier après. -------------------------------------------------------------------------- */ .appgrid .ctg-vide { display: grid; place-items: center; gap: 4px; padding: 44px 24px; text-align: center; background: var(--et-surface); border: 1px solid var(--et-hairline); } .appgrid .ctg-vide > .bi { font-size: 26px; color: var(--et-form-blue); } .appgrid .ctg-vide-t { font-size: 14px; font-weight: 700; color: var(--et-ink); } .appgrid .ctg-vide-m { font-size: 13px; color: var(--et-muted); max-width: 62ch; } /* L'encre du rouet vient du jeton, pas de `.text-primary` : la classe utilitaire de Bootstrap porte sa propre valeur, que la charte ne corrige pas (docs/couleurs-en-dur.md). */ .appgrid .ctg-vide .spinner-border { color: var(--et-form-blue); } /* ---------------------------------------------------------------------------- 3. LA MISE EN PAGE DES CARTES .ctg-duo — deux colonnes inégales : l'état à gauche, ce qui le commente à droite (ratios, contrôle d'exhaustivité, comptes non rattachés). Sous 1100 px les deux passent l'une sous l'autre : à cette largeur, la colonne de droite ne tient plus ses nombres sans les couper. .ctg-cartes — une file de cartes de même rang, autant que la largeur en tient. Le palier vient de l'échelle retenue (docs/conventions-responsive.md), pas d'une valeur inventée pour l'occasion. -------------------------------------------------------------------------- */ .appgrid .ctg-duo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: start; } .appgrid .ctg-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } /* Deux cartes empilées dans une colonne de .ctg-duo. */ .appgrid .ctg-pile { display: grid; gap: 12px; align-content: start; } @media (max-width: 1100px) { .appgrid .ctg-duo { grid-template-columns: minmax(0, 1fr); } } /* ---------------------------------------------------------------------------- 4. LES TABLES DE NOMBRES Le corps vient de .mx-tbl (gabarit) ou de .eca-tab (gabarit de module). Ce qui est propre au contrôle de gestion, c'est la RANGÉE DE SOLDE : dans une cascade (SIG, résultat par axe, écarts), une ligne sur cinq n'est pas un poste mais un total, et elle doit se voir sans être lue. Un aplat teinté et un filet à gauche, pas une couleur d'état : un solde n'est ni bon ni mauvais, il est structurant. --et-tint est le même aplat que celui d'une rangée retenue dans une liste. -------------------------------------------------------------------------- */ .appgrid .ctg-solde > td { background: var(--et-tint); font-weight: 700; } .appgrid .ctg-solde > td:first-child { box-shadow: inset 3px 0 0 var(--et-form-blue); } /* Un poste, sous le solde qui le résume : décalé et discret. */ .appgrid .ctg-poste > td:first-child { padding-left: 22px; color: var(--et-form-label); } /* L'ENCRE D'UNE GRANDEUR SIGNÉE, dans une table ou une valeur libre. Elle n'emprunte pas .mx-fait-val.est-* du gabarit, qui porterait aussi sa marge et sa graisse de vignette dans une cellule de table : on ne veut ici que l'encre. Et elle est une ENCRE, jamais un `color:` écrit à la main — les trois jetons -ink sont ceux mesurés sur le pire fond qu'une rangée rencontre (survol, sélection), pas sur le blanc (CLAUDE.md). .ctg-att est l'encre d'une PROJECTION — un atterrissage, une prévision, un engagé : ni un constat, ni une alerte. C'est le seul emploi d'ambre du module, et il est en encre parce que l'ambre pur ne tient aucun seuil. -------------------------------------------------------------------------- */ .appgrid .ctg-pos { color: var(--et-succes-ink); } .appgrid .ctg-neg { color: var(--et-danger-ink); } .appgrid .ctg-att { color: var(--et-avertissement-ink); } /* LA RANGÉE DÉPLIÉE, ET SON DÉTAIL SOUS ELLE Trois écrans du module ouvrent une fiche SOUS la rangée plutôt qu'en fenêtre : la fiche de coût d'un objet (CUT-02), le détail d'un centre (REP-02), la ventilation d'une ligne (VEN-01). C'est un choix juste — on compare la fiche à ses voisines, ce qu'une fenêtre modale interdit — mais il exige que les deux rangées se lisent comme UNE : celle qu'on a ouverte, et ce qu'elle contient. Les écrans employaient « table-active » et « table-light » de Bootstrap : deux aplats que la charte ne corrige pas, et qui en thème sombre éclaircissent une surface déjà sombre. -------------------------------------------------------------------------- */ .appgrid .ctg-retenue > td { background: var(--et-tint); } .appgrid .ctg-retenue > td:first-child { box-shadow: inset 3px 0 0 var(--et-form-blue); } .appgrid .ctg-detail > td { background: var(--et-surface-2); padding: 12px; } /* Le titre de la fiche dépliée : il rappelle DE QUI elle est le détail. */ .appgrid .ctg-detail-t { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--et-ink); } /* UNE RANGÉE DÉFICITAIRE. Le gabarit a bien une rangée en alerte (.mx-tbl tr.est-alerte), mais elle est AMBRE — « à traiter ». Un élément qui perd de l'argent n'est pas à traiter, il est en perte : c'est le rang rouge. L'aplat est celui des pastilles de danger, pas --et-danger, qui ferait de la rangée un bloc rouge illisible. */ .appgrid .ctg-deficit > td { background: var(--et-danger-badge-bg); } .appgrid .ctg-deficit > td:first-child { box-shadow: inset 3px 0 0 var(--et-danger); } /* LA COLONNE QUI COMPTE, ET CELLE QUI DÉRANGE Un croisé analytique (PRF-01) pose N colonnes de valeurs d'axe, plus deux qui ne sont pas des valeurs : le TOTAL, qu'on lit en premier, et le NON IMPUTÉ, qui est le trou de l'imputation. Les deux doivent se distinguer des N autres sans devenir des couleurs d'état — un total n'est pas « bon », un non-imputé n'est pas une « alerte », c'est un reste à imputer. .ctg-col-total prend --et-tint, le même aplat qu'une rangée retenue. .ctg-col-reste prend l'aplat d'avertissement, qui est ici à sa place : il signale bien quelque chose à traiter, et son encre reste celle du gabarit. -------------------------------------------------------------------------- */ .appgrid .ctg-col-total { background: var(--et-tint); } .appgrid .ctg-col-reste { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); } /* LA RANGÉE DE GROUPE — « Produits des activités ordinaires », « Charges… ». Elle traverse la table sur toute sa largeur : ce n'est pas une ligne de données, c'est un intertitre. Mono capitales, comme toutes les têtes de section de la charte. */ .appgrid .ctg-groupe > td { background: var(--et-surface-2); font-family: var(--et-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--et-table-head-encre); } /* UN SOUS-TOTAL INTERMÉDIAIRE, qui n'est pas le total de la table : un filet simple, là où .ctg-total en pose un fort. */ .appgrid .ctg-sous-total > td { border-top: 1px solid var(--et-filet-fort); font-weight: 600; } /* Une colonne de grandeurs : ses en-têtes suivent ses cellules. .mx-tbl aligne ses `td.num` mais laisse l'en-tête à l'écran — c'est lui qui sait laquelle de ses colonnes porte un nombre. */ .appgrid .ctg-num { text-align: right; } /* Le total d'une colonne, en pied de table. */ .appgrid .ctg-total > td { border-top: 2px solid var(--et-filet-fort); font-weight: 700; } /* UN CHAMP DE TABLE DONT LA SAISIE MANQUE — la justification d'un poste révisé, exigée à la validation. Le filet rouge et non un aplat : la rangée porte déjà l'aplat d'alerte du gabarit (.mx-tbl tr.est-alerte), et deux aplats superposés ne disent pas deux fois plus fort. .mx-input du gabarit n'a pas d'état d'erreur — il porte sa ligne d'erreur SOUS le champ (.mx-sous.est-erreur), ce qu'une cellule de table ne peut pas loger. Ici c'est le champ lui-même qui doit se voir. */ .appgrid .ctg-champ-err { border-color: var(--et-danger); } .appgrid .ctg-champ-err:focus { outline-color: var(--et-danger); } /* ---------------------------------------------------------------------------- 5. L'HISTOGRAMME DE TRAJECTOIRE Douze mois, une barre par mois, la hauteur en pourcentage du plus grand. Ce n'est pas un graphique de la bibliothèque de restitution : c'est douze nombres qu'on compare d'un coup d'œil, et un écran qui l'écrit à la main écrit aussi sa hauteur, sa gouttière et son ancrage — trois valeurs de plus à faire diverger. La couleur d'une barre est une DONNÉE (positif / négatif) : elle reste en ligne, comme la largeur d'une jauge. La géométrie, elle, est ici. -------------------------------------------------------------------------- */ .appgrid .ctg-histo { display: flex; align-items: flex-end; gap: 4px; height: 150px; } .appgrid .ctg-histo-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; } .appgrid .ctg-histo-bar { width: 70%; min-height: 2px; } .appgrid .ctg-histo-lbl { margin-top: 4px; font-size: 12px; color: var(--et-muted); } /* ---------------------------------------------------------------------------- 5 bis. LA BARRE D'EFFET, À DEUX CÔTÉS La décomposition d'une variation — volume, mix, prix, coût — se lit autour d'un axe : ce qui a poussé à droite, ce qui a tiré à gauche. C'est le seul dessin du module qu'aucun gabarit ne porte : .mx-barre du gabarit est une JAUGE (0 → 100 %, un seul sens), pas un écart signé. L'AXE EST DANS LA PISTE, pas dans la barre : un pseudo-élément, donc rien à écrire dans la page. Les trois écrans qui décomposent un écart (marge PRF-03, écarts de gestion ECA-01, rentabilité PRF-02) l'écrivaient chacun avec quatre positionnements absolus en ligne — la règle du dépôt les fait remonter ici. CE QUI RESTE EN LIGNE, et c'est juste : le CÔTÉ et la LARGEUR de la barre. Ce sont des données, comme la largeur d'une jauge. -------------------------------------------------------------------------- */ .appgrid .ctg-effet { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .appgrid .ctg-effet-lbl { flex: 0 0 150px; min-width: 0; font-size: 13px; color: var(--et-ink); } .appgrid .ctg-effet-piste { position: relative; flex: 1; height: 18px; min-width: 0; background: var(--et-surface-2); } .appgrid .ctg-effet-piste::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--et-form-border); } .appgrid .ctg-effet-bar { position: absolute; top: 2px; bottom: 2px; } .appgrid .ctg-effet-val { flex: 0 0 110px; font-size: 13px; font-weight: 600; text-align: right; font-family: var(--et-font-mono); } /* La somme des effets, sous eux : elle DOIT retomber sur la variation totale — c'est ce qui distingue une décomposition d'une illustration. */ .appgrid .ctg-effet-total { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 2px solid var(--et-filet-fort); font-weight: 700; } @media (max-width: 720px) { /* Sous 720 px l'intitulé et la valeur mangent la piste : les trois passent en deux lignes, la piste sur toute la largeur. Palier de l'échelle retenue (docs/conventions-responsive.md), pas une valeur inventée. */ .appgrid .ctg-effet, .appgrid .ctg-effet-total { flex-wrap: wrap; } .appgrid .ctg-effet-lbl { flex-basis: auto; } .appgrid .ctg-effet-val { flex: 1 0 auto; } .appgrid .ctg-effet-piste { flex-basis: 100%; } } /* ---------------------------------------------------------------------------- 5 ter. LE CURSEUR DE SIMULATION Un what-if (CUT-03) se règle au curseur : on tire, on lit le résultat changer. Le gabarit n'en a pas — il n'a que des champs, où l'on saisit une valeur qu'on connaît déjà. Ici on ne la connaît pas : on la cherche. L'écran employait `.form-range` de Bootstrap, dont le POUCE porte le bleu de Bootstrap et non celui de la charte (docs/couleurs-en-dur.md : une classe utilitaire de Bootstrap porte sa propre valeur, que la charte ne corrige pas). `accent-color` le règle en une ligne, et suit la bascule sombre. L'INTITULÉ ET LA VALEUR SONT SUR LA MÊME LIGNE, au-dessus de la piste : c'est la valeur qu'on suit du regard en tirant, pas l'intitulé. -------------------------------------------------------------------------- */ .appgrid .ctg-curseur + .ctg-curseur { margin-top: 12px; } .appgrid .ctg-curseur-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--et-ink); } .appgrid .ctg-curseur-val { font-family: var(--et-font-mono); font-weight: 600; font-variant-numeric: tabular-nums; } .appgrid .ctg-range { width: 100%; margin-top: 4px; accent-color: var(--et-form-blue); } @media (max-width: 1024px) { /* Un curseur est une cible tactile : sa piste s'épaissit pour qu'on l'attrape (docs/cibles-tactiles.md). La hauteur porte sur la BOÎTE de l'input, ce qui agrandit la zone de saisie sans grossir le dessin de la piste. */ .appgrid .ctg-range { height: 44px; } } /* ---------------------------------------------------------------------------- 6. LA NOTE DE MÉTHODE Elle dit d'où vient le chiffre — quel mapping, quelle assiette, quelle convention de signe, et quel écran fait autorité quand deux se ressemblent. Elle est en PIED d'écran et en gris : elle se lit une fois, pas tous les jours, mais elle doit être là le jour où un solde surprend. Elle remplace les « alert alert-light border py-2 small » des écrans d'origine : l'alerte de Bootstrap dit « attention », alors que ce texte ne signale rien — il explique. Même registre que .mx-methode du gabarit, dont elle reprend l'encre. -------------------------------------------------------------------------- */ .appgrid .ctg-mot { margin-top: 12px; padding: 9px 12px; background: var(--et-surface-2); border-left: 3px solid var(--et-hairline); font-size: 12px; line-height: 1.6; color: var(--et-muted); } .appgrid .ctg-mot > .bi:first-child { margin-right: 5px; color: var(--et-form-blue); } /* ---------------------------------------------------------------------------- 7. LE PALIER TACTILE docs/cibles-tactiles.md : sous 1024 px, aucune cible interactive ne descend sous 44 px, et une cible ne rétrécit jamais. Les réglages de la bande de contexte en sont — ce sont les contrôles les plus employés du module. Il n'y a pas d'autre palier : la mesure n'a rien montré à porter ailleurs. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .appgrid .ctg-an, .appgrid .ctg-mois, .appgrid .ctg-long { height: 44px; } .appgrid .ctg-long { width: 100%; } .appgrid .ctg-fin { margin-left: 0; } }