/* ============================================================================ HAULITH — jetons de design. LES NOMS SONT CEUX DE `haulith-app.html`, la maquette de référence, et ce fichier est le SEUL endroit du dépôt où une valeur brute a le droit d'exister. Le renommage n'est pas cosmétique : l'ancien jeu (`--void`, `--panel`, `--ink`, `--e-4`, `--t-base`) ne recouvrait pas celui de la maquette — quatre paliers d'élévation contre six, sept tailles contre neuf — et deux systèmes de noms pour une seule décision de design, c'est la garantie que l'un des deux devient faux. Les anciens noms survivent en ALIAS en bas de ce fichier, le temps que les composants migrent ; ils partent avec le dernier composant qui les cite. Règle qui gouverne tout le reste : **la couleur est réservée aux anomalies.** Le danger colore, le reste non. ========================================================================= */ :root { color-scheme: dark; /* ====================================================================== NIVEAU 1 — LES PRIMITIVES. Une rampe, et rien d'autre. AUCUN COMPOSANT N'A LE DROIT D'Y TOUCHER. Elles n'ont pas de sens métier : `--gris-2` ne dit pas si c'est un fond de ligne ou un fond de panneau. Le jour où « critique » passe de rouge à orange, on change UNE ligne du niveau 2 ; si les composants pointaient sur `--rouge-4`, il faudrait les visiter un par un. La couche C de Stylelint fait échouer `color: var(--gris-3)` pour cette raison, et pour elle seule. DEUX NIVEAUX, PAS TROIS. L'orthodoxie en prescrit un troisième, par composant. Sur un dépôt édité par un agent, chaque niveau de plus est une occasion de plus de référencer la mauvaise couche. VALEURS EN oklch(), et ce n'est pas de la mode. Trois gains concrets ici : — la clarté (L) est perceptuellement honnête, donc changer une teinte ne casse plus le contraste en silence ; — les variantes se CALCULENT au lieu d'être devinées à l'œil ; — le gamut P3 devient atteignable sans réécrire la palette. Contrepartie assumée : `oklch(0.2235 0.0121 260.7)` ne dit rien à l'œil. D'où l'équivalent hexadécimal en commentaire sur CHAQUE ligne, et la page `public/styleguide.html` qui les rend toutes. */ /* ---- neutres : la rampe d'élévation, du plus loin au plus près -------- LE CHÂSSIS v3 : teinte 75°, chroma 0,006 — sous le tiers du chroma de la couleur de sens la moins chromatique, la règle que `check-separation.mjs` mesure à chaque `verify`. Douze gris au lieu de dix : la maquette v3 sépare la bordure neutre (gris-6) de la bordure de contrôle (gris-7), et la bordure survolée (gris-8) de l'encre atténuée (gris-9) — quatre rôles qui partageaient deux primitives. La leçon de la rampe précédente tient toujours : ΔE2000 SE COMPRIME DANS LES NOIRS, deux paliers sous 2,3 sont deux noms pour une seule couleur. Deux paliers de la v3 étaient exactement là — mesurés à 2,2 et 2,3 tout juste — et montent de 0,2 et 0,3 point de clarté, le minimum qui repasse le seuil. Les intervalles restent vérifiés par `check-separation.mjs`, pas supposés. */ --gris-0: oklch(14% 0.006 75deg); /* #0b0907 */ --gris-1: oklch(19.05% 0.006 75deg); /* #151411 */ --gris-2: oklch(22.55% 0.006 75deg); /* #1e1b19 */ --gris-3: oklch(25.75% 0.006 75deg); /* #252320 */ --gris-4: oklch(28.8% 0.006 75deg); /* #2d2a28 */ --gris-5: oklch(31.95% 0.006 75deg); /* #35322f */ --gris-6: oklch(34% 0.006 75deg); /* #3a3835 */ --gris-7: oklch(58% 0.006 75deg); /* #7c7a76 */ --gris-8: oklch(66% 0.007 75deg); /* #95928e */ --gris-9: oklch(80.2% 0.008 75deg); /* #c1beb9 */ --gris-10: oklch(85.5% 0.005 75deg); /* #d1cfcc */ --gris-11: oklch(93% 0.004 75deg); /* #e9e7e5 */ /* ---- l'accent : la couleur de la marque ----------------------------- LE VIOLET EST TOMBÉ LE 2026-08-25, sur décision du propriétaire : « le violet devient le jaune, comme sur la page login ». Le logo est un X d'or — #fbbd30 décodé du fichier — et `--ambre-4` valait déjà #fac131. La marque et l'accent ne font donc plus qu'un. CE QUE ÇA COÛTE, ET QUI N'EST PAS RATTRAPÉ ICI. Le commentaire précédent avait mesuré le côté chaud et l'avait écarté pour deux raisons ; la première ne tient pas au réglage retenu, la seconde tient toujours : — « ΔE 3,7 de Prudence » valait à clarté et chroma constants, c'est-à- dire en tournant seulement la teinte du violet. Avec la clarté et le chroma PROPRES à l'ambre, `check-separation.mjs` mesure **10,9** contre `--status-warning`, au-dessus du seuil de 10. Juste au-dessus. — « deux noms pour une seule couleur » reste vrai : `--amber` marque le waypoint, la seule écriture vers le jeu, et l'accent lui est maintenant IDENTIQUE. La barrière ne le voit pas — elle ne compare pas `--accent`. Si le waypoint doit redevenir distinct, c'est LUI qui doit changer de famille, pas l'accent. Le contraste, lui, s'améliore : l'accent passe de 6,73 à 7,73 sur `--surface-hover`, et l'encre qu'il porte de 6,55 à 12,06. */ /* ---- la rampe de statut --------------------------------------------- Le chroma MONTE avec la gravité : la bande majoritaire doit être la plus discrète, la rare la plus vive. Mesuré sur 200 lignes réelles — Prudence 58 %, Risqué 28 %, Sûr 10 %, Dangereux 3 %. Les valeurs v3 corrigent les deux fautes que la maquette précédente remettait : Prudence n'est plus un jaune-orangé collé à l'ambre du waypoint, et Dangereux est monté en clarté au lieu d'être la bande la plus sombre. Chacune est au plafond de chroma que le gamut sRGB autorise à sa clarté. La séparation reste MESURÉE à chaque `verify` par `check-separation.mjs` — aucun chiffre recopié ici. */ --vert-4: oklch(80.5% 0.112 152deg); /* #86d49b */ --ocre-4: oklch(82% 0.098 92deg); /* #dbc378 */ --orange-4: oklch(80.5% 0.12 58deg); /* #f9ab6e */ --rouge-4: oklch(81% 0.107 28deg); /* #ffa69a */ /* Ambre — le waypoint, la seule écriture vers le jeu, ET l accent depuis le 2026-08-25. Jamais le danger. */ --ambre-4: oklch(84% 0.16 85deg); /* #fac131 */ /* Le cran de survol de l accent : plus clair, moins sature — le rapport que le violet tenait entre ses niveaux 4 et 3. Le chroma est au plafond que le gamut sRGB autorise a 88 % : 0.138 en sortait. */ --ambre-3: oklch(88% 0.131 85deg); /* #ffd16a */ /* ---- LES ENCRES PÂLES : ce qui s'écrit SUR un fond déjà teinté -------- Une pastille cyan porte du texte sur `--accent-bg`, une pastille de sécurité sur `--surface`. L'encre de sens y serait juste assez lisible et beaucoup trop criarde : la couleur est réservée aux anomalies, et une pastille de sécurité n'en est pas une. Une seule pâle par famille — la leçon des dix pâles indiscernables de l'ancienne maquette tient toujours. `--ambre-2` sert DEUX rôles depuis que l'accent est ambre : la pâle de la famille et celle de l'accent — c'est la même couleur, il serait faux d'en déclarer deux. */ --ambre-2: oklch(86.97% 0.0914 82.4deg); /* #f2cf8e */ --vert-2: oklch(85.52% 0.0794 151.9deg); /* #a9dfb6 */ --rouge-2: oklch(79.59% 0.0978 19.5deg); /* #f5a3a3 */ /* Variation de marché : NE DOIT PAS se confondre avec le danger. Une hausse n'est pas un « trajet sûr », le teal vit loin du vert de statut. La baisse, elle, n'a plus de couleur du tout — voir `--baisse` au niveau 2. `--mauve-4` a longtemps attendu un preneur ; c'est la carte, qui avait besoin d'une famille libre pour son itinéraire — voir `--itineraire`. Elle n'est plus orpheline. */ --menthe-4: oklch(82% 0.139 195deg); /* #0bdfe0 */ --mauve-4: oklch(73.49% 0.0628 342.5deg); /* #c69ab4 */ /* ====================================================================== NIVEAU 2 — LA COUCHE SÉMANTIQUE. La SEULE que les composants citent. Nommage par rôle, jamais par apparence — `--status-critical`, jamais `--rouge`, parce que le second devient un mensonge le jour où critique passe à l'orange. ====================================================================== */ /* ---- surfaces : UNE ÉCHELLE D'ÉLÉVATION, PAS SIX GRIS ----------------- EN SOMBRE, L'ÉLÉVATION SE FAIT PAR LA LUMINANCE. Une ombre sombre sur un fond sombre ne porte aucun signal : elle est invisible. Ce qui monte est PLUS CLAIR, ce qui recule est plus sombre. Les ombres restent pour ce qui SORT du plan — une modale, un popover —, pas pour dire « je suis un peu au-dessus ». */ --surface-sunken: var(--gris-0); /* le rail, le fond de la carte */ --surface-base: var(--gris-1); /* la page, l'en-tête collant */ --surface: var(--gris-2); /* une carte, un bouton, un champ */ --surface-raised: var(--gris-3); /* choisi, survolé, ou qui flotte */ --surface-overlay: var(--gris-4); /* popover, palette, calque carte */ --surface-hover: var(--gris-5); /* ce qui est sous le curseur */ /* ---- bordures -------------------------------------------------------- QUATRE RÔLES, PAS UNE ÉCHELLE. `--border-subtle` sépare (décor pur), `--border-default` cercle un badge non interactif, `--border-control` limite un CONTRÔLE et tient à ce titre le 3:1 de WCAG 1.4.11. Ne baisse pas `--border-control` parce que « c'est trop clair » : c'est ce qui sépare un champ d'un morceau de texte pour qui voit mal. */ --border-subtle: var(--gris-3); --border-default: var(--gris-6); --border-control: var(--gris-7); --border-control-hover: var(--gris-8); /* ---- encres ---------------------------------------------------------- */ --text-primary: var(--gris-11); --text-secondary: var(--gris-10); --text-muted: var(--gris-9); /* ---- accent ---------------------------------------------------------- */ --accent: var(--ambre-4); --accent-strong: var(--ambre-3); /* Le texte posé SUR l'accent. Il doit rester lisible quand l'accent change : c'est un rôle, pas une couleur choisie à côté. */ --accent-contrast: var(--gris-0); --accent-bg: color-mix(in oklab, var(--ambre-4) 17%, transparent); --accent-border: color-mix(in oklab, var(--ambre-4) 52%, transparent); --accent-soft: var(--ambre-2); --amber: var(--ambre-4); --amber-bg: color-mix(in oklab, var(--ambre-4) 17%, transparent); --amber-border: color-mix(in oklab, var(--ambre-4) 55%, transparent); --amber-soft: var(--ambre-2); /* ---- la rampe de sûreté : un chiffre du jeu, pas une bande ------------ La sûreté va de 1.0 à −1.0 et le joueur la lit déjà en dégradé dans son client. C'est donc une RAMPE, pas quatre paliers : la teinte descend du vert au rouge à mesure que le chiffre tombe, chaque cran au plafond de chroma que le gamut autorise. Jamais d'aplat — la sûreté reste un chiffre écrit. Sous 0.0 la teinte ne peut plus rougir (le rouge pur est à 28° et on y est) : l'aggravation passe par la graisse, pas par la couleur. Pas de `--surete-03` : 0.3 et 0.2 partagent un cran, comme dans le client du jeu. */ --surete-06: oklch(80.5% 0.112 152deg); /* #86d49b — 1.0 à 0.6 */ --surete-05: oklch(83% 0.13 105deg); /* #d4cc60 — 0.5 */ --surete-04: oklch(84% 0.125 75deg); /* #fabe67 — 0.4 */ --surete-02: oklch(83% 0.113 58deg); /* #ffb57c — 0.3 à 0.2 */ --surete-01: oklch(82% 0.106 42deg); /* #ffad8d — 0.1 */ --surete-00: var(--rouge-4); /* 0.0 et en dessous */ /* ---- statuts : UNE seule échelle sémantique pour le danger ------------ LES CHIFFRES DE SÉPARATION NE SONT PAS ÉCRITS ICI, et c'est délibéré : un chiffre recopié dans un commentaire ne se vérifie jamais. La séparation est MESURÉE à chaque `verify` par `check-separation.mjs`, les contrastes par `check-contraste.mjs`. Pour les voir : `npm run separation` et `npm run contraste`. */ --status-good: var(--vert-4); --status-warning: var(--ocre-4); --status-serious: var(--orange-4); --status-critical: var(--rouge-4); /* PAS DE `--status-good-bg`. La maquette le déclare et ne l'emploie NULLE PART — vérifié, une seule occurrence dans tout le fichier, sa propre déclaration. Un jeton jamais employé est du poids mort, et le recensement de `check-html-tokens.mjs` existe pour le dire. Il reviendra dans le commit qui en aura besoin, pas avant. */ --status-critical-bg: color-mix(in oklab, var(--rouge-4) 17%, transparent); /* Les LIMITES teintées d'une pastille de statut. Elles ne sont pas des limites de contrôle : une pastille de sécurité ne se clique pas, elle n'est donc pas soumise au 3:1 de WCAG 1.4.11. */ --status-good-border: color-mix(in oklab, var(--vert-4) 40%, transparent); --status-warning-border: color-mix(in oklab, var(--ocre-4) 40%, transparent); --status-critical-border: color-mix( in oklab, var(--rouge-4) 45%, transparent ); --status-good-soft: var(--vert-2); --status-critical-soft: var(--rouge-2); /* Le VOILE CLAIR : la croix d'un filtre actif, posée sur une pastille déjà teintée. Ni une surface de la rampe (elle doit laisser voir la teinte en dessous), ni une bordure. */ --overlay-soft: color-mix(in oklab, var(--gris-11) 9%, transparent); --overlay-soft-hover: color-mix(in oklab, var(--gris-11) 22%, transparent); /* ---- variation de marché : le prix, pas le péril --------------------- Une sortie d'argent n'est pas une anomalie : c'est la moitié normale d'un compte, et le signe moins le dit déjà. Le mauve part — `--baisse` s'écrit en encre secondaire. */ --hausse: var(--menthe-4); --baisse: var(--text-secondary); /* ---- l'itinéraire tracé sur la carte --------------------------------- LE TRAJET AVAIT LA COULEUR DE TOUT LE RESTE. Il se dessinait en `--accent-strong`, exactement la teinte des halos et des nœuds sans bande : sur un globe de 1 357 points, la ligne qu'on est venu voir se confondait avec le décor. Il lui faut une famille à lui, et une seule reste libre : le vert, l'ambre, l'orange et le rouge sont la rampe de danger — et l'ambre est aussi l'accent depuis le 2026-08-25 —, la menthe est la hausse de prix. `--mauve-4` était déclarée « le temps que la refonte confirme qu'aucun écran ne la réclame » — cet écran la réclame. */ --itineraire: var(--mauve-4); /* Le VOILE des panneaux modaux. Trois composants en écrivaient chacun leur version — trois opacités pour le même geste, sur le même écran. */ --voile: color-mix(in oklab, var(--gris-0) 72%, transparent); /* ---- empilement : UNE ÉCHELLE, PAS DES NOMBRES ------------------------ LA MAQUETTE N'A AUCUN JETON D'EMPILEMENT : elle écrit cinq z-index en dur (5, 60, 90, 95, 100). C'est précisément ce que ce dépôt a corrigé — personne ne peut dire si un nouveau panneau vaut 35 ou 45 sans les lire tous, et c'est ainsi qu'on obtient un voile DEVANT le panneau qu'il assombrit. Cinq paliers nommés par ce qui s'y trouve ; l'écart de 10 laisse la place d'insérer sans tout renuméroter. */ --z-fond: 2; /* ce qui se colle dans le flux : en-tête de colonne */ --z-flottant: 20; /* barre d'outils, dock — au-dessus du contenu */ --z-popover: 25; /* un popover ancré sur son déclencheur */ --z-voile: 30; /* le fond assombri d'un panneau */ --z-panneau: 31; /* le panneau lui-même, juste au-dessus de son voile */ --z-modale: 40; /* confirmation : elle passe devant un panneau ouvert */ --z-modale-avant: 41; --z-palette: 60; /* ⌘K — rien ne passe devant */ /* ---- élévation : trois ombres, pour ce qui SORT du plan --------------- */ --elev-2: 0 18px 40px rgb(0 0 0 / 50%); /* popover */ --elev-3: 0 30px 70px rgb(0 0 0 / 60%); /* palette */ --elev-4: 0 40px 90px rgb(0 0 0 / 60%); /* calque carte */ /* ---- espacement ------------------------------------------------------ */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; /* ---- rayons ---------------------------------------------------------- */ --r1: 4px; --r2: 7px; --r3: 11px; --r-pill: 999px; /* ---- typographie ----------------------------------------------------- Onze échelons : la v3 insère un grand corps de tuile (30) entre le titre d'écran et le chiffre du héros (44), et le mode vol prend le sien (64). `--t3` (13,5 px) reste le corps. */ --t0: 10.5px; /* étiquettes de colonne, unités, mentions minuscules */ --t1: 11.5px; --t2: 12.5px; --t3: 13.5px; /* le corps */ --t4: 15px; --t5: 17px; /* titre de carte */ --t6: 20px; /* titre d'écran */ --t7: 26px; --t8: 30px; /* valeur de tuile */ --t9: 44px; /* le chiffre qui porte la décision */ --t10: 64px; /* le mode vol, lisible à un mètre */ --gras-moyen: 550; --gras-titre: 640; --gras-fort: 700; /* ---- mouvement — voir docs/MOTION.md --------------------------------- UNE SEULE COURBE. Le CSS d'avant n'avait pas une seule `cubic-bezier` — tout était en courbes par défaut, et c'était une part mesurable du « pas smooth ». La maquette en pose une, employée partout ; trois courbes pour trois usages étaient une distinction que personne ne voyait. */ --dur-fast: 0.1s; /* survol, changement de couleur */ --dur: 0.16s; /* ce qui se déplace */ --ease: cubic-bezier(0.2, 0.7, 0.35, 1); /* ---- piles de caractères --------------------------------------------- La chasse fixe porte les montants du héros et les sous-titres `A → B` : un chiffre qui change ne doit pas faire bouger ses voisins. */ --pile-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* ---- gabarit --------------------------------------------------------- Le gabarit v3 : rail · contenu · panneau. Le panneau latéral porte le détail d'une course (phase 4) — 480-560 px, le gabarit « détail complet » ; `--panneau-etroit` est sa largeur sous 1600 px, la bascule est une media query chez le consommateur, un jeton ne sait pas lire la fenêtre. `--ligne-h` et `--ligne-pad` restent des constantes de mise en page — la densité réglable a été retirée. */ --rail: 220px; --top: 46px; --panneau: clamp(400px, 30vw, 520px); --panneau-etroit: clamp(360px, 32vw, 440px); --ligne-h: 38px; --ligne-pad: 10px; /* La marge d'une ligne À DEUX ÉTAGES. Elle n'est pas un réglage de confort : `--ligne-pad` suppose une cellule d'une seule ligne, et l'appliquer à une cellule qui en porte deux double le coût — mesuré sur le tableau des courses, 100,3 px par rangée contre 53,8 dans la maquette, soit six courses à l'écran au lieu de dix-sept. */ --ligne-pad-duo: 5px; } /* UN SEUL THÈME. Le thème clair est retiré — décision du propriétaire. * Deux thèmes, c'était deux vérités à tenir d'accord sur chaque écran : en * sombre l'élévation se fait par la luminance, en clair par l'ombre, et les * écrans n'avaient pas à savoir lequel s'appliquait. C'était vrai, et c'était * fragile — chaque couleur, chaque ombre devait être vérifiée deux fois. */ /* ---- règles de base ------------------------------------------------------ */ * { box-sizing: border-box; } /* LE FOND EST PLAT. Deux dégradés radiaux teintaient la page — un cyan en haut à droite, un violet en bas à gauche. Ils ne portaient aucune information et dépensaient du chroma sur la seule surface qui doit n'en porter aucun. La maquette pose `background: var(--surface-base)`, nu. */ body { margin: 0; color: var(--text-primary); background: var(--surface-base); font: var(--t3) / 1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } /* CHIFFRES TABULAIRES PARTOUT. Haulith est une application de colonnes de nombres qui se mettent à jour : des chiffres qui changent de largeur à chaque tick sont rédhibitoires. */ .n, .num, td, th, .val, input[type="number"] { font-variant-numeric: tabular-nums; } /* Jamais la couleur seule : chaque statut porte aussi sa forme. LA COULEUR PASSE SUR L'ÉLÉMENT, LA FORME SUR LE PSEUDO. L'inverse était un demi-travail : `color` n'était posé que sur le `::before`, donc le MOT — « Prudence », « Risqué », « Dangereux » — restait en encre ordinaire, et toute l'échelle de danger tenait dans un glyphe de six pixels. */ .st-good { color: var(--status-good); } .st-warning { color: var(--status-warning); } .st-serious { color: var(--status-serious); } .st-critical { color: var(--status-critical); } .st-good::before { content: "● "; } .st-warning::before { content: "◆ "; } .st-serious::before { content: "▲ "; } .st-critical::before { content: "■ "; } /* LES BANDES NUES — sans symbole. `st-*` préfixe une forme, ce qui est juste dans une phrase et encombrant dans une pastille de trois caractères ou sur un nombre de sauts. La redondance non colorée existe partout où on les emploie : le nombre de sauts, ou le statut de sécurité, se lisent sans la couleur. */ .bande-good { color: var(--status-good); } .bande-warning { color: var(--status-warning); } .bande-serious { color: var(--status-serious); } .bande-critical { color: var(--status-critical); } .bande-inconnu { color: var(--text-muted); } /* Focus clavier visible partout, sans exception. */ :where(a, button, input, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r1); } [hidden] { display: none !important; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: var(--surface-hover); border-radius: var(--r2); border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--border-control); background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } /* prefers-reduced-motion : fondu court ou rien, sans rien casser. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }