/* ========================================================================== SUD MOTORS 2026 — DESIGN TOKENS Toutes les valeurs de design du site sont centralisées ici. Le thème se pilote via l'attribut data-theme sur : - (défaut / data-theme="dark") → Dark Premium - data-theme="light" → Thème clair ========================================================================== */ :root { /* ---------- Couleurs : thème DARK PREMIUM (défaut) ---------- */ --c-bg: #0b0b0d; /* fond principal */ --c-bg-alt: #121215; /* fond de section alternée */ --c-surface: #1a1a1f; /* cartes, panneaux */ --c-surface-hover: #222228; --c-border: rgba(255, 255, 255, 0.08); --c-text: #f5f5f3; /* texte principal */ --c-text-soft: #b8b8bd; /* texte secondaire */ --c-text-faint: #78787f; /* légendes, mentions */ --c-accent: #d92332; /* rouge Sud Motors — ajustable */ --c-accent-hover: #f03445; --c-on-accent: #ffffff; /* ---------- Typographie ---------- */ --font-title: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; /* Tailles fluides : s'adaptent de mobile à grand écran sans media query */ --fs-hero: clamp(2.4rem, 6vw, 5.5rem); --fs-h2: clamp(1.8rem, 3.5vw, 3rem); --fs-h3: clamp(1.25rem, 2vw, 1.6rem); --fs-body: clamp(1rem, 1.1vw, 1.125rem); --fs-small: 0.875rem; /* ---------- Espacements ---------- */ --space-xs: 0.5rem; --space-s: 1rem; --space-m: 2rem; --space-l: 4rem; --space-xl: clamp(4rem, 10vw, 8rem); /* respiration entre sections */ --container-max: 1440px; --container-pad: clamp(1.25rem, 4vw, 3rem); /* ---------- Rayons, ombres, transitions ---------- */ --radius-s: 8px; --radius-m: 16px; --radius-l: 24px; --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 0.25s; --dur-med: 0.5s; /* ---------- Divers ---------- */ --header-h: 80px; --alert-h: 42px; /* bandelette d'alerte Takata */ color-scheme: dark; } /* ---------- Couleurs : thème CLAIR ---------- */ :root[data-theme="light"] { --c-bg: #f7f7f5; --c-bg-alt: #ffffff; --c-surface: #ffffff; --c-surface-hover: #f0f0ee; --c-border: rgba(0, 0, 0, 0.09); --c-text: #141416; --c-text-soft: #4c4c52; --c-text-faint: #8a8a90; --c-accent: #c31f2d; --c-accent-hover: #a5121f; --c-on-accent: #ffffff; --shadow-card: 0 8px 32px rgba(20, 20, 22, 0.10); color-scheme: light; } /* Transition douce des couleurs quand on change de thème */ :root.theme-transition, :root.theme-transition * { transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out) !important; }