/* ===========================================================================
EasyERP — thème de marque pour AdminLTE 4 / Bootstrap 5.3
À inclure APRÈS adminlte.css et bootstrap.css.
Charte EasyERP EN VIGUEUR (bascule du 2026-08-17, passation « Design 7 » —
docs/modeles/passation-design-7.md) : SAP Fiori habillé EasyTech.
Bleu SAP #0A6ED1 INTERACTIF dans la page — liens, boutons transparents,
filets de groupe, bordures actives, case cochée
Marine #1B2A5E CHROME seulement — barre du haut, latérale, splash, auth
Ardoise #354A5F structure — têtes de tableau, intitulés de groupe
Orange #F26C16 LE BOUTON D'ENGAGEMENT, un par écran, rien d'autre
Open Sans (substitut de la « 72 ») / IBM Plex Mono, ANGLES DROITS
La bascule est volontairement faite ICI, sur les sélecteurs partagés
(.modal-*, .form-control, .table, .liste-entete…) plutôt qu'écran par écran :
les ~80 modales et tous les écrans des 16 modules la reçoivent sans une
ligne de balisage modifiée. Pour le balisage NEUF, la référence est le
gabarit : css/modele-erp.css (classes .mx-*) et docs/modeles/passation-design-7.md.
Le modèle de fiche précédent (css/fiche.css, .fx-*) reste servi tant que des
écrans en vivent ; ses jetons pointent désormais ceux d'ici.
Chartes précédentes, pour lire l'historique des commentaires plus bas :
2026-08-12 marine #1B2A5E + orange « action » au sens large, angles 14/10/8,
IBM Plex Sans ; avant elle, bleu #00408F (chrome) + #1f6fb2 (contenu), accent
ambre #F49A47, angles droits, police Inter.
=========================================================================== */
/* ===========================================================================
JETONS DE MARQUE — source unique de vérité pour toute la Web app.
Tout autre fichier CSS du projet (easytime-shell.css, compta-ux.css, …) doit
référencer ces variables via var(...) plutôt que redéclarer des couleurs en
dur — c'est la règle qui manquait et qui a fait diverger 3 systèmes de
jetons concurrents (cf. audit "modernisation des vues", 2026-08).
=========================================================================== */
/* ===========================================================================
BASCULE DE CHARTE — 2026-08-17, passation « Design 7 »
(docs/modeles/passation-design-7.md, captures dans docs/modeles/captures/)
CE QUI CHANGE, EN UNE PHRASE : la grammaire d'interface devient celle de SAP
Fiori habillée EasyTech — surfaces plates séparées par des filets, bleu SAP
#0A6ED1 pour tout ce qui est interactif, et l'ORANGE RÉDUIT AU SEUL BOUTON
D'ENGAGEMENT.
L'orange ne disparaît pas, il se rétrécit. Depuis la bascule du 2026-08-12 il
portait « l'action » au sens large : liserés d'en-tête, anneaux de focus, cases
à cocher, pastilles, colonne triée, bandeau de sélection. Résultat mesuré sur
la liste du personnel : onze objets orange simultanés, dont aucun n'était le
bouton sur lequel on voulait faire cliquer. La passation tranche — un écran ne
porte QU'UN SEUL bouton orange à la fois, et l'orange ne se pose jamais sur une
pastille, une case à cocher, un numéro de page ou une bordure.
CE QUI REPREND SA PLACE : la distinction chrome / contenu, abandonnée le
2026-08-12 quand les deux bleus avaient été fondus dans le marine. Elle
revient, mais dans l'autre sens et pour une raison qui tient :
- --et-blue #1B2A5E marine — CHROME (barre du haut, latérale, splash,
écrans d'authentification). Hors passation : aucune
de ses maquettes ne montre la coquille. Le reteindre
aurait été une décision prise sans mandat.
- --et-form-blue #0A6ED1 bleu SAP — INTERACTIF DANS LA PAGE (liens, boutons
transparents, filets de groupe, bordures actives,
valeurs cliquables, case cochée, ligne sélectionnée).
Les rares endroits où le chrome consommait --et-form-blue (barre du haut,
bannière de période, fond des écrans portail) pointent désormais --et-blue en
clair : ils ne suivent plus l'interactif, ce qui était l'accident de la fusion.
LES ANGLES DEVIENNENT DROITS. --et-r / --et-r2 / --et-r3 valent 0 : « cartes et
vues à plat, la structure tient par les filets ». Ils ne sont pas supprimés —
~200 règles les nomment — ils sont ramenés à zéro en un point. Depuis le
2026-09-02 (passation EasyCompta) --et-r-btn les rejoint à zéro : UN SEUL
arrondi survit, --et-r-pill (pastilles d'état et barres de progression). Les
champs de saisie ET les boutons sont à angles droits, sans exception.
LA POLICE PASSE À OPEN SANS. Elle était d'abord entrée comme substitut de la 72
de SAP, nommée devant elle en attendant une licence ; la 72 sort de la pile le
2026-09-02, la passation retenant Open Sans pour elle-même.
IBM Plex Mono reste, avec un rôle élargi : matricules, numéros de série, dates,
heures, montants, compteurs, intitulés de groupe, en-têtes de colonne.
Ce fichier reste la SOURCE UNIQUE des jetons. Les composants du gabarit qui
n'avaient pas d'équivalent (barre d'outils d'en-tête, page objet, rail
d'onglets groupés, formulaire dense, couche analytique) vivent dans
css/modele-erp.css, en classes .mx-*, et ne redéclarent aucune couleur.
=========================================================================== */
/* ==========================================================================
ZONES SÛRES DE L'APPAREIL (lot 07, docs/zones-sures.md)
Encoche, indicateur d'accueil, coins arrondis : les quatre retraits que le
système impose quand la page est mise en page BORD À BORD
(`viewport-fit=cover` dans le d'App.razor).
POURQUOI DES JETONS ET NON `env()` ÉCRIT SUR PLACE
1. Une seule source. `env(safe-area-inset-bottom, 0)` était déjà écrit à
deux endroits de caisse-mobile.css alors qu'aucun ne le rendait
non nul : personne ne pouvait le voir, et personne ne savait où
chercher. Les surfaces bord à bord se comptent maintenant en un endroit.
2. **Cela se teste.** `env()` ne se simule pas : aucun navigateur de bureau,
aucun mode appareil des outils de développement ne fabrique une encoche.
Redéfinis, ces quatre jetons rejouent n'importe quel appareil dans un
navigateur ordinaire — c'est la seule recette possible sans téléphone en
main, et c'est celle qui a servi (docs/zones-sures.md §4).
Ils valent 0 partout ailleurs : sur un écran sans encoche, la règle qui les
emploie ne fait rien. Aucun palier, aucune détection d'appareil. */
:root {
--et-safe-haut: env(safe-area-inset-top, 0px);
--et-safe-bas: env(safe-area-inset-bottom, 0px);
--et-safe-gauche: env(safe-area-inset-left, 0px);
--et-safe-droite: env(safe-area-inset-right, 0px);
}
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
/* --- Couleurs de marque (chrome : sidebar, header, éléments de navigation) ---
Alignées sur la charte EasyERP (maquette « Fiche terminal », 2026-08-12) :
le marine #1B2A5E est celui de l'écran de démarrage et de l'écran de
connexion, jusqu'ici les seuls à la porter. L'ancien #00408F était un
second bleu de marque, sans emploi hors de ce fichier. */
--et-blue: #1B2A5E;
--et-blue-600: #142046;
--et-blue-700: #0E1730;
/* LES DEUX DÉGRADÉS DE MARQUE — jetons ENTIERS, comme --et-ombre-flottant :
un dégradé ne se règle pas en trois jetons d'arrêt plus un d'angle. Ils
vivaient en dur dans easytime-shell.css, et chacun portait un arrêt que
la famille marine ne nomme pas — parce qu'elle ne fait que DESCENDRE
(#1B2A5E, #142046, #0E1730) quand ces deux-là remontent en clarté.
Ici plutôt que là-bas : une valeur de marque appartient au thème, qui est
la source ; et une prochaine bascule de marine les trouve du même coup.
Le pictogramme de module (PictoModule, quinze copies dans le lanceur) et
le fond d'authentification du portail salarié. */
--et-degrade-marque: linear-gradient(155deg, #2B3F7E 0%, #1B2A5E 55%, #142046 100%);
--et-degrade-accueil: linear-gradient(135deg, #1B2A5E 0%, #142046 55%, #0F4A80 100%);
--et-orange: #F26C16;
--et-orange-600: #D95F0E;
--et-orange-700: #C4540A;
/* 2026-08-17 : la primaire de Bootstrap suit le CONTENU, pas la marque. Elle
sert des liens et des boutons posés dans la page — jamais le chrome, qui
nomme --et-blue en clair. Un lien marine sur fond blanc se lisait d'ailleurs
mal comme un lien : trop proche du noir du texte courant.
« a { color: #0A6ED1 } » est littéralement la première règle de la passation. */
--bs-primary: #0A6ED1;
--bs-primary-rgb: 10, 110, 209;
--bs-link-color: #0A6ED1;
--bs-link-color-rgb: 10, 110, 209;
--bs-link-hover-color: #0854A0;
/* --- Couleurs de contenu (formulaires, tableaux, listes — tous modules) ---
Depuis la bascule de charte, contenu et marque partagent le même marine :
la distinction chrome/contenu d'origine faisait cohabiter deux bleus
(#00408F et #1f6fb2) que rien ne justifiait à l'usage. Les jetons restent
séparés — ils gardent leurs points d'accroche — mais pointent la même
teinte. L'ACTION, elle, n'est plus bleue : voir --et-action ci-dessous. */
/* BASCULE 2026-08-17 : le bleu de CONTENU cesse d'être le marine de marque et
devient le bleu SAP #0A6ED1 de la passation. C'est la couleur de tout ce qui
est interactif DANS la page — liens, boutons transparents de barre d'outils,
filets de groupe, filet de page de 3 px, bordures actives, valeurs
cliquables, case cochée, ligne sélectionnée. Le marine reste --et-blue et
n'habille plus que la coquille.
Contraste : #0A6ED1 sur blanc = 4,73:1, au-dessus du seuil AA pour du texte
courant ; #0854A0 (survol) = 7,17:1. */
--et-form-blue: #0057B8;
/* LE BLEU SAP QUAND IL SERT D'ENCRE, et lui seul.
Même valeur qu'au-dessus en clair : rien ne bouge sur ce thème. Il existe
parce que --et-form-blue ne PEUT PAS prendre de valeur sombre — relevé le
2026-08-27 : 240 appels, dont 84 en encre mais 144 en aplat, bordure ou
contour de focus. L'éclaircir pour sauver l'encre repeindrait 144 aplats
et bordures ; le laisser foncé laisse l'encre à 3,45:1 sur --et-surface
sombre. C'est le cas INVERSE de --et-form-blue-d (2026-08-26), où 82 appels
sur 87 étaient de l'encre et où retourner le jeton était donc la bonne
opération. Ici il faut séparer les rôles, pas retourner le jeton.
En sombre : #8FB4F0, la valeur de --et-navy-ink — le thème n'invente pas
un huitième bleu. */
--et-form-blue-encre: #0A6ED1;
--et-form-blue-d: #004494;
/* LE MÊME BLEU FONCÉ, MAIS DANS SON AUTRE RÔLE : un APLAT sous du texte blanc,
et non de l'encre. La distinction ne servait à rien tant que les deux rôles
partageaient une valeur ; elle devient nécessaire le jour où le thème sombre
ÉCLAIRCIT l'encre (voir --et-form-blue-d plus bas) — un aplat éclairci
laisserait du blanc sur bleu clair. Deux appels seulement, les survols de
bouton plein de easytime-shell.css. Valeur identique en clair : rien ne
bouge sur le thème par défaut. */
--et-form-blue-plein: #0854A0;
/* En-tête de tableau. Jeton SÉPARÉ du bleu de marque : l'en-tête est une bande
de structure, pas un élément de chrome — les teindre ensemble obligeait à
choisir entre une navigation plus claire et des tableaux plus lourds.
Ardoise #34495E, blanc dessus : 9,3:1, largement au-dessus du seuil AA même
pour les capitales de 11,5 px de l'en-tête. */
/* 2026-08-15 : GRIS ANTHRACITE #4E5464, blanc dessus 7,54:1 — toujours au-dessus
du seuil AA pour ces capitales. Le raisonnement du jeton séparé ne bouge pas ;
seule la teinte change, et elle change ICI POUR LA MÊME RAISON QUE dans
easytime-shell.css : les deux familles de tableaux de l'application — les
.table Bootstrap servis par ce jeton, et le composant Tableau (.tbl) servi
par --tbl-tete-* — avaient chacune leur gris d'en-tête. Deux gris voisins mais
distincts, ce qui se voyait sur les écrans qui montrent les deux.
L'ardoise n'était pas fautive — elle était juste seule de son côté.
CE JETON EST LA SOURCE UNIQUE de la teinte d'en-tête, pour les TROIS familles
de tableaux : les .table Bootstrap (ici), le composant Tableau dont les
--tbl-tete-* pointent dessus, et les grilles de planning (.plg-th). La première
version de cette bascule recopiait la valeur dans chaque famille, ce qui posait
autant d'endroits à garder alignés ; ils pointent tous ici désormais, et une
prochaine bascule de charte se fait sur ces deux lignes.
Le pendant foncé sert partout où une cellule d'en-tête doit se distinguer de
ses voisines sans changer de registre : colonne triée et survol côté Tableau,
colonnes de week-end côté planning. Blanc dessus : 9,90:1. */
/* 2026-08-17 : ARDOISE #354A5F, la teinte de tête de la passation. Le
raisonnement de l'anthracite ne bouge pas d'un mot — jeton séparé, aplat
sombre, valeur unique pour les deux thèmes, source unique pour les trois
familles de tableaux. Seule la teinte change, et elle revient à un gris
BLEUTÉ : la passation l'emploie aussi pour les intitulés de groupe et les
cartes sombres, ce qui donne enfin une seule couleur de structure au lieu
d'un gris de tableau isolé du reste.
Blanc sur #354A5F = 9,00:1 ; sur le pendant foncé #2C3E50 = 10,89:1. Le
seuil AA de 4,5 exigé par les capitales mono de 10,5 px de l'en-tête est
tenu deux fois. Le libellé de la passation, lui, n'est pas blanc mais
#C3D0E4 (--et-sur-ardoise) : 6,26:1, toujours au-dessus. */
--et-table-head: #354A5F;
/* L'ARDOISE QUAND ELLE SERT D'ENCRE, et lui seul. Même raison, même arithmétique
que --et-form-blue-encre : 106 appels, 77 en encre mais 38 en aplat ou bordure
— les têtes de tableau, les segments actifs, les puces. Retourner le jeton
rendrait blanches trente-huit surfaces qui portent déjà du texte blanc.
En sombre : #C3D0E4, la valeur de --et-sur-ardoise — l'encre que la charte
pose déjà SUR l'ardoise, reprise ici parce qu'en thème sombre c'est la
surface entière qui est devenue ardoise. */
--et-table-head-encre: #354A5F;
--et-table-head-fonce: #2C3E50;
--et-form-blue-l: #6FA8E5;
--et-form-border: #D9D9D9;
/* Le filet de 3 px sous l'en-tête de page, de carte et de modale : BLEU, plus
orange. C'est la conséquence directe de « un seul bouton orange par écran » —
un liseré orange large de toute la page en aurait fait le second. */
--et-form-strip: #0A6ED1;
--et-form-label: #6A6D70;
--et-form-text: #32363A;
--et-form-danger: #BB0000;
--et-form-ok: #107E3E;
/* LIENS. Jetons posés le 2026-08-20, en RÉCUPÉRATION d'une règle qui existait
déjà mais au mauvais endroit : easypaie.css — feuille du module de paie,
chargée pour toute la suite — portait le seul « a { } » global de
l'application. La règle est promue ici (section « LIENS » plus bas) ; les
valeurs du thème clair sont reprises À L'IDENTIQUE pour que le portage ne
change rien à ce qui est déjà en production. */
--et-lien: #0057B8;
--et-lien-survol: #0854A0;
/* --- Couleur d'ACTION (charte) : l'orange porte les appels à l'action —
bouton d'enregistrement, bouton d'ajout, liseré d'en-tête, anneau de
focus. C'est le changement structurant de la charte : l'action était
bleue, elle devient orange, et le marine passe au rôle de structure. --- */
/* 2026-08-17 : l'orange NE CHANGE PAS DE VALEUR, il change de PORTÉE. Il ne
porte plus « l'action » au sens large mais le seul BOUTON D'ENGAGEMENT —
Modifier, Enregistrer, Nouveau X, Se connecter, le CTA d'une modale de
création. Un écran n'en porte qu'un à la fois. Partout ailleurs (liserés,
focus, cases, pastilles, colonne triée, pagination), c'est le bleu SAP qui
reprend la main : voir les règles concernées plus bas et dans
easytime-shell.css. */
--et-action: #F26C16;
--et-action-d: #D95F0E;
--et-action-off:#F3C4A2;
/* L'anneau de focus suit la bordure de focus des champs, qui est bleue dans la
passation. Un anneau orange autour d'un champ en cours de saisie était le
plus fréquent des onze orange simultanés relevés. */
--et-focus: rgba(10,110,209,.18);
/* --- Rayons : ANGLES DROITS (2026-08-17). « Cartes et vues à plat : ni ombre
ni arrondi, la structure tient par les filets. » Les trois jetons sont
conservés à zéro plutôt que retirés — environ deux cents règles les nomment,
et les ramener ici fait la bascule en trois lignes au lieu de deux cents.
UN SEUL arrondi survit, et lui seul :
--et-r-pill pilule pastilles d'état et barres de progression.
Les champs de saisie ET LES BOUTONS sont à angles droits. Aucune
exception.
2026-09-02 : --et-r-btn tombe de 4 px à 0. Le rayon des boutons de barre
d'outils était le dernier arrondi de contrôle ; la passation EasyCompta
(docs/modeles/design_handoff_easycompta) le supprime, et la décision est
prise pour TOUTE l'application — un bouton n'a pas deux dessins selon le
domaine qui l'affiche. Le jeton est conservé à zéro plutôt que retiré :
il est nommé par les barres d'outils des vingt coquilles. --- */
--et-r: 0;
--et-r2: 0;
--et-r3: 0;
--et-r-btn: 0;
--et-r-pill: 999px;
/* --- FORMULAIRES EN FENÊTRE ET BANDEAUX D'ÉCRAN — passation EasyCompta,
2026-09-01 (docs/modeles/design_handoff_easycompta) -------------------
UNE seule valeur pour tous les modules. Avant, chaque dialogue décidait
pour lui : 124 px de libellé ici, 130 là, un bouton de fermeture à 30 px
dans l'un et 32 dans les autres — les en-têtes ne tombaient pas à la même
hauteur. Les fenêtres du domaine Trésorerie (.xp-*, css/easycompta-modal.css)
lisent ces jetons ; une fenêtre de plus n'a plus de valeur à inventer.
PUREMENT ADDITIF : aucune règle existante ne nomme ces jetons, les poser ici
ne déplace donc rien à l'écran. LA COLONNE DE LIBELLÉS EST CELLE DES
FENÊTRES (120 px) et non celle du gabarit dense (.mx-*, 158 px, section 4
de modele-erp.css) : deux familles, deux mesures, et la passation ne
touche pas à la seconde.
2026-09-02 : --et-r-btn à 0, demandé par la passation, EST désormais repris
— voir la section RAYONS plus haut. Le refus consigné ici la veille tenait
à sa portée (vingt coquilles pour un domaine) ; la bascule est faite pour
toute l'application, la portée n'est donc plus un motif. --- */
--et-h-champ: 32px; /* hauteur d'un champ ET de son libellé en regard */
--et-fs-lab: 13px; /* libellé de champ — la mesure des classes natives */
--et-fs-champ: 14px; /* texte saisi */
/* 2026-09-02, passation EasyCompta : l'EN-TÊTE DOMINE LA CELLULE. Il portait
12 px contre 14 à la cellule, c'est-à-dire qu'il s'effaçait devant ce qu'il
nomme ; le rapport s'inverse. La cellule perd un pixel, l'en-tête en gagne
deux, et la colonne se lit d'abord par son titre. */
--et-fs-cell: 13px; /* cellule de grille — charte EasyCompta */
--et-fs-tete: 14px; /* en-tête : il structure la lecture, il domine */
--et-form-gap-l: 8px; /* entre deux lignes de champs — échelle de 4 */
--et-form-gap-c: 16px; /* entre deux colonnes de champs */
--et-form-lab: 120px; /* colonne des libellés en fenêtre, alignés à droite */
--et-modal-tete: 58px; /* bande bleue de l'en-tête, hors filet de 3 px */
--et-modal-pad: 20px; /* rembourrage latéral : en-tête, corps et pied */
--et-modal-ferme: 32px; /* bouton de fermeture de l'en-tête */
/* LE VOILE D'UNE FENÊTRE — un seul, 2026-09-02.
Les pages en écrivaient CINQ pour la même chose : rgba(16,42,76,.42) sur 57
appels, rgba(0,0,0,.4) sur 49, rgba(20,27,38,.45) sur 43, plus deux variantes
à .45 et .5. Personne n'avait choisi ; chaque écran avait recopié son voisin.
La valeur retenue n'est pas un arbitrage de plus : c'est celle que
`.xp-voile` de css/easycompta-modal.css pose déjà, donc la réponse du gabarit
de fenêtre, et accessoirement le plus fréquent des cinq. Le marine dilué
plutôt qu'un noir neutre : un voile appartient à la marque comme la coquille. */
--et-voile: rgba(16, 42, 76, .42);
/* --- HUIT TEINTES CATÉGORIELLES — 2026-09-02 ---------------------------
Elles disent une IDENTITÉ, jamais une grandeur ni un état : un service,
un fournisseur, une facette de filtre. Elles n'ont donc rien à voir avec
--et-succes / --et-avertissement / --et-danger, qui restent RÉSERVÉS aux
états et ne servent jamais de « série n° 4 » — c'est la règle qui empêche
un service de passer en rouge parce qu'il est le cinquième de la liste.
ELLES S'ATTRIBUENT DANS L'ORDRE, JAMAIS EN BOUCLE. Un neuvième poste
n'existe pas : au-delà de huit, on replie dans « Autres », on facette, ou
on redouble la couleur d'un libellé.
VALIDÉES, PAS CHOISIES À L'ŒIL. Passées au validateur de palette sur les
cinq contrôles — bande de clarté, plancher de chroma, séparation en
déficience de vision des couleurs, plancher en vision normale, contraste
sur la surface. Le pire couple ADJACENT rend ΔE 8,7 en deutéranopie et
18,1 en vision normale, au-dessus des seuils de 8 et 15.
CE QU'ELLES NE PEUVENT PAS FAIRE, et il faut le savoir : en TOUTES paires
elles échouent (ΔE 8,2 en vision normale entre --et-cat-1 et --et-cat-8,
0,6 en deutéranopie entre --et-cat-4 et --et-cat-7). Ce n'est pas un
mauvais choix, c'est structurel : la deutéranopie écrase l'axe rouge-vert,
et aucune combinaison de huit teintes n'y échappe — quinze essais l'ont
vérifié, le meilleur plafonnant à 11,7. CONSÉQUENCE PRATIQUE : au-delà de
cinq séries simultanées, la couleur ne suffit plus. Légende obligatoire,
étiquettes directes, ou repli en « Autres ». */
--et-cat-1: #0057B8; /* bleu — le bleu de la charte ouvre la série */
--et-cat-2: #4D7C0F; /* olive — distinct de --et-succes, qui est un ÉTAT */
--et-cat-3: #7C3AED; /* violet */
--et-cat-4: #C2410C; /* rouille — distincte de --et-avertissement */
--et-cat-5: #0891B2; /* cyan */
--et-cat-6: #BE185D; /* magenta */
--et-cat-7: #A16207; /* or */
--et-cat-8: #4338CA; /* indigo */
/* Espacement d'un GROUPE de champs : 12 px avant l'intitulé du groupe, 8 après
son filet, filet à 5 px du texte. */
--et-form-sect-t: 12px;
--et-form-sect-b: 8px;
--et-form-sect-p: 5px;
/* Bandeau de titre d'écran : même géométrie que l'en-tête d'un formulaire en
fenêtre — 58 px au minimum, 20 px de rembourrage latéral. Un bandeau qui
porte deux lignes ou des indicateurs grandit à partir de là. */
--et-bandeau-min: var(--et-modal-tete);
--et-bandeau-pad-v: 12px;
--et-bandeau-pad-h: var(--et-modal-pad);
/* Turquoise d'accent sur les fonds bleus : soulignement d'onglet, état actif. */
--et-accent-doux: #7fd4c1;
/* --- HAUTEUR DE LIGNE DES TABLEAUX — figée, 2026-08-20 -----------------
UNE seule valeur pour tous les modules : le rembourrage VERTICAL d'une
cellule de corps. Elle vaut pour les deux familles de tableaux du
back-office — le « .table » Bootstrap habillé (catalogue, fiches, une
quarantaine d'écrans hérités) et le « .tbl » du composant Tableau — qui
affichaient jusqu'ici des lignes de 22,9 px d'un côté et 39,9 px de
l'autre. Le même écran changeait donc de densité selon le composant qui
le rendait, sans que rien dans la charte ne le demande.
La valeur retenue est celle que « .table » appliquait déjà, la plus
serrée des deux : c'est le tableau du catalogue (/app/pos/catalogue) qui
sert de référence, à la demande. Mesuré sous Chromium : 22,89 px pour une
ligne de texte, 31,38 px pour une ligne portant des boutons d'action.
ELLE REMPLACE LA DENSITÉ RÉGLABLE du composant Tableau (11 px aéré /
7 px compact). Le réglage ne portait que sur ce rembourrage : figer la
hauteur le vide de son objet, et son bouton a donc été retiré de la barre
d'outils plutôt que laissé sans effet.
Ne pas remplacer par des pixels : la valeur est en rem parce que les deux
familles l'expriment ainsi depuis l'origine, et qu'un zoom navigateur doit
tasser les lignes avec le texte. --- */
--et-cellule-y: .25rem;
/* --- DENSITÉ DE LISTE, RÉGLABLE — rétablie le 2026-08-23 ------------------
Passation « design Admin » : trois densités, appliquées au rembourrage
VERTICAL des cellules de corps. La bascule est dans la coquille.
*** POURQUOI CELA NE DÉFAIT PAS LA DÉCISION DU 2026-08-20 CI-DESSUS ***
Cette décision a retiré une densité réglable, mais son motif n'était pas
« pas de densité » : c'était que les DEUX FAMILLES de tableaux affichaient
des hauteurs différentes pour le même écran (22,9 px contre 39,9 px), et
qu'un réglage porté par UN SEUL composant masquait la divergence.
Le réglage rétabli ici porte sur --et-cellule-y, c'est-à-dire sur le jeton
que les deux familles lisent déjà. Elles bougent donc ENSEMBLE : la
divergence corrigée alors ne peut pas revenir par cette porte.
*** LA COMPACTE NE CHANGE RIEN À L'EXISTANT, ET C'EST VOULU ***
La passation demande 4 px en compacte ; le dépôt est à .2rem, soit 3,2 px.
L'écart de 0,8 px n'est pas repris : .2rem est une valeur MESURÉE et
retenue à la demande, avec /app/pos/catalogue pour référence. Changer une
référence mesurée pour 0,8 px serait défaire un arbitrage sans rien
gagner. Les quarante écrans existants gardent donc exactement leur
hauteur de ligne ; le réglage n'AJOUTE que deux paliers plus aérés.
*** L'EN-TÊTE NE SUIT PAS ***
--et-cellule-tete-y reste fixe : « un en-tête n'est pas une rangée de
données » (voir son propre commentaire). La densité est une affaire de
volume de données lues, pas de chrome.
*** ET LA RÈGLE TACTILE PAR LARGEUR CONTINUE DE GAGNER ***
lot02-cibles-tactiles.css impose 44 px aux CIBLES sous 1024 px. Elle porte
sur des hauteurs de cibles, pas sur le rembourrage des cellules : les deux
règles sont orthogonales, et aucune densité ne peut faire rétrécir une
cible. Choisir « compacte » sur une tablette ne rend donc pas les boutons
plus petits que la règle tactile ne l'autorise.
Comme le jeton, les trois paliers sont en rem : un zoom navigateur doit
tasser les lignes avec le texte. --- */
/* --- ET LA MÊME CHOSE POUR L'EN-TÊTE, que le gel de la hauteur de ligne avait
manqué. Les deux familles codaient leur en-tête en dur — 11 px pour « .table »,
7/8 px pour « .tbl » — si bien qu'après avoir aligné les corps de rangée à
23,9 px, les en-têtes restaient à 37,2 et 28 px. Un en-tête de 13 px plus haut
que la ligne qu'il coiffe, c'est la moitié du gain repris.
CE N'EST PAS --et-cellule-y : un en-tête n'est pas une rangée de données, il
porte des majuscules chassées et un filet, et le tasser à 3,2 px le collerait
à sa première ligne. Un jeton à lui, donc, mais UN SEUL pour les deux familles
— c'est tout l'objet du gel.
La valeur retenue est celle de « .tbl », éprouvée depuis la passation.
POURQUOI IL NE SUFFISAIT PAS DE POSER LE JETON : la règle qui l'applique côté
« .table » est « .table > :not(caption) > * > * » (spécificité 0,1,1) et vise
bien les th ; mais « .table > thead > tr > th » (0,1,3) la bat, et son
raccourci « padding » écrasait les deux axes. La feuille du thème gagnait
ainsi sur une feuille chargée APRÈS elle. D'où la règle ci-dessous, qui
n'emploie plus le raccourci. --- */
--et-cellule-tete-y: .45rem;
/* --- Police de la charte (chargée globalement par App.razor).
La 72, police de SAP, ouvrait cette pile en attendant une licence qui n'est
jamais venue : aucun poste ne la porte, aucune feuille ne la charge, elle
n'a donc jamais été servie une seule fois. La passation EasyCompta retient
OPEN SANS comme fonte de tête — ce n'est pas un repli, c'est le choix — et
la 72 sort de la pile plutôt que d'y rester comme une intention. IBM Plex
Sans reste derrière : les écrans en place ne changent pas de métrique si
la fonte web tarde. --- */
--et-font: 'Open Sans', 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
--et-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
/* --- Accent ambre — conservé pour les rares appels explicites qui le
nomment encore ; les filets et pastilles de la charte utilisent
désormais --et-action / le marine. --- */
--et-amber: #F49A47;
--et-amber-ink: #c9772e;
/* --- Neutres & statuts partagés (repris tels quels des valeurs déjà en
usage dans easytime-shell.css / compta-ux.css pour ne rien changer
visuellement — juste leur donner un nom unique). --- */
/* 2026-08-17 : l'échelle de gris de la passation, à quatre crans et non deux.
Le manque d'un cran INERTE était ce qui faisait écrire « 0 » là où il fallait
un tiret : sans teinte pour dire « non renseigné », un écran choisissait entre
un zéro faux et un blanc qu'on prend pour un défaut d'affichage. */
--et-ink: #0F172A; /* texte principal */
--et-muted: #6A6D70; /* libellés, texte secondaire */
/* 2026-08-26 : #89919A rendait 2,95:1 sur --et-surface-2 et 3,19:1 sur blanc —
sous le seuil AA de 4,5:1 pour du texte courant, et ce jeton habille TOUTES
les notes du produit (l'aide sous un champ, .mx-modale-mention, les
méthodes de calcul). Il passe à 4,57:1 sur --et-surface-2 et 4,94:1 sur blanc.
L'ÉCART AVEC --et-muted SE RESSERRE, de 1,63 à 1,07 point de contraste, et
c'est le prix de la conformité : remonter --et-muted pour rouvrir l'écart
assombrirait le libellé de CHAQUE rangée de formulaire du produit — un
changement d'aspect général qu'aucune dette ne réclame. L'ordre des quatre
crans, lui, est préservé : ink > muted > faint > inerte. */
--et-faint: #6A7179; /* aides, notes, méthodes de calcul */
--et-inerte: #B3B6B9; /* valeurs inertes, tirets « non renseigné » */
/* LES DEUX ENCRES DE L'ARDOISE. La charte n'en avait nommé qu'une, la seconde,
et le premier rang s'écrivait « color: #fff » à la main — DIX-SEPT FOIS, dans
onze feuilles, plus l'alias sombre de --tbl-tete-encre. C'est le pendant exact
de --et-sur-marine / -doux, où le blanc plein EST nommé.
--et-sur-ardoise-plein N'A PAS DE VARIANTE SOMBRE, et il vaut exactement ce que
ces dix-sept sites écrivaient : ce lot NE CHANGE AUCUN PIXEL. Il rend seulement
nommable un désaccord qui, en littéraux, restait invisible — voir ci-dessous.
*** CE QUE LE NOM REND VISIBLE : LES TROIS FAMILLES DE TABLEAUX NE S'ACCORDENT
PAS SUR L'ENCRE DE LEUR EN-TÊTE. *** --et-table-head est « LA SOURCE UNIQUE de
la teinte d'en-tête pour les TROIS familles » — les .table Bootstrap, le
composant Tableau et les grilles de planning. Le FOND a bien été unifié ;
l'encre, non :
Tableau (--tbl-tete-encre) : #C3D0E4 en clair, #ffffff en sombre
.table Bootstrap, .plg-th, .af-matrice, .rp-table th.tot : #fff dans les deux
Et le raisonnement du premier est écrit, daté et mesuré : « l'en-tête cesse de
crier plus fort que les données qu'il coiffe, ce qui était le reproche fait à
l'aplat sombre à chacune des trois bascules précédentes ». S'il vaut pour une
famille, il vaut pour les trois — mais aligner les deux autres repeint TOUS les
tableaux Bootstrap de l'application, ce qui est une décision de charte et non
une substitution. Elle se prend désormais sur deux lignes au lieu de quinze. */
--et-sur-ardoise: #C3D0E4; /* SECOND rang : libellés posés sur fond ardoise */
--et-sur-ardoise-plein: #FFFFFF; /* PREMIER rang : titre, onglet retenu, en-tête */
/* --et-sur-couleur A VÉCU UNE JOURNÉE, ET C'EST NORMAL QU'IL DISPARAISSE ICI.
Deux branches ont nommé le même rôle le même jour, sur la même valeur
rgba(255,255,255,.78) : celle-ci, et celle qui a posé --et-sur-aplat /
--et-sur-aplat-doux plus bas. Le doublon est tranché en faveur du second,
et pas par ancienneté : il nomme DEUX crans au lieu d'un (le blanc plein
autant que le cran du dessous), et il descend dans .xp-tete-titre /
.xp-tete-sous, donc dans cinquante-sept en-têtes de fenêtre au lieu d'un
style en ligne par page. Un rôle, un nom — la règle vaut aussi quand c'est
le nom qu'on avait posé soi-même qui cède. */
/* LA PLAQUE SOUS LE LOGO DU CLIENT (core.CompanyLogo, à l'écran depuis 2026-08-28).
Un logo est dessiné pour LE fond que son auteur a choisi, presque toujours blanc,
et il arrive le plus souvent en PNG transparent à encre foncée. Posé nu sur la
barre marine de la coquille ou sur le rail sombre de la caisse, il disparaît.
La plaque lui rend ce fond.
*** ELLE N'EST PAS REDÉFINIE EN THÈME SOMBRE, ET C'EST DÉLIBÉRÉ. ***
Tous les autres jetons de surface basculent sous .appgrid[data-theme="dark"] ;
celui-ci ne le doit pas. Le thème appartient à l'utilisateur, la charte du logo
appartient au client : assombrir la plaque la nuit ferait disparaître la marque
qu'on venait précisément d'afficher. */
--et-plaque-logo: #FFFFFF;
--et-hairline:#E5E5E5; /* filets */
--et-filet-fort: #D9D9D9;/* filets forts, bordures de champ */
--et-rang: #EDEDED; /* séparateurs de rangée, survol de rangée */
--et-tint: #EBF3FB; /* teinte d'information, ligne sélectionnée */
/* Le REPOS d'une séquence de planning. Ce n'est pas une couleur de poste de
plus : c'est un creux. Un poste porte sa teinte propre et du texte blanc,
un repos porte ce fond clair et du texte gris — la frise se lit alors en
relief, les jours travaillés en avant, les repos en retrait. */
--et-repos-bg: #F0F1F2;
--et-repos-bord: #D7DBE2;
--et-piste: #EDF1F7; /* piste de barre de progression */
--et-danger: #DC2626;
--et-danger-bord: #FFB3B3; /* bordure des panneaux d'actions irréversibles */
/* L'ENCRE DU DANGER SUR SON FOND PÂLE, et non la couleur d'état elle-même.
--et-danger sur --et-danger-badge-bg rend 4,22:1 — SOUS le seuil AA de 4,5
exigé par les 12 px d'une pastille ; celle-ci rend 6,95:1. Même distinction,
même raison que --et-avertissement-ink plus bas. En sombre elle rejoint
--et-danger : sur un fond obscurci c'est la teinte vive qui redevient la plus
lisible (7,03:1). */
--et-danger-ink: #9F1B12;
/* Pendant AVERTISSEMENT du précédent : la bordure pâle d'un objet « à revoir ».
Distincte de --et-avertissement (#E9730C), qui est l'encre : cerner un nœud
d'organigramme de l'orange plein le mettrait au même rang que le bouton
d'engagement, alors qu'il signale un défaut à corriger, pas une action à faire. */
--et-avertissement-bord: #F3C4A2;
/* L'AMBRE QUAND ELLE EST UNE MARQUE, et lui seul : filet de gauche d'une
ligne, bord haut d'une carte, tout trait dont la COULEUR porte le sens.
Pourquoi ce troisième rang existe pour l'ambre et pour elle seule : le
seuil des objets graphiques est 3:1, et sur blanc les trois couleurs
d'état ne sont pas logées à la même enseigne —
--et-danger #DC2626 : 4,83:1 passe
--et-succes #16A34A : 3,30:1 passe
--et-avertissement : 2,15:1 ÉCHOUE, et de loin
Un ambre pur est intrinsèquement clair ; c'est une propriété de la teinte,
pas un choix. Vingt filets d'état la portaient, et plusieurs écrans disent
eux-mêmes que le filet EST le signal — ecran-tableau-bord-compta.css :
« le filet de gauche PORTE la gravité, bloquante / importante / mineure ».
Là où il porte seul, 2,15:1 n'est pas une mollesse, c'est un défaut.
LA VALEUR N'EST PAS CHOISIE, ELLE EST CONTRAINTE : teinte (37,7°) et
saturation (0,92) de --et-avertissement conservées à l'identique, clarté
abaissée jusqu'à ce que les QUATRE fonds qu'elle rencontre passent 3,2:1 —
blanc 3,47, --et-avertissement-bg 3,27, --et-surface-3 3,32,
--et-surface-2 3,21. C'est le même ambre, plus foncé, et rien d'autre.
Elle n'est PAS --et-avertissement-ink (#8A4A0C, 6,85:1) : cette encre-là
est faite pour du TEXTE et lit brun ; un filet d'accent brun change le
vocabulaire de l'écran. Et elle n'est pas --et-action, réservé au bouton
d'engagement unique par écran.
En sombre elle rejoint --et-avertissement (#f0a860, 8,68:1 sur la surface) :
sur fond obscurci, la teinte vive redevient la plus visible. */
--et-avertissement-mark: #BF7B08;
/* ENCRE ambre du texte posé SUR le fond ambre pâle (--et-avertissement-bg).
--et-avertissement (#E9730C) n'y vaut que 2,9:1, sous le seuil AA : un titre de
bandeau « à vérifier » y devient plus difficile à lire que le corps de texte qu'il
coiffe. Le cran plus soutenu vaut 6,2:1 sur le même fond, sans changer de famille.
Posé le 2026-08-17 avec l'écran de génération des heures. */
--et-avertissement-ink: #8A4A0C;
/* Pendant SUCCÈS de --et-avertissement-bord et --et-danger-bord : la bordure d'un
panneau de bilan favorable, assez pâle pour ne pas concurrencer l'encre verte. */
--et-succes-bord: #C6E7D4;
/* Le troisième de la famille des encres d'état. --et-succes sur --et-succes-bg
rend 3,16:1, le plus mauvais des trois ; celle-ci rend 5,63:1. Elle existait
déjà, sous le nom --fx-ok-encre dans css/fiche.css, posée là faute d'un jeton
de charte — qui la reprend ici, et que fiche.css pointe désormais. */
--et-succes-ink: #12734A;
/* QUATRIÈME ET DERNIER PENDANT, posé le 2026-08-26 avec l'habillage de .alert.
Les trois autres registres avaient leur bordure ; l'information, non — et un
encart d'information cerné de gris au milieu de quatre encarts cernés de leur
propre teinte se lit comme un défaut d'affichage, pas comme une nuance. Valeur
prise à mi-chemin de --et-info-bg (#EBF3FB) et de --et-info (#0A6ED1), comme
--et-succes-bord l'est entre les siens. */
--et-info-bord: #B8D4F0;
--et-ok: #107E3E;
/* --- Jetons de badge de statut — posés le 2026-08-10. Le composant partagé
Components/Shared/Badge.razor consomme les classes .badge-* définies
plus bas dans ce fichier ; la migration page par page reste à faire,
pilotée séparément.
Constat de l'audit : ~128 pages réimplémentent chacune leur propre
fonction C# (switch sur un statut) ou style inline qui associe un mot
de statut aux 4 mêmes couleurs sémantiques ci-dessous — pas un problème
de style incohérent comme les jetons de marque plus haut, mais une
LOGIQUE dupliquée (chaque fonction "OrgStyle"/"Statut"/"SensStyle"…
réinvente le même switch). Ces valeurs sont les paires bg/texte les
plus fréquentes trouvées telles quelles dans le code existant — ce
sont donc les couleurs déjà en usage de facto, pas une nouvelle
palette. Utilisables directement dans un style inline généré en C#
(ex. "background:var(--et-succes-bg);color:var(--et-succes-ink);"), les
var() CSS se résolvent pareil qu'elles viennent d'une feuille de style
ou d'un attribut style="" construit dynamiquement. --- */
/* 2026-08-17 : remplacées par les quatre paires SÉMANTIQUES de Fiori, qui sont
celles de la passation. Les noms ne bougent pas — les ~128 pages qui les
consomment suivent sans être touchées ; seules les valeurs changent, et les
fonds deviennent nettement plus pâles (le badge cesse d'être un aplat coloré
pour redevenir une teinte sous un texte lisible).
Contrastes du texte sur son propre fond : positif 5,32:1, critique 3,54:1
— celui-ci ne tient qu'à partir de 14 px gras, d'où la graisse 600 imposée
aux pastilles (.badge, .mx-pastille) et le point de 6 px qui redouble le
signal pour qui ne distingue pas la teinte. */
--et-succes-bg: #F1FDF6;
--et-succes: #16A34A;
--et-info-bg: #EBF3FB;
--et-info: #0057B8;
--et-avertissement-bg: #FEF7F1;
--et-avertissement: #F59E0B;
--et-danger-badge-bg: #FFEBEB;
--et-neutre-bg: #F5F6F7;
--et-neutre: #6A6D70;
/* --- Jetons de surface — posés le 2026-08-12 (Phase B, chantier "étendre le
thème sombre au contenu"). Beaucoup de pages répètent "background:#fff"/
"#fbfcfd" en dur pour une carte ou une ligne d'en-tête plutôt que d'utiliser
une classe partagée (.md-card, .liste-entete…) : ces deux jetons leur donnent
un point d'accroche pour le thème sombre sans devoir en inventer un par
page. --et-surface = fond de carte/panneau (équivalent à ce que .md-card
code en dur) ; --et-surface-2 = fond subtil (bandeau d'en-tête de tableau,
zone de dépôt, état vide) — reprises telles quelles des valeurs déjà les
plus fréquentes en usage. --- */
/* 2026-08-17 : les deux fonds de la passation. --et-surface-2 est le FOND DE
PAGE et le bandeau de carte (#F5F6F7) ; --et-surface-3 la zone alternée et
le pied de carte (#FAFAFA). Ils perdent leur teinte bleutée : sur des
surfaces plates séparées par des filets, un fond légèrement bleu se lit
comme une sélection. */
--et-surface: #ffffff;
--et-surface-2: #F5F6F7;
--et-surface-3: #FAFAFA;
/* Pastilles d'icône et puces de code : bleu SAP sur teinte d'information.
Nommés pour que le thème sombre puisse les inverser (voir plus bas).
Les noms gardent « navy » de l'ancienne charte : les renommer aurait touché
une trentaine de fichiers pour un gain nul — ce sont des jetons de RÔLE
(« pastille d'icône »), leur valeur suit la charte. */
--et-navy-soft: #EBF3FB;
--et-navy-ink: #0A6ED1;
/* --- SUR LA MARINE : LES FONDS ET LES ENCRES DE LA COQUILLE --------------
(lot « couleurs en dur dans les pages », 2026-09-02, deuxième famille)
CE QUE LA CHARTE N'AVAIT PAS. Elle nomme les couleurs posées sur du BLANC.
La barre du haut et le rail sont marine (--et-blue), et rien de ce qui s'y
pose n'avait de jeton — d'où « rgba(255,255,255,.16) » recopié à la main
dans cinq fichiers (easytime-shell.css, rail-lateral.css, ShellModule,
SelecteurModule, AppTopbarActions), à TREIZE opacités différentes
(.07 .10 .12 .14 .16 .18 .20 .22 .25 .26 .28 .30 .34) POUR QUATRE RÔLES.
C'est la famille que la première passe des couleurs en dur a laissée : elle
n'avait aucun jeton où aller, et une couleur ne se remplace pas par un jeton
qui n'existe pas.
Treize opacités ne portaient pas treize intentions : quatre intentions et
neuf approximations. L'échelon est le RÔLE, jamais la valeur.
ILS NE BASCULENT PAS AU THÈME SOMBRE, ET C'EST LA PROPRIÉTÉ QUI LES DÉFINIT.
La barre RESTE marine en sombre (rail-lateral.css, § « Barre du haut »). Un
fond qui suivrait le thème s'éclaircirait sur un fond qui n'a pas bougé. Ils
sont donc déclarés ici une fois et JAMAIS redéfinis dans le bloc
.appgrid[data-theme="dark"] — l'absence y est la règle, pas un oubli.
ET « FOND », PAS « VOILE » : --et-voile est déjà le voile d'une fenêtre
modale (plus haut, § modales). Deux familles homonymes dans le même fichier
finiraient par se recouvrir sur la première distraction — c'est la règle de
docs/conventions-nommage.md, appliquée à un jeton plutôt qu'à un type. */
--et-fond-marine: rgba(255,255,255,.16); /* fond d'un contrôle posé sur la marine */
--et-fond-marine-doux: rgba(255,255,255,.12); /* aplat discret : survol de lien, pilule de contexte */
--et-fond-marine-survol: rgba(255,255,255,.26); /* le contrôle, survolé */
--et-fond-marine-actif: rgba(255,255,255,.30); /* le contrôle, retenu ou ouvert */
--et-filet-marine: rgba(255,255,255,.28); /* filet posé sur la marine */
/* Les trois encres. « Doux » porte le texte secondaire, « faible » la note et
le code — ce qu'on lit si on le cherche, pas en balayant la barre. */
--et-sur-marine: #FFFFFF;
--et-sur-marine-doux: rgba(255,255,255,.85);
--et-sur-marine-faible: rgba(255,255,255,.70);
/* LES ÉTATS SUR LA MARINE. La famille ci-dessus est NEUTRE — du blanc, dilué.
Une pastille d'état posée sur le bandeau marine a besoin d'autre chose : un
aplat TEINTÉ et une encre claire, c'est-à-dire l'inverse exact de ce que la
charte fait sur fond pâle (--et-succes-bg + --et-succes). Le modèle de fiche
le disait déjà en commentaire, sans le nommer : « même sens, mêmes familles
de couleur, VALEURS INVERSÉES ».
*** CES VALEURS SONT CELLES QUI ÉTAIENT ÉCRITES, ET C'EST LA MESURE QUI L'A
DÉCIDÉ. *** J'allais les remplacer par les valeurs sombres des jetons d'état
— le réflexe de la série. Les quatre auraient PERDU du contraste, et l'une
serait passée sous le seuil AA :
succès encre écrite #8FE7B4 : 6,47:1 | --fx-ok sombre #6ee7a0 : 6,17:1
avertissement encre écrite #F5D98A : 6,76:1 | --fx-attention #f0c078 : 5,57:1
danger encre écrite #FFAFA3 : 6,38:1 | --fx-err #f4a49c : 5,70:1
info encre écrite #CFE0F5 : 6,20:1 | --et-info sombre #7db8f0 : 3,96:1
C'est le pendant exact du défaut trouvé sur .fe-entete .fx-etat.est-attente,
où une conversion mécanique avait posé la couleur d'état en encre et rendu
2,02:1. Ici la mesure dit l'inverse du réflexe : garder les valeurs, leur
donner un nom. CE LOT NE CHANGE AUCUN PIXEL.
Pas de variante sombre, comme toute la famille marine : le fond est un aplat
de marque, il ne bascule pas. */
--et-fond-marine-succes: rgba(95, 208, 139, .18);
--et-fond-marine-avertissement: rgba(242, 196, 71, .18);
--et-fond-marine-danger: rgba(224, 90, 74, .20);
--et-sur-marine-succes: #8FE7B4;
--et-sur-marine-avertissement: #F5D98A;
--et-sur-marine-danger: #FFAFA3;
--et-sur-marine-info: #CFE0F5;
/* LA TEINTE ELLE-MÊME, NON DILUÉE : une MARQUE posée sur la marine, ni aplat ni
encre — la barre d'une jauge sur la carte marine. C'est la base dont
--et-fond-marine-succes est la dilution à 18 % ; les deux sont écrites plutôt
que calculées, pour que la valeur se lise sans exécuter un color-mix().
Avertissement et danger n'ont PAS d'équivalent ici, et c'est un constat :
aucune marque de ces deux états ne se pose aujourd'hui sur la marine. */
--et-marine-succes: #5FD08B;
/* CE QUI SE POSE SUR L'ARDOISE — la même famille, sur l'autre aplat de
structure. Elle existait déjà À MOITIÉ : --et-sur-ardoise nomme l'encre
secondaire depuis le 2026-08-17, et rien ne nommait les fonds. Quatre
sites écrivaient donc leur alpha à la main, et pas le même : .16 pour le
fond d'un bouton d'en-tête de tableau, .18 et .18 pour les filets de
colonnes figées d'un planning, .14 pour un filet de pile d'indicateurs.
*** L'ARDOISE N'EST PAS LA MARINE, ET LE MÊME ALPHA N'Y REND PAS PAREIL. ***
C'est pour cela que ces jetons existent au lieu de réemployer les
--et-fond-marine. L'ardoise #354A5F est plus claire que la marine #1B2A5E
(L = 0,065 contre 0,027), donc un voile blanc y soulève MOINS :
alpha .16 → séparation 1,637:1 sur la marine, 1,569:1 sur l'ardoise
alpha .18 → séparation 1,747:1 sur la marine, 1,657:1 sur l'ardoise
.18 sur l'ardoise rend 1,657:1, soit la séparation que .16 donne sur la
marine. C'est la valeur retenue : le MÊME écart perçu, pas le même nombre.
DEUX JETONS POUR UNE SEULE VALEUR, ET C'EST VOULU. Un aplat de 28 px à .18
et un filet d'1 px à .18 ne se lisent pas du tout pareil : le jour où l'un
des deux devra bouger, il bougera seul. Les noms rendent cette indépendance
visible au lieu de la découvrir en cassant l'autre. La marine sépare déjà
les deux rôles (.16 contre .28) ; ici ils coïncident, aujourd'hui.
Le filet est VOLONTAIREMENT plus doux que --et-filet-marine (.28, soit .32
d'équivalent sur l'ardoise) : ces trois-là divisent l'INTÉRIEUR d'une bande
— colonnes figées, lignes d'une pile — quand le filet de la marine sépare
deux RÉGIONS de la barre. Une division interne qui pèse autant qu'une
séparation de région découpe la bande au lieu de l'organiser.
Comme la famille marine : JAMAIS redéfinis dans le bloc sombre.
--et-table-head porte une valeur unique pour les deux thèmes, donc le fond
qu'ils habillent ne bascule pas non plus. */
--et-fond-ardoise: rgba(255,255,255,.18); /* fond d'un contrôle posé sur l'ardoise */
--et-filet-ardoise: rgba(255,255,255,.18); /* division INTERNE d'une bande ardoise */
/* L'ENCRE POSÉE SUR UN APLAT DE COULEUR — bouton plein, pastille d'état,
barre de progression, badge. Le lot précédent avait nommé le cas de la
MARINE ; celui-ci nomme le cas général, qui ne s'y réduit pas : un bouton
plein porte --et-form-blue, pas --et-blue.
ELLE N'EST PAS --et-surface, ET C'EST LE PIÈGE À ÉVITER. --et-surface
bascule au thème sombre (#ffffff → #111A2B) : posée en encre sur un bleu
qui, lui, ne bascule pas (--et-form-blue est délibérément hors du bloc
sombre), elle rendrait un libellé bleu nuit sur bleu. Celle-ci ne bascule
pas, pour la même raison que --et-sur-marine : l'aplat non plus.
ELLE A UN « DOUX », ET LE LOT QUI L'A CRÉÉE DISAIT LE CONTRAIRE. « Un aplat
de contenu porte un libellé, pas trois niveaux de note » : c'était écrit ici
le jour même, et c'est faux. L'en-tête de fenêtre du gabarit .xp-tete porte
un titre ET un sous-titre sur son aplat bleu, dans CINQUANTE-SEPT modales de
cinq domaines. La règle a été écrite d'après un écran ; le dépôt en avait
cinquante-sept qui la contredisaient.
Pas de « faible » en revanche : deux niveaux, pas trois. Cette fois c'est un
constat, pas une prédiction — aucun appelant n'en écrit un troisième. */
--et-sur-aplat: #FFFFFF;
--et-sur-aplat-doux: rgba(255,255,255,.78);
/* .78 ET NON .85 comme --et-sur-marine-doux : ce sont deux familles sur deux
fonds, et .78 est ce que les cinquante-sept appelants rendent déjà. Les
aligner aurait changé l'apparence de cinquante-sept fenêtres pour ranger un
tableau — le contraire de ce que ce chantier fait. */
/* =====================================================================
LES OMBRES (2026-09-05) — SEPT RÔLES, ET PERSONNE N'EN RÉUTILISAIT UN
Relevé avant ce lot : vingt-quatre ombres colorées dans les feuilles du
back-office, pour **vingt valeurs distinctes**. Aucune n'était reprise
d'un écran à l'autre, et trois d'entre elles portaient le bleu d'AVANT la
révision du 2026-09-02. Même motif que les treize opacités de la marine :
quatre rôles, treize valeurs.
CHACUN EST UN JETON ENTIER — géométrie ET couleur. Une ombre ne se règle
pas en deux jetons : son décalage, son flou, son étalement et son encre
forment une seule décision. C'est ce que --et-ombre-flottant disait déjà.
LA NUIT EST UNE DENSITÉ, PAS UNE FORME. Le bloc sombre reprend les sept
géométries à l'identique et ne change que l'encre — une ombre à 16 % de
#0F172A posée sur #111A2B ne se voit pas.
LES SEPT, du plus posé au plus détaché :
--et-ombre-pose une pastille d'interrupteur, une plaque d'icône
--et-ombre-carte une carte au repos sur la page
--et-ombre-survol le soulèvement d'une tuile au survol
--et-ombre-menu une liste posée SUR son déclencheur
--et-ombre-flottant un panneau flottant DEVANT la page, un toast
--et-ombre-fenetre une modale
--et-ombre-volet un volet qui entre par un bord
UN SEUL A UNE VALEUR QUE PERSONNE N'AVAIT ÉCRITE : --et-ombre-volet. Les
trois volets du dépôt portaient un décalage horizontal négatif, qui ne
vaut que pour un panneau entrant par la DROITE ; le tiroir du rail sur
téléphone entre par la gauche, et son ombre serait tombée sous lui. Le
jeton perd donc le biais horizontal pour servir les deux bords.
--et-ombre-survol PERD SA TEINTE, et c'est délibéré : ses deux sites
soulevaient en bleu — le bleu d'avant la révision. Un soulèvement est de
l'ÉLÉVATION, pas une couleur. ===================================== */
--et-ombre-pose: 0 1px 2px rgba(20,27,38,.30);
--et-ombre-carte: 0 14px 38px -30px rgba(20,27,38,.50);
--et-ombre-survol: 0 14px 30px -16px rgba(20,27,38,.40);
--et-ombre-menu: 0 6px 16px -8px rgba(20,27,38,.22);
--et-ombre-flottant: 0 10px 26px rgba(15,23,42,.16);
--et-ombre-fenetre: 0 30px 70px -34px rgba(20,27,38,.55);
--et-ombre-volet: 0 0 44px -12px rgba(20,27,38,.50);
/* L'AMBRE EN TRANSPARENCE, derrière un glyphe : la pastille de contexte du
bandeau (AppTopbarActions) et la plaque d'icône des bandeaux d'import
(ImportModal, ProgressModal). Deux jetons plutôt qu'un color-mix() — la
valeur se lit dans le fichier, et une teinte de charte ne se calcule pas.
UN SEUL VOILE POUR LES DEUX FONDS. Les bandeaux d'import écrivaient .15 sur
du blanc, le bandeau .22 sur la marine : deux valeurs pour la même intention,
la même approximation que les treize opacités du lot précédent. */
--et-amber-voile: rgba(244,154,71,.22);
--et-amber-bord: rgba(244,154,71,.55);
--et-amber-clair: #F9C48B; /* le glyphe de la pastille, sur le fond ambré */
/* L'ACCENT DE MODULE — la couleur que ShellModule pose en --accent, et que le
filet de la barre et le liseré actif du rail lisent. EasyProjects est le seul
module à s'écarter du défaut ; sa teinte vivait en dur dans ProjetLayout. Un
module qui voudra la sienne l'inscrit ici. */
--et-accent-projets: #0F6E56;
}
.appgrid[data-densite="confortable"] { --et-cellule-y: .625rem; } /* 10 px */
.appgrid[data-densite="tactile"] { --et-cellule-y: 1rem; } /* 16 px */
/* ===========================================================================
THÈME SOMBRE — variante des jetons de CONTENU ci-dessus (--et-ink/--et-muted/
--et-hairline, --et-form-* et statuts). Ne touche pas aux couleurs de marque
(--et-blue/--et-orange/--et-amber) : elles habillent des bandeaux qui portent
déjà du texte blanc, inchangés par thème.
2026-08-26 — --et-form-blue-d SORT DE CETTE EXEMPTION, parce que la phrase
ci-dessus a cessé d'être vraie pour lui. Elle l'était quand elle a été écrite ;
le jeton a dérivé depuis. Relevé ce jour : 82 de ses 87 appels le posent en
COULEUR DE TEXTE sur une teinte claire, et cinq seulement en aplat. Ce n'est
plus une couleur de bandeau, c'est de l'encre — et de l'encre foncée sur un
fond qui, lui, s'assombrit. Les cinq aplats passent à --et-form-blue-plein,
qui garde la valeur foncée dans les deux thèmes.
Portée : .appgrid[data-theme="dark"] uniquement — même sélecteur que celui
posé par easytime-shell.css pour la coquille (.et-side, etc.). ShellModule
pose data-theme="dark" sur .appgrid pour les modules qui activent
ThemeToggleActive.
2026-08-27 — « AUJOURD'HUI : EASYTIME/APPLAYOUT » N'EST PLUS VRAI, et cette
phrase a coûté cher : elle laissait croire que les trous de ce bloc ne
touchaient qu'un module. Relevé ce jour : VINGT ET UN des vingt-trois coquilles
posent ThemeToggleActive="true" — seuls EmptyLayout et LanceurLayout ne l'ont
pas. Un jeton sans valeur sombre est donc un défaut LIVRÉ, sur presque tout le
produit, et non une dette qui dormirait derrière un bouton désactivé.
Ce bloc ne redéfinit PAS les jetons Bootstrap natifs (--bs-body-bg,
--bs-card-bg, --bs-table-bg, --bs-border-color, ...) : ShellModule pose aussi
data-bs-theme="@_theme" sur .appgrid, et Bootstrap 5.3 fait déjà basculer
.card/.table/.form-control/.form-select/.modal-content tout seul via ce
mécanisme natif (color modes scopables à n'importe quel élément, pas
seulement ) — inutile de le dupliquer à la main.
Chantier "étendre le thème sombre au contenu" (audit du 2026-08-12), Phase A.
Les pages à couleur codée en dur dans un style="" inline (recensées à l'audit,
hors jetons) restent hors de portée d'un correctif CSS global — Phase B,
page par page, séparée de celle-ci.
=========================================================================== */
.appgrid[data-theme="dark"] {
--et-form-border: #26324a;
--et-form-label: #c3cede;
--et-form-text: #e5edf5;
--et-form-danger: #f87171;
--et-form-ok: #4ade80;
/* Le bleu SAP #0A6ED1 sur un fond sombre tombe à ~2,6:1 : illisible. Le thème
sombre prend donc le bleu clair déjà défini pour lui (--et-form-blue-l).
Ce n'était pas le cas avant : la règle globale des liens venait d'une
feuille sans variante sombre, et les modules qui ont la bascule de thème
— dont EasyPayroll — affichaient leurs liens en bleu foncé sur ardoise. */
--et-lien: #6FA8E5;
--et-lien-survol: #9AC4EE;
--et-ink: #e5edf5;
--et-muted: #8a97ac;
/* --et-faint est ÉPINGLÉ ici à sa valeur d'avant, et ce n'est pas un oubli
recopié : sans cette ligne il hériterait du #6B727A que le thème clair
vient d'adopter, et une note tomberait de 5,13:1 à 3,3:1 sur l'ardoise.
Un jeton qu'on assombrit pour le clair doit être retenu pour le sombre.
Il reste sous --et-muted (5,45 contre 5,89 sur --et-surface), l'ordre des
crans est donc le même dans les deux thèmes. */
--et-faint: #89919A;
--et-hairline: #26324a;
/* --et-rang N'AVAIT AUCUNE VALEUR SOMBRE, et c'est le plus grave des quatre
trous relevés le 2026-08-27 — parce que c'est un FOND, pas une encre.
Il restait à #EDEDED, un quasi-blanc, sous une encre devenue claire.
MESURÉ, PAS SUPPOSÉ : survol d'un onglet du rail en sombre, encre #e5edf5
sur fond #EDEDED — 1,01:1. Le libellé de l'onglet DISPARAÎT au moment où on
le pointe. Une vingtaine de règles le posent en survol de rangée (tables de
la paie, des natures, des notifications, de la génération, filtres latéraux,
onglets de fiche) et une vingtaine d'autres en filet de séparation.
Il prend la troisième surface, #1B2739 : un cran au-dessus de --et-surface,
ce qu'un survol doit être, et assez discret pour rester un filet là où il
sert de séparateur — les deux emplois du jeton en clair. --et-ink dessus :
12,73:1. Aucune valeur nouvelle. */
--et-rang: #1B2739;
/* LES DEUX ENCRES DES JETONS DOUBLES — voir leur déclaration en clair pour le
décompte qui interdit de retourner --et-table-head et --et-form-blue
eux-mêmes. Ici, seul le rôle d'encre bascule ; les aplats et les bordures
gardent leur valeur foncée, et le texte blanc qu'ils portent avec elle. */
--et-table-head-encre: #C3D0E4;
--et-form-blue-encre: #8FB4F0;
/* LA TEINTE D'INFORMATION, ENFIN. --et-tint n'avait aucune valeur sombre —
seul des trois jetons qui valent #EBF3FB en clair à ne pas en avoir, quand
--et-info-bg et --et-navy-soft sont tous deux redéfinis quelques lignes
plus bas. Elle restait donc pâle sous une encre devenue claire : le bloc
« ce que l'enregistrement déclenche » rendait 2,00:1, et toute rangée
sélectionnée avec lui. Elle prend la dilution de --et-navy-soft, son jumeau
de valeur en clair — pas une couleur de plus.
--et-ink dessus : 12,09:1. */
--et-tint: #1D2A45;
/* L'ENCRE BLEUE S'ÉCLAIRCIT, sans quoi la teinte ci-dessus la rendrait
illisible : #0854A0 sur #1D2A45 est du foncé sur du foncé. La valeur est
celle de --et-lien-survol, déjà au thème — le sombre n'invente pas un
huitième bleu. Sur la teinte sombre : 7,83:1 ; sur --et-surface : 9,54:1.
(Avant, --et-form-blue-d n'était lisible en sombre que PARCE QUE son fond
était resté clair : deux défauts qui s'annulaient.) */
--et-form-blue-d: #9AC4EE;
--et-danger: #f87171;
--et-ok: #4ade80;
--et-succes-bg: rgba(74, 222, 128, .14);
--et-succes: #6ee7a0;
--et-info-bg: rgba(92, 176, 236, .16);
--et-info: #7db8f0;
--et-avertissement-bg: rgba(244, 154, 71, .16);
--et-avertissement: #f0a860;
--et-avertissement-bord: rgba(244, 154, 71, .42);
--et-avertissement-mark: #f0a860;
/* En sombre le fond ambre est une teinte TRANSLUCIDE sur surface foncée : l'encre y
redevient claire, et c'est l'ambre courant qui porte le meilleur contraste. Le
#8A4A0C du thème clair y disparaîtrait. */
--et-avertissement-ink: #f0a860;
/* MÊME TROU, MÊME REMÈDE, pour l'ambre de MARQUE : --et-amber-ink n'était défini
qu'une fois, dans le bloc clair, et restait donc #c9772e en sombre — un orange
sourd posé sur fond marine. Il habille des pastilles à fond teinté (tuiles du
portail et de l'accueil, cartouches compta, constats de correction), toutes
translucides : en sombre l'encre doit s'éclaircir comme celle de l'avertissement,
dont il reprend ici la valeur plutôt que d'en inventer une seconde. */
--et-amber-ink: #f0a860;
--et-succes-bord: rgba(74, 222, 128, .38);
--et-succes-ink: #6ee7a0;
/* --et-danger-bord N'AVAIT AUCUNE VALEUR SOMBRE, et ce n'est pas .alert qui
l'inaugure : dix règles le consomment déjà (écran de connexion, natures,
rapports périodiques, tiers, génération…), toutes en sombre avec le #FFB3B3
du thème clair — un rose pâle qui cerne un aplat foncé bien plus fort que la
bordure d'à côté, alors qu'il est censé être le plus discret des quatre.
Il prend la dilution de ses pendants ; les dix règles y gagnent en passant. */
--et-danger-bord: rgba(248, 113, 113, .38);
--et-danger-ink: #f4a49c;
--et-info-bord: rgba(92, 176, 236, .38);
--et-danger-badge-bg: rgba(248, 113, 113, .16);
--et-neutre-bg: rgba(148, 163, 184, .16);
--et-neutre: #94a3b8;
/* Le creux du repos se creuse aussi en sombre : plus sombre que la surface,
jamais plus clair — sinon il ressortirait comme un poste. */
--et-repos-bg: #1A2434;
--et-repos-bord: #2C3A50;
/* --et-surface-2 était PLUS SOMBRE que --et-surface (#0d1524 < #111a2b) : ce
jeton ne servait qu'à des fonds discrets. Depuis la bascule de charte il
porte aussi les BANDEAUX d'en-tête (modale, carte, carte-liste, pied de
modale) ; laissé plus sombre que le panneau, l'en-tête se creusait en
trou noir. Il passe donc au-dessus, comme les jetons de css/fiche.css. */
--et-surface: #111A2B;
--et-surface-2: #16202F;
--et-surface-3: #1B2739;
/* LES OMBRES ONT LEUR NUIT. --et-ombre-flottant l'a reçue le 2026-09-04, les
six autres arrivent avec elles le 2026-09-05. Une ombre de 16 % de #0F172A
posée sur une surface #111A2B ne se voit pas : un panneau flottant s'y
confondait avec la page, et c'est ce qui obligeait chaque panneau à écrire
sa propre variante sombre — le sélecteur de période en avait une
(rgba(0,0,0,.7)), le menu utilisateur non, et les deux se détachaient donc
différemment. MÊME GÉOMÉTRIE QU'EN CLAIR, dans les sept cas : c'est la
DENSITÉ qui change, pas la forme. L'encre passe au noir — sur un fond
nuit, un bleu-gris dilué ne fait plus d'ombre, il fait du brouillard. */
--et-ombre-pose: 0 1px 2px rgba(0, 0, 0, .55);
--et-ombre-carte: 0 14px 38px -30px rgba(0, 0, 0, .75);
--et-ombre-survol: 0 14px 30px -16px rgba(0, 0, 0, .65);
--et-ombre-menu: 0 6px 16px -8px rgba(0, 0, 0, .50);
--et-ombre-flottant: 0 10px 26px rgba(0, 0, 0, .55);
--et-ombre-fenetre: 0 30px 70px -34px rgba(0, 0, 0, .80);
--et-ombre-volet: 0 0 44px -12px rgba(0, 0, 0, .70);
/* Le marine de la charte est illisible sur fond sombre : les pastilles
d'icône et puces de code prennent un bleu clair, le fond un marine dilué. */
--et-navy-soft: #1D2A45;
--et-navy-ink: #8FB4F0;
/* Les huit catégorielles, RE-CRANTÉES et non retournées. La bande de clarté
de la surface sombre (#111A2B) n'est pas celle de la surface claire : L
0,48–0,67 contre 0,43–0,77. Le jeu clair y échoue — --et-cat-1, -6 et -8
tombent sous 3:1 de contraste. Celui-ci est validé contre #111A2B :
pire couple adjacent ΔE 9,1 en deutéranopie, 18,8 en vision normale.
Même ordre, mêmes familles de teinte : l'emplacement n° 3 reste le violet
dans les deux thèmes, sans quoi une même entité changerait de couleur en
basculant de thème. */
--et-cat-1: #4A86C8;
--et-cat-2: #6E9A2E;
--et-cat-3: #8B6FD8;
--et-cat-4: #C96A32;
--et-cat-5: #0E9CB4;
--et-cat-6: #D14E70;
--et-cat-7: #B08A2E;
--et-cat-8: #6070D0;
}
/* --- Boutons --------------------------------------------------------------- */
/* LE RAYON DES BOUTONS, CÂBLÉ. --et-r-btn existait depuis la bascule du
2026-08-17 mais AUCUNE règle ne le donnait à .btn : Bootstrap y appliquait son
--bs-btn-border-radius (.375rem, soit 6 px), et les 4 px du jeton ne se
voyaient que sur les boutons qui écrivaient leur rayon à la main. Le jeton est
donc branché ici, sur la variable Bootstrap ET sur la propriété — la première
pour les états que Bootstrap redessine, la seconde pour les boutons qui ne
passent pas par ses variables. Sans cela, --et-r-btn à 0 (2026-09-02) serait
resté sans effet à l'écran. */
.btn { --bs-btn-border-radius: var(--et-r-btn); border-radius: var(--et-r-btn); }
.btn-primary {
/* 2026-09-02 : le bouton primaire cesse de porter --et-blue, le marine de
MARQUE réservé à la coquille depuis la bascule du 2026-08-17, et prend le
bleu de CONTENU comme tout ce qui est interactif dans une page. C'est le
dernier endroit où le marine descendait dans le corps de l'écran. */
--bs-btn-bg: var(--et-form-blue);
--bs-btn-border-color: var(--et-form-blue);
--bs-btn-hover-bg: var(--et-form-blue-d);
--bs-btn-hover-border-color: var(--et-form-blue-d);
--bs-btn-active-bg: var(--et-blue-700);
--bs-btn-active-border-color: var(--et-blue-700);
--bs-btn-disabled-bg: var(--et-blue);
--bs-btn-disabled-border-color: var(--et-blue);
}
/* Bouton d'action principal (orange) : */
.btn-accent {
--bs-btn-color: #fff;
--bs-btn-bg: var(--et-orange);
--bs-btn-border-color: var(--et-orange);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--et-orange-600);
--bs-btn-hover-border-color: var(--et-orange-600);
--bs-btn-active-color: #fff;
--bs-btn-active-bg: var(--et-orange-700);
--bs-btn-active-border-color: var(--et-orange-700);
--bs-btn-focus-shadow-rgb: 242, 108, 22;
}
.btn-outline-primary {
--bs-btn-color: var(--et-blue);
--bs-btn-border-color: var(--et-blue);
--bs-btn-hover-bg: var(--et-blue);
--bs-btn-hover-border-color: var(--et-blue);
--bs-btn-active-bg: var(--et-blue);
}
/* --- Utilitaires de marque ------------------------------------------------- */
.text-easytech-blue { color: var(--et-blue) !important; }
.text-easytech-orange { color: var(--et-orange) !important; }
.bg-easytech-blue { background-color: var(--et-blue) !important; color: var(--et-sur-marine); }
.bg-easytech-orange { background-color: var(--et-orange) !important; color: var(--et-sur-aplat); }
/* --- Carte avec filet de marque orange (rappel du logo) -------------------- */
.card-easytech { border-top: 3px solid var(--et-orange); }
/* --- En-têtes de tableau --------------------------------------------------- */
.table thead th {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--et-sur-ardoise-plein);
background: var(--et-table-head);
font-weight: 600;
white-space: nowrap;
}
.table thead th a { color: var(--et-sur-ardoise-plein); }
/* Le survol ATTÉNUE : l'ardoise n'a que deux encres, et le lien au repos porte
déjà la première. #dbeafe rendait 7,5:1 sur l'ardoise, --et-sur-ardoise 5,86:1 —
toujours bien au-dessus d'AA, et c'est un rang nommé plutôt qu'un bleu de plus. */
.table thead th a:hover { color: var(--et-sur-ardoise) !important; }
/* --- Avatar initiales ------------------------------------------------------ */
.avatar-initiales {
flex: none;
width: 34px;
height: 34px;
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: .78rem;
letter-spacing: .01em;
/* --et-navy-soft / --et-navy-ink : LE couple de la charte pour « un fond
marine dilué, une encre bleu clair ». L'aplat était un marine à 10 %
écrit à la main, et l'encre le marine PLEIN — qui n'a pas de valeur
sombre. Sur la surface nuit, les initiales rendaient donc 1,22:1 :
illisibles. Le couple donne 4,50:1 en clair et 6,77:1 en sombre. Le clair
y perd (11,48:1 avant), et c'est le prix d'une pastille qui existe dans
les deux thèmes ; la marge de 4,50 est celle du jeton, pas de ce site —
si elle est jugée trop mince, elle se corrige sur --et-navy-ink. */
background: var(--et-navy-soft);
color: var(--et-navy-ink);
}
/* --- Badges de statut de licence : RETIRÉS -------------------------------
.badge.et-active / .et-expired / .et-none — trois paires fond + encre écrites
à la main. AUCUNE VUE NE LES PORTE : zéro occurrence dans tout le dépôt
(.razor, .cs, .html, .js), hors copies _A_SUPPRIMER_ et .bak-.
Le commentaire voisin les disait « propres au statut de licence, valeurs
légèrement différentes, non touchés » : un lot précédent les a délibérément
épargnées en les croyant vivantes. Elles ne l'étaient pas. Les badges d'état
qui servent sont ceux de Components/Shared/Badge.razor, juste en dessous,
sur les jetons --et-succes / --et-info / --et-avertissement / --et-danger. */
/* --- Badges de statut génériques (Components/Shared/Badge.razor) ----------
Distincts des .et-active/.et-expired/.et-none ci-dessus (propres au statut
de licence, valeurs légèrement différentes, non touchés) : ceux-ci portent
les jetons --et-succes/--et-info/--et-avertissement/--et-danger/--et-neutre
posés dans le bloc :root, eux-mêmes repris des paires bg/texte déjà les
plus fréquentes dans le code existant avant migration. */
.badge-succes { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.badge-info { background: var(--et-info-bg); color: var(--et-info); }
.badge-avertissement { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.badge-danger { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.badge-neutre { background: var(--et-neutre-bg); color: var(--et-neutre); }
/* Forme de la pastille d'état (2026-08-17) : « padding 3px 10px, 11,5 px, graisse
600 » et la pilule — l'un des deux seuls arrondis que la charte tolère.
*** LA JUSTIFICATION QUI SUIVAIT ÉTAIT FAUSSE, ET ELLE COUVRAIT TROIS DÉFAUTS. ***
Elle disait que la graisse 600 rendait le texte « lisible au seuil AA des textes
gras ». CE SEUIL N'EXISTE PAS À CETTE TAILLE : le palier de 3:1 s'applique au
texte dit large, soit 24 px, ou 18,7 px en gras. À 12 px gras, le seuil reste
4,5:1, et trois des cinq classes ci-dessus étaient dessous :
succès --et-succes sur son fond : 3,16:1
avertissement --et-avertissement sur son fond : 2,02:1
danger --et-danger sur son fond : 4,22:1
Les trois prennent désormais le cran d'ENCRE de leur famille — 5,63:1, 6,46:1 et
6,95:1. La graisse 600 reste, pour la lecture ; elle ne dispense de rien. */
.badge-succes, .badge-info, .badge-avertissement, .badge-danger, .badge-neutre {
padding: 3px 10px; border-radius: var(--et-r-pill);
font-size: 12px; font-weight: 600;
}
/* --- Anneau de focus au clavier ------------------------------------------
Il RESTE, contrairement à celui des champs : un focus visible au clavier est
une exigence d'accessibilité, pas un ornement — et sur un bouton il n'a pas
l'effet de sursaut qu'il avait sur un champ. La valeur passe au bleu SAP, le
#00408F codé ici étant celui d'une charte abandonnée deux bascules plus tôt. */
.btn-check:focus + .btn, .btn:focus-visible {
box-shadow: 0 0 0 .2rem var(--et-focus);
}
/* --- AdminLTE : barre latérale & en-tête : RETIRÉS ------------------------
.app-sidebar / .app-header / .app-footer / .app-content-header / .sidebar-*
habillaient la coquille AdminLTE. Components/Layout/AdminLayout.razor la
déclare disparue en toutes lettres, sous « CE QUI A DISPARU AU PORTAGE » :
« La barre AdminLTE (app-header / app-sidebar / app-footer) et son menu
utilisateur maison : ShellModule et AppTopbarActions rendent les mêmes
gestes — mon compte, déconnexion — et en ajoutent que l'administration
n'avait pas : recherche Ctrl+K, favoris, mode compact, thème sombre. »
Le balisage est parti, la feuille était restée. Seule occurrence de ces noms
dans le dépôt : ce commentaire d'AdminLayout, précisément.
.bg-easytech-orange partait d'ici en DOUBLON — la déclaration complète, avec
son encre --et-sur-aplat, est plus haut dans « Utilitaires de marque » ;
celle-ci ne posait que le fond. C'est la bonne qui survit. */
/* --- Pagination ------------------------------------------------------------ */
.page-item.active .page-link {
background-color: var(--et-blue);
border-color: var(--et-blue);
}
.page-link { color: var(--et-blue); }
/* --- Écran d'authentification : RETIRÉ ------------------------------------
.auth-page / -header / -band / -tabs / -input / -toggle / -row / -buttons /
-error / -footer / -wordmark : une mise en page en bandes, type BioTime.
Ce fichier le disait DÉJÀ de lui-même, plus bas, dans la section des coins
carrés : « Le bloc .auth-input plus haut dans ce fichier est du code mort —
aucune vue ne s'en sert, vérifié sur l'ensemble des .razor. » Le constat
était juste et vaut pour toute la famille ; il ne restait qu'à en tirer la
conséquence. L'écran de connexion vit en .cx-* (ecran-connexion.css). */
/* ===========================================================================
LIENS — la seule règle « a » globale de l'application.
Elle vivait dans css/easypaie.css, feuille du module de paie chargée par
App.razor pour la suite entière. Trois effets, dont deux non voulus :
· la paie décidait de l'apparence des liens d'EasyStock, d'EasyCompta et de
la caisse — aucune autre feuille ne déclare « a » ;
· la couleur était écrite en dur (#0A6ED1) dans un second vocabulaire de
jetons (--ep-*) parallèle à --et-*, donc hors de la bascule de thème ;
· le module de paie ne pouvait pas se retirer de la page sans emporter
l'apparence des liens de tout le reste.
Couleur et graisse du thème clair sont reprises TELLES QUELLES : ce bloc
déplace une règle, il n'en change pas le rendu. Le thème sombre, lui, est
corrigé — voir --et-lien dans le bloc sombre.
La graisse 600 reste discutable pour du lien courant, mais elle est en
production : la changer ici toucherait quatorze modules d'un coup, ce qui
relève d'une décision de charte et non d'un portage de module.
=========================================================================== */
a { color: var(--et-lien); text-decoration: none; font-weight: 600; }
a:hover { color: var(--et-lien-survol); text-decoration: underline; }
/* ===========================================================================
FORMES & MODALES — thème "Modifier la zone" (appliqué à TOUS les formulaires)
Reproduit fidèlement la maquette fournie. Jetons --et-form-blue* définis
dans le bloc :root de marque en tête de fichier (source unique).
=========================================================================== */
/* --- Conteneur : angles 14px, ombre portée de la charte --- */
.modal-content {
border-radius: var(--et-r);
border: none;
box-shadow: var(--et-ombre-fenetre);
font-family: var(--et-font);
overflow: hidden;
}
/* --- En-tête : bandeau clair + liseré orange 3px ---------------------------
Bascule de charte : l'en-tête était un dégradé bleu à texte blanc, surmonté
d'un filet ambre tiré en ::after. Il devient un bandeau clair à texte
sombre, souligné d'orange — signature de la maquette « Fiche terminal ».
Le ::after est neutralisé plutôt que supprimé : le liseré est désormais une
vraie bordure, et laisser l'ancien filet le doublerait de 4px d'ambre. */
.modal-header {
position: relative;
padding: 16px 22px;
color: var(--et-ink);
background: var(--et-surface-2) !important;
border-bottom: 3px solid var(--et-action);
}
.modal-header::after { content: none; }
.modal-header .modal-title { color: var(--et-ink); font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.modal-header .modal-title i,
.modal-header .form-modal-icon i { color: var(--et-navy-ink) !important; }
.modal-header .btn-close { filter: none; opacity: .55; }
.modal-header .btn-close:hover { opacity: 1; }
/* Pastille d'icône + sous-titre (composant FormModal) */
.form-modal-header { align-items: center; gap: 11px; }
.form-modal-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 0;
background: var(--et-navy-soft); color: var(--et-navy-ink); flex-shrink: 0;
}
.form-modal-icon i { font-size: 18px; }
.form-modal-titles { flex: 1; min-width: 0; }
.form-modal-sub { font-size: 13px; color: var(--et-muted); margin-top: 2px; }
/* --- Corps : labels + champs --- */
.modal-body { padding: 20px 22px 8px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--et-form-label); margin-bottom: 7px; }
.form-label .hint { display: block; font-weight: 400; font-size: 12px; color: var(--et-muted); }
.form-control, .form-select {
border: 1px solid var(--et-form-border);
border-radius: var(--et-r2);
color: var(--et-form-text);
font-family: var(--et-font);
}
/* 2026-08-17 : « champ de saisie […] focus bordure #0A6ED1 ». Une simple bordure,
sans halo : l'anneau de 3 px doublait la place prise par un champ au moment où
l'on y écrit, et faisait sursauter la grille à chaque tabulation. */
.form-control:focus, .form-select:focus {
border-color: var(--et-form-blue);
box-shadow: none;
}
/* UN INDICE DE SAISIE EST UN MOT QU'ON LIT, pas un tiret de valeur absente.
--et-inerte rend 2,04:1 sur blanc : c'est le cran des tirets « non renseigné »,
et la recette d'EasyPOS l'a explicitement gardé pour EUX. Un indice de saisie
(« Ex. FROM », « Libellé, code, article… ») se lit et se comprend : il relève
du cran des notes, --et-faint, à 4,94:1. C'est cette recette-là qu'on applique
ici, pas qu'on renverse. */
.form-control::placeholder { color: var(--et-faint); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--et-form-danger); }
/* Cases à cocher et interrupteurs : BLEUS (2026-08-17). « L'orange ne se pose
jamais sur une pastille, une case à cocher, un numéro de page ou une bordure. » */
.form-check-input:checked { background-color: var(--et-form-blue); border-color: var(--et-form-blue); }
.form-check-input:focus { border-color: var(--et-form-blue); box-shadow: none; }
/* --- Pied : Annuler (contour) + Enregistrer (orange plein) ----------------- */
.modal-footer { border-top: 1px solid var(--et-hairline); padding: 14px 22px; background: var(--et-surface-2); }
.modal-footer .btn { border-radius: var(--et-r2); font-family: var(--et-font); }
/* Le bouton d'enregistrement porte la couleur d'ACTION de la charte (orange).
Il était bleu ; la classe historique btn-easytech-orange redevient donc
fidèle à son nom, et btn-easytech-blue (52 écrans) devient un nom trompeur
— assumé : le renommer toucherait tous ces fichiers pour un gain nul. */
.modal-footer .btn-easytech-orange,
.btn-enregistrer {
background: var(--et-action); border: none; color: var(--et-sur-aplat); font-weight: 600;
box-shadow: none;
}
.modal-footer .btn-easytech-orange:hover,
.btn-enregistrer:hover { background: var(--et-action-d); color: var(--et-sur-aplat); }
.btn-enregistrer:disabled { background: var(--et-action-off); }
.btn-enregistrer.ok { background: var(--et-form-ok); box-shadow: none; }
.modal-footer .btn-outline-secondary,
.btn-annuler {
color: var(--et-muted); background: var(--et-surface); border: 1px solid var(--et-form-border);
border-radius: var(--et-r2); font-weight: 600;
}
.modal-footer .btn-outline-secondary:hover,
.btn-annuler:hover { background: var(--et-surface-3); border-color: var(--et-info-bord); color: var(--et-muted); }
/* Repère « la fin tombe le lendemain » sur la liste des postes de travail
(Vacations.razor). La modale de cet écran suit, elle, le modèle de fiche —
voir css/fiche.css et docs/modele-fiche.md. */
/* Même défaut que .avatar-initiales, même correction : l'aplat était l'ANCIEN
bleu (#1F6FB2, d'avant la révision du 2026-09-02) dilué à 12 %, et l'encre le
bleu plein, sans valeur sombre — 2,27:1 sur la surface nuit. Sur --et-tint,
avec l'encre bleue de la charte : 4,50:1 en clair, 6,77:1 en sombre. */
.poste-j1 {
margin-left: 4px; padding: 0 4px; font-size: 12px; font-weight: 700;
background: var(--et-tint); color: var(--et-form-blue-encre); vertical-align: super;
}
/* ===========================================================================
ENCARTS D'ALERTE (.alert) — la charte donnée au composant Bootstrap NU
---------------------------------------------------------------------------
POURQUOI ICI, ET PAS DANS 448 PAGES. « alert alert-* » est la façon dont ce
produit écrit un encart : 448 fichiers, 1 205 emplois, et pas UN qui soit
habillé. Les quatre familles maison couvrent chacune leur périmètre
(.fx-encart la fiche, .ep-bandeau EasyPaie, .mx-note le gabarit) et laissent
celui-là dehors — il est resté aux couleurs d'usine de Bootstrap, les seules
de l'application à ne venir d'aucun jeton. Le porter classe par classe, ce
serait 448 fichiers touchés pour un résultat que six règles donnent d'un
coup. Le dépôt a DÉJÀ tranché ce cas deux fois, et dans ce fichier : .table
(§ TABLEAUX, juste dessous) rhabille 148 écrans sans toucher au balisage, et
.badge-* fait de même pour les pastilles. Troisième application de la même
règle, pas une exception.
COMMENT : par les PROPRIÉTÉS PERSONNALISÉES de Bootstrap, pas contre lui.
Sa règle .alert lit --bs-alert-bg / --bs-alert-color / --bs-alert-border-color ;
on ne redéclare donc ni background ni color — on remplit ses variables et
c'est sa propre règle qui peint nos jetons. Conséquence directe et voulue :
le thème sombre suit SANS UNE LIGNE de plus ici, puisque les --et-* se
redéfinissent déjà sous .appgrid[data-theme="dark"]. Écrire les couleurs en
dur aurait exigé de doubler tout ce bloc en sombre.
CONTRASTES MESURÉS, texte sur son propre fond (AA texte courant = 4,5:1 ;
un encart porte des PHRASES, pas un mot de pastille — le seuil de 3:1 des
textes gras ne s'y applique pas) :
clair danger 5,89 · avertissement 6,46 · succès 4,94 · info 4,50 · neutre 4,81
sombre danger 5,02 · avertissement 6,62 · succès 8,47 · info 6,21 · neutre 5,17
L'avertissement prend --et-avertissement-ink et NON --et-avertissement :
celui-ci ne vaut que 2,86:1 sur le fond ambre — c'est exactement le trou que
le jeton -ink a été créé pour boucher (voir sa déclaration). Info est à
4,50:1 tout juste : c'est le seul des cinq à n'avoir aucune marge, à ne pas
éclaircir davantage.
CE QUE CE BLOC NE TOUCHE PAS, ET POURQUOI :
- la MARGE BASSE (--bs-alert-margin-bottom, 1rem d'usine). 222 emplois la
corrigent déjà à la main (mb-0, m-3, mb-3…) ; les autres s'appuient
dessus. La changer serait un déplacement de mise en page sur 448 écrans
qu'aucune règle de charte ne réclame — la charte parle de couleur, de
coins et de densité, pas d'espacement entre blocs.
- .alert-link et .alert-dismissible : zéro emploi dans tout le dépôt
(vérifié). Pas de règle morte pour un cas qui n'existe pas ; le jour où
un lien apparaît dans un encart, --bs-alert-link-color se pose ici.
- .alert-primary et .alert-dark : zéro emploi non plus. Les six variantes
ci-dessous sont exactement celles que le produit écrit.
DEUX INTERACTIONS À CONNAÎTRE, l'une et l'autre antérieures à ce bloc :
- « py-2 » (998 emplois) et « small » (353) sont des utilitaires Bootstrap
en !important : ils continuent de primer sur la densité posée ici. C'est
voulu — et c'est aussi ce qui a fixé cette densité. Un encart de ce
produit est compact dans 998 cas sur 1 205 ; c'est le DÉFAUT d'usine, à
1rem, qui était l'intrus. Les ~200 encarts muets rejoignent la densité
des autres au lieu de trancher avec eux.
- « border » (78 emplois) pose border-color: var(--bs-border-color)
!important et écrase donc la bordure teintée ci-dessous par un gris.
Ces 78 encarts gardent l'aspect qu'ils ont aujourd'hui ; ce n'est pas ce
bloc qui les grise, et les en défaire est une passe de balisage à part.
=========================================================================== */
.alert {
/* Densité de la charte. Posée en VARIABLES et non en padding : la règle de
Bootstrap les compose elle-même, et un utilitaire de page garde le dernier
mot sans avoir à lutter contre une déclaration concurrente. */
--bs-alert-padding-y: 9px;
--bs-alert-padding-x: 12px;
/* Coins carrés — la charte ne tolère l'arrondi que sur les boutons de barre
d'outils (4 px) et les pastilles d'état. Un encart n'est ni l'un ni l'autre. */
--bs-alert-border-radius: 0;
/* Aligné sur .table (13,5 px), l'autre composant Bootstrap rhabillé ici :
les deux se côtoient sur presque tous les écrans de liste, et 16 px d'usine
à côté d'un tableau à 13,5 px faisait passer l'encart pour une autre appli. */
font-size: 14px;
line-height: 1.5;
}
/* L'ENCRE EST AU RANG -ink, ET C'EST MESURÉ (2026-09-08).
Cette ligne posait `--bs-alert-color: var(--et-danger)` et sa voisine
`var(--et-succes)`, c'est-à-dire UNE COULEUR D'ÉTAT EN color: — ce que la
charte interdit sans exception (CLAUDE.md, section Design : « une couleur
d'état n'est jamais écrite en color: — zéro site, aucune exception »).
Bootstrap compose `.alert { color: var(--bs-alert-color) }`, donc ces deux
variables SONT un color:.
Ce n'était pas qu'une affaire de doctrine, c'était sous le seuil AA. Mesuré
en thème CLAIR, sur le fond que la ligne pose elle-même, pour du texte à
14 px (seuil 4,5:1) :
alert-danger --et-danger #DC2626 sur #FFEBEB → 4,22:1 ÉCHEC
alert-success --et-succes #16A34A sur #F1FDF6 → 3,16:1 ÉCHEC
alert-warning déjà au rang -ink → 6,46:1 conforme
alert-info --et-info (bleu de contenu, pas
une couleur d'état réservée) → 6,14:1 conforme
alert-secondary/-light --et-neutre → 4,81:1 conforme
Au rang -ink : 6,95:1 pour danger, 5,63:1 pour succès.
LE THÈME SOMBRE PASSAIT DÉJÀ, et le correctif ne le dégrade pas — c'est ce
qui rend ce changement sûr sur un fichier du noyau. Mesure sur les DEUX sols
qu'un encart rencontre, --et-surface (dans une carte) et --et-surface-2 (le
fond de page, --app-bg), les rgba étant composités sur chacun :
danger --et-danger #f87171 → 5,02 / 4,70 puis, au rang -ink, 7,03 / 6,58
succès --et-succes #6ee7a0 → 8,43 / 7,85 inchangé : --et-succes-ink
vaut LE MÊME #6ee7a0 en sombre.
Le correctif est donc une amélioration en clair, une amélioration en sombre
pour danger, et un no-op en sombre pour succès. Aucune régression possible.
LES BORDURES NE BOUGENT PAS, et c'est délibéré. Les quatre jetons -bord
rendent 1,23 à 1,57:1 sur le fond de page — mais --et-hairline, le séparateur
universel du produit, rend 1,16:1 par construction. Le seuil graphique de
3:1 ne s'applique pas à un filet qui ENCLÔT une zone de même surface : c'est
de la décoration au sens de WCAG 1.4.11, et c'est une décision de charte
déjà prise partout ailleurs. Les remonter ici les mettrait en désaccord avec
le reste du produit. */
.alert-danger { --bs-alert-color: var(--et-danger-ink); --bs-alert-bg: var(--et-danger-badge-bg); --bs-alert-border-color: var(--et-danger-bord); }
.alert-warning { --bs-alert-color: var(--et-avertissement-ink); --bs-alert-bg: var(--et-avertissement-bg); --bs-alert-border-color: var(--et-avertissement-bord); }
.alert-success { --bs-alert-color: var(--et-succes-ink); --bs-alert-bg: var(--et-succes-bg); --bs-alert-border-color: var(--et-succes-bord); }
.alert-info { --bs-alert-color: var(--et-info); --bs-alert-bg: var(--et-info-bg); --bs-alert-border-color: var(--et-info-bord); }
/* NEUTRES. Bootstrap distingue « secondary » et « light » par deux gris presque
identiques ; la charte n'a qu'un registre neutre, et les 136 emplois des deux
classes disent la même chose — « rien à signaler ici ». Ils convergent. */
.alert-secondary,
.alert-light { --bs-alert-color: var(--et-neutre); --bs-alert-bg: var(--et-neutre-bg); --bs-alert-border-color: var(--et-hairline); }
/* ===========================================================================
TABLEAUX & LISTES — thème "Liste des zones" (appliqué à TOUS les tableaux)
=========================================================================== */
/* --- Tableau : en-tête marine, cellules bordées, lignes serrées --- */
.table { font-size: 14px; }
.table > thead > tr { background: var(--et-table-head); text-align: left; }
.table > thead > tr > th {
color: var(--et-sur-ardoise-plein); background: var(--et-table-head);
text-transform: uppercase; letter-spacing: .02em; font-weight: 600; font-size: 12px;
/* Axes séparés, JAMAIS le raccourci : « padding » remettrait le vertical en dur
et reprendrait au jeton ce qu'on vient de lui confier. */
padding-top: var(--et-cellule-tete-y); padding-bottom: var(--et-cellule-tete-y);
padding-left: 16px; padding-right: 16px;
border: 1px solid var(--et-table-head);
}
.table > tbody > tr > td { border: 1px solid var(--et-hairline); vertical-align: middle; }
.table.table-hover > tbody > tr:hover > * { background: var(--et-surface-2); }
/* Puce "code" */
.code-chip {
display: inline-block; min-width: 26px; text-align: center; padding: 1px 7px;
border-radius: 0; font-family: var(--et-font-mono);
font-weight: 500; font-size: 12px; color: var(--et-navy-ink); background: var(--et-navy-soft);
}
/* Boutons d'action dans les tableaux (modifier / supprimer).
24 px et non plus 28 : ce sont EUX, et non le rembourrage, qui fixent la hauteur
d'une ligne d'actions — 28 px la portait à 35,4 px quand une ligne de texte voisine
en faisait 22,9. Alignés sur les 24 px de « .tbl .btn-sm », les deux familles de
tableaux servent désormais la même ligne d'actions de 31,4 px. */
.table .btn-outline-primary.btn-sm,
.table .btn-outline-danger.btn-sm {
width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
border-width: 1px; border-radius: var(--et-r3);
}
.table .btn-outline-primary.btn-sm { color: var(--et-form-blue); border-color: var(--et-form-border); background: var(--et-surface); }
.table .btn-outline-primary.btn-sm:hover { background: var(--et-navy-soft); border-color: var(--et-form-blue); color: var(--et-form-blue); }
.table .btn-outline-danger.btn-sm { color: var(--et-danger-ink); border-color: var(--et-form-border); background: var(--et-surface); }
.table .btn-outline-danger.btn-sm:hover { background: var(--et-danger-badge-bg); border-color: var(--et-danger); color: var(--et-danger-ink); }
/* .card-liste et .liste-entete .btn-ajout ont été RETIRÉS le 2026-08-17 avec leurs
deux seuls porteurs, OrgUnitListe et OrgUnitCrud. .liste-entete, .liste-barre et
.liste-pied restent : une quarantaine d'écrans s'en servent encore. */
.liste-entete {
display: flex; align-items: center; gap: 11px; padding: 14px 22px; position: relative;
color: var(--et-ink);
background: var(--et-surface-2) !important;
border-bottom: 3px solid var(--et-action);
}
.liste-entete::after { content: none; }
.liste-entete .titre { flex: 1; min-width: 0; }
.liste-entete .titre h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--et-ink); }
.liste-entete .sous { font-size: 13px; color: var(--et-muted); margin-top: 2px; }
.et-icone {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 0;
background: var(--et-navy-soft); color: var(--et-navy-ink); flex-shrink: 0;
}
.et-icone i { color: var(--et-navy-ink); font-size: 18px; }
.liste-barre { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--et-hairline); }
.liste-pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-top: 1px solid var(--et-hairline); background: var(--et-surface-2); font-size: 13px; color: var(--et-muted); }
/* --- Thème sombre : classes ci-dessus à fond codé en dur (#fff/#fbfcfe), donc
hors de portée des jetons --et-* déjà basculés plus haut. Même portée
(.appgrid[data-theme="dark"]) et même chantier — voir le commentaire du bloc
de jetons sombres en tête de fichier. --- */
.appgrid[data-theme="dark"] .liste-entete { background: var(--et-surface-2) !important; }
.appgrid[data-theme="dark"] .liste-pied { background: var(--et-surface-2); }
.appgrid[data-theme="dark"] .table.table-hover > tbody > tr:hover > * { background: var(--et-surface-2); }
.appgrid[data-theme="dark"] .code-chip { background: var(--et-navy-soft); }
.appgrid[data-theme="dark"] .table .btn-outline-primary.btn-sm,
.appgrid[data-theme="dark"] .table .btn-outline-danger.btn-sm { background: transparent; }
/* Le marine de la charte disparaît sur fond sombre : l'icône prend le bleu clair. */
.appgrid[data-theme="dark"] .table .btn-outline-primary.btn-sm { color: var(--et-navy-ink); }
.appgrid[data-theme="dark"] .table .btn-outline-primary.btn-sm:hover { background: var(--et-navy-soft); }
/* --et-danger-badge-bg vaut rgba(248,113,113,.16) en sombre : le fond pâle de
danger de la charte, à la place d'un rouge sombre écrit à la main. */
.appgrid[data-theme="dark"] .table .btn-outline-danger.btn-sm:hover { background: var(--et-danger-badge-bg); }
.appgrid[data-theme="dark"] .modal-footer .btn-outline-secondary,
.appgrid[data-theme="dark"] .btn-annuler { background: transparent; color: var(--et-form-label); }
.appgrid[data-theme="dark"] .modal-footer .btn-outline-secondary:hover,
.appgrid[data-theme="dark"] .btn-annuler:hover { background: var(--et-surface-2); color: var(--et-ink); }
/* ===========================================================================
COINS DROITS SUR TOUS LES CHAMPS DE SAISIE — consigne de charte.
Le modèle de fiche (.fx-* dans fiche.css) le porte déjà via --fx-rayon-champ.
Cette règle-ci l'étend aux 334 écrans encore en contrôles Bootstrap, pour que
les deux familles ne divergent pas le temps de la migration.
CE QUI RESTE ARRONDI, ET POURQUOI
- Les BOUTONS. La consigne vise les champs ; la maquette « Fiche terminal »
garde ses boutons à 10 px. Carrer les deux ferait perdre la distinction
entre ce qui se saisit et ce qui se clique.
- Les CASES À COCHER et BOUTONS RADIO (.form-check-input). Un radio carré
n'est plus un radio : sa forme EST son sens, elle dit qu'un seul choix est
possible. Bootstrap le rend rond par border-radius: 50% — le carrer serait
le transformer en case à cocher aux yeux du lecteur.
- Les cartes, modales et pastilles : elles ne sont pas des champs.
L'ÉCRAN DE CONNEXION ne passe PAS par ici. Il n'emploie pas .form-control :
ses champs sont en .cx-input (ecran-connexion.css), qui porte donc sa propre
mise au carré. Le bloc .auth-* auquel renvoyait cette note a été RETIRÉ le
2026-09-03 — la note le donnait pour mort, à raison ; voir sa pierre tombale
plus haut dans ce fichier.
=========================================================================== */
.form-control,
.form-select,
.form-control-sm, .form-control-lg,
.form-select-sm, .form-select-lg,
.input-group-text {
border-radius: 0;
}
/* Bootstrap arrondit les extrémités d'un groupe via des sélecteurs plus
spécifiques que les nôtres ; il faut les reprendre nommément. */
.input-group > :first-child,
.input-group > :last-child,
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
border-radius: 0;
}
/* ============================================================================
BANDEAU D'EN-TÊTE D'ÉCRAN — passation « Pilotage comptable » (2026-09-05)
L'en-tête que porte un écran : le glyphe, le titre, un jeton d'état, la phrase
qui dit à quoi il sert, et les actions à droite. Il remplace `.liste-entete`
là où un module l'a demandé (EcranModule, paramètre EnTeteBandeau) — pour
l'instant EasyAccounting et ses 45 écrans.
POURQUOI ICI ET NON DANS UNE FEUILLE D'ÉCRAN. La passation le livrait dans sa
feuille d'écran (`ecran-pilotage.css`). Un en-tête porté par 45 écrans est un
gabarit, pas un écran : la règle du dépôt le fait monter, sinon le 46e écran
dépend de la feuille du premier pour s'afficher. Le préfixe `.et-` dit déjà
qu'il appartient au socle, et ses trois mesures y étaient déjà déclarées.
LA HAUTEUR SE TIENT PAR LES JETONS. --et-bandeau-min / -pad-v / -pad-h sont ce
qui garde une hauteur d'en-tête identique d'un écran à l'autre : ne les
remplacez pas par des pixels dans une feuille d'écran.
========================================================================== */
.et-bandeau {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
min-height: var(--et-bandeau-min);
padding: var(--et-bandeau-pad-v) var(--et-bandeau-pad-h);
background: var(--et-surface);
border-bottom: 1px solid var(--et-hairline);
}
/* Le glyphe reprend celui du menu latéral : le même écran porte le même signe à
gauche et en tête, ce qui relie la navigation au contenu.
L'ENCRE EST UN JETON. La passation posait une encre blanche littérale sur l'aplat.
La charte nomme ce rôle --et-sur-aplat, et cette feuille est dans la coquille,
où un littéral est bloquant (tools/couleurs-en-dur.ps1). */
.et-bandeau-ico {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
background: var(--et-form-blue);
color: var(--et-sur-aplat);
border-radius: var(--et-r-btn);
font-size: 20px;
}
.appgrid[data-densite="compacte"] .et-bandeau-ico { width: 34px; height: 34px; font-size: 18px; }
.et-bandeau-l { min-width: 0; flex: 1; }
.et-bandeau-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.et-bandeau-h > h1 {
margin: 0;
font-size: 18px; /* échelle retenue du 2026-09-02 ; pas de jeton de titre au socle */
font-weight: 700;
letter-spacing: -.01em;
color: var(--et-ink);
}
.et-bandeau-jeton {
padding: 1px 7px;
background: var(--et-info-bg);
color: var(--et-info);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
/* La note se tronque sur une ligne, et `title` la rend au survol : un bandeau qui
grandit décale tout l'écran, et la hauteur commune ci-dessus ne tiendrait plus. */
.et-bandeau-note {
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--et-fs-cell);
color: var(--et-muted);
}
.et-bandeau-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Sous 640 px le glyphe s'efface : la largeur revient au titre, qui la mérite plus. */
@media (max-width: 640px) {
.et-bandeau-ico { display: none; }
}