/* =========================================================================
   FLEXHO — PROTOTYPE : hero plein écran, plan-séquence piloté au scroll
   -------------------------------------------------------------------------
   Surcouche isolée du hero d'accueil, chargée uniquement par index.html.
   styles.css n'est pas touché. Pour revenir en arrière : supprimer
   hero-film.css, hero-film.js, assets/hero-film/ et la section .hero-film
   de index.html. Rien d'autre n'en dépend.

   PRINCIPE
   Le visiteur arrive dans un plan, pas sur une page. L'image occupe tout
   l'écran dès le premier pixel. Le scroll fait avancer la caméra, puis le
   texte du hero monte par-dessus la salle. Le texte est présent dans le HTML
   dès le départ — il est seulement décalé visuellement — pour que les moteurs
   de recherche et les lecteurs d'écran le trouvent normalement.
   ========================================================================= */

.hero.hero-film{
  min-height:0;display:block;padding:0;overflow:visible;isolation:auto;
  background:var(--ink-deep);
}
.hf-stage{
  position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;
  background:var(--ink-deep);
}
/* Trois écrans de piste : un pour la cuisine, un pour le passage, un pour la
   salle et l'arrivée du texte. */
.hf-track{height:300svh}
@media (max-width:899px){ .hf-track{height:260svh} }

/* ---------- L'IMAGE ------------------------------------------------------ */
.hf-canvas,.hf-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:var(--ink-deep);
}
.hf-canvas{opacity:0;transition:opacity .8s var(--ease);z-index:0}
.hf-stage.is-ready .hf-canvas{opacity:1}
/* L'image fixe tient l'écran tant que la séquence n'est pas prête, et reste
   seule si le visiteur a coupé les animations ou si le réseau lâche. */
.hf-poster{z-index:0;transition:opacity .8s var(--ease)}
.hf-stage.is-ready .hf-poster{opacity:0}

/* Voile de lisibilité : discret pendant le film, il se referme quand le
   texte arrive pour que le titre reste lisible sur la salle éclairée. */
.hf-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top, var(--ink-deep) 0%, rgba(7,23,48,.86) 26%, rgba(7,23,48,.3) 62%, rgba(7,23,48,.5) 100%),
    radial-gradient(ellipse 120% 90% at 30% 60%, rgba(7,23,48,0) 36%, rgba(7,23,48,.6) 100%);
  opacity:var(--voile,.28);
}

/* ---------- LE TEXTE ----------------------------------------------------- */
/* Contenu strictement identique au hero actuel. Seule son arrivée change. */
.hf-copy{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:0 0 clamp(1.6rem,4vh,3rem);
  opacity:var(--texte,0);
  transform:translate3d(0,calc((1 - var(--texte,0)) * 34px),0);
  will-change:opacity,transform;
}
/* On laisse la classe .wrap faire son travail : mêmes marges que partout
   ailleurs sur le site, décalage du rail horaire compris sur grand écran.
   Sans ça le titre venait coller au bord gauche de l'écran. */

/* ---------- L'INVITATION À DESCENDRE ------------------------------------- */
/* Sans elle, un visiteur qui arrive sur une image plein écran ne sait pas
   qu'il y a quelque chose à faire. */
.hf-cue{
  position:absolute;left:0;right:0;bottom:clamp(1.4rem,4vh,2.4rem);z-index:3;
  display:flex;justify-content:center;pointer-events:none;
  opacity:var(--invite,1);transition:opacity .4s var(--ease);
}
.hf-cue span{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--on-ink-muted);text-shadow:0 1px 10px rgba(4,12,28,.9);
}
.hf-cue s{
  display:block;width:1px;height:34px;background:currentColor;opacity:.4;
  text-decoration:none;position:relative;overflow:hidden;
}
.hf-cue s::after{
  content:"";position:absolute;inset:0;background:var(--azur-soft);
  animation:hfDescend 2.4s var(--ease) infinite;
}
@keyframes hfDescend{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- MOUVEMENT RÉDUIT / SANS JAVASCRIPT --------------------------- */
/* Pas de plan-séquence : on montre la salle, le texte par-dessus, tout de
   suite et en entier. La page reste exactement aussi utile. */
@media (prefers-reduced-motion:reduce){
  .hf-stage{position:relative;height:auto;min-height:100svh;display:flex;align-items:flex-end}
  .hf-track{display:none}
  .hf-canvas{display:none}
  .hf-poster{opacity:1!important}
  .hf-copy{position:relative;opacity:1!important;transform:none!important;padding-top:8rem}
  .hf-scrim{opacity:.8}
  .hf-cue{display:none}
}
html:not(.js) .hf-track{display:none}
html:not(.js) .hf-stage{position:relative;height:auto;min-height:100svh;display:flex;align-items:flex-end}
html:not(.js) .hf-canvas{display:none}
html:not(.js) .hf-copy{position:relative;opacity:1;transform:none;padding-top:8rem}
html:not(.js) .hf-scrim{opacity:.8}
html:not(.js) .hf-cue{display:none}

/* ---------- LA BARRE DE NAVIGATION PENDANT LE PLAN ----------------------- */
/* Par défaut le site rend la barre navy dès 24 px de scroll. Sur un hero
   plein écran, ce bandeau opaque en travers de l'image casse l'immersion dès
   le premier geste. Ici elle reste transparente sur le début sombre, puis se
   referme progressivement quand on entre dans la salle éclairée — à la fois
   pour l'esthétique et parce que du texte blanc sur des lustres dorés ne se
   lit pas. La variable --navfond est pilotée par hero-film.js.
   Dès qu'elle atteint 1, la classe disparaît et le site reprend la main. */
html.hf-nav-clear .nav,
html.hf-nav-clear .nav.is-stuck{
  background:rgba(12,33,67,calc(var(--navfond,0) * .86));
  -webkit-backdrop-filter:blur(calc(var(--navfond,0) * 14px)) saturate(1.2);
          backdrop-filter:blur(calc(var(--navfond,0) * 14px)) saturate(1.2);
  border-bottom-color:rgba(245,248,252,calc(var(--navfond,0) * .16));
  transition:none;
}
/* Sans fond derrière elle, la barre a besoin de son propre appui pour rester
   lisible sur les zones claires de l'image. */
html.hf-nav-clear .nav .nav-brand,
html.hf-nav-clear .nav .nav-links a,
html.hf-nav-clear .nav .nav-clock{
  text-shadow:0 1px 12px rgba(4,12,28,calc(.9 - var(--navfond,0) * .9));
}