/* ============================================================
   presentation-hero.css
   Nouveau hero video de /presentation (chantier en cours, 2026-08-09).
   5 panneaux plein ecran empiles (video1 a video5), un seul visible a
   la fois (.is-active), bascule pilotee entierement par
   presentation-hero.js (pas de scroll natif : le scroll de la page est
   intercepte tant que la sequence n'est pas terminee). Fichier dedie,
   separe de presentation.css qui garde uniquement le header (le footer
   a ete retire de la page, ses liens legaux vivent desormais dans
   .hero-panel-legal sur le dernier panneau, voir plus bas).
   ============================================================ */

@import url('variable.css');

/* Ascenseur masque uniquement sur /presentation : ce fichier n'est
   charge que par cette page, donc html/body ici ne touche aucune autre
   page du site. Le scroll reste totalement fonctionnel (wheel, touch,
   clavier, scrollTo en JS), seule la barre visible est retiree. */
html,
body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* Hauteur = 100vh moins la nav noire (50px, cf. "nav { height: 50px; }"
   dans presentation.css) : sans cette soustraction, header (50px) +
   hero (100vh) depassaient d'un viewport, le scroll natif rendu une
   fois sequenceFinished revelait alors une bande de fond noir vide
   sous la video/les liens legaux (signale le 2026-08-09). */
.hero-sequence {
  position: relative;
  height: calc(100vh - 50px);
  overflow: hidden;
  background: #000;
}

.hero-panel {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

.hero-panel.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-panel-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 1.8s ease-out;
}

/* Les rushs sources ont des bandes noires "cinema" incrustees dans
   l'image (pas un probleme de ratio de conteneur : les 4 videos font
   1924x1076). Elles servent de raccord voulu entre les plans (fin de
   video1 ~2.8% = debut de video2 ~2.8%, fin de video3 ~8% = debut de
   video4 ~8%), donc invisibles en cours de sequence. Seule la toute
   derniere frame de video4 (panneau final, figee en fin de sequence)
   pose probleme : il n'y a pas de plan suivant pour absorber la
   transition, les bandes (~5.7% mesures) restent visibles et mangent
   dans le header noir au-dessus (signale le 2026-08-09). Applique
   uniquement sur ce panneau via JS au moment ou il se fige (voir
   presentation-hero.js, classe ajoutee dans le onEnded du dernier
   panneau) : scale(1.18) suffit largement a repousser les bandes hors
   du cadre visible (calcul : bar 5.7% => besoin de x1.13 minimum). */
.hero-panel-media--zoom-end {
  transform: scale(1.18);
}

/* Degrade en bas a gauche pour garantir la lisibilite du texte quelle
   que soit la luminosite de la frame de video affichee derriere. */
.hero-panel-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 42%, rgba(0, 0, 0, 0) 68%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.12) 32%, rgba(0, 0, 0, 0) 58%);
  pointer-events: none;
}

/* Largeur volontairement bornee a une fourchette 40-50% du viewport
   (demande explicite du 2026-08-09, texte retravaille pour etre plus
   court/impactant) : min(48%, 680px) donne ~48% sur les ecrans courants
   sans laisser le bloc s'etirer demesurement sur les tres grands
   ecrans (2K/4K), ou 48% deviendrait un bloc bien trop large pour 1-3
   courtes phrases. Voir le media query plus bas pour le comportement
   mobile (le bloc doit au contraire occuper PLUS de largeur). */
.hero-panel-text {
  position: absolute;
  left: 6%;
  right: 5%;
  top: 50%;
  max-width: min(48%, 680px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  opacity: 0;
  transform: translateY(calc(-50% + 18px));
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
}

.hero-panel-text.is-visible {
  opacity: 1;
  transform: translateY(-50%);
}

.hero-panel-title {
  font-family: 'elnath';
  font-weight: 400;
  font-size: clamp(48px, 9vw, 130px);
  line-height: 0.95;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
}

.hero-panel-subtitle {
  font-family: 'oxanium', sans-serif;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.5;
  color: #f2f2f2;
  margin: 0;
  /* Ombre douce systematique : garantit la lisibilite sur n'importe
     quelle frame video (claire ou sombre) sans avoir besoin d'un fond
     opaque derriere le texte — demande explicite du 2026-08-09
     ("pas de grosse card opaque... rendu integre directement dans
     l'image"). */
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.85);
  /* Neutralise la regle globale "p { opacity:0; transform:translateY(20px); }"
     de presentation.css (ligne ~918), heritee de l'ancien fade-in au
     scroll de presentation.js (plus charge sur cette page, cf. etape 2
     du chantier). Sans ce reset, tout <p> reste bloque a opacity:0 en
     permanence : c'etait la cause reelle du "texte invisible" — le
     fade est deja gere par le parent .hero-panel-text/.hero-panel-legal
     a, pas par le <p> lui-meme. */
  opacity: 1;
  transform: none;
  transition: none;
}

/* Hierarchie typographique a 2 niveaux (demande du 2026-08-09) :
   ".hero-panel-lead" pour les phrases d'intro/ouverture (registre
   neutre, un ton plus discret), ".hero-panel-punch" pour la phrase qui
   porte le message principal de chaque panneau (plus grande, plus
   grasse, blanc pur) — evite l'effet "mur de texte uniforme" en
   donnant un vrai point focal par panneau. Modificateurs combines a
   .hero-panel-subtitle, n'en remplacent aucune propriete de base
   (famille de police, ombre, reset d'opacite...). */
.hero-panel-lead {
  font-size: clamp(15px, 1.5vw, 18px);
  color: rgba(242, 242, 242, 0.82);
}

.hero-panel-punch {
  font-size: clamp(21px, 2.7vw, 30px);
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}

/* Leger halo chaud sur les valeurs mises en avant (.orange), pour
   qu'elles ressortent sans etre criardes — demande explicite. Scope a
   .hero-panel-text pour ne pas affecter les usages de .orange ailleurs
   sur le site (regle definie globalement dans presentation.css). */
.hero-panel-text .orange {
  text-shadow: 0 0 20px rgba(255, 165, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* Liens legaux (ex-footer, retire du bas de page le 2026-08-09 : jugé
   "moche"). Vit uniquement dans le dernier panneau, apparait en fade en
   meme temps que son texte (piloté par presentation-hero.js), pose en
   bas de l'ecran par-dessus la video. Inscription/Connexion ne sont PAS
   repetes ici : ils restent uniquement dans le header. */
.hero-panel-legal {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 3%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.hero-panel-legal.is-visible {
  opacity: 1;
}

.hero-panel-legal a {
  font-family: 'oxanium', sans-serif;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.hero-panel-legal a:hover,
.hero-panel-legal a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .hero-panel-text,
  .hero-panel-legal {
    transition: none;
  }
}

@media (max-width: 700px) {
  .hero-panel-text {
    left: 6%;
    right: 6%;
    /* Sur mobile le plafond desktop (40-50% du viewport) est retire :
       le bloc doit au contraire occuper toute la largeur disponible
       entre les marges left/right ci-dessus (~88% du viewport), sinon
       le texte retravaille (plus de hierarchie, phrases "punch" plus
       grandes) se retrouverait etrangle dans une colonne trop etroite. */
    max-width: none;
  }

  .hero-panel-punch {
    font-size: clamp(19px, 5.5vw, 24px);
  }

  .hero-panel-legal {
    left: 6%;
    right: 6%;
    bottom: 2%;
    gap: 8px 18px;
  }
}