/* =====================================================
   ======================= Hero ========================
   ===================================================== */
.hero {
  position: relative;

  /*
   * L'accueil remplit tout l'espace restant jusqu'au pied de page.
   * Cela évite qu'une bande du fond du body apparaisse sous le hero
   * lorsque son contenu est plus court que la hauteur disponible.
   */
  flex: 1 0 auto;
  width: 100%;
  min-height: 82vh;

  display: grid;
  place-items: center;
  padding: 80px 16px 40px;
  isolation: isolate;
  overflow: hidden;

  /*
   * Fond d'accueil continu.
   *
   * Les halos sont calculés sur toute la hauteur réelle du .hero :
   * il n'y a donc ni image répétée, ni bloc de 40 % qui s'arrête
   * au milieu de la page, ni raccord visible lorsque l'accueil grandit.
   *
   * La dernière couleur (#f5fffa) est la même que --bg afin que
   * la transition vers le reste du site soit imperceptible.
   */
  background:
    radial-gradient(
      ellipse 78% 54% at 10% 8%,
      rgba(0, 210, 255, .14) 0%,
      rgba(0, 210, 255, .065) 34%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 70% 48% at 92% 18%,
      rgba(58, 123, 213, .105) 0%,
      rgba(58, 123, 213, .045) 36%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 88% 52% at 48% 92%,
      rgba(25, 198, 209, .07) 0%,
      rgba(25, 198, 209, .025) 42%,
      transparent 74%
    ),
    linear-gradient(
      180deg,
      #fbfffe 0%,
      #f8fffd 34%,
      #f6fffc 68%,
      #f5fffa 100%
    );

  background-repeat: no-repeat;
  background-color: #f5fffa;
}

.hero-content {
  max-width: 880px;
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 28px 24px;
  position: relative;
}

.hero-title {
  margin: 0 0 8px;
  font-size: clamp(2rem, 4vw, 3rem);

  /* Dégradé historique du thème clair : turquoise -> bleu. */
  background: linear-gradient(135deg, var(--turq-a), var(--turq-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /*
   * Le texte reste totalement immobile.
   * Seul un halo très léger respire autour des lettres.
   */
  --hero-title-halo-rgb: 0, 210, 255;
  animation: heroTitleHalo 7.5s ease-in-out infinite;
}

@keyframes heroTitleHalo {
  0%,
  34%,
  100% {
    filter:
      drop-shadow(0 0 1px rgba(var(--hero-title-halo-rgb), .05))
      drop-shadow(0 0 5px rgba(var(--hero-title-halo-rgb), .025));
  }

  43% {
    filter:
      drop-shadow(0 0 2px rgba(var(--hero-title-halo-rgb), .11))
      drop-shadow(0 0 7px rgba(var(--hero-title-halo-rgb), .055));
  }

  48% {
    filter:
      drop-shadow(0 0 2.5px rgba(var(--hero-title-halo-rgb), .16))
      drop-shadow(0 0 10px rgba(var(--hero-title-halo-rgb), .075));
  }

  54% {
    filter:
      drop-shadow(0 0 2px rgba(var(--hero-title-halo-rgb), .09))
      drop-shadow(0 0 7px rgba(var(--hero-title-halo-rgb), .045));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title {
    animation: none;
    filter:
      drop-shadow(0 0 2px rgba(var(--hero-title-halo-rgb), .07));
  }
}

.hero-lead {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: var(--muted);
}

.hint {
  margin-top: 14px;
  font-size: 0.95rem;
  color: #64748b;
}

/* =====================================================
   =================== Encadré Humeur ===================
   ===================================================== */
.encadre-humeur {
  margin: 1.2rem auto 0;
  margin-top: 35px;
  max-width: 70%;
  background: linear-gradient(135deg, #84e8f5 0%, #39e3fa 100%);
  backdrop-filter: blur(12px);
  border: 1.5px solid var(--accent);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(24, 240, 255, 0.18),
              0 2px 8px rgba(58, 123, 213, 0.12);
  padding: 1.3rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  justify-content: center;
  font-size: 1.18rem;
  color: #505050;
  animation: humeurPulse 2.5s infinite alternate;
  position: relative;
  overflow: hidden;
}

.emoji-humeur-badge {
  width: 2.7rem;
  height: 2.7rem;
  background: linear-gradient(135deg, #e0f7fa 0%, #ffffff 100%);
  border-radius: 50%;
  font-size: 1.7rem;
  border: 3px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px #595aff22;
  flex-shrink: 0;
  animation: emojiBounce 2.5s infinite alternate;
}

.texte-humeur {
  flex: 1;
  text-align: center;
  z-index: 1;
  white-space: pre-line;
}

.is-hidden {
  display: none;
}

/* =====================================================
   ====================== Parallax ======================
   ===================================================== */
.parallax-layer {
  /*
   * Les anciens calques ne couvraient que 40 % du hero et pouvaient
   * donner l'impression de "morceaux" raccordés entre eux.
   *
   * Le fond est désormais porté directement par .hero.
   * On conserve les éléments dans le HTML pour ne rien casser côté JS,
   * mais ils ne sont plus peints.
   */
  display: none;
}

/* Priorité intentionnelle : classe utilitaire de masquage. */
.is-hidden { display: none !important; }