/* ============================================================================ LANGOURBEAUTY ACADÉMIE — tokens.css Source unique de vérité : couleurs, typographie, espacement, rayons, ombres. Aucune valeur de marque ne doit être écrite en dur ailleurs que dans ce fichier. v1.0 — 2026-07-27. Dérivé de charte_langourbeauty.html v2.0 + page Accueil. Décisions actées : pas de mode sombre (D1) · rayon carte 14px (D2) · livraison multi-fichiers (D4) · périmètre Académie seule (D3). ========================================================================= */ /* ---------------------------------------------------------------- POLICES -- 6 fichiers, auto-hébergés — aucun appel externe, conforme RGPD. 3 des 5 familles sont des polices VARIABLES : un seul fichier couvre toute la plage de graisses. Toutes sous SIL Open Font License, SAUF Abramo Script (voir ci-dessous). ------------------------------------------------------------------------ */ /* Script signature — Abramo Script (police de la maquette), statique 400. ⚠️ Police COMMERCIALE sous licence payante — PeachCreme / Creative Market, commande #147976574 du 29/07/2026, palier « Webfont : 10 000 pages vues/mois ». Au-delà de ce trafic, l'upgrade est à racheter. Ne pas remplacer le fichier par la version desktop du même duo (commande #145154293), qui n'autorise PAS le web. Fichier livré tel quel par le fondeur : ne pas sous-ensembler sans vérifier que la licence autorise la modification. Parisienne reste le repli. */ @font-face{ font-family:'Abramo Script'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/AbramoScript-Regular.woff2') format('woff2'); } /* Repli libre (SIL OFL) */ @font-face{ font-family:'Parisienne'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Parisienne-Regular.woff2') format('woff2'); } /* Serif éditorial — VARIABLE, axe wght 300→700 (substitut de Ty Serif Display / London) */ @font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:300 700; font-display:swap; src:url('fonts/CormorantGaramond-Variable.woff2') format('woff2-variations'); } /* ⚠️ L'italique est un fichier STATIQUE 400 : ne jamais demander italic à une autre graisse, le navigateur synthétiserait un faux gras (cf. --fw-hero ci-dessous). */ @font-face{ font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/CormorantGaramond-Italic.woff2') format('woff2'); } /* Sans géométrique capitales — VARIABLE, axe wght 100→700 (substitut de Kabel LT Pro) */ @font-face{ font-family:'Josefin Sans'; font-style:normal; font-weight:100 700; font-display:swap; src:url('fonts/JosefinSans-Variable.woff2') format('woff2-variations'); } /* Corps / interface — VARIABLE, axe wght 100→900 (substitut de Neue Montreal) */ @font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/HankenGrotesk-Variable.woff2') format('woff2-variations'); } :root{ /* ------------------------------------------------------------- COULEURS -- Palette relevée sur les maquettes Canva d'Eileen (2026-07-20). Inchangée. Un seul accent : le blush. L'or est une couleur de SENS (étoiles), pas un second accent. Jamais de noir pur ni de gris froid. --------------------------------------------------------------------- */ --ground: #FFE8E8; /* rose poudré — fond de toutes les pages */ --surface: #FFFFFF; /* cartes, cadres photo, champs */ --surface-2: #FFF4F2; /* fonds de section alternés, champs au repos */ --blush: #FBD5CE; /* ACCENT — boutons, pastilles, cadres */ --blush-deep: #F3BEB4; /* survol / pression */ --ink: #1B0A02; /* encre chaude — titres, logo, texte court */ --ink-body: #3A2C26; /* encre adoucie — paragraphes longs, listes */ --ink-soft: #6B6360; /* gris chaud — sous-titres, légendes */ --gold: #FFB222; /* étoiles de notation UNIQUEMENT */ --line: #F0D9D5; /* filets, contours de carte */ --line-strong: #E4C7C2; /* contours appuyés, bordures de champ */ /* --------------------------------------------------------- TYPOGRAPHIE -- 4 familles, 5 rôles. Le serif couvre 2 rôles (hero italique + Contact). --------------------------------------------------------------------- */ --f-script: 'Abramo Script', 'Parisienne', cursive; /* @kind font */ /* signature */ --f-serif: 'Cormorant Garamond', Georgia, serif; /* @kind font */ /* hero + Contact */ --f-caps: 'Josefin Sans', system-ui, sans-serif; /* @kind font */ /* titres CAPS */ --f-body: 'Hanken Grotesk', system-ui, sans-serif; /* @kind font */ /* corps + UI */ /* Graisses */ --fw-light: 300; /* @kind font */ --fw-normal: 400; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-hero: 400; /* @kind font */ /* ⚠️ PAS 500 : l'italique serif est statique 400. */ /* L'accueil v1 utilisait 500 → faux gras synthétique. */ /* Échelle fluide — calée sur la page Accueil livrée (rem effectifs), elle-même dérivée du tableau de la charte (17→25,3 px maquette 1366). */ --fs-hero: clamp(2.6rem, 5vw, 4.1rem); /* @kind font */ /* H1 hero, serif italique */ --fs-h2: clamp(1.7rem, 4.4vw, 2.9rem); /* @kind font */ /* titre de section, CAPS */ --fs-script: clamp(2.75rem, 5.8vw, 3.8rem); /* @kind font */ /* sur-titre script */ --fs-h3: 1.05rem; /* @kind font */ /* intertitre gras */ --fs-lead: 1.05rem; /* @kind font */ /* chapô, sous-titre hero */ --fs-body: 1.06rem; /* @kind font */ /* paragraphe courant */ --fs-ui: 0.90rem; /* @kind font */ /* nav, liens */ --fs-btn: 0.82rem; /* @kind font */ /* boutons (CAPS) */ --fs-caption: 0.78rem; /* @kind font */ /* légendes, mentions, footer */ --fs-label: 0.70rem; /* @kind font */ /* étiquettes de champ (CAPS) */ /* Interlignes */ --lh-hero: 1.02; /* @kind font */ --lh-tight: 1.2; /* @kind font */ --lh-body: 1.6; /* @kind font */ --lh-loose: 1.75; /* @kind font */ /* listes de bénéfices */ /* Interlettrages — le tracking large des capitales est une signature forte de la maquette (Kabel +15,7 px ≈ .25em). Ne pas réduire. */ --ls-caps: 0.24em; /* @kind font */ /* titres de section, H4 */ --ls-label: 0.18em; /* @kind font */ /* étiquettes de champ */ --ls-btn: 0.06em; /* @kind font */ /* boutons */ --ls-hero: -0.012em; /* @kind font */ /* hero serif, resserré */ /* ----------------------------------------------------------- ESPACEMENT -- Échelle 8 pt, calée sur les valeurs déjà employées dans l'Accueil. --------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-section: clamp(56px, 8vw, 96px); /* @kind spacing */ /* padding vertical de
*/ --sp-gutter: clamp(20px, 3vw, 32px); /* @kind spacing */ /* marge latérale du conteneur */ --sp-grid: var(--sp-7); /* gouttière de grille */ /* --------------------------------------------------------------- FORMES -- D2 : le rayon de carte de la charte (18px) est abandonné au profit du 14px déjà en production sur l'Accueil. --------------------------------------------------------------------- */ --r-btn: 2px; --r-field: 4px; --r-card: 14px; --r-frame: 26px; /* cadres photo hauts (mockup téléphone) */ --r-pill: 999px; --bw-frame: 6px; /* @kind other */ /* liseré blanc autour des photos */ --bw-frame-lg: 8px; /* @kind other */ /* -------------------------------------------------------------- OMBRES -- Deux niveaux seulement. Teintées brun chaud, jamais grises. --------------------------------------------------------------------- */ --shadow-card: 0 18px 40px -24px rgba(70, 26, 20, .45); --shadow-frame: 0 26px 50px -30px rgba(70, 26, 20, .55); /* ------------------------------------------------------------ STRUCTURE -- Points de rupture (pour mémoire — inutilisables dans @media) : --bp-lg 1080px · --bp-md 880px · --bp-sm 640px --------------------------------------------------------------------- */ --wrap: 1180px; /* @kind other */ --header-h: 74px; /* @kind other */ /* ------------------------------------------------------------- MOUVEMENT */ --dur: .2s; /* @kind other */ --ease: cubic-bezier(.4, 0, .2, 1); /* @kind other */ } /* ======================================================================== UTILITAIRES TYPOGRAPHIQUES Les 5 rôles de la charte, disponibles pour les cartes preview/ et les pages. ===================================================================== */ .t-script{ font-family:var(--f-script); font-weight:var(--fw-normal); line-height:1; } .t-hero{ font-family:var(--f-serif); font-style:italic; font-weight:var(--fw-hero); font-size:var(--fs-hero); line-height:var(--lh-hero); letter-spacing:var(--ls-hero); margin:0; text-wrap:balance; } .t-caps{ font-family:var(--f-caps); font-weight:var(--fw-normal); text-transform:uppercase; letter-spacing:var(--ls-caps); } .t-serif-caps{ /* réservé au titre « Contact » */ font-family:var(--f-serif); font-weight:600; text-transform:uppercase; letter-spacing:var(--ls-caps); } .t-body{ font-family:var(--f-body); font-weight:var(--fw-normal); font-size:var(--fs-body); line-height:var(--lh-body); } .t-lead{ font-size:var(--fs-lead); color:var(--ink-soft); line-height:var(--lh-body); } .t-label{ font-family:var(--f-caps); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--ink-soft); } .t-caption{ font-size:var(--fs-caption); color:var(--ink-soft); } @media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }