/* ⚠ SSOT (règle 9). En posant ces tokens, `--cartouche:#1B1C21` avait été écrit en dur — alors que `--side-1` valait DÉJÀ #1b1c21 et servait de fond à la barre haute, à l'écran d'accès et aux rails. Deux noms, une valeur : le genre de doublon qui diverge d'un demi-ton sans que personne ne s'en aperçoive. `--cartouche` est un ALIAS SÉMANTIQUE de `--side-1`, pas une seconde source. Il n'a pas de variante sombre : la charpente est sombre dans les DEUX thèmes. */ :root{ --cartouche:var(--side-1); --cartouche-ink:#ffffff; --cartouche-soft:rgba(255,255,255,.62); --cartouche-faint:rgba(255,255,255,.46); --cartouche-line:rgba(255,255,255,.13); /* L'ALARME DU CARTOUCHE — le membre qui manquait à cette famille (29.07). Le cartouche a son propre jeu d'encres parce qu'il est SOMBRE DANS LES DEUX THÈMES : `--ink` n'y tiendrait pas, d'où `--cartouche-ink`. Même raison pour l'alarme. `--red` est un APLAT (l'invariant B du garde-fou l'a refusé, à juste titre) et `--red-ink` vaut #bf3b41 en thème clair — un rouge foncé fait pour la feuille blanche, qui tombe à ~2,7:1 sur #1b1c21. Cette valeur-ci est mesurée sur le fond du cartouche, pas choisie à l'œil. */ /* L'alarme du cartouche redevient ROUGE, comme son nom (02.08) — mesurée sur SON fond : 8,59:1 en clair, 8,86:1 en sombre. */ --cartouche-alarme:#f48f8a; /* LA GLISSIÈRE DE L'INTERRUPTEUR, ÉTEINTE. Elle empruntait `--cartouche-line` — un token de FILET, fait pour un trait d'un pixel, pas pour un aplat de 34×19. Composé sur le fond du cartouche, il mesurait 1,38:1 : la glissière disparaissait, et l'interrupteur éteint se lisait comme un point égaré sans rien autour. Valeur choisie pour passer 3:1 (WCAG 1.4.11, « identifier un composant et son état »), puis VÉRIFIÉE au navigateur — la luminance n'est pas linéaire en alpha, et j'ai déjà fait l'erreur de la calculer de tête aujourd'hui. */ --cartouche-rail:rgba(255,255,255,.34); /* L'ACTION DANS LE CARTOUCHE (01.08). La règle « si c'est coloré, ça se clique » vaut aussi sur le fond sombre, et l'encre de charpente n'y suffit pas : elle peint AUSSI l'horodatage et les intitulés, qui ne se cliquent pas. Teal éclairci, mesuré sur #2d3047 : 6,34:1. Inversion assumée : le rail COURANT redevient blanc — on n'est pas invité à cliquer là où l'on est déjà. */ /* 02.08 — LA CHARPENTE N'ÉCRIT QU'EN BLANC, DANS LES DEUX THÈMES. Le rail cliquable portait le teal éclairci ; il porte désormais un blanc ÉTEINT, comme `--nav-ink`. Trois valeurs d'un même blanc suffisent à faire trois rangs : #ffffff pour le courant, #c0c1c4 pour ce qui se clique, --cartouche-soft pour ce qui accompagne. Mesuré sur les DEUX fonds de charpente : 10,62:1 en clair, 10,95:1 en sombre — l'écart entre les thèmes tombe à 0,33, contre 3,07 auparavant. ⚠ CE QUE ÇA RETIRE : la charpente n'a plus AUCUN élément coloré, donc « si c'est coloré, ça se clique » n'y opère plus. Restent le soulignement de 2 px, le fond de survol et l'écart de blanc. Sur la FEUILLE, la règle est intacte. */ --cartouche-action:#c0c1c4; } /* ⚠ UNE ENCRE SE CALCULE CONTRE SON FOND — ET LA CHARPENTE CHANGE DE FOND (02.08, signalé par Rémy : « ça ne fonctionne pas en sombre »). `--cartouche-action` était figé à une valeur pendant que son fond bougeait de SEIZE POINTS de clarté entre les thèmes (L* 20,5 en clair, 4,3 en sombre). Mesuré : 6,34:1 en clair — calme — et **9,41:1 en sombre**, où les rails se mettaient à luire plus fort que le titre de l'espace. Le principe restait juste (un rail se clique, donc il est coloré) ; c'était la DOSE qui ne l'était pas. C'est exactement le défaut déjà corrigé deux fois dans ce fichier — `--side-ink-soft` le 28.07, la charpente elle-même le 29.07 — et une troisième fois ici : une valeur gelée ne peut pas tenir un rapport sur deux fonds différents. Le sombre descend donc à L* 63 : 6,67:1, le rapport du clair, et l'actif garde ses 37 points de clarté d'avance. */ /* Plus de variante sombre : la valeur tient sur les deux fonds (10,62 et 10,95). */ /* LE CARTOUCHE. Il porte le titre, la synthèse et les commandes — comme la bande d'une feuille topographique porte titre, échelle et légende. Jamais de donnée de travail : elles vivent dans la feuille claire, en dessous. */ .cartouche{background:var(--cartouche);color:var(--cartouche-ink);border-radius:var(--radius) 12px 0 0; padding:13px 16px 14px;margin-bottom:0;position:relative;isolation:isolate} /* ══ LA LUEUR DE LA CHARPENTE (01.08) ══════════════════════════════════════════════════════════ RÉPONSE MESURÉE au grief de Rémy : « ça manque d'atmosphère ». Vérifié avant d'y toucher, écran par écran — et le grief était juste, au chiffre près. Sur l'accueil de la console, 0,08 % de la surface portait la moindre chroma (1 093 px² sur 1 435 400), et l'accent de marque #5C6E99 n'y peignait AUCUN pixel. Le reset du 29.07 avait raison de retirer l'ardoise des CONTRÔLES — cinq aplats s'affichaient en même temps — mais il ne lui a rien donné en échange : DESIGN.md ne lui laissait que la jauge et l'anneau de focus, dont aucun n'apparaît sur la plupart des écrans. L'accent était devenu un jeton mort. D'OÙ VIENT CETTE LUEUR : elle n'est pas inventée. C'est EXACTEMENT le device de l'écran d'accès (`.lg2-brand::before`), le seul écran que Rémy a désigné comme ayant une atmosphère assumée, et celui sur lequel il a épinglé la palette le 28.07. Ce qui avait été étendu au reste de l'application, c'était la LISTE DES JETONS ; le traitement, lui, était resté sur cet écran. On l'étend enfin — même technique, même dérivation depuis `--accent`, un seul auteur. POURQUOI C'EST LICITE, et pourquoi ce n'est pas un retour en arrière sur le reset : la règle du 29.07 dit « l'accent ne peint pas un CONTRÔLE ». Elle ne dit rien de la charpente — et le « Don't » de DESIGN.md (« ne jamais teinter le cartouche avec autre chose que l'ardoise ») suppose précisément qu'on la teinte AVEC. L'accent quitte les boutons et gagne une RÉGION : c'est le déplacement, pas l'annulation. L'invariant G reste vert, et il le vérifie. Elle se dérive de l'accent (jamais un littéral) et retombe sur `transparent` là où `color-mix` manque : sans lui, la charpente reste exactement ce qu'elle était. */ .hb::before,.cartouche::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; border-radius:inherit; background: radial-gradient(115% 320% at 6% -140%, color-mix(in srgb,var(--accent) 30%,transparent), transparent 60%), radial-gradient(80% 260% at 88% 240%, color-mix(in srgb,var(--violet) 16%,transparent), transparent 62%)} /* Le cartouche est plus haut que la barre : sa lueur peut respirer, et prendre le coin où le titre se pose. La barre haute, elle, fait 52 px — une lueur trop serrée y ferait une tache. */ .cartouche::before{ background: radial-gradient(90% 200% at 4% -60%, color-mix(in srgb,var(--accent) 34%,transparent), transparent 62%), radial-gradient(70% 180% at 92% 180%, color-mix(in srgb,var(--violet) 18%,transparent), transparent 64%)} .cartouche .lab{display:block;font-size:11px;font-weight:600;letter-spacing:.07em; text-transform:uppercase;color:var(--cartouche-faint)} .cartouche .mois{font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.7px; line-height:1.05;margin:5px 0 3px;color:var(--cartouche-ink)} .cartouche .sy{font-size:12.5px;color:var(--cartouche-soft)} .cartouche .sy b{color:var(--cartouche-ink);font-weight:600} .cartouche .fl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px; border-top:1px solid var(--cartouche-line);padding-top:10px} .cartouche .cbtn{background:none;border:1px solid var(--cartouche-line);color:var(--cartouche-ink); border-radius:var(--radius);padding:6px 11px;font-size:12px;font-family:inherit;cursor:pointer; min-height:32px;transition:.12s} .cartouche .cbtn:hover:not([disabled]){border-color:rgba(255,255,255,.34);color:var(--cartouche-ink)} .cartouche .cbtn[disabled]{opacity:.32;cursor:default} .cartouche .cbtn.on{background:rgba(255,255,255,.13);color:var(--cartouche-ink); border-color:transparent} .cartouche .csep{flex:1} /* ══ LES TROIS CONTRÔLES PARTAGÉS, VUS DEPUIS LE CARTOUCHE (29.07) ═════════════════════════════ Le cartouche est sombre dans les deux thèmes : un contrôle conçu pour la feuille claire y devient illisible. Ces règles ne créent pas une seconde grammaire — elles habillent LA MÊME (`.mpick`, `.pl-sw`) pour le fond sur lequel elle se pose. La forme, la taille et le comportement ne changent pas : seules les encres suivent le support. ⚠ AUCUNE COULEUR EN DUR : tout passe par les tokens du cartouche, sinon le thème sombre mentirait — c'est la faute exacte payée sur le bouton de l'interrupteur ce matin. */ .cartouche .mpick{background:transparent;border-color:var(--cartouche-line);height:32px} .cartouche .mpick select{color:var(--cartouche-ink)} /* ⚠⚠ `.lbl` AUSSI, ET JE L'AVAIS OUBLIÉ (30.07). La pilule existe en DEUX variantes : avec un `