/* ═══════════════════════════════════════════════════════════════ Réglo — Design tokens · « Énergie propre, lumière française » Thème unique (pas de mode sombre/clair) : lumière du jour, encre vert pin, CTA or solaire, accents feuille, aurora lever-de-soleil, pied de page vert forêt. ═══════════════════════════════════════════════════════════════ */ :root { /* ── Palette énergie ── */ --sun-400: #ffd166; /* or solaire clair */ --sun-500: #f4b41a; /* or solaire */ --leaf-500: #0e8a5f; /* vert énergie */ --leaf-600: #0a6b4a; /* vert profond */ --sky-500: #3b82c4; /* bleu ciel (données) */ --pine-900: #12231a; /* vert pin (encre) */ --forest-900: #0c2318; /* forêt (pied de page) */ /* Drapeau français (touche discrète) */ --fr-blue: #29418f; --fr-red: #ce3a3a; --fr-white: #f5f6f2; /* la bande blanche était le seul des trois en dur */ /* ── Texte sur fond SOMBRE ────────────────────────────────────────────── Le site a trois contextes sombres — pied de page vert forêt, hero vidéo, scène « nuit » — et chacun redéfinissait ses couleurs en dur, d'où trois blancs quasi identiques (#ffffff, #f1f6ee, #eef4ee) et deux gris-vert (#b7cbbc, #8fb39c) pour deux rôles qui n'en font qu'un. Regroupés ici. Tous confortablement conformes sur --forest-900 : 16,55:1 / 15,09:1 / 9,68:1. */ --ink-on-dark: #ffffff; /* titres */ --ink-on-dark-soft: #f1f6ee; /* corps de texte */ --muted-on-dark: #b7cbbc; /* légendes, mentions secondaires */ --badge-ink: #06251a; /* encre des pastilles de note A/B/C */ /* Alias hérités (composants existants) */ --yellow-400: var(--sun-400); --yellow-500: var(--sun-500); --blue-500: var(--sky-500); --blue-400: #6ba6d9; --navy-800: var(--leaf-600); --dark-0: var(--forest-900); --dark-1: var(--forest-900); --dark-2: #11311f; /* ── Surfaces : lumière du jour ── */ --bg: #f5f7f0; --bg-raised: #edf1e6; --surface: #ffffff; --surface-2: #e4ebdb; --ink: #12231a; --ink-soft: #3d5347; /* --muted sert aux légendes, méta et notes de bas de carte, c'est-à-dire à du texte de TAILLE NORMALE (--text-sm / --text-xs). L'ancienne valeur #69806f tombait à 3,95:1 sur --bg : sous le seuil AA de 4,5:1. Assombrie jusqu'au premier ton conforme sur les TROIS fonds où elle est posée — --bg 4,80:1, --surface 5,18:1, --bg-raised 4,52:1. */ --muted: #5d7263; --line: rgb(18 35 26 / 0.13); --line-mid: rgb(18 35 26 / 0.18); --line-strong: rgb(18 35 26 / 0.26); /* ── Interactif ── */ /* DEUX VERTS, DEUX RÔLES — ne pas les confondre : --accent APLATS et graphiques (fonds, jauges, traits). Le vert de marque. À 4,36:1 sur blanc il ne passe PAS le seuil AA du texte normal : ne jamais l'utiliser comme couleur de texte. --accent-text TEXTE et liens. 6,53:1 sur --surface, 6,05:1 sur --bg. Poser du blanc sur --accent tombe aussi à 4,36:1 : les boutons pleins utilisent --accent-deep (blanc à 6,53:1). */ --accent: #0e8a5f; /* aplats, jauges, graphes — JAMAIS du texte */ --accent-deep: #0a6b4a; /* fond des boutons pleins (blanc lisible dessus) */ --accent-soft: rgb(14 138 95 / 0.12); --accent-ink: #ffffff; --accent-text: var(--leaf-600); /* liens, eyebrows, accents éditoriaux */ /* CTA — or solaire, texte vert pin. Trois arrêts : la lumière entre par le haut-gauche, se pose au centre, s'approfondit vers le bas-droit — un dégradé à deux arrêts paraît plat à côté. */ --cta-grad: linear-gradient(135deg, #ffdd85, var(--sun-400) 38%, var(--sun-500)); --cta-ink: #1d2a12; --shadow-glow: 0 0 0 1px rgb(244 180 26 / 0.45), 0 4px 14px rgb(244 180 26 / 0.30), 0 14px 44px rgb(244 180 26 / 0.26); /* Verre clair. --card-shine est le liseré de lumière posé en inset sur le bord haut des cartes : c'est lui qui donne l'épaisseur « verre poli ». */ --glass: rgb(18 35 26 / 0.045); --glass-hover: rgb(18 35 26 / 0.09); --card-grad-a: rgb(255 255 255 / 0.96); --card-grad-b: rgb(255 255 255 / 0.68); --card-edge: rgb(255 255 255 / 0.9); --card-shine: inset 0 1px 0 rgb(255 255 255 / 0.85); --grid-line: rgb(18 35 26 / 0.05); /* Sémantique */ --save: #0e8a5f; /* économies */ --save-soft: rgb(14 138 95 / 0.13); /* #c97a10 ne donnait que 3,35:1 sur --surface. Assombri au premier ton conforme sur --bg (4,79:1), --surface (5,18:1) et --bg-raised (4,52:1). --warn-soft reste sur l'ancienne teinte : c'est un FOND, pas du texte. */ --warn: #9c5f0c; --warn-soft: rgb(201 122 16 / 0.14); /* #c74444 passait sur --surface (4,84:1) mais échouait sur les deux fonds teintés — --bg 4,48:1, --bg-raised 4,22:1. Un message d'erreur illisible sur la moitié des pages n'est pas une erreur lisible. Le blanc du badge E reste largement conforme dessus (5,19:1). */ --danger: #bf4141; --grade-a: #0e8a5f; --grade-b: #6aa421; --grade-c: #d9a406; --grade-d: #c97a10; --grade-e: #c74444; /* Aurora « lever de soleil sur la campagne » : soleil en haut à droite (double halo : cœur chaud + voile large), feuille à gauche, ciel en bas. Le cœur serré donne un vrai point de lumière ; l'ancien halo unique diluait le soleil en nappe uniforme. */ --aurora: radial-gradient(22rem 16rem at 86% -6%, rgb(255 209 102 / 0.22), transparent 70%), radial-gradient(48rem 34rem at 80% -12%, rgb(244 180 26 / 0.14), transparent 64%), radial-gradient(38rem 28rem at -8% 22%, rgb(14 138 95 / 0.12), transparent 60%), radial-gradient(54rem 38rem at 55% 115%, rgb(59 130 196 / 0.10), transparent 65%); /* ── Typographie ── Trois voix : Fraunces (serif éditoriale, chaleur française) porte les GRANDS titres ; Space Grotesk garde l'interface — boutons, marque, compteurs — où sa rondeur technique excelle ; Inter reste le texte courant. Graisses 560/640 : Fraunces est dessinée large, un 700 y paraîtrait gras et criard là où le 640 est simplement affirmé. */ --font-serif: 'Fraunces', 'Georgia', 'Times New Roman', serif; --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --font-text: 'Inter', 'Segoe UI', system-ui, sans-serif; --text-xs: 0.8rem; --text-sm: 0.9rem; --text-base: clamp(0.98rem, 0.94rem + 0.2vw, 1.06rem); --text-lg: 1.18rem; --text-xl: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); --text-2xl: clamp(1.7rem, 1.3rem + 2vw, 2.5rem); /* Titre de page intérieure. Cette valeur exacte était recopiée en style inline dans six gabarits (énergie, télécom, assurance, déménagement, entreprises, blog) : c'était une marche de l'échelle typographique qui n'avait simplement jamais été nommée. */ --text-3xl: clamp(2.2rem, 1.4rem + 3.5vw, 4rem); --text-hero: clamp(2.6rem, 1.4rem + 5.5vw, 5.4rem); /* ── Rythme ── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-section: clamp(4rem, 3rem + 4vw, 8rem); /* ── Points de rupture ──────────────────────────────────────────────── ÉCHELLE À QUATRE MARCHES, ET RIEN D'AUTRE : xs 600px · sm 720px · md 920px · lg 1024px Il y en avait huit, tous choisis à l'œil (560, 700, 780, 820, 860, 880, 920, 980) : deux composants voisins basculaient à 60px d'écart sans qu'aucune intention ne le justifie. var() NE FONCTIONNE PAS dans une requête @media — ces valeurs ne peuvent donc pas être des jetons, elles sont écrites en clair. Cette liste est la référence : n'en inventer aucune autre. Le regroupement s'est toujours fait VERS LE HAUT (820 -> 920, 980 -> 1024). Un composant bascule donc un peu plus tôt qu'à l'origine, jamais plus tard : il gagne de la place, il n'en perd pas. C'est le seul sens sûr quand on ne peut pas comparer visuellement avant/après. Les contraintes en max-height (hero plein écran) sont un axe distinct et restent inchangées. */ --container: 1180px; --radius-sm: 10px; --radius: 16px; --radius-lg: 26px; --radius-pill: 999px; /* ── Profondeur (ombres douces teintées de vert) ── Trois couches par ombre : contact (1-2px, nette), portée (moyenne), ambiance (large et très diffuse). C'est la couche d'ambiance qui fait « flotter » les cartes ; les deux premières les ancrent. */ --border-pop: 1px solid var(--line-strong); --shadow-sm: 0 1px 2px rgb(16 40 28 / 0.06), 0 4px 10px rgb(16 40 28 / 0.04), 0 12px 32px rgb(16 40 28 / 0.06); --shadow: 0 1px 2px rgb(16 40 28 / 0.06), 0 6px 16px rgb(16 40 28 / 0.06), 0 20px 48px rgb(16 40 28 / 0.10); --shadow-lg: 0 2px 4px rgb(16 40 28 / 0.07), 0 12px 28px rgb(16 40 28 / 0.09), 0 32px 72px rgb(16 40 28 / 0.16); --shadow-pop: var(--shadow-sm); --shadow-pop-lg: var(--shadow-lg); /* ── Mouvement ── */ --duration-fast: 150ms; --duration: 300ms; --duration-slow: 600ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); accent-color: var(--leaf-500); color-scheme: light; } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration: 1ms; --duration-slow: 1ms; } }