/* =============================================================
   BLOC hero_home — Hero d'ouverture de la home (animation sticky)
   Port fidèle de la maquette 2026-06-10 (style.css 835-1453 + responsive).
   Dépendances communes (NE PAS redéfinir ici) :
   - variables :root, .wrap, .section-num, .mission-line / __phrase / __wipe / em
     → common.css
   - .btn / .btn-shape / .btn--primary / .btn--ghost-light → components.css

   Note archi K2 : sur la home, ce bloc ouvre la .bg-fade-zone (fondu bleu nuit
   → bleu Master sur hero+mission+newalpha, cf. components.css + scroll-engine.js).
   Le fond solide ci-dessous est le FALLBACK hors-zone (bloc isolé) : il est
   neutralisé dans .bg-fade-zone pour laisser passer le fondu.
   ============================================================= */

/* ========== HERO WRAPPER (sticky 380vh : tout en parallèle) ========== */
.hero-wrapper {
  position: relative;
  width: 100%;
  height: 380vh;
  background: var(--c-bg-deep);   /* fallback hors-zone ; neutralisé dans .bg-fade-zone */
}

/* ========== HERO — split pleine hauteur 50/50 (sticky) ========== */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100vh;
  height: 100svh;
  background: transparent;        /* laisse voir le fond du .hero-wrapper */
  color: #fff;
  overflow: hidden;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* Côté gauche : conteneur de la cell du grid hero. Reçoit le transform JS
   d'animation (slide-in au load + slide-out au scroll). PAS de padding ici :
   le padding --gutter est sur .hero__text-inner pour que le titre reste
   TOUJOURS à --gutter du bord, indépendamment du transform appliqué. */
.hero__text {
  display: flex;
  align-items: stretch;
}
.hero__text-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  padding: 0 var(--gutter);
  width: 100%;
}
.hero .section-num { color: var(--c-copper); margin-bottom: 0; }

/* ===== Titre hero : S fixe + suffix vertical (tay/cale) + split-flap ===== */
.hero__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6.4vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 0;
  white-space: nowrap;
  width: 100%;
  height: 1.4em;
  min-height: 1.4em;
}

.hero__s,
.hero__space {
  display: inline-block;
  line-height: 1;
  flex-shrink: 0;
}
.hero__s { color: #fff; }
.hero__space { width: 0.25em; }

.hero__typed {
  display: inline-block;
  line-height: 1;
  flex-shrink: 0;
  min-width: 6.5em;
  text-align: left;
  white-space: nowrap;
}

/* SUFFIX : largeur MESURÉE en JS selon le mot actif (hero-home.js), hauteur FIXE
   à 1em pour stabilité de la baseline. La valeur em ci-dessous n'est qu'un
   fallback avant la 1ère mesure JS. */
.hero__suffix {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  flex-shrink: 0;
  width: 1.55em;            /* fallback avant mesure JS */
  height: 1em;
  line-height: 1;
  overflow: visible;
}

.hero__suffix-word {
  position: absolute;
  left: 0;
  bottom: 0;
  white-space: nowrap;
  color: #fff;
  line-height: 1;
  will-change: transform, opacity;
  transition: transform 0.7s cubic-bezier(0.65, 0.05, 0, 1),
              opacity 0.5s cubic-bezier(0.65, 0.05, 0, 1);
}
.hero__suffix-word.is-active {
  transform: translateY(0);
  opacity: 1;
}
.hero__suffix-word[data-suffix="0"]:not(.is-active) {
  transform: translateY(-100%);
  opacity: 0;
}
.hero__suffix-word[data-suffix="1"]:not(.is-active) {
  transform: translateY(100%);
  opacity: 0;
}

/* Split-flap (panneau aéroport) : chaque caractère défile rapidement
   avant de se fixer sur la bonne lettre. */
.hero__typed {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--c-copper);
  letter-spacing: -0.01em;
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
  transition: opacity 0.45s var(--ease);
}
.hero__typed.is-fading { opacity: 0; }
.hero__typed .flap {
  display: inline-block;
  position: relative;
  line-height: 1.05;
}
.hero__typed .flap.is-rolling {
  filter: blur(0.5px);
}

/* Accroche principale agrandie. max-width 36ch pour que chacune des 2 phrases
   tienne sur 1 ligne propre via le <br>. */
.hero__sub {
  font-size: 2.2em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  max-width: 36ch;
  line-height: 1.15;
}
.hero__hook {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.55rem);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.4;
  max-width: 38ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

/* Côté droit : zone vidéo plein hauteur, mask bottom-left arrondi */
.hero__media {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero__video-mask {
  background: var(--c-bg-deep);   /* bleu nuit → invisible pendant le chargement */
  overflow: hidden;
  /* position, taille et radius pilotés par JS au scroll (toujours fixed). */
}
.hero__video-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Surchargé par JS : taille = taille initiale, position = -delta du mask */
}
.hero__video-inner iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 177.78vh;          /* 16/9 × 100vh pour couvrir toute la hauteur */
  min-width: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

/* Forme cuivre INDÉPENDANTE de la vidéo : rétrécit + se centre au scroll,
   garde le coin bottom-left arrondi, devient le carré HAUT-DROITE du sigle. */
.hero__white-shape {
  position: fixed;
  background: var(--c-copper);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  will-change: width, height, top, left, border-radius, opacity;
}

/* Pilote l'animation hero via --hero-progress (0 → 1) sur .hero */
.hero[data-hero] {
  --hero-progress: 0;
}
.hero[data-hero] .hero__text {
  will-change: transform, opacity;
  transition: none;
}

/* ========== SVG SIGLE animé au scroll ========== */
.hero-sigle {
  position: fixed;
  top: 0; left: 0;
  width: 0;            /* taille 0 par défaut → JS la dimensionne au 1er scroll */
  height: 0;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}
.hero-sigle [data-shape="bl"],
.hero-sigle [data-shape="bar"],
.hero-sigle [data-text] {
  opacity: 0;
}
.hero-sigle [data-shape] {
  transform-box: fill-box;
  transform-origin: center;
  transform: translate3d(0, 0, 0) scale(1);
  fill: #fff;
}

/* ========== SECTION MISSION (intégrée dans le hero, fond bleu nuit) ========== */
.hero__mission {
  position: absolute;
  inset: 0;
  z-index: 6;
  padding: calc(var(--header-h, 80px) + 16px) clamp(20px, 5vw, 60px) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--mission-stack-gap, clamp(48px, 7.5vh, 120px));
  color: #fff;
  opacity: 0;
  pointer-events: none;
}
.mission__num {
  text-align: center;
  margin-bottom: calc(6px * var(--mission-scale, 1));
  font-size: max(0.65rem, calc(0.75rem * var(--mission-scale, 1)));
  opacity: 0;
  transform: translateY(-20px);
}
.mission__logo-spacer {
  display: block;
  width: 100%;
  height: max(72px, calc(110px * var(--mission-scale, 1)));
  flex-shrink: 0;
}
.mission__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: max(26px, calc(60px * var(--mission-scale, 1)));
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #fff;
  max-width: min(95vw, 1400px);
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* =================== RESPONSIVE (≤ 1024px) =================== */
@media (max-width: 1024px) {
  /* Zone de scroll du hero mobile + tablette : 480vh. */
  .hero-wrapper { height: 480vh; }

  /* Hero mobile : passe en colonne, vidéo EN HAUT, texte EN BAS.
     Sans ce stacking, le grid reste 1fr 1fr et le .hero__text (centré sur
     toute la hauteur) se retrouve SOUS la vidéo fixed (top ~55vh) → titre
     illisible. Le min-height 100svh suffit à sticky (hero-wrapper = 480vh). */
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;   /* média = sa hauteur propre, texte = le reste */
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }
  /* Inversion de l'ordre : la vidéo (media) passe en haut, le texte en bas.
     min-height ↓ = vidéo moins haute ; doit rester cohérent avec trInitH_M
     dans hero-home.js (fraction de la hauteur d'écran). */
  .hero__media { order: -1; min-height: 40svh; }
  .hero__text  { order: 0; }
  /* Bloc texte collé sous la vidéo (aligné en haut de sa rangée, pas centré) :
     supprime le grand vide vidéo↔texte et éloigne les CTA du hamburger. */
  .hero__text-inner {
    justify-content: flex-start;
    padding: clamp(20px, 3vh, 36px) var(--gutter) 32px;
  }
  /* CTA côte à côte sur une ligne (2 boutons, ~50% chacun) ; le texte wrappe
     sur 2 lignes pour réduire la largeur. */
  .hero__cta {
    flex-wrap: nowrap;
    gap: 10px;
    align-items: stretch;
  }
  .hero__cta .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    align-items: center;
    padding-left: clamp(10px, 2vw, 18px);
    padding-right: clamp(10px, 2vw, 18px);
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    font-size: 0.72rem;
  }
  .hero__cta .btn .arrow { flex-shrink: 0; }
  .hero__video-mask { border-bottom-left-radius: clamp(120px, 22vh, 200px); }

  /* .mission-line en mobile : on autorise le wrapping du texte. */
  .hero__mission .mission-line {
    height: auto;
    min-height: 1.18em;
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
  .hero__mission .mission-line__phrase {
    white-space: normal;
    text-align: center;
  }
  .hero__mission .mission__title {
    font-size: clamp(22px, 6.5vw, 36px);
  }

  /* Layout .hero__mission mobile : flex-start + padding-top généreux. */
  .hero__mission {
    justify-content: flex-start;
    padding-top: calc(var(--header-h, 64px) + clamp(20px, 5vh, 48px));
    padding-bottom: clamp(32px, 6vh, 64px);
    gap: clamp(16px, 3vh, 32px);
  }
  .hero__mission .mission__logo-spacer {
    height: clamp(88px, 18vh, 120px);
  }
}

/* =================== RESPONSIVE (≤ 600px) =================== */
@media (max-width: 600px) {
  .hero__sub {
    font-size: clamp(1.1rem, 5.5vw, 1.5rem);
    max-width: 100%;
  }
  .hero__typed {
    min-width: auto;
    max-width: 100%;
  }
  .hero__title {
    white-space: normal;
    height: auto;
    min-height: 1.4em;
  }
  .hero__text-inner {
    gap: 18px;
  }
}