/* ============================================================
   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,
  .jour__title,
  .volet__moment,
  .volet__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,
  .jour__sub,
  .volet__text,
  .lodges__sub,
  .lodge__desc,
  .moments__sub,
  .moment__desc,
  .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à. */
    color-mix(in srgb, var(--nuit) 46%, 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);
}
.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);
  text-shadow: 0 2px 40px color-mix(in srgb, var(--nuit) 55%, transparent);
}
.hero__subtitle-wrap {
  width: min(100%, 62rem);
  margin: clamp(.9rem, 2vh, 1.35rem) 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;
  font-size: clamp(1.05rem, .96rem + .32vw, 1.38rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--calcaire) 92%, transparent);
  text-shadow: 0 1px 24px color-mix(in srgb, var(--nuit) 45%, transparent);
}

/* 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); }
  .hero__subtitle-wrap { margin-top: .9rem; }
  .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: 1rem 0 0;
}
.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); }


/* Le titre en bandeau, le corps sur deux colonnes. La hauteur passe de 939 à
   730 px sur un écran de 1920, et le bloc occupe 70 % de la largeur au lieu
   d'en laisser 422 px vides d'un seul côté. */
.intro .intro__inner { max-width: 84rem; }
.intro .intro__aside { max-width: 46rem; }
.intro .intro__prose {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  columns: 2;
  column-gap: clamp(2.5rem, 5vw, 5rem);
  /* Sans cela, un paragraphe se coupe en deux au changement de colonne. */
  orphans: 3;
  widows: 3;
}
.intro .intro__body { break-inside: avoid; }
/* Le premier paragraphe ne porte pas de marge haute : il doit s'aligner sur
   le haut de la seconde colonne. */
.intro .intro__prose > :first-child { margin-top: 0; }

@media (max-width: 900px) {
  .intro .intro__prose { columns: 1; }
}

/* ============================================================
   HOME — Section 4 : « Une journée à Souki » (signature éditoriale)
   ============================================================ */
.jour {
  position: relative;
  background: var(--nuit);
  color: var(--calcaire);
  padding: var(--sec-y) 0;
}
.jour__head {
  position: relative;
  z-index: 1;
  max-width: 60rem;
  margin: 0 auto clamp(2.8rem, 7vh, 4.5rem);
  padding: 0 clamp(1.2rem, 4vw, 3rem);
  text-align: center;
}
.jour__head .eyebrow,
.lodges__head .eyebrow,
.scene__intro .eyebrow,
.avis-home__head .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.8rem, 1.4vw, 1.25rem);
}
.jour__head .eyebrow::before,
.jour__head .eyebrow::after,
.lodges__head .eyebrow::before,
.lodges__head .eyebrow::after,
.scene__intro .eyebrow::before,
.scene__intro .eyebrow::after,
.avis-home__head .eyebrow::before,
.avis-home__head .eyebrow::after {
  content: "";
  width: clamp(1.8rem, 3vw, 3rem);
  height: 1px;
  background: currentColor;
  opacity: .42;
}
.jour .eyebrow { color: var(--argile); }
.jour__title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: var(--t-h1);
  line-height: 1.08;
  color: var(--calcaire);
  margin: 1rem 0 1.1rem;
}
.jour__sub {
  max-width: 52ch;
  margin: 0 auto;
  font-size: var(--t-chapo);
  line-height: var(--interligne);
  color: color-mix(in srgb, var(--calcaire) 72%, transparent);
}

/* --- Les 4 volets côte à côte --- */
/* Frise chronologique : les quatre moments sur une même ligne, dans l'ordre,
   au-delà de 820 px — empilés en dessous (requête média plus bas).

   ARBITRAGE ASSUMÉ. La colonne ne fait que ~290 px à 1440 et ~210 à 1024,
   soit une trentaine de signes par ligne, très en dessous de la fourchette
   de 66-75 qui vaut partout ailleurs. C'est le prix de la lecture
   chronologique : les quatre heures se lisent d'un coup, dans l'ordre.
   Une grille 2×2 tenait la fourchette mais cassait la frise. La chronologie
   l'emporte. Voir ETAT-DU-PROJET.md.

   Ce qui NE revient PAS : le texte reste visible en permanence. Il était
   auparavant en opacity 0 jusqu'au survol — du contenu éditorial illisible
   sans souris, invisible au clavier, mal indexé. Le survol éclaircit
   l'image, il ne révèle plus rien. */
.jour__panels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.4rem, .8vw, 1rem);
}
.volet {
  position: relative;
  min-height: 62vh;
  overflow: hidden;
}
/* Filet séparateur : se dissout avant la jonction basse (aucun trait coupé net) */
.volet + .volet::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0,
    color-mix(in srgb, var(--calcaire) 14%, transparent) 12%,
    color-mix(in srgb, var(--calcaire) 14%, transparent) 58%,
    transparent 86%);
}

/* Un média unique : l'attribut poster de la vidéo remplace l'ancienne image
   superposée. Il est donc impossible d'apercevoir deux cadrages mélangés. */
.volet__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
  transform: scale(1.001);
  transition: opacity .7s var(--ease), transform 1.6s var(--ease);
}
.volet.is-live .volet__video { opacity: .62; transform: scale(1.018); }
.volet__veil {
  position: absolute;
  inset: 0;
  /* Voile CONSERVÉ pour la lisibilité, concentré sur le bas où vit le texte */
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--nuit) 34%, transparent) 0%,
    color-mix(in srgb, var(--nuit) 14%, transparent) 30%,
    color-mix(in srgb, var(--nuit) 58%, transparent) 70%,
    color-mix(in srgb, var(--nuit) 82%, transparent) 100%
  );
}

.volet__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 62vh;
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
  /* garde les textes au-dessus de la zone de fondu vers le calcaire */
}
.volet__moment {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.35rem);
  line-height: 1.08;
  color: var(--argile);
  text-shadow: 0 2px 24px color-mix(in srgb, var(--nuit) 60%, transparent);
}
.volet__label {
  display: block;
  font-family: var(--font-interface);
  font-size: var(--t-surtitre);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--argile);
  text-shadow: 0 1px 16px color-mix(in srgb, var(--nuit) 65%, transparent);
}
.volet__title {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.14;
  color: var(--calcaire);
  margin-top: .5rem;
  text-shadow: 0 2px 22px color-mix(in srgb, var(--nuit) 70%, transparent);
}
.volet__text {
  margin-top: .9rem;
  /* 32ch tenaient dans une bande de 291 px ; en grille la colonne fait 644 px
     à 1440 et 817 à 1920. Mesure faite : 1ch de Jost vaut 0,58em, donc 60ch
     rendaient encore 85 signes. 53ch tiennent la fourchette en haut de
     l'échelle — 75 signes à 768 et à 1920, 74 à 1440 où c'est la colonne de
     la grille qui borne, pas le plafond. */
  max-width: 53ch;
  font-size: var(--t-corps);
  line-height: var(--interligne);
  color: color-mix(in srgb, var(--calcaire) 80%, transparent);
  /* AUCUNE opacité nulle par défaut. Ce texte est du contenu éditorial : le
     cacher jusqu'au survol le rendait illisible pour qui ne survole pas,
     invisible au clavier, et pauvrement indexé. Le survol enrichit ci-dessous
     une lecture déjà possible — il ne la déclenche plus. */
}

/* Le survol anime le média unique ; le texte reste toujours lisible. */
/* --- Mobile / tactile : empilement vertical, tout visible d'emblée --- */
@media (max-width: 820px) {
  .jour__panels { grid-template-columns: 1fr; }
  .volet { min-height: 44vh; }
  .volet__content { min-height: 44vh; padding-bottom: clamp(1.4rem, 2.4vw, 2.2rem); }
  .volet + .volet::before {
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(to right,
      transparent 0,
      color-mix(in srgb, var(--calcaire) 14%, transparent) 18%,
      color-mix(in srgb, var(--calcaire) 14%, transparent) 82%,
      transparent 100%);
  }
  /* Sans survol, le poster reste le média unique ; la vidéo n'est pas chargée. */
  .volet__video { opacity: .44; }
  .volet__moment { color: var(--argile); }
  .volet__text { opacity: 1; transform: none; }
  /* Révélation en fondu à l'entrée de chaque volet dans l'écran */
  .volet { opacity: 0; transform: translateY(14px);
           transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .volet.is-in { opacity: 1; transform: none; }
}

/* --- Mouvement réduit : aucun élargissement animé, textes visibles --- */
@media (prefers-reduced-motion: reduce) {
  /* Aucune cascade, aucune vidéo : tout est visible immédiatement */
  .volet { transition: none; opacity: 1 !important; transform: none !important; }
  .volet:hover { flex-grow: 1; }
  .volet__video { opacity: .4; transform: none; transition: none; }
  .volet__moment { color: var(--argile); }
  .volet__text { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ============================================================
   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: 1.2rem auto 1.5rem;
}
.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: .7rem 0 1.15rem;
}
.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: 1.2rem auto 1.6rem;
}
.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 nuit : plus dense côté texte, l'image respire de l'autre côté */
.scene__veil { position: absolute; inset: 0; pointer-events: none; }
.scene--left .scene__veil {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--nuit) 64%, transparent) 0%,
    color-mix(in srgb, var(--nuit) 26%, transparent) 52%,
    color-mix(in srgb, var(--nuit) 6%, transparent) 100%);
}
.scene--right .scene__veil {
  background: linear-gradient(to left,
    color-mix(in srgb, var(--nuit) 64%, transparent) 0%,
    color-mix(in srgb, var(--nuit) 26%, transparent) 52%,
    color-mix(in srgb, var(--nuit) 6%, transparent) 100%);
}
.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 {
  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);
}
.scene__text::before {
  content: "";
  position: absolute;
  /* Boîte très large : c'est en elle que le dégradé doit s'éteindre. */
  inset: -7rem -12rem;
  z-index: -1;
  pointer-events: none;
  /* UN SEUL dégradé, radial : un radial s'estompe dans toutes les directions,
     un linéaire garde des bords francs en haut et en bas.

     ⚠ LE RAYON DOIT RESTER À 50 % 50 %. Un rayon en pourcentage se calcule
     sur les DIMENSIONS de la boîte, pas sur sa moitié : à `76% 62%`, le
     dégradé s'éteignait à 76 % de la largeur depuis le centre alors que le
     bord est à 50 %. Il valait encore --nuit à ~30 % d'opacité au bord, où
     la boîte le coupait net — c'était le rectangle visible sur les scènes.
     À 50 % 50 %, le fondu s'achève exactement au bord : aucune arête n'est
     géométriquement possible.

     Les paliers sont redistribués sur la nouvelle course pour conserver la
     densité perçue au centre (94 %) : chaque centile ancien est multiplié
     par 50/76 horizontalement — soit, à course égale, 0,66. */
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    color-mix(in srgb, var(--nuit) 94%, transparent) 0%,
    color-mix(in srgb, var(--nuit) 90%, transparent) 34%,
    color-mix(in srgb, var(--nuit) 74%, transparent) 56%,
    color-mix(in srgb, var(--nuit) 46%, transparent) 74%,
    color-mix(in srgb, var(--nuit) 18%, transparent) 89%,
    transparent 100%);
}
.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: .8rem 0 1.1rem;
  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;
  font-size: var(--t-corps);
  line-height: var(--interligne);
  color: color-mix(in srgb, var(--calcaire) 88%, transparent);
  text-shadow: 0 1px 20px color-mix(in srgb, var(--nuit) 68%, transparent);
}
.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;
  }
  .moments--chapters .scene__text::before {
    inset: -3.5rem -5rem;
    background: radial-gradient(ellipse 50% 50% at 50% 50%,
      color-mix(in srgb, var(--nuit) 88%, transparent) 0%,
      color-mix(in srgb, var(--nuit) 68%, transparent) 48%,
      color-mix(in srgb, var(--nuit) 28%, transparent) 76%,
      transparent 100%);
  }

  /* 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 : même suppression des fondus datés, mais aucun écran n'est bloqué.
   Les scènes restent dans le flux et se séparent par une coupe sombre nette. */
@media (max-width: 820px) {
  .moments--chapters { padding-bottom: 0; }
  .moments--chapters .scene {
    -webkit-mask-image: none;
    mask-image: none;
    border-top: 1px solid color-mix(in srgb, var(--calcaire) 12%, transparent);
  }
  .moments--chapters .scene__text {
    padding-left: 1rem;
    border-left: 1px solid color-mix(in srgb, var(--argile) 68%, transparent);
  }
  .moments--chapters .scene--right .scene__text {
    padding-right: 1rem;
    padding-left: 0;
    border-right: 1px solid color-mix(in srgb, var(--argile) 68%, transparent);
    border-left: 0;
  }
  /* Sur petit écran, les classes « haut/bas » ne doivent pas créer de grands
     vides artificiels : le voile inférieur protège déjà la lecture. */
  .moments--chapters .scene--high .scene__content {
    padding-top: calc(var(--fade) + clamp(1.5rem, 4vh, 2.5rem));
  }
}

@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: 1rem 0 1.4rem;
}
.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.
   Le rapport passe en 4/3 : l'image est un paysage horizontal, et un cadre
   vertical en `cover` n'en gardait qu'une bande centrale. */
.territoire__photos { grid-template-columns: 1fr; }
.territoire__photo { width: 100%; 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: 1rem auto 1.35rem;
  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 : réservation (clôture, scène fondue nuit)
   ============================================================ */
.resa {
  position: relative;
  background: var(--nuit);
  color: var(--calcaire);
  text-align: center;
  padding: var(--sec-y) clamp(1.2rem, 4vw, 3rem);
}

.resa__inner { position: relative; z-index: 2; max-width: 46rem; margin: 0 auto; }
.resa .eyebrow { color: var(--argile); }
.resa__title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: var(--t-h1);
  line-height: 1.08;
  color: var(--calcaire);
  margin: 1rem 0 1.2rem;
}
.resa__body {
  max-width: 46ch;
  margin: 0 auto 2rem;
  font-size: var(--t-chapo);
  line-height: var(--interligne);
  color: color-mix(in srgb, var(--calcaire) 80%, transparent);
}
.resa .btn--solid { font-size: var(--t-petit); padding: .9em 1.8em; }
/* Ce retrait de 1,8em est hors requête média : il écrasait la compaction
   `@media (max-width: 560px) .btn` de components.css, si bien que le bouton
   gardait une largeur intrinsèque constante de 323 px — 51 de trop à 320 px.
   La compaction prévue est rétablie ici. Elle ne suffit pas à elle seule :
   le libellé fait 261 px de texte pour 241 px utiles une fois le retrait
   compacté, d'où l'autorisation de passer sur deux lignes. L'échelle
   typographique n'est pas touchée. */
/* Deux libellés, un seul visible à la fois. Voir ETAT-DU-PROJET.md : la
   différence est DÉLIBÉRÉE et tient à la place disponible, pas à une
   incohérence rédactionnelle. Les harmoniser rétablirait le retour à la
   ligne sur le bouton de conversion. */
.resa .btn__court { display: none; }

@media (max-width: 360px) {
  .resa .btn--solid {
    padding: .58em .9em;
    max-width: 100%;
  }
  /* « Vérifier les disponibilités » réclamait 292 px pour 272 utiles à
     320 px et passait sur deux lignes. « Voir les disponibilités » tient en
     259 px, sur une seule ligne, sans toucher au corps. */
  .resa .btn__long { display: none; }
  .resa .btn__court { display: inline; }
}
.resa__note {
  margin-top: 1.4rem;
  font-family: var(--font-interface);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--calcaire) 52%, transparent);
}


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