/* ============================================================= MM — Jetons de STRUCTURE et de SÉMANTIQUE (version normalisée) Source de vérité unique. À placer en tête de assets/app.css (remplace le bloc :root existant) OU à importer avant lui. Règle d'or : tout le CSS référence ces variables, JAMAIS un hex en dur — la bascule clair/sombre et la palette daltonien sont alors gratuites. ── CE QUI N'EST PLUS ICI ──────────────────────────────────── L'ACCENT et les couleurs de données vivent dans `brand.css`, chargé juste après : AD-4 veut qu'une coop puisse choisir son bleu, et un produit par coop ne peut pas livrer celui de MIL. Ce fichier-ci est le même chez tout le monde — un état ne change pas de sens d'une coop à l'autre. La scission tient toujours, mais elle ne se vérifie plus par comparaison : les deux fichiers réunis étaient tenus égaux, déclaration par déclaration, à `mil-membres/assets/tokens.css`, et ce dépôt est mort le 2026-08-10 — le test qui les comparait est parti avec lui. Ce qui reste ferme le seul risque que la scission crée : `test_la_scission_structure_marque_est_une_partition` échoue si un jeton est déclaré des DEUX côtés. Déclaré ici ET dans `brand.css`, il s'afficherait très bien — `brand.css` est chargé après, il gagne — et repartirait quand même avec le bleu de MIL chez la coop qui remplace `brand.css` sans y remettre ce jeton-là. Différences vs l'extraction brute (cf. DESIGN_SYSTEM.md §Écarts) : - --c-accent unifié à #008ce4 (le header h1 utilisait #008ae4 en dur). - Vert néon #39ff14 sorti en jeton --c-bling, adouci à #27c93f (AA). - Échelle d'espacement --space-* formalisée (base 4px). - Durées de transition --t-* formalisées. - Rayon pilule --radius-pill ajouté (interrupteurs, chips, badges). ============================================================= */ :root { color-scheme: light; /* ---- Surfaces & texte ---- */ --c-bg: #f6f7f9; --c-surface: #ffffff; --c-surface-2: #fafbfc; /* léger relief : inputs, zébrures */ --c-border: #e4e7eb; --c-border-strong: #d1d5db; --c-text: #3d4045; --c-text-mid: #5f6368; --c-text-muted: #9aa0a6; --c-hover-bg: #f1f3f5; --c-section-bar: #f1f3f5; /* ---- Sémantique ---- */ --c-success: #169c8e; --c-success-soft: #ecfdf5; --c-success-text: #047857; --c-warning: #f59e0b; --c-warning-soft: #fff7ed; --c-warning-text: #92400e; --c-danger: #e05252; --c-danger-soft: #fef2f2; --c-danger-text: #b91c1c; /* ---- Élévation ---- */ --c-shadow: rgba(15,23,42,0.08); --c-shadow-strong: rgba(15,23,42,0.14); /* LE VOILE D'UNE SURCOUCHE MODALE, ET IL NE SUIT PAS LE THÈME. C'est le même raisonnement que le papier d'`impression.css` : ce voile ne colore rien, il RETIRE la page du champ le temps qu'on regarde autre chose. Éclairci en thème clair, il cesserait de faire ce travail — une photo posée sur une page encore lisible se regarde deux fois moins bien, et le contour de l'image se perd dans la carte qui est dessous. Il est donc sombre partout, et il n'a pas de contrepartie dans les blocs `dark` et `daltonien` : ce qui se pose dessus (les commandes, la légende) porte `--c-surface`, qui suit le thème pour son propre compte. */ --c-overlay: rgba(15,23,42,0.78); /* ---- Rayons ---- */ --radius: 4px; --radius-sm: 3px; /* CE QUI FLOTTE est plus arrondi que ce qui est posé — les avis aujourd'hui, une modale demain. Ce n'est pas une taille de plus à choisir au cas par cas : 4 px sur une carte de 420 px qui survole le contenu se lit comme un rectangle, et c'est exactement le « vieux » qu'Éric a nommé le 2026-08-12. Ce qui est DANS la page, lui, garde ses 4 px : le contraste entre les deux est ce qui dit lequel des deux flotte. */ --radius-lg: 12px; --radius-pill: 999px; /* ---- Espacement (base 4px) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* ---- Mouvement ---- */ --t-fast: .12s; /* survol, press */ --t-base: .15s; /* focus, toggles */ --t-slow: .2s; /* toasts, panneaux */ /* ---- Typographie ---- */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* ---- Échelle typographique ---------------------------------------------- Sept crans, MESURÉS et non inventés : `app.css` et `auth.css` portent aujourd'hui trente-huit tailles réparties sur dix valeurs — 12, 13, 14, 15, 16, 17, 18, 20, 24, 26 — dont cinq tiennent dans un intervalle de quatre pixels. Ce n'est pas une échelle, c'est une décision reprise à chaque règle, et c'est précisément la dérive que la phase 7 multiplierait par le nombre d'écrans qu'elle dessine. ── POURQUOI CE NOM, ET PAS `--text-*` ──────────────────────────────────── Parce que `DesignSystemRulesTest` (§0, règle 5) cherche la sous-chaîne `var(--mil-fs` sur toute ligne qui règle une taille de police. Une échelle nommée `--text-*` ferait échouer chaque point d'usage — et la réponse évidente, assouplir le test, désarmerait le garde-fou pour de bon. Nommer l'échelle DANS la famille du zoom le laisse mordre sans y toucher : la seule façon de régler une taille reste d'écrire `var(--mil-fs…)`. ── POURQUOI LE MULTIPLICATEUR EST DÉJÀ DEDANS ──────────────────────────── Pour qu'un point d'usage ne puisse pas l'oublier. `var(--mil-fs-3)` porte le zoom ; `16px` ne le porte pas, et l'écran ne le dit qu'à la personne qui a monté le zoom à 150 %, c'est-à-dire à celle qui en avait besoin. Le repli `, 1` compte : `theme-boot` ne pose `--mil-fs` que dans 100–160, donc il est ABSENT chez qui n'a jamais touché au réglage. ── PLUS RIEN N'EST HORS ÉCHELLE (2026-08-09) ───────────────────────────── Il restait ici la liste de ce qui ne tombait sur aucun cran ; elle est vide. `app.css` et `auth.css` lisent un cran à CHAQUE `font-size`, sans un seul `calc` écrit à la main — la seule exception est le contrôle qui règle le zoom, marqué `fs-exempt`, qui doit justement ne pas porter le multiplicateur. Les six tailles que ce paragraphe annonçait ont été arbitrées écran par écran, avec la mesure devant : 15px → cran 3 `body` — la taille de lecture de l'app, qui rejoint celle d'`auth.css` : elles divergeaient sans raison 17px → cran 4 `.bv-lead` — le cran 4 s'appelle « chapeau » 24px → cran 6 `.auth-title` — un `

`, comme celui d'`app.css` 15px → cran 3 `.flash` et `.field-errors` d'`auth.css` — sur un écran d'avant-connexion, le message EST la page 11px → cran 0 `.rail-label`, arrivé APRÈS l'échelle et posé sous son plus petit cran (bonus, pas dans les six d'origine). `.rail-dest` était du même arbitrage ; le libellé sous la marque a été retiré depuis, la ligne reste pour le cran, pas pour lui. Ce qu'il faut retenir pour la suite : une taille neuve s'écrit `font-size: var(--mil-fs-N)`. Le jour où l'écran demande vraiment autre chose, l'arbitrage se fait ici — soit le cran bouge, soit un cran s'ajoute, et dans les deux cas la seule écriture est celle d'en dessous. Pas un nombre en dur de plus. ── L'ÉCHELLE EST À NOUS, ET C'EST L'USAGE QUI LA TIENT (2026-08-10) ────── Elle a longtemps été un AJOUT : `mil-membres` n'en avait pas, et `DesignSystemRulesTest::ADDITIONS` vérifiait des deux côtés qu'elle en restait un, pour que le jour où la source recevrait la sienne le test le dise au lieu de laisser deux échelles diverger en silence. Ce dépôt est mort ; la constante et le test qui la lisait sont partis avec lui, parce qu'il n'y a plus de source dont diverger — et un garde-fou qui n'a plus rien à comparer ne rougit pas, il SAUTE, ce qui est pire. Ce qui tient l'échelle honnête aujourd'hui ne compare rien, il lit : `test_toute_taille_de_police_lit_un_cran_de_l_echelle` exige que CHAQUE `font-size` d'`app.css` et d'`auth.css` soit un `var(--mil-fs-N)`. C'est un garde-fou plus près du problème que l'ancien : les sept crans ne peuvent plus bouger ici sans bouger à l'écran, et une taille neuve ne peut pas naître à côté de l'échelle sans faire rougir la suite. ------------------------------------------------------------------------ */ --mil-fs-0: calc(12px * var(--mil-fs, 1)); /* micro : libellés de rail, mentions */ --mil-fs-1: calc(13px * var(--mil-fs, 1)); /* dense : métadonnées, pastilles */ --mil-fs-2: calc(14px * var(--mil-fs, 1)); /* interface : boutons, champs, rangées */ --mil-fs-3: calc(16px * var(--mil-fs, 1)); /* texte courant */ --mil-fs-4: calc(18px * var(--mil-fs, 1)); /* chapeau, titre de section */ --mil-fs-5: calc(20px * var(--mil-fs, 1)); /* titre d'écran secondaire */ --mil-fs-6: calc(26px * var(--mil-fs, 1)); /* titre d'écran */ } :root[data-theme="dark"] { color-scheme: dark; --c-bg: #16181d; --c-surface: #1e2127; --c-surface-2: #242830; --c-border: #30343d; --c-border-strong: #3c4250; --c-text: #e4e6ea; --c-text-mid: #aab0b8; --c-text-muted: #7d838d; --c-hover-bg: #262a32; --c-section-bar: #22262e; --c-success: #2cb5a5; --c-success-soft: #10271f; --c-success-text: #6ee7b7; --c-warning: #fbbf24; --c-warning-soft: #2e2410; --c-warning-text: #fcd9a3; --c-danger: #f06b6b; --c-danger-soft: #2c1717; --c-danger-text: #fca5a5; --c-shadow: rgba(0,0,0,0.40); --c-shadow-strong: rgba(0,0,0,0.55); } /* Palette daltonien (Okabe-Ito) : danger → magenta, jamais confondu avec le vert/teal du succès. Active via :root[data-palette="cb"]. La moitié MARQUE de cette palette vit dans `brand.css`. */ :root[data-palette="cb"] { --c-success: #008060; --c-success-soft: #e0f3ed; --c-success-text: #005a43; --c-warning: #e69f00; --c-warning-soft: #fbf0d6; --c-warning-text: #785400; --c-danger: #c2186b; --c-danger-soft: #fbe2ef; --c-danger-text: #8f0f4e; } :root[data-theme="dark"][data-palette="cb"] { --c-success: #19b58e; --c-success-soft: #0c2b24; --c-success-text: #74e6c4; --c-warning: #f0b94a; --c-warning-soft: #2e2410; --c-warning-text: #f5d79a; --c-danger: #f25aa6; --c-danger-soft: #2e1622; --c-danger-text: #f7a8cf; }