/* ============================================================= HERE — tokens.css Source unique de vérité de la charte (couleurs, typo, espacements). Dérivé des maquettes Figma « Here » (Reims — champagne / lieu haut de gamme). AUCUNE valeur de style en dur ailleurs : tout passe par ces variables. Statut des valeurs : ✅ = relevé fiable depuis les maquettes ⚠️ = PROVISOIRE — à confirmer sur les vraies valeurs Figma (rate-limit MCP atteint : voir tâche « Confirmer polices + vert ») ============================================================= */ :root { /* --------------------------------------------------------- 1. COULEURS Site clair d'abord (papier blanc cassé + encre noire), avec des sections image plein cadre sombres et un vert forêt en couleur de signature. --------------------------------------------------------- */ /* Fonds clairs */ --color-bg: #FCFCFC; /* ✅ papier principal (Home, Contact, What's up) */ --color-bg-alt: #F4F3EF; /* ⚠️ papier chaud alt (sections/cartes) — à affiner */ /* Fonds sombres (héros image, Private Events, sections plein cadre) */ --color-surface-dark: #0C0C0C; /* ✅ quasi-noir des sections sombres */ --color-surface-green: #2A3E2F; /* ✅ vert forêt de marque (confirmé Figma) */ /* Encre / texte */ --color-text: #0C0C0C; /* ✅ texte principal sur fond clair */ --color-text-soft: #54544A; /* ⚠️ texte secondaire / légendes (gris chaud) */ --color-text-invert: #FCFCFC; /* ✅ texte sur fond sombre/vert */ /* Filets & bordures */ --color-line: #D8D8D8; /* ✅ hairline sur fond clair */ --color-line-soft: #E8E8E4; /* ⚠️ filet très discret */ --color-line-invert: rgba(255,255,255,.18); /* filet sur fond sombre */ /* Accent de marque (dérivé du vert de signature) */ --color-accent: var(--color-surface-green); /* alias sémantique */ --color-accent-deep: #1D2B21; /* ✅ vert plus profond (hover / aplats), dérivé de #2A3E2F */ /* États */ --color-focus: #2A3E2F; /* anneau de focus accessibilité */ /* --------------------------------------------------------- 2. TYPOGRAPHIE ⚠️ FAMILLES À CONFIRMER — les polices ne sont pas lisibles depuis les pixels. Placeholders neutres pour que le styleguide s'affiche proprement ; à remplacer par les polices réelles du Figma (voir tâche de confirmation). --------------------------------------------------------- */ /* Familles */ --font-display: "Quablo", "Helvetica Neue", Arial, sans-serif; /* ✅ display / wordmark — Quablo SemiBold (600), geometric sans */ --font-body: "Poppins", system-ui, -apple-system, Helvetica, Arial, sans-serif; /* ✅ corps — Poppins Medium (500) */ --font-label: var(--font-body); /* petites capitales espacées (labels rubriques) */ --fw-display: 600; /* ✅ graisse du wordmark/display Quablo (SemiBold) */ --fw-body: 500; /* ✅ graisse du corps Poppins (Medium) */ /* Graisses */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* Échelle typo fluide (clamp — web-quality, mobile → 4K) */ --fs-display: clamp(2.75rem, 1.6rem + 5.5vw, 6.5rem); /* héros / wordmark */ --fs-h1: clamp(2rem, 1.3rem + 3.2vw, 4rem); --fs-h2: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); --fs-h3: clamp(1.2rem, 1rem + 0.9vw, 1.6rem); --fs-body: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); --fs-small: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); /* Plancher relevé à 12,5px : ce jeton alimente TOUTE la navigation, les libellés de formulaire, les dates et les compteurs. Mesuré avant : 11px à 390px de large, 12px à 1440 — sous le plancher de lisibilité. */ --fs-label: clamp(0.79rem, 0.77rem + 0.1vw, 0.875rem); /* labels UPPERCASE */ /* Interlignage */ --lh-tight: 1.05; /* grands titres */ --lh-snug: 1.25; /* ⚠️ `--lh-k` — coefficient d'interligne du site, réglable au banc pendant la mise au point. Il ne porte QUE sur les deux interlignes de texte courant : les titres gardent le leur (`--lh-tight`), qui est une décision de dessin et non de lecture — l'étirer décollerait les lignes d'un grand titre. Quand la valeur sera arrêtée, on écrit les deux nombres et le coefficient disparaît. */ --lh-k: 1; --lh-body: calc(1.35 * var(--lh-k)); /* ✅ corps Poppins — 27/20 Figma */ --lh-read: calc(1.6 * var(--lh-k)); /* interligne lecture longue (paragraphes) */ /* Interlettrage */ --ls-wordmark: 4.1em; /* ✅ 410% Figma (= 4.1em) — wordmark « H E R E . » HERO (70px), centré, uppercase */ --ls-wordmark-compact: 0.15em; /* wordmark réduit (header / nav) — cf. « HERE. » compact du header Home */ --ls-body: 0.04em; /* ✅ 4% Figma — corps Poppins */ --ls-label: 0.22em; /* petites capitales rubriques */ --ls-tight: -0.01em; /* grands titres */ /* ── LE PIED DE PAGE, RELEVÉ SUR LE FIGMA (node 395:1785, le 22/08/2026) ── Le pied ne suivait aucune de ces valeurs : il empruntait `--fs-small` (14 px au plus) et `--lh-read` (1,6, soit 25,6 px) là où la maquette dit 16 px sur 19. Trois écarts relevés, tous corrigés ici : · corps 16 px partout, en Poppins **Regular (400)** — pas le Medium du reste du site : c'est ce que dit la maquette pour ce bloc-là ; · DEUX interlignes distincts — 19 px pour le bloc d'adresse (serré, c'est une carte de visite) et 20 px pour les colonnes de liens ; · interlettrage 0,04 em sur les colonnes (0,64 px sur 16), et non les 0,22 em des petites capitales de rubrique. Les titres de colonne sont en **Quablo SemiBold**, pas en Poppins. Le coefficient global `--lh-k` s'applique quand même : la valeur Figma est le point de départ, pas un plafond. */ --fs-foot: 1rem; /* 16 px */ --lh-foot-adresse: calc(1.1875 * var(--lh-k)); /* 19/16 */ --lh-foot-liens: calc(1.25 * var(--lh-k)); /* 20/16 */ --ls-foot: 0.04em; /* 0,64 px sur 16 */ --fw-foot: 400; /* Poppins Regular — cf. ci-dessus */ --fs-foot-signe: 2.5rem; /* 40 px — le « HERE. » du pied */ --ls-foot-signe: 0.01em; /* 0,4 px sur 40 */ /* --------------------------------------------------------- 3. ESPACEMENTS (échelle 4/8 + espaces de section fluides) --------------------------------------------------------- */ --space-2: 0.125rem; --space-4: 0.25rem; --space-8: 0.5rem; --space-12: 0.75rem; --space-16: 1rem; --space-24: 1.5rem; --space-32: 2rem; --space-48: 3rem; --space-64: 4rem; --space-96: 6rem; /* Respirations de section (fluides) */ --section-y: clamp(3.5rem, 2rem + 7vw, 9rem); --gutter: clamp(1.25rem, 0.8rem + 2vw, 3rem); /* marge latérale */ /* ⚠️ EN REM, PAS EN PIXELS — 30/08/2026. 102rem valent exactement 1632px au corps de référence (16px) : rien ne change en dessous de 1728px. Au-dessus, le corps racine grandit (voir le bloc « MISE À L'ÉCHELLE » en fin de fichier) et la colonne grandit avec lui. Écrite en pixels, elle restait figée à 1632 quelle que soit la taille de l'écran. */ /* La réserve de dérive : le film est agrandi d'autant dans son cadre pour que la parallaxe puisse le faire glisser sans jamais découvrir de bord. Déclarée ici parce que DEUX endroits doivent s'accorder — le film de l'accueil et celui que le passage installe. S'ils divergent, le cadrage saute au clic (constaté le 31/08 : 60,5 % des pixels changeaient sur une image pourtant identique du film). */ --reserve-derive: 1.14; /* LA COLONNE DE CONTENU, et la marge qui en découle. Les maquettes posent le contenu à 48 px du bord en 1728 : 1632 sur 1728, soit 94,4444 % — c'est CETTE PROPORTION qui est la règle, pas la valeur en pixels. ⚠️ 102rem SEUL DÉCROCHE SUR LES GRANDS ÉCRANS — mesuré le 07/09 sur le 4K de Guillaume, qui trouvait le mot-symbole trop loin du bord à gauche et le menu trop loin à droite. Le corps racine est plafonné à 28 px (atteint exactement à 3840) : entre 1728 et 3840 l'écran est multiplié par 2,22 et le corps racine par 1,75 seulement. La colonne prend donc du retard, et tout l'écart part dans les marges — 48 px et 2,8 % en 1728, mais 492 px et 12,8 % en 3840, soit 4,6 fois plus en proportion. Ce n'était PAS un défaut de l'en-tête : il se cale sur cette colonne (`pages.css`, `.site-head{padding-inline: …}`) pour s'aligner sur le titre du hero, et il le faisait bien — à 3840 le mot-symbole, le titre et le corps commençaient tous les trois à 492 px, ensemble. C'est la référence qui décrochait, pas ce qui la suit. `max()` rétablit la proportion sans rien changer en deçà : les deux termes sont égaux à 1728 par construction, et en dessous c'est la gouttière qui l'emporte déjà dans le calcul de l'en-tête. Les paragraphes, eux, restent bornés par `--measure` : la colonne s'élargit, la ligne de lecture non. */ --content-max: max(102rem, 94.4444vw); /* = 1632px en 1728 (les maquettes) */ /* Marie-louise — le passe-partout de papier posé sur les quatre bords de la fenêtre, sur les pages rubrique. Vaut 0 partout ailleurs : toutes les règles qui s'y réfèrent (header, wrap, pied, compteur) restent donc neutres hors des pages encadrées. La valeur réelle est posée par `body.has-ml`. RÈGLE : le cadre est pris DANS la gouttière, jamais ajouté par-dessus. Les maquettes posent le contenu à 48 px du bord de l'écran en 1728 (d'où --content-max: 1632 = 1728 − 2 × 48). Un cadre ajouté à la gouttière repoussait tout à 71 et cassait cet alignement. Un tiers pour le papier, deux tiers pour le blanc : le total reste la gouttière, à toute largeur. */ --ml: 0px; --measure: 68ch; /* largeur de paragraphe confort */ /* --------------------------------------------------------- 4. RADIUS, FILETS, OMBRES Esthétique éditoriale : angles nets, quasi pas d'ombres. --------------------------------------------------------- */ --radius-0: 0; /* défaut : coins nets (éditorial) */ --radius-sm: 2px; --radius-md: 4px; --hairline: 1px; /* épaisseur des filets */ --shadow-none: none; --shadow-soft: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05); /* --------------------------------------------------------- 5. MOUVEMENT — tokens alignés sur la `motion-charte` (autoritaire) --------------------------------------------------------- */ --dur-instant: 100ms; /* feedback : couleur/opacité, sans déplacement */ --dur-fast: 180ms; /* micro-interactions : hover, focus */ --dur-base: 260ms; /* défaut : apparition d'élément, fade */ --dur-slow: 420ms; /* modale, panneau, changement de vue */ --dur-slide: 600ms; /* entrée de section/hero — plafond */ --ease-out: cubic-bezier(.16,1,.3,1); /* DÉFAUT entrées */ --ease-in-out: cubic-bezier(.65,0,.35,1); /* déplacements A→B */ --ease-in: cubic-bezier(.4,0,1,1); /* sorties */ --ease-soft: cubic-bezier(.4,0,.2,1); /* passe-partout discret */ --ease-out-soft: var(--ease-out); /* alias rétro-compat */ } /* Respect strict de prefers-reduced-motion (web-quality / motion-charte) */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant:0ms; --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; --dur-slide:0ms; } } /* ═══ MISE À L'ÉCHELLE AU-DELÀ DE LA MAQUETTE ═══════════════════════════════ Les maquettes sont dessinées en 1728. Jusqu'au 30/08/2026, TOUT était figé au-dessus : contenu bloqué à 1632px, cartes à 535px, corps à 16px. Mesuré en 3840 : le site n'occupait plus que 43 % de l'écran, et comme les IMAGES sont plein bord alors que l'habillage ne l'est pas, le mot-symbole « HERE. » se retrouvait à 1104px du bord d'une image qui, elle, touchait le bord. C'est ce que Guillaume voyait sur son écran 4K. Le remède tient en une ligne : au-delà de 1728, on augmente le CORPS RACINE. Tout ce qui est écrit en `rem` — la colonne, les gouttières, l'échelle typographique, les espacements — grandit alors dans le même rapport, et le dessin garde exactement les proportions de la maquette. ⚠️ Trois précautions. 1. La borne basse vaut 16px À 1728 EXACTEMENT : la fonction est continue, il n'y a donc aucun saut au passage du seuil. 2. Le plafond de 28px est atteint vers 3830. Sans lui, un écran très large donnerait un corps de texte démesuré ; avec lui, le contenu occupe 74 % de l'écran en 3840, ce qui laisse au dessin l'air qu'il demande. 3. Ce qui NE DOIT PAS grandir reste en pixels : `--hairline` (un filet reste un filet, à toute taille) et les rayons. Ce qui EST du dessin — les repères carrés, la colonne d'article — a été passé en `rem` au même moment. ⚠️ Ne pas exprimer ce corps en `rem` : la propriété se définirait à partir d'elle-même. Uniquement des `px` et des `vw`. */ @media (min-width: 1728px) { :root { font-size: clamp(16px, calc(16px + (100vw - 1728px) * 0.0057), 28px); } }