/* ============================================================ Maint Up CRM — jetons de design (refonte v2) Source de vérité. Ne pas écrire de couleur en dur ailleurs. PORTÉE — les jetons ne sont PAS sur :root. Ils sont portés par l'attribut `data-v2`, posé sur la racine de chaque écran refait. Les redéfinir sur :root aujourd'hui restylerait tout le CRM d'un coup, en production, avant qu'un seul écran ne soit refait. LE PRÉFIXE --v2- — cinq jetons, et cinq seulement, le portent : --v2-bg --v2-text --v2-text-2 --v2-text-3 --v2-accent Ces cinq noms existent aussi dans styles.css, avec d'autres valeurs et parfois un rôle OPPOSÉ. Le cas dangereux est `--accent` : ici c'était l'olive #7d640d, une encre ; dans styles.css c'est l'ambre #F5D547, un aplat, utilisé comme fond une trentaine de fois. Poser `data-v2` sur un bloc contenant encore de l'ancien balisage aurait viré ces aplats à l'olive — sans erreur console, sans rien pour prévenir. Le préfixe change une vigilance permanente pendant sept lots en impossibilité (Claude Design, 07/08/2026). Les autres jetons v2 n'entrent en collision avec rien et gardent leur nom : --accent-bright, --accent-soft, --panel, --stroke, --inset, --pos, --neg-fg, --track, --r-md, --font… Au dernier lot, quand styles.css n'aura plus de jetons, ce bloc remonte sur :root et le préfixe peut tomber d'un seul remplacement. Deux corrections par rapport au tokens.css du handoff, dictées par Claude Design le 07/08/2026 : --pos #17805126 → rgba(23,128,81,.15) (coquille) --v2-text-2 #64686e → #55595f (hiérarchie trop serrée avec --v2-text-3, 4 % d'écart) ============================================================ */ /* ── Communs aux deux thèmes ──────────────────────────────── */ /* 08/09/2026 : les jetons sont AUSSI portés par :root (clair par défaut, sombre par [data-app-theme="dark"] sur ). Tous les écrans sont refaits ; ce qui vit hors d'un [data-v2] — la modale, les toasts, la palette ⌘K, la fiche, la bannière de mise à jour — lisait `var(--z-modale)` ou `var(--v2-text)` dans le vide : z-index en auto, modale derrière le contenu (« un filtre bizarre », Joris). [data-v2] garde la précédence par spécificité. */ :root, [data-v2] { /* La pile système du handoff est remplacée par les polices de la marque, déjà hébergées en local (décision Claude Design). Le handoff ne prévoit qu'un `--font` ; le projet en utilise deux, d'où l'ajout de `--font-display` pour les titres. */ --font: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-display: 'Archivo', 'Manrope', -apple-system, system-ui, sans-serif; --r-lg: 26px; --r-md: 18px; --r-sm: 12px; --r-xs: 9px; } /* ── Thème clair ──────────────────────────────────────────── */ :root, [data-app-theme="light"] [data-v2], [data-app-theme="light"][data-v2] { --v2-bg: #eeedea; --glow-a: rgba(245,213,71,.22); --glow-b: rgba(120,150,190,.16); --panel: rgba(255,255,255,.66); --panel-2: rgba(255,255,255,.42); --panel-solid: #fff; --inset: rgba(0,0,0,.035); --stroke: rgba(20,20,25,.075); --stroke-2: rgba(20,20,25,.05); --stroke-3: rgba(20,20,25,.17); /* le cran foncé — remplace --border-2 */ /* ── Les cinq plans de l'application ──────────────────────────── Vingt-six niveaux de z-index cohabitaient, dont 99999 et 100000 : à chaque fois qu'un élément passait derrière un autre, quelqu'un ajoutait un cran plus haut. Le suivant n'aurait plus eu d'échappatoire (audit du 02/09/2026). Cinq plans nommés, du plus bas au plus haut. Les superpositions internes à un bloc gardent leurs petites valeurs (1 à 6) : elles sont locales et ne concurrencent rien. */ --z-collant: 40; /* en-têtes et barres qui restent au défilement */ --z-coque: 60; /* le rail, l'en-tête d'application */ --z-fiche: 100; /* le voile et la fiche par-dessus */ --z-modale: 300; /* modales, panneaux, messagerie, toasts */ --z-alerte: 900; /* ce qui doit passer devant tout : erreurs, suggestions de saisie, menus flottants */ --v2-text: #16171a; --v2-text-2: #55595f; --v2-text-3: #6b6f76; --v2-accent: #7d640d; --accent-bright: #f5d547; --sur-accent: #1b1a12; --sur-verre: #f4f4f5; --sur-tone: #fdfdfb; /* encre posée SUR l'aplat d'accent ; ardoise et prune la renversent en clair, voir plus bas */ --accent-soft: rgba(245,213,71,.26); /* Les cinq encres de statut ont été assombries de 4 à 14 % par rapport aux maquettes (Claude Design, 07/08/2026). Dans les maquettes elles se posaient sur un panneau de verre plus clair que le fond plein du CRM : le rapport de contraste réel tombait entre 3,59 et 4,28 sur du texte de 12,5 px. Mesurées sur le vrai fond, elles sont maintenant toutes au-dessus de 4,5:1. Ne pas les rétablir depuis tokens.css du handoff. */ --pos: rgba(23,128,81,.15); --pos-fg: #136d45; --neg-fg: #a74137; --neg-soft: rgba(193,75,64,.11); --warn-fg: #8a5510; --warn-soft: rgba(224,138,46,.12); --info-fg: #3160b4; --info-soft: rgba(53,104,196,.11); --on-tone: #fff; --alt-fg: #664cc2; --alt-soft: rgba(106,79,201,.12); /* `--purple` est proposé par la palette des colonnes de kanban (TAG_COLORS, data.js:13) mais n'était défini nulle part : choisir « violet » donnait du bleu, la valeur de repli. Il prend la teinte violette du système plutôt qu'une septième couleur inventée. */ --purple: var(--alt-fg); --teal-fg: #0d6b78; --teal-soft: rgba(14,111,125,.12); --rose-fg: #b0356e; --rose-soft: rgba(176,53,110,.12); /* nature « chantier » de l'agenda (Joris, 09/09 : l'orange était « super moche ») */ --shadow: 0 1px 1px rgba(0,0,0,.03), 0 10px 30px -12px rgba(0,0,0,.14); --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --track: rgba(20,20,25,.07); } /* ── Thème sombre ─────────────────────────────────────────── */ [data-app-theme="dark"], [data-app-theme="dark"] [data-v2], [data-app-theme="dark"][data-v2] { --v2-bg: #0c0d0f; --glow-a: rgba(245,213,71,.12); --glow-b: rgba(90,130,180,.13); --panel: rgba(255,255,255,.055); --panel-2: rgba(255,255,255,.032); --panel-solid: #17191c; --inset: rgba(255,255,255,.04); --stroke: rgba(255,255,255,.085); --stroke-2: rgba(255,255,255,.055); --stroke-3: rgba(255,255,255,.23); --v2-text: #f1f2f4; --v2-text-2: #9ca1a9; --v2-text-3: #868c95; --v2-accent: #f5d547; --accent-bright: #f5d547; --sur-accent: #1b1a12; --sur-verre: #f4f4f5; --sur-tone: #16171a; /* encre posée SUR l'aplat d'accent ; ardoise et prune la renversent en clair, voir plus bas */ --accent-soft: rgba(245,213,71,.15); --pos: rgba(52,199,132,.16); --pos-fg: #46c98c; --neg-fg: #f0776a; --neg-soft: rgba(240,119,106,.14); --warn-fg: #f0a04e; --warn-soft: rgba(240,160,78,.16); --info-fg: #7aa7f5; --info-soft: rgba(122,167,245,.14); --on-tone: #16171a; --alt-fg: #a892f0; --alt-soft: rgba(168,146,240,.15); --purple: var(--alt-fg); --teal-fg: #4fc3d4; --teal-soft: rgba(79,195,212,.15); --rose-fg: #f28fc0; --rose-soft: rgba(242,143,192,.16); --shadow: 0 1px 1px rgba(0,0,0,.3), 0 14px 40px -16px rgba(0,0,0,.7); --shadow-sm: 0 1px 2px rgba(0,0,0,.25); --track: rgba(255,255,255,.08); } /* ── Le rail est TOUJOURS sombre, dans les deux thèmes ──────── Une seule règle, hors des blocs de thème. Piège n° 2 du handoff : `--rail-fg` défini dans le seul bloc clair rendait `stroke="var(--rail-fg)"` invalide en thème sombre, et les icônes disparaissaient sans la moindre erreur console. */ :root, [data-v2] { --rail-fg: rgba(255,255,255,.62); --rail-line: rgba(255,255,255,.1); --rail-bg: #1b1d21; } /* Palettes alternatives — livrées, pas branchées : le handoff demande « ambre seule d'abord ». */ [data-v2][data-palette="ardoise"] { --rail-bg: #191f2e; } [data-v2][data-palette="foret"] { --rail-bg: #10241e; } [data-v2][data-palette="prune"] { --rail-bg: #221926; } [data-app-theme="light"] [data-v2][data-palette="ardoise"] { --sur-accent: #fdfdfb; --v2-accent: #365087; --accent-bright: #4f6fb5; --accent-soft: rgba(79,111,181,.14); --glow-a: rgba(79,111,181,.16); } [data-app-theme="dark"] [data-v2][data-palette="ardoise"] { --v2-accent: #8aa6e8; --accent-bright: #8aa6e8; --accent-soft: rgba(138,166,232,.15); --glow-a: rgba(138,166,232,.12); } [data-app-theme="light"] [data-v2][data-palette="foret"] { --v2-accent: #116750; --accent-bright: #1d9b74; --accent-soft: rgba(29,155,116,.14); --glow-a: rgba(29,155,116,.15); } [data-app-theme="dark"] [data-v2][data-palette="foret"] { --v2-accent: #4ccb9d; --accent-bright: #4ccb9d; --accent-soft: rgba(76,203,157,.14); --glow-a: rgba(76,203,157,.11); } [data-app-theme="light"] [data-v2][data-palette="prune"] { --sur-accent: #fdfdfb; --v2-accent: #6e3763; --accent-bright: #9c5591; --accent-soft: rgba(156,85,145,.14); --glow-a: rgba(156,85,145,.16); } [data-app-theme="dark"] [data-v2][data-palette="prune"] { --v2-accent: #cb8ec0; --accent-bright: #cb8ec0; --accent-soft: rgba(203,142,192,.15); --glow-a: rgba(203,142,192,.12); } /* ── États — jamais les défauts du navigateur ─────────────── */ [data-v2] ::selection { background: var(--accent-soft); } [data-v2] a { color: var(--v2-accent); text-decoration: none; } /* Le survol souligne, il ne change pas d'encre. Il posait `color: var(--accent-bright)` — l'ambre #f5d547 sur le fond clair #eeedea, soit 1,5:1 : le lien devenait illisible au moment précis où on le vise. En thème sombre --v2-accent vaut déjà #f5d547, l'éclaircissement n'y apportait rien. Trouvé par jetons-v2.test.js. */ [data-v2] a:hover { text-decoration: underline; } /* L'anneau de focus est un TRAIT, donc une encre : il suit `--v2-accent` et non `--accent-bright`. Il posait l'ambre #f5d547, soit 1,5:1 sur le fond clair là où un indicateur de focus demande 3:1 — même faute encre/aplat que le survol de lien juste au-dessus. Un seul jeton suffit pour les deux thèmes : `--v2-accent` vaut l'olive #7d640d en clair (4,85:1) et l'ambre #f5d547 en sombre, où c'est justement la bonne teinte. Pas de branche de thème, et la signature ambre reste intacte de nuit. (Claude Design, 07/08/2026 — vérifié par jetons-v2.test.js.) */ [data-v2] :focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; border-radius: var(--r-xs); } [data-v2] svg { stroke-linecap: round; stroke-linejoin: round; } /* ── Typographie : 7 tailles, pas une de plus ─────────────── */ [data-v2] .t-page { font-family: var(--font-display); font-size: 25px; font-weight: 680; letter-spacing: -.035em; } [data-v2] .t-kpi { font-family: var(--font-display); font-size: 25px; font-weight: 640; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } [data-v2] .t-card { font-size: 15px; font-weight: 640; letter-spacing: -.02em; } [data-v2] .t-body { font-size: 13.5px; font-weight: 550; letter-spacing: -.01em; } [data-v2] .t-sec { font-size: 12.5px; font-weight: 550; } [data-v2] .t-meta { font-size: 11.5px; font-weight: 550; } [data-v2] .t-over { font-size: 11px; font-weight: 640; letter-spacing: .08em; text-transform: uppercase; } /* Toute colonne de chiffres, sinon elles tremblent au défilement. */ [data-v2] .num { font-variant-numeric: tabular-nums; }