/* ============================================================
   PIXEL ÉTINCELLE — SCROLLYTELLING PLEIN ÉCRAN
   Le fond occupe tout le viewport et change en fondu continu au
   fil du scroll (section pinnée). Le texte flotte dans un panneau
   vitré translucide : l'image reste visible en transparence.
   Sur mobile : empilement simple, un fond plein écran par étape.
   ============================================================ */

.scrolly {
  position: relative;
  background: var(--bg-primary);
}

.scrolly-pin {
  position: relative;
  height: 100dvh;
  overflow: hidden;
}

.scrolly-bg-layer { position: absolute; inset: 0; z-index: 0; }
.scrolly-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: opacity;
  transition: opacity 1s ease;
}
.scrolly-bg.is-active { opacity: 1; }

/* Halo sombre sur toute la hauteur — plus prononcé sur les bords, mais
   jamais transparent au centre : le texte doit rester lisible sur
   n'importe quelle photo de fond, claire ou saturée. */
.scrolly-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,8,14,.8) 0%, rgba(8,8,14,.48) 32%, rgba(8,8,14,.55) 68%, rgba(8,8,14,.88) 100%);
}

.scrolly-progress {
  position: absolute; top: var(--space-8); right: var(--gutter); z-index: 3;
  font-family: var(--font-title); font-size: var(--fs-sm); letter-spacing: .12em;
  color: rgba(255,255,255,.7); text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

.scrolly-content {
  position: relative; z-index: 2;
  height: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
}

.scrolly-panel {
  grid-area: 1 / 1;
  align-self: center;
  max-width: 620px;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.scrolly-panel.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Panneau vitré translucide : l'image du fond reste visible au travers. */
.scrolly-glass {
  background: rgba(19, 19, 32, 0.42);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  padding: 50px;
}

@media (max-width: 900px) {
  .scrolly-glass { padding: 20px; }
}

.scrolly-panel-hero .hero-title { font-size: var(--fs-5xl); margin-bottom: var(--space-6); text-shadow: 0 4px 20px rgba(0,0,0,.4); }
.scrolly-panel-hero .hero-sub { font-size: var(--fs-lg); color: rgba(255,255,255,.85); }

.scrolly-panel h3 { font-size: var(--fs-3xl); margin-bottom: var(--space-4); text-shadow: 0 4px 16px rgba(0,0,0,.4); }
.scrolly-panel .stage-desc { font-size: var(--fs-md); color: rgba(255,255,255,.82); }

.scrolly-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.scrolly-ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }

/* Barre de progression (dots) — desktop */
.scrolly-dots { position: absolute; z-index: 3; right: var(--gutter); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
.scrolly-dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); border: none; cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.scrolly-dots button.is-active { background: var(--accent-primary); transform: scale(1.4); box-shadow: 0 0 10px rgba(246,160,73,.6); }

/* ---------- Mobile / no-pin fallback : empilement, un fond plein écran par étape ---------- */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .scrolly-pin { display: none; }

  .scrolly-mobile-step {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .scrolly-mobile-step .scrolly-bg { position: absolute; opacity: 1; }
  .scrolly-mobile-step .scrolly-vignette { position: absolute; }
  .scrolly-mobile-step .scrolly-content { position: relative; height: auto; width: 100%; display: block; padding-block: var(--space-16); }
  /* Pas de forçage opacity/transform ici : le panneau reste piloté par
     [data-reveal] (voir components.css + initReveal() dans main.js), pour
     un vrai effet d'apparition au fil du scroll, pas un contenu figé. */
  .scrolly-mobile-step .scrolly-panel { position: static; pointer-events: auto; max-width: none; }
  .scrolly-dots, .scrolly-progress { display: none; }
}

@media (min-width: 901px) {
  .scrolly-mobile-stack { display: none; }
}