/* ============================================================
   Hero Phase 1 — schéma « entonnoir 3D » (v3.3.0, 25/09/2026, demande de Paul
   : espacement entre anneaux identique à celui de l'entonnoir du déroulé)
   v3.1, 24/09/2026 : retirer le bloc « 1 à 3 » et agrandir l'entonnoir
   4 anneaux 3D isométriques (SVG inline) empilés : dégradés nuit → corail
   dans la charte, ombres portées. Le bloc résultat « 1 à 3 cas d'usage »
   a été retiré ; l'entonnoir occupe tout l'espace du hero.
   Chargée uniquement par phase-1-sprint.html, après premium-v4.css.
   ============================================================ */

.sprint-visual { min-width: 0; width: 100%; max-width: 480px; justify-self: end; }

/* v2.2 : sans carte sombre, le schéma repose directement sur le fond de la page */
.sv-card {
  background: none;
  color: var(--ink);
  padding: 0;
}

/* --- Entonnoir 3D : anneaux SVG empilés + libellés --- */
/* v3.3.0 (retour de Paul) : gap aligné sur l'entonnoir du déroulé (8px) */
.sv-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sv-stage {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
/* Chevauchement vertical : chaque anneau vient se loger dans l'ouverture du
   précédent. v3.2.0 (retour de Paul : « il manque un très léger espace entre
   les sections — actuellement elles se touchent ») : le chevauchement est
   réduit pour ménager un jour net entre les anneaux.
   v3.3.0 (retour de Paul : « espacement identique à l'entonnoir du déroulé ») :
   le déroulé a un espacement net de −12px pour des anneaux de 230px ; ramené
   aux 190px du hero, la même proportion donne 8px − 18px = −10px. */
.sv-stage--1, .sv-stage--2, .sv-stage--3 { margin-top: -18px; }
.sv-slice {
  position: relative;
  display: block;
  opacity: 0;
  transform: translateY(-16px) scale(.92);
  animation: sv-ring-in .7s cubic-bezier(.2, .7, .3, 1) forwards;
}
.sv-slice svg { display: block; width: 100%; height: auto; }
.sv-stage--0 .sv-slice { animation-delay: .1s; }
.sv-stage--1 .sv-slice { animation-delay: .25s; }
.sv-stage--2 .sv-slice { animation-delay: .4s; }
.sv-stage--3 .sv-slice { animation-delay: .55s; }
@keyframes sv-ring-in {
  to { opacity: 1; transform: none; }
}
/* Numéro posé sur la paroi de l'anneau */
.sv-num {
  position: absolute;
  left: 50%; top: 47%;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: lining-nums;
  text-shadow: 0 1px 6px rgba(23, 23, 48, .45);
}
.sv-stage-text { min-width: 0; }
/* v3.2.0 (retour de Paul) : les sous-libellés (« 2 h avec le dirigeant »,
   « Demi-journée 1/2/3 ») sont retirés du hero — ils restent présents dans
   l'entonnoir interactif du déroulé, plus bas dans la page. */
.sprint-visual:not(.sprint-visual--method) .sv-stage-text span { display: none; }
.sv-stage-text strong { display: block; font-size: 1.08rem; font-weight: 600; color: var(--ink); letter-spacing: 0; line-height: 1.3; }
.sv-stage-text span { display: block; font-size: .84rem; color: var(--slate-500); margin-top: 2px; }

/* v3.2.0 (retour de Paul : « au survol, une animation doit se déclencher,
   mais sans aucun effet de fondu ») : l'anneau glisse et grossit légèrement,
   son ombre s'accentue, son titre passe en corail — opacité intacte. */
.sprint-visual:not(.sprint-visual--method) .sv-slice {
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), filter .3s;
}
.sprint-visual:not(.sprint-visual--method) .sv-stage:hover .sv-slice {
  transform: translateX(8px) scale(1.04);
  filter: drop-shadow(0 12px 18px rgba(23, 23, 48, .28));
}
.sprint-visual:not(.sprint-visual--method) .sv-stage-text strong {
  transition: color .2s, transform .3s cubic-bezier(.2, .7, .3, 1);
}
.sprint-visual:not(.sprint-visual--method) .sv-stage:hover .sv-stage-text strong {
  color: var(--accent);
  transform: translateX(4px);
}

/* --- Unification du panneau Étape 0 (retour de Paul) ---
   Le panneau 00 utilise désormais la même structure .step-card que les
   demi-journées 1-3. Seuls ajouts : le pied « Résultat » et l'italique
   éditorial du pitch (les autres pages gardent leur .pre-sprint intact). */
.method-panels .step-pitch em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}
.step-result {
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--slate-700);
}
.step-result em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}

/* --- Responsive --- */
@media (max-width: 960px) {
  .sprint-visual { justify-self: start; max-width: 520px; }
}
@media (max-width: 420px) {
  .sv-stage { grid-template-columns: 128px minmax(0, 1fr); gap: 14px; }
  /* jour proportionné (v3.3.0 : même ratio que le déroulé, −7px net à 128px) */
  .sv-stage--1, .sv-stage--2, .sv-stage--3 { margin-top: -15px; }
  .sv-num { font-size: 1.05rem; }
}

/* --- Accessibilité : aucune animation si l'utilisateur les réduit --- */
@media (prefers-reduced-motion: reduce) {
  .sv-slice { opacity: 1; animation: none; transform: none; }
  .sprint-visual:not(.sprint-visual--method) .sv-slice,
  .sprint-visual:not(.sprint-visual--method) .sv-stage-text strong { transition: none; }
  .sprint-visual:not(.sprint-visual--method) .sv-stage:hover .sv-slice,
  .sprint-visual:not(.sprint-visual--method) .sv-stage:hover .sv-stage-text strong { transform: none; }
}

/* ============================================================
   Déroulé en onglets (demande de Paul : parcours plus ergonomique)
   - Sans JS ou avec .js-ready absent : tout reste affiché comme avant
   - Avec JS : un onglet actif à la fois, son panneau en dessous
   - Le fond (textes, livrables) est strictement inchangé
   ============================================================ */
.method-tabs {
  display: none; /* sans JS : pas d'onglets inertes, tout le contenu reste visible */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  max-width: 1000px;
  margin-inline: auto;
}
.js-ready .method-tabs { display: grid; }
.method-panels { max-width: 1000px; margin-inline: auto; }
.method-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.method-tab:hover { border-color: #c8b1ad; transform: translateY(-2px); }
.method-tab-num {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--navy-900);
  font-weight: 700;
  font-size: .78rem;
  transition: background .2s, color .2s;
}
.method-tab-text { min-width: 0; }
.method-tab-text strong { display: block; font-size: .86rem; line-height: 1.25; letter-spacing: -.01em; }
.method-tab-text span { display: block; font-size: .68rem; color: var(--slate-700); margin-top: 2px; }
.method-tab.is-active {
  border-color: var(--navy-900);
  box-shadow: 0 14px 28px -20px rgba(23, 23, 48, .45);
}
.method-tab.is-active .method-tab-num { background: var(--navy-900); color: #fff; }
/* Petite flèche sous l'onglet actif */
.method-tab.is-active::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -7px;
  width: 12px; height: 12px;
  background: inherit;
  border-right: 1px solid var(--navy-900);
  border-bottom: 1px solid var(--navy-900);
  transform: translateX(-50%) rotate(45deg);
}

/* Panneaux : sans JS tout est visible (contenu indexé + no-script OK) ;
   avec JS, seul le panneau actif s'affiche. */
.method-panel { outline: none; }
.js-ready .method-panel[hidden] { display: none; }
.js-ready .method-panel.is-active { animation: mtab-in .35s cubic-bezier(.2, .7, .3, 1); }
@keyframes mtab-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Les composants d'origine sont réutilisés tels quels dans les panneaux */
.method-panels .method-timeline { margin-top: 0; }
.method-panels .method-step {
  list-style: none;
  display: block; /* la grille 110px/1fr de la timeline n'a plus lieu sans marqueur */
}
.method-panels .step-line { display: none; } /* la ligne verticale n'a plus de sens en panneau unique */

@media (max-width: 860px) {
  .js-ready .method-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .js-ready .method-tabs { grid-template-columns: 1fr 1fr; gap: 8px; }
  .method-tab { padding: 11px 12px; gap: 10px; }
  .method-tab-text span { display: none; } /* mobile : numéro + nom suffisent */
}
@media (prefers-reduced-motion: reduce) {
  .js-ready .method-panel.is-active { animation: none; }
}