/*
 * steps/parcours-epingle — transposition de `.lp-parcours` et `.lp-etape` (maquette Les Jolies Clés) : la scène remplit
 * la fenêtre, le titre en haut, les étapes défilent de côté, un trait doré avance sous elles. Le rail du socle publie
 * la progression ; la hauteur de la section = une fenêtre + la distance parcourue + 20 % de fenêtre (fin de piste).
 * Sous 961 px et en mouvement réduit : grille, sans épinglage. Engagement 5 : aucun hexadécimal, replis compris.
 */
.ivy-steps--parcours-epingle { --ivy-steps-gutter: max( clamp( 20px, 5vw, 64px ), calc( ( 100% - 1240px ) / 2 ) ); padding: 0; }
.ivy-steps--parcours-epingle .ivy-steps__scroller { position: relative; }
.ivy-steps--parcours-epingle .ivy-steps__spacer { block-size: calc( var( --ivy-rail-distance, 0px ) + 20svh ); }
.ivy-steps--parcours-epingle .ivy-steps__pin { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp( 24px, 5vh, 56px ); box-sizing: border-box; block-size: 100svh; padding-top: var( --ivy-navbar-h, 88px ); overflow: hidden; }
.ivy-steps--parcours-epingle .ivy-steps__head { padding-inline: var( --ivy-steps-gutter ); max-inline-size: calc( 820px + 2 * var( --ivy-steps-gutter ) ); }
.ivy-steps--parcours-epingle .ivy-steps__title { margin: 0; line-height: 1.15; color: var( --ivy-title-color, var( --ivy-ink, rgb( 58 50 38 ) ) ); }
.ivy-steps--parcours-epingle .ivy-steps__viewport { inline-size: 100%; overflow: visible; }
.ivy-steps--parcours-epingle .ivy-steps__viewport:focus-visible { outline: 2px solid var( --ivy-accent, rgb( 184 151 90 ) ); outline-offset: -2px; }
.ivy-steps--parcours-epingle .ivy-steps__track { display: flex; inline-size: max-content; gap: clamp( 24px, 3vw, 48px ); margin: 0; padding: 0 var( --ivy-steps-gutter ); list-style: none; transform: translate3d( calc( -1 * var( --ivy-rail, 0 ) * var( --ivy-rail-travel, 0px ) ), 0, 0 ); will-change: transform; }
.ivy-steps--parcours-epingle .ivy-steps__item { display: flex; flex: none; flex-direction: column; justify-content: flex-end; box-sizing: border-box; inline-size: clamp( 380px, 34vw, 520px ); min-block-size: 40svh; padding: clamp( 24px, 3vw, 44px ); border-top: 2px solid var( --ivy-accent, rgb( 184 151 90 ) ); border-radius: var( --ivy-radius-surface, 4px ); background: var( --ivy-item-background-color, var( --ivy-surface, rgb( 251 248 242 ) ) ); }
.ivy-steps--parcours-epingle .ivy-steps__number { display: block; font-family: var( --ivy-font-titre, inherit ); font-size: calc( var( --ivy-font-figure ) * 2 ); line-height: 1; color: var( --ivy-item_number-color, var( --ivy-accent, rgb( 184 151 90 ) ) ); font-variant-numeric: lining-nums; }
.ivy-steps--parcours-epingle .ivy-steps__item-title { margin: 12px 0 0; font-weight: 600; line-height: 1.25; color: var( --ivy-item_title-color, var( --ivy-ink, rgb( 58 50 38 ) ) ); }
.ivy-steps--parcours-epingle .ivy-steps__item-text { margin: 10px 0 0; line-height: 1.6; color: var( --ivy-item_text-color, var( --ivy-ink, rgb( 58 50 38 ) ) ); }
.ivy-steps--parcours-epingle .ivy-steps__foot { padding-inline: var( --ivy-steps-gutter ); }
.ivy-steps--parcours-epingle .ivy-steps__progress { display: block; block-size: 2px; background: var( --ivy-progress-background-color, rgb( 184 151 90 / 45% ) ); }
.ivy-steps--parcours-epingle .ivy-steps__progress-fill { display: block; block-size: 100%; background: var( --ivy-accent, rgb( 184 151 90 ) ); transform: scaleX( var( --ivy-rail, 0 ) ); transform-origin: left center; }
@media ( max-width: 960px ), ( prefers-reduced-motion: reduce ) {
	.ivy-steps--parcours-epingle { padding-block: clamp( 88px, 10vw, 144px ); }
	.ivy-steps--parcours-epingle .ivy-steps__spacer,
	.ivy-steps--parcours-epingle .ivy-steps__foot { display: none; }
	.ivy-steps--parcours-epingle .ivy-steps__pin { position: relative; display: block; block-size: auto; padding-top: 0; overflow: visible; }
	.ivy-steps--parcours-epingle .ivy-steps__track { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); inline-size: auto; gap: clamp( 16px, 2vw, 28px ); margin-top: clamp( 32px, 4vw, 56px ); transform: none; will-change: auto; }
	.ivy-steps--parcours-epingle .ivy-steps__item { inline-size: auto; min-block-size: 0; }
}
@media ( max-width: 899px ) {
	.ivy-steps--parcours-epingle .ivy-steps__track { grid-template-columns: minmax( 0, 1fr ); padding-inline: clamp( 20px, 5vw, 64px ); }
}