/* vizir.bet — jetons de design, source unique de vérité. * Aucun composant ne doit contenir de valeur hexadécimale. * Application : (le mode "système" écrit * la valeur résolue dans l'attribut, il n'existe pas de troisième thème). */ :root, [data-theme="light"] { /* Surfaces et texte */ --bg: #FAFAFA; --surface: #FFFFFF; --surface-2: #F0F0F0; /* squelettes, encarts inline, avatars */ --text: #0A0A0A; --text-2: #5C5C5C; /* 7,0:1 sur --surface */ /* Filets et bordures */ --rule: #C9C9C9; /* filet structurel */ --rule-2: #E5E5E5; /* filet décoratif */ --border-fn: #767676; /* bordure fonctionnelle : champs, boutons secondaires */ /* Accent */ --accent: #000ADB; --accent-fg: #FFFFFF; --accent-hover: #0008B0; --accent-active: #000090; /* Désactivé — 4,3:1, contre 2,2:1 en v1 */ --disabled-bg: #E8E8E8; --disabled-fg: #6B6B6B; --disabled-border: #C9C9C9; /* Sémantique */ --danger: #C1121F; /* suspension de compte, actions destructrices, erreurs */ --danger-fg: #FFFFFF; --success: #0F7A3D; /* toasts de succès uniquement */ --success-fg: #FFFFFF; --overlay: rgba(10, 10, 10, 0.5); /* Niveaux de confiance */ --conf-nul-bg: #E8E8E8; --conf-nul-fg: #0A0A0A; --conf-faible-bg: #C1121F; --conf-faible-fg: #FFFFFF; --conf-moyen-bg: #D96A00; --conf-moyen-fg: #0A0A0A; --conf-fort-bg: #E8B400; --conf-fort-fg: #0A0A0A; /* Résultats */ --result-won-bg: #0F7A3D; --result-won-fg: #FFFFFF; --result-lost-bg: #5C5C5C; --result-lost-fg: #FFFFFF; } [data-theme="dark"] { --bg: #0A0A0A; --surface: #141414; --surface-2: #1F1F1F; --text: #F5F5F5; --text-2: #9A9A9A; --rule: #474747; --rule-2: #262626; --border-fn: #8C8C8C; --accent: #C4DB00; --accent-fg: #0A0A0A; --accent-hover: #DCF200; --accent-active: #A8C000; --disabled-bg: #2E2E2E; --disabled-fg: #8A8A8A; /* 4,0:1 */ --disabled-border: #474747; --danger: #E5484D; --danger-fg: #0A0A0A; --success: #3DD68C; --success-fg: #0A0A0A; --overlay: rgba(0, 0, 0, 0.6); --conf-nul-bg: #2E2E2E; --conf-nul-fg: #F5F5F5; --conf-faible-bg: #E5484D; --conf-faible-fg: #0A0A0A; --conf-moyen-bg: #F08C1A; --conf-moyen-fg: #0A0A0A; --conf-fort-bg: #FFC61A; --conf-fort-fg: #0A0A0A; --result-won-bg: #3DD68C; --result-won-fg: #0A0A0A; --result-lost-bg: #3A3A3A; --result-lost-fg: #F5F5F5; } /* Invariants (identiques dans les deux thèmes) */ :root { --font-display: 'Archivo', sans-serif; /* titres, chiffres, libellés, boutons */ --font-text: 'Public Sans', sans-serif; /* corps, formulaires */ --fs-display: 40px; --lh-display: 1.05; --ls-display: -0.02em; --fs-h1: 32px; --lh-h1: 1.1; --ls-h1: -0.02em; --fs-h2: 24px; --lh-h2: 1.15; --ls-h2: -0.015em; --fs-h3: 18px; --lh-h3: 1.25; --ls-h3: -0.01em; --fs-body: 16px; --lh-body: 1.55; --fs-body-sm: 14px; --lh-body-sm: 1.5; --fs-meta: 13px; --fs-label: 12px; --ls-label: 0.06em; --fs-label-lg: 12px; --ls-label-lg: 0.08em; --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; --tap: 44px; /* cible tactile minimale, sans exception */ --tap-nav: 48px; /* barre de navigation basse */ /* Contrat de colonnes des listes de conseils : en-tête et lignes lisent ces jetons */ --col-fav: 44px; --col-odds: 64px; --col-gap: 16px; --col-tag: 150px; --bp-sm: 480px; /* bascule PickRow en variante dense */ --bp-md: 768px; /* barre basse -> en-tête ; pied de page accordéon -> colonnes */ --bp-lg: 1024px; /* grille d'articles 2 -> 3 colonnes */ --content-max: 1600px; /* Aucun rayon dans le système : angles vifs partout, sauf la bulle de notification */ --radius-badge: 8px; } /* Base */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); } a { color: var(--accent); } a:hover { color: var(--accent-hover); text-decoration: underline; } /* Focus : une seule règle, jamais d'outline:none sans remplacement */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Sur un aplat d'accent, double anneau pour rester visible */ .focus-inset:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); } /* Texte réservé aux technologies d'assistance */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Lien d'évitement */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--accent-fg); font-family: var(--font-display); font-weight: 600; font-size: 13px; padding: 10px 16px; text-decoration: none; } .skip-link:focus { left: 8px; top: 8px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }