/* ========================================================================== Design tokens — Festival du Mieux-Être -------------------------------------------------------------------------- DEUX COUCHES. La règle est simple : COUCHE 1 — la palette (`--p-*`). Les couleurs relevées sur les affiches 2020 → 2026. C'est la source de vérité de l'identité. ⚠ Ne JAMAIS l'appeler depuis une feuille de composant. COUCHE 2 — les rôles (`--surface`, `--text`, `--brand`…). Ce que les composants ont le droit d'utiliser, et rien d'autre. Le mode sombre ne redéfinit que la couche 2 : la palette de l'affiche ne bouge pas, seule l'affectation des rôles change. ========================================================================== */ /* ========================================================================== COUCHE 1 — Palette de l'affiche ========================================================================== */ :root { /* Verts de l'affiche */ --p-ink: #16250A; /* vert presque noir */ --p-forest: #2F4A0C; /* olive foncé */ --p-vert: #5F9B12; /* LE vert prairie de l'affiche */ --p-vert-deep: #4A790E; /* le même, assombri de 22 % : contraste AA sur blanc */ --p-vert-mid: #446E12; /* aplat vert lisible sur fond nuit */ --p-lime: #A8CC2E; --p-acid: #C9E44B; /* le lime clair de l'affiche */ --p-pale: #EEF4C9; /* le lime pâle de l'affiche */ --p-cream: #FAFCF2; --p-white: #FFFFFF; /* Accents */ --p-or: #FFC72C; /* le jaune de « Entrée et conférences gratuites » */ --p-or-deep: #8C6500; /* le même en version lisible sur blanc (5,3:1) */ --p-eau: #7BD5EA; /* le cyan des gouttes d'eau */ /* Gris-verts de texte */ --p-moss: #4A5B3A; --p-moss-light: #66765A; --p-line: #D8E2C2; /* Nuances profondes — n'existent que pour le mode sombre. Le pied de page actuel, déjà sombre, en était le prototype. */ --p-night: #0F1806; --p-night-2: #16250A; --p-night-3: #1C300C; --p-night-4: #233A0E; --p-line-dark: #3A5518; --p-line-dark-2:#6F9A2E; --p-chalk: #E8F0D5; --p-sage: #B4C79A; --p-sage-2: #93A87C; } /* ========================================================================== COUCHE 2 — Rôles, thème clair (défaut) ========================================================================== */ :root { color-scheme: light; /* ------------------------------------------------------------- Surfaces -- */ --surface: var(--p-white); /* fond de page */ --surface-2: var(--p-cream); /* cartes, encarts très légers */ --surface-3: var(--p-pale); /* sections teintées */ --surface-inverse: var(--p-ink); /* pied de page, chiffres, encarts sombres */ --glass: rgba(255, 255, 255, .92); /* en-tête translucide */ --glass-border: rgba(22, 37, 10, .12); /* ---------------------------------------------------------------- Texte -- */ --text: var(--p-ink); --text-muted: var(--p-moss); --text-faint: var(--p-moss-light); --on-inverse: var(--p-white); /* sur --surface-inverse */ --on-inverse-muted: rgba(255, 255, 255, .84); --on-inverse-faint: rgba(255, 255, 255, .58); --border-inverse: rgba(255, 255, 255, .16); --veil-inverse: rgba(255, 255, 255, .07); /* champs sur fond sombre */ /* --------------------------------------------------------------- Marque -- */ --brand: var(--p-vert); /* aplats, grands titres, décor */ --brand-text: var(--p-vert-deep); /* liens et textes courants — AA sur blanc */ --brand-fill: var(--p-vert-deep); /* aplat portant du texte clair */ --brand-strong: var(--p-forest); --on-brand: var(--p-white); --fill-deep: var(--p-forest); /* aplat décoratif profond (tuiles) */ --on-fill-deep: #FFFFFF; --highlight: var(--p-acid); /* le lime vif, sur fond sombre */ --on-highlight: var(--p-ink); --accent: var(--p-or); --accent-text: var(--p-or-deep); /* le jaune en version texte lisible */ --accent-hover: var(--p-white); --on-accent: var(--p-ink); --water: var(--p-eau); /* --------------------------------------------------------------- Traits -- */ --logo-plate: var(--p-white); /* fond des logos partenaires */ --logo-plate-border: var(--p-line); --border: var(--p-line); /* filets et séparateurs */ --border-strong: var(--p-ink); /* contours de boutons et de puces cliquables */ --focus: var(--p-or); /* -------------------------------------------------------------- Boutons -- */ --btn-fill-bg: var(--p-ink); --btn-fill-text: var(--p-acid); --btn-fill-bg-hover: var(--p-vert-deep); --btn-fill-text-hover: var(--p-white); /* ---------------------------------------- Sur les aplats verts profonds -- Ces trois-là ne changent PAS en mode sombre : le dégradé d'appel à l'action reste sombre dans les deux thèmes. */ --on-cta: #FFFFFF; --on-cta-veil: rgba(255, 255, 255, .16); --on-cta-border: rgba(255, 255, 255, .60); /* -------------------------------------------- Sur le dégradé d'en-tête -- */ --on-gradient: #20360A; /* chapô */ --on-gradient-title: #1B2D07; /* titre */ --on-gradient-em: #FFFFFF; /* le mot mis en avant */ --on-gradient-eyebrow: var(--p-forest); --on-gradient-dot: var(--p-vert); /* ------------------------------------------------------------- Bandeau -- */ --strip-bg: var(--p-acid); --strip-text: var(--p-ink); --strip-dot: var(--p-forest); /* ------------------------------------------------------------ Dégradés -- */ --gradient-hero: radial-gradient(1250px 900px at 4% -12%, #FBFEEA 0%, #EDF7B4 12%, #D7EC72 30%, #B5D63A 52%, #8DBF20 74%, #6BA315 100%); --gradient-cta: radial-gradient(900px 620px at 92% 10%, #D7EC72 0%, #A8CC2E 22%, #5F9B12 48%, #2F4A0C 82%, #1B2D07 100%); --gradient-photo: radial-gradient(circle at 30% 25%, #E4F3A6 0%, #B5D63A 45%, #5F9B12 100%); /* -------------------------------------------------------------- Ombres -- */ --shadow-card: 0 18px 38px rgba(30, 50, 8, .14); --shadow-float: 0 20px 50px rgba(22, 37, 10, .40); --shadow-drop: 0 20px 38px rgba(30, 50, 8, .26); --shadow-logo: 0 12px 30px rgba(30, 50, 8, .30); --shadow-title: 0 3px 0 rgba(30, 50, 8, .24), 0 12px 40px rgba(30, 50, 8, .40); --shadow-hero: 0 3px 0 rgba(30, 50, 8, .26), 0 14px 46px rgba(30, 50, 8, .42); /* -------------------------------------------------------------- Décors -- */ --rays-tint: rgba(255, 255, 255, .62); --drop-opacity: 1; /* ----------------------------------------------------- Typographie ------ */ --display: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --wonk: "SOFT" 70, "WONK" 1; /* ------------------------------------------------------------- Rayons -- */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 26px; --radius-pill: 999px; /* -------------------------------------------------------- Espacements -- */ --wide: 1280px; --space-1: .5rem; --space-2: 1rem; --space-3: 1.75rem; --space-4: 3rem; --space-5: 6.25rem; /* -------------------------------------------------------------- Motion -- */ --ease: cubic-bezier(.2, .8, .3, 1); --dur-fast: .16s; --dur: .22s; --dur-slow: .70s; /* ---------------------------------------------------------- Profondeur -- */ --z-header: 600; --z-consent: 1500; --z-skip: 2000; } /* ========================================================================== COUCHE 2 — Rôles, thème sombre Posé sur par le script d'amorçage du . Seuls les rôles changent : la palette de l'affiche est intacte. ========================================================================== */ [data-theme="dark"] { color-scheme: dark; --surface: var(--p-night); --surface-2: var(--p-night-2); --surface-3: var(--p-night-3); --surface-inverse: var(--p-night-4); --glass: rgba(15, 24, 6, .90); --glass-border: rgba(232, 240, 213, .14); --text: var(--p-chalk); --text-muted: var(--p-sage); --text-faint: var(--p-sage-2); --on-inverse: var(--p-chalk); --on-inverse-muted: rgba(232, 240, 213, .84); --on-inverse-faint: rgba(232, 240, 213, .64); --border-inverse: rgba(232, 240, 213, .16); --veil-inverse: rgba(232, 240, 213, .07); /* Le vert prairie tombe à 4,7:1 sur fond nuit : on passe au lime et à l'acide de l'affiche, qui donnent 9,8:1 et 12,7:1. */ --brand: var(--p-lime); --brand-text: var(--p-acid); --brand-fill: var(--p-vert-mid); --brand-strong: var(--p-acid); --fill-deep: var(--p-forest); --on-fill-deep: var(--p-chalk); --on-brand: var(--p-chalk); --highlight: var(--p-acid); --on-highlight: var(--p-ink); --accent: var(--p-or); --accent-text: var(--p-or); --accent-hover: var(--p-lime); --on-accent: var(--p-ink); /* La pastille des logos reste claire en mode sombre : les chartes des partenaires institutionnels imposent leurs couleurs sur fond clair. */ --logo-plate: #F2F5EA; --logo-plate-border: #46661C; --border: var(--p-line-dark); --border-strong: var(--p-line-dark-2); --focus: var(--p-or); /* Bouton principal inversé : clair sur fond sombre, sinon il disparaît. */ --btn-fill-bg: var(--p-acid); --btn-fill-text: var(--p-ink); --btn-fill-bg-hover: var(--p-lime); --btn-fill-text-hover: var(--p-ink); --on-gradient: var(--p-sage); --on-gradient-title: var(--p-chalk); --on-gradient-em: var(--p-acid); --on-gradient-eyebrow: var(--p-acid); --on-gradient-dot: var(--p-lime); --strip-bg: var(--p-forest); --strip-text: var(--p-acid); --strip-dot: var(--p-lime); --gradient-hero: radial-gradient(1250px 900px at 4% -12%, #35590F 0%, #2A470C 16%, #20360A 38%, #172808 64%, #0F1806 100%); --gradient-cta: radial-gradient(900px 620px at 92% 10%, #446E12 0%, #33530E 24%, #22390A 54%, #162607 82%, #0F1806 100%); --gradient-photo: radial-gradient(circle at 30% 25%, #7FA82A 0%, #547F16 45%, #33530E 100%); --shadow-card: 0 18px 38px rgba(0, 0, 0, .55); --shadow-float: 0 20px 50px rgba(0, 0, 0, .65); --shadow-drop: 0 20px 38px rgba(0, 0, 0, .45); --shadow-logo: 0 12px 30px rgba(0, 0, 0, .50); --shadow-title: 0 3px 0 rgba(0, 0, 0, .35), 0 12px 40px rgba(0, 0, 0, .55); --shadow-hero: 0 3px 0 rgba(0, 0, 0, .35), 0 14px 46px rgba(0, 0, 0, .55); /* Les rayons de lumière blancs éblouissent sur fond nuit : on les teinte. */ --rays-tint: rgba(201, 228, 75, .16); --drop-opacity: .40; }