/* Les trois étapes du PRP (2026-10-22), chargé après prp-science.css :
   colonnes alignées ligne à ligne, vraie flèche entre les étapes, et une
   apparition en séquence 01 → flèche → 02 → flèche → 03. */
.prp-sequence-stages{grid-template-rows:auto auto auto auto;column-gap:0}
.prp-stage{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-items:start}
.prp-stage>p{min-height:0}
.prp-stage-number{font:400 44px/1 "EB Garamond",Georgia,serif;letter-spacing:-.02em;margin-bottom:10px;color:var(--prp-sequence-gold)}

/* Flèche : pastille dorée posée sur la séparation, à hauteur des schémas */
.prp-stage:not(:last-child)::before,.prp-stage:not(:last-child)::after{content:none}
.vb-step-arrow{position:absolute;z-index:2;right:-22px;top:calc(86px + 12% + 60px);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#0d1b2a;border:1px solid var(--prp-sequence-gold);color:var(--prp-sequence-gold);box-shadow:0 0 0 6px #0d1b2a}
.vb-step-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.prp-stage+.prp-stage{border-left-color:rgba(201,169,110,.28)}

/* Séquence d'apparition (seulement si la section est encore sous l'écran) */
.prp-sequence[data-steps]>.prp-sequence-stages>.prp-stage{transition:opacity .8s var(--vb-ease,cubic-bezier(.16,1,.3,1)),transform .8s var(--vb-ease,cubic-bezier(.16,1,.3,1))}
.prp-sequence[data-steps="pending"]>.prp-sequence-stages>.prp-stage{opacity:0;transform:translate3d(0,36px,0)}
.prp-sequence[data-steps] .prp-stage:nth-child(2){transition-delay:.55s}
.prp-sequence[data-steps] .prp-stage:nth-child(3){transition-delay:1.1s}
.vb-step-arrow{transition:transform .6s var(--vb-ease,cubic-bezier(.16,1,.3,1)),opacity .4s ease}
.prp-sequence[data-steps="pending"] .vb-step-arrow{opacity:0;transform:scale(.5)}
.prp-sequence[data-steps] .prp-stage:nth-child(1) .vb-step-arrow{transition-delay:.35s}
.prp-sequence[data-steps] .prp-stage:nth-child(2) .vb-step-arrow{transition-delay:.9s}
.vb-step-arrow svg path{stroke-dasharray:30;stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--vb-ease,cubic-bezier(.16,1,.3,1))}
.prp-sequence[data-steps="pending"] .vb-step-arrow svg path{stroke-dashoffset:30}
.prp-sequence[data-steps] .prp-stage:nth-child(1) .vb-step-arrow svg path{transition-delay:.5s}
.prp-sequence[data-steps] .prp-stage:nth-child(2) .vb-step-arrow svg path{transition-delay:1.05s}
/* Une fois posée, la flèche « respire » doucement vers l'étape suivante */
@keyframes vb-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.prp-sequence[data-steps="shown"][data-playing="true"] .vb-step-arrow svg{animation:vb-nudge 2.4s ease-in-out 2s infinite}

@media (max-width:1000px) and (min-width:761px){.vb-step-arrow{top:calc(86px + 10% + 50px)}}
@media (max-width:760px){
  .prp-sequence-stages{grid-template-rows:none}
  .prp-stage{display:block;grid-row:auto}
  .prp-stage-number{font-size:40px}
  .vb-step-arrow{right:auto;left:calc(50% - 22px);top:auto;bottom:-22px}
  .vb-step-arrow svg{transform:rotate(90deg)}
  @keyframes vb-nudge{0%,100%{transform:rotate(90deg) translateX(0)}50%{transform:rotate(90deg) translateX(4px)}}
  .prp-sequence[data-steps] .prp-stage{transition-delay:0s!important}
  .prp-sequence[data-steps] .vb-step-arrow,.prp-sequence[data-steps] .vb-step-arrow svg path{transition-delay:.3s!important}
}
@media (prefers-reduced-motion:reduce){
  .prp-sequence[data-steps]>.prp-sequence-stages>.prp-stage,.vb-step-arrow,.vb-step-arrow svg path{opacity:1!important;transform:none!important;stroke-dashoffset:0!important;transition:none!important}
  .vb-step-arrow svg{animation:none!important}
  @media (max-width:760px){.vb-step-arrow svg{transform:rotate(90deg)!important}}
}