/* ==========================================================================
   Page d'accueil — section Hero
   Styles spécifiques à index.html uniquement.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--header-h) + 24px) var(--gutter) 64px;
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6.1vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-wrap: balance;
}

.hero__subtitle {
  max-width: var(--measure-subtitle);
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--color-text-soft);
  text-wrap: pretty;
}

.hero__badge {
  margin-top: 8px;
}

.hero__cta {
  margin-top: 4px;
}

/* --- Titre lettre par lettre ---
   Quand main.js a découpé le titre (classe .is-split sur le H1), chaque lettre
   est un .char animé en cascade. Le .reveal--1 du fallback est alors neutralisé
   pour éviter de doubler l'animation. Sans JS, le titre garde le reveal bloc. */
.hero__title.is-split {
  opacity: 1;
  transform: none;
  animation: none;
}

/* Chaque mot reste atomique : il ne se coupe jamais au milieu. */
.hero__title .word {
  display: inline-block;
}

.hero__title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em) rotateX(40deg);
  transform-origin: 50% 100%;
  animation: char-in 0.7s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 0.028s + 0.1s);
}

@keyframes char-in {
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Entrée animée au chargement --- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: reveal-up 0.9s var(--ease) forwards;
}

.reveal--1 { animation-delay: 0.05s; }
.reveal--2 { animation-delay: 0.18s; }
.reveal--3 { animation-delay: 0.30s; }
.reveal--4 { animation-delay: 0.42s; }

@keyframes reveal-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablette */
@media (max-width: 900px) {
  :root {
    --gutter: 32px;
  }

  .hero__inner {
    gap: 24px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  :root {
    --gutter: 20px;
  }

  .logo__word {
    font-size: 18px;
  }

  .menu-toggle {
    padding: 10px 16px;
  }

  .hero {
    padding-bottom: 48px;
  }

  .hero__title {
    font-size: clamp(2.1rem, 10vw, 3rem);
  }

  .btn-cta {
    width: 100%;
    max-width: 320px;
  }
}