/* ============================================================ Souki Lodges & Spa — Design tokens Identité chromatique définitive, ancrée sur le vert signature. ============================================================ */ :root{ /* — Système typographique de marque — Instrument raconte Souki ; Jost organise l'interface et les données. */ --font-editorial:'Instrument Serif','Cormorant',Georgia,serif; --font-interface:'Jost',system-ui,sans-serif; /* Labeur : la prose courante, depuis le 8 août 2026. Les accroches et titres restent sur --font-editorial, l'interface sur --font-interface. */ --font-labeur:'Mulish',system-ui,-apple-system,sans-serif; /* Corps du labeur. La hauteur d'x de Mulish (0,500 em) est quasi égale à celle d'Instrument (0,510) — mesuré dans les fichiers, pas supposé : à corps égal, la prose garderait sa taille apparente. Le passage de 18,3 px à ~17 px est donc un resserrement VOULU, pas une compensation de dessin. Départ du brief : 16 px — remonté à 17 fluide, l'x-height tombait 14 % sous l'existant. */ --t-labeur:clamp(1rem, .97rem + .15vw, 1.0625rem); /* 16,0 → 17,0 px */ --t-labeur-grand:clamp(1.0625rem, 1rem + .3vw, 1.1875rem); /* 17,0 → 19,0 px */ /* 1,68 et non 1,78 : à 17 px, le 1,78 du brief donnait une impression de « grand » — arbitrage Fabien du 8 août, le corps ne bouge pas, c'est l'interligne qui se resserre. Le grand corps reste à 1,7. */ --interligne-labeur:1.68; /* — Vert signature (la marque Souki) — */ --souki:#7C9177; /* vert signature, touches identitaires : mots soulignés, filets, icônes */ --souki-clair:#A8B89E; /* version éclaircie, pour le vert lisible sur fonds sombres */ /* — Profondeurs (titres, sections sombres, fonds immersifs) — */ --foret:#3A4A38; /* vert forêt : titres, éléments sombres */ --nuit:#2E3A2C; /* vert nuit : grands fonds immersifs */ /* — Texte — */ --ink:#40453B; /* encre vert-gris chaude : texte principal */ /* — Chauds (bois des lodges, accents) — */ --laiton:#A8825C; /* laiton / bois des menuiseries : accents, CTA, prix */ --argile:#C9A789; /* argile douce : halos, survols */ /* — Clairs (fonds) — */ --calcaire:#EEEAE1; /* brume calcaire : fond principal */ --paper:#F4F1E9; /* papier : fond alterné, cartes */ /* — Utilitaires — */ --line:rgba(64,69,59,.14); /* filets fins, dérivé de l'encre */ /* — Courbe d'animation — */ --ease:cubic-bezier(.22,1,.36,1); /* ── Échelle typographique fluide ────────────────────────── Un seul barème pour tout le site. Chaque niveau est une interpolation continue entre mobile et grand écran : clamp(plancher, base + coefficient × vw, plafond) Le terme en `vw` est ce qui fait grandir le texte AVEC l'écran ; les bornes empêchent la dérive aux extrêmes. Aucun palier, aucune rupture à un point de bascule. Relevés (390 / 768 / 1024 / 1440 / 1920 px) en commentaire de chaque ligne : ce sont des mesures faites au navigateur, pas des valeurs théoriques. Règle d'usage : ne jamais écrire une taille en dur dans une feuille de page. Si un niveau manque, il s'ajoute ici. Le corps reste confortable mais se fait plus éditorial : les titres et les images reprennent la priorité visuelle. Les petits niveaux sont réservés aux métadonnées, tandis que tout texte de lecture reste à 16 px au minimum. */ --t-micro: clamp(.78rem, .75rem + .10vw, .88rem); --t-surtitre: clamp(.82rem, .79rem + .11vw, .94rem); --t-petit: clamp(.90rem, .86rem + .13vw, 1.02rem); --t-nav: clamp(.91rem, .87rem + .12vw, 1.02rem); --t-corps: clamp(1.02rem, .98rem + .18vw, 1.20rem); --t-chapo: clamp(1.18rem, 1.11rem + .28vw, 1.45rem); --t-lede: clamp(1.28rem, 1.18rem + .38vw, 1.64rem); --t-h3: clamp(1.50rem, 1.32rem + .62vw, 2.3rem);/* 23.5 26.0 27.5 30.4 33.0 */ --t-h2: clamp(2.10rem, 1.70rem + 1.8vw, 3.9rem);/* 34.2 41.0 45.6 53.1 61.8 */ --t-h1: clamp(2.60rem, 1.90rem + 3.1vw, 5.6rem);/* 42.5 54.2 62.1 75.0 89.6 */ --t-hero: clamp(3.00rem, 2.00rem + 5.4vw, 7.5rem);/* 53.1 73.5 87.3 109.7 120 */ /* ── Mesure typographique ────────────────────────────────── Objectif : 60 à 72 signes par ligne, la fourchette où l'œil revient sans effort à la ligne suivante. Attention : l'unité `ch` vaut la largeur du zéro, plus large que la moyenne des bas-de-casse dans Jost et Cormorant. Mesuré dans le navigateur, 62ch rendait 72 à 80 signes réels. Les valeurs ci-dessous sont donc calées sur des relevés, pas sur l'arithmétique : elles visent la fourchette à l'écran. Ces valeurs sont exprimées en `ch`, unité relative à la police de l'élément : quand le corps grandit, la colonne grandit avec lui et le nombre de signes par ligne ne bouge pas. C'est ce qui permet d'agrandir tout le site sans retoucher la mesure. Calées sur le relevé au navigateur, jamais sur l'arithmétique. Un premier réglage à 44ch était trop serré : il descendait à 51 signes sur plusieurs pages intérieures et laissait des colonnes de 531 px au milieu d'un écran de 1920. Les pages dont le texte sort de la fourchette à cette mesure se corrigent CHEZ ELLES — la FAQ, dont les réponses sont faites de mots courts, porte sa propre colonne — plutôt qu'en rabaissant le site entier. */ /* Les mesures sont des cibles en SIGNES, exprimées en `ch` pour suivre le corps. Le `ch` d'Instrument Serif rend ~1,38 signe (son `0` est large pour sa chasse réelle) : les valeurs ci-dessous en tiennent compte. À re-mesurer au navigateur si le caractère de labeur change. */ /* ⚠ 71ch NE VEUT PAS DIRE 71 SIGNES. Le `ch` vaut la largeur du ZÉRO, pas celle d'une lettre moyenne : à 17 px de Mulish, 71ch rendent 724 px et la colonne compose une MÉDIANE DE 90 SIGNES par ligne. C'est exactement le piège qui avait produit les 96 signes du 7 août — lire la valeur en `ch` comme un nombre de signes. Ne jamais le refaire. Médianes RÉELLES relevées au navigateur le 10 août 2026, prose courante : écran colonne hors .pduo médiane dans .pduo médiane 390 342 px 43 signes 342 px 44 720 648 px 82 648 px 83 1024 724 px 90 469 px 59 1440 724 px 90 669 px 83 1920 724 px 90 663 px 83 Élargie de 52ch à 71ch le 10 août sur arbitrage Fabien : la colonne passe de 530 à 724 px. LE CORPS NE BOUGE PAS — 17 px. La valeur reste en `ch` pour conserver le principe « la mesure suit le corps » ; seul le nombre de `ch` change. La cible de 60-72 signes annoncée en tête de ce bloc est ABANDONNÉE avec cet élargissement, en connaissance de cause. Voir ETAT-DU-PROJET.md, section « Colonne élargie à 720 px ». */ --mesure:71ch; /* 724 px à 17 px de corps — 90 signes de médiane */ --mesure-etroite:56ch; /* accroches en grand corps : ~56-64 signes */ /* L'AXE — 530 px, en valeur absolue et non en `ch`. Le `ch` suit le corps : 52ch rend 530 px au corps de labeur mais 593 px sur les blocs composés plus grand (bandes d'appel, chapô de la journée, sous-titre du hero). C'était l'axe « D » du relevé du 10 août 2026 — un axe involontaire, né de l'unité et non d'un choix. Les blocs qui doivent tenir la MÊME colonne que le reste de la prose, quel que soit leur corps, prennent --colonne. Ceux dont la mesure doit suivre le corps gardent --mesure. ⚠ LES DEUX DOIVENT RENDRE LA MÊME LARGEUR. Élargir l'une sans l'autre rouvre les deux axes que la grille éditoriale a fermés le 10 août. */ --colonne:45rem; /* 720 px — l'axe unique de la prose. Doit rendre la MÊME largeur que --mesure ci-dessus. */ --mesure-large:62ch; /* plus d'appelant depuis le 7 août 2026 */ --mesure-titre:46ch; /* grands titres : la ligne se fait toute seule */ --mesure-titre-l:52ch; /* titres de section plus longs */ /* ── Rythme vertical ─────────────────────────────────────── Une seule échelle, dérivée de l'interligne du texte courant, pour que tous les écarts soient des multiples reconnaissables plutôt que des valeurs choisies au cas par cas. Le pas est fluide lui aussi : un texte agrandi dans un rythme figé paraîtrait tassé. À 1920 px l'écart entre paragraphes vaut 32 px pour une ligne de 37 px — l'œil retrouve son souffle sans que le paragraphe se disloque. */ --interligne:1.62; /* lecture ample, sans effet de texte flottant */ /* Rythme vertical des sections. Valeur unique, haut et bas identiques, calée sur « Une journée à Souki » qui servait déjà de référence — 108 px à 900 px de fenêtre. `--sec-y` était appelé par .intro sans jamais avoir été défini : la section Bienvenue se retrouvait à zéro de marge, collée à la bande verte au-dessus et à la section suivante en dessous. */ /* Rythme vertical entre sections, resserré de 40 % le 31 juillet 2026 après mesure : sept pages portaient des .psec à 69-86 % d'air par rapport à leur contenu, et l'accueil des blocs à 135-162 %. Même valeur, même écart partout : réglage global, correction globale. Le PLANCHER de 3,2rem n'est pas le plafond × 0,6 — il est relevé exprès. Sous 700 px de large tout est en pleine largeur et l'air est le seul séparateur entre sections. Ne pas l'aligner par harmonisation. À noter : il ne s'engage que sous 711 px de HAUTEUR de fenêtre. Validé d'abord sur l'accueil seul, puis étendu. Voir ETAT-DU-PROJET.md, y compris les deux limites connues que ce réglage ne corrige pas. */ --sec-y:clamp(3.75rem, 8.5vh, 6.5rem); --sec-y-mini:clamp(2.5rem, 5vh, 3.6rem); --pas:clamp(.6rem, .5rem + .42vw, 1rem); /* 9.6 11.2 12.3 14.0 16.0 */ --pas-2:calc(var(--pas) * 2); /* entre deux paragraphes */ --pas-3:calc(var(--pas) * 3); /* titre -> texte */ --pas-4:calc(var(--pas) * 5); /* entre deux blocs */ --pas-5:calc(var(--pas) * 8); /* entre deux sections */ /* LES TROIS ÉCARTS — arbitrage « grille éditoriale unique », 10 août 2026. Le relevé des 25 pages donnait 6 valeurs pour œil→titre, 10 pour titre→prose. Il n'en reste que trois, et elles ne se déclarent nulle part ailleurs : œil → titre var(--pas) 9,6 / 14 / 16 px (390 / 1440 / 1920) titre → prose var(--pas-3) 28,8 / 42 / 48 px section → section var(--sec-y) ×2 120 / 153 / 208 px (padding, pas marge) Les titres portent --pas en haut ET les surtitres --pas en bas : les marges adjacentes fusionnent, la valeur tient dans les deux cas — avec ou sans surtitre au-dessus. Exclus, et c'est délibéré : .presse-bar__titre (--presse-air, découplé le 5 août), .footer__col h3 (pied de page), .lodge-specs__grid h3 (grille technique, pas de la prose sous le titre). */ /* Marge latérale minimale : le texte ne touche jamais le bord. */ --gouttiere:clamp(1.5rem, 5vw, 4rem); --contenu:86rem; --contenu-hero:92rem; --rayon-media:clamp(.25rem, .35vw, .5rem); }