/* ========================================================================== tokens.css — Design system Erosophia Source unique de vérité pour couleurs, espaces, rayons, ombres, typo. À charger AVANT tous les autres CSS (navbar-footer.css, accueil.css…). Les anciennes valeurs en dur restent valides : on migre progressivement. ========================================================================== */ :root { /* ───── COULEURS DE MARQUE ───────────────────────────────────────────── Dérivées des hex réellement présents dans le code. #1f7cff (primaire, 35 occurrences) · #0a0025 (encre, 17×) · #0052cc (foncé, 5×) */ --brand-500: #1f7cff; /* primaire — boutons, accents, liens */ --brand-600: #1067e6; /* hover (déjà utilisé dans le code) */ --brand-700: #0052cc; /* fin de dégradé, états actifs */ --brand-300: #00d4ff; /* accent secondaire cyan (déjà présent) */ /* Accent chaud — couleur de marque secondaire (#ff8c00, 17 occurrences : titres de tests, accents). Centralisée le 2026-06-29 ; les usages en dur pourront pointer dessus au fil des migrations. */ --accent-warm: #ff8c00; --accent-warm-dark: #e67a00; /* hover / état foncé */ --ink-900: #0a0025; /* fonds sombres, titres sur clair */ --ink-800: #1a1450; /* fin de dégradé sombre */ --ink-700: #111444; /* variante tests-section */ /* ───── TEINTES PRIMAIRE EN OPACITÉ ───────────────────────────────────── Remplacent les rgba(31,124,255,…) éparpillés. */ --brand-a04: rgba(31, 124, 255, .04); --brand-a06: rgba(31, 124, 255, .06); --brand-a08: rgba(31, 124, 255, .08); --brand-a10: rgba(31, 124, 255, .10); --brand-a12: rgba(31, 124, 255, .12); --brand-a25: rgba(31, 124, 255, .25); --brand-a35: rgba(31, 124, 255, .35); --brand-a38: rgba(31, 124, 255, .38); /* Surfaces translucides sur fond sombre (cartes, stats) */ --surface-light-04: rgba(255, 255, 255, .04); --surface-light-06: rgba(255, 255, 255, .06); --border-light-09: rgba(255, 255, 255, .09); --border-light-10: rgba(255, 255, 255, .10); /* ───── COULEURS DE TEXTE ────────────────────────────────────────────── Sur fond clair */ --text-strong: #0a0025; /* titres */ --text-body: #333; /* corps */ --text-color: #333; /* alias historique lu par navbar-footer.css */ --text-muted: #666; /* descriptions secondaires */ --text-faint: #6f6f6f; /* notes, légendes — AA sur blanc (4.5:1) */ --text-meta: #767676; /* dates, méta blog — AA sur blanc (4.54:1) */ --text-soft: #555; /* extraits, corps secondaire */ --footer-text: #eee; /* texte courant du footer (sur fond sombre) */ --footer-link: #ccc; /* liens du footer au repos */ /* Sur fond sombre — paliers d'opacité du blanc */ --on-dark: #ffffff; --on-dark-92: rgba(255, 255, 255, .92); --on-dark-88: rgba(255, 255, 255, .88); --on-dark-72: rgba(255, 255, 255, .72); --on-dark-55: rgba(255, 255, 255, .55); /* ───── SURFACES ───────────────────────────────────────────────────────*/ --bg: #f8f8f8; /* fond global (déjà référencé en var) */ --bg-alt: #f8f9fa; /* fond de section alterné (blog) */ --surface: #ffffff; /* cartes sur fond clair */ --surface-subtle:#fafbff; /* lignes alternées de tableau */ --surface-tint: #f0f8ff; /* encadrés note, fonds très légers */ --border-subtle: #e8edf5; /* séparateurs sur clair */ --border-card: #e0e8f5; /* contour conteneur FAQ */ /* ───── ÉLÉVATION — échelle d'ombres cohérente (4 niveaux) ───────────── Remplace la douzaine d'ombres ad hoc. */ --shadow-sm: 0 1px 4px rgba(10, 0, 37, .06); --shadow-md: 0 4px 14px rgba(31, 124, 255, .25); /* CTA primaire */ --shadow-lg: 0 8px 20px rgba(31, 124, 255, .12); /* carte au survol */ --shadow-xl: 0 20px 60px rgba(0, 0, 0, .40); /* vidéo, modales */ --shadow-focus: 0 0 0 3px rgba(31, 124, 255, .35); /* anneau de focus */ /* ───── RAYONS — échelle resserrée ───────────────────────────────────── Avant : 5/8/10/12/16/18/20/30px sans logique. Après : 4 paliers + pill. Mapper l'existant dessus. */ --radius-xs: 4px; /* badges, petits éléments */ --radius-sm: 8px; /* champs, tags, mini-cartes */ --radius-md: 12px; /* cartes standard (ex- 10/12px) */ --radius-lg: 20px; /* grands blocs, vidéo (ex- 16/18/20px) */ --radius-pill: 999px; /* boutons arrondis (ex- 30/50px) */ /* ───── ESPACEMENT — échelle 4px ─────────────────────────────────────── Base modulaire. Les sections gardent leurs clamp() responsives, mais les gaps/paddings internes piochent ici. */ --space-1: .25rem; /* 4px */ --space-2: .5rem; /* 8px */ --space-3: .75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ /* ───── TYPOGRAPHIE ──────────────────────────────────────────────────── Échelle fluide reprenant vos clamp() existants. */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --text-xs: clamp(.72rem, 1.1vw, .8rem); --text-sm: clamp(.82rem, 1.3vw, .95rem); --text-base: clamp(.95rem, 1.5vw, 1.05rem); --text-lg: clamp(1rem, 1.75vw, 1.25rem); --text-xl: clamp(1.5rem, 3vw, 2.1rem); --text-2xl: clamp(2rem, 4vw, 2.75rem); --text-3xl: clamp(2rem, 4vw, 3rem); --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --weight-black: 800; --leading-tight: 1.2; --leading-snug: 1.5; --leading-loose: 1.75; --tracking-tight: -.02em; --tracking-wide: .07em; /* ───── DÉGRADÉS RÉCURRENTS ──────────────────────────────────────────── Centralisés pour rester identiques partout. */ --grad-brand: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%); --grad-dark: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-800) 100%); --grad-accent: linear-gradient(90deg, var(--brand-500), var(--brand-700)); /* ───── MOUVEMENT ────────────────────────────────────────────────────── --duration aligné sur la valeur réellement dominante du code (.3s, ~130 occurrences) le 2026-06-29, pour que le token reflète l'usage et que la convergence ne change rien à la vitesse perçue. */ --ease: cubic-bezier(.4, 0, .2, 1); --duration-fast: .15s; --duration: .3s; --duration-slow: .45s; }