/* ============================================================
   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. */
  background: linear-gradient(to right,
    color-mix(in srgb, var(--nuit) 70%, 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: 1rem 0 1.2rem;
  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;
}

@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. */
@media (min-width: 1180px) {
  /* L'élargissement du conteneur ET la mise en colonnes sont solidaires :
     sous le seuil, le bloc redevient un .psec__narrow ordinaire, sans quoi la
     colonne unique héritait des 86 rem et montait à 122 signes par ligne.
     Seuil porté de 1024 à 1180 px : à 1024 pile, deux colonnes ne faisaient
     que 450 px, soit 55 à 62 signes — sous la fourchette — et la prose du
     site montait à 781 lignes contre 701 à 1440. C'était la largeur la moins
     surveillée et la plus mal composée. */
  .psec__narrow--duo {
    max-width: 86rem;
    columns: 2;
    column-gap: clamp(3rem, 6vw, 6rem);
    column-fill: balance;
  }
  /* Titre et surtitre traversent les deux colonnes. */
  .psec__narrow--duo > .eyebrow,
  .psec__narrow--duo > h2 { column-span: all; }
  /* Ni veuve ni orpheline en tête de colonne : un paragraphe ne se coupe
     jamais au changement de colonne. */
  .psec__narrow--duo .pprose,
  .psec__narrow--duo .pmeta,
  .psec__narrow--duo .plist {
    break-inside: avoid;
    orphans: 3;
    widows: 3;
  }
  .psec__narrow--duo > .pprose:first-of-type { margin-top: 0; }
}
/* La mesure de chaque colonne reste celle de la page : les plafonds par
   `data-page` continuent de s'appliquer, la ligne ne s'allonge donc pas. */

/* 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. */
.psec__narrow > .eyebrow {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: clamp(.8rem, 1.4vw, 1.25rem);
  margin-inline: auto;
}
.psec__narrow > .eyebrow::before,
.psec__narrow > .eyebrow::after {
  content: "";
  width: clamp(1.8rem, 3vw, 3rem);
  min-width: .8rem;
  max-width: 3rem;
  height: 1px;
  flex: 1 1 clamp(1.8rem, 3vw, 3rem);
  background: currentColor;
  opacity: .42;
}

.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: 1.2rem 0 1.6rem;
}
.psec h3 {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.15;
  color: var(--foret);
  margin: .6rem 0 .8rem;
}
.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: 1rem 0 1.2rem;
}
.pband .eyebrow { color: var(--argile); }
.pband__body {
  /* Chapô de bande d'appel : un cran au-dessus du texte courant. */
  font-size: var(--t-chapo);
  max-width: 51ch;
  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) ---------- */
/* Dix items en une colonne étiraient la section pour rien. Deux colonnes
   au-delà de 900 px, chacune assez large pour qu'aucun item ne se coupe. */
.plist {
  max-width: 74rem;
  margin: 0 auto 1.4rem;
  columns: 2;
  column-gap: clamp(2rem, 4vw, 3.5rem);
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: var(--t-corps);
  line-height: var(--interligne);
  color: color-mix(in srgb, var(--ink) 74%, var(--calcaire));
}
.plist li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: var(--pas-2);
  break-inside: avoid;
}
@media (max-width: 900px) {
  .plist { columns: 1; max-width: var(--mesure); }
}
/* Puce laiton discrète, jamais un point noir */
.plist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 6px;
  height: 1px;
  background: var(--laiton);
}

/* 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;
}
.contact-lines--center { align-items: center; }
.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: .9rem 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: .9rem;
  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. */
.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 {
  max-width: var(--mesure);
  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: .8rem 0 clamp(1.15rem, 2vw, 1.75rem);
}
.xp-intro__lead {
  max-width: 88ch;
  margin-inline: auto;
  font-family: var(--font-interface);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: var(--interligne);
  color: var(--ink);
  text-align: center;
}
.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: 12px;
}
/* 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: clamp(1.1rem, 1.6vw, 1.6rem);
}
/* `.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: center;
  hyphens: none;
}
.xp__ligne + .xp__ligne { margin-top: .9rem; }
.xp__texte .pmeta {
  text-align: center;
  margin-top: clamp(1.1rem, 1.6vw, 1.6rem);
}

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

.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;
  /* Étalonnage commun, réversible : verts légèrement calmés, contraste doux
     et une pointe de chaleur pour rapprocher photos et films sans toucher aux
     fichiers sources. */
  filter: saturate(.88) contrast(1.045) brightness(.98) sepia(.025);
}
.media__inner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(145deg,
    rgba(124, 145, 119, .035),
    rgba(168, 130, 92, .045));
  mix-blend-mode: soft-light;
}
/* Ajustements d'exposition par série : le langage reste commun, mais une
   scène sous l'eau ne reçoit pas la même lumière qu'une terrasse au soleil. */
.mos--a .media__inner video,
.mos--a .media__inner img { filter: saturate(.84) contrast(1.055) brightness(1.02) sepia(.02); }
.mos--b .media__inner video,
.mos--b .media__inner img { filter: saturate(.86) contrast(1.045) brightness(1.01) sepia(.03); }
.mos--c .media__inner video,
.mos--c .media__inner img { filter: saturate(.86) contrast(1.04) brightness(.97) sepia(.025); }
.mos--c-inverse .media__inner video,
.mos--c-inverse .media__inner img { filter: saturate(.82) contrast(1.05) brightness(.96) sepia(.035); }
.mos--d .media__inner video,
.mos--d .media__inner img { filter: saturate(.84) contrast(1.04) brightness(.98) sepia(.04); }
.media--9-16 { aspect-ratio: 9 / 16; }
.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); }
.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. */
@media (min-width: 1024px) {
  .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. */
@media (max-width: 1023px) {
  /* 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); }
  .mos--c, .mos--c-inverse, .mos--d { grid-template-columns: 1fr 1fr; }
  .mos--c > :nth-child(2),
  .mos--c-inverse > :nth-child(1),
  .mos--d > :nth-child(1) { grid-column: 1 / 3; }
}