/* ============================================================
   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. */
  --mesure:52ch;          /* texte courant : ~72 signes réels */
  --mesure-etroite:56ch;  /* accroches en grand corps : ~56-64 signes */
  --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 */

  /* 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);
}