/* Tokens de design — seule source de variables CSS (couleurs, espacements, rayons, typographie). */ :root, [data-theme="light"] { --bg: #f4f4f7; --bg2: #fafafc; --card: #ffffff; --card-hov: #eeeef3; --card2: #e9e9ef; --border: #dedee6; --border2: #c8c8d4; --text: #16161a; --text2: #46465a; --text3: #63637a; --overlay: rgba(20, 20, 28, 0.45); --red: #d62828; /* Rouge utilisé comme FOND sous du texte blanc : doit tenir 4,5:1 avec #fff (AA). */ --red-solid: #d62828; --blue: #2563eb; --amber: #b45309; --green: #15803d; --purple: #7c3aed; --cyan: #0e7490; --red-subtle: rgba(214, 40, 40, 0.1); --blue-subtle: rgba(37, 99, 235, 0.1); --amber-subtle: rgba(180, 83, 9, 0.12); --green-subtle: rgba(21, 128, 61, 0.12); --purple-subtle: rgba(124, 58, 237, 0.1); --cyan-subtle: rgba(14, 116, 144, 0.1); --shadow: 0 1px 2px rgba(20, 20, 30, 0.05), 0 4px 12px rgba(20, 20, 30, 0.06); --shadow-lg: 0 2px 8px rgba(20, 20, 30, 0.07), 0 16px 40px rgba(20, 20, 30, 0.1); color-scheme: light; } [data-theme="dark"] { --bg: #0a0a0f; --bg2: #121217; --card: #18181d; --card-hov: #202027; --card2: #232329; --border: #2a2a32; --border2: #38383f; --text: #e6e6ea; --text2: #b2b2c0; --text3: #8a8a99; --overlay: rgba(0, 0, 0, 0.6); --red: #ef4444; /* En thème sombre, #ef4444 ne donne que 3,76:1 avec du blanc : on garde un rouge plus dense pour les fonds de bouton, sans toucher à l'accent qui sert aux textes et aux bordures. */ --red-solid: #c81e1e; --blue: #60a5fa; --amber: #f59e0b; --green: #4ade80; --purple: #a78bfa; --cyan: #22d3ee; --red-subtle: rgba(239, 68, 68, 0.16); --blue-subtle: rgba(96, 165, 250, 0.16); --amber-subtle: rgba(245, 158, 11, 0.16); --green-subtle: rgba(74, 222, 128, 0.16); --purple-subtle: rgba(167, 139, 250, 0.16); --cyan-subtle: rgba(34, 211, 238, 0.16); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6), 0 16px 48px rgba(0, 0, 0, 0.5); color-scheme: dark; } /* La coquille sert `` : `:not([data-theme])` ne matcherait donc jamais et le repli automatique serait inatteignable (premier rendu en clair pour qui a un téléphone en sombre). `[data-theme=""]` couvre ce cas, y compris si le script de thème ne s'exécute pas. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]), [data-theme=""] { --bg: #0a0a0f; --bg2: #121217; --card: #18181d; --card-hov: #202027; --card2: #232329; --border: #2a2a32; --border2: #38383f; --text: #e6e6ea; --text2: #b2b2c0; --text3: #8a8a99; --overlay: rgba(0, 0, 0, 0.6); --red: #ef4444; /* En thème sombre, #ef4444 ne donne que 3,76:1 avec du blanc : on garde un rouge plus dense pour les fonds de bouton, sans toucher à l'accent qui sert aux textes et aux bordures. */ --red-solid: #c81e1e; --blue: #60a5fa; --amber: #f59e0b; --green: #4ade80; --purple: #a78bfa; --cyan: #22d3ee; --red-subtle: rgba(239, 68, 68, 0.16); --blue-subtle: rgba(96, 165, 250, 0.16); --amber-subtle: rgba(245, 158, 11, 0.16); --green-subtle: rgba(74, 222, 128, 0.16); --purple-subtle: rgba(167, 139, 250, 0.16); --cyan-subtle: rgba(34, 211, 238, 0.16); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6), 0 16px 48px rgba(0, 0, 0, 0.5); color-scheme: dark; } } :root { --ch-cadre: var(--red); --ch-manoeuvres: #c2410c; --ch-echeveaux: #78716c; --ch-hydraulique: var(--blue); --ch-lances: #2563eb; --ch-deci: #0ea5e9; --ch-gaz: var(--amber); --ch-emv: var(--purple); --ch-ventilation: var(--cyan); --ch-sauvetages: var(--green); --ch-lspcc: #4f46e5; --ch-echelles: #94a3b8; --ch-tasss: #16a34a; --ch-tdf: #b45309; --ch-sauvegarde: #e11d48; --ch-fdf: #166534; --ch-ssuap-cadre: #0d9488; --ch-ssuap-bilans: #db2777; --ch-ssuap-materiel: #a16207; --ch-ssuap-anatomie: #9d3325; --ch-ssuap-respiratoire: #9d5b25; --ch-ssuap-circulatoire: #9d8325; --ch-ssuap-neuro: #8f9d25; --ch-ssuap-infectieux: #679d25; --ch-ssuap-pathologies: #3e9d25; --ch-ssuap-crise: #259d33; --ch-ssuap-intoxications: #259d5b; --ch-ssuap-circonstances: #259d83; --ch-ssuap-peau: #258f9d; --ch-ssuap-grossesse: #25679d; --ch-ssuap-traumatologie: #253e9d; --ch-ssuap-secoursroutier: #33259d; --ch-ssuap-immobilisation: #5b259d; --ch-ssuap-hygiene: #83259d; --ch-ssuap-smv: #9d258f; --ch-ssuap-pediatrie: #9d2567; --ch-ssuap-geriatrie: #9d253e; /* Notation de révision : un seul jeu pour les deux thèmes. La bande de luminance est choisie pour tenir 4,5:1 avec le texte blanc ET 3:1 contre la carte sombre (SC 1.4.11 : ces boutons n'ont pas de bordure, leur fond est leur limite visuelle). Ne pas les redéclarer en sombre. */ --fb-again: #d62828; --fb-hard: #b45309; --fb-good: #15803d; --fb-easy: #2563eb; /* Marquage haute visibilité des engins : sert de filet de 6 px, jamais de couleur de texte. */ --hiviz: #f2c200; --ink: #101418; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif; /* Chasse fixe système (aucun téléchargement) pour les compteurs, les valeurs et les codes. */ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs: 1; --text-xs: calc(0.7rem * var(--fs)); --text-sm: calc(0.8rem * var(--fs)); --text-base: calc(0.9rem * var(--fs)); --text-md: calc(1rem * var(--fs)); --text-lg: calc(1.12rem * var(--fs)); --text-xl: calc(1.3rem * var(--fs)); --text-2xl: calc(1.55rem * var(--fs)); --text-3xl: calc(2rem * var(--fs)); --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; --nav-h: 64px; --appbar-h: 56px; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 250ms; } /* Couleurs de chapitre en thème sombre. Les dix valeurs figées en dur ne basculaient pas : sur `--card` (#18181d), fdf et lspcc tombaient sous 3:1 alors qu'elles servent d'indicateur non textuel (pastille de 8 px, rail de carte). Bloc placé APRÈS `:root` : même spécificité, l'ordre source tranche. */ [data-theme="dark"] { --ch-manoeuvres: #f97316; --ch-echeveaux: #a8a29e; --ch-lances: #60a5fa; --ch-deci: #38bdf8; --ch-lspcc: #818cf8; --ch-echelles: #cbd5e1; --ch-tasss: #4ade80; --ch-tdf: #f59e0b; --ch-sauvegarde: #fb7185; --ch-fdf: #22c55e; --ch-ssuap-cadre: #2dd4bf; --ch-ssuap-bilans: #f472b6; --ch-ssuap-materiel: #facc15; --ch-ssuap-anatomie: #e28578; --ch-ssuap-respiratoire: #e2a878; --ch-ssuap-circulatoire: #e2cc78; --ch-ssuap-neuro: #d6e278; --ch-ssuap-infectieux: #b2e278; --ch-ssuap-pathologies: #8fe278; --ch-ssuap-crise: #78e285; --ch-ssuap-intoxications: #78e2a8; --ch-ssuap-circonstances: #78e2cc; --ch-ssuap-peau: #78d6e2; --ch-ssuap-grossesse: #78b2e2; --ch-ssuap-traumatologie: #788fe2; --ch-ssuap-secoursroutier: #8578e2; --ch-ssuap-immobilisation: #a878e2; --ch-ssuap-hygiene: #cc78e2; --ch-ssuap-smv: #e278d6; --ch-ssuap-pediatrie: #e278b2; --ch-ssuap-geriatrie: #e2788f; --hiviz: #f7d13d; --ink: #05070a; } @media (prefers-color-scheme: dark) { :root:not([data-theme]), [data-theme=""] { --ch-manoeuvres: #f97316; --ch-echeveaux: #a8a29e; --ch-lances: #60a5fa; --ch-deci: #38bdf8; --ch-lspcc: #818cf8; --ch-echelles: #cbd5e1; --ch-tasss: #4ade80; --ch-tdf: #f59e0b; --ch-sauvegarde: #fb7185; --ch-fdf: #22c55e; --ch-ssuap-cadre: #2dd4bf; --ch-ssuap-bilans: #f472b6; --ch-ssuap-materiel: #facc15; --ch-ssuap-anatomie: #e28578; --ch-ssuap-respiratoire: #e2a878; --ch-ssuap-circulatoire: #e2cc78; --ch-ssuap-neuro: #d6e278; --ch-ssuap-infectieux: #b2e278; --ch-ssuap-pathologies: #8fe278; --ch-ssuap-crise: #78e285; --ch-ssuap-intoxications: #78e2a8; --ch-ssuap-circonstances: #78e2cc; --ch-ssuap-peau: #78d6e2; --ch-ssuap-grossesse: #78b2e2; --ch-ssuap-traumatologie: #788fe2; --ch-ssuap-secoursroutier: #8578e2; --ch-ssuap-immobilisation: #a878e2; --ch-ssuap-hygiene: #cc78e2; --ch-ssuap-smv: #e278d6; --ch-ssuap-pediatrie: #e278b2; --ch-ssuap-geriatrie: #e2788f; --hiviz: #f7d13d; --ink: #05070a; } }