/* Clip decoration without creating an ancestor scroll container for the stage. */
.product { overflow: visible; overflow: clip; }
.product-story { position: relative; min-width: 0; }
.product-stage { position: relative; min-width: 0; }
.product-story.is-pinned .product-stage {
  position: sticky;
  /* Repli sous l’en-tête compact, jamais dessous. */
  top: var(--product-story-top, var(--header-clearance, 96px));
}
.product-story-narration {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 24px;
  padding: 0 2px 20px;
  margin: 0 0 18px;
  border-bottom: 1px solid #d6cef01f;
  color: #c1b7cf;
  font-size: 11px;
  line-height: 1.4;
}
.product-story-narration::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--light), var(--sand));
  /* Filet de lecture légèrement atténué : il accompagne, il ne concurrence pas les cartes. */
  opacity: .72;
  transform: scaleX(var(--product-story-progress, 1));
  transform-origin: left center;
}
.product-story-phase {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 25px;
  color: #a69eaf;
}
.product-story-phase:nth-child(2) { justify-content: center; }
.product-story-phase:last-child { justify-content: flex-end; }
/* Les numéros forment une vraie séquence : JetBrains Mono, à une taille lisible. */
.product-story-number {
  flex: none;
  font: 11px/1 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--light);
}
/* L’étape courante change de couleur et reçoit un trait de 1 px : aucune graisse,
   donc aucun libellé ne change de largeur. */
.product-story-label { position: relative; }
.product-story-label::after {
  content: '';
  position: absolute;
  inset: auto 0 -6px;
  height: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left center;
}
.product-story-phase.is-current { color: var(--paper); }
.product-story-phase.is-current .product-story-label::after { scale: 1 1; }
.product-story-phase.is-current .product-story-number { color: var(--mist); }
.product-story-phase.is-complete .product-story-number { color: var(--sand); }
.product-story.is-static .product-story-phase { color: #c1b7cf; }
.product-story.is-static .product-story-narration::after { opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .product-story-phase, .product-story-number { transition: color var(--duration-ui) var(--ease-standard); }
  .product-story-label::after { transition: scale var(--duration-ui) var(--ease-standard); }
  /* Prise en main : le filet rejoint sa fin au rythme des cartes. */
  .product-story.is-engaged .product-story-narration::after { transition: transform var(--duration-panel) var(--ease-standard); }
}
@media (max-width: 850px) {
  .product-story-narration { gap: 16px; font-size: 10px; padding-bottom: 16px; }
  .product-story-phase { align-items: flex-start; gap: 8px; }
}
@media (max-width: 600px) {
  .product-story-narration { grid-template-columns: 1fr 1fr 1.15fr; gap: 14px; margin-inline: -4px; font-size: 9px; line-height: 1.5; }
  .product-story-phase { display: block; min-height: 0; }
  .product-story-number { display: block; margin-bottom: 8px; }
  /* Libellé sur plusieurs lignes : le trait court sous toute la colonne. */
  .product-story-label { display: inline-block; }
  .product-story-phase:nth-child(2), .product-story-phase:last-child { justify-content: initial; }
}
@media (prefers-reduced-motion: reduce), print {
  .product-story { height: auto !important; }
  .product-story.is-pinned .product-stage { position: relative; top: auto; }
  .product-story-phase, .product-story-number, .product-story-label::after { transition: none; }
}