/* ============================================================
   Déroulé Phase 1 — entonnoir interactif (v1.0, 25/09/2026,
   demande de Paul : reproduire l'entonnoir du hero dans le
   déroulé, en grand format, positionné sur le côté ; chaque
   anneau déplie/replie son étape au clic ; 00 ouverte par défaut)
   Chargée uniquement par phase-1-sprint.html, après sprint-visual.css.
   ============================================================ */

/* --- Mise en page : entonnoir à gauche, détail à droite --- */
.method-layout {
  display: grid;
  grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  max-width: 1180px;
  margin-inline: auto;
}

/* L'entonnoir reste visible pendant la lecture du détail */
.sprint-visual--method {
  position: sticky;
  top: 110px;
  max-width: none;
  width: 100%;
  justify-self: start;
}

/* Anneaux nettement plus grands que dans le hero */
.sprint-visual--method .sv-funnel { gap: 8px; }
.sprint-visual--method .sv-stage { display: block; margin: 0; }
.sprint-visual--method .sv-stage--1,
.sprint-visual--method .sv-stage--2,
.sprint-visual--method .sv-stage--3 { margin-top: -20px; }

/* Le bouton recouvre tout l'anneau : zone de clic généreuse */
.sv-trigger {
  display: grid;
  grid-template-columns: minmax(150px, 230px) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 14px;
}

/* Pas d'animation d'entrée dans le déroulé : tout est visible de suite */
.sprint-visual--method .sv-slice {
  opacity: 1;
  transform: none;
  animation: none;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}
.sv-trigger:hover .sv-slice,
.sv-trigger:focus-visible .sv-slice { transform: translateX(4px); }

/* Étiquette : plus grande + chevron d'état (déplié/replié) */
.sprint-visual--method .sv-stage-text { position: relative; padding-right: 34px; }
.sprint-visual--method .sv-stage-text strong { font-size: 1.3rem; }
.sprint-visual--method .sv-stage-text span { font-size: .98rem; }
.sv-chevron {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9rem;
  color: var(--slate-500);
  transition: transform .25s, color .2s;
}
.sv-trigger.is-open .sv-chevron { transform: translateY(-50%) rotate(180deg); color: var(--accent); }

/* Anneau ouvert : léger halo + numéro souligné */
.sv-trigger.is-open .sv-slice { filter: drop-shadow(0 14px 22px rgba(23, 23, 48, .22)); }
.sv-trigger.is-open .sv-stage-text strong { color: var(--accent); }

/* Effet « fondu » (retour de Paul) : quand une étape est ouverte, les autres
   s'estompent pour la faire ressortir. Tout replié → tout redevient plein. */
.sprint-visual--method .sv-trigger { transition: opacity .25s; }
.js-ready .sprint-visual--method.has-open .sv-trigger { opacity: .45; }
.js-ready .sprint-visual--method.has-open .sv-trigger:hover { opacity: .75; }
.js-ready .sprint-visual--method.has-open .sv-trigger.is-open { opacity: 1; }

/* Focus clavier visible */
.sv-trigger:focus-visible {
  outline: 3px solid rgba(227, 47, 47, .35);
  outline-offset: 6px;
}

/* --- Panneaux de détail --- */
.method-panels { max-width: none; margin-inline: 0; min-width: 0; }
.method-empty {
  background: #fff;
  border: 1px dashed #c8b1ad;
  border-radius: 14px;
  padding: 22px 24px;
  color: var(--slate-700);
  font-size: .95rem;
  line-height: 1.6;
}
.method-empty strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 4px; }

/* --- v2 (30/09/2026, retour de Paul) : déroulé piloté AU SCROLL ---
   Les 4 étapes sont empilées ; l'entonnoir (sticky) suit la lecture.
   L'étape en cours est pleine, les autres légèrement estompées. */
.is-scrolly .method-empty { display: none !important; }
.is-scrolly .sv-chevron { display: none; }
.is-scrolly .sprint-visual--method .sv-stage-text { padding-right: 0; }
.is-scrolly .method-panels { display: grid; gap: 28px; }
.is-scrolly .method-panel[hidden] { display: block; }
.js-ready.is-scrolly .method-panel,
.js-ready.is-scrolly .method-panel.is-active { animation: none; }
.is-scrolly .method-panel {
  scroll-margin-top: 110px;
  opacity: .42;
  transition: opacity .35s ease, transform .35s ease;
  transform: scale(.985);
  transform-origin: left center;
}
.is-scrolly .method-panel.is-active { opacity: 1; transform: none; }
/* Dernière étape : de l'air sous la carte pour qu'elle puisse s'activer */
.is-scrolly .method-panels { padding-bottom: 8vh; }
/* Centre vertical de l'entonnoir dans la fenêtre pendant la lecture */
.is-scrolly .sprint-visual--method { top: max(110px, calc(50vh - 230px)); }

@media (prefers-reduced-motion: reduce) {
  .is-scrolly .method-panel { transition: none; transform: none; }
}

/* --- Responsive --- */
@media (max-width: 960px) {
  /* Mobile/tablette : l'entonnoir passe au-dessus, plus sticky */
  .method-layout { grid-template-columns: 1fr; gap: 28px; max-width: 560px; }
  .sprint-visual--method { position: static; }
  .is-scrolly .sprint-visual--method { position: static; }
  /* Sur mobile, l'entonnoir sert de sommaire : toutes les étapes restent pleines */
  .is-scrolly .method-panel { opacity: 1; transform: none; }
  .is-scrolly .method-panels { padding-bottom: 0; }
  .sv-trigger { grid-template-columns: minmax(130px, 190px) minmax(0, 1fr); gap: 14px; }
  .sprint-visual--method .sv-stage-text strong { font-size: 1.15rem; }
  .sprint-visual--method .sv-stage-text span { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sprint-visual--method .sv-slice,
  .sv-chevron { transition: none; }
}