/* ==========================================================================
   hero.css — média pleine largeur, texte en surimpression contenu dans
   .container (audit-stanford/scroll-mechanics-v2.md : chez Stanford, le
   hero est une vidéo bord à bord du viewport, avec le texte posé dessus en
   bas-gauche — mesuré à 1485×742.5px à 1500px de viewport, soit un ratio
   2/1 exact, et bord à bord aussi bien en desktop qu'en mobile). Seul le
   média sort de .container ; le texte y reste (partie A du prompt).
   ========================================================================== */

.hero {
  background-color: var(--black);
}

/* --------------------------------------------------------------------------
   Média pleine largeur (voir .full-bleed dans components.css) — ratio
   2/1 mesuré en direct chez Stanford à 1500px de viewport. Conteneur de
   référence pour le voile et le texte en surimpression ci-dessous : sa
   hauteur vient uniquement de aspect-ratio (déterministe), contrairement à
   .hero dont la hauteur automatique ne doit pas dépendre d'un enfant en
   position absolute (sinon la boîte inset:0 se met à mesurer le contenu
   du texte plutôt que le cadre du média — bogue rencontré et corrigé ici).
   -------------------------------------------------------------------------- */
.hero__media-frame {
  position: relative;
  aspect-ratio: 2 / 1;
  background-color: var(--light-grey);
}

/* Rogne la vidéo (object-fit: cover) sans rogner le texte en surimpression,
   qui est un enfant séparé de .hero__media-frame, pas de ce conteneur. */
.hero__media-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__video {
  /* position: relative pour peindre au-dessus du repli, qui est en
     position: absolute (les éléments positionnés passent toujours devant
     les éléments non positionnés, quel que soit l'ordre du DOM). */
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position par défaut (50% 50%) ne montrait que de l'eau : la
     source (1080×1920, portrait) place la proue du navire dans son
     dernier tiers vertical (~y=68-100%). Vérifié en extrayant des frames
     de la vidéo et en simulant le recadrage cover à plusieurs valeurs
     (audit-stanford/geometrie.md, partie C) : 80% amène nettement le
     navire dans le cadre sans couper le mât. */
  object-position: 50% 80%;
  background-color: transparent;
}

/* Repli visible tant que la vidéo et le poster sont absents */
.hero__media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--light-grey);
  color: var(--cool-grey);
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
}

/* Voile en dégradé pour garder le texte lisible sur une vidéo claire —
   Stanford compte sur la tonalité sombre de sa propre vidéo ; la nôtre n'a
   pas cette garantie, d'où ce complément assumé. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Texte en surimpression, ancré en bas-gauche — reste dans .container
   -------------------------------------------------------------------------- */
.hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(2rem, 5vw, 4rem);
  pointer-events: none;
}

.hero__content {
  max-width: 44rem;
  pointer-events: auto;
}

.hero__eyebrow {
  margin-bottom: 1.25rem;
  color: var(--white);
}

.hero__title {
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  color: var(--white);
}

.hero__lead {
  max-width: 44ch;
  margin-bottom: 2.25rem;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: rgba(255, 255, 255, 0.85);
}

.hero__cta {
  color: var(--white);
}

.hero__cta:focus-visible {
  outline-color: var(--white);
}

/* --------------------------------------------------------------------------
   Légende — hors du média, sous forme de crédit photo classique
   -------------------------------------------------------------------------- */
.hero__caption {
  padding-block: 0.9rem;
  color: var(--cool-grey);
  background-color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   États initiaux d'animation — uniquement si JS est disponible
   Ne concerne que le bloc texte : le média est visible dès le premier rendu,
   sans aucune animation (voir hero.js).
   -------------------------------------------------------------------------- */
.js .hero [data-hero-anim] {
  opacity: 0;
}

/* Repli si GSAP n'est pas chargé : hero.js pose .is-ready */
.js .hero.is-ready [data-hero-anim] {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .hero__media-frame {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 599px) {
  .hero__media-frame {
    aspect-ratio: 3 / 4;
  }
}

/* Filet de sécurité : si le texte (plus long que le sous-titre unique de
   Stanford) dépasse la hauteur du média sur un petit écran, on garantit
   assez de hauteur pour ne jamais laisser le texte clair déborder sur le
   fond blanc de la page sous le voile sombre. */
@media (max-width: 1023px) {
  .hero__media-frame {
    min-height: 32rem;
  }
}

/* --------------------------------------------------------------------------
   Mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Aucune animation d'entrée : le hero est visible dès le premier rendu.
     Sa visibilité ne dépend alors ni de GSAP ni d'une transition. */
  .js .hero [data-hero-anim] {
    opacity: 1;
  }
}

/* Si la vidéo ET son poster sont introuvables (media.js sonde le poster),
   on retire l'élément vidéo pour laisser le repli visible. */
.hero__media-frame.has-no-media .hero__video {
  display: none;
}