/* ===================================================================== EasyCompta — lifting visuel commun des écrans (UX) POURQUOI SCOPPÉ SOUS .ecran-compta Les classes .md-card / .md-head / .md-strip / .table sont partagées par TOUS les modules. Pour moderniser EasyCompta sans toucher au stock, aux ventes, etc., toutes les règles ci-dessous sont préfixées par .ecran-compta (le conteneur posé par EcranCompta.razor). Aucun autre module n'est affecté. On enrichit l'existant (ombres douces, coins arrondis, hiérarchie des tableaux, états de focus) sans restructurer la mise en page : le risque de régression reste minime, et le rendu se met à niveau sur les ~28 écrans. *** LES COULEURS ÉCRITES EN DUR — 36 RETIRÉES, HUIT GARDÉES (2026-09-04) *** docs/couleurs-en-dur.md a ramené le dépôt de 767 à 59 littéraux en sept lots, mais ces lots portaient sur les PAGES. Les feuilles de style n'y sont jamais passées, et celle-ci en portait trente-six. Vingt-huit sont parties, et deux d'entre elles coûtaient autre chose que de la cohérence : l'anneau de focus rendait 1,65:1 (voir sa règle), et l'ancien bleu #1F6FB2 y survivait à la révision de valeurs du 2026-09-02 — un littéral ne suit aucune révision, c'est tout le motif de la règle. HUIT RESTAIENT, ET C'ÉTAIENT TOUTES DES OMBRES : les quatre couches de --cpt-shadow / --cpt-shadow-h, les deux de leur déclinaison sombre, et le halo bleuté de l'icône d'en-tête. Le motif de les garder se vérifiait : la charte n'avait qu'UN jeton d'ombre, --et-ombre-flottant, qui nomme l'ombre d'un PANNEAU FLOTTANT — pas celle d'une carte, qui n'a ni la même géométrie ni la même profondeur. En créer un pour ce seul fichier aurait posé un jeton que personne d'autre n'emploie. IL N'EN RESTE PLUS AUCUNE (2026-09-05). Le lot s'est fait pour toutes les feuilles à la fois, comme annoncé : vingt-quatre ombres du back-office pour VINGT valeurs distinctes, reprises en une famille de sept rôles. Cette feuille y verse ses huit — les cartes et leur survol par --cpt-shadow*, la plaque d'icône par --et-ombre-pose, le bandeau éphémère par --et-ombre-flottant. Une ombre reste le cas où le principe « un jeton, une valeur » se heurte à CSS : sa couleur est inséparable de sa géométrie. C'est pourquoi les sept rôles sont des jetons ENTIERS — « une ombre n'est pas deux jetons ». ===================================================================== */ .ecran-compta { /* Repose sur les jetons partagés de easytech-theme.css (source unique) — seul --cpt-radius reste propre à cet écran. L'OMBRE NE L'EST PLUS (2026-09-05) : --et-ombre-carte et --et-ombre-survol existent, et la divergence que la passation EasyCompta demandait de clore se clôt ici. Ce que la comptabilité y perd : ses cartes portaient DEUX couches — un contact de 1 px puis une diffusion de 18 px — quand le gabarit n'en pose qu'une, large et très étalée. Une couche de moins, et la même que partout ailleurs dans le produit. */ --cpt-accent: var(--et-amber); --cpt-accent-2: var(--et-amber-ink); --cpt-blue: var(--et-form-blue-d); --cpt-blue-2: var(--et-form-blue); --cpt-ink: var(--et-ink); --cpt-muted: var(--et-muted); --cpt-border: var(--et-hairline); --cpt-surface: var(--et-surface); --cpt-radius: 14px; --cpt-shadow: var(--et-ombre-carte); --cpt-shadow-h: var(--et-ombre-survol); } /* ---------- En-tête d'écran ---------- */ .ecran-compta .liste-entete { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--et-surface); border: 1px solid var(--cpt-border); border-radius: var(--cpt-radius); box-shadow: var(--cpt-shadow); } .ecran-compta .liste-entete .et-icone { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 0; font-size: 20px; color: var(--et-sur-aplat); background: linear-gradient(135deg, var(--cpt-blue-2), var(--cpt-blue)); box-shadow: var(--et-ombre-pose); } .ecran-compta .liste-entete .titre h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--cpt-ink); letter-spacing: -.01em; } .ecran-compta .liste-entete .titre .sous { font-size: 13px; color: var(--cpt-muted); margin-top: 1px; } .ecran-compta .liste-entete .badge { border-radius: 999px; font-weight: 600; padding: .4em .7em; } /* ---------- Cartes ---------- */ .ecran-compta .md-card { border: 1px solid var(--cpt-border); border-radius: var(--cpt-radius); box-shadow: var(--cpt-shadow); overflow: hidden; /* pour que la bande et les coins s'arrondissent */ transition: box-shadow .16s ease, transform .16s ease; } .ecran-compta .md-card + .md-card { margin-top: 4px; } /* APLATI LE 2026-09-04. Le second arrêt du dégradé était un ambre clairci écrit en dur (#f6b26b), et aucun jeton ne le nomme — parce que la charte n'en a pas besoin : depuis la bascule du 2026-08-17 elle est PLATE, « surfaces plates séparées par des filets ». Ce dégradé est un reste de la charte arrondie abandonnée ce jour-là, comme la règle .alert retirée plus bas pour la même raison. Un aplat d'ambre dit la même chose, et il suit le jeton. */ .ecran-compta .md-strip { height: 4px; background: var(--cpt-accent); } .ecran-compta .md-head { padding: 15px 20px; border-bottom: 1px solid var(--et-hairline); } /* --et-amber-voile : « ambre en transparence derrière un glyphe » est exactement la ligne que docs/couleurs-en-dur.md donne pour ce rôle. Le jeton vaut .22 là où la valeur écrite ici valait .15 — c'est le voile de la charte, et c'est précisément ce qu'un jeton sert à unifier. */ .ecran-compta .md-head .ico { border-radius: 0; width: 38px; height: 38px; background: var(--et-amber-voile); color: var(--cpt-accent-2); } .ecran-compta .md-head h2 { font-size: 18px; font-weight: 700; } /* ---------- Tableaux ---------- */ .ecran-compta .table { margin-bottom: 0; } /* EN-TÊTE : plus de teinte propre au module depuis le 2026-08-15. Compta peignait sa tête en gris très clair (#f7f9fc, encre --cpt-muted) avec sa déclinaison sombre, seule dérogation à --et-table-head dans toute l'application — au point que le commentaire de easytime-shell.css la citait comme l'exception qui confirmait la règle. La bascule des tableaux à l'anthracite lève la dérogation : ne restent ici que les choix TYPOGRAPHIQUES du module (capitales 11px/700, interlettrage), et fond, encre et filet retombent sur .table > thead > tr > th de easytech-theme.css. C'est ce que le module gagne à ne plus se distinguer sur ce point : il suivra les prochaines bascules de charte sans qu'on ait à penser à lui. Le bloc sombre correspondant a disparu par la même occasion — l'anthracite valant dans les deux thèmes, il n'y a plus rien à y redresser. */ .ecran-compta .table thead th { text-transform: uppercase; letter-spacing: .03em; font-size: 12px; font-weight: 700; white-space: nowrap; } .ecran-compta .table tbody tr { transition: background .1s ease; } .ecran-compta .table tbody tr:hover { background: var(--et-rang); } .ecran-compta .table tbody td { border-color: var(--et-hairline); } .ecran-compta .table tfoot td { border-top: 2px solid var(--cpt-border); background: var(--et-surface-3); } /* Colonnes numériques : chiffres alignés et tabulaires pour comparer d'un coup d'œil */ .ecran-compta .table td.text-end, .ecran-compta .table th.text-end { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ---------- Pastilles / badges ---------- */ .ecran-compta .badge { border-radius: 999px; font-weight: 600; } /* ---------- Contrôles de formulaire ---------- */ .ecran-compta .form-control, .ecran-compta .form-select { border-radius: 0; border-color: var(--et-form-border); transition: border-color .12s, box-shadow .12s; } /* --et-focus est le jeton de l'anneau de focus, déjà servi ailleurs. La valeur qui était écrite ici — rgba(31,111,178,.15) — portait en outre l'ANCIEN bleu de contenu : la révision du 2026-09-02 a fait passer le bleu à #0057B8, et un littéral ne suit aucune révision. C'est tout le motif de ce lot. */ .ecran-compta .form-control:focus, .ecran-compta .form-select:focus { border-color: var(--cpt-blue-2); box-shadow: 0 0 0 3px var(--et-focus); } /* ---------- Boutons ---------- */ .ecran-compta .btn { border-radius: 0; font-weight: 600; transition: filter .12s, box-shadow .12s, transform .06s; } .ecran-compta .btn-primary { background: var(--cpt-blue-2); border-color: var(--cpt-blue-2); } .ecran-compta .btn-primary:hover { background: var(--cpt-blue); border-color: var(--cpt-blue); } .ecran-compta .btn:active { transform: translateY(1px); } /* L'ANNEAU DE FOCUS PASSE AU BLEU PLEIN, et ce n'est pas qu'un jetonnage. rgba(31,111,178,.35) se compose sur blanc en #b1cde4 : mesuré, 1,65:1 contre la surface qu'il borde — bien sous le seuil de 3:1 que la WCAG 2.2 demande à un indicateur de focus. Le bleu de contenu plein (--et-form-blue, #0057B8) donne 6,87:1. Un anneau de focus qu'on ne voit pas ne remplit pas son office, et c'est le seul endroit de cette feuille où un littéral coûtait autre chose que de la cohérence. */ .ecran-compta .btn:focus-visible { outline: 3px solid var(--et-form-blue); outline-offset: 1px; box-shadow: none; } /* ---------- Alertes ---------- */ /* RETIRÉE le 2026-08-26. Cette règle était le SEUL habillage de .alert du dépôt, et elle datait de la charte arrondie abandonnée à la bascule du 2026-08-17. Depuis que easytech-theme.css donne la charte à .alert (voir sa section ENCARTS D'ALERTE), elle ne faisait plus qu'exempter la comptabilité de cette charte : à (0,2,0) elle primait sur le thème, et ses deux déclarations se retournaient l'une et l'autre contre lui — « border-radius: 0 » rendait ses coins aux 17 écrans montés par EcranCompta pendant que le reste du produit passait au carré, et « border: 1px solid transparent » EFFAÇAIT la bordure teintée que le thème venait de poser, laissant un aplat nu là où les autres modules montrent un encart cerné. Les 17 écrans suivent maintenant la charte commune ; le reste de cette feuille, antérieur à la bascule, n'est pas touché par ce lot. */ /* ---------- Accessibilité clavier ---------- */ .ecran-compta a:focus-visible, .ecran-compta .form-control:focus-visible, .ecran-compta .form-select:focus-visible { outline: 3px solid var(--et-form-blue); outline-offset: 1px; } /* ---------- Responsive : l'en-tête s'empile proprement ---------- */ @media (max-width: 640px) { .ecran-compta .liste-entete { flex-wrap: wrap; } .ecran-compta .liste-entete .ms-auto { margin-left: 0 !important; width: 100%; } } /* ---------- Cartes KPI : RETIRÉES AU LOT 9 (reprise de CPT-01) ---------- Le dépôt traînait DEUX gabarits de vignette en parallèle : celui-ci, et celui d'easycompta-vignette.css. PORTAGE.md §6 tranche pour le second et prévoyait la disparition du premier « avec la reprise de CPT-01 » — c'est fait : le tableau de bord comptable était son dernier lecteur sous .ecran-compta. Ce bloc portait aussi deux couleurs écrites en dur (#2f855a, #dc2626), qui ne suivaient ni le thème sombre ni la révision de valeurs du 2026-09-02. Elles partent avec lui ; la vignette du module dit la même chose en jetons, par --vig. La classe .kpi elle-même reste au thème : d'autres modules (Paie, App) s'en servent hors de .ecran-compta, et ce n'est pas ce chantier qui en décide. FUSION DU 2026-09-03 : main avait corrigé ce même bloc en parallèle, en passant ses deux littéraux aux jetons (#2f855a → --et-succes, #dc2626 → --et-danger). Les deux changements visaient le même défaut ; la suppression le subsume, et c'est elle qui est retenue — un bloc retiré n'a plus besoin de jetons. Vérifié avant de trancher : plus aucun class="kpi" ne subsiste sous .ecran-compta une fois la refonte de CPT-01 fusionnée. */ /* ---------- Tuiles d'action, mini-graphes et barres : RETIRÉS AVEC CPT-01 ---------- Les cinq blocs .cpt-actions / .cpt-tile / .cpt-chart / .cpt-col / .cpt-hbar ne servaient qu'au tableau de bord comptable, retiré du produit. Ils partent avec lui : cinq tuiles d'action rapide, l'histogramme d'activité mensuelle et les barres de répartition par journal et par origine n'avaient pas d'autre lecteur. .cpt-toolbar RESTE : NotesAnnexes (SYS-04) s'en sert aussi. C'est la seule classe .cpt-* de cette feuille que le tableau de bord ne détenait pas seul. */ /* ---------- Bandeau de synthèse (chips) ---------- */ .ecran-compta .cpt-synthese { display: flex; flex-wrap: wrap; gap: 10px; } .ecran-compta .cpt-chip { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 13px; background: var(--cpt-surface); border: 1px solid var(--cpt-border); border-radius: 999px; box-shadow: var(--cpt-shadow); font-size: 13px; } .ecran-compta .cpt-chip .v { font-weight: 700; color: var(--cpt-ink); font-variant-numeric: tabular-nums; } .ecran-compta .cpt-chip .k { color: var(--cpt-muted); font-size: 12px; } .ecran-compta .cpt-chip.warn { border-color: var(--et-avertissement-bord); background: var(--et-avertissement-bg); } .ecran-compta .cpt-chip.warn .v { color: var(--et-avertissement-ink); } /* ---------- Barre d'actions transverse (collante) ---------- */ .ecran-compta .cpt-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px; background: var(--cpt-surface); border: 1px solid var(--cpt-border); border-radius: var(--cpt-radius); box-shadow: var(--cpt-shadow); position: sticky; top: 6px; z-index: 6; } /* ---------- Champ de recherche ---------- */ .ecran-compta .cpt-searchbox { position: relative; display: inline-flex; align-items: center; } .ecran-compta .cpt-searchbox > .bi { position: absolute; left: 11px; color: var(--cpt-muted); font-size: 14px; pointer-events: none; } .ecran-compta .cpt-searchbox > input { padding: 6px 30px 6px 32px; border: 1px solid var(--et-form-border); border-radius: 999px; font-size: 13px; min-width: 200px; transition: border-color .12s, box-shadow .12s; } .ecran-compta .cpt-searchbox > input:focus { outline: none; border-color: var(--cpt-blue-2); box-shadow: 0 0 0 3px var(--et-focus); } .ecran-compta .cpt-searchbox > .clear { position: absolute; right: 8px; border: none; background: none; color: var(--cpt-muted); cursor: pointer; line-height: 1; padding: 2px; border-radius: 50%; } .ecran-compta .cpt-searchbox > .clear:hover { color: var(--cpt-ink); background: var(--et-surface-2); } /* ---------- État vide (bloc) ---------- */ .ecran-compta .cpt-empty { text-align: center; padding: 40px 24px; color: var(--cpt-muted); border: 1px dashed var(--et-form-border); border-radius: var(--cpt-radius); background: var(--et-surface-3); } .ecran-compta .cpt-empty .ic { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 0; font-size: 24px; color: var(--cpt-blue); background: var(--et-info-bg); margin-bottom: 10px; } .ecran-compta .cpt-empty .tt { font-weight: 700; color: var(--et-muted); font-size: 15px; } .ecran-compta .cpt-empty .ms { font-size: 13px; margin-top: 3px; } .ecran-compta .cpt-empty .act { margin-top: 14px; } /* ---------- Squelette de chargement ---------- */ .ecran-compta .cpt-skeleton { height: 14px; border-radius: 0; margin: 8px 0; background: linear-gradient(90deg, var(--et-surface-2) 25%, var(--et-hairline) 37%, var(--et-surface-2) 63%); background-size: 400% 100%; animation: cpt-shimmer 1.3s ease infinite; } @keyframes cpt-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } /* ---------- Notifications transitoires (toasts) ---------- */ .ecran-compta .cpt-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 1080; display: flex; flex-direction: column; gap: 10px; max-width: min(92vw, 380px); } .ecran-compta .cpt-toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--cpt-surface); border: 1px solid var(--cpt-border); border-left: 4px solid var(--cpt-blue-2); border-radius: 0; box-shadow: var(--et-ombre-flottant); font-size: 14px; color: var(--cpt-ink); animation: cpt-toast-in .22s ease; } .ecran-compta .cpt-toast .bi { font-size: 16px; line-height: 1.3; } .ecran-compta .cpt-toast .msg { flex: 1; min-width: 0; } .ecran-compta .cpt-toast .x { border: none; background: none; color: var(--cpt-muted); cursor: pointer; padding: 0 2px; line-height: 1.2; } .ecran-compta .cpt-toast .x:hover { color: var(--cpt-ink); } .ecran-compta .cpt-toast.ok { border-left-color: var(--et-succes); } .ecran-compta .cpt-toast.ok .bi { color: var(--et-succes-ink); } .ecran-compta .cpt-toast.err { border-left-color: var(--et-danger); } .ecran-compta .cpt-toast.err .bi { color: var(--et-danger-ink); } .ecran-compta .cpt-toast.info { border-left-color: var(--cpt-blue-2); } .ecran-compta .cpt-toast.info .bi { color: var(--cpt-blue-2); } @keyframes cpt-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ---------- Respect des préférences de mouvement ---------- */ @media (prefers-reduced-motion: reduce) { .ecran-compta * { transition: none !important; } .ecran-compta .cpt-skeleton, .ecran-compta .cpt-toast { animation: none !important; } } /* ===================================================================== MODE SOMBRE — CE QUI A ÉTÉ RETIRÉ, ET POURQUOI IL NE MANQUE PAS Ce bloc comptait vingt et un littéraux : une palette sombre écrite à la main — #0f1826, #223049, #e7ecf5, #8ea0bd, #1c2740, #16233a, #2b3d5a, #2a2013, #5a4620, #131d2e. Elle DOUBLAIT celle du thème, à quelques unités près sur chaque canal : surface #0f1826 contre #111A2B, filet #223049 contre #26324a, encre #e7ecf5 contre #e5edf5, encre secondaire #8ea0bd contre #8a97ac. Assez proche pour qu'on ne le voie pas d'un écran à l'autre, assez différent pour que la comptabilité ne soit jamais tout à fait de la même nuit que le reste du produit. ET LA PLUPART DE CES RÈGLES N'AVAIENT AUCUNE RAISON D'EXISTER. Le bloc clair en tête de cette feuille déclare déjà « --cpt-surface: var(--et-surface) », « --cpt-border: var(--et-hairline) », etc. Une propriété personnalisée est substituée À L'USAGE : --et-surface est redéfini par .appgrid[data-theme= "dark"], qui est un ANCÊTRE de .ecran-compta, donc --cpt-surface valait déjà la surface sombre du thème sans qu'on écrive rien. Les redéclarations ci-dessous ne corrigeaient pas un manque : elles ÉCRASAIENT un jeton correct par une valeur dérivée à l'œil. Ne restent donc que deux choses : · l'ombre, dont la couleur change de nature au sombre (un noir, pas un marine délavé) — et pour laquelle il n'existe pas de jeton d'ombre de CARTE, cf. la note en tête de feuille ; · les surfaces des blocs qui, en clair, ne prennent PAS --et-surface mais --cpt-surface ou une teinte plus claire, et qu'on ramène à la surface de carte au sombre. ===================================================================== */ /* La redéclaration sombre de l'ombre est PARTIE avec le lot du 2026-09-05. Son argument — au sombre une ombre n'est pas un marine transparent mais un noir, le marine délavé ne creusant plus rien sur fond nuit — était juste, et c'est exactement ce que le bloc sombre de easytech-theme.css fait désormais pour les sept rôles à la fois. --cpt-shadow pointe le jeton, qui bascule. */ /* Le champ de recherche : en clair il n'a pas de fond propre et hérite de la carte ; au sombre il lui en faut un, sinon il s'y dissout. Il n'a pas la classe .form-control, donc data-bs-theme ne l'habille pas non plus. UN CRAN PLUS CLAIR, ET NON PLUS SOMBRE — c'est le seul endroit de ce lot où le jeton ne rend pas ce que la valeur écrite rendait. Le champ portait #0f1826 quand la carte valait #111A2B : un cran plus SOMBRE, un champ creusé. La rampe sombre de la charte ne descend pas sous --et-surface ; ses deux crans suivants (--et-surface-2, --et-surface-3) montent. Le champ se distingue donc en étant posé plutôt que creusé, ce qui est aussi courant dans une interface sombre — mais c'est un choix, et il se regarde en recette. */ [data-bs-theme="dark"] .ecran-compta .cpt-searchbox > input { background: var(--et-surface-2); border-color: var(--et-form-border); color: var(--et-ink); } /* Le titre de l'état vide passe à l'encre pleine : en clair il porte --et-muted sur une surface presque blanche, ce qui suffit ; sur fond nuit le même rang d'encre s'efface. */ [data-bs-theme="dark"] .ecran-compta .cpt-empty .tt { color: var(--et-ink); } /* Les deux pistes de barre (.cpt-col .bar.vide, .cpt-hbar) avaient ici leur règle sombre. Elle part avec elles : leurs blocs clairs ont été retirés en même temps que le tableau de bord comptable, seul écran à les lire. */ /* RETIRÉES, parce que le jeton du bloc clair donne déjà la bonne valeur sombre : .cpt-toolbar, .cpt-toast, .cpt-tile, .cpt-chip — leur fond clair est --cpt-surface, qui vaut var(--et-surface) : les forcer à var(--et-surface) au sombre ne disait rien de plus. Elles ne le devenaient redondantes QU'UNE FOIS la redéclaration de --cpt-surface retirée — avant, elles corrigeaient sa dérive .md-card — le gabarit lui donne déjà var(--et-surface) .cpt-empty — --et-surface-3 et --et-form-border basculent seuls .cpt-tile:hover — --et-info-bord a sa déclinaison sombre .cpt-chip.warn — --et-avertissement-bg / -bord aussi .md-head — --et-hairline aussi .table tbody tr:hover — --et-rang aussi .table tfoot td — --et-surface-3 aussi .liste-entete — son dégradé est aplati sur --et-surface (voir plus haut) (L'en-tête de tableau n'a plus de règle sombre depuis le 2026-08-15 : voir le bloc « Tableaux ».) */