/* =========================================================
   MLT ÉTAPES — en-tête + photo à gauche (collants en desktop), frise
   verticale numérotée à droite. Dépend de mlt-tokens (.mlt-frise).
   ========================================================= */

.mlt-etapes {
	background: var(--mlt-color-blanc);
}

.mlt-etapes__inner {
	display: grid;
	gap: var(--mlt-space-48);
}

.mlt-etapes__cta {
	margin-top: var(--mlt-space-32);
}

.mlt-etapes__photo {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-top: var(--mlt-space-48);
	border-radius: var(--mlt-radius-panel);
	background: var(--mlt-color-fond);
}

.mlt-etapes .mlt-etapes__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Frise : étapes plus aérées, titres un cran au-dessus du texte courant */
.mlt-etapes__frise {
	--mlt-frise-gap: var(--mlt-space-32);
}

.mlt-etapes .mlt-frise__titre {
	color: var(--mlt-color-olive);
	font-size: var(--mlt-fs-lead);
	font-weight: 500;
}

.mlt-etapes .mlt-frise__texte {
	font-size: var(--mlt-fs-body);
}

@media (min-width: 1024px) {
	.mlt-etapes__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--mlt-space-96);
		align-items: start;
	}

	.mlt-etapes__intro {
		position: sticky;
		top: var(--mlt-space-48);
	}

	.mlt-etapes__frise {
		--mlt-frise-gap: var(--mlt-space-48);
	}
}

/* ---------------------------------------------------------
   Mise en page alternée (mise_en_page = alternee) : une photo par étape.
   Mobile : numéros reliés par un trait ocre à gauche, photo puis texte ; 768 à 1023 px : photo et
   texte côte à côte.
   ≥ 1024 px : photo et texte de part et d'autre du trait central, alternés.
   --------------------------------------------------------- */
.mlt-etapes--alternee {
	--mlt-etapes-num: 48px;
	--mlt-etapes-pas: var(--mlt-space-48);
}

.mlt-etapes__entete {
	max-width: 720px;
	margin-bottom: var(--mlt-space-64);
}

.mlt-etapes__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mlt-etapes__bloc {
	position: relative;
	display: grid;
	grid-template-columns: var(--mlt-etapes-num) minmax(0, 1fr);
	column-gap: var(--mlt-space-16);
	padding-bottom: var(--mlt-etapes-pas);
}

.mlt-etapes__bloc:last-child {
	padding-bottom: 0;
}

/* Trait ocre qui relie les numéros (sillon du logo) */
.mlt-etapes__bloc::before {
	content: "";
	position: absolute;
	top: var(--mlt-etapes-num);
	bottom: 0;
	left: calc(var(--mlt-etapes-num) / 2 - 1px);
	width: 2px;
	background: var(--mlt-color-ocre);
	opacity: 0.5;
}

.mlt-etapes__bloc:last-child::before {
	content: none;
}

.mlt-etapes__num {
	position: relative;
	z-index: 1;
	grid-column: 1;
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: var(--mlt-etapes-num);
	height: var(--mlt-etapes-num);
	border: 2px solid var(--mlt-color-ocre);
	border-radius: 50%;
	background: var(--mlt-color-blanc);
	color: var(--mlt-color-olive);
	font-size: var(--mlt-fs-small);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.mlt-etapes__media {
	grid-column: 2;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--mlt-space-24);
	border-radius: var(--mlt-radius-panel);
	background: var(--mlt-color-fond);
}

.mlt-etapes__corps {
	grid-column: 2;
}

.mlt-etapes__badge {
	display: inline-block;
	margin: 0 0 var(--mlt-space-16);
	padding: var(--mlt-space-4) var(--mlt-space-16);
	border-radius: var(--mlt-radius-pill);
	background: var(--mlt-color-fond);
	color: var(--mlt-color-olive);
	font-size: var(--mlt-fs-small);
	font-weight: 700;
}

/* Étiquette sous le texte d'une étape de la frise (mise en page colonne, ex. délai) */
.mlt-etapes__badge--frise {
	grid-column: 2;
	justify-self: start;
	margin: var(--mlt-space-8) 0 0;
}

.mlt-page .mlt-etapes__titre {
	margin: 0;
	color: var(--mlt-color-olive);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 400;
	line-height: var(--mlt-lh-title);
	letter-spacing: -0.03em;
}

.mlt-etapes__texte {
	max-width: 44ch;
	margin: var(--mlt-space-16) 0 0;
	color: var(--mlt-color-texte-doux);
	font-size: var(--mlt-fs-lead);
	line-height: var(--mlt-lh-body);
}

.mlt-etapes__pied {
	margin: var(--mlt-space-64) 0 0;
	text-align: center;
}

@media (min-width: 768px) {
	.mlt-etapes__bloc {
		grid-template-columns: var(--mlt-etapes-num) minmax(0, 5fr) minmax(0, 6fr);
		column-gap: var(--mlt-space-24);
		align-items: center;
	}

	.mlt-etapes__num {
		grid-row: 1;
		align-self: start;
	}

	.mlt-etapes__media {
		grid-row: 1;
		margin-bottom: 0;
	}

	.mlt-etapes__corps {
		grid-column: 3;
		grid-row: 1;
	}
}

@media (min-width: 1024px) {
	.mlt-etapes--alternee {
		--mlt-etapes-num: 56px;
		--mlt-etapes-pas: var(--mlt-space-96);
	}

	.mlt-etapes__entete {
		margin-bottom: var(--mlt-space-96);
	}

	.mlt-etapes__bloc {
		grid-template-columns: minmax(0, 1fr) var(--mlt-space-96) minmax(0, 1fr);
		column-gap: var(--mlt-space-32);
		align-items: center;
	}

	/* Trait central : du centre du premier numéro au centre du dernier */
	.mlt-etapes__bloc::before {
		top: 0;
		left: calc(50% - 1px);
	}

	.mlt-etapes__bloc:first-child::before {
		top: calc(50% - var(--mlt-etapes-pas) / 2);
	}

	.mlt-etapes__bloc:last-child::before {
		content: "";
		bottom: 50%;
	}

	.mlt-etapes__bloc:only-child::before {
		content: none;
	}

	.mlt-etapes__num {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		align-self: center;
	}

	.mlt-etapes__media {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
	}

	.mlt-etapes__corps {
		grid-column: 3;
		grid-row: 1;
	}

	/* Une étape sur deux : photo à droite */
	.mlt-etapes__bloc:nth-child(even) .mlt-etapes__media {
		grid-column: 3;
	}

	.mlt-etapes__bloc:nth-child(even) .mlt-etapes__corps {
		grid-column: 1;
		justify-self: end;
	}
}