@charset "UTF-8";

/* ==========================================================================
   Casa Paradisu — Hero piloté au défilement (« scrub »)

   Trois pièces, comme pour l'ancien hero séquentiel :

     .hero--scrub        la section, qui ne fait plus que contenir
     .hero-scrub__track  une piste haute de N écrans, dont l'unique rôle est
                         de donner au défilement la course nécessaire
     .hero-scrub__stage  une scène collante d'exactement un écran, qui reste
                         fixée pendant toute la traversée

   La hauteur de la piste est portée par `--hero-track-screens`. Elle vaut UN
   écran par défaut : sans JavaScript, sur écran tactile, sous
   `prefers-reduced-motion` ou si la vidéo est introuvable, la section est un
   hero classique d'une hauteur de fenêtre. Le script la remplace par la course
   réelle une fois la vidéo prête, et jamais avant.

   Ce fichier est chargé APRÈS `responsive.css` : à spécificité égale, c'est
   lui qui l'emporte sur les règles de `.hero`.
   ========================================================================== */

/* Repli pour les moteurs sans `svh`, à l'identique du hero séquentiel. */
@supports not (height: 100svh) {
  .hero--scrub { --hero-screen: 100vh; }
}

.hero--scrub {
  /* `.hero` est une boîte flexible d'une hauteur d'écran, qui coupe son
     débordement. Les trois sont à défaire ici : un ancêtre qui coupe le
     débordement désactive silencieusement `position: sticky` chez ses
     descendants. */
  display: block;
  min-height: 0;
  height: auto;
  overflow: visible;
}

/* Le voile supérieur de `.hero` défilerait avec la section, qui mesure
   plusieurs écrans : il ne protégerait la barre de navigation que sur le
   premier. Il est repris à l'identique par la scène, qui elle reste fixe. */
.hero--scrub::before { content: none; }

.hero-scrub__track {
  position: relative;
  height: calc(var(--hero-screen, 100svh) * var(--hero-track-screens, 1));
}

.hero-scrub__stage {
  position: sticky;
  top: 0;
  height: var(--hero-screen, 100svh);
  overflow: hidden;
  isolation: isolate;
  /* Fond d'attente en tons de marque, jamais un aplat noir : tant que la
     photographie n'est pas peinte, le bloc ne se lit pas comme une erreur. */
  background-color: var(--c-charcoal);
  background-image: linear-gradient(160deg, #2C302A 0%, #20231F 55%, #171A16 100%);
}

/* Voile sous l'en-tête, repris de `.hero::before` et posé sur la scène. */
.hero-scrub__stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--header-h) + 2rem);
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(8, 14, 16, 0.64) 0%,
    rgba(8, 14, 16, 0.46) 40%,
    rgba(8, 14, 16, 0) 100%);
}

/* --- Médias ----------------------------------------------------------------
   La photographie est TOUJOURS là, dessous. La vidéo se pose par-dessus et
   n'est révélée qu'une fois sa première image décodée : aucun écran noir ne
   peut apparaître, ni pendant le chargement, ni si le format est refusé.
   -------------------------------------------------------------------------- */
.hero-scrub__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-scrub__media img,
.hero-scrub__media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Même convention que l'ancien hero : un `--focal` posé sur le média suffit
     à déplacer le point de cadrage, sans toucher à cette règle. */
  object-position: var(--focal, 50% 50%);
}

.hero-scrub__media video {
  z-index: 2;
  opacity: 0;
  transition: opacity 700ms var(--ease, ease);
}
.hero--scrub.is-video-ready .hero-scrub__media video { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-scrub__media video { transition: none; }
}

/* --- Signature de marque ---------------------------------------------------
   Reprise telle quelle du hero séquentiel : `.hero-intro__content`,
   `.hero-intro__title` et `.hero-intro__discover` sont déjà définis dans
   `pages.css` et `responsive.css`. Rien n'est redéclaré ici, seul le plan
   d'empilement est fixé — au-dessus du voile de l'en-tête.
   -------------------------------------------------------------------------- */
.hero--scrub .hero-intro__content { z-index: 5; }