/**
 * Section : Timeline.
 * D'après le design Figma "Horizontal Container".
 */

@layer sections {
	.mm-timeline__inner {
		display: flex;
		flex-direction: column;
		gap: var(--mm-space-2xl); /* 80px */
	}
	.mm-timeline__title {
		margin: 0;
		font-size: var(--mm-fs-400);
		line-height: 1.2;
		color: var(--mm-color-on-tint);
	}

	.mm-timeline__list {
		display: flex;
		flex-direction: column;
		gap: var(--mm-space-2xl);
	}

	/* --- Ligne (texte + image) --- */
	.mm-timeline__row {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--mm-space-hero);
		align-items: center;
	}
	@media (min-width: 62rem) {
		.mm-timeline__row {
			grid-template-columns: 1fr 1fr;
			gap: clamp(var(--mm-space-xl), 6vw, var(--mm-space-big-hero));
		}
		/* Image à gauche : on inverse l'ordre visuel (DOM inchangé pour l'a11y). */
		.mm-timeline--img-left .mm-timeline__media { order: -1; }
	}

	/* --- Contenu --- */
	.mm-timeline__content {
		display: flex;
		flex-direction: column;
		gap: var(--mm-space-bloc); /* 32px */
	}
	.mm-timeline__heading {
		display: flex;
		flex-direction: column;
		gap: var(--mm-space-list); /* 24px */
	}
	.mm-timeline__date {
		margin: 0;
		font-family: var(--mm-font-heading);
		font-weight: 500;
		font-size: var(--mm-fs-500); /* ~95px */
		letter-spacing: 0.04em;
		line-height: 1.1;
		text-transform: uppercase;
		color: var(--mm-olive-900);
	}
	.mm-timeline__date sup {
		font-size: 0.5em;      /* ordinal « e » ~49px sur 95px */
		vertical-align: 0.5em;
		text-transform: lowercase;
	}
	.mm-timeline__subtitle {
		margin: 0;
		font-family: var(--mm-font-heading);
		font-weight: 500;
		font-size: clamp(1.5rem, 1.6vw, 1.9375rem); /* → 31px */
		letter-spacing: 0.04em;
		line-height: 1.15;
		text-transform: uppercase;
		color: var(--mm-sauge-700);
	}
	.mm-timeline__text {
		margin: 0;
		font-family: var(--mm-font-body);
		font-size: var(--mm-fs-p);
		line-height: 1.5;
		color: var(--mm-olive-900);
	}
	.mm-timeline__text p { margin: 0; line-height: 1.5; }
	.mm-timeline__text > * + * { margin-block-start: var(--mm-paragraph-gap); }
	.mm-timeline__text a { color: inherit; text-decoration: underline; }
	.mm-timeline__text ul,
	.mm-timeline__text ol { margin: 0; padding-inline-start: 1.25em; }

	/* --- Image --- */
	.mm-timeline__img {
		width: 100%;
		aspect-ratio: 737 / 471;
		object-fit: cover;
		display: block;
	}
}