/* ========================================================================= tokens.css - Source de vérité des design tokens Site Aurélie Rey · identité « Jardin intérieur » Transcription fidèle du design-system.md (§2 palette, §3 typo, §4 mouvement, §5 spacing/radius/shadows). Ne rien coder en dur ailleurs : tout passe par ces variables. ========================================================================= */ :root { /* --------------------------------------------------------------------- PALETTE - §2 (dominante verte) RÉALIGNEMENT LOGO (2026-07-19) : le logo définitif d'Aurélie (monogramme AR + rubans aquarelle, cf. img/logo-site.jpeg) devient la SOURCE DE VÉRITÉ de la charte. Les verts basculent du vert « forêt/bleuté » d'origine vers l'OLIVE / MOUSSE du logo (teinte ~79°, désaturée). Les NOMS de tokens et tous les alias sont conservés à l'identique : seules les valeurs changent. Valeurs échantillonnées dans le fichier : monogramme #4B5731, arc médian #6E7553, ruban clair #ABAD85, fond #F7F6F2. --vert-foret est volontairement ASSOMBRI sous l'olive du logo pour tenir l'AA sur crème (10.6:1) et garder le doré lisible sur fond sombre (4.7:1). --vert-sauge est assombri (il sert de couleur de TEXTE pour les overlines : il passe désormais AA partout, ce qui n'était pas le cas avant). --------------------------------------------------------------------- */ /* Verts (olive/mousse du logo) */ --vert-foret: #333D1F; /* texte fort / fonds sombres / footer / titres */ --vert-sauge: #616845; /* accent UI, bordures, pictos, hover + overlines (AA OK) */ --vert-tendre: #A8B287; /* surfaces 2ndaires, cards, séparateurs */ --vert-brume: #E7EADD; /* fond section alterné */ /* Neutres chauds - --creme avait été calé sur le fond du logo (#F7F6F2) pour que le JPEG s'y fonde sans couture ; --ivoire légèrement refroidi en conséquence (sinon l'alternance crème/ivoire lit comme « deux blancs différents »). Le logo du header est passé en PNG TRANSPARENT le 2026-09-04 : cette contrainte a disparu, mais les valeurs sont CONSERVÉES TELLES QUELLES (elles portent tout le site, les contrastes AA sont calculés dessus, et le rapport crème/ivoire ne doit pas s'inverser). */ --creme: #F7F6F2; /* fond principal */ --ivoire: #F1EEE4; /* surface alternée */ --encre: #23271F; /* texte courant */ --encre-douce: #4A5145; /* texte secondaire */ /* Accents doré/rosé (≤5% surface). Noms historiques (hérités de l'ancien motif floral, retiré du site le 2026-09-03) conservés tels quels : ce sont des tokens de COULEUR consommés largement (CTA accent, soulignés de liens, hover footer/nav, cf. base.css/site.css), renommer casserait un usage bien plus large que la fleur qui leur a donné leur nom. */ --dore-tournesol: #D99A2B; /* CTA 2ndaire, soulignés, accents */ --rose-pivoine: #C98591; /* touche rosée rare, détails (jamais de texte) */ /* Canaux RGB - pour les rgb(… / alpha) des voiles, ombres et spores. Évite de recoder des couleurs en dur dans les composants (règle d'or). */ --creme-rgb: 247 246 242; --vert-foret-rgb: 51 61 31; --vert-sauge-rgb: 97 104 69; --vert-tendre-rgb: 168 178 135; --vert-brume-rgb: 231 234 221; /* cœur des bulles mots-clés sur crème (site.css §6) */ --dore-rgb: 217 154 43; /* LUMIÈRE PURE. Pas une couleur de la charte : la valeur des reflets et des arêtes allumées (bulles mots-clés, site.css §6). Elle existe parce que la charte n'a RIEN de plus clair que --creme (#F7F6F2), et qu'un reflet ne peut pas être de la même valeur que la surface qu'il éclaire. À n'utiliser qu'en alpha faible et qu'en tant que LUMIÈRE (reflet, arête, éclat), jamais comme fond ni comme texte : #FFF en aplat est proscrit au même titre que #000 (cf. anti-slop §2). */ --blanc-rgb: 255 255 255; /* Plus aucune fleur illustrée sur le site (décision Thomas, 2026-09-03). Le lotus (retiré le 2026-09-01), le tournesol du hero et la pivoine de la section « avancer » consommaient chacun des dégradés/fills dédiés déclarés ici (--lotus-*, puis --pivoine-ext/med/int/coeur) : ces tokens ont été supprimés avec leurs SVG, ils ne sont plus consommés nulle part. --dore-tournesol et --rose-pivoine restent : ce sont des tokens de couleur à usage plus large (cf. note ci-dessus), pas des restes du système de fleurs. */ /* Alias sémantiques (pour lisibilité des composants) */ --bg: var(--creme); --bg-alt: var(--ivoire); --bg-section: var(--vert-brume); --bg-sombre: var(--vert-foret); --texte: var(--encre); --texte-doux: var(--encre-douce); --texte-clair: var(--creme); /* texte sur fond sombre */ --titre: var(--vert-foret); --bordure: var(--vert-tendre); --accent-ui: var(--vert-sauge); /* --------------------------------------------------------------------- TYPOGRAPHIE - §3 Famille UNIQUE : Plus Jakarta Sans (grotesk humaniste chaleureux, variable). Fraunces ABANDONNÉ (tell IA), Inter écarté comme police de marque. Hiérarchie portée par le POIDS + la COULEUR, pas par la taille brute. --font-titre ET --font-corps pointent sur la même famille ; l'emphase passe par l'italique / le poids de cette même famille. Fallbacks système propres si la woff2 n'est pas (encore) chargée. NUANCE 2026-07-19 - Fraunces RÉ-AUTORISÉ, mais en SIGNATURE SCOPÉE uniquement. Motif : le logo définitif est un monogramme SERIF à fort contraste (type didone) avec une baseline en capitales très espacées. Un site 100 % grotesk ne raccroche plus au logo. On réintroduit donc Fraunces sur QUATRE éléments de signature, et rien d'autre : 1. wordmark du header (repli si l'image du logo ne charge pas) + footer 2. H1 du hero (.psy-hero__wordmark) 3. overlines en capitales espacées (.t-overline) = rappel de la baseline 4. citation XL de la section « rencontre » (.psy-rencontre__quote) Le reste (H2, H3, corps, boutons, nav, listes, labels) RESTE en Plus Jakarta Sans. La règle anti-slop « Fraunces banni comme police de titres par défaut » reste donc valable : ce n'est pas la police des titres. Réglage des axes : opsz haute + SOFT 0 + WONK 0 => contraste marqué, terminaisons nettes, PAS l'allure « Fraunces par défaut » (wonky) qui était le tell IA. opsz basse sur les petits corps (overline) pour éviter des hairlines trop fragiles à 13px. --------------------------------------------------------------------- */ --font-titre: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-corps: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-signature: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; /* NUANCE 2026-09-15 - HURRICANE, cursive des TITRES DE SECTION (demande d'Aurélie : « les titres en écriture cursive » ; Thomas a tranché : les titres SEULEMENT, jamais le texte courant). Choix par comparaison au lettrage du logo (src/img/logo-hero.png), pas au jugé : 52 scripts OFL rendus au même corps d'x à côté du mot « Aurélie » du logo. Hurricane est le seul à cumuler les trois marqueurs du logo : 1. contraste pleins/déliés très marqué (déliés quasi filiformes) ; 2. terminaisons MOUSSES, arrondies (pinceau) - et non pointues comme une anglaise (Great Vibes, Allura, Corinthia, Pinyon…) ; 3. accent aigu en dièse épais et incliné, pas en filet effilé. + capitale A à grande boucle ouverte à gauche et ligne de base dansante, exactement comme le logo. Robert Leuschke, SIL Open Font License 1.1 -> auto-hébergement et usage commercial autorisés, aucune requête CDN (RGPD). PORTÉE STRICTE : les

de section (base.css §Titres), rien d'autre. Ni corps, ni H3/H4 (les sous-titres des publics sont fonctionnels), ni overlines, ni boutons, ni listes, ni nav. Une seule graisse (400) : ne jamais demander de bold, le navigateur le synthétiserait (cf. font-synthesis dans base.css). Repli : les scripts système, puis la générique `cursive`. Le site reste lisible sans la woff2 - l'identité seule change. */ --font-manuscrite: 'Hurricane', 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', cursive; /* Axes variables de Fraunces (n'écrasent PAS font-weight : l'axe wght reste piloté par font-weight, on ne règle ici que opsz / SOFT / WONK). */ --fvs-signature: 'opsz' 144, 'SOFT' 0, 'WONK' 0; /* display / grands corps */ --fvs-signature-petit: 'opsz' 24, 'SOFT' 0, 'WONK' 0; /* overlines, petits corps */ /* Letterspacing de signature : rappel de la baseline « PSYCHOLOGUE CLINICIENNE » du logo (capitales très espacées, ~0.2em). */ --ls-signature: 0.2em; /* Échelle fluide en clamp() - min (mobile) … max (desktop). Bornes viewport implicites ~360 → 1280px. Titres LÉGÈREMENT réduits vs Fraunces : un grotesk bold « pèse » plus visuellement à taille égale (anti « oversized H1 that scream »). */ --fs-display: clamp(2.375rem, 1.6rem + 3.45vw, 4rem); /* 38 → 64 */ --fs-h1: clamp(2.125rem, 1.55rem + 2.55vw, 3.25rem); /* 34 → 52 */ --fs-h2: clamp(1.625rem, 1.25rem + 1.7vw, 2.25rem); /* 26 → 36 — échelle grotesk, encore consommée par les prototypes */ --fs-h3: clamp(1.3125rem, 1.13rem + 0.8vw, 1.625rem); /* 21 → 26 */ /* Corps RÉEL des H2 depuis le passage en cursive (2026-09-15). À corps égal un script se lit BEAUCOUP plus petit qu'un grotesk : la hauteur d'x de Hurricane vaut 0,31 em contre 0,53 em pour Plus Jakarta Sans, soit un facteur 1,71. Pour garder la présence exacte de l'ancien H2 (26 → 36 px), il faut donc 45 → 62 px. Retenu : 44 → 62 px (le mobile est très légèrement en-dessous du facteur théorique pour éviter une ligne de plus sur « Bonjour et bienvenue à chacun·e de vous » à 360 px). Interlignage RELEVÉ à 1,22 : les ascendantes et descendantes de Hurricane débordent largement, à 1,15 les lignes se télescopaient. */ --fs-h2-manuscrit: clamp(2.75rem, 2.3125rem + 1.9565vw, 3.875rem); /* 44 → 62 */ --lh-h2-manuscrit: 1.22; --fs-lead: clamp(1.125rem, 1.0rem + 0.55vw, 1.3125rem); /* 18 → 21 */ --fs-body: clamp(1rem, 0.93rem + 0.3vw, 1.125rem); /* 16 → 18 */ --fs-small: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem); /* 14 → 15 */ --fs-caption: 0.8125rem; /* 13 */ --fs-overline: 0.8125rem; /* 13 */ /* Line-heights (cf. tableau §3) */ --lh-display: 1.05; --lh-h1: 1.1; --lh-h2: 1.15; --lh-h3: 1.25; --lh-lead: 1.6; --lh-body: 1.65; --lh-small: 1.55; --lh-caption: 1.5; --lh-overline: 1.4; /* Weights - Plus Jakarta Sans variable (famille unique). Corps en 400-500, titres en 600-700. La hiérarchie se lit au poids. */ --fw-regular: 400; /* corps courant */ --fw-medium: 500; /* corps appuyé / lead / labels */ --fw-semi: 600; /* H2 / H3 / overline */ --fw-bold: 700; /* display / H1 / wordmark */ /* Détails typo */ --ls-overline: 0.12em; --measure: 68ch; /* longueur de ligne max confortable */ /* --------------------------------------------------------------------- MOUVEMENT - §4 --------------------------------------------------------------------- */ --dur-micro: 200ms; --dur-base: 450ms; /* Reveal allongé 900ms -> 1100ms (2026-09-04, retour Thomas : animation d'apparition pas assez perceptible). Depuis le 2026-09-26 c'est la SEULE source de cette durée : la transition CSS de site.css §0 est le seul moteur des reveals (GSAP retiré), la valeur n'est plus dupliquée dans site.js. */ --dur-reveal: 1100ms; --dur-croissance: 1600ms; --ease-doux: cubic-bezier(0.22, 1, 0.36, 1); --ease-eclosion: cubic-bezier(0.16, 1, 0.3, 1); --ease-respire: cubic-bezier(0.37, 0, 0.63, 1); --ease-sortie: cubic-bezier(0.4, 0, 1, 1); /* Paliers de flou (audit DESIGNER #10, 2026-09-26, partie « unifier ce qu'on touche » seulement). Les deux états des mots-échos du hero : le mot qui naît / se dissout dans la brume, et le mot posé. Valeurs INCHANGÉES par rapport au keyframe d'origine (16 px -> 2,5 px) ; elles vivent désormais ici au lieu d'être répétées dans site.css §3a. Le flou du reveal (8 px) et sa montée (28 px) restent là où ils sont : ce sont les réglages demandés par Thomas, on n'y touche pas. */ --flou-brume: 16px; --flou-echo: 2.5px; /* --------------------------------------------------------------------- SPACING - §5 (échelle d'espace) --------------------------------------------------------------------- */ --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-base: 24px; --space-md: 32px; --space-lg: 48px; --space-xl: 64px; --space-2xl: 96px; --space-3xl: 128px; --space-4xl: 192px; /* Rythme vertical de section : mobile-first, élargi en desktop via @media */ --section-y: var(--space-2xl); /* 96px mobile → 128px desktop (base.css) */ --gutter: var(--space-base); --maxw: 1180px; /* --------------------------------------------------------------------- RADIUS - §5 --------------------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --radius-pill: 999px; --radius-blob: 42% 58% 56% 44% / 48% 42% 58% 52%; /* médias/décor only */ /* --------------------------------------------------------------------- SHADOWS - §5 (teintées forêt, jamais noir pur) --------------------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgb(var(--vert-foret-rgb) / 0.06); --shadow-md: 0 8px 24px rgb(var(--vert-foret-rgb) / 0.08); --shadow-lg: 0 20px 50px rgb(var(--vert-foret-rgb) / 0.10); /* Double-bezel léger (soft-skill) : ombre diffuse teintée forêt + liseré interne clair (ring 1px) pour un « volume doux » sur les cartes squircle, sans noir pur. À combiner avec --radius-lg (système de radius unique). */ --carte-bezel: 0 1px 3px rgb(var(--vert-foret-rgb) / 0.05), 0 14px 32px -14px rgb(var(--vert-foret-rgb) / 0.14), inset 0 0 0 1px rgb(var(--creme-rgb) / 0.55); --carte-bezel-hover: 0 2px 6px rgb(var(--vert-foret-rgb) / 0.06), 0 24px 46px -16px rgb(var(--vert-foret-rgb) / 0.20), inset 0 0 0 1px rgb(var(--creme-rgb) / 0.7); /* Anneau de focus accessible (vert sauge, bien visible sur crème comme sombre) */ --focus-ring: 0 0 0 3px var(--creme), 0 0 0 5px var(--vert-sauge); /* --------------------------------------------------------------------- PLANS (z-index) - une seule échelle, pas de valeur en dur dans les feuilles de composant. Le tiroir mobile vit DANS le contexte d'empilement du header, d'où les petites valeurs 1/2/3. --------------------------------------------------------------------- */ --z-header: 50; --z-skip-link: 100; --z-drawer-scrim: 1; --z-drawer-panel: 2; --z-drawer-toggle: 3; /* Champ de pollen sticky (position:fixed, cf. site.css §3b) : doit rester AU-DESSUS des fonds de section (peintes sans isolation, donc "niveau 0" de la pile de la racine) mais SOUS tout contenu lisible/CTA. `.container` (et le wrapper de contenu qui en tient lieu dans le hero : .psy-hero__content) reçoivent --z-contenu, strictement supérieur. Les sections elles-mêmes NE DOIVENT PAS avoir `isolation: isolate` ni de z-index propre, sinon leur contenu resterait piégé dans une pile locale et cette comparaison globale ne jouerait plus (cf. commentaire détaillé dans site.css §3b). */ --z-pollen: 1; --z-contenu: 2; /* Hauteur réelle du header sticky = hauteur du logo + padding vertical. Sert au décalage des ancres et au dégagement en haut du tiroir mobile (le bouton croix reste visible par-dessus le panneau). ⚠️ --logo-h dimensionne la BOÎTE CARRÉE du fichier, pas le lockup visible. img/logo-header.png est un canevas carré non recadré (choix d'Aurélie) au padding transparent très généreux : le lockup n'occupe que ~42% de la hauteur et ~46% de la largeur de la boîte, et il est décalé de ~27% sur chaque bord. Autrement dit --logo-h ≈ 2,36 × la hauteur réellement vue. Recalibré le 2026-09-04, en même temps que le passage au PNG transparent (suppression de la pastille) : sans son fond opaque, le lockup n'avait plus de bloc pour le porter et flottait dans un excès de blanc. Deux leviers actionnés ENSEMBLE, à hauteur de header quasi constante : - --logo-h 64-88px → 85-112px : le lockup vu passe de ~32px à ~41px - padding vertical du header --space-sm → --space-3xs : le padding transparent du fichier (~29px à cette échelle) fournit déjà tout le dégagement ; en ajouter 16px de plus était ce qui noyait le logo. Résultat : header 104px au lieu de 107px à 1440px, logo vu +28%. Si un jour Aurélie fournit un lockup DÉTOURÉ (sans padding natif) ou un SVG, il faudra refaire le chemin inverse : baisser --logo-h vers la hauteur réelle voulue et remonter le padding du header. C'EST FAIT LE 2026-09-26 (audit DESIGNER #13, partie logo seulement) : img/logo-header.png est désormais DÉTOURÉ sur sa bounding box alpha (330x305, au lieu du canevas carré 720x720). Seul le VIDE TRANSPARENT a été retiré : somme des alphas identique au pixel près entre l'ancien et le nouveau fichier, monogramme et baseline entiers. L'ancien fichier est conservé à côté (img/logo-header-carre-720.png) pour revenir en arrière d'un geste (remettre ce fichier, l'ancien --logo-h ci-dessous, le padding --space-3xs et la compensation margin-inline-start de .psy-logo). --logo-h dimensionne donc maintenant le LOCKUP LUI-MÊME : ancien : 85-112 px de boîte -> ~36-47 px de lockup visible nouveau : 52-64 px de lockup visible (+36 à +44 %) et le header descend de 94-105 px à 68-80 px (padding --space-2xs). Ancienne valeur : clamp(85px, 4.4rem + 1.75vw, 112px), padding 3xs. */ --logo-h: clamp(52px, 2.5rem + 1.5vw, 64px); --header-h: calc(var(--logo-h) + var(--space-2xs) * 2); /* Voile du tiroir mobile (jamais de noir pur, cf. §5) */ --scrim: rgb(var(--vert-foret-rgb) / 0.38); }