/* ============================================================
   Souki en hiver — nouvelle direction, 14 octobre 2026.
   Une soirée d'hiver racontée comme une séquence de film, de 16 h
   au matin. La page a sa propre palette de nuit ; elle garde le
   logo, le menu et les familles du site (Cormorant italique pour
   les grandes phrases, Mulish pour le texte courant, Jost pour les
   boutons et les crédits).
   Partis pris tenus : aucune petite capitale espacée au-dessus des
   sections, aucune liste, aucun filet, aucune carte, aucun coin
   arrondi, aucune icône. Le contraste entre une phrase immense et
   quelques lignes fines fait le reste.
   ============================================================ */

body[data-page="hiver"] {
  --hv-encre: #0c0f0d;
  --hv-anthracite: #141815;
  --hv-vert: #111a15;
  --hv-ivoire: #ede7db;
  --hv-ivoire-texte: color-mix(in srgb, var(--hv-ivoire) 80%, transparent);
  --hv-ivoire-pale: color-mix(in srgb, var(--hv-ivoire) 60%, transparent);
  --hv-ambre: #c9a06a;
  --hv-marge: clamp(1.25rem, 6vw, 7rem);
  background: var(--hv-encre);
  color: var(--hv-ivoire);
}

.hv { background: var(--hv-encre); color: var(--hv-ivoire); overflow-x: clip; }
.hv img { display: block; width: 100%; height: auto; border-radius: 0; }

/* ---------- Typographie ---------- */
.hv-grand,
.hv-chap {
  font-family: 'Cormorant', var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--hv-ivoire);
  letter-spacing: -0.01em;
  margin: 0;
}
/* Les repères horaires : un grand chiffre, comme un titre de chapitre. */
.hv-chap { font-size: clamp(4.5rem, 13vw, 12rem); line-height: .9; }
.hv-chap--mots { font-size: clamp(2.8rem, 7vw, 6.4rem); line-height: 1; }
.hv-grand { font-size: clamp(2.2rem, 5.2vw, 5rem); line-height: 1.1; text-wrap: balance; }
.hv-texte {
  font-family: var(--font-labeur);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: var(--hv-ivoire-texte);
  max-width: 34ch;
  margin: 0;
  hyphens: manual;
  text-wrap: pretty;
}
.hv-texte a { color: var(--hv-ivoire); text-decoration: underline; text-decoration-color: var(--hv-ambre); text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* Le « ° » de Cormorant italique se lit comme un « º » ordinal : dans les
   grandes italiques, on le compose en Mulish, droit, à sa hauteur naturelle. */
.hv-deg { font-family: var(--font-labeur); font-style: normal; font-weight: 300; }
.hv-grand .hv-deg, .hv-chap .hv-deg { font-size: .62em; vertical-align: .32em; margin-left: .04em; }

/* ---------- Boutons : discrets, un trait fin ---------- */
.hv-bouton {
  display: inline-block;
  font-family: var(--font-interface);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--hv-ivoire);
  text-decoration: none;
  padding: 1rem 1.9rem;
  border: 1px solid color-mix(in srgb, var(--hv-ivoire) 55%, transparent);
  transition: background .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
.hv-bouton:hover,
.hv-bouton:focus-visible { background: var(--hv-ivoire); color: var(--hv-encre); border-color: var(--hv-ivoire); }
.hv-bouton:focus-visible { outline: 1px solid var(--hv-ambre); outline-offset: 6px; }

/* ---------- Ouverture : plein écran sombre ---------- */
.hv-ouverture {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--hv-encre);
}
.hv-ouverture__media,
.hv-ouverture__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hv-ouverture__media img { object-position: center 62%; }
.hv-ouverture__voile {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--hv-encre) 0%, color-mix(in srgb, var(--hv-encre) 72%, transparent) 30%, color-mix(in srgb, var(--hv-encre) 25%, transparent) 62%, color-mix(in srgb, var(--hv-encre) 35%, transparent) 100%);
}
.hv-ouverture__texte {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--hv-marge) clamp(4rem, 12vh, 8rem);
}
.hv-ouverture h1 {
  font-family: 'Cormorant', var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4rem, 12vw, 11.5rem);
  line-height: .9;
  letter-spacing: -0.015em;
  color: var(--hv-ivoire);
  margin: 0 0 1.6rem;
}
.hv-ouverture .hv-texte { font-size: 16px; color: color-mix(in srgb, var(--hv-ivoire) 88%, transparent); max-width: 30ch; margin-bottom: 2.2rem; }

/* ============================================================
   Mises en page : trois compositions distinctes, pas une seule
   colonne qui s'élargit.
   - Mobile (jusqu'à 767 px) : une idée par écran, images bord à
     bord, paires d'images en carrousel à faire glisser, textes
     courts sous l'image.
   - Tablette (768 à 1023 px) : version intermédiaire, paires côte
     à côte, textes à 560 px.
   - Ordinateur (dès 1024 px) : compositions sur toute la largeur,
     texte courant entre 640 et 720 px, posé contre ce qu'il
     accompagne.
   ============================================================ */

/* ---------- Socle commun ---------- */
.hv-immense { margin: 0; }
.hv-immense img { max-height: 96svh; object-fit: cover; }
.hv-phrase { min-height: 100svh; display: flex; align-items: center; padding: 0 var(--hv-marge); }
.hv-phrase .hv-grand { max-width: 17ch; }
.hv-nuit { padding: 0 var(--hv-marge) clamp(5rem, 12vh, 9rem); background: linear-gradient(to bottom, var(--hv-encre), var(--hv-vert) 70%, var(--hv-vert)); }
.hv-nuit figure, .hv-20 figure, .hv-braise figure, .hv-9 figure { margin: 0; }
.hv-plein { position: relative; height: 100svh; min-height: 34rem; overflow: hidden; background: var(--hv-vert); }
.hv-plein picture, .hv-plein img, .hv-plein video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv-plein video { opacity: 0; transition: opacity 1.2s var(--ease); }
.hv-plein video.is-on { opacity: 1; }
.hv-20 { padding: clamp(6rem, 14vh, 11rem) var(--hv-marge); background: var(--hv-vert); }
.hv-feu { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--hv-encre); }
.hv-feu picture, .hv-feu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv-feu__voile { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--hv-encre) 0%, color-mix(in srgb, var(--hv-encre) 70%, transparent) 34%, transparent 70%); }
.hv-feu__texte { position: relative; z-index: 2; width: 100%; padding: 0 var(--hv-marge) clamp(4rem, 10vh, 7rem); }
.hv-braise { padding: clamp(4rem, 10vh, 7rem) var(--hv-marge) clamp(5rem, 12vh, 8rem); background: var(--hv-encre); }
.hv-9 { padding: clamp(6rem, 14vh, 11rem) var(--hv-marge) clamp(6rem, 14vh, 10rem); background: var(--hv-anthracite); }
.hv-appel { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--hv-encre); }
.hv-appel picture, .hv-appel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv-appel__voile { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, color-mix(in srgb, var(--hv-encre) 82%, transparent) 0%, color-mix(in srgb, var(--hv-encre) 45%, transparent) 55%, color-mix(in srgb, var(--hv-encre) 20%, transparent) 100%); }
.hv-appel__texte { position: relative; z-index: 2; padding: 0 var(--hv-marge); }
.hv-appel .hv-grand { max-width: 12ch; margin: 0 0 2.6rem; }
.hv-infos { padding: clamp(6rem, 14vh, 10rem) var(--hv-marge) clamp(6rem, 12vh, 9rem); background: var(--hv-encre); }
.hv-infos h2 { font-family: 'Cormorant', var(--font-editorial); font-style: italic; font-weight: 400; font-size: 1.75rem; line-height: 1.2; color: var(--hv-ivoire); margin: 0 0 1.4rem; }
.hv-infos h2 a { color: inherit; text-decoration: none; }
.hv-infos .hv-texte { font-size: 14px; max-width: 46ch; }
.hv-q { font-family: 'Cormorant', var(--font-editorial); font-style: italic; font-size: 1.25rem; line-height: 1.3; color: var(--hv-ivoire); margin: 1.8rem 0 .35rem; }
.hv-q:first-of-type { margin-top: 0; }

/* ---------- Apparitions lentes au défilement ----------
   Posées par le script de la page seulement : sans JavaScript, ou en
   mouvement réduit, tout est visible d'emblée. */
.hv-anim .hv-r { opacity: 0; transform: translateY(28px); transition: opacity 1.6s var(--ease), transform 1.6s var(--ease); }
.hv-anim .hv-r.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hv-anim .hv-r { opacity: 1; transform: none; transition: none; }
  .hvb-film { display: none; }
}

/* ============================================================
   MOBILE (jusqu'à 767 px)
   ============================================================ */
@media (max-width: 767px) {
  /* Les chiffres des heures restent immenses, seuls dans leur écran. */
  .hv-chap:not(.hv-chap--mots) { font-size: clamp(6.5rem, 34vw, 9rem); }
  .hv-16 { padding: 8rem var(--hv-marge) 4.5rem; }
  .hv-16 .hv-chap { margin-bottom: 2.6rem; }

  /* Images seules : bord à bord. Le crédit garde la marge du texte. */
  .hv-nuit__grande, .hv-20__image, .hv-braise__feu { margin-left: calc(var(--hv-marge) * -1) !important; margin-right: calc(var(--hv-marge) * -1) !important; }

  /* Le texte vient sous l'image qu'il accompagne. */
  .hv-nuit, .hv-9 { display: flex; flex-direction: column; }
  .hv-nuit__compo, .hv-9__tete { display: contents; }
  .hv-nuit .hv-chap { padding-top: 2rem; margin-bottom: 3rem; order: 1; }
  .hv-nuit__grande { order: 2; }
  .hv-nuit > .hv-texte { order: 3; margin: 2.4rem 0 0; }
  .hv-nuit .hv-duo { order: 4; margin-top: 4.5rem; }
  .hv-9 .hv-chap { order: 1; }
  .hv-9 .hv-duo { order: 2; }
  .hv-9 .hv-texte { order: 3; margin-top: 2.4rem; }

  /* Paires : un carrousel à faire glisser, une image à la fois, la
     suivante affleure au bord. Aucun recouvrement. */
  .hv-duo {
    display: flex;
    gap: .75rem;
    margin: 3.5rem calc(var(--hv-marge) * -1) 0;
    padding: 0 var(--hv-marge);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--hv-marge);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .hv-duo::-webkit-scrollbar { display: none; }
  .hv-duo > figure { flex: 0 0 86vw; scroll-snap-align: start; }

  .hv-20 { display: flex; flex-direction: column; padding-top: 7rem; }
  .hv-20 .hv-chap { margin-bottom: 3rem; }
  .hv-20 > .hv-texte { margin-top: 2.4rem; }

  /* « Avant de / dormir » : deux lignes, jamais trois. */
  .hv-feu__texte .hv-chap { max-width: 12ch; }
  .hv-braise { display: flex; flex-direction: column; padding-top: 0; }
  .hv-braise > .hv-texte { margin-top: 2.4rem; }

  .hv-9 { padding-top: 7rem; }
  .hv-9 .hv-chap { margin-bottom: 0; }
  .hv-duo--matin { margin-top: 3rem; }

  .hv-infos__questions { margin-top: 4.5rem; }
  .hv-appel__voile { background: linear-gradient(to top, color-mix(in srgb, var(--hv-encre) 88%, transparent) 0%, color-mix(in srgb, var(--hv-encre) 55%, transparent) 50%, color-mix(in srgb, var(--hv-encre) 25%, transparent) 100%); }
  .hv-appel { align-items: flex-end; }
  .hv-appel__texte { padding-bottom: 5rem; }
}

/* ============================================================
   TABLETTE ET ORDINATEUR (dès 768 px) : texte courant 17,5 px
   ============================================================ */
@media (min-width: 768px) {
  body[data-page="hiver"] .hv-texte { font-size: 17.5px; line-height: 1.75; max-width: 560px; color: color-mix(in srgb, var(--hv-ivoire) 93%, transparent); }
  body[data-page="hiver"] .hv-ouverture .hv-texte { font-size: 18px; max-width: 30ch; }
  body[data-page="hiver"] .hv-infos .hv-texte { font-size: 16px; }
  .hv-duo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 2rem); align-items: end; }
}

/* ============================================================
   TABLETTE (768 à 1023 px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .hv-16 { padding: 9rem var(--hv-marge) 5rem; }
  .hv-16 .hv-chap { margin-bottom: 2rem; }
  .hv-phrase .hv-grand { margin-left: 4vw; }
  .hv-nuit > .hv-texte { margin: 2.4rem 0 4rem; }
  .hv-duo { margin-top: 2rem; }
  .hv-20 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; align-items: end; }
  .hv-20 .hv-chap { grid-column: 1 / -1; margin-bottom: 2.5rem; }
  .hv-20__image { grid-column: 1 / span 2; width: 72%; }
  .hv-20 > .hv-texte { grid-column: 1 / -1; margin: 2.4rem 0 0 auto; }
  .hv-braise { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; align-items: end; }
  .hv-braise__feu { grid-column: 1; }
  .hv-braise > .hv-texte { grid-column: 2; padding-bottom: .5rem; }
  /* La queue du « 9 » descend sous la ligne : au moins 32 px entre elle et le texte. */
  .hv-9 .hv-texte { margin-top: calc(clamp(4.5rem, 13vw, 12rem) * .3 + 2rem); }
  .hv-duo--matin { margin-top: 4rem; }
  .hv-infos { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 4.5rem; }
  .hv-infos .hv-texte { max-width: 600px; }
}

/* ============================================================
   ORDINATEUR (dès 1024 px)
   ============================================================ */
@media (min-width: 1024px) {
  body[data-page="hiver"] .hv-texte { max-width: 680px; }

  /* 16 h : le texte sur la base du chiffre, juste à côté. */
  .hv-16 { display: grid; grid-template-columns: auto minmax(0, 680px); column-gap: clamp(3rem, 5vw, 6rem); justify-content: start; align-items: end; padding: clamp(7rem, 16vh, 12rem) var(--hv-marge) clamp(4rem, 9vh, 7rem); }
  .hv-16 .hv-texte { padding-bottom: 1.1rem; }

  .hv-phrase .hv-grand { margin-left: 8vw; }

  /* À la tombée de la nuit : le titre, le texte étalé dessous, puis la
     grande piscine de nuit et, contre elle, la plage à bulles et le
     canon de massage, côte à côte, de tailles différentes. */
  .hv-nuit .hv-chap { margin-bottom: 2.4rem; }
  .hv-nuit > .hv-texte { max-width: 720px; margin: 0 0 clamp(3.5rem, 8vh, 6rem); }
  .hv-nuit__compo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: end; }
  .hv-nuit__grande { grid-column: 1 / span 5; }
  .hv-nuit__grande img { max-height: 92svh; object-fit: cover; }
  .hv-nuit .hv-duo { grid-column: 6 / span 7; margin-bottom: 0; }

  /* 20 h : l'image, et contre elle le chiffre puis le texte. */
  .hv-20 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 680px); grid-template-rows: auto auto; column-gap: clamp(3rem, 6vw, 7rem); align-content: center; }
  .hv-20__image { grid-column: 1; grid-row: 1 / span 2; justify-self: end; width: min(100%, 560px); }
  .hv-20 .hv-chap { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 2.4rem; }
  .hv-20 > .hv-texte { grid-column: 2; grid-row: 2; align-self: start; }

  /* Avant de dormir : le texte, et à côté la cheminée, plus grande. */
  .hv-feu__texte .hv-chap { max-width: 14ch; }
  .hv-braise { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 560px); justify-content: center; column-gap: clamp(3rem, 7vw, 8rem); align-items: center; }
  .hv-braise > .hv-texte { grid-column: 1; grid-row: 1; max-width: 640px; }
  .hv-braise__feu { grid-column: 2; grid-row: 1; }

  /* 9 h : le chiffre, le texte juste dessous, puis le massage et la
     malle côte à côte, de tailles différentes. */
  .hv-9__tete { padding-left: 8vw; }
  /* La queue du « 9 » descend sous la ligne : au moins 32 px entre elle et le texte. */
  .hv-9 .hv-texte { margin-top: calc(clamp(4.5rem, 13vw, 12rem) * .3 + 2rem); }
  .hv-duo--matin { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 2rem; width: min(100%, 1100px); margin: clamp(4rem, 9vh, 6rem) 0 0 auto; }

  /* Venir et questions : deux colonnes larges. */
  .hv-infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(4rem, 8vw, 9rem); }
  .hv-infos .hv-texte { max-width: 62ch; }
}

/* ---------- Pied de page : version nuit, sur cette page seulement ---------- */
body[data-page="hiver"] .footer { background: var(--hv-encre); color: var(--hv-ivoire); }
body[data-page="hiver"] .footer__embleme { color: var(--hv-ivoire); }
body[data-page="hiver"] .footer__tagline { color: var(--hv-ivoire-pale); }
body[data-page="hiver"] .footer__col h3 { color: var(--hv-ambre); }
body[data-page="hiver"] .footer__col a:hover,
body[data-page="hiver"] .footer__bottom a:hover { color: var(--hv-ambre); }
body[data-page="hiver"] .footer__bottom { border-top: 0; color: var(--hv-ivoire-pale); }
body[data-page="hiver"] .consent-manage { color: var(--hv-ivoire-pale); }

/* ---------- 20 h : voile chaud sur la photo du dîner ----------
   Aucune retouche du fichier : un calque en CSS. La teinte ambre est
   appliquée en « multiply » (elle assombrit en gardant la chaleur des
   couleurs, sans griser) ; un dégradé éteint le feuillage ensoleillé du
   haut ; un vignetage léger laisse le centre de la table lumineux.
   Trois intensités, à choisir : léger, moyen, fort. */
.hv-voile picture { position: relative; display: block; }
.hv-voile picture::before,
.hv-voile picture::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hv-voile picture::before { background: var(--voile-teinte); opacity: var(--voile-a); mix-blend-mode: multiply; }
.hv-voile picture::after {
  background:
    linear-gradient(to bottom, rgb(12 15 13 / var(--voile-haut)) 0%, rgb(12 15 13 / 0) 34%),
    radial-gradient(ellipse 85% 75% at 50% 64%, rgb(12 15 13 / 0) 55%, rgb(12 15 13 / var(--voile-bord)) 100%);
}
.hv-voile--leger { --voile-teinte: #a77a4f; --voile-a: .42; --voile-haut: .30; --voile-bord: .22; }
.hv-voile--moyen { --voile-teinte: #8a603b; --voile-a: .58; --voile-haut: .45; --voile-bord: .34; }
.hv-voile--fort  { --voile-teinte: #6e4a2b; --voile-a: .72; --voile-haut: .60; --voile-bord: .46; }

/* ============================================================
   V8 — 17 octobre 2026. Refonte de l'ouverture et du 16 h.
   Ce bloc vient APRÈS la v7 et la corrige ; les chapitres non
   repris gardent leurs règles d'origine.

   Les trois reproches de Fabien, traités ici :
   1. photos trop grandes  -> plus de pleine largeur sur le 16 h,
      une paire de tailles différentes, 6 et 4 colonnes sur 12 ;
   2. textes trop condensés -> le paragraphe d'entrée passe en
      Cormorant 30 à 36 px sur 10 colonnes, justifié avec césure,
      soit 70 à 85 signes par ligne ;
   3. mobile empilé        -> composition écrite à part, pas une
      colonne héritée de l'ordinateur.

   Couleurs : AUCUNE n'est inventée. Toutes sont prélevées au
   canvas sur les deux photos retenues du 25 septembre 2025.
     n466, terrasse 17 h 47 : #974516 #873c13 #472815 #29170b
     n241, table   16 h 51 : #e3c8a9 #d7b998 #876847 #584826
   ============================================================ */

body[data-page="hiver"] {
  --hv8-rouille: #974516;
  --hv8-rouille-sombre: #873c13;
  --hv8-brun: #472815;
  --hv8-nuit-chaude: #29170b;
  --hv8-creme: #e3c8a9;
  --hv8-sable: #d7b998;
  --hv8-bois: #876847;
  --hv8-olive: #584826;
  /* Le papier : les deux tons clairs prélevés, mélangés. */
  --hv8-papier: color-mix(in srgb, var(--hv8-creme) 62%, #fdfcfc);
  --hv8-encre: var(--hv8-nuit-chaude);
  --hv8-encre-douce: color-mix(in srgb, var(--hv8-nuit-chaude) 76%, transparent);
  --hv8-grille: repeat(12, minmax(0, 1fr));
  --hv8-gout: clamp(1rem, 1.6vw, 2rem);
}

/* ---------- Grain photographique, fonds sombres seulement ---------- */
.hv-ouverture::after {
  content: "";
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Ouverture : cadrage moins serré, appel typographique ---------- */
.hv-ouverture { min-height: 88svh; background: var(--hv8-nuit-chaude); }
.hv-ouverture__media img { object-position: center 54%; }
.hv-ouverture__voile {
  background: linear-gradient(to top,
    var(--hv8-nuit-chaude) 0%,
    color-mix(in srgb, var(--hv8-nuit-chaude) 68%, transparent) 32%,
    color-mix(in srgb, var(--hv8-nuit-chaude) 18%, transparent) 64%,
    color-mix(in srgb, var(--hv8-nuit-chaude) 30%, transparent) 100%);
}
/* Le sous-titre quitte sa colonne de 30 signes : il s'étale. */
body[data-page="hiver"] .hv-ouverture .hv-texte {
  font-family: 'Cormorant', var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.35rem, 2.3vw, 2.05rem);
  line-height: 1.38;
  max-width: 24ch;
  color: color-mix(in srgb, var(--hv-ivoire) 92%, transparent);
  margin-bottom: 2rem;
}
/* L'appel : un lien, pas un bouton. Le bouton sobre reste en fin de page. */
.hv-lien {
  display: inline-block;
  font-family: var(--font-interface);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--hv-ivoire);
  text-decoration: none;
  padding-bottom: .45rem;
  border-bottom: 1px solid color-mix(in srgb, var(--hv-ivoire) 45%, transparent);
  transition: border-color .6s var(--ease), color .6s var(--ease);
}
.hv-lien:hover, .hv-lien:focus-visible { border-bottom-color: var(--hv8-rouille); color: #fff; }
.hv-lien:focus-visible { outline: 1px solid var(--hv8-rouille); outline-offset: 7px; }

/* ---------- Le marqueur d'heure : petite sans, un seul système ---------- */
.hv8-heure {
  font-family: var(--font-interface);
  font-weight: 300;
  font-style: normal;
  font-size: 12px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--hv8-rouille);
  margin: 0 0 1.6rem;
  line-height: 1;
}

/* ============================================================
   16 H — le papier crème. Fin d'après-midi d'automne.
   ============================================================ */
.hv-16 {
  background: var(--hv8-papier);
  color: var(--hv8-encre);
  /* Glissement doux depuis la nuit de l'ouverture : aucun à-coup. */
  /* La transition se termine AVANT le texte : le marqueur d'heure ne
     doit jamais tomber dans la zone encore sombre. */
  background-image: linear-gradient(to bottom,
    var(--hv8-nuit-chaude) 0,
    color-mix(in srgb, var(--hv8-nuit-chaude) 45%, var(--hv8-papier)) 5svh,
    var(--hv8-papier) 13svh);
  padding: clamp(9rem, 19vh, 14rem) var(--hv-marge) clamp(4rem, 9vh, 7rem);
}
/* Le paragraphe d'entrée : grand Cormorant, justifié, avec césure. */
.hv8-entree {
  font-family: 'Cormorant', var(--font-editorial);
  font-style: normal;
  font-weight: 400;
  color: var(--hv8-encre);
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Plus de mots peuvent se couper : les lignes s'etirent moins et
     les rivieres disparaissent, sans toucher a l'alignement. */
  hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  text-wrap: pretty;
  margin: 0;
}
.hv8-entree em { font-style: italic; }
.hv8-compo { margin: 0; }
.hv8-compo figure { margin: 0; }

/* ---------- Révélation par masque, pas de fondu-glissé ---------- */
.hv-anim .hv-v { clip-path: inset(0 0 100% 0); transition: clip-path 1.05s cubic-bezier(.22,.61,.36,1); }
.hv-anim .hv-v.is-in { clip-path: inset(0 0 0 0); }
.hv-anim .hv-t { opacity: 0; transition: opacity 1.1s var(--ease); }
.hv-anim .hv-t.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hv-anim .hv-v, .hv-anim .hv-t { clip-path: none; opacity: 1; transition: none; }
  .hv8-par { transform: none !important; }
}

/* ============================================================
   16 H — MOBILE (jusqu'à 767 px) : composition écrite à part.
   ============================================================ */
@media (max-width: 767px) {
  body[data-page="hiver"] { --hv-marge: 23px; }
  .hv-16 { padding: 4.5rem var(--hv-marge) 3.5rem; display: block; }
  .hv-16 .hv-chap { display: none; }
  .hv8-entree { font-size: 18.5px; line-height: 1.62; }
  /* La grande image prend toute la largeur, bord à bord. */
  .hv8-compo { margin-top: 2.6rem; }
  .hv8-compo__grande { margin: 0 calc(var(--hv-marge) * -1); }
  /* La petite revient dans la marge, décalée à droite, plus basse. */
  .hv8-compo__petite { width: 78%; margin: 1.1rem 0 0 auto; }
  .hv-ouverture { min-height: 92svh; }
  body[data-page="hiver"] .hv-ouverture .hv-texte { font-size: 1.3rem; max-width: 20ch; }
}

/* ============================================================
   16 H — TABLETTE (768 à 1279 px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  .hv-16 { display: block; }
  .hv-16 .hv-chap { display: none; }
  .hv8-entree { font-size: clamp(21px, 2.6vw, 26px); line-height: 1.44; max-width: 62ch; }
  .hv8-compo { display: grid; grid-template-columns: var(--hv8-grille); column-gap: var(--hv8-gout); margin-top: 3.2rem; align-items: start; }
  .hv8-compo__grande { grid-column: 1 / span 7; }
  .hv8-compo__petite { grid-column: 9 / span 4; margin-top: 4.5rem; }
}

/* ============================================================
   16 H — ORDINATEUR (dès 1280 px) : le texte occupe la page.
   ============================================================ */
@media (min-width: 1280px) {
  .hv-16 { display: block; }
  .hv-16 .hv-chap { display: none; }
  .hv8-tete { display: grid; grid-template-columns: var(--hv8-grille); column-gap: var(--hv8-gout); }
  .hv8-tete .hv8-heure { grid-column: 1 / span 12; }
  /* 10 colonnes sur 12 : environ 75 signes par ligne à 34 px. */
  .hv8-entree { grid-column: 1 / span 10; font-size: clamp(30px, 2.35vw, 36px); line-height: 1.4; }
  .hv8-compo { display: grid; grid-template-columns: var(--hv8-grille); column-gap: var(--hv8-gout); margin-top: clamp(3.5rem, 7vh, 6rem); align-items: start; }
  /* La grande à droite, 6 colonnes. La petite à gauche, 4 colonnes,
     descendue, et qui mord légèrement sous le bloc de texte. */
  .hv8-compo__grande { grid-column: 7 / span 6; }
  .hv8-compo__petite { grid-column: 2 / span 4; margin-top: clamp(5rem, 12vh, 10rem); }
}

@media (min-width: 1680px) {
  .hv8-entree { font-size: 38px; }
  .hv8-compo__grande { grid-column: 7 / span 5; }
  .hv8-compo__petite { grid-column: 2 / span 4; }
}

/* ============================================================
   V9 — LOT 1 : LE SQUELETTE. 17 octobre 2026.

   A1. La typographie Cormorant de la v8 est annulee. La page
   reprend exactement le systeme du site en ligne :
     titres  Instrument Serif, 300 pour h1 et h2, 400 pour h3
     labeur  Mulish
     echelle --t-h1 --t-h2 --t-h3 --t-lede --t-corps
     mesure  --colonne (720 px) et --mesure-titre (46ch)
   Autre ambiance, meme maison.

   A2. Tout paragraphe d'ordinateur tient sur 720 px, soit
   environ 90 signes : la colonne unique de la prose du site.
   Les phrases-titres prennent --mesure-titre et tombent sur
   une ligne, deux au plus.

   A3. Rythme vertical divise par deux. Le fondu flou sous la
   video est raccourci. Le vide avant « Venir chez Souki » est
   supprime. Les blocs 9 h et grande phrase ne font plus que la
   hauteur de leur contenu.
   ============================================================ */

body[data-page="hiver"] {
  /* Un seul rythme, moitie de celui de la v7. */
  --hv9-sec: clamp(2.5rem, 5.5vh, 4.4rem);
  --hv9-sec-l: clamp(3.2rem, 7vh, 5.5rem);
}

/* ---------- A1 · Les titres ---------- */
body[data-page="hiver"] .hv-chap,
body[data-page="hiver"] .hv-grand,
body[data-page="hiver"] .hv-infos h2,
body[data-page="hiver"] .hv-q {
  font-family: var(--font-editorial);
  font-style: normal;
  letter-spacing: normal;
}
body[data-page="hiver"] .hv-chap,
body[data-page="hiver"] .hv-chap--mots {
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.04;
  color: var(--hv-ivoire);
}
body[data-page="hiver"] .hv-grand {
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.08;
  text-wrap: pretty;
}
/* Les deux titres du bloc d'informations sont des h2 de rang
   secondaire : ils gardent le corps et la graisse des h3 de
   production, sinon ils ecrasent les chapitres. */
body[data-page="hiver"] .hv-infos h2 {
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.15;
  margin: 0 0 1.1rem;
}
body[data-page="hiver"] .hv-q {
  font-weight: 400;
  font-size: var(--t-labeur-grand);
  line-height: 1.3;
  margin: 1.5rem 0 .3rem;
}

/* ---------- A1 et A2 · Le labeur, sur la colonne de 720 px ---------- */
body[data-page="hiver"] .hv-texte,
body[data-page="hiver"] .hv8-entree {
  font-family: var(--font-labeur);
  font-weight: 300;
  font-style: normal;
  font-size: var(--t-corps);
  line-height: var(--interligne-labeur);
  max-width: var(--colonne);
  text-align: left;
  text-align-last: left;
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: pretty;
}
body[data-page="hiver"] .hv8-entree em { font-style: italic; }
body[data-page="hiver"] .hv-infos .hv-texte { font-size: var(--t-corps); max-width: var(--colonne); }
/* Le marqueur d'heure reste la seule sans de la page, mais discret. */
.hv8-heure { font-size: var(--t-micro); letter-spacing: .26em; margin: 0 0 .9rem; }

/* ---------- A2 · L'ouverture : le sous-titre sur une ligne ---------- */
body[data-page="hiver"] .hv-ouverture .hv-texte {
  font-family: var(--font-labeur);
  font-style: normal;
  font-weight: 300;
  font-size: var(--t-lede);
  line-height: 1.4;
  max-width: none;
  margin: 0 0 1.5rem;
}

/* ---------- A3 · Plus de grand fondu flou sous la video ----------
   Un voile court et net : juste de quoi detacher le titre. */
.hv-ouverture__voile {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--hv8-nuit-chaude) 88%, transparent) 0%,
    color-mix(in srgb, var(--hv8-nuit-chaude) 34%, transparent) 22%,
    transparent 46%);
}
.hv-ouverture { min-height: 84svh; }

/* ---------- A3 · Le rythme vertical, divise par deux ---------- */
body[data-page="hiver"] .hv-16 { padding-block: var(--hv9-sec-l) var(--hv9-sec); }
body[data-page="hiver"] .hv-nuit { padding-block: 0 var(--hv9-sec); }
body[data-page="hiver"] .hv-20 { padding-block: var(--hv9-sec-l); }
body[data-page="hiver"] .hv-braise { padding-block: var(--hv9-sec) var(--hv9-sec-l); }
body[data-page="hiver"] .hv-9 { padding-block: var(--hv9-sec-l) var(--hv9-sec-l); }
body[data-page="hiver"] .hv-infos { padding-block: var(--hv9-sec) var(--hv9-sec-l); }
body[data-page="hiver"] .hv8-compo { margin-top: var(--hv9-sec); }
body[data-page="hiver"] .hv-feu__texte { padding-block: 0 var(--hv9-sec); }

/* La grande phrase : plus de bandeau plein ecran. La hauteur de
   son contenu, et rien de plus. */
body[data-page="hiver"] .hv-phrase {
  min-height: 0;
  padding-block: var(--hv9-sec-l);
  align-items: start;
}
/* 9 h : le chiffre n'est plus geant, le texte remonte contre lui. */
body[data-page="hiver"] .hv-9 .hv-texte { margin-top: 1rem; }

/* Plus de vide avant « Venir chez Souki cet hiver ». */
body[data-page="hiver"] .hv-appel { min-height: 0; }
body[data-page="hiver"] .hv-appel__texte { padding-block: var(--hv9-sec-l); }
body[data-page="hiver"] .hv-appel .hv-grand { margin: 0 0 1.8rem; }

/* ---------- A2 · Ordinateur : la prose occupe la page ---------- */
@media (min-width: 1024px) {
  body[data-page="hiver"] .hv-texte,
  body[data-page="hiver"] .hv8-entree { max-width: var(--colonne); }
  body[data-page="hiver"] .hv-infos .hv-texte { max-width: var(--colonne); }
  /* Les phrases-titres : la mesure a titres de production. */
  body[data-page="hiver"] .hv-grand { max-width: var(--mesure-titre); }
  body[data-page="hiver"] .hv-phrase .hv-grand { margin-left: 0; max-width: var(--mesure-titre); }
  body[data-page="hiver"] .hv-appel .hv-grand { max-width: var(--mesure-etroite); }
  body[data-page="hiver"] .hv-feu__texte .hv-chap { max-width: var(--mesure-titre); }
  body[data-page="hiver"] .hv-9 .hv-texte { margin-top: 1rem; }
  body[data-page="hiver"] .hv-9__tete { padding-left: 0; }
}

/* Le paragraphe d'entree du 16 h quitte ses 10 colonnes : il prend
   la colonne de prose, comme tous les autres. */
@media (min-width: 768px) {
  body[data-page="hiver"] .hv8-entree { grid-column: 1 / span 12; font-size: var(--t-corps); line-height: var(--interligne-labeur); max-width: var(--colonne); }
}
@media (min-width: 1680px) {
  body[data-page="hiver"] .hv8-entree { font-size: var(--t-corps); }
}

/* ---------- A1 · Le titre d'ouverture ----------
   Il etait en Cormorant italique 400 a 172 px. Il passe au h1 de
   production : Instrument Serif 300, --t-h1 (42,5 a 89,6 px). */
body[data-page="hiver"] .hv-ouverture h1 {
  font-family: var(--font-editorial);
  font-style: normal;
  font-weight: 300;
  font-size: var(--t-h1);
  line-height: 1.06;
  letter-spacing: normal;
  margin: 0 0 1.1rem;
}

/* ---------- A2 · La grande phrase sur deux lignes ----------
   Mesuree : la phrase court sur 1855 px a 53 px de corps. Bridee a
   46ch (1124 px) elle tombait sur 3 lignes. Sur --mesure-titre-l
   (52ch, soit la largeur utile a 1440) elle tient sur 2. */
@media (min-width: 1024px) {
  body[data-page="hiver"] .hv-phrase .hv-grand {
    max-width: var(--mesure-titre-l);
    margin-left: 0;
    text-wrap: balance;
  }
}

/* ---------- A2 · Les trois blocs ou la prose tombait sous 720 px ----------
   Mesure avant correction : 20 h 680 px, braises 606 px, informations
   576 px. Les grilles sont reecrites autour de --colonne. */
@media (min-width: 1024px) {
  /* 20 h : le texte garde ses 720 px, l'image prend le reste. */
  body[data-page="hiver"] .hv-20 { grid-template-columns: minmax(0, 1fr) minmax(0, var(--colonne)); }
  body[data-page="hiver"] .hv-20__image { width: min(100%, 480px); }
  /* Avant de dormir : le texte d'abord, la cheminee contre lui. */
  body[data-page="hiver"] .hv-braise { grid-template-columns: minmax(0, var(--colonne)) minmax(0, 1fr); justify-content: start; }
  body[data-page="hiver"] .hv-braise__feu { width: min(100%, 460px); }
  /* Venir et questions : deux colonnes de 720 px n'entrent pas dans
     1267 px de largeur utile. Une seule colonne, pleine mesure. */
  body[data-page="hiver"] .hv-infos { grid-template-columns: minmax(0, var(--colonne)); row-gap: var(--hv9-sec); }
}

/* ============================================================
   V9 — L'ÉTALON. 18 octobre 2026.

   Fabien a validé la fin de page telle quelle : la piscine de
   nuit en bandeau large (≈ 2,5:1), la phrase posée dessus, un
   seul bouton, puis « Venir chez Souki cet hiver » en pleine
   mesure. Toute la page s'aligne sur ces trois mesures :

     visuel  bandeau 5/2, jamais la hauteur de l'écran
     texte   720 px, --t-corps, --interligne-labeur
     rythme  --hv9-sec-l en haut et en bas de chaque section

   Mesuré sur la section validée à 1440 px : texte 720 px,
   corps 18,27 px, interligne 30,70 px, Mulish 300.
   ============================================================ */

/* ---------- Les grands visuels : deux formats, pas un de plus ----------
   Les bandeaux photographiques prennent le rapport validé par Fabien
   en fin de page, 5/2. Les deux bandeaux de film gardent le 16/9 de
   leur fichier : affichés en 5/2, ils perdraient 29 % de leur hauteur
   au recadrage, et Fabien demande justement moins de recadrage. Une
   hauteur maximale les empêche de prendre tout l'écran. */
body[data-page="hiver"] .hv-ouverture,
body[data-page="hiver"] .hv-plein,
body[data-page="hiver"] .hv-feu,
body[data-page="hiver"] .hv-appel {
  min-height: 0;
  height: auto;
}
body[data-page="hiver"] .hv-feu,
body[data-page="hiver"] .hv-appel { aspect-ratio: 5 / 2; }
body[data-page="hiver"] .hv-ouverture,
body[data-page="hiver"] .hv-plein { aspect-ratio: 16 / 9; max-height: 82svh; }
/* Le film doit tenir dans le bandeau sans agrandissement : il fait
   exactement 16/9, donc « contain » et « cover » reviennent au même
   tant que le bandeau garde son rapport. */
body[data-page="hiver"] .hvb-film { object-fit: cover; }
/* Garde-fou : sur un écran étroit, un bandeau 5/2 devient une
   bande de 150 px. En dessous de 900 px de large, on revient à
   un format plus haut, sans jamais prendre tout l'écran. */
@media (max-width: 899px) {
  body[data-page="hiver"] .hv-ouverture { aspect-ratio: 4 / 5; max-height: none; }
  body[data-page="hiver"] .hv-plein { aspect-ratio: 4 / 3; max-height: none; }
  body[data-page="hiver"] .hv-feu,
  body[data-page="hiver"] .hv-appel { aspect-ratio: 1 / 1; }
}

/* ---------- Le rythme vertical, identique partout ---------- */
body[data-page="hiver"] .hv-16,
body[data-page="hiver"] .hv-nuit,
body[data-page="hiver"] .hv-20,
body[data-page="hiver"] .hv-braise,
body[data-page="hiver"] .hv-9,
body[data-page="hiver"] .hv-phrase,
body[data-page="hiver"] .hv-infos { padding-block: var(--hv9-sec-l); }
body[data-page="hiver"] .hv-appel__texte { padding-block: 0; }

/* ---------- Le 16 h n'a plus qu'une image ----------
   La kitchenette de plein jour est retirée. La photo de terrasse
   reste seule : elle quitte ses 6 colonnes et vient contre la
   colonne de texte, à la même largeur que la prose. */
@media (min-width: 768px) {
  body[data-page="hiver"] .hv8-compo__grande { grid-column: 1 / span 6; }
}
@media (min-width: 1280px) {
  body[data-page="hiver"] .hv8-compo__grande { grid-column: 1 / span 5; }
}

/* ---------- Le chapitre de nuit n'a plus qu'une image ----------
   Le baigneur sous le canon de massage, en plein jour, est retiré
   et rien ne le remplace : aucun plan de canons ou de jets de nuit
   n'existe dans les rushes (relevé du 18 octobre). */
.hv-duo--seule { display: block; }
.hv-duo--seule .hv-duo__a { width: min(100%, 520px); }
@media (min-width: 1024px) {
  body[data-page="hiver"] .hv-nuit .hv-duo--seule { margin-left: auto; }
}

/* ---------- La cheminée : une boucle, plus une photo ---------- */
.hv-braise__feu { position: relative; }
.hv-braise__feu video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; background: var(--hv-encre);
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.hv-braise__feu video.is-on { opacity: 1; }
.hv-braise__feu picture, .hv-braise__feu img { display: block; width: 100%; height: auto; }
.hv-braise__feu .hv-cadre { position: relative; }
.hv-braise__feu .hv-cadre video { position: absolute; inset: 0; height: 100%; }

/* ---------- Correction du 18 octobre : le marqueur d'heure ----------
   Le rythme vertical divisé par deux a ramené le « 16 h » à 63 px du
   haut de la section, c'est-à-dire DANS le dégradé sombre hérité de
   la v8, qui courait jusqu'à 13svh. Le dégradé se termine maintenant
   à 46 px : il adoucit encore le raccord, et plus rien ne tombe
   dedans. */
body[data-page="hiver"] .hv-16 {
  background-image: linear-gradient(to bottom,
    var(--hv8-nuit-chaude) 0,
    color-mix(in srgb, var(--hv8-nuit-chaude) 45%, var(--hv8-papier)) 18px,
    var(--hv8-papier) 46px);
}

/* ---------- Correction du 18 octobre : le bandeau se rétrécissait ----------
   MESURÉ à 1920 : la section d'ouverture ne faisait que 1574 px de
   large au lieu de 1920. Avec « aspect-ratio » et une largeur « auto »,
   la contrainte de hauteur maximale se reporte sur la largeur et le
   bloc rétrécit pour garder son rapport. Une largeur explicite rend la
   largeur définie : seule la hauteur est alors bridée. */
body[data-page="hiver"] .hv-ouverture,
body[data-page="hiver"] .hv-plein,
body[data-page="hiver"] .hv-feu,
body[data-page="hiver"] .hv-appel { width: 100%; }

/* ---------- Publication du 18 octobre : les crédits quittent la page ----------
   Décision de Fabien : aucun crédit visible sur « Souki en hiver ». Les dix
   mentions sont retirées du HTML, et toutes les règles `.hv-credit` d'ici
   avec elles — cette feuille ne sert qu'à cette page, rien d'autre ne les
   appelait. Les auteurs sont nommés dans les mentions légales. */