/* ============================================================
   HERO SCROLL-EXPAND
   Effet : vidéo centrée qui s'étend à plein écran au scroll,
   puis libère le scroll normal quand elle couvre tout l'écran.
   ============================================================ */

.hero-scroll {
  position: relative;
  width: 100%;
}

/* Zone sticky qui "tient" l'effet pendant qu'on scrolle */
.hero-scroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #0b0b0b;
}

/* Image de fond (poster) visible avant/pendant chargement vidéo */
.hero-scroll-poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  opacity: 0.55;
  filter: blur(4px) brightness(0.75);
  transform: scale(1.05);
}

/* Boîte vidéo animée (largeur/hauteur pilotées par JS via --p 0→1) */
.hero-scroll-media {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(300px + (100vw - 300px) * var(--p, 0));
  height: calc(200px + (100vh - 200px) * var(--p, 0));
  max-width: 100vw;
  max-height: 100vh;
  border-radius: calc(16px * (1 - var(--p, 0)));
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  z-index: 2;
  transition: box-shadow .3s ease;
}

.hero-scroll-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-scroll-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.45));
  pointer-events: none;
}

/* Titre : grand au début, petit et remonté à la fin */
.hero-scroll-titlewrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - (var(--p, 0) * 38vh)));
  z-index: 3;
  text-align: center;
  color: #fff;
  width: 90%;
  max-width: 1100px;
  pointer-events: none;
  text-shadow: 0 4px 24px rgba(0,0,0,.6);
}

.hero-scroll-kicker {
  font-size: calc(0.9rem + (1 - var(--p, 0)) * 0.3rem);
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: calc(0.85 - var(--p, 0) * 0.3);
  margin: 0 0 1rem;
  font-weight: 500;
}

.hero-scroll-title {
  font-size: calc(2.2rem + (1 - var(--p, 0)) * 4rem);
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.02em;
}

/* Flèche "scroll hint" — disparaît quand l'effet est terminé */
.hero-scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  color: #fff;
  opacity: calc(1 - var(--p, 0));
  transition: opacity .2s;
  font-size: 1.8rem;
  animation: heroBounce 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 10px); }
}

.hero-scroll-after {
  padding-top: 40px;
  background: #fff;
  position: relative;
  z-index: 5;
}

.hero-scroll-sub {
  font-size: 1.25rem;
  color: #555;
  max-width: 760px;
  margin: 0 auto;
}

/* Mobile : effet plus doux */
@media (max-width: 767px) {
  .hero-scroll-media {
    width: calc(240px + (100vw - 240px) * var(--p, 0));
    height: calc(160px + (100vh - 160px) * var(--p, 0));
  }
  .hero-scroll-title {
    font-size: calc(1.8rem + (1 - var(--p, 0)) * 2.4rem);
  }
  .hero-scroll-titlewrap {
    transform: translate(-50%, calc(-50% - (var(--p, 0) * 30vh)));
  }
}