/* =================================================== RM MOUSTIQUAIRES — tokens.css Système de design. Aucune règle de composant ici, uniquement des variables. Deux principes non négociables, tout le reste en découle : 1. MONO / SANS. Ce qui est métadonnée (eyebrow, bouton, nav, numéro, chiffre, coordonnées, adresse, badge) est en Geist Mono CAPITALES avec du tracking positif. Ce qui est discours (titres de section, paragraphes) est en Geist casse normale avec du tracking négatif. 2. AUCUN GRAS. Tous les titres sont en 400. Le 500 n'existe que sur les boutons. La hiérarchie vient de la taille et du tracking, jamais de la graisse. C'est ce qui sépare une marque d'un site de PME. =================================================== */ :root { /* === Familles === Geist Mono en premier dans sa pile : sur un fallback, on veut une autre mono, pas un sans-serif qui casserait la lecture des chiffres alignés. */ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* === Couleur === L'or vient du logo. C'est le SEUL accent de la page et il est rationné à cinq usages : bouton primaire, carré des eyebrows, lien de nav actif, bordure d'un item survolé, barre de progression. Nulle part ailleurs. */ --gold: #C29A57; --gold-hover: #D9B87A; --gold-deep: #8A6733; /* or lisible en texte sur fond clair (AA) */ /* Le noir est teinté chaud, pas neutre : posé à côté de l'or, un #000 pur vire au bleu par contraste simultané. */ --black: #100D08; --white: #FFFFFF; /* Rampe de gris volontairement GREIGE, jamais neutre. C'est le détail qui empêche la palette de ressembler à du Bootstrap — l'équivalent chaud de la rampe verdâtre de la référence. */ --neutral-100: #FAF8F4; --neutral-200: #F2EFE9; --neutral-300: #E7E3DC; --neutral-400: #D6D0C6; --neutral-500: #B4ADA1; --neutral-600: #8A8478; --neutral-700: #5E5A52; --neutral-800: #2E2B26; --neutral-900: #1A1815; /* Rôles sémantiques. Ils basculent avec le thème de scroll (voir plus bas) — n'utilise jamais les valeurs brutes ci-dessus dans un composant, toujours ces rôles-ci. */ --bg: var(--white); --text: var(--neutral-900); --text-muted: var(--neutral-700); --line: var(--neutral-300); --line-strong: var(--neutral-400); --surface: var(--neutral-100); --nav-bg: rgb(255 255 255 / .72); --nav-border: var(--neutral-300); /* === Échelle typographique === Construite sur le NOMBRE D'OR (φ = 1,618). Chaque cran vaut √φ ≈ 1,272, donc deux crans font exactement φ. Plus aucune taille arbitraire : à partir d'un corps de 17px, l'échelle donne 13,4 / 15,1 / 17 / 19,2 / 21,6 / 27,5 / 31 / 35 / 44,5 / 56,6. Chaque cran est FLUIDE : un clamp() interpole entre la valeur mini à 375px de large et la valeur maxi à 1600px. Les tailles suivent donc la largeur de la fenêtre en continu, y compris entre deux formats desktop — il n'y a plus de palier où le texte reste figé. Plancher volontaire à 13px : en dessous, un texte cesse d'être lisible confortablement, quel que soit le raffinement de la grille. */ --text-xs: clamp(0.8125rem, 0.7934rem + 0.0816vw, 0.875rem); /* 13 → 14 */ --text-sm: clamp(0.875rem, 0.8482rem + 0.1143vw, 0.9625rem); /* 14 → 15,4 */ --text-base: clamp(1rem, 0.9713rem + 0.1224vw, 1.0938rem); /* 16 → 17,5 */ --text-lg: clamp(1.0625rem, 0.9745rem + 0.3755vw, 1.35rem); /* 17 → 21,6 */ --text-xl: clamp(1.1875rem, 1.0249rem + 0.6939vw, 1.7188rem); /* 19 → 27,5 */ --text-h5: clamp(1.3125rem, 1.1881rem + 0.5306vw, 1.7188rem); /* 21 → 27,5 */ --text-h4: clamp(1.5rem, 1.2895rem + 0.898vw, 2.1875rem); /* 24 → 35 */ --text-h3: clamp(1.75rem, 1.4343rem + 1.3469vw, 2.7812rem); /* 28 → 44,5 */ --text-h2: clamp(2rem, 1.5312rem + 2vw, 3.5312rem); /* 32 → 56,5 */ --text-disp: clamp(2.125rem, 1.398rem + 3.102vw, 4.5rem); /* 34 → 72 */ /* Alias conservés pour les composants */ --text-body: var(--text-base); --text-small: var(--text-sm); --text-xsmall: var(--text-xs); --text-large: var(--text-lg); --display: var(--text-disp); --h2: var(--text-h2); --h3: var(--text-h3); --h4: var(--text-h4); --h5: var(--text-h5); --eyebrow: var(--text-xs); /* Tracking. Négatif sur l'éditorial, positif sur le fonctionnel : les deux moitiés de la règle mono/sans. */ --track-display: -.035em; --track-h2: -.03em; --track-h3: -.025em; --track-h4: -.02em; --track-eyebrow: .05em; --track-button: .05em; --track-nav: .045em; --lh-tight: 1.04; --lh-title: 1.12; --lh-body: 1.5; /* === Espacement === Généreux. La faible densité est ce qui lit comme "cher" ; c'est le levier le plus rentable de tout ce fichier. */ /* === Espacement — base de 4px === Tout est un multiple de 4. Les valeurs restent FLUIDES (clamp) pour suivre la largeur sans palier, mais les deux extrémités de chaque intervalle tombent exactement sur la grille : à 375px comme à 1600px, chaque espacement est un multiple de 4px. Entre les deux, la valeur interpole — c'est le prix de la fluidité, et le seul endroit où elle quitte la grille. Les gaps étaient en em, donc indexés sur la taille de police du parent : la même classe ne donnait pas la même distance selon l'endroit. Ils passent en rem, donc en valeur absolue. */ --space-section: clamp(3.5rem, 2.276rem + 5.224vw, 7.5rem); /* 56 → 120 */ --space-global: clamp(1.25rem, 0.714rem + 2.286vw, 3rem); /* 20 → 48 */ --gap-xl: clamp(2.5rem, 1.122rem + 5.878vw, 7rem); /* 40 → 112 */ --gap-lg: clamp(2rem, 1.3878rem + 2.6122vw, 4rem); /* 32 → 64 */ --gap-md: clamp(1.5rem, 1.3469rem + 0.6531vw, 2rem); /* 24 → 32 */ --gap-sm: 1rem; /* 16 */ --container-large: 100em; --container-medium: 70em; --max-text-medium: 48em; --max-text-large: 56em; /* === Rayons === Très serrés, jamais au-delà de 8px. Délibérément anguleux : c'est la moitié du caractère du design. */ --radius-sm: 4px; --radius-md: 8px; /* === Mouvement === Une seule courbe signature sur tout le site. Départ lent, arrivée très amortie. La cohérence d'easing est ce qui fait qu'un site "se sent" fini. */ --ease: cubic-bezier(.625, .05, 0, 1); --ease-button: cubic-bezier(.215, .61, .355, 1); --dur: 600ms; --dur-fast: 200ms; /* Le trait de 1px est l'unité structurelle du design. Aucune ombre portée nulle part, sauf celle-ci, quasi invisible, sur la nav flottante. */ --shadow-nav: 0 1px 4px rgb(0 0 0 / .08); } /* --- Alignement sur la grille de 4px --- Une valeur fluide en clamp() ne tombe sur un multiple de 4 qu'aux deux extrémités de son intervalle : mesuré, 8 valeurs sur 9 étaient hors grille à 480px et à 768px, et seules les largeurs 320-375 et 1600+ étaient justes. round() arrondit au pas de 4px À TOUTE largeur, ce que clamp() seul ne sait pas faire. Déclaré dans un @supports, après les valeurs simples : un navigateur qui ne connaît pas round() garde le clamp fluide, qui reste correct, seulement pas aligné. Sans cette précaution, la déclaration deviendrait invalide et l'espacement disparaîtrait entièrement. */ @supports (height: round(1px, 1px)) { :root { --space-section: round(clamp(3.5rem, 2.276rem + 5.224vw, 7.5rem), 4px); --space-global: round(clamp(1.25rem, 0.714rem + 2.286vw, 3rem), 4px); --gap-lg: round(clamp(2rem, 1.3878rem + 2.6122vw, 4rem), 4px); --gap-md: round(clamp(1.5rem, 1.3469rem + 0.6531vw, 2rem), 4px); } } /* === Thème sombre === Piloté par data-theme-status sur , basculé au scroll (voir js/motion.js). Seuls les RÔLES changent : aucun composant n'a besoin de connaître le thème. */ [data-theme-status="dark"] { --bg: var(--black); --text: var(--neutral-100); /* Le gris moyen qui fonctionne sur fond clair devient illisible sur fond noir. Sur sombre, le texte courant est blanc, pas gris. */ --text-muted: var(--neutral-200); --line: var(--neutral-800); --line-strong: var(--neutral-700); --surface: var(--neutral-900); --nav-bg: rgb(0 0 0 / .55); --nav-border: var(--neutral-800); } /* Le visiteur qui a demandé moins d'animation le pense vraiment : on coupe tout, on ne se contente pas de raccourcir les durées. */ @media (prefers-reduced-motion: reduce) { :root { --dur: 1ms; --dur-fast: 1ms; } }