/* =========================================================================== Jetons de conception — la seule source des couleurs, espacements et tailles. Aucune valeur littérale de couleur ailleurs dans le CSS. Contrastes vérifiés sur fond clair et sur fond sombre : tout texte ≥ 4,5:1, toute bordure ou série de graphique ≥ 3:1 (WCAG 1.4.3 et 1.4.11). =========================================================================== */ :root { color-scheme: light dark; /* --- Palette de base ---------------------------------------------------- */ --encre: #0F1729; /* fond sombre, texte clair */ --encre-2: #1C2941; --papier: #FFFFFF; --papier-2: #F4F6F9; --papier-3: #E7EBF1; --gris-600: #5A6782; --gris-500: #8A97B1; --gris-300: #C3CBD9; --rouge: #B3261E; /* 6,4:1 sur blanc */ --rouge-clair: #E8483E; /* pour fond sombre */ --rouge-pale: #FBEDEC; --bleu: #1F4E8C; /* 7,3:1 sur blanc */ --bleu-clair: #6FA8DC; /* pour fond sombre */ --bleu-pale: #EAF1F9; /* --- Rôles, thème clair par défaut -------------------------------------- */ --fond: var(--papier-2); --fond-carte: var(--papier); --fond-appui: var(--papier-3); --texte: var(--encre); --texte-faible: var(--gris-600); --filet: var(--gris-300); --accent: var(--bleu); --accent-contraste: #FFFFFF; --alerte: var(--rouge); --alerte-fond: var(--rouge-pale); /* Séries du graphique : distinguées aussi par le tracé, jamais par la seule couleur (WCAG 1.4.1). */ --serie-cotisants: var(--bleu); --serie-retraites: var(--rouge); --focus: #0B62D6; /* --- Typographie -------------------------------------------------------- */ --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Échelle fluide : lisible à 320 px comme à 1600 px, sans requête de média et sans bloquer le zoom à 200 % (WCAG 1.4.4 et 1.4.10). */ --t-xs: 0.8125rem; --t-sm: 0.9375rem; --t-base: 1rem; --t-md: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem); --t-lg: clamp(1.25rem, 0.8vw + 1rem, 1.5rem); --t-xl: clamp(1.5rem, 1.6vw + 1rem, 2rem); --t-2xl: clamp(1.875rem, 3vw + 1rem, 3rem); --t-3xl: clamp(2.25rem, 6vw + 1rem, 4.5rem); /* --- Espacements -------------------------------------------------------- */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; /* --- Divers ------------------------------------------------------------- */ --rayon: 6px; --rayon-lg: 10px; --largeur: 68rem; --largeur-texte: 68ch; --ombre: 0 1px 2px rgb(15 23 41 / 0.06), 0 4px 12px rgb(15 23 41 / 0.05); /* Cible tactile minimale (WCAG 2.5.8, minimum 24 px ; 44 px recommandé) */ --cible: 44px; } /* --- Thème sombre : préférence système ------------------------------------ */ @media (prefers-color-scheme: dark) { :root { --fond: var(--encre); --fond-carte: var(--encre-2); --fond-appui: #26344F; --texte: #F2F5FA; --texte-faible: var(--gris-500); --filet: #38455F; --accent: var(--bleu-clair); --accent-contraste: #0F1729; --alerte: var(--rouge-clair); --alerte-fond: #35201E; --serie-cotisants: var(--bleu-clair); --serie-retraites: var(--rouge-clair); --focus: #8AB4F8; --ombre: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.3); } } /* --- Thème forcé par l'utilisateur ---------------------------------------- */ /* L'attribut sur l'emporte sur la préférence système, dans les deux sens : un utilisateur en mode sombre peut demander le mode clair. */ :root[data-theme="light"] { --fond: var(--papier-2); --fond-carte: var(--papier); --fond-appui: var(--papier-3); --texte: var(--encre); --texte-faible: var(--gris-600); --filet: var(--gris-300); --accent: var(--bleu); --accent-contraste: #FFFFFF; --alerte: var(--rouge); --alerte-fond: var(--rouge-pale); --serie-cotisants: var(--bleu); --serie-retraites: var(--rouge); --focus: #0B62D6; color-scheme: light; } :root[data-theme="dark"] { --fond: var(--encre); --fond-carte: var(--encre-2); --fond-appui: #26344F; --texte: #F2F5FA; --texte-faible: var(--gris-500); --filet: #38455F; --accent: var(--bleu-clair); --accent-contraste: #0F1729; --alerte: var(--rouge-clair); --alerte-fond: #35201E; --serie-cotisants: var(--bleu-clair); --serie-retraites: var(--rouge-clair); --focus: #8AB4F8; color-scheme: dark; }