/* COPIE AUTOMATIQUE DE public/base/themes-retenus.css -- NE PAS EDITER ICI. La source est au banc ; `python tools/base/porter_reprise.py` refait cette copie, et son mode `verifier` signale toute divergence. */ /* ========================================================================= LES DEUX THEMES ========================================================================= UN THEME NE FAIT QU UNE CHOSE : IL REDEFINIT DES PRIMITIVES. Pas une regle ne vise ici un composant. C'est la seule facon d'avoir deux themes sans ecrire deux fois le produit -- et c'est ce que le controle de la coquille a reclame en rendant 115 ecarts d'une seule famille : « le theme n'est pas dans la base ». LE SOMBRE EST LE DEFAUT, et il n'est pas ecrit : c'est `jetons.css` tel quel. Seul le clair est une redefinition. L'inverse aurait demande de declarer deux fois chaque valeur. COMMENT LE RETOURNEMENT MARCHE. Le produit ecrit `rgba(var(--white-rgb), .72)` pour son texte et ses voiles. En redefinissant `--white-rgb` sur une encre sombre, le texte et les voiles se retournent d'un coup, dans toutes les feuilles a la fois, sans qu'aucune ne le sache. Le nom devient faux -- « white » ne vaut plus du blanc -- et c'est le prix assume : renommer les 181 jetons couterait des semaines pour zero pixel change. ========================================================================= CINQ COUPLES SE CONTREDISAIENT, ET C EST CORRIGE ICI ========================================================================= Chaque teinte existe DEUX FOIS : `--x` en hexadecimal, `--x-rgb` en triplet pour les voiles. Les blocs tardifs du theme n'avaient retouche que la moitie hexadecimale : cinq couples disaient donc deux couleurs differentes, et la page rendait celle que le composant avait demandee. Rien ne le signale. ON A TRANCHE EN COMPTANT LES LECTURES, pas au gout : la moitie la plus consommee decide de ce qu'on voit aujourd'hui, donc c'est elle qu'on garde et l'autre qu'on aligne. --amber-soft hex lu 14 fois, triplet 1 -> le triplet s'aligne --blue-soft hex 6, triplet 25 -> l'hexadecimal s'aligne --violet-* hex 8, triplet 9 -> l'hexadecimal s'aligne --gold-soft hex 2, triplet 28 -> l'hexadecimal s'aligne Les violets sont comptes ensemble : `pale` et `soft` portent la meme teinte, les separer aurait donne deux violets differents pour une voix d'ecart. ========================================================================= */ html[data-theme="clair"] { color-scheme: light; /* --- L ENCRE --------------------------------------------------------- Ce que le produit appelle « white » devient le texte sombre. C'est le jeton qui porte le retournement a lui seul : 79 niveaux d'opacite s'appuient dessus. */ --white-rgb: 17, 24, 39; --white: #111827; /* ET LE TEXTE D EXEMPLE NE BAISSE PAS ICI : sur fond blanc, l'encre sombre a 0,40 rend deja un contraste de 2,54, c'est-a-dire le niveau d'indice qu'on vient de donner au sombre. Lui appliquer la meme baisse le ferait tomber a 1,95, et l'exemple deviendrait illisible. Un jeton qui se retourne, comme l'encre juste au-dessus. */ --voile-exemple: 0.40; /* --- LE SOL ET LES SURFACES ------------------------------------------ « sombre » et « slate » deviennent les surfaces claires. Le fond de page n'est pas blanc mais legerement bleute : un blanc pur sous une barre blanche ne laisse plus voir ou l'une s'arrete. */ --surface-sombre-rgb: 244, 246, 249; --surface-sombre: #f4f6f9; --slate-mid-rgb: 255, 255, 255; --slate-rgb: 255, 255, 255; --slate-light-rgb: 248, 250, 252; --slate-mid: #ffffff; --slate: #ffffff; --surface-voile: rgba(255, 255, 255, 0.74); --mimex-bg: #eef1f6; /* LE JUMEAU MANQUANT, ET IL PORTE QUATRE PANNEAUX. Le produit peint l'infobulle d'interpretation, sa fenetre, la fenetre de comparaison et celle du test avec `rgb(var(--mimex-bg-rgb, 7 17 31))`. Sans lui, le repli SOMBRE tenait en theme clair pendant que leur encre suivait le theme : titre 17,24,39 sur fond 7,17,31, rapport 1,05, illisible. La correction existait dans la feuille de l'atelier et n'etait jamais descendue dans la couche qui compte. */ --mimex-bg-rgb: 238, 241, 246; /* --- L ECHELLE NEUTRE, RETOURNEE ------------------------------------- Elle est nommee par la CLARTE, donc elle s'inverse bout a bout : ce qui etait le plus clair devient le plus sombre. */ --ink-50-rgb: 17, 24, 39; /* LE CRAN D UNE MENTION REMONTE EN CLAIR, et ce n'est pas esthetique. `admin-dashboard.css` ecrit deux encres a la main sur `--white-rgb` : 0,58 pour la note d'activite, 0,62 pour l'etat « aucun test ». La teinte se retourne bien avec le theme, l'opacite non : ces crans ont ete choisis sur un sol sombre. Ces mentions vivent sur une carte d'activite TEINTEE, plus sombre que le sol clair. Mesure au pixel, capture de la zone et couleur dominante du fond, encre composee sur elle : note d'activite fond 194 208 207 0,58 -> 3,73 etat « aucun test » fond 182 197 196 0,62 -> 3,96 Deux textes de 12 px sous 4,5. A 0,76, le plus faible remonte a 5,65. */ --voile-mention: 0.76; /* LE CRAN BAS DES MENTIONS, MEME RAISON QUE CELUI DU DESSUS. 0,42 a ete choisi sur un sol sombre ; en clair, les memes mentions tombent entre 3,5 et 4,4 sur les cartes teintees du tableau de bord (mesure sur huit pages de l'espace praticien). Il remonte au barreau 10. */ --voile-mention-basse: 0.56; --ink-200-rgb: 51, 65, 85; --ink-300-rgb: 71, 85, 105; --ink-600-rgb: 148, 163, 184; --ink-900-rgb: 226, 232, 240; --ink-50: #111827; --ink-200: #334155; --ink-300: #475569; --ink-400: #64748b; --ink-600: #94a3b8; --ink-900: #e2e8f0; /* --- L ENCRE DU TEXTE, ET SES DEUX BARREAUX BAS ---------------------- Elle descend sur `--ink-50`, l'encre la plus profonde : c'est ce qui rend les crans eteints encore lisibles. Et les deux barreaux bas remontent, parce que la marge n'est pas la meme -- mesure sur le sol clair (244 246 249) : calme .76 -> 7,80 second .62 -> 4,84 Le cran de `second` remonte de 0,56 a 0,62 : a 0,56 il n'aurait rendu que 4,00 sur ce sol, soit sous le seuil du texte courant. */ --encre-texte-rgb: var(--ink-50-rgb); /* 0,62 rendait 3,7 sur le fond de page et 2,8 sur une carte teintee, a 10,5 px. Mesure au contraste. Le barreau 11, 0,76, passe 4,5 sur les deux et le cran calibre a la main, 0,74, y tombait a deux centiemes pres. Le socle pose deja ce role sur un barreau en sombre ; le clair l'ecrivait en litteral, et le seul cran calibre a la main du theme etait aussi le plus lu : 1 998 elements. */ --voile-texte-second: var(--voile-11); /* --- CE QUI CREUSE ET CE QUI OMBRE, EN CLAIR -------------------------- LE CREUX REMONTE, IL NE S INVERSE PAS. Un creux est un creux : il est sombre des deux cotes, sinon ce n'est plus un creux. Ce qui change est sa PROFONDEUR -- 28 % de noir sur un sol clair ferait un trou, 9 % suffisent et se lisent tres bien. L ARETE DU BAS, ELLE, MONTE FRANCHEMENT : 90 % contre 7 %. Sur un sol clair, une lumiere a 7 % n'existe pas ; c'est elle qui referme le creux et lui donne son epaisseur. */ --ombre-rgb: var(--white-rgb); /* LE HALO DES TITRES BASCULE, LUI, ENTIEREMENT. Voir le socle : ce n'est pas un relief mais un detachement, et sur un sol clair il se fait avec de la lumiere. */ --halo-texte-rgb: var(--lumiere-rgb); --voile-creux: var(--voile-4); --voile-creux-fond: var(--voile-4); /* LE CHAMP SE REMPLIT DE LUMIERE, IL NE PALIT PAS. Voir le socle : un creux de rail se creuse dans du sombre des deux cotes, un champ se creuse dans une carte, et la carte se retourne. Les trois valeurs sont celles du modele de l'atelier, relevees au pixel. */ --champ-fond: rgb(var(--lumiere-rgb)); --champ-filet: rgba(var(--white-rgb), var(--voile-5)); --champ-relief: inset 0 1px 2px rgba(var(--white-rgb), var(--voile-2)); --dose-creux-arete: 0.9; /* UN BLOC EN RELIEF SUR LE RAIL est plus clair que le rail des deux cotes : sur sombre un voile de blanc suffit ; sur clair, ou le rail est deja presque blanc, il faut du blanc franc (mesure : 233 sur 240 avec la surface des cartes, encore en creux ; 248 sur 240 avec celui-ci). */ --surface-relief-rail: rgba(var(--lumiere-rgb), var(--voile-11)); /* LE TEXTE SUR UN VOILE D'OR. Sur clair, l'accent EST l'or : un bouton de commande en voile d'or a cote de l'appel en aplat d'or doit se lire par son encre, or sombre comme celle des boutons seconds. */ --texte-sur-or: rgb(var(--accent-texte-rgb)); /* LE GRAPHE N A PLUS UNE LIGNE ICI. Ses trois jetons derivent de `--ink-300`, `--ink-400` et `--white-rgb`, que ce bloc retourne quelques lignes plus haut : ils suivent le theme sans qu'il ait a les connaitre. Ecrites a la main, ses deux teintes etaient deja les valeurs exactes de leurs primitives, et ses deux opacites (0,08 et 0,10) tombaient sur le meme barreau -- trois recopies, donc trois endroits a tenir. */ /* L OR DE SECOND RANG N EST PAS CELUI DE L APPEL. En clair l'appel EST dore (214, 175, 74) : un second bouton du meme or se lisait comme un doublon. La paire prend un bronze, plus profond et moins jaune. Son encre fonce avec son fond -- fixe, elle tombait a 3,60 sous le pointeur (mesure), sous le seuil de 4,5. */ /* Sur clair, le voile neutre pese plus lourd que le bronze : ses crans se resserrent pour que les deux boutons repondent de la meme force. */ --dose-cmd-appui: 0.40; --dose-note-survol: 0.23; --dose-note-appui: 0.30; --teinte-action-rgb: 166, 124, 38; --encre-action-rgb: 110, 80, 12; --encre-action-vive-rgb: 72, 52, 6; /* L'EFFLEUREMENT SE LEVE, IL NE S'ENFONCE PAS. Sur sombre, un voile de blanc eclaircit ce qu'on survole : la surface se leve. Le meme voile d'encre sur clair l'assombrissait (mesure : 232 au repos, 219 sous le pointeur), et un bouton clair qui grise sous la main se lit eteint. Le survol va vers le blanc des deux cotes ; l'appui, lui, reste un creux (`--surface-controle-survol`). */ --surface-effleuree: rgba(var(--lumiere-rgb), var(--voile-11)); /* SUR CLAIR LE RAIL A BESOIN D UNE OMBRE. Son filet a 9 % sur un sol clair ne se voit plus ; le theme ne change pas la couleur de l'ombre, il decide qu'il y en a une. */ --ombre-rail: 0 1px 2px rgba(var(--ombre-rgb), var(--voile-3)), 0 8px 24px rgba(var(--ombre-rgb), var(--voile-3)); /* --- CE QUI SE LIT SUR UN FOND QUI SE RETOURNE ------------------------ */ --texte-sur-sombre: rgba(17, 24, 39, 0.94); /* --- LES DEUX ENCRES DISCRETES, RECALIBREES SUR LE SOL CLAIR ---------- `--texte-discret` suivait `--ink-400`, qui se retourne avec l'echelle : en clair il rend #64748b, soit 3,85 sur une carte teintee a 13 px. Et `--texte-discret-sur-sombre` gardait 0,62, le cran mesure juste au- dessus a 3,96. Les deux tombent sous 4,5 pour la meme raison : ces crans ont ete choisis sur un sol sombre, ou une encre claire gagne du contraste en s'affaiblissant, alors qu'en clair elle en perd. ILS PASSENT AU CRAN DES MENTIONS, 0,76, celui qui vient d'etre calibre au pixel juste au-dessus. Ce sont 43 regles produit qui lisent `--texte-discret` : le jeton est le seul endroit ou la corriger. --------------------------------------------------------------------- */ --texte-discret: rgba(17, 24, 39, var(--voile-mention)); --texte-discret-sur-sombre: rgba(17, 24, 39, var(--voile-mention)); /* --- L ENCRE DES PASTILLES D ETAT, SUR SOL CLAIR ---------------------- Une pastille d'etat est un voile de sa propre teinte a 16 % pose sur une carte deja claire : son fond monte a 0,54-0,61 de luminance, et l'encre de la meme famille n'a plus de marge. Mesure au balayage : « a traiter » rend 3,89 et « ok » 3,17, a 11 px. ON NE TOUCHE PAS `--share-line-rgb` NI `--amber-rgb` : ils servent aussi de filet et d'aplat, ou 3,0 suffit, et les assombrir alourdirait tout ce qui les porte. Ces deux-la ne valent que comme ENCRE de pastille, et le repli garde la valeur du sombre pour les pages sans theme clair. */ --encre-etat-ok-rgb: 15, 92, 43; --encre-etat-attention-rgb: 107, 71, 3; /* Le bleu et le vert de `--blue-rgb` / `--green-rgb` ne sont PAS retournes par le theme : ce sont des teintes de donnee. Poses comme encre sur leur propre voile ils rendent 2,53 et 3,17 en clair. Meme traitement que les deux au-dessus : une encre de pastille, et rien d'autre. */ --encre-etat-info-rgb: 29, 78, 216; --trait-sur-sombre: rgba(17, 24, 39, 0.14); --encre-sur-voile: #f8fafc; /* --- L ACCENT : LE CYAN DEVIENT L OR --------------------------------- DEUX VALEURS, PAS UNE, ET C EST LA REGLE DE FOND. Les seuils de contraste ne sont pas les memes selon le role : 4,5 pour du texte, 3,0 pour un aplat ou un filet. Sur fond sombre le cyan porte le texte sans effort (10,61) et c'est l'aplat qui coince ; sur fond clair c'est exactement l'inverse. Un seul or ne peut donc pas servir les deux. Mesure des rapports sur blanc : 214/175/74 rend 2,08 -- bon pour une surface, illisible en texte ; 130/98/16 rend 4,71 et tient le texte. UNE SOURCE, UNE DIRECTION. `--teinte-accent-rgb` est la primitive ; les trois roles la lisent, et aucun ne lit les autres. Avant, la feuille de l'atelier ecrivait `html { --accent-surface-rgb: var(--portal-accent-rgb) }` pendant que celle-ci ecrivait `:root { --portal-accent-rgb: var(--accent-surface-rgb) }` : deux jetons qui se definissent l'un l'autre. Une reference circulaire rend les DEUX invalides, donc l'accent entier, et rien ne le dit ; le montage ne tenait que parce que `:root` l'emporte sur `html`. Il ne tient plus par accident. */ --teinte-accent: #d6af4a; --teinte-accent-rgb: 214, 175, 74; --accent-surface-rgb: var(--teinte-accent-rgb); /* UN ROLE DE TEXTE SE CALIBRE SUR LE FOND LE PLUS SOMBRE QU IL RENCONTRE, pas sur le sol de la page. 130/98/16 tenait 5,24 sur le sol clair et tombait a 3,95 sur la carte d'en-tete du visualiseur (209, 216, 227), ou le surtitre « Resultats de test » se pose. 116/87/12 y rend 4,71, et 6,75 sur du blanc. Meme valeur dans `atelier-modeles.css`, qui porte le theme des pages du banc restees sur la pile du produit : deux couches qui disent la meme chose doivent la dire pareil. */ --accent-texte-rgb: 116, 87, 12; --portal-accent-rgb: var(--teinte-accent-rgb); --portal-accent-clair-rgb: 138, 104, 24; --portal-accent-fonce-rgb: 122, 92, 16; --couleur-accent-doux-rgb: 146, 110, 20; --couleur-accent-fort-rgb: 122, 92, 16; --couleur-accent-doux: #926e14; --couleur-accent-fort: #7a5c10; --couleur-accent: rgb(146, 110, 20); --cyan-rgb: 146, 110, 20; --journey-accent-solid: rgb(176, 137, 40); /* L'APLAT PORTE DU TEXTE BLANC, donc il descend la ou le blanc tient. */ --accent-aplat: #8a6a1e; --accent-aplat-survol: #74591a; /* --- LES TEINTES DE DONNEE ------------------------------------------- Elles ne s'inversent pas, elles se REHAUSSENT : une teinte faite pour briller sur du sombre disparait sur du clair. La donnee garde son identite -- le bleu reste bleu -- mais a une profondeur qui se lit. */ /* LES JUMEAUX VOILES SUIVENT LEUR MOITIE OPAQUE. Quatre triplets restaient faits pour le sombre pendant que leur hexadecimal basculait : trente-sept ecritures voilees ne suivaient donc pas le theme. Ce n'est pas une erreur CSS, c'est une valeur juste au mauvais endroit, et rien ne la signale. */ --gold-soft: #926e14; --gold-soft-rgb: 146, 110, 20; --gold-bright: #8a6a1e; --gold-bright-rgb: 138, 106, 30; --amber-soft: #8a6a1e; --amber-soft-rgb: 138, 106, 30; /* L AMBRE PALE AVAIT ETE RETOURNE CONTRE DU BLANC, ET IL NE SE POSE JAMAIS DESSUS. La famille « pale » est une ENCRE, toujours posee sur un voile de sa propre teinte a 7-20 %. 146/100/10 tenait 5,4 sur du blanc et rendait 3,66 sur ce voile-la (232, 222, 208) : les douze etiquettes de periode du parcours tombaient ensemble. Le vert (21/128/61) et le bleu (30/64/175) de la meme famille passaient deja, parce qu'ils sont plus sombres -- pas parce qu'ils avaient ete mieux choisis. 122/82/4 rend 4,81 sur son voile et 6,9 sur du blanc ; ses vingt et une lectures sont toutes des encres. */ --amber-pale: #7a5204; --amber-pale-rgb: 122, 82, 4; /* LE BOUT PROFOND DE L OR D ETAPE. Meme valeur que l'ambre pale, et c'est voulu : les deux disent la meme chose sur un fond clair, un or qui se lit. 4,9 sur le voile d'or a 10 % ou le programme se pose. */ --teinte-or-texte-rgb: 122, 82, 4; --amber-mid: #8a6a1e; --amber-mid-rgb: 138, 106, 30; --blue-soft: #1e40af; --blue-soft-rgb: 30, 64, 175; --blue-pale: #1e40af; --blue-pale-rgb: 30, 64, 175; --blue-mist: #1e40af; --blue-mist-rgb: 30, 64, 175; --blue-vivid: #2a5db0; --blue-vivid-rgb: 42, 93, 176; --violet-soft: #5b3fb8; --violet-soft-rgb: 91, 63, 184; --violet-pale: #5b3fb8; --violet-pale-rgb: 91, 63, 184; --green-soft: #15803d; --green-soft-rgb: 21, 128, 61; --green-pale: #15803d; --green-pale-rgb: 21, 128, 61; --green-mid: #146637; --green-mid-rgb: 20, 102, 55; --red-soft: #b91c1c; --red-soft-rgb: 185, 28, 28; /* --- LES ETATS ------------------------------------------------------- Le succes et le danger disent un FAIT, pas une humeur d'interface : ils gardent leur teinte et ne changent que de profondeur. */ /* LE LIBELLE D UNE PASTILLE SE MELANGE VERS L ENCRE, PAS VERS LE BLANC. Sur un sol clair, un vert eclairci a 82 % de blanc rend 1,41 sur son propre voile. La teinte reste -- elle dit l'etat -- mais elle s'assombrit au lieu de s'eclaircir, et la part change avec elle : 82 % de teinte suffisent sur un sol sombre, il en faut 45 sur un sol clair. Mesure : 4,96 contre 1,41. */ /* SEULE LA PART CHANGE. La cible, elle, est la meme regle dans les deux themes : `--texte-vif`, c'est-a-dire l'encre qui se lit sur le sol courant -- blanc en sombre, encre en clair. `--ink-900-rgb` aurait ete le piege : ce jeton se RETOURNE, il vaut (226, 232, 240) en clair, donc melanger vers lui eclaircissait encore. Mesure de l'erreur : 1,16 au lieu de 1,41, c'est-a-dire pire qu'avant. */ /* 45 % LAISSAIT L AMBRE A 4,44, deux centiemes sous le cran. L'ambre est la plus claire des teintes d'etat -- (251, 191, 36) -- donc c'est elle qui decide du melange pour toutes : a 40 % elle rend 5,10, et les autres suivent sans avoir ete regardees une par une. */ --pastille-part: 40%; --couleur-succes-doux: #116a32; --couleur-succes-doux-rgb: 17, 106, 50; --couleur-danger-doux: #b91c1c; --couleur-danger-doux-rgb: 185, 28, 28; --share-line-rgb: 21, 128, 61; /* --- LES ETAPES DU PARCOURS ------------------------------------------ Cinq teintes qui disent l'etape d'un client, d'un ecran a l'autre. Elles sont de la donnee : elles se rehaussent, elles ne se remplacent pas. */ /* LES DEUX PREMIERES ETAPES DESCENDENT D UN CRAN, ET LA RAISON EST LE FOND SOUS LE FOND. Leurs valeurs avaient ete choisies pour un voile de leur teinte pose sur du BLANC. Sur la liste des clients, les six filtres sont poses sur la carte d'entete, qui porte deja un voile d'encre a 4 % et un degrade d'or : le sol n'est plus (255, 255, 255) mais (229, 232, 238), et le meme voile y rend un cran plus bas. Mesure sur ce fond-la, le bleu tombait a 4,23 et le cyan a 4,20. DEUX ETAPES SEULEMENT, PARCE QUE LES TROIS AUTRES PASSENT DEJA : violet 4,90, or 4,64, vert 4,72 sur cette meme carte. Les approfondir toutes « pour etre coherent » aurait assombri trois teintes qui n'avaient rien demande. ELLES GARDENT LEUR IDENTITE : le bleu reste le bleu de l'etape, a neuf unites de luminosite pres -- invisible cote a cote, decisif au seuil. `--teinte-bleue` et `--portal-blue-rgb`, eux, ne bougent pas : ils habillent l'interface ailleurs, sur d'autres fonds, et n'ont pas ce probleme. */ --journey-demo-rgb: 13, 92, 100; --journey-demo-solid: #0d5c64; --journey-testing-rgb: 33, 82, 160; --journey-testing-solid: rgb(33, 82, 160); --teinte-bleue: 42, 93, 176; --portal-blue-rgb: 42, 93, 176; /* LE ROUGE N AVAIT PAS DE PENDANT CLAIR, et il est le seul de la famille dans ce cas : le bleu en a un trois lignes plus haut. Il restait donc celui du sombre, `248, 113, 113`, pense pour mordre sur du noir. Sur blanc il ne mord plus rien : mesure le 22/10/2026 sur l'ecran Synthese du visualiseur, le bandeau « Attention. Le temps de traitement sort de la plage attendue » rendait 2,14 et son bouton « Compris » 1,92, pour un seuil a 4,5. Du rose pale sur du rose pale, c'est-a-dire une alerte qui ne se lit pas. LA VALEUR N EST PAS INVENTEE : c'est celle que ce theme a deja retenue pour sa famille rouge, ecrite deux fois plus bas comme `--red-soft` et `--couleur-danger-doux`. Le bandeau passe a 5,10 et le bouton a 4,66. */ --teinte-rouge: 185, 28, 28; /* LES TROIS AUTRES ETAPES MANQUAIENT, ET C EST CE QUI SE VOIT LE PLUS SUR CETTE PAGE. Deux teintes sur cinq etaient rehaussees ; les trois autres restaient celles du sombre. Sur la liste des clients, les six filtres d'etape s'alignent cote a cote : deux se lisaient, trois etaient des taches pales -- « Ждёт результаты » a 1,97, « Восстановление » a 1,38, « Повторное тестирование » a 1,32. Ce n'est pas une famille oubliee, c'est une famille traitee a moitie, et la moitie non traitee est juste a cote de l'autre. CHACUNE PREND LA VALEUR QUE CE THEME A DEJA RETENUE POUR SA FAMILLE, et aucune n'est inventee ici : le violet des pastilles est celui de `--violet-soft`, l'or celui de `--teinte-or-texte-rgb` -- ecrit plus haut comme « le bout profond de l'or d'etape » --, le vert celui de `--green-mid`. Une sixieme valeur de violet dans la feuille serait un sixieme dialecte. LA CIBLE EST LEUR PROPRE VOILE, PAS LE BLANC. Une pastille d'etape pose son encre sur un fond de la MEME teinte a 14 % : c'est la que le rapport doit tenir, et c'est plus dur que sur du blanc. Mesure sur ce fond-la : violet 5,59, or 4,9, vert 5,36 -- les deux etapes deja traitees rendent 4,78 et 4,90, donc les cinq se tiennent enfin dans le meme cran. LE VERT PREND `--green-mid` ET NON `--green-soft`. Le doux (21, 128, 61) ne rend que 3,92 sur son voile : c'est un vert choisi pour du texte sur du blanc, et une pastille n'est pas posee sur du blanc. */ --journey-results-rgb: var(--violet-soft-rgb); --journey-results-solid: var(--violet-soft); --journey-course-rgb: var(--teinte-or-texte-rgb); --journey-course-solid: rgb(var(--teinte-or-texte-rgb)); --journey-retesting-rgb: var(--green-mid-rgb); --journey-retesting-solid: var(--green-mid); /* LES TEINTES DE ROLE, MANQUEES POUR LA MEME RAISON QUE TROIS ETAPES. ----------------------------------------------------------------- L'ADMIN, LE 24/10/2026 : « Applique le traitement qu'on a fait pour que les couleurs ne paraissent pas grises/sales en theme clair. » CE N EST PAS UN DEFAUT D ENCRE, et c'est ce qui l'a rendu difficile a nommer : `.admin-user-type` a DEJA son encre de clair (`elements-retenus.css`), et la mesure du 24/10 le confirme -- les trois pastilles rendent 15,4 a 16,3 sur `/users`. Le texte se lit tres bien. C EST LA TEINTE QUI NE DIT PLUS RIEN. Elle vient de `jetons.css` -- `--teinte-violette`, `--teinte-verte`, `--teinte-or` -- et ce fichier n'a qu'un jeu de valeurs, celui du SOMBRE. Un pastel fait pour briller sur de l'ardoise, pose a 8 % sur du blanc, donne un fond a peine teinte et un filet lavande delave : la pastille a l'air grise, et le role qu'elle doit dire ne se voit plus. CHACUNE PREND LA VALEUR QUE CE THEME A DEJA RETENUE POUR SA FAMILLE, exactement comme les etapes trois blocs plus haut, et aucune n'est inventee ici. Mesure des puces d'etape, qui ont deja ce traitement : fond a 14 %, filet a 28 %, encre sombre, et elles se voient. LA QUATRIEME N A RIEN A RECEVOIR : « En formation » lit `--journey-demo-rgb`, qui a sa valeur de clair depuis le debut (13, 92, 100). C'est d'ailleurs ce qui rendait l'ecart visible -- une famille traitee a un quart. */ --teinte-violette: var(--violet-soft-rgb); --teinte-verte: var(--green-mid-rgb); --teinte-or: var(--teinte-or-texte-rgb); /* ET L ACCENT D ETAPE PAR DEFAUT, CELUI DES PAGES SANS ETAPE EN COURS. `jetons.css` le pose a `rgb(var(--portal-accent-rgb))`, c'est-a-dire a l'or des APLATS en clair. Or ce jeton ne sert jamais de fond -- verifie sur toutes les feuilles : il n'apparait que derriere `color` -- donc ce qu'il nomme est bien une encre. « Текущий шаг » s'ecrivait en or de surface sur un voile du meme or : 1,35. */ --journey-accent-solid: var(--texte-accent); /* --- LE FOND A ORBES ------------------------------------------------- Quatre teintes assourdies : sur un sol clair, les memes valeurs qu'en sombre feraient quatre taches de couleur au lieu d'une lumiere. */ --mimex-blue-rgb: 58, 108, 186; --mimex-purple-rgb: 118, 92, 198; --mimex-green-rgb: 38, 138, 128; --mimex-gold-rgb: 186, 142, 48; /* --- LES JUMEAUX QUI MANQUAIENT --------------------------------------- LA REGLE DES JUMEAUX DIT QUE TOUTE COULEUR EXISTE EN `--x` ET EN `--x-rgb`. Vingt-deux triplets basculaient ici sans leur hexadecimal : une regle qui ecrit `var(--accent-surface)` au lieu de `rgb(var(--accent-surface-rgb))` gardait donc la valeur du SOMBRE sur le theme clair, sans que rien ne le signale. C'est une des racines des textes illisibles releves sur les pages qui ne chargent pas les couches retenues. Chaque hexadecimal est DERIVE de son triplet, jamais recopie : une seule source, et le jour ou l'un bouge l'autre suit. */ --accent-surface: rgb(var(--accent-surface-rgb)); --accent-texte: rgb(var(--accent-texte-rgb)); --cyan: rgb(var(--cyan-rgb)); --encre-action: rgb(var(--encre-action-rgb)); --encre-action-vive: rgb(var(--encre-action-vive-rgb)); --encre-texte: rgb(var(--encre-texte-rgb)); --journey-demo: rgb(var(--journey-demo-rgb)); --journey-testing: rgb(var(--journey-testing-rgb)); --mimex-blue: rgb(var(--mimex-blue-rgb)); --mimex-gold: rgb(var(--mimex-gold-rgb)); --mimex-green: rgb(var(--mimex-green-rgb)); --mimex-purple: rgb(var(--mimex-purple-rgb)); --ombre: rgb(var(--ombre-rgb)); --portal-accent-clair: rgb(var(--portal-accent-clair-rgb)); --portal-accent-fonce: rgb(var(--portal-accent-fonce-rgb)); --portal-accent: rgb(var(--portal-accent-rgb)); --portal-blue: rgb(var(--portal-blue-rgb)); --share-line: rgb(var(--share-line-rgb)); --slate-light: rgb(var(--slate-light-rgb)); } /* ========================================================================= L ACCENT DU THEME SOMBRE ========================================================================= Le sombre n'a rien a redefinir SAUF ceci : le partage de l'accent en deux roles n'existe pas dans `jetons.css`, qui n'a qu'un cyan. Les deux valeurs sont posees a la racine pour que la coquille puisse lire un role et non une primitive, des le theme par defaut. `--accent-surface-rgb` est le cyan clair retenu (« vif ») : sur du sombre c'est la SURFACE qui a besoin de monter, le texte tenant tout seul. ========================================================================= */ :root { /* --- LE FOND A ORBES, EN SOMBRE -------------------------------------- Ces quatre teintes vivaient dans `background.css`, une feuille que la base remplace. Sans elles ici, `rgba(var(--mimex-blue-rgb), .28)` etait une couleur invalide : la propriete ignoree, l'orbe disparue, et pas une ligne d'erreur. Une base doit porter ses primitives, pas les emprunter a ce qu'elle remplace. */ --mimex-blue-rgb: 95, 168, 255; --mimex-purple-rgb: 169, 139, 255; --mimex-green-rgb: 99, 215, 196; --mimex-gold-rgb: 242, 190, 99; /* --- LE FOND DE PAGE, LES DEUX MOITIES ------------------------------- `--mimex-bg` venait de `background.css`, la feuille que cette base remplace, et son jumeau n'existait nulle part : trois fonds du produit lisent `rgb(var(--mimex-bg-rgb, 7 17 31))` et rendaient donc #07111f. C'est exactement le presque-noir que la note du 26/08 de `jetons.css` declare ecarte -- les surfaces et les dosages ont tous ete arretes sur #05080d. Deux fonds de page pour un seul role, et le mauvais gagnait. */ --mimex-bg: var(--surface-sombre); --mimex-bg-rgb: var(--surface-sombre-rgb); /* --- CE QUI CREUSE ET CE QUI OMBRE ------------------------------------ L'encre des ombres n'est pas celle du texte : une ombre est toujours sombre, des deux cotes du theme. Sur sombre c'est le noir ; sur clair c'est l'encre du produit, qui salit moins qu'un noir pur. */ --ombre-rgb: var(--black-rgb); /* La profondeur d'un creux, et l'arete de lumiere qui le referme en bas. Sur sombre il y a de la place pour descendre, donc le creux est franc et l'arete a peine posee. */ --voile-creux: var(--voile-8); --voile-creux-fond: var(--voile-10); --dose-creux-arete: 0.07; --surface-relief-rail: rgba(var(--lumiere-rgb), var(--voile-4)); --texte-sur-or: var(--texte-plein); /* SUR SOMBRE LE RAIL N A PAS D OMBRE : son filet suffit a le detacher. */ --ombre-rail: none; /* UNE SOURCE, UNE DIRECTION. La teinte est une primitive ; les trois roles la lisent, et aucun ne lit les autres. Deux jetons qui se definissent l'un l'autre ne tenaient que par la specificite de `:root` sur `html`, et une reference circulaire aurait rendu l'accent entier invalide sans qu'une seule ligne le dise. */ --teinte-accent: #5ae6f8; --teinte-accent-rgb: 90, 230, 248; --accent-surface-rgb: var(--teinte-accent-rgb); /* SUR SOMBRE, LE TEXTE N A PAS BESOIN D AIDE. Le cyan du produit rend 10,61 sur le fond de page : c'est la surface qui est contrainte, pas la lettre. Les deux roles portent donc la meme valeur ici, la ou sur clair ils divergent. */ --accent-texte-rgb: var(--teinte-accent-rgb); /* LA PRIMITIVE DU PRODUIT SUIT LA TEINTE RETENUE. C'est ce qui fait descendre le choix jusqu'aux composants qu'on n'a pas encore repris : tant que `--portal-accent-rgb` gardait le cyan d'origine, l'avatar restait a l'ancien accent pendant que la page passait au vif. */ --portal-accent-rgb: var(--teinte-accent-rgb); } /* ========================================================================= LA PASTILLE D ETAT SUR CLAIR : LA TEINTE DIT, ELLE NE LIT PAS UNE PASTILLE DIT UN ETAT PAR SA COULEUR, et sur fond sombre elle le dit avec un mot PALE dans cette couleur : vert clair sur vert voile, ambre clair sur ambre voile. Le rapport tient parce que le fond, lui, est noir. SUR CLAIR, LE MEME MOT SE NOIE. Mesure du 21/09/2026 sur le repli des confreres de `/partner/clients` : « Compte actif » rendait 1,16 -- un vert pale sur un vert a 16 % pose sur du gris clair. Le mot n'etait pas difficile a lire, il etait invisible. ON INVERSE LE ROLE PLUTOT QUE DE RETOUCHER SEPT TEINTES. Le mot devient SOMBRE sur son fond colore ; la teinte garde son travail -- dire l'etat -- sans avoir a porter la lecture. Aucune teinte ne fait les deux sur du blanc, et sept pastilles restaient entre 1,74 et 2,68 quand on essayait. CETTE REGLE EXISTAIT DEJA, DANS `atelier-modeles.css`, avec ce raisonnement et ces mesures. Elle n'est jamais descendue dans une couche que le produit charge : l'atelier la voyait juste, les ecrans la portaient fausse. C'est la troisieme fois qu'une correction de theme s'arrete a la feuille de l'atelier, et la premiere ou on l'ecrit. ========================================================================= */ html[data-theme="clair"] .journey-pill, html[data-theme="clair"] .puce-etat, html[data-theme="clair"] [class*="badge"] { color: rgb(31, 41, 55); font-weight: 700; } /* L ALERTE D ERREUR SUR CLAIR : DEUX CENTIEMES SOUS LE SEUIL Son encre rend 4,48 sur son propre fond, la ou il en faut 4,5. Personne ne le voit -- et c'est justement pourquoi ca se corrige : un texte qui passe a deux centiemes pres n'a aucune marge, et la premiere retouche du fond le fait basculer sans que rien ne le signale. Un cran plus profond sur l'echelle des rouges, et il rend 4,9. Le rouge reste un rouge d'erreur ; il cesse seulement d'etre a la limite. */ html[data-theme="clair"] .alert-error, html[data-theme="clair"] .alert-danger { color: rgb(153, 27, 27); } /* ========================================================================== LE CLAIR : UNE TEINTE D ENCRE N EST PAS UNE TEINTE DE FOND ========================================================================== RELEVE PAR L ADMIN LE 17/10/2026 : « en theme clair les couleurs paraissent sombres, compare au theme sombre ou c'est tres bien ». Son mot exact pour ce qu'il voyait : « gris sale ». CE QUI SE PASSE, ET CE FICHIER EN EST L AUTEUR. Plus haut, les cinq teintes d'etape ont ete APPROFONDIES pour le clair, et pour une bonne raison, ecrite la-bas : une pastille pose son encre sur un voile de la MEME teinte a 14 %, et le rapport doit y tenir. Le violet descend a 91,63,184, l'or a 122,82,4, le vert a 20,102,55. MAIS LES MEMES JETONS SERVENT DE FOND, a vingt-deux endroits, et un fond demande exactement l'inverse. Mesure du 17/10 sur `/journey` en clair : les cinq tuiles du parcours ASSOMBRISSENT leur sol de 10 points de clarte en ne le COLORANT que de 2 a 7 -- et l'or le DESATURE de 6, c'est-a-dire qu'il rend la carte plus grise que la page. Un voile a 8 % d'une teinte foncee ne donne pas une couleur pale, il donne un gris. En sombre le meme voile part d'une teinte vive, donc il colore. LA SEPARATION, ET ELLE NE TOUCHE PAS AU SOMBRE. On ajoute un jeton de FOND a cote du jeton d'ENCRE. Il vaut l'encre par defaut -- le sombre ne bouge pas d'un pixel -- et ici seulement il prend la teinte VIVE de la famille. LES TEINTES VIVES NE SONT PAS INVENTEES : ce sont celles que `jetons.css` pose deja pour le sombre. Les deux themes restent donc la meme famille de couleurs, ce qui est tout l'interet : on ne fabrique pas une seconde charte. OU VA L ENCRE, OU VA LE FOND. L'encre garde les bordures, les textes et les pastilles, qui sont justement ce que l'approfondissement protegeait. Le fond prend les aplats. Mesure apres : les tuiles faites passent de 77 a 80-83 de clarte, la tuile en cours de 66 a 70, et le contraste des titres reste entre 12,6 et 14,9 -- trois fois le seuil AA. ========================================================================== */ html[data-theme="clair"] { --journey-demo-fond-rgb: 99, 215, 196; --journey-testing-fond-rgb: 95, 168, 255; --journey-results-fond-rgb: 169, 139, 255; --journey-course-fond-rgb: 242, 190, 99; --journey-retesting-fond-rgb: 119, 214, 122; } /* --- LES ORBES DU FOND DE PAGE ------------------------------------------- ------------------------------------------------------------------------- QUATRE TACHES FLOUTEES derriere toute l'interface : bleue, violette, verte et or, chacune a 28 % de couleur et 42 % d'opacite. En sombre elles donnent de la profondeur et c'est reussi. EN CLAIR ELLES TRAVERSENT LES CARTES, qui sont translucides : la carte « Ce qui attend » du tableau de bord est posee la ou la verte et l'or se chevauchent, et leur melange la rend kaki. La liste des clients est sur la verte. Autrement dit la teinte d'une carte depend de sa POSITION dans la page et non de son role, et deux cartes identiques ne se ressemblent pas. ON NE LES RETIRE PAS, on les recule : a 18 % le degrade du fond reste perceptible la ou il doit l'etre -- sur la page nue -- et cesse de teindre ce qui est pose dessus. */ html[data-theme="clair"] .mimex-bg-orb { opacity: .18; } /* --- LES APLATS TEINTES, ECLAIRCIS VERS LE BLANC ------------------------- ------------------------------------------------------------------------- LE MEME DEFAUT QUE LES TUILES, PARTOUT AILLEURS. Les lignes de liste, la carte d'attente du tableau de bord et les voiles d'etat lisent eux aussi des jetons d'encre -- `--row-rgb` vaut `--journey-accent-rgb`, qui vaut en clair la teinte approfondie. Mesure du 17/10 sur la liste des clients : chaque ligne rendait `rgb(221,230,231)`, un vert-gris, la ou l'etape du client devrait se lire. ON MELANGE VERS LE BLANC AU LIEU DE POSER UN VOILE. Un voile pose une teinte foncee PAR-DESSUS le sol et l'assombrit ; `color-mix` tire la teinte VERS le blanc et la rend pale sans la ternir. La difference tient a ce qu'on garde : le voile garde la luminosite de la teinte, le melange garde sa tonalite. ET CETTE FORME N EXIGE PAS DE SECONDE PALETTE, ce qui est sa vraie qualite : elle marche pour n'importe quelle teinte, y compris celles qu'un gabarit pose a la volee (`style="--row-rgb: …"`). Une seconde palette aurait demande une valeur par famille, et aurait vieilli a la premiere famille ajoutee. LES BORDURES NE CHANGENT PAS. Elles lisent la meme teinte a 0.76, et c'est la qu'il faut de l'encre : le liseré de gauche est ce qui dit l'etape quand le fond, lui, doit rester calme. */ html[data-theme="clair"] .liste-carte tbody tr.liste-carte__ligne td { background: color-mix(in srgb, rgb(var(--row-rgb, var(--teinte-bleue))) 9%, #fff); } html[data-theme="clair"] .liste-carte tbody tr.liste-carte__ligne:hover td, html[data-theme="clair"] .liste-carte tbody tr.liste-carte__ligne.is-selected td { background: color-mix(in srgb, rgb(var(--row-rgb, var(--teinte-bleue))) 16%, #fff); } /* --- LES DEUX APLATS QUI ONT ECHAPPE A LA LOI CI-DESSUS ------------------ ------------------------------------------------------------------------- L'ADMIN, LE 04/11/2026 : « Les couleurs ont rollback en delave/sale ou c'est moi ? », puis « Rien a inventer, l'eclaircissement a ete fait il y a quelques temps, pour la couleur sale ». IL AVAIT RAISON SUR LES DEUX POINTS. Rien n'a bouge -- aucun jeton de couleur n'a change depuis le 29/10 -- et le remede existe : c'est la regle juste au-dessus, posee le 17/10. Ce qui a change, c'est le BALISAGE : la liste des clients a ete refaite, et deux de ses aplats sont repartis au voile sans repasser par la. MESURE DU 04/11, theme clair, sur la page reelle : .journey-pill voile de 13/92/100 a 14 % -> rendu 207/220/226 melange vers le blanc -> rendu 221/232/233 .pc-suite__contenu voile de 91/63/184 a 9 % -> la page transparait LE GRIS-VERT 207/220/226 EST EXACTEMENT « LA COULEUR SALE » : le voile garde la luminosite SOMBRE de la teinte et laisse passer le sol, le melange garde sa tonalite. L'encre n'y perd rien, elle y gagne : 12,66 -> 14,19. LES MEMES POURCENTAGES QUE LEUR VOILE, pour que rien ne change de force : 9 % pour un fond de rangee, 14 % pour une pastille -- ce sont `--voile-4` et `--voile-5`, lus ici en melange au lieu d'un voile. */ html[data-theme="clair"] .pc-suite__contenu { background: color-mix(in srgb, rgb(var(--row-rgb, var(--teinte-bleue))) 9%, #fff); } html[data-theme="clair"] .journey-pill { background: color-mix(in srgb, rgb(var(--pastille-rgb)) 14%, #fff); } /* LES TROIS QUI RESTAIENT, ET POURQUOI LA REGLE CI-DESSUS NE LES PRENAIT PAS. ------------------------------------------------------------------------- L'ADMIN, LE 04/11/2026 : « Regarde la liste du praticien en theme clair, les autres aplats sales ». Balayage de la page, theme clair : trois aplats TEINTES restaient en voile. LA PASTILLE D ETAPE DU PARCOURS lit `--journey-accent-fond-rgb`, pas `--pastille-rgb`. La regle du dessus la designait bien, mais son `color-mix` partait d'un jeton que cet element n'a pas : une valeur invalide au calcul, la declaration tombe, et le voile de `journey.css` reprend la main sans un mot. Chaque famille melange DONC SON jeton. LA RANGEE ELLE-MEME, sous ses cellules : la regle du 17/10 teint les `td`, le `tr` gardait son voile. Il ne se voit qu'entre les cellules et sous les bords, mais c'est la meme teinte sale. LA PUCE D ETAT VERTE (« offert », « actif ») : meme forme, meme remede, son propre jeton et son propre pourcentage. MEMES POURCENTAGES QUE LEUR VOILE, toujours : 9 % pour une rangee, 14 % pour une pastille d'etape, 16 % pour une puce d'etat. */ html[data-theme="clair"] .journey-pill--theme { background: color-mix(in srgb, rgb(var(--journey-accent-fond-rgb, var(--journey-accent-rgb))) 14%, #fff); } /* LA RANGEE NE PEINT PLUS SOUS SES CELLULES. L'ADMIN, LE 04/11/2026 : « le fond ne suit pas la bordure », puis « nettoie le code ». Ces deux regles doublaient celle du 17/10 qui teint les `td` : en theme clair, la rangee ET ses cellules portaient le meme aplat, a deux nuances pres, et la rangee depassait aux quatre coins ou les cellules s'arrondissent. En theme sombre, seules les cellules peignaient. Un aplat, deux peintres selon le theme : c'est ce qui a envoye une heure de mesures a la poursuite d'un coin carre. DESORMAIS, LE PEINTRE EST CELUI QUI PORTE LA FORME : les cellules en tableau (ce sont elles qui ont les rayons et les filets), la rangee en carte (c'est elle qui est la carte), dans les deux themes. La regle de carte est ecrite avec le reste du repli, dans `composants/liste-clients`. */ html[data-theme="clair"] .puce-etat--offert, html[data-theme="clair"] .puce-etat--actif { background: color-mix(in srgb, rgb(var(--green-state-rgb)) 16%, #fff); } /* LA PASTILLE D ETAPE DANS LA LISTE DES CLIENTS : LA MEME, EN PLUS SPECIFIQUE. ------------------------------------------------------------------------- Quinze pastilles restaient en voile apres la regle ci-dessus, et une seule etait corrigee. Ce n'est pas la meme pastille : dans la liste des clients, elle est peinte par `.partner-clients-table tbody tr.partner-client-row .journey-pill--theme`, qui pese (0,4,3) la ou `html[data-theme="clair"] .journey-pill--theme` pese (0,2,1). La regle de theme etait battue, et le voile restait. ON REPREND LE SELECTEUR QUI GAGNE, mot pour mot, avec son jeton et son pourcentage a lui : `--row-rgb` a 18 %, c'est ce que la liste ecrit. Une regle de theme qui ne pese pas autant que celle qu'elle corrige ne corrige rien -- elle le fait seulement croire au relecteur. MESURE, teinte 13/92/100 : voile sur la page -> 207/220/226, un gris-vert ; melange vers le blanc -> 221/232/233. */ html[data-theme="clair"] .partner-clients-table tbody tr.partner-client-row .journey-pill--theme { background: color-mix(in srgb, rgb(var(--row-rgb, var(--teinte-bleue))) 18%, #fff); } /* LA PASTILLE D ETAT D UNE CARTE DE TABLEAU DE BORD, meme famille et meme forme : elle lit `--pastille-rgb` et son voile est `--voile-5`. */ html[data-theme="clair"] .dashboard-card__state { background: color-mix(in srgb, rgb(var(--pastille-rgb)) 14%, #fff); } /* LA CARTE D ATTENTE : un or a 10 % plus un degrade radial a 22 %, posee la ou l'orbe verte et l'orbe or se chevauchent. Les trois se melangeaient en kaki. Elle garde sa famille -- l'or est la couleur de ce qui demande une action -- et cesse de prendre celle du fond. */ html[data-theme="clair"] .dashboard-card--attend { background: color-mix(in srgb, rgb(var(--teinte-or)) 7%, #fff); } /* --- LA PISTE D UNE BARRE DE PROGRESSION --------------------------------- ------------------------------------------------------------------------- `elements-retenus.css` pose `rgba(var(--black-rgb), var(--voile-7))` et explique pourquoi : « une piste doit s'enfoncer, pas ressortir ». Le raisonnement est juste et le chiffre ne l'est que pour le sombre. A 24 % de noir sur une carte blanche, la piste rend `rgb(194,194,194)` : elle pese plus que la progression elle-meme, et l'oeil lit d'abord le gris. En sombre, 24 % de noir sur un fond deja sombre ne se voit presque pas, ce qui est exactement l'effet recherche. Le sillon garde donc sa profondeur RELATIVE au lieu de sa valeur absolue. */ html[data-theme="clair"] .partner-journey-widget__bar { background: rgba(var(--black-rgb), .10); }