/*
 * steps/fil-collant — transposition de `.etapes` (maquette Astro ADJ). La colonne de
 * gauche est `position: sticky` ; le fil or se remplit selon --ivy-fill ; une etape
 * passe du gris a l'or quand elle est atteinte.
 *
 * ETAT PAR DEFAUT = tout atteint (sans JavaScript, mouvement reduit). Les etapes
 * grises n'existent QUE sous `.ivy-fill-ready`, que le runtime pose seulement quand
 * le fil est pilote. Le compteur est dans le DOM une fois, reecrit par
 * `data-ivy-sequence-current` (01 par defaut). Engagement 5 : aucun hexadecimal.
 */
.ivy-steps--fil-collant {
	--ivy-page-gutter: clamp( 20px, 5vw, 64px );
	box-sizing: border-box;
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp( 40px, 6vw, 96px );
	align-items: start;
	padding: clamp( 80px, 9vw, 120px ) max( var( --ivy-page-gutter ), calc( ( 100% - 1280px ) / 2 ) );
}

.ivy-steps--fil-collant .ivy-steps__side { position: sticky; top: var( --ivy-sticky-top, 140px ); display: grid; gap: 18px; justify-items: start; }
.ivy-steps--fil-collant .ivy-steps__eyebrow {
	display: block;
	margin-bottom: 14px;
	color: var( --ivy-eyebrow-color, var( --ivy-accent-text, var( --ivy-accent, currentcolor ) ) );
	font-size: var( --ivy-font-label );
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.ivy-steps--fil-collant .ivy-steps__title { margin: 0; color: var( --ivy-title-color, var( --ivy-accent, currentcolor ) ); font-family: var( --ivy-font-titre, inherit ); font-weight: 400; line-height: 1.12; }
.ivy-steps--fil-collant .ivy-steps__text { color: var( --ivy-text-color, var( --ivy-ink, currentcolor ) ); }
.ivy-steps--fil-collant .ivy-steps__text p { margin: 0; font-size: inherit; }

.ivy-steps--fil-collant .ivy-steps__counter {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 8px 0 4px;
	color: var( --ivy-counter-color, var( --ivy-support, currentcolor ) );
	font-family: var( --ivy-font-titre, inherit );
	line-height: 1;
	-webkit-text-stroke: var( --ivy-title-stroke, 0 ) currentcolor;
	paint-order: stroke fill;
}
.ivy-steps--fil-collant .ivy-steps__counter span { font-size: var( --ivy-font-step ); font-variant-numeric: tabular-nums; }
.ivy-steps--fil-collant .ivy-steps__counter small { color: var( --ivy-muted, currentcolor ); font-size: var( --ivy-font-h3 ); }

.ivy-steps--fil-collant .ivy-steps__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: var( --ivy-radius-action, 999px );
	background: var( --ivy-cta-background-color, var( --ivy-accent, currentcolor ) );
	color: var( --ivy-cta-color, var( --ivy-on-accent, rgb( 255 255 255 ) ) );
	font-size: var( --ivy-font-body );
	font-weight: 500;
	line-height: 1.6;
	text-decoration: none;
	transition: background-color 200ms ease, transform 200ms cubic-bezier( .22, 1, .36, 1 );
}
.ivy-steps--fil-collant .ivy-steps__cta:hover { background: var( --ivy-cta-background-color-hover, var( --ivy-line-accent, currentcolor ) ); }
.ivy-steps--fil-collant .ivy-steps__cta:active { transform: scale( .98 ); }

/* La liste (« ol » : elle passe devant la remise a zero des listes du kit). */
.ivy-steps--fil-collant ol.ivy-steps__list {
	--ivy-fil-top: 16px;
	position: relative;
	display: grid;
	margin: 0;
	padding: 0 0 0 56px;
	list-style: none;
}
.ivy-steps--fil-collant .ivy-steps__list::before,
.ivy-steps--fil-collant .ivy-steps__list::after {
	content: '';
	position: absolute;
	top: 16px;
	bottom: 16px;
	left: 15px;
	width: 1.5px;
	background: var( --ivy-line-color, var( --ivy-line, currentcolor ) );
}
.ivy-steps--fil-collant .ivy-steps__list::after { bottom: auto; height: 100%; background: var( --ivy-support, currentcolor ); }
.ivy-steps--fil-collant .ivy-steps__list.ivy-fill-ready::after { height: calc( var( --ivy-fill, 0 ) * ( 100% - 32px ) ); }

.ivy-steps--fil-collant .ivy-steps__step { position: relative; display: grid; gap: 8px; margin: 0; padding: 0 0 56px; }
.ivy-steps--fil-collant .ivy-steps__step:last-child { padding-bottom: 0; }

.ivy-steps--fil-collant .ivy-steps__number {
	position: absolute;
	top: 0;
	left: -56px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1.5px solid var( --ivy-support, currentcolor );
	border-radius: 50%;
	background: var( --ivy-support, currentcolor );
	color: var( --ivy-item_number-color, var( --ivy-on-accent, rgb( 255 255 255 ) ) );
	font-size: var( --ivy-font-label );
	font-weight: 600;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
	transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}
.ivy-steps--fil-collant .ivy-steps__item-title { margin: 0; color: var( --ivy-item_title-color, var( --ivy-accent, currentcolor ) ); font-family: var( --ivy-font-titre, inherit ); font-weight: 400; line-height: 1.2; transition: color 300ms ease; }
.ivy-steps--fil-collant .ivy-steps__item-text { margin: 0; color: var( --ivy-item_text-color, var( --ivy-ink, currentcolor ) ); transition: color 300ms ease; }
.ivy-steps--fil-collant .ivy-steps__detail {
	justify-self: start;
	margin: 6px 0 0;
	padding: 6px 14px;
	border: 1px solid var( --ivy-support, currentcolor );
	border-radius: var( --ivy-radius-action, 999px );
	color: var( --ivy-item_label-color, var( --ivy-accent, currentcolor ) );
	font-size: var( --ivy-font-body );
	font-weight: 500;
	line-height: 1.6;
	transition: border-color 300ms ease;
}

/* Le fil est pilote : une etape n'est « atteinte » que si elle est active ou precede l'etape active. */
.ivy-steps--fil-collant .ivy-fill-ready .ivy-steps__step:not( .is-active ):not( :has( ~ .is-active ) ) .ivy-steps__number {
	border-color: var( --ivy-line, currentcolor );
	background: var( --ivy-surface-soft, transparent );
	color: var( --ivy-muted, currentcolor );
}
.ivy-steps--fil-collant .ivy-fill-ready .ivy-steps__step:not( .is-active ):not( :has( ~ .is-active ) ) :is( .ivy-steps__item-title, .ivy-steps__item-text, .ivy-steps__detail ) { color: color-mix( in srgb, var( --ivy-muted, currentcolor ) 70%, transparent ); }
.ivy-steps--fil-collant .ivy-fill-ready .ivy-steps__step:not( .is-active ):not( :has( ~ .is-active ) ) .ivy-steps__detail { border-color: var( --ivy-line, currentcolor ); }

@media ( max-width: 960px ) {
	.ivy-steps--fil-collant { grid-template-columns: 1fr; gap: 40px; }
	.ivy-steps--fil-collant .ivy-steps__side { position: static; }
	.ivy-steps--fil-collant .ivy-steps__counter,
	.ivy-steps--fil-collant .ivy-steps__side .ivy-steps__cta { display: none; }
	.ivy-steps--fil-collant ol.ivy-steps__list { padding-left: 48px; }
	.ivy-steps--fil-collant .ivy-steps__number { left: -48px; }
	.ivy-steps--fil-collant .ivy-steps__step { padding-bottom: 40px; }
	.ivy-steps--fil-collant .ivy-steps__detail { border-radius: calc( var( --ivy-radius-surface, 22px ) * 6 / 11 ); }
}