/*
  Section 1 — hero vidéo épinglé, adapté du mécanisme "Optimind" fourni par
  le client mais entièrement reskinné avec les tokens de base.css (blanc /
  gris clair / rouge, Sora + Inter) : aucune couleur ni typo du document
  d'origine n'est reprise.

  Principe : .video-hero-wrap est haut (175vh), .video-hero est sticky à
  l'intérieur (occupe tout le viewport tant qu'on scrolle dans cette plage).
  Le panneau clair du haut se rétracte (translateY) une fois qu'on a scrollé
  au-delà de la topbar, laissant la vidéo plein écran jusqu'à la fin de la
  plage — moment où le scroll naturel enchaîne sur la section 2.
*/

.video-hero-wrap{
  position:relative;
  height:175vh;
}
.video-hero{
  position:sticky;
  top:0;
  height:100vh;
  width:100%;
  overflow:hidden;
  background:var(--ink);
}

/* ---- fond vidéo plein cadre ---- */
.video-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  /* dégradé de secours tant que la vidéo n'est pas fournie / ne charge pas */
  background:
    radial-gradient(ellipse at 50% 66%, rgba(224,27,61,0.16), transparent 55%),
    linear-gradient(150deg, #1B2530, #16202B 55%, #10161E);
}
.video-hero-el{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---- bandeau de révélation (texte sur la vidéo, bas-gauche) ----
   Caché par défaut : il n'apparaît qu'une fois le panneau blanc reparti vers
   le haut (voir video-hero.js -> initScrollBehaviour). Il glisse alors depuis
   la gauche et occupe toute la largeur de la vidéo — le dégradé garde le
   texte lisible à gauche tout en laissant la vidéo visible à droite.
   Le délai de transition (.2s) fait suivre le noir juste après le blanc,
   au lieu des deux mouvements simultanés. */
.reveal-banner{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:25%;
  z-index:1;
  display:flex;
  align-items:flex-end;
  padding: 48px 40px;   /* aligné sur le logo (48px comme .wrap) */
  /* fond assombri sur toute la largeur, un peu plus dense à gauche pour la
     lisibilité du texte, mais présent d'un bord à l'autre de la vidéo */
  background:linear-gradient(90deg, rgba(22,32,43,0.82) 0%, rgba(22,32,43,0.66) 55%, rgba(22,32,43,0.5) 100%);
  opacity:0;
  transform:translateX(-100%);
  pointer-events:none;
  transition:opacity .8s cubic-bezier(.65,0,.35,1) .2s, transform .8s cubic-bezier(.65,0,.35,1) .2s;
}
.reveal-inner{
  max-width:1280px;
  width:100%;
  margin:0 auto;
}
.reveal-title{
  margin:0 0 14px;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:clamp(24px, 3vw, 38px);
  line-height:1.15;
  letter-spacing:-0.02em;
  color:#fff;
  max-width:620px;
}
.reveal-banner p{
  margin:0;
  max-width:46ch;
  font-size:15.5px;
  line-height:1.65;
  color:rgba(255,255,255,0.88);
}
.reveal-banner.is-visible{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}

/* ---- panneau clair du haut (contenu principal) ---- */
.video-hero-panel{
  position:absolute;
  top:0; left:0; right:0;
  z-index:2;
  /* Hauteur = celle du contenu : plus de grand vide entre le texte et les
     boutons (auparavant 54% de l'écran avec space-between). La vidéo occupe
     tout le reste. Colonne centrée alignée sur .wrap : 1184px utiles,
     marges latérales jamais inférieures à 48px. */
  height:auto;
  padding:36px max(48px, calc((100% - 1184px) / 2)) 34px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background:var(--white);
  box-shadow:0 1px 0 var(--gray-200);
  transition:transform .9s cubic-bezier(.65,0,.35,1);
}
.video-hero-panel.is-hidden{
  transform:translateY(-100%);
}

.video-hero-top{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:56px;
  align-items:start;
}
.video-hero-text{
  transition:opacity .5s ease, transform .5s ease;
}
.video-hero-text.is-fading{ opacity:0; transform:translateY(8px); }
.video-hero-text h1{
  font-weight:700;
  font-size:clamp(30px, 3.6vw, 46px);
  line-height:1.12;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0;
}
.video-hero-text h1 .accent{ color:var(--red); }

.video-hero-side{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding-top:6px;
}
.video-hero-side p{
  max-width:40ch;
  font-size:16px;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0;
}
/* deux points décoratifs hérités de la maquette : ils ressemblaient à une
   coquille en haut à droite du panneau, on les retire du rendu */
.dots-icon{ display:none; }
.dots-icon span{ width:4px; height:4px; border-radius:50%; background:var(--gray-300); }

.video-hero-actions{
  display:flex;
  gap:14px;
  margin-top:30px;
}

/* ---- pied de section : indication de scroll + son ---- */
.video-hero-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 48px 26px;
}
.scroll-cue{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  cursor:pointer;
  color:rgba(255,255,255,0.75);
  background:none;
  border:none;
  padding:0;
}
.mouse{
  width:20px; height:32px;
  border:1.5px solid rgba(255,255,255,0.5);
  border-radius:12px;
  position:relative;
}
.mouse::before{
  content:'';
  position:absolute;
  top:6px; left:50%;
  width:3px; height:6px;
  background:var(--red);
  border-radius:2px;
  transform:translateX(-50%);
  animation:mdp-scroll-dot 1.6s ease-in-out infinite;
}
@keyframes mdp-scroll-dot{
  0%{ opacity:1; transform:translate(-50%,0); }
  60%{ opacity:0; transform:translate(-50%,10px); }
  100%{ opacity:0; transform:translate(-50%,10px); }
}

.sound-toggle{
  position:absolute;
  right:48px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.75);
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
}
.sound-toggle:hover{ color:#fff; }
.sound-toggle svg{ width:15px; height:15px; }

@media (prefers-reduced-motion: reduce){
  .mouse::before{ animation:none; }
}

@media (max-width:1180px){
  .video-hero-panel{ padding:32px 28px 26px; }
  .video-hero-text h1{ font-size:clamp(26px, 4vw, 36px); }
  .video-hero-footer{ padding:0 28px 22px; }
  .sound-toggle{ right:28px; }
}

/* ---- portrait (mobile / tablette) : même mécanique, empilée verticalement ----
   Le panneau blanc prend la hauteur de son contenu (plus de grand vide entre
   le texte et les boutons) et la vidéo occupe tout le reste de l'écran.
   svh : hauteur stable même quand la barre d'adresse mobile apparaît/disparaît. */
@media (max-width:900px){
  .video-hero-wrap{ height:175vh; height:175svh; }
  .video-hero{ height:100vh; height:100svh; }

  .video-hero-panel{
    height:auto;
    justify-content:flex-start;
    padding:28px 28px 30px;
  }
  .video-hero-top{ grid-template-columns:1fr; gap:0; }
  .video-hero-text{ min-height:2.3em; }
  .video-hero-text h1{ font-size:clamp(28px, 6.4vw, 38px); }
  .video-hero-side{ padding-top:14px; }
  .video-hero-side p{ max-width:52ch; }
  .dots-icon{ display:none; }
  .video-hero-actions{ margin-top:22px; flex-wrap:wrap; }

  /* le texte de révélation prend la hauteur qu'il lui faut, au-dessus de
     l'indicateur de scroll et du bouton son */
  .reveal-banner{
    height:auto;
    padding:40px 28px 84px;
    background:linear-gradient(0deg, rgba(22,32,43,0.88) 0%, rgba(22,32,43,0.7) 60%, rgba(22,32,43,0) 100%);
  }
}

@media (max-width:520px){
  .video-hero-panel{ padding:22px 20px 24px; }
  .video-hero-side{ padding-top:12px; }
  .video-hero-side p{ font-size:14px; line-height:1.6; }
  .video-hero-actions{ gap:10px; margin-top:20px; }
  .video-hero-footer{ padding:0 20px 18px; }
  .sound-toggle{ right:20px; font-size:10px; }
  .reveal-banner{ padding:36px 20px 78px; }
  .reveal-inner{ max-width:none; }
  .reveal-banner p{ font-size:13.5px; }
}