/* HERO — le plan est l'élément central du site.
   ------------------------------------------------------------------
   La vidéo est une boucle aller-retour fabriquée en amont (le montage
   contient déjà le sens normal puis le sens inverse), si bien qu'un
   simple `loop` suffit : aucun redémarrage, aucune coupure, aucun saut.
   Le fond du plan a été étalonné sur --os : le phare paraît posé sur la
   page plutôt qu'enfermé dans un cadre. */

.hero {
  padding-top: calc(var(--header-h) + clamp(14px, 2.6vw, 34px));
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero-tete { flex: none; }

.hero-ligne-haute {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--trait);
}
.hero-compteur {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}
.hero-compteur b { color: var(--orange-texte); font-weight: 500; }

/* ------------------------------------------------------------- titre */
.hero-titre {
  margin-top: clamp(14px, 2.4vw, 30px);
  font-size: clamp(2.5rem, 6vw, 5.6rem);
  font-variation-settings: "wdth" var(--wdth-display), "wght" var(--wght-titre);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: none;
  text-wrap: nowrap;
}
.hero-titre .ligne { display: block; overflow: hidden; }
.hero-titre .ligne > span {
  display: block;
  transform: translateY(104%);
  transition: transform 1.05s var(--ease-sortie);
}
.hero-titre .ligne:nth-child(2) > span { transition-delay: 0.07s; }

/* Le titre tourne sur quatre phrases (js/hero.js). Elles sont empilées
   dans la même case : le bloc prend la hauteur de la plus haute, rien ne
   saute quand elles changent. Au repos, une phrase attend sous son
   masque, sans transition — sinon, en y retournant, elle traverserait le
   titre. Seules l'entrée et la sortie sont animées. */
.hero-versions { display: grid; }
.hero-version { grid-area: 1 / 1; }
.hero-version .ligne > span { transition: none; }
.hero-titre.est-entre .hero-version.est-active .ligne > span,
.no-js .hero-version.est-active .ligne > span {
  transform: none;
  transition-property: transform;
  transition-duration: 1.05s;
  transition-timing-function: var(--ease-sortie);
}
.hero-titre .hero-version.est-active .ligne:nth-child(2) > span,
.no-js .hero-version.est-active .ligne:nth-child(2) > span { transition-delay: 0.07s; }
.hero-version.est-sortie .ligne > span {
  transform: translateY(-104%);
  transition: transform 0.7s var(--ease-doux);
}

/* La jauge des phrases. Quand le repère actif est plein, la phrase
   change : la figer fige donc tout — survol du titre, ou héros sorti de
   l'écran. */
.hero-titre-commandes {
  margin-top: clamp(14px, 1.8vw, 22px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}
.hero-titre-commandes[hidden] { display: none; }
.hero-reperes { display: flex; gap: 6px; }
.hero-reperes i {
  position: relative;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--trait-fort);
  overflow: hidden;
}
.hero-reperes i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--encre);
  transform: scaleX(0);
  transform-origin: left;
}
.hero-reperes i.est-actif::after { animation: repere-plein var(--duree, 4200ms) linear forwards; }
@keyframes repere-plein { to { transform: scaleX(1); } }
.hero-titre-commandes.est-hors-champ .hero-reperes i::after,
.hero-titre:hover + .hero-titre-commandes .hero-reperes i::after {
  animation-play-state: paused;
}

/* ------------------------------------------------------- accroche + cta */
.hero-ligne-basse {
  margin-top: clamp(16px, 2.4vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: end;
}
.hero-accroche {
  font-size: var(--fs-lead);
  color: var(--texte-doux);
  max-width: 44ch;
  line-height: 1.5;
}
.hero-accroche strong { color: var(--texte); font-weight: 600; }
.hero-actions { display: flex; gap: 10px; align-items: center; }

/* --------------------------------------------------------------- plan */
.hero-scene {
  position: relative;
  flex: 1 1 auto;
  /* Une bande haute : en 16/9 dans un cadre trop plat, le recadrage
     « cover » mangeait plus de la moitié de l'image. */
  min-height: min(clamp(360px, 64svh, 820px), 56.25vw);
  /* Jamais plus haute que ce que la largeur permet en 16/9 : le film se
     voit alors en entier, girouette, rocher et texte incrusté compris. */
  max-height: 56.25vw;
  margin-top: clamp(16px, 2.6vw, 32px);
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  /* Ce cadre crée un contexte d'empilement : sans fond peint, la fusion
     « multiply » de la vidéo n'aurait rien sur quoi se poser. On lui donne
     donc la couleur de la page, sur laquelle le blanc du plan vient fondre. */
  background: var(--bg);
}
/* Le cadre du plan garde les proportions du film (16/9) et prend toute
   la hauteur de la scène : le phare se voit en entier, de la girouette au
   pied du rocher, dès la première image. Il était recadré en « cover »
   dans une bande plus plate que le film, qui coupait le haut du phare.
   La scène ne dépasse jamais 56,25 vw de haut : le cadre tient donc
   toujours dans la largeur de l'écran, et ses bords se fondent dans la
   page. */
.hero-media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  height: 100%;
  aspect-ratio: 16 / 9;
  transform: translateX(-50%);
}
/* Le montage contient l'aller puis le retour : `loop` suffit à obtenir
   la boucle infinie, sans coupure ni redémarrage visibles. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  /* Le plan est fondu dans la page par ses quatre bords : la limite du
     cadre vidéo ne doit jamais se voir. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  /* Le fond du plan est un blanc froid (245,245,245) alors que la page est
     une écume chaude (243,240,233) : posé tel quel, le cadre se voyait comme
     un rectangle plus clair. En fusion « multiply », le blanc prend
     exactement la couleur de la page et la limite disparaît. */
  mix-blend-mode: multiply;
  transform: scale(var(--zoom, 1)) translate3d(0, var(--shift, 0px), 0);
  transition: transform 1.2s var(--ease-sortie);
}
.hero-secours {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: var(--sp-6);
  text-align: center;
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--wdth-display), "wght" var(--wght-titre);
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  color: var(--texte-doux);
}

/* --------------------------------------------------------------- pied */
.hero-pied {
  flex: none;
  padding-block: clamp(12px, 1.8vw, 20px) clamp(14px, 2vw, 24px);
}
.hero-pied-inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--trait);
}
.hero-faits {
  display: flex;
  gap: clamp(18px, 3.4vw, 54px);
  flex-wrap: wrap;
}
.hero-fait { display: grid; gap: 1px; }
.hero-fait-icone {
  display: block;
  width: 16px;
  height: 16px;
  margin-bottom: 5px;
  color: var(--texte-doux);
  opacity: 0.55;
}
.hero-fait-icone svg { width: 100%; height: 100%; display: block; }
.hero-fait .v {
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--wdth-display), "wght" var(--wght-titre);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  letter-spacing: -0.02em;
}
.hero-fait .k {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--texte-doux);
}

/* Jauge du plan : elle se remplit quand la vidéo avance et se vide quand
   elle repart en arrière. C'est le lien visible entre le texte et l'image. */
.hero-jauge {
  margin-left: auto;
  width: clamp(90px, 14vw, 190px);
  height: 2px;
  background: var(--trait);
  position: relative;
  flex: none;
}
.hero-jauge i {
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform: scaleX(var(--lecture, 0));
  transform-origin: left;
}
.hero-defiler {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--texte-doux);
  flex: none;
}
.hero-defiler .trait {
  width: 26px; height: 1px;
  background: var(--trait-fort);
  position: relative;
  overflow: hidden;
}
.hero-defiler .trait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--orange);
  animation: defiler 2.4s var(--ease-doux) infinite;
}
@keyframes defiler {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

@media (max-width: 1080px) {
  .hero-titre { text-wrap: balance; white-space: normal; }
  .hero-ligne-basse { grid-template-columns: 1fr; align-items: start; }
  .hero-jauge { display: none; }
}
@media (max-width: 900px) {
  .hero-titre .ligne:nth-child(2) { margin-top: 0.12em; }

}

@media (max-width: 700px) {
  .hero { min-height: auto; padding-bottom: var(--sp-5); }
  .hero-scene { min-height: min(42svh, 56.25vw); }
  .hero-pied-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .hero-defiler { display: none; }
}

/* VISTA, seconde passe — le texte du héros est centré, au-dessus du film,
   comme une ouverture d'affiche. Le film reste en pleine largeur : sur le
   blanc pur, le blanc du plan fond dans la page sans aucun bord. */
.hero-tete { text-align: center; }
.hero-titre { font-size: clamp(2.5rem, 6.2vw, 5.4rem); letter-spacing: -0.03em; line-height: 0.98; }
.hero-ligne-basse {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.hero-accroche { margin-inline: auto; max-width: 54ch; }
.hero-actions { justify-content: center; flex-wrap: wrap; }
/* Les trois chiffres suivent l'axe du héros, désormais centré. */
.hero-pied-inner { justify-content: center; }
.hero-faits { justify-content: center; text-align: center; }
.hero-fait { justify-items: center; }

/* Le dégradé du titre, à la manière de Piston : un halo orange qui naît
   au centre du haut et se fond dans l'encre vers les bords — c'est ce
   mélange qui fait apparaître des tons brûlés entre les deux.

   Le titre est fait de deux lignes animées séparément. Pour qu'elles
   partagent UN seul dégradé, chacune porte le même ellipse (demi-largeur,
   deux hauteurs de ligne), dont le centre est placé au sommet du titre :
   en haut de la première ligne, une ligne au-dessus de la seconde.

   Lisibilité : l'orange pur est le point le plus clair, 3,28:1 sur blanc
   — au-dessus du seuil de 3:1 exigé pour un texte de cette taille. Tout
   le reste du dégradé est plus sombre, donc plus contrasté. */
.hero-titre .ligne > span {
  background-image: radial-gradient(42% 230% at 50% 0%, var(--orange) 0%, var(--orange) 22%, var(--encre) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-titre .ligne:nth-child(2) > span {
  background-image: radial-gradient(42% 230% at 50% -100%, var(--orange) 0%, var(--orange) 22%, var(--encre) 100%);
}
/* En mode contraste élevé, le navigateur retire les fonds : sans ce
   repli, un texte transparent sur fond retiré deviendrait invisible. */
@media (forced-colors: active) {
  .hero-titre .ligne > span {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}