/* Ben Dev — Tokens du design system Portés depuis le thème classique en production (Ben-classic-theme-blue/style.css) et design/theme.json. Miroir des presets éditeur dans theme.json — garder les deux fichiers en phase. */ /* ============ WEBFONTS (auto-hébergées) ============ Polices servies depuis le thème (assets/fonts/), PAS depuis fonts.googleapis.com : un @import Google transmet l'IP du visiteur à Google à chaque page vue (la CNIL le déconseille) et impose un aller-retour DNS/TLS supplémentaire avant le rendu. Fichiers : les .woff2 VARIABLES de Google Fonts, sous-ensembles latin + latin-ext (les seuls utiles pour un site FR) — un fichier couvre toute la plage de graisses, d'où `font-weight: ` ci-dessous : ne PAS le remplacer par une graisse fixe, les 600/700/800 du design cesseraient de fonctionner. ⚠️ Les fichiers ont été ALLÉGÉS (fontTools varLib.instancer) : axes inutiles retirés (`wdth` de Bricolage, `opsz` d'Inter — qui n'agit qu'au-delà de 32 px) et plage de graisses ramenée aux 400→800 réellement employées. D'où −50 % de poids (Bricolage latin 128 → 71 Ko, Inter latin 71 → 36 Ko), ces polices étant à elles seules tout le CLS de la page. Conséquence : les bornes ci-dessous DOIVENT rester `400 800` (annoncer `200 800` ferait synthétiser des graisses absentes du fichier). Re-télécharger une police depuis Google = refaire l'instanciation. L'axe `opsz` de Bricolage est CONSERVÉ : le pincer changerait le dessin des titres. ⚠️ L'ancien @import demandait `Bricolage Grotesque:opsz,wght@10..48,…` — plage opsz invalide (la vraie va de 12 à 96) : Google répondait « 400: Font family not found » et la police des TITRES n'était en réalité jamais chargée (repli système). */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ============ COULEURS ============ */ /* Neutres (échelle Tailwind, cohérente avec la source) */ --neutral-0: #FFFFFF; --neutral-50: #FAFAFA; --neutral-100: #F3F4F6; --neutral-200: #E5E7EB; --neutral-300: #D1D5DB; /* AJOUT vs source : --gray-300 était référencé (table .no) mais jamais défini dans le style.css classique — bug corrigé ici, cohérent avec le reste de l'échelle Tailwind. */ --neutral-500: #6B7280; --neutral-700: #374151; --neutral-900: #0A0A0A; /* Accent de marque — cyan depuis la refonte (l'ancien bleu #2D5BD9 est retiré). */ --accent-500: #00A8C4; /* Réservé aux fonds/bordures/décoratif (boutons, badges, survols) : jamais comme couleur de TEXTE sur blanc, où il ne fait que 2,83:1 — sous le seuil AA. */ --accent-600: #00819B; /* « Cyan foncé » de la maquette, 4,55:1 sur blanc. Le 29/07/2026 --accent-500 avait été gardé partout par choix assumé ; l'audit du 30/07/2026 est revenu dessus pour le texte lisible (voir --neon-cyan-ink ci-dessous et .pricing-price / .service-card-number / les bandes « hello-section » passées de accent à accent-dark). */ /* Accents néon — PURS sur fond sombre uniquement (glow autorisé là seulement) */ --neon-cyan: #2BE4FF; --neon-coral: #FF6B57; --neon-lime: #B4F52D; --neon-yellow: #FFD21E; /* Encres néon — versions lisibles sur fond clair, sans glow. --neon-yellow-ink n'est pas dans la maquette : elle code #9C7C00 en dur à trois endroits (séparateur du bandeau, titre de colonne du footer, accent d'abonnement). Nommé ici pour rester modifiable. 3,96:1 sur blanc → réservé au décoratif et au grand texte (le prix d'abonnement, en gras ≥18,66px, où le seuil tombe à 3:1) ; jamais pour du texte courant. --neon-lime-ink corrigé le 30/07/2026 : #7BA815 ne faisait que 2,81:1 (sous le seuil même « grand texte »), remonté à #5C7E10 (4,72:1). --neon-cyan-ink alias --accent-600 pour la même raison (l'ancien #00A8C4 ne faisait que 2,83:1 sur blanc). */ --neon-cyan-ink: var(--accent-600); --neon-coral-ink: #F04E38; --neon-lime-ink: #5C7E10; --neon-yellow-ink: #9C7C00; /* Glow — jamais sur fond clair */ --glow-cyan: 0 0 22px rgba(43, 228, 255, 0.45); --glow-coral: 0 0 22px rgba(255, 107, 87, 0.45); --glow-lime: 0 0 22px rgba(180, 245, 45, 0.45); --glow-yellow: 0 0 22px rgba(255, 210, 30, 0.45); /* Grille « tech » des bandes sombres */ --grid-line: rgba(255, 255, 255, 0.05); /* Alias sémantiques — surfaces */ --surface-page: var(--neutral-0); --surface-card: var(--neutral-0); --surface-alt: var(--neutral-50); --surface-band: var(--neutral-50); --surface-inverse: var(--neutral-900); --surface-hero: var(--neutral-900); /* héro sombre par défaut ; l'accueil le renverse via .hero.is-light */ /* Alias sémantiques — texte */ --text-heading: var(--neutral-900); --text-body: var(--neutral-700); --text-muted: var(--neutral-500); --text-accent: var(--accent-500); --text-accent-on-dark: var(--neon-cyan); /* remplace l'ancien --accent-300 : sur #0A0A0A le cyan néon monte à ~13:1 */ --text-on-dark: var(--neutral-0); --text-muted-on-dark: var(--neutral-300); /* Bordures */ --border-soft: var(--neutral-200); --border-strong: var(--neutral-900); /* ============ TYPOGRAPHIE ============ */ --font-display: 'Bricolage Grotesque', 'Montserrat', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --type-eyebrow-size: 0.75rem; --type-eyebrow-spacing: 0.15em; /* Échelle typo (clamp responsive, fidèle à la source) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: clamp(1.25rem, 2vw, 1.5rem); --text-2xl: clamp(1.8rem, 4vw, 2.5rem); --text-3xl: clamp(2.25rem, 5.5vw, 4rem); --text-display: clamp(2.5rem, 7vw, 4.5rem); /* ============ ESPACEMENTS ============ */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px; --space-section: 96px; /* Layout fluide (PAS de max-width fixe — cf. .container dans main.css) */ --section-padding: clamp(4rem, 8vw, 7rem); --grid-gap: 1.5rem; /* ============ RAYONS ============ */ /* Neo-brutalisme : angles vifs partout, aucune exception. */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-pill: 0; /* ============ OMBRES ============ */ --shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.05); --shadow-sm: 0 2px 8px rgba(10, 10, 10, 0.07); --shadow-md: 0 4px 12px rgba(10, 10, 10, 0.08); --shadow-lg: 0 12px 32px rgba(10, 10, 10, 0.12); --shadow-card: 0 14px 32px rgba(10, 10, 10, 0.12); --shadow-btn: 0 6px 16px rgba(0, 168, 196, 0.30); --shadow-offset-accent: 8px 8px 0 var(--accent-500); /* ombre décalée hover cartes services */ /* ============ TRANSITIONS ============ */ --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1); }