/* ============================================================
   Souki Lodges & Spa — Page d'accueil (hero)
   Couleurs : uniquement les variables de tokens.css.
   Séquence d'apparition orchestrée (titre 1,2s, sous-titre 2,4s,
   nav ~2,8s [étape 1], indice de scroll 3,2s, bouton son 3,4s).
   ============================================================ */

/* Test typographique home uniquement — Instrument Serif conserve la
   douceur de Souki avec un dessin plus éditorial et plus fluide. */
body[data-page="home"] :is(
  .hero__title,
  .breath__text,
  .intro__title,
  .lodges__title,
  .lodge__name,
  .moments__title,
  .moment__title,
  .territoire__title,
  .avis-home__title,
  .avis-home__rating strong,
  .avis-home__item blockquote,
  .resa__title,
  .hero__subtitle,
  .intro__body,
  .lodges__sub,
  .lodge__desc,
  .moments__sub,
  /* `.moment__desc` sorti le 17 août 2026 : légende sur média, en Mulish —
     voir son bloc. Cette liste pèse (0,2,2) et l'aurait remis en serif. */
  .territoire__body,
  .appel__texte
) {
  font-family: var(--font-editorial);
  font-weight: 400;
}

.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  /* Fond de sûreté. Le titre du hero est composé en --calcaire, et le
     contraste ne venait que du film. Tant que le poster n'était pas
     arrivé — 4,4 s en 4G, 11,4 s en 3G, mesuré le 7 août — on lisait
     du #EEEAE1 sur le #EEEAE1 du body : rapport 1:1, titre invisible.
     Avec --nuit dessous, il est lisible dès la première frame. */
  background-color: var(--nuit);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Vidéo de fond plein écran */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Voile dégradé sombre : lisibilité (plus dense haut & bas) */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Voile CONSERVÉ (lisibilité du texte blanc) mais resserré autour du bloc
     de texte : les bords de l'image restent nets et pleins. */
  background: radial-gradient(ellipse 50% 50% at 50% 44%,
    /* ⚠ RAYON À 50 % 50 %, JAMAIS PLUS — voir ETAT-DU-PROJET.md.
       Il valait 62 % 38 % : coupé net par la boîte. Paliers redistribués
       sur la course réelle et menés jusqu'à 100 %, sinon le fondu
       s'achevait à 80 % d'un rayon qui débordait déjà. */
    /* 34 % et non 46 : allégé le 9 août 2026. Le voile coûtait -19,2 % de
       luminance au film, mesuré sur la première frame. Contrainte tenue :
       le titre reste au-dessus de 4,5:1, plans clairs comme sombres. */
    color-mix(in srgb, var(--nuit) 34%, transparent) 0%,
    color-mix(in srgb, var(--nuit) 30%, transparent) 44%,
    color-mix(in srgb, var(--nuit) 12%, transparent) 72%,
    transparent 100%);
}

/* Contenu (titre + sous-titre) */
.hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  padding: 0 clamp(1.2rem, 4vw, 3rem);
  text-align: center;
  isolation: isolate;
  color: var(--calcaire);
  /* La couche couvre tout le hero : sans ceci, elle interceptait les taps
     destinés à la vidéo. Sur iOS, quand l'autoplay est bloqué (économie
     d'énergie), le navigateur pose son glyphe de lecture SUR la vidéo —
     et il était sous cette couche : « le bouton n'est pas cliquable »,
     17 août 2026. Les enfants interactifs se réactivent ci-dessous. */
  pointer-events: none;
}
.hero__content a,
.hero__content button {
  pointer-events: auto;
}
.hero__signature {
  position: absolute;
  top: 51%;
  left: 50%;
  width: min(92%, 84rem);
  transform: translate(-50%, -50%);
}
.hero__brand {
  display: block;
  width: clamp(10rem, 13vw, 13rem);
  height: auto;
  margin: 0 auto clamp(.5rem, 1vh, .8rem);
  filter: drop-shadow(0 2px 22px color-mix(in srgb, var(--nuit) 42%, transparent));
}
.hero__title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: clamp(2.8rem, 1.85rem + 4.4vw, 6.35rem);
  line-height: 1.02;
  letter-spacing: .01em;
  color: var(--calcaire);
  /* ═══ EXCEPTION À LA RÈGLE « AUCUNE OMBRE PORTÉE » ═══
     La charte interdit l'ombre comme ORNEMENT. Celle-ci est une TECHNIQUE
     DE LISIBILITÉ sur média : le titre est en --calcaire sur un film dont
     certains plans sont très clairs, et le voile a été volontairement
     allégé à 34 % pour rendre de la lumière à l'image (9 août 2026).
     Sans elle, le fond au bord des lettres monte à 2,5:1.
     Deux ombres : une large qui pose une assise, une serrée qui borde le
     glyphe. Invisible sur les plans sombres — elle ne fait que remplacer
     un noir par un noir. NE PAS la retirer par harmonisation. */
  text-shadow:
    0 2px 26px rgba(20, 26, 19, .85),
    0 1px 6px rgba(20, 26, 19, .72);
}
.hero__subtitle-wrap {
  width: min(100%, 62rem);
  /* L'écart titre→sous-titre est porté par la marge HAUTE de ce bloc, pas
     par le titre : --pas-3 le 10 août 2026, comme partout ailleurs. */
  margin: var(--pas-3) auto 0;
}
.hero__subtitle {
  margin: 0 auto;
  /* Largeur en vw et non en mesure de lecture : ce chapô n'est pas un texte
     courant mais une accroche sous un titre de 120 px. À 48ch il tombait sur
     cinq lignes courtes à 1920 ; à 56 rem il tient sur trois. */
  max-width: clamp(28rem, 60vw, 56rem);
  font-weight: 300;
  /* Le CORPS de ce sous-titre est fixé dans typo.css, qui arbitre en
     dernier : il l'avait rangé dans le groupe --t-labeur-grand au chantier
     Mulish, et toute valeur posée ici serait écrasée. */
  line-height: 1.55;
  color: color-mix(in srgb, var(--calcaire) 92%, transparent);
  /* Même exception que le titre, ombre resserrée : à 19 px de corps, un
     flou de 24 px s'étale trop pour border des lettres fines. L'ombre est
     CONSERVÉE malgré le retour à 19 px — elle ne coûte rien et reste
     invisible sur les plans sombres. */
  text-shadow:
    0 1px 4px rgba(20, 26, 19, .95),
    0 0 9px rgba(20, 26, 19, .85),
    0 2px 18px rgba(20, 26, 19, .6);
}

/* Voile local du bloc titre + sous-titre. Le sous-titre se dissolvait sur le
   ciel de la vidéo de vigne, d'autant plus à 1920 px où le ciel occupe une
   plus grande part du cadre. Même principe qu'aux scènes immersives : un seul
   dégradé radial, qui s'estompe dans toutes les directions et dont aucun
   arrêt n'atteint le bord de sa boîte — donc aucune arête.
   Le centre est descendu à 62 % : la densité se concentre sous le
   sous-titre, le titre n'en reçoit que la frange et ne s'alourdit pas. */
/* Le voile radial local qui vivait ici — .hero__content::before — est
   RETIRÉ sur décision du 31 juillet 2026 : il dessinait un rectangle gris
   visible autour du titre, jugé plus dommageable qu'un contraste faible sur
   un titre en très grand corps.
   Le contraste du hero d'accueil repose désormais sur le seul .hero__veil.
   NE PAS LE RÉTABLIR par harmonisation avec les autres heros, qui portent
   .phero__lede::before / .hero__subtitle::before — c'est une exception
   assumée, propre à ce hero. Voir ETAT-DU-PROJET.md. */

/* Lien vers le film complet. Registre du site : pas de bouton, pas
   d'icône de lecture — un mot et un filet de laiton qui se dessine
   depuis la gauche. */
.hero__film {
  display: inline-block;
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
  font-size: var(--t-micro);
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--calcaire) 88%, transparent);
  text-decoration: none;
  padding-bottom: .5em;
  position: relative;
}
.hero__film::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--laiton);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease);
}
.hero__film:hover,
.hero__film:focus-visible { color: var(--calcaire); }
.hero__film:hover::after,
.hero__film:focus-visible::after { transform: scaleX(1); }
.hero__film:focus-visible { outline: 1px solid var(--argile); outline-offset: 8px; }

/* Indice de scroll : trait vertical animé + libellé */
.hero__scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(1.2rem, 3vw, 2.2rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--calcaire);
}
/* Le filet passe au laiton — le cuivre du bouton Réserver — et gagne un peu
   d'épaisseur et d'opacité. L'invitation doit se remarquer sans se hisser au
   rang d'appel à l'action : le rail reste très effacé, seule la goutte qui
   descend porte la couleur pleine. */
.hero__scroll-line {
  position: relative;
  width: 2px;
  height: 52px;
  background: color-mix(in srgb, var(--laiton) 36%, transparent);
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 45%;
  background: var(--laiton);
  box-shadow: 0 0 8px color-mix(in srgb, var(--laiton) 55%, transparent);
  animation: scrollDrop 2s var(--ease) infinite;
}
@keyframes scrollDrop {
  0%   { transform: translateY(-100%); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(220%); opacity: 0; }
}
.hero__scroll-label {
  font-family: var(--font-interface);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--calcaire);
  /* Même ombre que la barre de navigation sur fond sombre. */
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

/* Bouton son optionnel (coin bas droit) */
.hero__sound {
  position: absolute;
  z-index: 2;
  right: clamp(1.2rem, 4vw, 3rem);
  bottom: clamp(1.2rem, 3vw, 2.2rem);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .5em .8em;
  background: color-mix(in srgb, var(--nuit) 32%, transparent);
  border: 1px solid color-mix(in srgb, var(--calcaire) 30%, transparent);
  border-radius: 2px;
  color: var(--calcaire);
  cursor: pointer;
  font-family: var(--font-interface);
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.hero__sound:hover {
  background: color-mix(in srgb, var(--nuit) 48%, transparent);
  border-color: color-mix(in srgb, var(--calcaire) 55%, transparent);
}
.hero__sound-icon { display: inline-flex; }
/* État muet (défaut) : barre oblique visible, ondes masquées */
.hero__sound-wave  { opacity: 0; transition: opacity .3s var(--ease); }
.hero__sound-slash { opacity: 1; transition: opacity .3s var(--ease); }
.hero__sound.is-on .hero__sound-wave  { opacity: 1; }
.hero__sound.is-on .hero__sound-slash { opacity: 0; }

/* --- Séquence d'apparition --- */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero__brand    { opacity: 0; animation: heroRise 1.1s var(--ease) .3s both; }
.hero__title    { opacity: 0; animation: heroRise 1.25s var(--ease) .65s both; }
.hero__subtitle { opacity: 0; animation: heroRise 1.05s var(--ease) 1.15s both; }
.hero__scroll   { opacity: 0; animation: heroFade 1s   var(--ease) 3.2s both; }
.hero__sound    { opacity: 0; animation: heroFade 1s   var(--ease) 3.4s both; }

/* La commande reste visuellement discrète, mais sa zone tactile respecte le
   minimum de 44 px sur téléphone et tablette. */
@media (max-width: 1179px) {
  .hero__sound {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 680px) {
  .hero__signature { top: 49%; }
  .hero__brand { width: clamp(8rem, 36vw, 10rem); }
  .hero__title { font-size: clamp(2.7rem, 12.5vw, 4rem); }
  /* .9rem retiré le 10 août 2026 : --pas-3 est fluide et vaut déjà 28,8 px
     à 390. Une seule valeur titre→prose, aux cinq largeurs. */
  .hero__subtitle {
    max-width: 32rem;
    font-size: clamp(1rem, 4.4vw, 1.16rem);
    line-height: 1.5;
  }
  /* Sur petit écran, le libellé empiétait sur l'indice de défilement.
     L'icône conserve une zone tactile de 44 px et un nom accessible. */
  .hero__sound {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  .hero__sound-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --- Mouvement réduit : tout visible d'emblée, aucune animation --- */
@media (prefers-reduced-motion: reduce) {
  .hero__brand,
  .hero__title,
  .hero__subtitle,
  .hero__scroll,
  .hero__sound {
    animation: none !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  .hero__scroll { transform: translateX(-50%) !important; }  /* garder le centrage */
  .hero__scroll-line::after { animation: none !important; opacity: 0 !important; }
}

/* ============================================================
   HOME — Sections après le hero
   ============================================================ */

/* --- Section 2 : la respiration (une phrase, un vide juste) --- */
.breath {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Ni min-height ni gap : le filet vertical qu'ils servaient a été retiré.
     La section prend le rythme standard, haut et bas identiques, exactement
     comme « Bienvenue » — les deux doivent devenir comparables. */
  padding: clamp(3.25rem, 7vh, 4.75rem) clamp(1.2rem, 4vw, 3rem);
  background: var(--foret);
  text-align: center;
}
.breath__text {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.3;
  color: var(--calcaire);
  /* 22ch coupaient « Certains lieux se visitent. » en deux. La ligne unique
     est une préférence : `balance` la sert quand la place existe, et coupe
     proprement en dessous. Aucun nowrap, aucun débord. */
  max-width: none;
}
.breath__text span { display: block; }
.breath__accent {
  /* Toujours sur sa propre ligne, quelle que soit la largeur — même
     traitement que « Une maison d'amis. » dans Bienvenue. */
  display: block;
  font-style: italic;
  color: var(--argile);
  margin-top: .18em;
}

/* --- Section 3 : l'introduction (qui est Souki) --- */
.intro {
  background: var(--calcaire);
  padding: var(--sec-y) 0;
}
.intro__inner {
  margin: 0 auto;
  padding-inline: var(--gouttiere);
}
.intro__title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.14;
  color: var(--foret);
  margin: var(--pas) 0 var(--pas-3);
}
.intro__accent {
  display: block;
  font-style: italic;
  color: var(--souki);
}
.intro__body {
  font-size: var(--t-corps);
  line-height: var(--interligne);
  color: color-mix(in srgb, var(--ink) 76%, var(--calcaire));
}
.intro__body + .intro__body { margin-top: var(--pas-3); }


/* Colonne unique à toutes les largeurs — arbitrage « grille éditoriale
   unique » du 10 août 2026. Le bloc composait sur deux colonnes au-delà de
   900 px : c'était la seule prose du site à changer de grille selon la
   largeur de l'écran. La mesure reste bornée par var(--mesure) sur
   .intro__body, dans typo.css. */
.intro .intro__inner { max-width: 84rem; }
.intro .intro__aside { max-width: 46rem; }
.intro .intro__prose {
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.intro .intro__prose > :first-child { margin-top: 0; }

/* ============================================================
   HOME — Section 5 : les deux lodges (cartes vidéo scroll-trigger)
   ============================================================ */
.lodges {
  background: var(--calcaire);
  color: var(--ink);
  padding: var(--sec-y) 0;
}
.lodges__head {
  max-width: 72rem;
  margin: 0 auto clamp(3.5rem, 7vh, 5.5rem);
  padding: 0 clamp(1.2rem, 4vw, 3rem);
  text-align: center;
}
/* Même traitement que l'ouverture des scènes : le surtitre monte d'un cran
   et s'espace. */
.lodges .eyebrow {
  font-size: var(--t-petit);
  letter-spacing: .5em;
}
.lodges__title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: var(--t-h1);
  line-height: 1.06;
  color: var(--foret);
  /* `margin-inline: auto` manquait : borné par --mesure-titre-l et calé à
     gauche, le titre partait de 98 à 205 px hors de l'axe pendant que le
     chapô, lui, était centré. C'est ce décalage qui déséquilibrait le bloc,
     pas un alignement à gauche. */
  margin: var(--pas) auto var(--pas-3);
}
.lodges__sub {
  /* Comme les autres chapôs d'ouverture, il sort de la mesure de lecture
     pour tenir sur deux lignes. */
  max-width: clamp(26rem, 56vw, 48rem);
  margin: 0 auto;
  font-size: var(--t-lede);
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 64%, var(--calcaire));
}

.lodges__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(5rem, 9vw, 9rem);
  /* 72 rem enfermaient chaque description dans 500 px : à 1920, deux colonnes
     de texte centré à 55 signes, hachées. 92 rem rendent à chaque colonne de
     quoi loger la mesure. */
  max-width: 94rem;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 3rem);
}
/* Cadre éditorial franc : aucun masque ni fondu sur les bords. La netteté
   de l'architecture doit rester intacte et le média s'intégrer comme une
   photographie de magazine, pas comme une vignette dissoute. */
.lodge__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--rayon-media);
}
.lodge__img,
.lodge__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 1;
  transition: transform 1.2s var(--ease);
}
.lodge__body {
  position: relative;
  z-index: 2;
  width: min(100%, 50ch);
  margin: clamp(1.25rem, 2.5vh, 1.8rem) auto 0;
  padding: clamp(1.2rem, 2.2vh, 1.6rem) .2rem 0;
  border-top: 1px solid color-mix(in srgb, var(--laiton) 32%, transparent);
  text-align: left;
}
.lodge__label {
  font-family: var(--font-interface);
  font-size: var(--t-petit);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--laiton);
}
.lodge__name {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.08;
  color: var(--foret);
  margin: var(--pas) 0 var(--pas-3);
}
.lodges .lodge__desc {
  /* Pas de plafond local : la mesure vient de typo.css (var(--mesure)).
     Les 50ch posés ici battaient typo par leur spécificité — retirés le
     7 août 2026. */
  font-size: var(--t-corps);
  line-height: var(--interligne);
  color: color-mix(in srgb, var(--ink) 68%, var(--calcaire));
  margin: 0;
  text-align: left;
  hyphens: none;
}
.lodge__link { margin-top: clamp(1.6rem, 3.5vh, 2.6rem); }


/* Survol : la vidéo s'intensifie doucement (opacité + très légère échelle) */
@media (hover: hover) {
  .lodge:hover .lodge__video { transform: scale(1.018); }
}

/* Mobile : cartes empilées */
@media (max-width: 820px) {
  .lodges__grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 7vw, 3.5rem); }
  .lodge__frame,
  .lodge__body { max-width: 520px; margin-left: auto; margin-right: auto; }
}

/* Mouvement réduit : pas d'intensification (l'autoplay est déjà neutralisé en JS) */
@media (prefers-reduced-motion: reduce) {
  .lodge__video { transition: none; opacity: 1; }
  .lodge:hover .lodge__video { transform: none; }
}

/* ============================================================
   HOME — Section 6 : moments immersifs en SCÈNES CINÉMA
   6 scènes pleine largeur ; la vidéo se fond dans la page.
   Fondus amples (--fade ~300-400px) par mask-image + scènes
   chevauchées (marge négative) => vrai fondu-enchaîné : dans la
   zone commune, les deux images coexistent en transparence.
   ============================================================ */
.moments {
  --fade: clamp(120px, 14vh, 160px);
  position: relative;
  background: var(--nuit);
  color: var(--calcaire);
  padding: 0 0 var(--sec-y);
}

/* Les fondus d'entrée et de sortie de section ALLAIENT VERS --calcaire :
   deux dégradés vers le clair posés en haut et en bas de la seule section
   sombre du site. C'était un voile blanc sur la photographie, contraire à la
   direction artistique — les fondus vont vers --nuit, jamais vers le blanc.
   Supprimés le 30 juillet 2026. La jonction avec les sections claires est
   désormais franche, comme entre toutes les autres sections du site.
   NE PAS LES RÉTABLIR « par harmonisation ». Voir ETAT-DU-PROJET.md. */

.moments .eyebrow { color: var(--argile); }

/* --- En-tête de section, posé sur l'eau de la scène Janzu ---
   Plus de bandeau uni : la vidéo sert de fond. La scène d'ouverture est plus
   haute pour que l'en-tête (en haut) et le bloc Janzu (en bas) respirent. */
.scene__intro {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Le chapô doit tenir sur deux lignes : à 60 rem il en faisait trois. */
  max-width: 74rem;
  margin: 0 auto;
  padding: calc(var(--fade) + clamp(3.5rem, 10vh, 6.5rem)) clamp(1.4rem, 5vw, 4rem) clamp(1.5rem, 4vh, 2.5rem);
  text-align: center;
}
/* Ouverture de chapitre : le surtitre monte d'un cran et s'espace davantage. */
.scene__intro .eyebrow {
  font-size: var(--t-petit);
  letter-spacing: .5em;
  color: var(--argile);
  text-shadow: 0 1px 16px color-mix(in srgb, var(--nuit) 80%, transparent);
}
/* Voile LOCALISÉ derrière le texte seulement : l'eau reste visible et vivante */
.scene__intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 52%,
    /* ⚠ RAYON À 50 % 50 %, JAMAIS PLUS — même défaut que les deux autres
       voiles de cette page, corrigés le 31 juillet. */
    color-mix(in srgb, var(--nuit) 50%, transparent) 0%,
    color-mix(in srgb, var(--nuit) 32%, transparent) 42%,
    color-mix(in srgb, var(--nuit) 13%, transparent) 71%,
    transparent 100%);
}
.scene__intro .moments__title {
  max-width: 20ch;
  margin-inline: auto;
  text-shadow: 0 2px 30px color-mix(in srgb, var(--nuit) 55%, transparent);
}
.scene__intro .moments__sub {
  color: color-mix(in srgb, var(--calcaire) 90%, transparent);
  text-shadow: 0 1px 20px color-mix(in srgb, var(--nuit) 72%, transparent);
}

/* Scène d'ouverture : deux blocs empilés, en-tête en haut, Janzu en bas */
.scene--janzu {
  flex-direction: column;
  justify-content: flex-start;
  /* La scène d'ouverture porte deux blocs : l'en-tête de section en haut, le
     Janzu en bas. Relevée de 122 à 155 vh pour que l'en-tête respire sur une
     vraie hauteur d'eau avant que la scène commence — l'écart entre le chapô
     et le surtitre du Janzu passe de 205 à environ 400 px. */
  min-height: 155vh;
}
.scene--janzu .scene__content { margin-top: auto; }
.moments__title {
  font-family: var(--font-editorial);
  font-weight: 300;
  /* Conserve l'ouverture spectaculaire sans dépasser la hiérarchie de la home. */
  font-size: clamp(3.5rem, 2.5rem + 3.8vw, 6rem);
  line-height: 1.04;
  color: var(--calcaire);
  max-width: 18ch;
  margin: var(--pas) auto var(--pas-3);
}
.moments__sub {
  max-width: clamp(32rem, 74vw, 60rem);
  margin: 0 auto;
  font-size: var(--t-lede);
  line-height: var(--interligne);
  color: color-mix(in srgb, var(--calcaire) 72%, transparent);
}

/* Badge (point argile pulsant + label) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--font-interface);
  /* Ils structurent la lecture des six scènes : ils doivent se voir. Taille
     montée d'un niveau, graisse pleine, argile non atténué, et une ombre
     plus dense — un surtitre de 15 px sur une image vive ne tient pas
     autrement. */
  font-size: var(--t-petit);
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--argile);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--nuit) 85%, transparent),
               0 1px 18px color-mix(in srgb, var(--nuit) 80%, transparent);
}
.badge--center { justify-content: center; }
.badge__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--argile);
  animation: badgePulse 2.6s var(--ease) infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.55); }
}

/* --- La scène --- */
.scene {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* Dissolution haut/bas : la vidéo devient transparente sur --fade px */
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0, rgba(0,0,0,.72) calc(var(--fade) * .35), #000 var(--fade),
      #000 calc(100% - var(--fade)), rgba(0,0,0,.72) calc(100% - var(--fade) * .35), transparent 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0, rgba(0,0,0,.72) calc(var(--fade) * .35), #000 var(--fade),
      #000 calc(100% - var(--fade)), rgba(0,0,0,.72) calc(100% - var(--fade) * .35), transparent 100%);
}
/* Les scènes se succèdent simplement : chacune porte son propre fondu court.
   (Plus de marges négatives : le recouvrement cumulait deux dégradés.) */

.scene__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Cadrages fins des sources verticales */
.scene--janzu   .scene__video { object-position: center 58%; }
.scene--massage .scene__video { object-position: center 42%; }
/* Le dîner était le seul des six encodé en 16:9 : 68 % de la hauteur avaient
   été jetés à l'encodage, et le cadre s'arrêtait juste au-dessus des verres.
   Réencodé en 1080×1920 comme ses voisines, il redevient pilotable d'ici.
   83 % place la fenêtre sur la bande 57-89 % de la source : le trinquement
   et la table dressée dans le même plan. */
.scene--diner   .scene__video { object-position: center 83%; }

/* Voile LATÉRAL, 17 août 2026 — remplace l'ancien voile pleine largeur.
   L'ancien ne descendait jamais sous 6 % : toute l'image restait sous verre.
   Celui-ci s'éteint à 52 % de sa course — la moitié de l'image est LIBRE.

   Le point d'équilibre 0,70 est MESURÉ, pas choisi à l'œil : contraste du
   texte calculé pixel par pixel sur 8 images de chacun des six films, au pire
   décile de chaque boîte de texte. À 0,70, tout tient (avec l'ombre de
   lisibilité ci-dessous) ; à 0,64, la description du petit-déjeuner retombe
   sous 4,5:1. Ne pas alourdir : à 0,88 — le point de départ de l'étude — on ne
   gagnait que 0,2 point de contraste pour un tiers d'image éteinte en plus.

   La teinte est plus profonde que --nuit : un fond plus sombre donne plus de
   contraste par point d'opacité, donc un voile plus léger au total.
   color-mix(--nuit 65 %, black) = rgb(30,38,28) — le rgba(30,38,27) du
   cahier des charges, exprimé en jetons. */
.scene__veil { position: absolute; inset: 0; pointer-events: none; }
.scene--left .scene__veil {
  background: linear-gradient(100deg,
    color-mix(in srgb, color-mix(in srgb, var(--nuit) 65%, black) 70%, transparent) 0%,
    color-mix(in srgb, color-mix(in srgb, var(--nuit) 65%, black) 64%, transparent) 22%,
    color-mix(in srgb, color-mix(in srgb, var(--nuit) 65%, black) 24%, transparent) 40%,
    transparent 52%);
}
.scene--right .scene__veil {
  background: linear-gradient(260deg,
    color-mix(in srgb, color-mix(in srgb, var(--nuit) 65%, black) 70%, transparent) 0%,
    color-mix(in srgb, color-mix(in srgb, var(--nuit) 65%, black) 64%, transparent) 22%,
    color-mix(in srgb, color-mix(in srgb, var(--nuit) 65%, black) 24%, transparent) 40%,
    transparent 52%);
}
.scene--center .scene__veil {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--nuit) 45%, transparent) 0%,
    color-mix(in srgb, var(--nuit) 72%, transparent) 100%);
}

/* Contenu : posé dans la scène, à l'abri des zones de fondu */
.scene__content {
  position: relative;
  z-index: 2;
  width: 100%;
  /* 74 rem ramenaient les blocs vers le centre : un bloc « à droite » mordait
     encore sur le tiers central, là où se tiennent les sujets. 88 rem les
     poussent dans les tiers latéraux, ceux que le relevé d'agitation désigne
     comme calmes. */
  max-width: 88rem;
  margin: 0 auto;
  padding: calc(var(--fade) + clamp(1.5rem, 4vh, 3rem)) clamp(1.4rem, 5vw, 4rem);
  display: flex;
}
.scene--left   .scene__content { justify-content: flex-start; }
.scene--right  .scene__content { justify-content: flex-end; }
.scene--center .scene__content { justify-content: center; text-align: center; }
.scene--low  { align-items: flex-end; }
.scene--high { align-items: flex-start; }
.scene--high .scene__content { padding-top: calc(var(--fade) + clamp(2.5rem, 7vh, 4.5rem)); }
.scene--low .scene__content { padding-bottom: calc(var(--fade) + clamp(2rem, 5vh, 3.5rem)); }

/* Le texte porte son propre voile : un dégradé resserré autour du bloc, qui
   garantit le contraste même sur une image très claire (soin, petit-déjeuner,
   coaching) sans assombrir le reste de la scène. Même principe que le voile
   de .scene__intro, déjà éprouvé sur l'eau du Janzu. */
.scene__text {
  /* ═══ EXCEPTION À LA RÈGLE « AUCUNE OMBRE PORTÉE » ═══
     Même statut que sur le titre du hero : une TECHNIQUE DE LISIBILITÉ sur
     média, pas un ornement. Le voile latéral est volontairement léger (0,70)
     pour laisser vivre l'image ; c'est ce halo qui fait le reste. text-shadow
     s'hérite : badge, titre, description et méta le reçoivent d'ici.
     Mesuré au pire décile sur 8 images des six films : sans lui, la
     description du petit-déjeuner tombe à 3,1:1 ; avec lui, 4,5:1. */
  text-shadow:
    0 1px 20px color-mix(in srgb, var(--nuit) 72%, transparent),
    0 0 5px color-mix(in srgb, var(--nuit) 45%, transparent);
  position: relative;
  /* Un texte posé sur une image demande des lignes plus courtes que de la
     prose pleine page — mais pas une colonne de journal. 44ch donnaient
     408 px et 47 signes : six à neuf lignes pour cinq phrases.
     Au corps de 20,5 px la fourchette monte à 66-75 signes : l'échelle suit,
     618 px à 1440. Un texte sur image supporte moins bien la ligne longue
     que de la prose sur fond uni — c'est le seul endroit du site où viser le
     haut de la fourchette se paie un peu. */
  font-size: var(--t-corps);
  max-width: clamp(20rem, 26rem + 14vw, 42rem);
}
/* Le fond radial qui vivait ici — un dôme de nuit à 94 % sous chaque bloc —
   est RETIRÉ le 17 août 2026 avec la refonte du voile : il éteignait le centre
   de l'image alors que le voile latéral protège déjà la colonne du texte.
   La lisibilité fine est portée par l'ombre posée sur .scene__text. */
.scene--left  .scene__text::before { background-position: -6% 0; }
.scene--right .scene__text::before { background-position: 6% 0; }
.scene--center .scene__text::before { inset: -7rem -13rem; }
.moment__title {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.1;
  color: var(--calcaire);
  margin: var(--pas) 0 var(--pas-3);
  text-shadow: 0 2px 28px color-mix(in srgb, var(--nuit) 72%, transparent);
}
.moment__desc {
  /* La largeur est portée par .scene__text : une seule décision. */
  max-width: none;
  /* Mulish, comme toute légende sur média depuis le 8 août — et posé ICI :
     `.moment__desc` a quitté le 17 août la liste de labeur de typo.css, qui
     lui imposait l'encre SOMBRE de la prose sur fond clair. Sur un film sous
     voile, cette encre donnait 1,5:1 — c'était la description invisible que
     signalait la critique. Il a quitté au même moment la liste éditoriale en
     tête de ce fichier, qui l'aurait rendu au serif d'affichage. */
  font-family: var(--font-labeur);
  font-weight: 400;
  font-size: var(--t-corps);
  line-height: var(--interligne);
  /* PLEIN, et non 88 % : sur image, l'alpha aplatit le texte vers son fond
     et lui coûte ~1,5 point de contraste — mesuré. L'ombre vient du bloc. */
  color: var(--calcaire);
}
.moment__meta {
  margin-top: 1.4rem;
  font-family: var(--font-interface);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  /* 55 % disparaissait sur les images claires ; 74 % laissait encore la méta
     du coaching à 4,1:1, sous le seuil — ce sont les capitales espacées qui
     souffrent le plus, leur trait étant fin. */
  color: color-mix(in srgb, var(--calcaire) 90%, transparent);
  text-shadow: 0 1px 16px color-mix(in srgb, var(--nuit) 70%, transparent);
}

/* Révélation des textes de scène : plus lente encore */
.reveal-on .scene__content { transition-duration: 1.6s; }

/* Sous 400 px, le libellé du bouton son passait sur l'indice de défilement,
   tous deux ancrés au bas du hero. L'icône seule suffit à cette largeur. */
@media (max-width: 400px) {
  .hero__sound-label { display: none; }
  .hero__sound { padding: .6rem; }
}

/* --- Mobile : scènes empilées, fondus conservés, voile renforcé --- */
@media (max-width: 820px) {
  .moments { --fade: clamp(80px, 10vh, 100px); }
  .scene { min-height: 76vh; }
  .scene--left .scene__veil,
  .scene--right .scene__veil {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--nuit) 46%, transparent) 0%,
      color-mix(in srgb, var(--nuit) 80%, transparent) 100%);
  }
  .scene__content { padding-inline: clamp(1.2rem, 6vw, 2rem); }
  .scene--low .scene__content { padding-bottom: calc(var(--fade) + clamp(1.5rem, 4vh, 2.5rem)); }
}

/* --- Mouvement réduit : pas de pulsation (vidéos déjà en poster fixe via JS) --- */
@media (prefers-reduced-motion: reduce) {
  .badge__dot { animation: none; opacity: .8; }
}

/* ── Prototype 2026 : les expériences comme chapitres cinématographiques ──
   Chaque scène vient recouvrir la précédente avec une coupe verticale nette.
   Les anciens masques haut/bas sont neutralisés : plus de longues zones grises
   où deux films se dissolvent simultanément. Le liseré supérieur suffit à
   donner de la profondeur sans fabriquer un nouvel effet décoratif. */
@media (min-width: 821px) {
  .moments--chapters {
    --fade: clamp(72px, 8vh, 96px);
    padding-bottom: 0;
  }
  .moments--chapters .scene {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
    -webkit-mask-image: none;
    mask-image: none;
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--calcaire) 16%, transparent),
                0 -1.8rem 3.8rem color-mix(in srgb, var(--nuit) 28%, transparent);
  }
  .moments--chapters .scene--janzu {
    display: flex;
    flex-direction: column;
  }
  .moments--chapters .scene__intro {
    padding-top: clamp(5.5rem, 10vh, 7.5rem);
    padding-bottom: clamp(.75rem, 2vh, 1.25rem);
  }
  .moments--chapters .scene--janzu .scene__content {
    margin-top: auto;
    padding-top: clamp(1rem, 2.5vh, 2rem);
    /* Le corps flotte dans le bas de l'image : le texte reste dans l'eau
       sombre, au-dessus de lui, sans remonter sous l'introduction. */
    padding-bottom: clamp(7rem, 14vh, 10rem);
  }

  /* Chaque placement vient du cadrage réel du film, pas d'une alternance
     décorative gauche/droite. Les personnes, les mains et les assiettes
     demeurent ainsi dans le tiers libre de l'écran. */
  .moments--chapters .scene--yoga .scene__content,
  .moments--chapters .scene--pdj .scene__content,
  .moments--chapters .scene--coaching .scene__content,
  .moments--chapters .scene--diner .scene__content {
    padding-top: clamp(6.5rem, 13vh, 9rem);
  }
  .moments--chapters .scene--massage .scene__content {
    padding-bottom: clamp(5rem, 10vh, 7rem);
  }

  .moments--chapters .scene--janzu .scene__text { max-width: 36rem; }
  .moments--chapters .scene--yoga .scene__text { max-width: 34rem; }
  .moments--chapters .scene--pdj .scene__text { max-width: 39rem; }
  .moments--chapters .scene--massage .scene__text { max-width: 35rem; }
  .moments--chapters .scene--coaching .scene__text { max-width: 36rem; }
  .moments--chapters .scene--diner .scene__text { max-width: 39rem; }

  /* Trait argile et halo latéral : le texte est signalé sans devenir une
     carte opaque. Le fondu est volontairement resserré dans sa zone sûre. */
  .moments--chapters .scene__text {
    padding: .35rem 0 .4rem clamp(1rem, 1.8vw, 1.5rem);
    border-left: 1px solid color-mix(in srgb, var(--argile) 72%, transparent);
  }
  .moments--chapters .scene--right .scene__text {
    padding-right: clamp(1rem, 1.8vw, 1.5rem);
    padding-left: 0;
    border-right: 1px solid color-mix(in srgb, var(--argile) 72%, transparent);
    border-left: 0;
  }
  /* La variante chapitres du fond radial est retirée avec lui. */

  /* Entrée vivante, mais calme : les éléments se recomposent en cascade au
     changement de chapitre. Aucun déplacement ne traverse les visages. */
  .moments--chapters .scene__text > * {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
    transition: opacity .55s ease, transform .75s var(--ease);
  }
  .moments--chapters .scene.is-active .scene__text > * {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  .moments--chapters .scene.is-active .scene__text > :nth-child(2) { transition-delay: .08s; }
  .moments--chapters .scene.is-active .scene__text > :nth-child(3) { transition-delay: .16s; }
  .moments--chapters .scene.is-active .scene__text > :nth-child(4) { transition-delay: .24s; }
  /* Les chapitres successifs gagnent très légèrement en profondeur, sans
     zoom perceptible ni accélération liée au défilement. */
  .moments--chapters .scene:nth-of-type(2) { z-index: 2; }
  .moments--chapters .scene:nth-of-type(3) { z-index: 3; }
  .moments--chapters .scene:nth-of-type(4) { z-index: 4; }
  .moments--chapters .scene:nth-of-type(5) { z-index: 5; }
  .moments--chapters .scene:nth-of-type(6) { z-index: 6; }
}

/* Mobile — CARROUSEL IMMERSIF, 18 août 2026 (format B, arbitré sur planches).
   Sous 820 px les six scènes deviennent des CARTES de 318 × 470 sur un rail
   horizontal à scroll-snap : la vidéo occupe toute la carte, un dégradé bas
   sur 38 % de la hauteur porte surtitre, titre et « Découvrir → ». Rien
   d'autre — ni description, ni mention, ni badge. La carte suivante dépasse
   franchement (48 px à 390) : c'est ce qui dit qu'on peut glisser. Chaque
   carte est un lien vers sa section d'experiences. Six points sous le rail.
   Aucun JavaScript pour glisser ; les points actifs, oui (wireCarrouselXp). */
@media (max-width: 820px) {
  .moments--chapters { padding: clamp(2rem, 6vw, 2.6rem) 0 clamp(1.4rem, 4vw, 1.8rem); }
  /* le rail */
  .moments--chapters .xp-rail {
    display: flex;
    gap: 8px;
    padding: 0 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .moments--chapters .xp-rail::-webkit-scrollbar { display: none; }
  /* la carte */
  .moments--chapters .scene {
    -webkit-mask-image: none;
    mask-image: none;
    position: relative;
    flex: 0 0 318px;
    width: 318px;
    height: 470px;
    min-height: 0;
    scroll-snap-align: center;
    overflow: hidden;
    display: block;
    border-top: 0;
    background: var(--nuit);
  }
  .moments--chapters .scene__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 50%;
  }
  .moments--chapters .scene--janzu    .scene__video { object-position: center 52%; }
  .moments--chapters .scene--yoga     .scene__video { object-position: center 40%; }
  .moments--chapters .scene--pdj      .scene__video { object-position: center 50%; }
  .moments--chapters .scene--massage  .scene__video { object-position: center 40%; }
  .moments--chapters .scene--coaching .scene__video { object-position: center 56%; }
  .moments--chapters .scene--diner    .scene__video { object-position: center 83%; }
  /* AUCUN voile — le seul dégradé est celui du bandeau bas, 38 % de la carte.
     ALLÉGÉ de .82/.5 à .70/.42 le 18 août, une fois le surtitre parti : il n'a
     plus qu'un titre et une flèche à porter. Balayage mesuré sur 8 images des
     six films (pire décile, ombre comprise) : le TITRE calcaire tient à toute
     densité, jusqu'à .40 ; c'est la FLÈCHE argile de 11 px qui borne — à
     .70/.42 les six passent 4,5 (pdj 4,7, diner 5,1), à .60/.36 pdj et diner
     retombent. .70 est donc le dernier cran qui tient. Ne pas alléger plus
     sans remesurer. */
  .moments--chapters .scene__veil {
    display: block;
    top: auto;
    height: 38%;
    background: linear-gradient(to top,
      rgba(20, 26, 19, .70) 0%,
      rgba(20, 26, 19, .42) 45%,
      rgba(20, 26, 19, 0) 100%);
  }
  .moments--chapters .scene__content {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0 20px 20px;
    display: block;
    max-width: none;
  }
  .moments--chapters .scene__text {
    padding: 0;
    border: 0;
    max-width: none;
    /* Ombre de lisibilité — l'exception du hero, pas de voile en plus. Mesuré
       au pire décile sur 8 images des six films, dans le bandeau : le TITRE
       calcaire tient partout (4,1 à 10,5 nu, 7,6 à 12,4 avec l'ombre). Le
       SURTITRE argile, à 10 px, ne franchit 4,5 qu'avec l'ombre sur janzu,
       massage et coaching ; yoga (3,5), pdj (3,5) et diner (3,0) restent
       sous le seuil, et seul un dégradé bien plus dur (.90/.78) les y
       amènerait — hors consigne. Écart consigné, section 46. */
    text-shadow:
      0 1px 14px rgba(20, 26, 19, .85),
      0 0 4px rgba(20, 26, 19, .6),
      0 1px 2px rgba(20, 26, 19, .5);
  }
  .moments--chapters .scene--right .scene__text { padding: 0; border: 0; }
  /* Le SURTITRE aussi disparaît sous 820, 18 août 2026 : troisième échec du
     même mur — 10 px interlettré en argile ne tient pas 4,5:1 sur média,
     quel que soit le voile (règle en tête du journal). Et sur une carte
     immersive « III · L'aube » au-dessus de « Le petit-déjeuner » est une
     redite : le titre suffit, la vidéo respire. */
  .moments--chapters .scene .badge,
  .moments--chapters .scene .moment__desc,
  .moments--chapters .scene .moment__meta,
  .moments--chapters .scene .moment__cta { display: none; }
  .moments--chapters .scene .moment__title {
    margin: 0;
    font-size: clamp(1.25rem, 5.6vw, 1.45rem);
    line-height: 1.12;
  }
  .moments--chapters .scene .moment__title::after { content: none; }
  /* « Découvrir → » : généré, en argile, sous le titre */
  .moments--chapters .scene .scene__text::after {
    content: "Découvrir →";
    display: block;
    margin-top: .55rem;
    font-family: var(--font-interface);
    font-size: var(--t-micro);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--argile);
  }
  html[lang="en"] .moments--chapters .scene .scene__text::after { content: "Discover →"; }
  /* le lien couvre la carte */
  .scene__lien { position: absolute; inset: 0; z-index: 4; }
  /* l'introduction quitte la carte du janzu et coiffe le rail */
  .moments--chapters .scene--janzu .scene__intro {
    position: absolute;
    left: -9999px;   /* rendue par le double hors-carte, ci-dessous */
  }
  .moments--chapters .xp-intro-mobile {
    display: block;
    padding: 0 24px clamp(1.6rem, 5vw, 2.2rem);
    text-align: center;
  }
  /* les six points */
  .moments--chapters .xp-points {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: clamp(1rem, 3.5vw, 1.4rem);
  }
  .moments--chapters .xp-points span {
    width: 6px; height: 6px; border-radius: 50%;
    background: color-mix(in srgb, var(--calcaire) 28%, transparent);
    transition: background .3s var(--ease);
  }
  .moments--chapters .xp-points span.is-on { background: var(--argile); }
}
@media (min-width: 821px) {
  .moments--chapters .xp-intro-mobile,
  .moments--chapters .xp-points { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .moments--chapters .scene__text > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   HOME — Section 7 : le territoire (calcaire, vidéo fondue discrète)
   ============================================================ */
.territoire {
  position: relative;
  background: var(--calcaire);
  color: var(--ink);
  padding: var(--sec-y) clamp(1.2rem, 4vw, 3rem);
  overflow: hidden;
}
/* Fond vidéo étang de Thau : présence discrète, bords dissous */
.territoire__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .14;
}
.territoire__wrap {
  position: relative;
  z-index: 2;
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.territoire__title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.1;
  color: var(--foret);
  margin: var(--pas) 0 var(--pas-3);
}
.territoire__body {
  /* 58ch donnaient 78 signes : ce texte a des mots courts. */
  max-width: 52ch;
  font-size: var(--t-corps);
  line-height: var(--interligne);
  color: color-mix(in srgb, var(--ink) 72%, var(--calcaire));
  margin-bottom: 1.1rem;
}
.territoire__text .link { margin-top: .6rem; color: var(--ink); }
/* Médaillons photo aux bords fondus (pas de cadres nets) */
.territoire__photos {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  justify-items: center;
}
.territoire__photo {
  width: min(100%, 380px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Une seule image désormais : plus de décalage à compenser, et elle occupe
   toute la colonne plutôt que la moitié d'une grille prévue pour deux.

   RELEVÉ DU 17 AOÛT — le 4/3 écrit ici NE SE RENDAIT PAS. La grille étire ses
   enfants par défaut (`align-items: normal` → stretch) : l'image contribuait
   sa hauteur intrinsèque (l'attribut height=1200) au dimensionnement de la
   rangée, puis l'étirement la contraignait aux deux dimensions — et un
   `aspect-ratio` contraint des deux côtés est ignoré. Rendu mesuré :
   456 × 1200, une tranche verticale découpée par `cover` dans un paysage.
   C'était « l'image trop haute » signalée. `align-self: center` casse
   l'étirement, `height: auto` libère le rapport ; 4/3 = le 2400×1800 des
   vignes de Cabrières (le Pont du Diable, un temps posé ici, a été écarté :
   il est la tête d'activites, la page même où cette section renvoie). */
.territoire__photos { grid-template-columns: 1fr; }
.territoire__photo {
  width: 100%;
  height: auto;
  align-self: center;
  aspect-ratio: 4 / 3;
}

@media (max-width: 1100px) {
  .territoire__wrap { grid-template-columns: 1fr; }
  .territoire__photos { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {

}

/* ============================================================
   HOME — Les mots des voyageurs
   Une preuve de confiance éditoriale, sans widget tiers ni script externe.
   ============================================================ */
.avis-home {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(3.6rem, 7vh, 5.4rem) var(--gouttiere);
}
.avis-home__inner { max-width: 86rem; margin: 0 auto; }
.avis-home__head { text-align: center; }
.avis-home__head .eyebrow { color: var(--laiton); }
.avis-home__title {
  max-width: none;
  margin: var(--pas) auto var(--pas-3);
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.06;
  color: var(--foret);
}
.avis-home__rating {
  width: fit-content;
  min-height: 44px;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--foret);
  text-decoration: none;
}
.avis-home__rating strong {
  font-family: var(--font-editorial);
  font-size: clamp(2.25rem, 1.85rem + 1.3vw, 3.3rem);
  font-weight: 400;
  line-height: 1;
}
.avis-home__rating strong span { font-size: .52em; }
.avis-home__rating-copy {
  display: grid;
  gap: .18rem;
  padding-left: 1rem;
  border-left: 1px solid color-mix(in srgb, var(--laiton) 42%, transparent);
  text-align: left;
  font-family: var(--font-interface);
}
.avis-home__rating-copy b {
  font-size: var(--t-petit);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.avis-home__rating-copy small {
  font-size: var(--t-micro);
  color: color-mix(in srgb, var(--ink) 65%, var(--paper));
}
.avis-home__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.2rem, 4.5vh, 3.4rem);
  border-block: 1px solid color-mix(in srgb, var(--laiton) 24%, transparent);
}
.avis-home__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: clamp(1.8rem, 3.2vw, 3rem);
}
.avis-home__item + .avis-home__item {
  border-left: 1px solid color-mix(in srgb, var(--laiton) 24%, transparent);
}
.avis-home__item blockquote {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: clamp(1.45rem, 1.25rem + .55vw, 1.95rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--foret);
}
.avis-home__item figcaption {
  display: grid;
  gap: .2rem;
  margin-top: auto;
  padding-top: 1.5rem;
  font-family: var(--font-interface);
  font-size: var(--t-micro);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 66%, var(--paper));
}
.avis-home__item cite {
  font-style: normal;
  font-weight: 500;
  color: var(--foret);
}
.avis-home__source {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: .55rem 1.2rem;
  margin-top: 1.6rem;
  text-align: center;
}
.avis-home__source span {
  font-family: var(--font-interface);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, var(--paper));
}
@media (max-width: 820px) {
  .avis-home__grid { grid-template-columns: 1fr; }
  .avis-home__item + .avis-home__item {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--laiton) 24%, transparent);
  }
}
@media (max-width: 440px) {
  .avis-home__rating { gap: .7rem; }
  .avis-home__rating-copy { padding-left: .7rem; }
  .avis-home__item { padding-inline: .4rem; }
}

/* ============================================================
   HOME — Section 8 : la réservation. BLOC RETIRÉ le 17 août 2026.
   Soixante-cinq lignes qui n'ont jamais pu s'appliquer : `.resa` vit sur
   `reserver.html`, qui ne charge PAS ce fichier ; et `home.css` n'est
   chargé que par les deux accueils, où il n'y a aucun `.resa`. La page
   de réservation a son propre `reserver.css`, quatre-vingt-dix-neuf
   règles. Les seules qui servaient encore à quelque chose — les deux
   libellés du bouton — ont migré dans `components.css`, sans préfixe.
   ============================================================ */


/* Clôture des moments : appel à composer son séjour, posé dans la dernière scène */
.moment__cta { margin-top: 2rem; }
.moment__cta .btn { color: var(--calcaire); }