/* ═══════════════════════════════════════════════════════════ IMRI XI — jetons de marque Planche validée : clair = bleu, sombre = rouge. La couleur signature CHANGE avec le thème. C'est voulu, mais ça veut dire qu'un bouton principal n'a pas la même couleur selon le visiteur — d'où `--imri-on-signature`, qui bascule. Trois états de thème, et pas deux : :root → clair (défaut) @media (prefers-color-scheme: dark) → sombre système :root[data-theme="dark"] → sombre choisi Sans le bloc du milieu, un visiteur en sombre système — qui n'a fait aucun choix, donc rien sur — recevrait le thème clair. Les valeurs marquées DÉRIVÉ ne sont pas dans la planche : je les ai calculées en attendant l'étape 0 de ChatGPT. Contrastes WCAG vérifiés, notés en commentaire. ═══════════════════════════════════════════════════════════ */ :root { /* ── LIVRÉ — mode clair ── */ --imri-marine: #0A1E5E; --imri-bleu: #154FAF; --imri-ciel: #5FAEEA; --imri-glace: #D6F1FF; --imri-bg: #F1F5FB; --imri-text-1: #0F172A; /* 16.65:1 AAA */ --imri-signature: #154FAF; /* blanc dessus : 5.85:1 */ --imri-secondary: #0A1E5E; /* blanc dessus : 14.07:1 */ /* ── DÉRIVÉ ── */ --imri-surface: #FFFFFF; /* LIVRÉ — carte */ --imri-surface-2: #E7EEF9; /* LIVRÉ — en-tête de bloc */ --imri-text-2: #334966; /* 8.40:1 AAA */ /* 4.53:1 sur le fond de page, mais 4.25:1 sur `--imri-surface-2`, où il sert le plus : en-têtes de bloc, numéros de série, libellés de carte. Assombri juste assez pour passer AA partout (4.74:1 sur surface-2, 5.15:1 sur le fond). */ --imri-text-3: #556A8D; /* 4.74:1 AA sur surface-2 */ --imri-line: #D8E1F0; /* LIVRÉ — filet 1 */ --imri-line-soft: #B8C6DD; /* LIVRÉ — filet 2 */ --imri-on-signature:#FFFFFF; --imri-on-ink: #FFFFFF; --imri-ink: #0A1E5E; /* sémantiques — distinctes du bleu de marque */ --imri-positive: #16803C; /* LIVRÉ */ --imri-warning: #C27A00; /* LIVRÉ */ --imri-critical: #C62828; /* LIVRÉ */ /* ── DÉRIVÉ — les mêmes couleurs, en encre ── Les trois LIVRÉ ci-dessus sont faites pour border et remplir. En texte sur leur propre lavis, elles tombent sous AA : « Or » sur fond or donnait 2.93:1, « +7 Dribble » 4.22:1. Les bordures et les aplats gardent la couleur de la planche, le texte prend l'encre. */ --imri-pos-encre: #0F6B31; /* 5.90:1 sur --imri-pos-wash */ --imri-warn-encre: #8A5600; /* 5.06:1 sur --imri-warn-wash */ --imri-crit-encre: #B01C1C; /* 5.39:1 sur --imri-crit-wash */ --imri-sig-wash: #DDE9FB; --imri-sec-wash: #D6F1FF; --imri-pos-wash: #DCF0E6; --imri-warn-wash: #F7EBD6; --imri-crit-wash: #FADEDE; /* dégradé signature — la planche en fait un marqueur de marque */ --imri-grad: linear-gradient(160deg, #2E6FD4 0%, #154FAF 46%, #0A1E5E 100%); --imri-grad-doux: linear-gradient(160deg, #5FAEEA 0%, #154FAF 100%); /* Le dégradé de la MARQUE, distinct de celui des aplats. `--imri-grad` finit sur la couleur la plus sombre du thème : en aplat c'est ce qu'on veut, mais le mot « IMRI » est du texte peint par ce dégradé, et en sombre il finissait à #1A0000 sur un fond #0B0B0B, soit 1.02:1 — le dernier tiers du mot était invisible. Invisible aussi pour `outils/audit-visuel.js`, qui ne juge ni un texte transparent ni un fond en dégradé. Celui-ci est horizontal et ses deux bouts tiennent le contraste d'un grand corps (3:1) sur le fond de page. */ --imri-grad-marque: linear-gradient(96deg, #154FAF 0%, #0A1E5E 100%); /* 5.85:1 → 14.11:1 */ /* L'encre secondaire de la Légende. Elle est la seule carte dont le métal bascule avec le thème, et son encre doit basculer avec lui : laissée en dur, la déclinaison bleue se retrouvait posée sur une carte rouge (micro-jauges, ligne d'identité, libellés des clés). Aucun échec de contraste, donc l'audit ne disait rien, mais c'était la seule carte du jeu où l'encre et le métal ne parlaient pas de la même couleur. Les deux valeurs sont le même gris teinté, la teinte mise à part : HSL 215 / 50 % / 85 % contre 355 / 50 % / 85 %. */ --imri-encre-legende: #C6D6EC; /* 12.9:1 sur le champ de la Légende */ --imri-foil-1: #C9DBF2; --imri-foil-2: #FFFFFF; --imri-foil-3: #9EC0E8; /* ── SCÈNES ── */ --sc-fond: #E4ECF7; --sc-sol: #C7D6EA; --sc-clair: #FFFFFF; --sc-trait: #8CA4C4; --sc-encre: #0F172A; --sc-encre2: #334966; --sc-nuit: #0A1E5E; --sc-a: #154FAF; --sc-b: #5FAEEA; --sc-c: #E0A020; --sc-d: #C62828; --sc-vert: #0E7C4A; --sc-vert-vif: #3DD68C; --sc-pelouse: #1F6B47; --sc-pelouse-clair: #2F8A5E; --sc-peau: #C98D63; --sc-peau2: #EFC49E; --sc-rouge: #C62828; --sc-rose: #D4457B; --sc-rose-nuit: #2A1530; /* ── FORME ── */ /* LIVRÉ — un seul rayon pour tout le système */ --r: 12px; --r-pill: 999px; /* LIVRÉ — échelle d'espacement */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --ombre: 0 1px 2px rgba(10,30,94,.06), 0 4px 14px rgba(10,30,94,.07); --ombre-fort: 0 2px 6px rgba(10,30,94,.10), 0 14px 38px rgba(10,30,94,.14); } /* ══ Sombre système — aucun choix explicite du visiteur ══ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --imri-marine: #1A0000; --imri-bleu: #E11D2E; --imri-ciel: #FF6B78; --imri-glace: #3A0A0E; --imri-bg: #0B0B0B; --imri-text-1: #E5E5E5; /* 15.62:1 AAA */ /* #E11D2E ne donne que 4.14:1 sur le fond : conforme pour les aplats et les gros titres, PAS pour du texte de 12-14 px. D'où une variante claire réservée au texte. */ --imri-signature: #E11D2E; /* 4.14:1 — aplats et gros textes */ --imri-sig-texte: #FF4D5A; /* 6.06:1 AA — texte courant */ --imri-secondary: #8B0000; --imri-surface: #121212; /* LIVRÉ — carte */ --imri-surface-2: #171A1F; /* LIVRÉ — en-tête de bloc */ --imri-text-2: #B6AFB0; /* 9.14:1 AAA */ --imri-text-3: #868081; /* 5.08:1 AA */ --imri-line: #242A2F; /* LIVRÉ — filet 1 */ --imri-line-soft: #3A424B; /* LIVRÉ — filet 2 */ --imri-on-signature:#FFFFFF; /* 4.75:1 sur le rouge */ --imri-on-ink: #0B0B0B; /* inverse de --imri-ink, sinon blanc sur blanc */ --imri-ink: #E5E5E5; /* le rouge étant la marque, « critique » passe au magenta */ --imri-positive: #4ADE80; /* LIVRÉ */ --imri-warning: #F6C453; /* LIVRÉ */ --imri-critical: #FF6B6B; /* LIVRÉ */ /* En sombre les trois LIVRÉ sont déjà des couleurs claires : elles passent AA sur leur lavis, l'encre leur est donc identique. */ --imri-pos-encre: #4ADE80; --imri-warn-encre: #F6C453; --imri-crit-encre: #FF6B6B; --imri-sig-wash: #2C0A0E; --imri-sec-wash: #240404; --imri-pos-wash: #0D2B1D; --imri-warn-wash: #2E2310; --imri-crit-wash: #33101A; --imri-grad: linear-gradient(160deg, #E11D2E 0%, #8B0000 52%, #1A0000 100%); --imri-grad-doux: linear-gradient(160deg, #FF4D5A 0%, #8B0000 100%); --imri-grad-marque: linear-gradient(96deg, #FF4D5A 0%, #E11D2E 100%); /* 6.06:1 → 4.14:1 */ --imri-encre-legende: #ECC6C9; --imri-foil-1: #3A424B; --imri-foil-2: #6B5054; --imri-foil-3: #1A0000; --sc-fond: #141011; --sc-sol: #1F1516; --sc-clair: #E5E5E5; --sc-trait: #5A4A4C; --sc-encre: #0B0B0B; --sc-encre2: #2A2022; --sc-nuit: #1A0000; --sc-a: #E11D2E; --sc-b: #FF6B78; --sc-c: #F5B437; --sc-d: #FF6B6B; --sc-vert: #0E7C4A; --sc-vert-vif: #3DD68C; --sc-pelouse: #17422F; --sc-pelouse-clair: #1F5C40; --sc-peau: #C98D63; --sc-peau2: #EFC49E; --sc-rouge: #E11D2E; --sc-rose: #FF6B6B; --sc-rose-nuit: #2A0C14; --ombre: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.45); --ombre-fort: 0 2px 6px rgba(0,0,0,.6), 0 14px 38px rgba(0,0,0,.55); } } /* ══ Sombre choisi explicitement ══ */ :root[data-theme="dark"] { --imri-marine: #1A0000; --imri-bleu: #E11D2E; --imri-ciel: #FF6B78; --imri-glace: #3A0A0E; --imri-bg: #0B0B0B; --imri-text-1: #E5E5E5; --imri-signature: #E11D2E; --imri-sig-texte: #FF4D5A; --imri-secondary: #8B0000; --imri-surface: #121212; /* LIVRÉ — carte */ --imri-surface-2: #171A1F; /* LIVRÉ — en-tête de bloc */ --imri-text-2: #B6AFB0; --imri-text-3: #868081; --imri-line: #242A2F; /* LIVRÉ — filet 1 */ --imri-line-soft: #3A424B; /* LIVRÉ — filet 2 */ --imri-on-signature:#FFFFFF; --imri-on-ink: #0B0B0B; --imri-ink: #E5E5E5; --imri-positive: #4ADE80; --imri-warning: #F6C453; --imri-critical: #FF6B6B; --imri-pos-encre: #4ADE80; --imri-warn-encre: #F6C453; --imri-crit-encre: #FF6B6B; --imri-sig-wash: #2C0A0E; --imri-sec-wash: #240404; --imri-pos-wash: #0D2B1D; --imri-warn-wash: #2E2310; --imri-crit-wash: #33101A; --imri-grad: linear-gradient(160deg, #E11D2E 0%, #8B0000 52%, #1A0000 100%); --imri-grad-doux: linear-gradient(160deg, #FF4D5A 0%, #8B0000 100%); --imri-grad-marque: linear-gradient(96deg, #FF4D5A 0%, #E11D2E 100%); /* 6.06:1 → 4.14:1 */ --imri-encre-legende: #ECC6C9; --imri-foil-1: #3A424B; --imri-foil-2: #6B5054; --imri-foil-3: #1A0000; --sc-fond: #141011; --sc-sol: #1F1516; --sc-clair: #E5E5E5; --sc-trait: #5A4A4C; --sc-encre: #0B0B0B; --sc-encre2: #2A2022; --sc-nuit: #1A0000; --sc-a: #E11D2E; --sc-b: #FF6B78; --sc-c: #F5B437; --sc-d: #FF6B6B; --sc-vert: #0E7C4A; --sc-vert-vif: #3DD68C; --sc-pelouse: #17422F; --sc-pelouse-clair: #1F5C40; --sc-peau: #C98D63; --sc-peau2: #EFC49E; --sc-rouge: #E11D2E; --sc-rose: #FF6B6B; --sc-rose-nuit: #2A0C14; --ombre: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.45); --ombre-fort: 0 2px 6px rgba(0,0,0,.6), 0 14px 38px rgba(0,0,0,.55); } /* ═══════════ TYPOGRAPHIE ═══════════ */ :root { --font-display: "Archivo Black", "Arial Black", sans-serif; --font-body: "Inter", system-ui, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* LIVRÉ — 8 niveaux, graisse et interlignage associés */ --text-data: 0.75rem; --w-data: 500; --lh-data: 1.3; --text-small: 0.875rem; --w-small: 500; --lh-small: 1.4; --text-body: 1rem; --w-body: 400; --lh-body: 1.5; --text-h3: 1.25rem; --w-h3: 700; --lh-h3: 1.2; --text-h2: 1.5rem; --w-h2: 700; --lh-h2: 1.15; --text-h1: 2rem; --w-h1: 700; --lh-h1: 1.1; --text-dl: 2.5rem; --w-dl: 700; --lh-dl: 1.05; --text-dxl: 3.5rem; --w-dxl: 700; --lh-dxl: 1.0; /* alias courts conservés pour le code existant */ --text-1: 0.6875rem; --text-2: var(--text-data); --text-3: var(--text-small); --text-4: var(--text-body); --text-5: var(--text-h3); --text-6: var(--text-h2); --text-7: var(--text-dl); --text-8: var(--text-dxl); --lh-tight: 1.0; --lh-snug: 1.15; --ls-mono: 0.1em; } /* --imri-sig-texte n'existe qu'en sombre : repli en clair */ :root { --imri-sig-texte: var(--imri-signature); }