/* ============================================================
   SOUKI EN HIVER — VARIANTE B. 18 octobre 2026.

   Un seul principe : la STRUCTURE est celle de la page Expériences
   en production, la PALETTE est celle de la version A.

   Rien n'est réécrit des composants du site. `.phero`, `.psec`,
   `.xp`, `.xp__texte`, `.xp__oeil`, `.xp__titre`, `.xp__ligne`,
   `.mos--a`, `.mos--b`, `.mos--c`, `.media` et leurs grilles
   viennent de pages.css et gardent leurs largeurs, leurs
   proportions et leurs espacements. Ce fichier ne fait que deux
   choses :

     1. repeindre ces composants dans la nuit de la version A ;
     2. ajouter ce que la page Expériences n'a pas : un duo de
        médias, un crédit sous la mosaïque, un voile d'ouverture
        court.

   Ce qui distingue cette page d'Expériences, c'est précisément
   qu'aucune section n'est crème : le fond reste --hv-encre d'un
   bout à l'autre.
   ============================================================ */

body[data-page="hiver"][data-variante="b"] {
  background: var(--hv-encre);
  color: var(--hv-ivoire);
}
.hvb { background: var(--hv-encre); overflow-x: clip; }

/* ---------- 1 · L'ouverture ----------
   Le composant `.phero` du site, avec le voile COURT demandé :
   pas de fondu étalé sous la vidéo, juste de quoi détacher le
   titre du bas de l'image. */
.hvb-hero { background: var(--hv-encre); }
.hvb-hero .phero__veil {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--hv-encre) 86%, transparent) 0%,
    color-mix(in srgb, var(--hv-encre) 32%, transparent) 20%,
    transparent 44%);
}
.hvb-hero .phero__poster img,
.hvb-hero .phero__media { object-fit: cover; }
.hvb-hero h1 {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: var(--t-h1);
  line-height: 1.06;
  letter-spacing: normal;
  color: var(--hv-ivoire);
}
.hvb-hero .phero__lede {
  font-family: var(--font-labeur);
  font-weight: 300;
  font-size: var(--t-lede);
  line-height: 1.4;
  color: color-mix(in srgb, var(--hv-ivoire) 90%, transparent);
  max-width: none;
}
.hvb-hero .hv-lien { margin-top: 1.4rem; }

/* ---------- 2 · L'introduction ---------- */
.hvb-intro { background: var(--hv-encre); }
.hvb-intro .eyebrow { color: var(--hv-ambre); }
.hvb-intro h2 {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.06;
  color: var(--hv-ivoire);
}
.hvb-intro .xp-intro__lead {
  font-family: var(--font-labeur);
  font-weight: 300;
  font-size: var(--t-corps);
  line-height: var(--interligne-labeur);
  color: var(--hv-ivoire-texte);
}

/* ---------- 3 · Les moments ----------
   Les composants d'Expériences, repeints. Les largeurs et les
   espacements ne sont pas touchés. */
.hvb-list { background: var(--hv-encre); }
.hvb-list .xp__oeil { color: var(--hv-ambre); }
.hvb-list .xp__oeil::after { background: var(--hv-ambre); }
.hvb-list .xp__titre {
  font-family: var(--font-editorial);
  font-weight: 300;
  color: var(--hv-ivoire);
}
.hvb-list .xp__ligne {
  font-family: var(--font-labeur);
  font-weight: 300;
  color: var(--hv-ivoire-texte);
}
.hvb-list .xp__ligne a {
  color: var(--hv-ivoire);
  text-decoration: underline;
  text-decoration-color: var(--hv-ambre);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
/* Le filet entre deux moments : celui du site, retourné pour la nuit. */
.hvb-list .xp + .xp { border-top-color: color-mix(in srgb, var(--hv-ivoire) 12%, transparent); }
/* Le fond des tuiles, le temps que l'image arrive. */
.hvb .media { background: var(--hv-anthracite); }
/* Les films de trio restent VERTICAUX : la tuile est en 9/16 et le
   fichier aussi, donc `cover` ne recadre rien. */
.hvb .media--9-16 video { object-fit: cover; }

/* ---------- 4 · Ce que la page Expériences n'a pas ----------
   a · un duo de médias, pour le seul moment où il n'existe ni
       troisième photographie de la même série ni film d'hiver. */
.mos--duo { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .mos--duo {
    grid-template-columns: 1.25fr 1fr;
    height: clamp(30rem, 46vw, 38rem);
  }
  .mos--duo > .media { min-height: 0; aspect-ratio: auto; }
}
.media--3-2 { aspect-ratio: 3 / 2; }


/* ---------- 5 · La fin de page, reprise de la version A ----------
   Les sections `.hv-appel` et `.hv-infos` arrivent telles quelles
   avec leurs règles ; il n'y a qu'à rétablir l'espace qui les
   sépare de la dernière mosaïque. */
.hvb-list + .hv-appel { margin-top: var(--pas-4); }

/* ---------- 6 · Téléphone ----------
   Sous 700 px les mosaïques du site repassent en une colonne : les
   tuiles verticales deviennent larges et très hautes. Le plafond du
   site (60vh) s'applique déjà ; on resserre un peu la gouttière. */
@media (max-width: 699px) {
  .hvb .mos { gap: .55rem; padding-inline: 0; }
}

/* ============================================================
   VERSION DÉFINITIVE — 18 octobre 2026.
   Fabien a retenu cette structure. Ce qui suit n'existait pas
   dans la maquette : la grande phrase remontée juste après
   l'ouverture, les deux rappels de tarif, et le réglage qui fait
   commencer la section piscine dans le premier écran.
   ============================================================ */

/* ---------- La grande phrase, entre l'ouverture et la piscine ----------
   Pas de bandeau : la hauteur de son texte, et rien de plus. C'est
   ce qui laisse la place à la section piscine dans le premier écran. */
.hvb-phrase {
  background: var(--hv-encre);
  padding: clamp(2rem, 4.5vh, 3.2rem) var(--hv-marge);
}
.hvb-phrase__texte {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: var(--t-h3);
  line-height: 1.18;
  color: var(--hv-ivoire);
  max-width: var(--mesure-titre-l);
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
}

/* ---------- La section piscine doit ouvrir le premier écran ----------
   MESURÉ : sans réglage, l'ouverture faisait 666 px à 1440 et le titre
   de la piscine tombait à 1 040 px, hors du premier écran. L'ouverture
   est donc bridée en hauteur sur cette page, et la piscine est la
   première des deux sections `.xp-list` : son padding haut est réduit. */
.hvb-hero { min-height: 0; height: clamp(24rem, 48svh, 32rem); }
.hvb-list:first-of-type { padding-top: clamp(1.4rem, 2.5vh, 2.2rem); }
#piscine .xp__texte { margin-bottom: clamp(28px, 3.5vw, 48px); }

/* ---------- Les deux rappels de tarif et le bouton de la piscine ---------- */
.hvb-appel { margin: var(--pas-4) 0 0; }
.hvb-tarif {
  display: block;
  font-family: var(--font-interface);
  font-weight: 300;
  font-size: var(--t-micro);
  letter-spacing: .06em;
  color: var(--hv-ivoire-pale);
  margin-top: .9rem;
}
.hvb-sous-titre {
  font-family: var(--font-labeur);
  font-weight: 300;
  font-size: var(--t-corps);
  color: var(--hv-ivoire-texte);
  margin: .6rem 0 1.6rem;
}
.hvb-tarif--appel { margin-top: 1rem; text-align: left; }

/* ---------- La FAQ et le bloc « Venir » reprennent les règles de hiver.css ----------
   Un seul ajustement : sur cette page la FAQ est longue, elle respire. */
body[data-page="hiver"] .hv-infos__questions .hv-q:first-of-type { margin-top: 0; }

/* Sur téléphone, l'ouverture garde un peu plus de hauteur : le titre et le
   sous-titre ont besoin d'air avant que la piscine ne prenne la parole.
   MESURÉ à 390 x 844 : la section piscine commence alors à 727 px, donc
   toujours dans le premier écran, et bien avant le second. */
@media (max-width: 699px) {
  .hvb-hero { height: clamp(22rem, 62svh, 30rem); }
}

/* ============================================================
   CORRECTIONS AVANT PUBLICATION — 18 octobre 2026.
   ============================================================ */

/* ---------- 1 · Contraste du texte courant ----------
   MESURÉ sur la page : les paragraphes des sections sortaient à
   2,97:1 sur le fond de nuit. La cause est dans typo.css, une règle
   `html body[data-page] :is(…, .xp__ligne, .xp-intro__lead, …)`
   qui pose l'encre claire du site, 84 % de --ink sur du calcaire.
   Sa spécificité est (0,2,2) : une règle en `.hvb-list .xp__ligne`
   (0,2,0) ne pouvait pas la battre, et c'est pour cela que le
   calque de nuit ne prenait pas.

   On reprend donc la même forme, avec un cran de plus, et on pose
   l'encre de la FAQ : ivoire à 80 % sur --hv-encre.
   CALCULÉ : rgb(192,188,178) sur rgb(12,15,13) = 10,15:1. */
html body[data-page="hiver"] .hvb-list :is(.xp__ligne),
html body[data-page="hiver"] .hvb-intro :is(.xp-intro__lead) {
  color: var(--hv-ivoire-texte);
}
/* Tarifs et crédits : 60 % d'ivoire donnaient 6,08:1, sous le
   plancher. À 70 % : 7,94:1. */
body[data-page="hiver"] .hvb-tarif {
  color: color-mix(in srgb, var(--hv-ivoire) 70%, transparent);
}

/* ---------- 2 · La gouttière de l'introduction sur téléphone ----------
   MESURÉ à 390 : le bloc d'introduction touchait les deux bords,
   quand les autres sections gardent 24 px. `.xp__texte` porte sa
   gouttière, `.xp-intro__inner` n'en a pas. */
body[data-page="hiver"] .hvb-intro .xp-intro__inner {
  padding-inline: var(--gouttiere);
}

/* ---------- 3 · Le tarif sous le bouton de l'appel final ----------
   MESURÉ à 390 : la bande de l'appel était bridée à un carré et
   `overflow: hidden` coupait la mention de tarif, qui dépassait.
   Sur téléphone la bande garde son carré comme PLANCHER et grandit
   si le contenu le demande. */
@media (max-width: 899px) {
  body[data-page="hiver"] .hv-appel {
    aspect-ratio: auto;
    min-height: 100vw;
    height: auto;
  }
  body[data-page="hiver"] .hv-appel__texte { padding-block: var(--hv9-sec); }
}

/* ---------- 4 · La paire de 22 h ----------
   Le film du livre feuilleté faisait doublon avec la photographie du
   livre devant le feu. Il est retiré ; restent deux images, de même
   taille, dans deux colonnes égales. */
.mos--paire { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .mos--paire { grid-template-columns: 1fr 1fr; }
}

/* ---------- Publication du 18 octobre : plus aucun crédit sur la page ----------
   Décision de Fabien. Les dix mentions « Photo : … » et « Vidéo : Louis » sont
   retirées du HTML ; leurs règles le sont d'ici. Les auteurs sont nommés dans
   les mentions légales. Ce qui reste à faire ici : refermer l'espace que ces
   lignes réservaient sous les mosaïques et sous les bandeaux. */
body[data-page="hiver"] .mos { margin-bottom: 0; }
body[data-page="hiver"] .xp .mos:last-child { margin-bottom: 0; }

/* ---------- Les films : apparition en fondu ----------
   La règle vivait sur `.hv-film`, classe de l'ancienne page. Les six
   vidéos d'ici portent `.hvb-film` : sans ce report, elles s'affichaient
   d'un coup, et surtout en boîte noire tant qu'elles n'avaient pas de
   données. Relevé le 18 octobre, en même temps que le script qui ne les
   chargeait plus. */
body[data-page="hiver"] .hvb-film { opacity: 0; transition: opacity 1.2s var(--ease); }
body[data-page="hiver"] .hvb-film.is-on { opacity: 1; }
/* Dans le bandeau d'ouverture, le film se superpose à l'affiche. */
body[data-page="hiver"] .phero .hvb-film { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ============================================================
   ESPACEMENTS ENTRE SECTIONS — 18 octobre 2026, après mise en ligne.

   MESURÉ à 1440 : entre deux chapitres horaires, l'écart est de 36 px
   de boîte à boîte et de 101 px de contenu à contenu. Il vient de
   `.xp + .xp` : 36 px de marge, puis 64 px de padding haut.

   Les frontières de SECTION ne suivaient pas cette règle. La pire,
   celle que Fabien a vue, entre la mosaïque de la piscine et le titre
   de l'introduction : 72 px de boîte à boîte, exactement le double, et
   163 px de contenu. Deux sections voisines additionnaient leurs
   paddings propres, là où deux chapitres n'ont qu'une marge.

   Correction : toute frontière de section reprend les deux valeurs de
   `.xp + .xp`. Une seule règle, pas un réglage par endroit.
   ============================================================ */
body[data-page="hiver"] .hvb-phrase,
body[data-page="hiver"] .hvb-intro,
body[data-page="hiver"] .hvb-list,
body[data-page="hiver"] .hv-appel,
body[data-page="hiver"] .hv-infos {
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);   /* la marge de .xp + .xp */
  padding-top: clamp(2.5rem, 4.5vw, 4rem);     /* son padding haut      */
  padding-bottom: 0;
}
/* L'ouverture ouvre la page : elle n'a pas de frontière au-dessus.
   Le bandeau de l'appel final et celui de la piscine de nuit portent
   leur texte au centre : un padding haut les décentrerait. */
body[data-page="hiver"] .hvb-hero { margin-top: 0; padding-top: 0; }
body[data-page="hiver"] .hv-appel { padding-top: 0; }
/* Le dernier bloc garde son souffle avant le pied de page. */
body[data-page="hiver"] .hv-infos { padding-bottom: var(--hv9-sec-l); }