:root { --c-primary: #2563eb; --c-primary-dark: #1d4ed8; --c-primary-light: #dbeafe; --c-cyan: #009d98; --c-cyan-dark: #007c78; --c-cyan-light: #d4f1ef; --c-accent: #f59e0b; --c-accent-dark: #d97706; --c-accent-light: #fef3c7; --c-bg: #f1f5fb; --c-surface: #ffffff; --c-text: #0f172a; --c-muted: #64748b; --c-border: #e2e8f0; --c-success: #16a34a; --c-danger: #dc2626; --radius: 18px; --radius-sm: 12px; --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05); --shadow: 0 6px 24px rgba(15, 23, 42, 0.07); --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12); --font-size-base: 18px; --gradient-brand: linear-gradient(135deg, #009d98 0%, #22c1c3 55%, #2563eb 100%); --gradient-soft: radial-gradient(1200px 500px at 10% -10%, #d4f1ef 0%, transparent 60%), radial-gradient(1000px 600px at 110% 10%, #dbeafe 0%, transparent 55%), linear-gradient(180deg, #f8fafc 0%, #eef2f8 100%); /* Surfaces "tintées" utilisées dans tout le CSS — variabilisées pour le mode sombre. */ --c-tint-cool: #f8fafc; /* slate-50 : fonds très doux */ --c-tint-cool-2: #f1f5f9; /* slate-100 : hover/highlight */ --c-tint-cool-3: #e2e8f0; /* slate-200 : borders/lite */ --c-tint-cool-4: #cbd5e1; /* slate-300 : disabled */ --c-error-bg: #fee2e2; --c-success-bg: #dcfce7; --c-info-bg: #eff6ff; --c-pink-bg: #fce7f3; } /* === Mode sombre === Active via [data-theme="dark"] sur . On redéfinit les variables et on ajoute quelques overrides pour les couleurs hardcodées les plus visibles. */ [data-theme="dark"] { --c-primary: #60a5fa; --c-primary-dark: #3b82f6; --c-primary-light: #1e3a8a; --c-cyan: #22c1c3; --c-cyan-dark: #009d98; --c-cyan-light: #0e3a3a; --c-accent: #fbbf24; --c-accent-dark: #f59e0b; --c-accent-light: #3a2a05; --c-bg: #0b1220; --c-surface: #1e293b; --c-text: #f1f5f9; --c-muted: #94a3b8; --c-border: #334155; --c-success: #4ade80; --c-danger: #f87171; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow: 0 6px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6); --gradient-soft: radial-gradient(1200px 500px at 10% -10%, #0e3a3a 0%, transparent 60%), radial-gradient(1000px 600px at 110% 10%, #1e3a8a 0%, transparent 55%), linear-gradient(180deg, #0b1220 0%, #0f172a 100%); --c-tint-cool: #293548; --c-tint-cool-2: #334155; --c-tint-cool-3: #475569; --c-tint-cool-4: #475569; --c-error-bg: #4b1d1d; --c-success-bg: #14532d; --c-info-bg: #1e3a8a; --c-pink-bg: #4a1d3a; /* Demande au navigateur d'utiliser ses chromes (scrollbars, dropdowns natifs des reste blanche en dark mode. */ color-scheme: dark; } /* Sécurité supplémentaire pour les options des