/*
 * steps/escales — l'itineraire vertical. Le fil pointille est ENTIER par
 * defaut ; sous .ivy-fill-ready (runtime data-ivy-fill), son remplissage suit
 * la ligne de lecture. Sans JavaScript ou en mouvement reduit, rien ne change.
 */

.ivy-steps--escales {
	--ivy-escales-marker: 52px;
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	padding: clamp( 88px, 12vw, 160px ) clamp( 20px, 4vw, 40px );
	color: var( --ivy-ink, rgb( 17 17 17 ) );
}

.ivy-steps--escales .ivy-steps__header {
	display: grid;
	grid-template-columns: minmax( 0, 7fr ) minmax( 0, 5fr );
	align-items: end;
	gap: 18px clamp( 32px, 5vw, 80px );
	margin-bottom: 40px;
}

.ivy-steps--escales .ivy-steps__heading { display: grid; gap: 18px; }

.ivy-steps--escales .ivy-steps__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var( --ivy-eyebrow-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	font-size: var( --ivy-font-label );
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.ivy-steps--escales .ivy-steps__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; color: var( --ivy-icon-color, var( --ivy-accent, rgb( 17 17 17 ) ) ); }
/* La taille porte sur le glyphe : la boite grandit avec sa marge interieure. */
.ivy-steps--escales .ivy-steps__icon :is( svg, i ) { flex: none; width: 14px; height: 14px; font-size: 14px; }
.ivy-steps--escales .ivy-steps__marker svg { width: 100%; height: 100%; }

.ivy-steps--escales .ivy-steps__title { margin: 0; color: var( --ivy-title-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); }
.ivy-steps--escales .ivy-steps__text { padding-bottom: 6px; color: var( --ivy-text-color, var( --ivy-muted, rgb( 82 82 82 ) ) ); }
.ivy-steps--escales .ivy-steps__text > :first-child { margin-top: 0; }
.ivy-steps--escales .ivy-steps__text > :last-child { margin-bottom: 0; }

/* Chaque couleur se lit LA OU le panneau l'ecrit : le fil sur la piste, les
   escales atteintes sur la liste. Declarees sur la racine, elles ne verraient
   jamais le reglage, pose plus bas. */
.ivy-steps--escales .ivy-steps__track {
	--ivy-escales-line: var( --ivy-line-color, var( --ivy-line, rgb( 205 205 201 ) ) );
	color: var( --ivy-escales-line );
}

.ivy-steps--escales .ivy-steps__list {
	--ivy-escales-reached: var( --ivy-reached-color, var( --ivy-accent, rgb( 17 17 17 ) ) );
	position: relative;
	isolation: isolate;
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	color: var( --ivy-escales-reached );
	list-style: none;
}

/* Le fil et son remplissage sont des pseudos de la liste : ils heritent des
   deux couleurs, et de --ivy-fill, publie sur la piste. */
.ivy-steps--escales .ivy-steps__list::before,
.ivy-steps--escales .ivy-steps__list::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: calc( var( --ivy-escales-marker ) / 2 + 28px );
	bottom: 48px;
	left: calc( var( --ivy-escales-marker ) / 2 - 1px );
	border-left: 2px dashed var( --ivy-escales-line );
}

.ivy-steps--escales .ivy-steps__list::after {
	display: none;
	border-left-color: var( --ivy-escales-reached );
	transform: scaleY( var( --ivy-fill, 1 ) );
	transform-origin: top;
}

.ivy-steps--escales .ivy-fill-ready .ivy-steps__list::after { display: block; }

.ivy-steps--escales .ivy-steps__step {
	display: grid;
	grid-template-columns: var( --ivy-escales-marker ) minmax( 0, 1fr );
	gap: clamp( 20px, 3vw, 40px );
}

.ivy-steps--escales .ivy-steps__marker {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var( --ivy-escales-marker );
	height: var( --ivy-escales-marker );
	margin-top: 28px;
	padding: 14px;
	border-radius: 50%;
	background: var( --ivy-escales-reached );
	color: var( --ivy-item_marker-color, var( --ivy-on-accent, rgb( 255 255 255 ) ) );
}

.ivy-steps--escales .ivy-steps__body {
	display: grid;
	gap: 10px;
	padding: clamp( 22px, 2.6vw, 32px );
	border: 1px solid var( --ivy-line, rgb( 205 205 201 ) );
	border-radius: var( --ivy-radius-surface, 0 );
	background: var( --ivy-surface, rgb( 255 255 255 ) );
}

.ivy-steps--escales .ivy-steps__label {
	margin: 0;
	color: var( --ivy-item_label-color, var( --ivy-escales-reached ) );
	font-size: var( --ivy-font-label );
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.ivy-steps--escales .ivy-steps__item-title { margin: 0; color: var( --ivy-item_title-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); }
.ivy-steps--escales .ivy-steps__item-text { margin: 0; color: var( --ivy-item_text-color, var( --ivy-muted, rgb( 82 82 82 ) ) ); }

.ivy-steps--escales .ivy-steps__includes { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }

.ivy-steps--escales .ivy-steps__include {
	padding: 6px 12px;
	border-radius: var( --ivy-radius-action, 0 );
	background: var( --ivy-surface-soft, rgb( 247 244 238 ) );
	color: var( --ivy-item_include-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	font-size: var( --ivy-font-label );
}

@media ( max-width: 1000px ) {
	.ivy-steps--escales .ivy-steps__header { grid-template-columns: minmax( 0, 1fr ); }
}

@media ( max-width: 640px ) {
	.ivy-steps--escales { --ivy-escales-marker: 40px; }
	.ivy-steps--escales .ivy-steps__step { gap: 14px; }
	.ivy-steps--escales .ivy-steps__marker { padding: 10px; }
}