/* =========================
   HOME — styles principaux
   ========================= */

/* Fond de page blanc */
body {
  background: #ffffff;
  color: var(--panel-fg, #111);
}

/* Wrapper pour garder un espace SOUS l’ensemble sans casser le :hover adjacent
   (la barre + panneau déroulant est dans bluebar.css ; on garde juste l’enveloppe ici) */
.band-and-panel {
  position: relative;
  width: 100%;
  margin-top: 1.25rem;
  padding-bottom: 1rem; /* espace sous le duo bande+panneau */
}

/* =========================
   HERO pleine hauteur
   ========================= */


/* Le conteneur du hero prend toute la hauteur visible (moins la nav) */
.hero-wrap{
  position: relative;
  min-height: calc(100vh - var(--nav-h, 72px));
  display: flex;
  align-items: center;     /* centre l’image verticalement */
  justify-content: center; /* centre horizontalement via la figure */
  padding-top: var(--nav-h, 72px);  /* démarre sous la nav fixe */
  box-sizing: border-box;
}

/* Unités dynamiques (mobile) */
@supports (height: 100dvh){
  .hero-wrap{ min-height: calc(100dvh - var(--nav-h, 72px)); }
}

/* Figure du hero (centrée) */
.home-hero-figure{
  margin: 0 auto .25rem auto;
  max-width: 100%;
  text-align: center;
}

/* Image du hero (centrée, largeur contrôlée) */
.home-hero-figure img{
  width: 70vw;                 /* ajuste si besoin : 50–70vw */
  max-width: 100%;
  margin: 0 auto .25rem auto;  /* plus de margin-top : géré par .hero-wrap */
  height: auto;
  display: block;
}

.home-hero-figure figcaption {
  font-size: .9rem;
  opacity: .85;
  padding: .25rem 0;
}

/* Le “SCROLL” / indicateur glitch en bas de l’écran tant qu’on n’a pas scrollé */
.hero-wrap .hero-container{
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 2.5vh, 24px); /* léger espace du bord */
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 9;
}

/* Titre glitch réduit */
.hero-wrap .hero{
  position: relative;
  font-size: clamp(20px, 3vw, 40px) !important; /* moitié de 40–80px */
  letter-spacing: 0.08rem;
}

/* Ajuste un peu le décalage des couches pour garder un joli glitch à petite taille */
.hero-wrap .hero.layers::before { top: 6px; left: 8px; }
.hero-wrap .hero.layers::after  { top: 3px; left: -6px; }

/* Optionnel: un peu plus d’espace sous l’image sur mobile */
@media (max-width: 640px){
  .home-hero-figure img{ width: 80vw; } /* un poil plus large sur mobile */
}

/* =========================
   Accessibilité
   ========================= */
/* On NE coupe PAS les animations du panneau ici.
   On désactive uniquement les effets glitch pour les personnes sensibles. */
@media (prefers-reduced-motion: reduce) {
  .glitch,
  .layers::before,
  .layers::after {
    animation: none !important;
    transition: none !important;
  }
}