/* Parcours en 4 étapes : rangées alternées (texte / maquette), espacement généreux.
 * < 1024px : texte puis maquette, empilés. >= 1024px : 5/12 texte, 7/12 maquette, alternance gauche/droite. */
.parcours-entete { max-width: 760px; margin-bottom: 64px; }
.parcours-rangees { display: grid; gap: 80px; }
.rangee { position: relative; display: grid; gap: 32px; align-items: center; }
.rangee-texte { min-width: 0; }
.rangee-num { display: block; margin-bottom: 8px; font-size: 3.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: color-mix(in srgb, var(--marque-texte) 38%, transparent); }
.rangee-texte .sur-titre { margin-bottom: 8px; }
.rangee-texte h3 { max-width: 20ch; text-wrap: balance; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.025em; line-height: 1.15; }
.rangee-texte > p:not(.sur-titre) { max-width: 44ch; margin-top: 14px; font-size: 1.0625rem; color: var(--texte-attenue); }
.puces { display: grid; gap: 10px; margin-top: 24px; }
.puces li { position: relative; padding-left: 26px; font-weight: 500; }
.puces li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 11px; height: 6px; border-left: 2px solid var(--marque-texte); border-bottom: 2px solid var(--marque-texte); rotate: -45deg; }
.scene { min-width: 0; }
.scene .fenetre { width: 100%; }

@media (min-width: 1024px) {
  .parcours-rangees { gap: 144px; }
  .rangee { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
  .rangee-inverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .rangee-inverse .rangee-texte { order: 2; }
  .rangee:not(:last-child)::after { content: ""; position: absolute; top: 100%; height: 144px; margin-top: -8px; border-left: 1.5px dashed var(--trait); left: calc((100% - 72px) * 5 / 12 + 36px); }
  .rangee-inverse:not(:last-child)::after { left: calc((100% - 72px) * 7 / 12 + 36px); }
  .rangee:not(:last-child)::before { content: ""; position: absolute; z-index: 1; top: calc(100% + 120px); width: 9px; height: 9px; border-right: 2px solid var(--marque-texte); border-bottom: 2px solid var(--marque-texte); rotate: 45deg; margin-left: -5px; left: calc((100% - 72px) * 5 / 12 + 36px); }
  .rangee-inverse:not(:last-child)::before { left: calc((100% - 72px) * 7 / 12 + 36px); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .rangee:has(.est-active):not(:last-child)::before { animation: fleche-descend 2.4s ease-in-out infinite; }
  @keyframes fleche-descend { 0%, 100% { translate: 0 -8px; } 50% { translate: 0 6px; } }
}