/* ==========================================================================
   IMPRA — SCÈNE « UNE AFFAIRE, DU REPÉRAGE AU CHÈQUE »
   Une seule scène qui évolue. Le véhicule est le fil rouge permanent ;
   les éléments métier apparaissent et disparaissent autour de lui.

   Chaque groupe SVG porte data-beat="1..6" : un asset illustré définitif peut
   remplacer n'importe lequel sans toucher au reste de la section.
   ========================================================================== */

.lifecycle { display: contents; }

/* ── Cadre de la scène ─────────────────────────────────────────────────── */
.scene {
  position: relative;
  margin: 0;
  border-radius: var(--radius-images);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 18%, #FFFFFF 0%, #EFF4FC 46%, #E4EBF7 100%);
  border: var(--border-hairline);
  aspect-ratio: 4 / 5;
}
/* Texture de grille : présente, mais assez discrète pour ne plus évoquer
   un placeholder de développement. */
.scene::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(31,116,231,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31,116,231,.055) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 45%, #000 20%, transparent 78%);
          mask-image: radial-gradient(90% 70% at 50% 45%, #000 20%, transparent 78%);
  pointer-events: none;
}
.scene svg { position: relative; display: block; width: 100%; height: 100%; }

/* ── Le véhicule respire légèrement : il reste vivant entre deux temps ─── */
.veh { transform-box: fill-box; transform-origin: center; }
@keyframes vehFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
.scene .veh { animation: vehFloat 7s ease-in-out infinite; }

/* ── Temps forts ───────────────────────────────────────────────────────── */
.beat {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: translateY(12px) scale(.965);
  transition: opacity .62s var(--ease-standard), transform .62s var(--ease-standard);
  pointer-events: none;
}
.scene[data-beat="1"] .beat[data-beat="1"],
.scene[data-beat="2"] .beat[data-beat="2"],
.scene[data-beat="3"] .beat[data-beat="3"],
.scene[data-beat="4"] .beat[data-beat="4"],
.scene[data-beat="5"] .beat[data-beat="5"],
.scene[data-beat="6"] .beat[data-beat="6"] { opacity: 1; transform: none; }

/* Apparition échelonnée à l'intérieur d'un temps */
.beat > * { transition: opacity .5s var(--ease-standard) .06s, transform .5s var(--ease-standard) .06s; }
.beat > *:nth-child(2) { transition-delay: .16s; }
.beat > *:nth-child(3) { transition-delay: .26s; }
.beat > *:nth-child(4) { transition-delay: .36s; }

/* Halo de détection du temps 01 */
@keyframes ping { 0% { r: 12; opacity: .55 } 100% { r: 44; opacity: 0 } }
.scene[data-beat="1"] .ping { animation: ping 2.4s ease-out infinite; }

/* Le véhicule s'efface légèrement quand l'affaire devient une donnée */
.scene[data-beat="6"] .veh { opacity: .42; }
.veh { transition: opacity .7s var(--ease-standard); }


/* ── G5 · Rail de chevrons — l'avancement de l'affaire ─────────────────── */
.scene .rail {
  fill: var(--o-chip);
  stroke: var(--o-chip-bd);
  stroke-width: 1;
  transition: fill .5s var(--ease-standard), stroke .5s var(--ease-standard);
}
.scene[data-beat="1"] .rail[data-seg="1"],
.scene[data-beat="2"] .rail[data-seg="1"],
.scene[data-beat="2"] .rail[data-seg="2"],
.scene[data-beat="3"] .rail[data-seg="1"],
.scene[data-beat="3"] .rail[data-seg="2"],
.scene[data-beat="3"] .rail[data-seg="3"],
.scene[data-beat="4"] .rail[data-seg="1"],
.scene[data-beat="4"] .rail[data-seg="2"],
.scene[data-beat="4"] .rail[data-seg="3"],
.scene[data-beat="4"] .rail[data-seg="4"],
.scene[data-beat="5"] .rail[data-seg="1"],
.scene[data-beat="5"] .rail[data-seg="2"],
.scene[data-beat="5"] .rail[data-seg="3"],
.scene[data-beat="5"] .rail[data-seg="4"],
.scene[data-beat="5"] .rail[data-seg="5"],
.scene[data-beat="6"] .rail[data-seg="1"],
.scene[data-beat="6"] .rail[data-seg="2"],
.scene[data-beat="6"] .rail[data-seg="3"],
.scene[data-beat="6"] .rail[data-seg="4"],
.scene[data-beat="6"] .rail[data-seg="5"],
.scene[data-beat="6"] .rail[data-seg="6"] {
  fill: var(--blue);
  stroke: var(--blue);
}

/* Le dernier segment n'est bleu qu'au temps 06 : l'affaire est close quand la
   marge réelle est connue, pas avant. */
/* ── Colonne des étapes ────────────────────────────────────────────────── */
.steps { list-style: none; margin: 0; padding: 0; position: relative; padding-left: var(--space-40); }
.steps::before {
  content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px;
  width: 2px; background: var(--color-cream-border);
}
/* Progression : la ligne se remplit au fil des temps */
.steps::after {
  content: ""; position: absolute; left: 11px; top: 10px;
  width: 2px; background: var(--impra-blue);
  height: calc(var(--progress, 0) * (100% - 20px));
  transition: height .6s var(--ease-standard);
}
.step { position: relative; padding-block: var(--space-16); }
.step__btn {
  display: block; width: 100%; text-align: left;
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.step__btn::before {
  content: ""; position: absolute; left: calc(var(--space-40) * -1 + 5px); top: 22px;
  width: 14px; height: 14px; border-radius: var(--radius-buttons);
  background: var(--impra-surface); border: 2px solid var(--color-cream-border);
  transition: border-color .3s var(--ease-standard), background-color .3s var(--ease-standard), transform .3s var(--ease-standard);
  z-index: 1;
}
.step.is-active .step__btn::before { border-color: var(--impra-blue); background: var(--impra-blue); transform: scale(1.15); }
.step__k {
  display: block;
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--color-stone);
  transition: color .3s var(--ease-standard);
}
.step.is-active .step__k { color: var(--impra-blue); }
.step__t {
  display: block; margin-top: 2px;
  font-family: var(--font-geometric); font-size: var(--text-subheading);
  line-height: var(--lh-subheading); color: var(--impra-navy);
}
.step.is-active .step__t { font-weight: var(--weight-semibold); }
.step__d { display: block; margin-top: var(--space-4); font-size: var(--text-body-sm); line-height: var(--lh-body-sm); color: var(--impra-muted); }
.step__btn:hover .step__t { color: var(--impra-blue); }
.step__btn:focus-visible { outline: 2px solid var(--impra-blue); outline-offset: 4px; border-radius: 6px; }

/* ── Mobile : composition verticale, scène puis étapes ─────────────────── */
@media (max-width: 900px) {
  .scene { aspect-ratio: 4 / 3; }
  .steps { padding-left: var(--space-32); }
  .step__btn::before { left: calc(var(--space-32) * -1 + 3px); }
  .steps::before, .steps::after { left: 9px; }
}

/* ── Mouvement réduit : composition figée, navigation au clic conservée ── */
@media (prefers-reduced-motion: reduce) {
  .scene .veh { animation: none; }
  .scene[data-beat="1"] .ping { animation: none; opacity: .3; }
  .beat, .beat > * { transition: none; }
  .steps::after { transition: none; }
  .scene .rail { transition: none; }
}