/* ========================================================================== OPTIMIZ BTP — Design tokens Chargé en PREMIER. Aucune valeur brute ne doit exister hors de ce fichier. Contrat visuel : _notes-projet/DESIGN-REFERENCE.md §3 Palette : 3 couleurs, jamais une de plus. Toute nuance est une OPACITÉ. ========================================================================== */ :root { /* ---- Palette de marque — STRICTE --------------------------------------- Ajouter une 4e teinte est un piège documenté (PROJECT-MAP, P6). Les nuances se font en opacité, pas en nouvelle couleur. */ --black: #000000; --white: #ffffff; --gold: #e1ba66; /* ---- Thème sombre (défaut) -------------------------------------------- Contrastes mesurés : blanc/noir 21:1 · or/noir 11,4:1 · muted 7,9:1 */ --bg: var(--black); --fg: var(--white); --muted: rgb(255 255 255 / .62); --muted-strong: rgb(255 255 255 / .78); --line: rgb(255 255 255 / .16); --line-soft: rgb(255 255 255 / .08); --surface: rgb(255 255 255 / .045); --surface-hover: rgb(255 255 255 / .075); /* Distinct de --surface (2026-09-08, retour utilisateur) : --surface sert aux CARTES/COMPOSANTS (cartes, callouts, champs…), une nuance fine y est voulue — l'ancien fond de .section--surface (4,5 %) restait quasi imperceptible pour une SECTION entière, en particulier en thème clair. Opacité doublée, toujours une nuance de --white (jamais une 4e teinte, règle de palette ci-dessus) — visible sans jamais devenir un aplat dur. */ --section-surface: rgb(255 255 255 / .09); /* Accent — l'or porte 11,4:1 sur fond sombre : usage texte autorisé ici */ --accent: var(--gold); --accent-ink: var(--black); /* texte POSÉ SUR un aplat d'or */ --accent-soft: rgb(225 186 102 / .14); --accent-line: rgb(225 186 102 / .38); /* Halo d'or — sert UNIQUEMENT en box-shadow diffuse (lanceur de l'assistant). Ce n'est pas une 4e teinte : c'est --gold en opacité, comme toutes les nuances de ce fichier. */ --accent-glow: rgb(225 186 102 / .10); --accent-glow-strong: rgb(225 186 102 / .20); /* Focus — doit tenir ≥ 3:1. Or sur noir = 11,4:1 ✅ */ --focus: var(--gold); /* ---- États ------------------------------------------------------------ Hors palette de marque : fonctionnels, jamais décoratifs. Deux valeurs par état, une par thème — un seul rouge ne peut pas tenir le contraste sur fond noir ET sur fond blanc. */ --error: #ff8a80; /* 9,2:1 sur noir */ --success: #7ddba0; /* 11,0:1 sur noir */ --warning: var(--gold); /* ---- Typographie ------------------------------------------------------- Space Grotesk + Inter — SIL OFL 1.1, auto-hébergées (jamais Google CDN) */ --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; /* Échelle fluide. --text-base ne descend JAMAIS sous 16px (zoom iOS) */ --text-xs: clamp(.75rem, .72rem + .15vw, .8125rem); --text-sm: clamp(.875rem, .85rem + .2vw, .9375rem); --text-base: clamp(1rem, .96rem + .2vw, 1.0625rem); --text-lg: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); --text-xl: clamp(1.375rem, 1.2rem + .8vw, 1.875rem); --text-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); --text-3xl: clamp(2.25rem, 1.6rem + 3vw, 4rem); --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --leading-tight: 1.1; /* titres display */ --leading-snug: 1.35; --leading-body: 1.7; /* corps — WCAG exige ≥ 1.5 */ --measure: 62ch; /* largeur de lecture maximale */ --tracking-tight: -.02em; --tracking-wide: .08em; /* eyebrows, petites capitales */ /* ---- Espacements — échelle 4px ---------------------------------------- */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* Densité très aérée : c'est le principal véhicule du premium quand on n'a ni chiffres, ni références clients, ni photos de réalisations. */ --section-pad: clamp(4.5rem, 2.5rem + 8vw, 9rem); --section-pad-sm: clamp(3rem, 2rem + 4vw, 5rem); /* Distance eyebrow → titre : CONSTANTE sur tout le site. Piège du kit : des gaps hérités de chaque conteneur produisent des écarts de 0 à 26px selon les sections. Un token unique l'évite. */ --gap-eyebrow: 1.75rem; /* ---- Structure --------------------------------------------------------- */ --container-max: 1180px; --container-pad: clamp(1.25rem, .8rem + 2vw, 2.5rem); /* Angles vifs dominants — marqueur du registre institutionnel haut de gamme */ --radius-sm: 2px; --radius: 4px; --radius-lg: 8px; --radius-pill: 999px; /* Profondeur par filets et surfaces, PAS par ombres portées. --shadow-soft est réservé aux calques flottants (menu mobile, modale). */ --shadow-none: none; --shadow-soft: 0 24px 70px rgb(0 0 0 / .45); /* ---- Motion ------------------------------------------------------------ Relevé sur la version actuelle : .2s micro · .25-.3s état · .4-.5s révélation */ --motion-fast: 200ms; --motion-base: 300ms; --motion-slow: 500ms; --ease: cubic-bezier(.4, 0, .2, 1); --reveal-shift: 24px; /* translation d'apparition au scroll */ --reveal-stagger: 80ms; /* cascade entre éléments frères */ /* ---- Couches ----------------------------------------------------------- */ --z-base: 1; --z-sticky: 20; --z-float: 30; --z-overlay: 90; --z-banner: 100; --z-modal: 110; --z-preloader: 200; /* toujours au-dessus de tout — premier paint de la page */ /* ---- Divers ------------------------------------------------------------ */ --header-h: 72px; --tap-min: 44px; /* zone tactile minimale (48px en menu mobile) */ } /* ========================================================================== Thème clair Appliqué par page via , pas par section : l'alternance se joue à l'échelle du parcours, pas du mille-feuille. ========================================================================== */ [data-theme="light"] { --bg: var(--white); --fg: var(--black); --muted: rgb(0 0 0 / .64); --muted-strong: rgb(0 0 0 / .8); --line: rgb(0 0 0 / .15); --line-soft: rgb(0 0 0 / .07); --surface: rgb(0 0 0 / .04); --surface-hover: rgb(0 0 0 / .07); /* Voir la note miroir dans le thème sombre ci-dessus : opacité doublée par rapport à --surface, réservée au fond de .section--surface. */ --section-surface: rgb(0 0 0 / .07); /* ⛔ L'OR NE SERT JAMAIS DE COULEUR DE TEXTE ICI. Mesuré : #e1ba66 sur #ffffff = 1,84:1 — très loin des 4,5:1 requis. Il n'existe qu'en aplat de fond, en filet ou en accent non porteur d'information. Aucune exception, y compris « parce que c'est joli ». Voir PROJECT-MAP, piège P5. */ --accent: var(--gold); /* fonds et filets uniquement */ --accent-ink: var(--black); --accent-soft: rgb(225 186 102 / .18); --accent-line: rgb(225 186 102 / .55); /* Plus appuyé sur blanc : à .10 le halo était strictement invisible. */ --accent-glow: rgb(225 186 102 / .22); --accent-glow-strong: rgb(225 186 102 / .38); /* Le focus repasse en noir : l'or ne tient pas le contraste sur blanc */ --focus: var(--black); --error: #b3261e; /* 6,5:1 sur blanc */ --success: #1e7d47; /* 5,0:1 sur blanc */ --shadow-soft: 0 24px 70px rgb(0 0 0 / .13); } /* ========================================================================== Accessibilité — mouvement réduit Neutralise TOUT : révélations, parallaxe, scènes 3D, transitions. Le contenu reste intégralement accessible sans une seule animation. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; --reveal-shift: 0px; --reveal-stagger: 0ms; } }