/* ════════════════════════════════════════════════════════════════════════
   LE HAUT DE PAGE — la vidéo en plein cadre, le titre au centre
   ════════════════════════════════════════════════════════════════════════
   Partagé par Tarifs et Réserver : sorti de tarifs-page.css à l'identique le
   30 septembre 2026, pour que Réserver reprenne ce haut de page sans en
   garder une copie. Ce qui est propre à chaque page (le panneau `.plans` de
   Tarifs, la carte du planning de Réserver) reste dans sa propre feuille.

   Variante « plein cadre » retenue en live (Impeccable) par Corentin le
   26 septembre 2026 : plus bas, texte centré, sans chapô, la vidéo sur
   toute la largeur. Il porte le seul <h1> de la page ; sa garde basse laisse
   la place à la carte qui le chevauche de --chevauchement.
   ── L'EN-TÊTE EST CELUI DES SQUEEZE PAGES (accueil, 29 septembre 2026) ──
   Collant et non superposé : il occupe sa propre hauteur, le haut de page n'a
   donc plus à réserver celle d'une nav fixe. --header-h reprend sa hauteur
   pour tarifs.js, qui s'en sert comme marge au recadrage. */
:root{--chevauchement:64px;--header-h:var(--sq-header-h,83px)}
.thero{position:relative;overflow:hidden;isolation:isolate;box-sizing:border-box;min-height:420px;
  padding:56px 24px calc(var(--chevauchement) + 64px);
  text-align:center;background:var(--vin-950)}
.thero__photo{position:absolute;inset:0;z-index:-1;margin:0;overflow:hidden}
.thero__media{display:block;width:100%;height:100%;object-fit:cover;object-position:55% 50%}
/* Le voile : brun-noir chaud rgba(26,4,6), plus dense au centre où se pose
   le titre et sur les bords, pour que le crème reste lisible sur toute la
   boucle. Jamais de teinte bordeaux : c'est la lumière du studio qu'on
   doit voir. */
.thero__photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 45%, rgb(26 4 6 / .65) 0%, rgb(26 4 6 / .55) 60%, rgb(26 4 6 / .75) 100%)}
.thero__texte{max-width:880px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.thero__h1{margin:0;display:flex;flex-direction:column;align-items:center;font:inherit}
.thero__surtitre{margin:0;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--vin-200)}
/* Marcellus en bas de casse : aucun `font-weight`. */
.thero__titre{margin:16px 0 0;font-family:var(--font-display);font-size:clamp(48px,6vw,84px);font-weight:400;line-height:1.02;color:var(--davos)}
/* La phrase manuscrite, juste sous le titre, légèrement penchée.
   Homemade Apple (Font Diner, licence Apache 2.0), auto-hébergée ; seules les
   pages qui chargent cette feuille (et le pop-up) la téléchargent. */
@font-face{font-family:"Homemade Apple";src:url("../fonts/homemade-apple-latin.woff2") format("woff2");font-display:swap}
.thero__manuscrit{margin:18px 0 0;font-family:"Homemade Apple",cursive;font-size:20px;line-height:1.7;
  color:var(--vin-100);transform:rotate(-4deg);transform-origin:center}

@media (max-width:767px){
  :root{--chevauchement:40px}
  /* ── LE HAUT DE PAGE COMPACT, LA PHOTO QUI DÉBORDE (façon Starfluide) ──
     Le premier écran doit montrer ce qui suit (les prix, le planning) : pas
     de phrase manuscrite, et la vidéo n'est pas chargée (lazy-video.js), son
     poster fait le fond. Il déborde SOUS la carte qui suit : opaque, elle le
     recouvre et ses coins arrondis se découpent sur la photo. */
  .thero{overflow:visible;min-height:0;padding:22px 16px calc(var(--chevauchement) + 18px)}
  .thero__photo{bottom:auto;height:calc(100% + 320px)}
  .thero__surtitre{font-size:11px}
  .thero__titre{margin-top:8px;font-size:34px}
  .thero__manuscrit{display:none}
}