/* ================================================================
   HERO — v3 : vidéo plein écran + typographie en overlay blanc
   ================================================================
   Toute la première fenêtre = la vidéo (100vh, bord à bord).
   La typo est posée par-dessus, en blanc, avec un voile sombre
   dégradé pour garantir la lisibilité.
   ================================================================ */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;          /* garde-fou sur petits écrans en hauteur */
  overflow: hidden;

  color: #FFFFFF;              /* tout le texte du hero est blanc par défaut */
}


/* ---------- VIDÉO DE FOND ---------- */

.hero__video {
  position: absolute;
  inset: 0;                    /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;           /* remplit sans déformer */
  z-index: 0;
}


/* ---------- VOILE DE LISIBILITÉ ----------
   Dégradé sombre en bas (où se pose le nom) et léger en haut
   (pour la nav). Pensé pour rester discret sur les zones claires
   de la vidéo et appuyer là où le texte est posé.
   ----------------------------------------- */

.hero__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0)    18%,
      rgba(0, 0, 0, 0)    45%,
      rgba(0, 0, 0, 0.55) 100%
    );
}


/* ---------- CONTENU TEXTUEL ----------
   Empilement vertical, collé au bas de l'écran.
   ------------------------------------- */

.hero__contenu {
  position: relative;
  z-index: 2;

  height: 100%;
  padding: var(--espace-l) var(--padding-cote);

  display: flex;
  flex-direction: column;
  justify-content: flex-end;    /* tout en bas */
}


/* LABEL discret en haut-gauche (position absolue) */

.hero__label {
  position: absolute;
  top: var(--espace-l);
  left: var(--padding-cote);

  font-family: var(--typo-corps);
  font-size: var(--taille-xs);
  font-variation-settings: 'wght' 500, 'wdth' 100;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.75);

  display: flex;
  align-items: center;
  gap: var(--espace-s);
}

.hero__label::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.6);
}


/* LOGO CENTRAL — V SVG plein écran centré en overlay */

/* NOM — Fraunces Bold romain, XXL, hiérarchie forte */

.hero__nom {
  font-family: var(--typo-titre);
  font-weight: 700;
  font-style: normal;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(84px, 16vw, 280px);
  line-height: 0.78;
  letter-spacing: -0.04em;

  margin: 0 0 var(--espace-m) 0;
  color: #FFFFFF;
}

.hero__nom-ligne {
  display: block;
  overflow: hidden;
}

.hero__nom-mot {
  display: inline-block;
  will-change: transform;
}


/* RÔLE — ligne compacte en bas */

.hero__role {
  font-family: var(--typo-corps);
  font-size: var(--taille-m);
  font-variation-settings: 'wght' 400, 'wdth' 100;
  line-height: 1.45;

  max-width: 560px;
  margin: 0 0 var(--espace-l) 0;
  color: rgba(255, 255, 255, 0.85);
}

.hero__role em {
  font-family: var(--typo-titre);
  font-style: italic;
  font-variation-settings: 'opsz' 24, 'SOFT' 50, 'WONK' 0;
  font-weight: 500;
  color: #FFFFFF;
}


/* PIED du hero : juste l'indicateur de scroll, sans mention agence */

.hero__pied {
  display: flex;
  justify-content: flex-end;    /* scroll indicator poussé à droite */
  align-items: center;

  padding-top: var(--espace-s);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.hero__scroll {
  font-family: var(--typo-corps);
  font-size: var(--taille-xs);
  font-variation-settings: 'wght' 500, 'wdth' 100;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.85);

  display: flex;
  align-items: center;
  gap: var(--espace-xs);

  animation: pulsation-hero 2.4s var(--ease-doux) infinite;
}

@keyframes pulsation-hero {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(4px); }
}


/* CRÉDIT du projet diffusé — signature en bas à gauche */

.hero__visuel-credit {
  position: absolute;
  bottom: var(--espace-l);
  left: var(--padding-cote);
  z-index: 2;

  font-family: var(--typo-corps);
  font-size: var(--taille-xs);
  font-variation-settings: 'wght' 500, 'wdth' 100;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.01em;
  text-transform: none;

  display: flex;
  align-items: center;
  gap: var(--espace-xs);
}

.hero__visuel-credit::before {
  content: '';
  width: 6px;
  height: 6px;
  background-color: var(--couleur-accent);
  border-radius: 50%;
  display: inline-block;
}


/* ---------- RESPONSIVE ----------
   Le layout est déjà full-bleed ; on ajuste juste les tailles de typo
   et on évite que le crédit chevauche le scroll indicator.
   ------------------------------- */

@media (max-width: 640px) {
  .hero__nom {
    font-size: clamp(64px, 18vw, 140px);
  }

  .hero__role {
    font-size: var(--taille-base);
  }

  .hero__visuel-credit {
    bottom: var(--espace-m);
  }
}