/* ============================================================
   Souki Lodges & Spa — Socle des pages intérieures
   Même langage que la home : fluidité totale, médias aux bords
   fondus, jonctions en dégradés amples, aucun cadre net.
   Couleurs : uniquement les variables de tokens.css.
   ============================================================ */

/* ---------- HERO de page (se dissout dans le contenu) ---------- */
.phero {
  position: relative;
  min-height: clamp(36rem, 74vh, 50rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--calcaire);
  /* Fond de sûreté — même motif que .hero, et pour la même raison.
     Le bloc est composé en --calcaire et le contraste ne venait que
     de la photographie. Tant qu'elle n'était pas arrivée, on lisait
     du #EEEAE1 sur le #EEEAE1 du body : rapport 1,00:1 sur sept
     pages, titre et chapô invisibles. Mesuré le 7 août 2026.
     NE JAMAIS RETIRER : le texte de ce bloc est clair par
     construction, il lui faut un fond sombre sous l'image. */
  background-color: var(--nuit);
}
.phero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Les Lodges : la vue aérienne devient le portrait d'ouverture de la page.
   Le point focal conserve simultanément le Pic de Vissou et les deux volumes
   en bois dans le cadre panoramique du hero. */
.phero--lodges .phero__media {
  object-position: center 60%;
  filter: saturate(.9) contrast(1.025) brightness(.92);
}
.phero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Voile CONSERVÉ (lisibilité du titre) mais resserré côté texte :
     la moitié droite de l'image reste nette et pleine. */
  /* 50 % et non 70 : allégé le 9 août 2026. Le voile mangeait la moitié
     gauche du film. Contrainte tenue : titre et chapô restent au-dessus
     de 4,5:1 — mesuré, pas supposé. */
  background: linear-gradient(to right,
    color-mix(in srgb, var(--nuit) 50%, transparent) 0%,
    color-mix(in srgb, var(--nuit) 32%, transparent) 40%,
    transparent 66%);
}

/* Un voile vertical global a été essayé ici puis retiré : même à forte
   densité il n'atteignait pas 4,5:1 sur les sous-titres, et il assombrissait
   le bas de toutes les images pour un défaut qui est local. Voir
   ETAT-DU-PROJET.md. La lisibilité passe par un scrim posé sur le bloc de
   texte, pas par un voile de section. */
.phero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(6rem, 14vh, 8rem) clamp(1.4rem, 5vw, 4rem) clamp(5rem, 10vh, 7rem);
}
/* Conteneur élargi pour les heros seuls : 82rem bornaient le chapô à
   1 184 px de contenu, insuffisant pour deux lignes sur les textes longs.
   96rem donnent 1 408 px. .psec__inner et .pduo ne sont pas touchés. */
.phero .phero__inner,
.lhero .lhero__inner { max-width: var(--contenu-hero); }

.phero h1 {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: var(--t-h1);
  line-height: 1.06;
  color: var(--calcaire);
  /* 16ch bornaient le titre à 573 px à 1440 et le forçaient sur deux lignes
     alors qu'il en réclamait 882. Porté à 26ch : une ligne partout où c'est
     physiquement possible, deux au maximum. `text-wrap: balance` répartit
     les deux lignes quand elles restent nécessaires. Contrainte propre aux
     heros — --mesure-titre, partagée par les treize h1, n'est pas touchée. */
  max-width: 34ch;
  margin: var(--pas) 0 var(--pas-3);
  text-shadow: 0 2px 34px color-mix(in srgb, var(--nuit) 50%, transparent);
}
.phero .eyebrow {
  color: var(--argile);
  /* Il était resté à --t-surtitre pendant que ceux des sections montaient
     d'un cran : 14,1 px contre 16,1 sur la même page. */
  font-size: var(--t-petit);
  letter-spacing: .5em;
}
/* Comme les chapôs d'ouverture de l'accueil, il sort de la mesure de lecture :
   ce n'est pas un texte suivi mais une accroche sous un titre de 90 px. */
.phero__lede {
  position: relative;
  /* Un chapô de hero n'est pas de la prose courante : la fourchette de
     66-75 signes ne s'y applique PAS. C'est une phrase d'accroche, elle
     occupe une part bien plus large de la fenêtre qu'un corps de texte.

     Aucun plafond propre : c'est le conteneur qui borne, et il est élargi
     pour les heros juste en dessous. Le corps est descendu d'un cran —
     24,4 px à 1440 au lieu de 27,4 — pour loger deux lignes au lieu de
     trois ou quatre. Il reste nettement au-dessus du corps courant (20,5). */
  max-width: none;
  font-size: clamp(1.25rem, 1.15rem + .40vw, 1.62rem);
  font-size: var(--t-lede);
  line-height: var(--interligne);
  color: color-mix(in srgb, var(--calcaire) 90%, transparent);
  text-shadow: 0 1px 20px color-mix(in srgb, var(--nuit) 40%, transparent);
}

/* Notre histoire : portrait éditorial sans texte sur les visages.
   Sur grand écran, le récit et la photographie occupent deux territoires
   distincts. Sous 900 px, la photo conserve son ratio avant le texte : aucun
   recadrage vertical agressif quand la fenêtre est étroite. */
.phero--story {
  background: var(--foret);
}
.phero--story .phero__media {
  left: 37%;
  width: 63%;
  object-position: center 42%;
  filter: saturate(.88) contrast(1.025) brightness(.94) sepia(.025);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 29%);
  mask-image: linear-gradient(to right, transparent 0%, #000 29%);
}
.phero--story .phero__veil {
  background: linear-gradient(to right,
    var(--foret) 0%,
    var(--foret) 38%,
    color-mix(in srgb, var(--foret) 92%, transparent) 45%,
    color-mix(in srgb, var(--foret) 64%, transparent) 54%,
    color-mix(in srgb, var(--foret) 28%, transparent) 64%,
    transparent 74%);
}
.phero--story .phero__inner {
  margin-left: 0;
  max-width: none;
  width: 48%;
  padding-right: clamp(1.5rem, 3vw, 3rem);
}
.phero--story h1 {
  max-width: 13ch;
  text-wrap: balance;
}
/* .phero--story .phero__lede { max-width: 42ch } — ANNULÉE le 10 août
   2026. L'exception datait du 7 août ; elle donnait 470 px sur La Maison
   contre 627 px sur les dix-sept autres heros. La règle de prévisibilité
   — un type de bloc, une largeur — lui est postérieure et prime. */

@media (max-width: 899px) {
  .phero--story {
    display: grid;
    min-height: 0;
    padding-top: 0;
    background: var(--foret);
  }
  .phero--story .phero__media {
    position: relative;
    inset: auto;
    grid-row: 1;
    width: 100%;
    height: clamp(22rem, 70vw, 30rem);
    object-position: center 38%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .phero--story .phero__veil {
    display: none;
  }
  .phero--story .phero__inner {
    grid-row: 2;
    width: 100%;
    padding: clamp(2.5rem, 8vw, 4rem) clamp(1.4rem, 5vw, 4rem)
             clamp(3.5rem, 10vw, 5rem);
  }
  .phero--story h1,
  .phero--story .phero__lede {
    max-width: none;
  }
}

/* ── Voile local des sous-titres de hero — RETIRÉ le 31 juillet 2026 ──
   Un scrim radial vivait ici, avec trois paliers d'opacité par page. Il
   dessinait un film gris visible autour du texte, sur la vidéo comme sur
   les photographies. Retiré sur décision, comme celui du hero d'accueil :
   le film visible est plus dommageable qu'un contraste faible sur un texte
   en grand corps.
   Le contraste des heros repose désormais sur le seul .phero__veil, le
   fondu général sur le média.
   ⚠ NE PAS LE RÉTABLIR. Le chantier « lisibilité des sous-titres de hero »
   reste suspendu jusqu'au lot photographies : quatre des images concernées
   changent, et c'est par l'image qu'il se réglera, pas par un voile.
   Voir ETAT-DU-PROJET.md. */


/* ---------- Sections claires ---------- */
.psec {
  position: relative;
  background: var(--calcaire);
  color: var(--ink);
  padding: var(--sec-y) clamp(1.4rem, 5vw, 4rem);
}
.psec__inner { max-width: var(--contenu); margin: 0 auto; }
/* La mesure du texte est portée par .pprose ; ce conteneur ne fait que
   centrer et ménager les titres, qui peuvent aller plus large. */
.psec__narrow { max-width: 66rem; margin: 0 auto; text-align: center; }
/* La mesure vit dans typo.css — var(--mesure), une seule source. Le
   plafond local qui vivait ici (57ch, calibré sous Jost le 29 juillet)
   battait typo.css par sa spécificité (0,2,0) et aurait maintenu la
   dérive : retiré le 7 août 2026. */
/* Variante pour les sections qui portent une liste plutôt qu'un paragraphe :
   la mesure de lecture ne s'y applique pas, c'est la longueur des items qui
   commande. */
.psec__narrow--large { max-width: 78rem; }

/* Deux colonnes de prose, sur le modèle de « Ni hôtel, ni maison d'hôtes » de
   l'accueil : le seul bloc du site qui occupait vraiment sa bande. Réservé
   aux blocs d'au moins 430 signes — en deçà, chaque colonne tombe sous cinq
   lignes et la fragmentation empire au lieu de se résorber.
   Ne s'applique qu'aux blocs SEULS dans leur bande horizontale : à côté d'une
   image latérale, la page deviendrait un damier. */
/* .psec__narrow--duo — mise en deux colonnes au-delà de 1180 px, RETIRÉE le
   10 août 2026 (arbitrage « grille éditoriale unique »). La classe subsiste
   dans le HTML des sept pages qui la portaient — activites, experiences,
   lodges ×2, la-maison ×2, occasions — mais elle est désormais inerte : le
   conteneur retombe sur .psec__narrow (66 rem) et la prose sur var(--mesure).
   Ne pas la réintroduire sans rouvrir l'arbitrage. */

/* Même logique que les surtitres des scènes de l'accueil : ces libellés
   marquent les chapitres d'une page, ils doivent se voir. Un cran au-dessus
   du surtitre courant, et un peu plus d'interlettre pour tenir la ligne.
   Concerne toutes les pages bâties sur .psec, pas seulement Les Expériences —
   c'est la cohérence recherchée. */
.psec .eyebrow {
  font-size: var(--t-petit);
  letter-spacing: .34em;
}

/* Signature éditoriale commune avec l'accueil : les introductions centrées
   deviennent de vrais chapitres, encadrés par deux filets très légers. */
/* Le motif de surtitre de section vit dans components.css depuis le
   19 août 2026 : la page d'accueil ne charge pas pages.css, et ses
   surtitres de section doivent porter le même filet. */


.psec h2 {
  font-family: var(--font-editorial);
  font-weight: 300;
  /* --t-h1 mettait les titres de section à la MÊME taille que le titre de
     hero : 75 px contre 75 à 1440. Pas une inversion, un aplatissement —
     le titre principal ne dominait plus rien. Retour à --t-h2, qui rétablit
     l'écart de l'échelle : 53 contre 75 à 1440. */
  font-size: var(--t-h2);
  line-height: 1.06;
  color: var(--foret);
  margin: var(--pas) 0 var(--pas-3);
}
.psec h3 {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.15;
  color: var(--foret);
  margin: var(--pas) 0 var(--pas-3);
}
.pprose {
  max-width: 62ch;
  font-size: var(--t-corps);
  line-height: var(--interligne);
  color: color-mix(in srgb, var(--ink) 74%, var(--calcaire));
  margin-bottom: 1.1rem;
}
.psec__narrow .pprose { margin-inline: auto; }
.pmeta {
  font-family: var(--font-interface);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 62%, var(--calcaire));
  /* Une méta collée à son paragraphe se lit comme sa suite. Un filet fin
     l'en détache sans ajouter de trait plein dans la page. */
  margin-top: var(--pas-4);
  padding-top: var(--pas-2);
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

/* Duo texte + média fondu (alternance) */
/* Les blocs les plus importants de la page : cinq paragraphes par lodge ne
   peuvent pas tenir dans la moitié d'un conteneur de 74 rem. Le conteneur
   s'élargit et la colonne de texte prend le pas sur l'image. */
.pduo {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  max-width: var(--contenu);
  margin: 0 auto;
}
.pduo--media-right { grid-template-columns: 1.2fr 1fr; }
.pduo--media-right .pduo__media { order: 2; }
.pduo + .pduo { margin-top: clamp(3.5rem, 9vh, 6.5rem); }

/* Média aux bords fondus (image ou vidéo) — jamais de cadre net */
.pmedia {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--rayon-media);
}
.pmedia--tall { aspect-ratio: 4 / 5; }
/* Colonne média portant deux visuels : le sujet et son complément, empilés.
   Sert au bloc des vignobles, où la vigne et le chai se répondent. */
.pduo__media--pile { display: grid; gap: clamp(.8rem, 2vw, 1.4rem); align-content: start; }
.pmedia img,
.pmedia video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .9s var(--ease);
}

/* Ouverture des films de lodge : commande explicite, accessible au clavier et
   au tactile. Le libellé reste lisible sur toutes les images sans masquer le
   sujet ; le lecteur natif prend ensuite le relais en plein écran. */
.pmedia__expand {
  position: absolute;
  z-index: 3;
  right: clamp(.75rem, 2vw, 1.15rem);
  bottom: clamp(.75rem, 2vw, 1.15rem);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .68rem .9rem;
  border: 1px solid color-mix(in srgb, var(--calcaire) 52%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nuit) 68%, transparent);
  color: var(--calcaire);
  font-family: var(--font-interface);
  font-size: var(--t-micro);
  letter-spacing: .09em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.pmedia__expand svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pmedia__expand:focus-visible {
  outline: 2px solid var(--argile);
  outline-offset: 3px;
}

@media (hover: hover) {
  .pduo:hover .pmedia img,
  .pduo:hover .pmedia video { transform: scale(1.018); }
  .pmedia__expand:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--nuit) 84%, transparent);
    border-color: color-mix(in srgb, var(--calcaire) 78%, transparent);
  }
}

/* ---------- Scène sombre pleine largeur (bande fondue) ---------- */
.pband {
  position: relative;
  background: var(--nuit);
  color: var(--calcaire);
  text-align: center;
  padding: var(--sec-y) clamp(1.4rem, 5vw, 4rem);
  overflow: hidden;
}

.pband__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
}
.pband__veil {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--nuit) 55%, transparent);
}
.pband__inner { position: relative; z-index: 2; max-width: 58rem; margin: 0 auto; }
.pband h2 {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.08;
  color: var(--calcaire);
  margin: var(--pas) 0 var(--pas-3);
}
.pband .eyebrow { color: var(--argile); }
.pband__body {
  /* Chapô de bande d'appel : un cran au-dessus du texte courant. */
  /* La mesure vit dans typo.css — var(--colonne). Le plafond local de 51ch
     qui vivait ici rendait 593 px à ce corps : retiré le 10 août 2026. */
  font-size: var(--t-chapo);
  margin: 0 auto 2rem;
  line-height: 1.8;
  color: color-mix(in srgb, var(--calcaire) 80%, transparent);
}
/* L'élargissement propre à Notre histoire (68ch) battait la mesure
   commune par sa spécificité : retiré le 7 août 2026, la bande reprend
   var(--mesure) comme les autres. */
.pband__note {
  margin-top: 1.3rem;
  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);
}

/* Liste de maillage discret en bas de page */

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .phero { min-height: clamp(31rem, 68svh, 40rem); }
  .pduo { grid-template-columns: 1fr; gap: clamp(1.8rem, 6vw, 2.8rem); }
  .pduo--media-right .pduo__media { order: 0; }   /* média d'abord en mobile */
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  /* les vidéos restent sur leur poster (géré par wireScrollVideos) ; rien à masquer */
  .pmedia img, .pmedia video, .pband__media, .phero__media {
    transition: none;
    transform: none !important;
  }
}

/* ---------- Variantes de rythme ---------- */
.phero--short { min-height: clamp(28rem, 58svh, 36rem); }
.psec--tight { padding-block: clamp(2.4rem, 5vh, 3.4rem) 0; }

/* ---------- Listes éditoriales (équipements, inclusions) ---------- */
/* .plist — RETIRÉE le 10 août 2026. Bloc de liste en deux colonnes au-delà
   de 900 px : aucune des 25 pages ne l'appelait, ni en HTML ni en JS. CSS
   mort, relevé par la « grille éditoriale unique ». */

/* Liste des coffrets — page Offrir, FR et EN, 21 août 2026. Cinq entrées :
   un nom cliquable en inline-link, une ligne de contenu et le prix en pmeta.
   Aucun jeton nouveau ; le filet reprend celui de .lodge-specs. */
.coffrets { list-style: none; margin: clamp(2rem, 5vh, 3rem) 0 0; padding: 0; }
.coffrets > li {
  padding-block: clamp(1.1rem, 2.4vh, 1.5rem);
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.coffrets > li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.coffrets .pprose, .coffrets .pmeta, .coffrets__lien { margin: 0; }
/* Le nom ne porte plus le lien : rien n'y annonçait qu'on pouvait cliquer.
   L'appel est explicite, sur sa propre ligne, sous le détail.
   text-align explicite : sans lui, la ligne hérite du centrage de
   .psec__narrow et se décale seule sous un nom et un détail ferrés à gauche. */
.coffrets__lien {
  margin-top: .55rem;
  text-align: left;
  max-width: var(--colonne);
  font-size: var(--t-corps);
}
/* .pmeta pose normalement son propre filet et passe en capitales : le filet
   ferait doublon avec celui de l'entrée, et les capitales tiennent mal sur une
   phrase entière. On garde le corps réduit et la couleur atténuée, rien d'autre. */
.coffrets .pmeta {
  margin-top: .4rem;
  padding-top: 0;
  border-top: 0;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-labeur);
  line-height: var(--interligne-labeur);
}

/* Fiche technique discrète sous chaque lodge. Fermée, elle se lit comme un
   simple lien éditorial ; ouverte, elle organise l'information formelle sans
   interrompre le récit ni imposer une longue liste à tous les visiteurs. */
.lodge-specs {
  margin-top: clamp(1.8rem, 4vh, 2.6rem);
  border-top: 1px solid color-mix(in srgb, var(--laiton) 44%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.lodge-specs summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-interface);
  font-size: var(--t-petit);
  letter-spacing: .11em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--foret);
}
.lodge-specs summary::-webkit-details-marker { display: none; }
.lodge-specs summary:focus-visible {
  outline: 2px solid var(--argile);
  outline-offset: 4px;
}
.lodge-specs__toggle {
  position: relative;
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
}
.lodge-specs__toggle::before,
.lodge-specs__toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--laiton);
  transition: transform .25s ease;
}
.lodge-specs__toggle::after { transform: rotate(90deg); }
.lodge-specs[open] .lodge-specs__toggle::after { transform: rotate(0); }
.lodge-specs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1.8rem, 4vw, 3.5rem);
  padding: clamp(1.4rem, 3vh, 2.2rem) 0 clamp(2rem, 4vh, 3rem);
}
.psec .lodge-specs__grid h3 {
  max-width: none;
  margin: 0 0 1rem;
  font-family: var(--font-interface);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--laiton);
}
.lodge-specs__grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lodge-specs__grid li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: .68rem;
  font-size: clamp(.94rem, .9rem + .12vw, 1.04rem);
  line-height: 1.52;
  color: color-mix(in srgb, var(--ink) 76%, var(--calcaire));
}
.lodge-specs__grid li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .75em;
  width: 4px;
  height: 1px;
  background: var(--laiton);
}
@media (max-width: 620px) {
  .lodge-specs__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lodge-specs__toggle::before,
  .lodge-specs__toggle::after { transition: none; }
}

/* ============================================================
   FAQ — lecture longue, rythmée par rubriques
   ============================================================ */
.faq {
  background: var(--calcaire);
  color: var(--ink);
  padding: clamp(2rem, 5vh, 3rem) clamp(1.4rem, 5vw, 4rem) clamp(3.5rem, 9vh, 6rem);
}

/* Sommaire : rubriques en petites capitales, soulignées au survol */
.faq__toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem clamp(1rem, 3vw, 2rem);
}
.faq__toc-link {
  position: relative;
  font-family: var(--font-interface);
  font-size: var(--t-petit);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: color-mix(in srgb, var(--ink) 62%, var(--calcaire));
  padding-bottom: .3rem;
  transition: color .45s var(--ease);
}
.faq__toc-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--laiton);
  transition: right .55s var(--ease);
}
.faq__toc-link:hover { color: var(--foret); }
.faq__toc-link:hover::after { right: 0; }

/* La colonne est portée par le CONTENEUR, pas par le paragraphe : question,
   filet de rubrique et réponse partagent ainsi le même bord gauche, et c'est
   la colonne entière qui se centre dans la page. Le `font-size` posé ici sert
   uniquement à ce que l'unité `ch` du max-width se résolve sur la police du
   texte courant — la colonne suit donc le corps quand il grandit.
   44ch et non var(--mesure) : les réponses de la FAQ sont faites de mots
   courts, elles logent plus de signes par ligne à largeur égale. */
.faq__group {
  /* Corps ET famille du texte courant : le `ch` de ce max-width doit se
     résoudre dans la fonte du texte qu'il mesure. La famille manquait —
     le conteneur restait en Jost (ch de 10,6 px) pendant que ses
     paragraphes passaient en Instrument Serif (ch de 8,4 px) : 52ch y
     valaient 551 px au lieu de 437. Tous les enfants déclarent leur
     propre famille, rien d'autre ne change. */
  /* Le corps et la famille suivent LE LABEUR : le `ch` du max-width se
     résout dans la fonte du texte qu'il mesure. Passé d'Instrument à
     Mulish le 8 août 2026 avec le changement de caractère. */
  font-size: var(--t-labeur);
  font-family: var(--font-labeur);
  /* var(--mesure) et non une valeur locale : recalibrée le 7 août 2026,
     puis re-mesurée pour Mulish le 8. */
  max-width: var(--mesure);
  margin: 0 auto;
  padding-top: clamp(2.4rem, 6vh, 4rem);
  /* décalage d'ancre : la barre de navigation ne masque pas le titre */
  scroll-margin-top: 6rem;
}
.faq__cat {
  font-family: var(--font-interface);
  font-size: var(--t-surtitre);
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--laiton);
  margin-bottom: 1.6rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--laiton) 28%, transparent);
}
.faq__item + .faq__item { margin-top: clamp(1.8rem, 4vh, 2.6rem); }
.faq__q {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.22;
  color: var(--foret);
  margin-bottom: .7rem;
}
.faq__a {
  /* Aucune mesure ici : elle est portée par .faq__group. */
  font-size: var(--t-corps);
  line-height: var(--interligne);
  color: color-mix(in srgb, var(--ink) 74%, var(--calcaire));
}
.faq__a + .faq__a { margin-top: .8rem; }

/* ============================================================
   Coordonnées — icônes SVG fines, jamais d'émoji
   ============================================================ */
.contact-lines {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin: 1.8rem 0;
}
/* Les trois lignes partagent un seul bord gauche, et c'est le GROUPE qui se
   centre — non chaque ligne pour elle-même. Avec align-items:center, trois
   lignes de largeurs différentes donnaient trois bords gauches. 10 août 2026. */
.contact-lines--center {
  align-items: flex-start;
  width: fit-content;
  margin-inline: auto;
}
.contact-line {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  font-size: var(--t-corps);
  line-height: 1.6;
  color: inherit;
}
/* Le trait des icônes suit la couleur du texte : lisible sur clair comme sur sombre */
.contact-line__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: .18em;
  color: var(--laiton);
}
.contact-line a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  transition: border-color .45s var(--ease);
}
.contact-line a:hover { border-bottom-color: var(--laiton); }
.contact-line__note {
  display: block;
  font-family: var(--font-interface);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .62;
  margin-top: .2rem;
}

/* FAQ courte insérée dans une section centrée (page Nous trouver) */
.faq__group--inline {
  padding-top: 0;
  margin-bottom: 2rem;
  text-align: left;
}
.faq__group--inline .faq__a { margin-inline: 0; }

/* Bloc « Nous contacter » : raison sociale au-dessus des coordonnées */
.psec--tight-bottom { padding-bottom: clamp(2rem, 4vh, 3rem); }
.contact-name {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--t-h3);
  color: var(--foret);
  margin-top: .8rem;
}
.psec__narrow .contact-lines { align-items: center; }

/* Blocs de texte sans illustration (page « Le pays autour de nous ») :
   même respiration qu'entre deux duos texte + média. */
.psec > .psec__narrow + .psec__narrow,
.psec > .psec__narrow + .pduo,
.psec > .pduo + .psec__narrow {
  margin-top: clamp(3.5rem, 9vh, 6.5rem);
}

/* ============================================================
   Pages légales — lecture longue, sobre, sans image
   Fond calcaire de bout en bout : le hero est purement typographique,
   la barre de navigation reste donc en thème clair sur toute la page.
   ============================================================ */
.lhero {
  background: var(--calcaire);
  color: var(--ink);
/* ⚠ NE PAS « HARMONISER » CE RETRAIT SUR --sec-y.
     Le hero n'a pas de média : ces 171 px dégagent le titre de la barre de
     navigation, qui flotte par-dessus en transparence. 83 px sont un
     dégagement FONCTIONNEL — la hauteur de la barre — et non de l'air
     décoratif. --sec-y vaut 65 px : le titre passerait sous la barre.
     Il reste 88 px d'air réel au-dessus du titre.
     Piste consignée, non appliquée : calc(hauteur-de-barre + var(--sec-y))
     rendrait la valeur explicite et solidaire du réglage global. C'est une
     refonte de règle, pas un ajustement. Voir ETAT-DU-PROJET.md. */
  padding: clamp(8.5rem, 19vh, 11rem) clamp(1.4rem, 5vw, 4rem) clamp(2rem, 5vh, 3rem);
}
.lhero__inner,
.legal__inner {
  /* Même principe que la FAQ : la colonne est portée par le conteneur, donc
     titres et paragraphes s'alignent et l'ensemble se centre. Les 760 px
     fixes d'avant laissaient les paragraphes à 531 px calés à gauche, soit
     229 px de déséquilibre. */
  /* Même exigence que .faq__group : corps et famille du LABEUR, pour
     que le `ch` du max-width se résolve dans la bonne fonte. */
  font-size: var(--t-labeur);
  font-family: var(--font-labeur);
  /* var(--mesure) et non une valeur locale : recalibrée le 7 août 2026.
     Le registre juridique est fait de mots courts et loge quelques signes
     de plus que la cible — écart de rédaction, pas de CSS. */
  max-width: var(--mesure);
  margin: 0 auto;
}
.lhero h1 {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: var(--t-h1);
  line-height: 1.08;
  color: var(--foret);
  margin: var(--pas) 0 0;
  /* Même borne que les heros à média : une ligne quand c'est possible. */
  max-width: 34ch;
}
.lhero__lede {
  max-width: 60ch;
  margin-top: 1.2rem;
  font-size: var(--t-chapo);
  line-height: var(--interligne);
  color: color-mix(in srgb, var(--ink) 66%, var(--calcaire));
}

.legal {
  background: var(--calcaire);
  color: var(--ink);
  padding: 0 clamp(1.4rem, 5vw, 4rem) clamp(4rem, 10vh, 7rem);
}
.legal__block + .legal__block { margin-top: clamp(2.2rem, 5vh, 3.2rem); }
.legal h2 {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.2;
  color: var(--foret);
  margin-bottom: var(--pas-3);
  padding-bottom: .7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--laiton) 24%, transparent);
}
.legal p {
  font-size: var(--t-corps);
  line-height: var(--interligne);
  color: color-mix(in srgb, var(--ink) 76%, var(--calcaire));
}
.legal p + p { margin-top: .8rem; }
.legal ul {
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
}
.legal li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .5rem;
  font-size: var(--t-corps);
  line-height: var(--interligne);
  color: color-mix(in srgb, var(--ink) 76%, var(--calcaire));
}
/* Même puce laiton que les listes éditoriales, jamais un point noir */
.legal li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .82em;
  width: 6px;
  height: 1px;
  background: var(--laiton);
}

/* ============================================================
   Presse & distinctions — liste éditoriale sobre
   Chaque entrée se lit d'un bloc : média, mention ou titre,
   résumé, puis le lien sortant. Aucun extrait d'article.
   ============================================================ */
.presse-liste {
  max-width: 92rem;
  margin: clamp(1.7rem, 3.5vh, 2.4rem) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 3rem);
  padding-inline: var(--gouttiere);
}
body[data-page="presse"] .psec--press-chapter {
  padding-top: clamp(3.2rem, 6vh, 4.4rem);
  padding-bottom: clamp(2.2rem, 4vh, 3rem);
}
body[data-page="presse"] .psec--press-chapter + .psec--press-chapter {
  padding-top: clamp(1.8rem, 3.5vh, 2.6rem);
}
body[data-page="presse"] .psec--press-chapter + .psec--archives {
  padding-top: clamp(3rem, 5.5vh, 4rem);
}
body[data-page="presse"] .psec--press-chapter .psec__narrow + .presse-liste {
  margin-top: clamp(1.6rem, 3vh, 2.1rem);
}
.presse-liste--distinctions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.8rem);
}
.presse-item {
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 2.4vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--laiton) 22%, transparent);
  background: color-mix(in srgb, var(--calcaire) 92%, white);
}
.presse-item:first-child { padding-top: clamp(1.3rem, 2.4vw, 2rem); }

.presse-item__image {
  width: calc(100% + clamp(2.6rem, 4.8vw, 4rem));
  height: clamp(13rem, 20vw, 19rem);
  margin: calc(clamp(1.3rem, 2.4vw, 2rem) * -1)
          calc(clamp(1.3rem, 2.4vw, 2rem) * -1) 1.5rem;
  object-fit: cover;
}
.presse-item__logo {
  width: auto;
  max-width: min(12rem, 78%);
  height: 2.25rem;
  margin-bottom: .8rem;
  object-fit: contain;
  object-position: left center;
  filter: grayscale(1) brightness(.58) sepia(.18) hue-rotate(58deg);
}
.presse-item__edition {
  margin: -.15rem 0 .75rem;
  font-family: var(--font-interface);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--laiton) 72%, var(--ink));
}
.presse-item__lien { margin-top: auto; padding-top: 1.1rem; }

.psec--archives { background: color-mix(in srgb, var(--calcaire) 94%, var(--argile)); }
.presse-liste--archives {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: color-mix(in srgb, var(--laiton) 25%, transparent);
  border: 1px solid color-mix(in srgb, var(--laiton) 25%, transparent);
}
.presse-item--archive {
  border: 0;
  background: var(--calcaire);
}
.presse-item--featured-archive {
  grid-column: span 2;
  padding-right: clamp(2rem, 5vw, 5rem);
}
.presse-item__secondary-links {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.2rem;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid color-mix(in srgb, var(--laiton) 25%, transparent);
}
.presse-item__secondary-links a {
  font-family: var(--font-interface);
  font-size: var(--t-micro);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--foret);
  text-underline-offset: .25em;
}
.presse-item--archive .presse-item__titre { font-size: clamp(1.45rem, 1.1rem + .65vw, 2rem); }
.presse-item--archive .presse-item__texte { font-size: var(--t-petit); }
.presse-item__archive-note {
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--font-interface);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--laiton) 62%, var(--ink));
}

@media (max-width: 980px) {
  .presse-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presse-liste--distinctions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presse-liste--archives { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Le nom du média porte l'identification : c'est lui qu'on cherche. */
/* À 320 et 390 px, les blocs de la page Presse s'appuyaient sur le bord :
   leur conteneur n'avait pas de retrait propre. */
@media (max-width: 620px) {
  .presse-liste { grid-template-columns: 1fr; }
  .presse-liste--distinctions { grid-template-columns: 1fr; }
  .presse-item--featured-archive { grid-column: auto; }
}

.presse-item__media {
  font-family: var(--font-interface);
  font-size: clamp(1rem, .92rem + .35vw, 1.28rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foret) 78%, var(--laiton));
  margin-bottom: .85rem;
}
/* Mention de distinction : le fait, sans emphase. */
/* Glose des titres de presse — 11 août 2026. Les titres d'articles restent
   dans leur langue d'origine : un titre publié est le nom d'une œuvre, on ne
   le traduit pas. Six d'entre eux sont opaques pour un anglophone — l'italien,
   l'espagnol, l'allemand et trois français — et portent seuls une traduction
   sous le titre. La page FRANÇAISE n'en porte aucune, à dessein : les titres
   étrangers y sont un signe de rayonnement. */
.presse-item__glose {
  display: block;
  margin-top: .25rem;
  font-size: var(--t-micro);
  font-style: italic;
  color: color-mix(in srgb, var(--ink) 58%, var(--calcaire));
}
.presse-item__mention {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.2;
  color: var(--foret);
}
/* Titre d'article : en italique, parce qu'il n'est pas de nous. */
.presse-item__titre {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-style: italic;
  font-size: var(--t-h3);
  line-height: 1.22;
  color: var(--foret);
}
.presse-item__texte {
  max-width: var(--mesure);
  margin-top: .9rem;
  font-size: var(--t-corps);
  line-height: var(--interligne);
  color: color-mix(in srgb, var(--ink) 76%, var(--calcaire));
  text-wrap: pretty;
}
.presse-item__lien {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 1.1rem;
  color: var(--ink);
}

/* Citation mise en exergue (page La Maison) — la voix de la maison,
   détachée du fil du texte par un filet laiton, jamais par des guillemets
   décoratifs. */
.citation {
  margin: clamp(2rem, 5vh, 2.8rem) 0;
  padding-left: clamp(1.1rem, 3vw, 1.6rem);
  border-left: 2px solid var(--laiton);
}
.citation p {
  /* var(--colonne) et non var(--mesure) : au corps de chapô, 52ch rendaient
     593 px — le dernier bloc resté sur l'axe D. 10 août 2026. */
  max-width: var(--colonne);
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-chapo);
  line-height: 1.5;
  color: var(--foret);
  text-wrap: balance;
}

/* Signature manuscrite en fin de page La Maison */
.signature {
  margin: clamp(1.6rem, 4vh, 2.4rem) 0 clamp(1.4rem, 3vh, 2rem);
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--t-h3);
  color: var(--argile);
}

/* La ligne de distinctions devient cliquable vers la page Presse : même
   discrétion au repos, le laiton s'affirme au survol. */
/* Réassurance — petites capitales espacées laiton. La règle vivait dans
   home.css, que La Maison ne charge pas : la ligne y sortait en 16 px sans
   capitales ni interlettre. Elle a désormais sa place ici, aux côtés du lien
   qu'elle habille, et l'accueil ne s'en sert plus. */
.intro__badge {
  margin-top: 1.6rem;
  /* Trois distinctions séparées par des points médians : sans équilibrage, la
     coupe laisse un « · » orphelin en fin de ligne. Pas de max-width ici —
     l'interlettrage large rendrait la mesure en ch bien trop étroite. */
  text-wrap: balance;
  font-family: var(--font-interface);
  font-size: var(--t-surtitre);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--laiton);
}

.intro__badge-link {
  font-size: var(--t-surtitre);
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.intro__badge-link:hover,
.intro__badge-link:focus-visible {
  color: var(--foret);
  border-bottom-color: color-mix(in srgb, var(--laiton) 50%, transparent);
}
.pband .intro__badge-link:hover,
.pband .intro__badge-link:focus-visible { color: var(--argile); }

/* ═════════════════════════════════════════════════════════════════
   EXPÉRIENCES — texte centré sur l'axe, mosaïque en pleine largeur
   Le texte reste au-dessus de la mosaïque, mais CENTRÉ. Ferré à
   gauche, il laissait à sa droite un vide que rien ne composait : la
   colonne de lecture s'arrête à sa mesure, la largeur de contenu
   continue sans elle. Centré, le vide est réparti des deux côtés et
   devient du silence.
   C'EST LE MÊME GESTE QUE LA COMPOSITION AXE DES BANDES D'APPEL.
   Ne pas le remettre en fer à gauche.
   AUCUNE OMBRE PORTÉE, aucun `cursor: pointer`.
   ═════════════════════════════════════════════════════════════════ */

/* L'introduction ouvre la page sur un seul axe de lecture. La version en
   colonnes cassait la promesse en quatre fragments et ralentissait l'entrée
   dans les expériences. */
.xp-intro {
  padding-top: clamp(2rem, 3.8vw, 3.25rem);
  padding-bottom: clamp(2rem, 3vw, 2.75rem);
}
.xp-intro__inner {
  width: min(100%, 72rem);
  margin-inline: auto;
  text-align: center;
}
.xp-intro__inner h2 {
  margin: var(--pas) 0 var(--pas-3);
}
.xp-intro__lead {
  /* max-width: 88ch retiré le 10 août 2026 — mort depuis que typo.css
     porte var(--mesure), qui le bat en chargeant plus tard. */
  margin-inline: auto;
  font-family: var(--font-interface);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: var(--interligne);
  color: var(--ink);
  /* text-align retiré le 10 août 2026 : ferré à gauche par typo.css. */
}
.xp-intro__lead + .xp-intro__lead { margin-top: .8rem; }
.xp-intro__final {
  max-width: 54rem;
  margin: clamp(1.35rem, 2.5vw, 2rem) auto 0;
  padding-top: clamp(1rem, 1.8vw, 1.4rem);
  padding-bottom: clamp(1rem, 1.8vw, 1.4rem);
  border-top: 1px solid rgba(166, 125, 83, .35);
  border-bottom: 1px solid rgba(166, 125, 83, .35);
  font-family: var(--font-editorial);
  font-size: clamp(23px, 2.2vw, 30px);
  font-weight: 400;
  line-height: 1.28;
  color: var(--foret);
}
.xp-list {
  padding-top: clamp(2rem, 3vw, 2.75rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}
.xp-custom { padding-top: clamp(2.75rem, 5vw, 4.5rem); }

.xp { margin-bottom: 0; }
.xp:last-child { margin-bottom: 0; }
/* Un filet fin sépare deux expériences — jamais au-dessus de la
   première, d'où le sélecteur d'adjacence. */
.xp + .xp {
  border-top: 1px solid rgba(46, 58, 44, .1);
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
  padding-top: clamp(2.5rem, 4.5vw, 4rem);
}

/* ── Le texte : le point fixe ───────────────────────────────────────
   Même largeur, même alignement, même gabarit sur les CINQ. Aucune
   alternance gauche/droite : c'est la mosaïque qui varie, pas lui. */
.xp__texte {
  width: min(100%, 68rem);
  max-width: none;
  margin: 0 auto clamp(44px, 5vw, 72px);
  padding-inline: var(--gouttiere);
  text-align: center;
}
.xp__oeil {
  display: block;
  font-family: var(--font-interface);
  /* L'œil reste en pixels fixes : c'est un repère, pas de la lecture. */
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--laiton);
  margin-bottom: var(--pas);
}
/* Filet centré, comme sur les bandes d'appel. */
.xp__oeil::after {
  content: '';
  display: block;
  width: 46px;
  height: 1px;
  background: var(--laiton);
  opacity: .5;
  margin: 9px auto 0;
}
.xp__titre {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.08;
  color: var(--foret);
  margin-bottom: var(--pas-3);
}
/* `.xp__ligne` et non `.pprose` : la justification de typo.css s'applique
   directement sur `.pprose`, et une valeur héritée perd contre une règle
   directe — le paragraphe serait justifié malgré le centrage du parent. */
.xp__ligne {
  font-family: var(--font-interface);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: var(--interligne);
  color: var(--ink);
  /* text-align retiré le 10 août 2026 : ferré à gauche par typo.css. */
  hyphens: none;
}
.xp__ligne + .xp__ligne { margin-top: .9rem; }
/* text-align retiré le 10 août 2026 : l'alignement de .pmeta est celui de
   son conteneur, partout. */
.xp__texte .pmeta {
  margin-top: clamp(1.1rem, 1.6vw, 1.6rem);
}

/* ── Les soins : deux familles sous la prose ─────────────────────────
   Nomenclature, pas lecture suivie : la description est d'un cran sous
   la prose. Aucune ombre, un seul axe, aucune colonne.

   ⚠ L'AXE — `--colonne` et NON `--mesure`. `--mesure` est en `ch` : il
   se résout contre la police du bloc qui le porte, et cette liste ne
   compose pas dans la même police que la prose. Mesuré sur la page
   réelle le 15 août 2026 à 1440 px : la prose `.xp__ligne` s'ouvre à
   724 px ; la même règle `71ch` appliquée ici rendait 588 px, soit un
   second axe 68 px plus à droite. `--colonne` vaut 45rem = 720 px, une
   valeur absolue que la police ne déplace pas — c'est l'axe unique de
   la prose, et tokens.css le dit. Ne pas revenir à `--mesure`. */
.soins {
  max-width: var(--colonne);
  margin-inline: auto;
  margin-top: clamp(1.8rem, 2.8vw, 2.6rem);
  text-align: left;
}

/* Écho de `.xp__oeil`, mais ferré à gauche et sans filet : celui-ci
   ouvre une liste À L'INTÉRIEUR de la section, pas la section. */
.soins__famille {
  font-family: var(--font-interface);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--laiton);
  margin: 0 0 var(--pas-3);
}
.soins__groupe + .soins__groupe {
  margin-top: clamp(1.6rem, 2.4vw, 2.2rem);
}

.soins__liste { margin: 0; padding: 0; }
.soins__item { display: block; }
.soins__item + .soins__item { margin-top: .82rem; }

/* Le nom et sa description coulent sur la même ligne : neuf soins en
   deux temps auraient fait dix-huit lignes et un catalogue. */
.soins__nom {
  display: inline;
  font-family: var(--font-interface);
  font-weight: 400;
  color: var(--foret);
}
.soins__nom::after {
  content: ' — ';
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.soins__desc {
  display: inline;
  margin: 0;
  font-family: var(--font-labeur);
  font-weight: 400;
  font-size: clamp(14px, 1.08vw, 15.5px);
  line-height: 1.62;
  color: color-mix(in srgb, var(--ink) 86%, transparent);
  text-wrap: pretty;
}

/* ── LES LIEUX — page « Le pays autour de nous » ─────────────────────
   Trois éléments quand « Les soins » en portait deux : le nom, la
   distance, la description. Le nom et la distance tiennent leur ligne ;
   la description coule dessous.

   Pourquoi ne pas reprendre « Les soins » tel quel, alors que le
   dispositif en vient : là-bas, neuf items d'UNE ligne seraient devenus
   un catalogue en passant à deux lignes. Ici les descriptions font trois
   à cinq lignes ; à les faire couler derrière le nom, on ne repère plus
   les entrées et l'on ne lit qu'un bloc. Le rapport s'inverse, le
   dispositif suit. Arbitré sur maquette le 15 août 2026.

   ⚠ L'AXE. `--colonne` est absolu (45rem). Ne pas prendre `--mesure`,
   qui est en `ch` : il se résoudrait contre la police de CETTE liste —
   Mulish — quand la prose voisine est en Instrument Serif, et les deux
   axes se décaleraient de plusieurs dizaines de pixels. C'est le même
   piège que sur « Les soins », payé une fois. */
.pays {
  /* 62rem et non `--colonne` (45rem) : ce bloc porte une LISTE, pas de la
     prose. La mesure de lecture ne s'y applique pas — c'est la longueur des
     items qui commande, comme le note déjà `.psec__narrow--large`. À 45rem, la
     liste faisait 720 px sous une mosaïque de 1312 : 55 %, et le contraste
     était trop fort. Porté à 992 px le 16 août 2026.
     Les colonnes de `.pduo` étant plus étroites (669 px), elles ne bougent
     pas : `max-width` ne force aucune largeur. */
  max-width: 62rem;
  margin-inline: auto;
  margin-top: clamp(1.8rem, 2.8vw, 2.6rem);
  text-align: left;
}
.pays__liste { margin: 0; padding: 0; }
.pays__item { display: block; }
.pays__item + .pays__item { margin-top: clamp(1.1rem, 1.8vw, 1.45rem); }

.pays__nom {
  display: block;
  margin-bottom: .2rem;
  font-family: var(--font-interface);
  font-weight: 400;
  /* Sans corps déclaré, le terme héritait de 16 px — hors de l'échelle.
     Mis à --t-labeur, donc À ÉGALITÉ avec sa description : la hiérarchie
     est déjà portée par la graisse et la couleur, et un écart de corps en
     plus ferait trois signaux pour une seule distinction. Arbitrage du
     20 août 2026 — le site privilégie la retenue. */
  font-size: var(--t-labeur);
  color: var(--foret);
}
/* La distance — ou l'horaire, pour les marchés. C'est le seul italique
   de la page, et il porte une information, pas une emphase. Le tiret
   reste en romain : incliner un cadratin le déforme. */
.pays__loin {
  font-style: italic;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}
.pays__loin::before {
  content: ' — ';
  font-style: normal;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.pays__desc {
  display: block;
  margin: 0;
  text-wrap: pretty;
  /* Famille, corps, interligne et couleur viennent de la liste :is() de
     typo.css depuis le 20 août 2026 — source unique de la prose. Les
     valeurs locales qui vivaient ici étaient plus petites que le reste du
     site et le contredisaient en silence. */
}
/* Une ligne d'introduction avant une liste — « Cinq sentiers partent de
   Cabrières. » Même famille que la prose, pas que la liste. */
.pays__intro {
  max-width: var(--colonne);
  margin: clamp(1.4rem, 2.2vw, 2rem) auto 0;
  text-align: left;
  font-family: var(--font-labeur);
  font-size: clamp(14px, 1.08vw, 15.5px);
  line-height: 1.62;
  color: color-mix(in srgb, var(--ink) 86%, transparent);
}

/* Mention de service en fin de bloc — la saison des horaires, la nature des
   temps de trajet. Même axe et même mesure que la liste, mais plus discrète :
   c'est une note, pas du contenu. Ajoutée le 16 août 2026. */
.pays__note {
  max-width: 62rem;
  margin: clamp(1.4rem, 2.2vw, 2rem) auto 0;
  text-align: left;
  font-family: var(--font-labeur);
  font-size: clamp(13px, .96vw, 14px);
  font-style: italic;
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}

/* ── Les mosaïques : pleine largeur de contenu ───────────────────────
   `padding` latéral : marge de sécurité pour que les tuiles des bords
   ne touchent jamais le bord quand elles grandissent de 5 % au survol. */
.mos {
  display: grid;
  gap: clamp(.5rem, 1.1vw, .95rem);
  padding: 0 clamp(0px, 2.2vw, 34px);
}
/* RESSERREMENT APRÈS UNE MOSAÏQUE — 20 août 2026.
   Entre deux sections, le site pose 85 px de padding de part et d'autre,
   soit 170 px de vide. Après le bord franc d'une mosaïque pleine largeur,
   ce même vide se lit bien plus grand qu'après une fin de paragraphe : la
   page paraissait se disloquer. Le haut de la section suivante retombe
   donc sur --pas-3, jeton du site, sans toucher au rythme général. */
.psec:has(> .mos:last-child) + .psec { padding-top: var(--pas-3); }

/* RESPIRATION AVANT UNE MOSAÏQUE — 19 août 2026.
   .mos ne portait aucune marge : sur activites, où la mosaïque suit
   directement la liste du pays, le texte touchait la photo — mesuré à
   ZÉRO pixel, la liste finissant exactement là où l'image commençait.
   --pas-4 est le jeton du site pour « entre deux blocs » ; aucune valeur
   n'est inventée ici. Le sélecteur vise l'enfant direct d'une section :
   les mosaïques d'experiences, imbriquées dans un article, gardent le
   rythme de leur conteneur. */
.psec > .mos { margin-top: var(--pas-4); }

.media {
  position: relative;
  overflow: hidden;
  background: var(--nuit);
  /* Pas de `cursor: pointer` : les tuiles n'ont aucune action. */
  transition: transform 1.15s var(--ease);
  z-index: 1;
  border-radius: var(--rayon-media);
}
.media__inner {
  position: absolute;
  inset: 0;
  transition: transform 1.4s var(--ease);
}
.media__inner video,
.media__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* AUCUN ÉTALONNAGE ICI, et c'est délibéré. Les médias sont rendus tels
     qu'ils sortent des fichiers sources. */
}
/* Deux étalonnages CSS ont existé à cet endroit et ont été RETIRÉS le 9 août
   2026, pour la même raison : ils se posaient par-dessus un étalonnage studio.
     · le calque `.media__inner::after`, dégradé vert/laiton en `soft-light` —
       mesuré sur une frame figée, il assombrissait de 2/255 et désaturait de
       0,58 ; il ternissait sans rien apporter ;
     · les filtres des mosaïques, qui calmaient les verts et réchauffaient.
   Ne pas les rétablir. La décision du 16 août sur les images du pays va dans
   le même sens : ces photographies vendent un été dans l'Hérault, elles
   doivent rester éclatantes. */
.media--9-16 { aspect-ratio: 9 / 16; }
/* PLAFOND DE HAUTEUR — 10 août 2026.
   En unités de fenêtre et non en ratio fixe : une tuile 9/16 devenue large
   atteignait 1 370 px de haut à 900 de fenêtre, soit une fenêtre et demie
   pour une seule image. Le média porte déjà `object-fit: cover` : la boîte
   se referme, l'image se recadre par le centre sans se déformer.

   ⚠ Le plafond porte sur la GRILLE, pas sur la tuile, partout où la grille
   a une hauteur propre. Posé sur les tuiles, il les faisait rétrécir sous
   une grille restée haute : la colonne courte laissait un vide sous elle —
   vu à l'image sur la mosaïque Janzu. Les rangées étant en `1fr`, plafonner
   la grille les réduit ensemble et l'alignement tient. */
.media { max-height: 60vh; }          /* mobile : les grilles sont en hauteur auto */

@media (min-width: 700px) {
  .media { max-height: none; }
  .mos--a,
  .mos--b,
  .mos--c-inverse,
  .mos--d { max-height: 70vh; }
  /* .mos--c n'a pas de hauteur propre (tuiles en aspect-ratio, centrées) :
     pour elle, le plafond reste sur la tuile. */
  .mos--c > .media { max-height: 70vh; }
}

.media--4-3  { aspect-ratio: 4 / 3; }
.media--3-4  { aspect-ratio: 3 / 4; }
.media--1-1  { aspect-ratio: 1 / 1; }

/* Survol tempéré : la tuile visée avance, les voisines reculent
   derrière un voile. Le texte n'est pas une `.media` : il n'est jamais
   touché. */
.media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(46, 58, 44, 0);
  transition: background 1.15s var(--ease);
}
.mos:hover .media::after        { background: rgba(46, 58, 44, .38); }
.mos .media:hover::after        { background: rgba(46, 58, 44, 0); }
/* SAUF sur « Le pays autour de nous » — 16 août 2026. Là, les trois tuiles
   sont trois paysages qu'on veut embrasser ensemble : en assombrir deux sur
   trois dès que la souris entre dans la mosaïque est un contresens. Sur
   Expériences le voile garde son sens, les tuiles y montrant trois moments
   d'un même soin, et l'attention se porte sur l'un d'eux. */
body[data-page="activites"] .mos:hover .media::after { background: rgba(46, 58, 44, 0); }
.mos .media:hover               { transform: scale(1.018); z-index: 4; }
.mos .media:hover .media__inner { transform: scale(1.025); }

@media (hover: none) {
  .mos:hover .media::after { background: rgba(46, 58, 44, 0); }
  .mos .media:hover { transform: none; }
  .mos .media:hover .media__inner { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .media, .media__inner, .media::after { transition: none; }
  .mos .media:hover { transform: none; }
  .mos .media:hover .media__inner { transform: none; }
  .mos:hover .media::after { background: rgba(46, 58, 44, 0); }
}

/* ── Compositions éditoriales sur grand écran ──────────────────────
   A et B sont de vrais miroirs : un film principal sur toute la hauteur,
   deux photographies de détail parfaitement alignées en face. Coaching
   reprend cette grammaire avec une hauteur plus courte. Notre table devient
   une frise de quatre plans égaux : plus aucun grand vide sous les détails. */
/* Seuil descendu de 1024 à 700 px le 10 août 2026. Mesuré avant : la page
   passait de 8 971 px à 1024 de large à 19 614 px à 1023 — +119 % sur un
   seul pixel. Sous le seuil, mos--a et mos--b tombaient à UNE colonne, et
   leurs tuiles portrait, devenues larges, devenaient démesurément hautes
   (770 × 1370 px à 900 de fenêtre). À 700, une demi-fenêtre d'ordinateur
   garde ses colonnes. */
@media (min-width: 700px) {
  .mos--a,
  .mos--b {
    height: clamp(46rem, 74vw, 58rem);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .mos--a { grid-template-columns: 1fr 1.05fr; }
  .mos--a > :nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
  .mos--a > :nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
  .mos--a > :nth-child(3) { grid-area: 2 / 2 / 3 / 3; }

  .mos--b { grid-template-columns: 1.05fr 1fr; }
  .mos--b > :nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
  .mos--b > :nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
  .mos--b > :nth-child(3) { grid-area: 1 / 2 / 3 / 3; }

  .mos--a > .media,
  .mos--b > .media,
  .mos--c-inverse > .media,
  .mos--d > .media {
    min-height: 0;
    aspect-ratio: auto;
  }

  .mos--c-inverse {
    height: clamp(38rem, 58vw, 46rem);
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .mos--c-inverse > :nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
  .mos--c-inverse > :nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
  .mos--c-inverse > :nth-child(3) { grid-area: 2 / 2 / 3 / 3; }

  .mos--d {
    height: clamp(34rem, 54vw, 43rem);
    grid-template-columns: 1.35fr repeat(3, 1fr);
  }
}

/* ── C · trois masses de front, photo · film · photo ── */
.mos--c {
  grid-template-columns: 1fr 1.25fr 1fr;
  align-items: center;
}
/* ── C bis · coaching : défini dans la composition desktop ci-dessus ;
   les proportions natives reprennent la main sous 1024 px. ── */

/* ── D · « La table », quatre médias de front ──
   Le film garde une présence légèrement supérieure aux trois détails,
   sans écraser la frise ni rompre l'égalité de hauteur. */
.mos--d { grid-template-columns: 1.35fr 1fr 1fr 1fr; }

/* ── Mobile ─────────────────────────────────────────────────────────
   Trois ou quatre masses de front deviennent des timbres-poste sous
   1024 px : les compositions à trois et quatre colonnes repassent sur
   deux, le film à cheval. Seuil calé sur 1024, celui de la mise en
   page — un seul changement de régime, pas deux qui se contrarient. */
/* mos--d garde DEUX colonnes jusqu'à 820 px. À quatre colonnes elle
   partage la largeur en 1,35 + 1 + 1 + 1 : à 720 px de fenêtre le film le
   plus étroit tombait à 184 px, sous le plancher de 200 fixé le 10 août.
   Son seuil propre est donc plus haut que celui des autres grilles. */
@media (max-width: 819px) {
  .mos--d { grid-template-columns: 1fr 1fr; }
  .mos--d > :nth-child(1) { grid-column: 1 / 3; }
}

@media (max-width: 699px) {
  /* Plancher de gouttière : sous 1024 px le bloc de texte occupe toute
     la largeur, et ses glyphes touchaient le bord à 390 px — mesuré à
     0 px de marge. Le reste du site tient 24 px. */
  .xp__texte { padding-inline: var(--gouttiere, 1.5rem); }

  /* ── MOBILE : le film pleine largeur, les photos DEUX PAR RANGÉE ──
     10 août 2026. Les cinq mosaïques empilaient tout en une colonne :
     11 700 px de page et 19 balayages de pouce pour atteindre le pied.
     Le film garde la pleine largeur — c'est lui qui porte l'expérience ;
     les photos, qui l'illustrent, se rangent côte à côte.

     L'ordre du balisage n'est pas touché : l'alternance du film (premier
     sur a, c-inverse et d ; dernier sur b ; médian sur c) est une
     décision de composition, elle survit à la mise en colonnes. */
  .mos { grid-template-columns: 1fr 1fr; }

  /* Le film occupe les deux colonnes, à sa place dans chaque composition. */
  .mos--a > :nth-child(1),
  .mos--b > :nth-child(3),
  .mos--c > :nth-child(2),
  .mos--c-inverse > :nth-child(1),
  .mos--d > :nth-child(1) { grid-column: 1 / 3; }

  /* mos--d porte TROIS photos et non deux. Trois colonnes les
     ramèneraient à 119 px de large, sous le plancher de 150 fixé le
     10 août : la troisième passe donc en pleine largeur, en clôture. */
  .mos--d > :nth-child(4) { grid-column: 1 / 3; }

  /* Photos en deux colonnes : ratio 4/5. Il est plus proche des sources
     portrait (3/4) que le carré, donc il recadre moins ; et sur les
     sujets de face — Janzu, massage, coaching — il garde les visages,
     ce que le 1/1 entamait par le haut. */
  .mos > .media:not(:has(video)) {
    aspect-ratio: 4 / 5;
    max-height: none;
  }
  /* Le FILM occupe toute la largeur. Son `aspect-ratio: 9/16` combiné au
     plafond de 60vh le ramenait à 304 px de large sur 373 disponibles :
     le ratio reprenait en largeur ce que le plafond coupait en hauteur.
     Hauteur explicite et ratio libéré — `object-fit: cover` recadre. */
  .mos > .media:has(video) {
    aspect-ratio: auto;
    height: 58vh;
    max-height: none;
  }

  /* mos--c porte son film AU MILIEU du balisage : en grille, ses deux
     photos se retrouvaient sur deux rangées séparées par lui. Le film
     passe en dernier — l'alternance est conservée, c'est le pendant de
     mos--b. L'ordre du DOM n'est pas touché : `order` ne déplace que le
     rendu, la lecture au clavier et à la synthèse vocale suit le
     balisage. */
  .mos--c > :nth-child(2) { order: 3; }

  /* La photo de clôture de mos--d retrouve un ratio paysage : à 373 px de
     large, un 4/5 ferait 466 px de haut pour une seule image. Le
     sélecteur doit peser autant que `.mos > .media:not(:has(video))`,
     sinon il est écrasé — d'où `.mos--d > .media:nth-child(4)`. */
  .mos--d > .media:nth-child(4) { aspect-ratio: 4 / 3; }
}

/* ── Le repli des soins ──────────────────────────────────────────────
   Même dispositif que les équipements des lodges — `<details>` natif, pas
   de JavaScript. Le texte reste DANS le HTML servi même replié : c'est ce
   qui préserve le référencement des termes de métier, là où un panneau
   injecté en JS les aurait rendus invisibles aux moteurs.
   Les règles ci-dessous sont la copie exacte de `.lodge-specs`. Si l'une
   change là-haut, la changer ici aussi. */
.soins-repli {
  margin-top: clamp(1.8rem, 4vh, 2.6rem);
  border-top: 1px solid color-mix(in srgb, var(--laiton) 44%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.soins-repli summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-interface);
  font-size: var(--t-petit);
  letter-spacing: .11em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--foret);
}
.soins-repli summary::-webkit-details-marker { display: none; }
.soins-repli summary:focus-visible {
  outline: 2px solid var(--argile);
  outline-offset: 4px;
}
.soins-repli__toggle {
  position: relative;
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
}
.soins-repli__toggle::before,
.soins-repli__toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--laiton);
  transition: transform .25s ease;
}
.soins-repli__toggle::after { transform: rotate(90deg); }
.soins-repli[open] .soins-repli__toggle::after { transform: rotate(0); }
.soins-repli__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1.8rem, 4vw, 3.5rem);
  padding: clamp(1.4rem, 3vh, 2.2rem) 0 clamp(2rem, 4vh, 3rem);
}
.psec .soins-repli__grid h3 {
  max-width: none;
  margin: 0 0 1rem;
  font-family: var(--font-interface);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--laiton);
}
.soins-repli__grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.soins-repli__grid li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: .68rem;
  font-size: clamp(.94rem, .9rem + .12vw, 1.04rem);
  line-height: 1.52;
  color: color-mix(in srgb, var(--ink) 76%, var(--calcaire));
}
.soins-repli__grid li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .75em;
  width: 4px;
  height: 1px;
  background: var(--laiton);
}

/* ============================================================
   EXPÉRIENCES — « Une journée chez Souki » (arrivée de l'accueil le 18 août 2026 é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;
}
/* Le bloc qui doublait ce motif pour .jour__head, .lodges__head,
   .scene__intro et .avis-home__head a été fondu dans la règle unique
   ci-dessus le 19 août 2026. */
.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: var(--pas) 0 var(--pas-3);
}
.jour__sub {
  /* La mesure vit dans typo.css — var(--colonne). Le plafond local de 52ch
     rendait 593 px à ce corps : retiré le 10 août 2026. */
  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(1rem, 2vw, 2.2rem);
  max-width: var(--contenu);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 3rem);
}

/* D2 — LE TEXTE PASSE SOUS LE MÉDIA, 17 août 2026.
   Avant : le texte était posé SUR la vidéo, ce qui imposait un voile pour le
   lire, et le voile abîmait l'image. Les descriptions restaient illisibles.
   Ici le média garde son entièreté, le texte a le fond de section pour lui,
   et la question du contraste ne se pose plus. `.volet__veil` a disparu. */
.volet {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Le média : ratio FIXE, et non plus `min-height: 62vh`. L'ancienne hauteur
   dépendait de la fenêtre — le volet passait de 0,63 à 0,70 de ratio selon
   l'écran. Un ratio fixe rend la grille prévisible et permet de budgéter la
   place du texte.
   CARRÉ et non 4/5, arbitrage du 17 août : c'est la seule proportion qui tient
   la contrainte de hauteur à 1440 px tout en gagnant du terrain à 390. */
.volet__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: color-mix(in srgb, var(--calcaire) 12%, transparent);
}
.volet__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.2s var(--ease);
}
.volet.is-live .volet__video { transform: scale(1.018); }

/* Le texte : 26 px d'écart sous le média, un filet de laiton d'un pixel, 18 px,
   puis le texte — SUR LE FOND DE SECTION. Le panneau calcaire qu'avait porté un
   premier essai est écarté : quatre rectangles clairs sur --nuit faisaient un
   damier. Seule la position du texte change, jamais la couleur de la section.
   Sans fond distinct à délimiter, plus besoin de marge intérieure : le texte
   s'aligne au bord du média, ce qui est plus juste. Le filet tient lieu de
   séparation — aucune ombre portée, conformément à la règle de la maison. */
.volet__texte {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--laiton);
  text-align: left;
}

/* L'heure en --argile et non en --laiton : sur --nuit le laiton pur ne donne
   que 3,42:1, sous le plancher de 4,5 — et à 10 px interlettrés il n'y a pas
   de dérogation possible. L'argile donne 5,33:1 pour le même registre cuivré. */
.volet__moment {
  display: block;
  font-family: var(--font-interface);
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--argile);
}
/* `.volet__label` a été retiré le 17 août 2026, du balisage comme d'ici :
   deux lignes capitales interlettrées d'affilée faisaient redite sous le média,
   et la ligne coûtait 31 px par volet. Les huit libellés sont consignés dans le
   journal, section 33 — ce n'était pas un doublon du titre. */
.volet__title {
  margin: .55rem 0 0;
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.18;
  color: var(--calcaire);
}
/* `rgba(238, 234, 225, .78)` de la consigne, exprimé en jetons : 238 234 225
   est --calcaire, et l'alpha se résout sur le fond de section. Même rendu,
   aucune couleur en dur — 6,77:1, largement au-dessus du plancher. Le corps et
   l'interligne ne sont plus repris par typo.css : `.volet__text` a quitté sa
   liste de labeur le même jour. */
.volet__text {
  margin: .6rem 0 0;
  max-width: none;
  font-family: var(--font-labeur);
  font-size: 14.5px;
  line-height: 1.64;
  /* 72 % et non les 68 % de la consigne : 68 % donne 4,14:1 sur le calcaire,
     sous le plancher de 4,5 que typo.css tient depuis le 8 août. 72 % donne
     4,59:1 — c'est le premier cran qui passe, et l'écart ne se voit pas. */
  color: color-mix(in srgb, var(--calcaire) 78%, transparent);
}

/* 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) {
  /* MASQUÉE sous 820 px, 18 août 2026 — arbitrage de Fabien. Le contenu reste
     dans le HTML (les quatre volets, leurs textes, leurs films) : on ne fait
     que ne pas l'afficher. Les films ne se chargent pas — leur `data-src` ne
     devient `src` qu'au survol (wireJournee) ou à l'approche de l'écran
     (IntersectionObserver), et un élément en display:none n'intersecte jamais.
     Le carrousel scroll-snap posé la veille est RETIRÉ plutôt que laissé : une
     règle qui met en page une section invisible est une règle morte, et une
     règle morte finit par piéger celui qui la relit. La grille de quatre
     colonnes du desktop n'est pas touchée. */
  /* Sous 820 px, sur experiences : UNE colonne, proposée — l'accueil la
     masquait, mais ici la page est faite pour lire ; à trancher (section 47). */
  .jour__panels { grid-template-columns: minmax(0, 1fr); gap: clamp(1.4rem, 5vw, 2rem); }
  .volet__media { aspect-ratio: 16 / 10; }
  /* Sans survol, le poster reste le média unique ; la vidéo n'est pas chargée. */
  .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; }
}

/* Le lien mobile des scènes n'existe pas sur desktop. */
@media (min-width: 821px) { .scene__lien { display: 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; }
  /* Plus d'assombrissement du média : il n'y a plus de texte par-dessus. */
  .volet__video { transform: none; transition: none; }
  .volet__text { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Instrument Serif sur les titres de la journée : la liste éditoriale de tête
   de home.css le faisait pour l'accueil ; ici c'est pages.css qui doit le dire.
   Même poids (0,2,2) que typo.css, qui n'a rien à en redire. */
html body[data-page] :is(.jour__title, .jour__sub, .volet__title) {
  font-family: var(--font-editorial);
  font-weight: 400;
}