/*
 * Bloc « frise chronologique ». Defilement via la primitive partagee mx-slider (mx-slider.css + mx-slider.js)
 * en MODE FINI (data-mx-slider-loop="false"). Ce fichier ne porte QUE le layout du bloc : fond sombre + motif,
 * en-tete contraint, rangee de jalons ferree a gauche sur le contenu et debordant a droite (bleed), ligne
 * horizontale continue + points (decoratifs). Cotes reprises de la maquette.
 */

.mx-timeline {
	/* Inset gauche = bord gauche du contenu contraint (aligne en-tete et 1er jalon). Le track deborde a droite. */
	--mx-slider-pad-x: var(--wp--preset--spacing--60); /* 104 */
	--mx-slider-inset: max(var(--mx-slider-pad-x), calc((100% - var(--wp--style--global--wide-size, 1400px)) / 2 + var(--mx-slider-pad-x)));
	--mx-timeline-dot: var(--wp--preset--color--orange-dark); /* point de la ligne (accent de marque) */

	position: relative;
	overflow: hidden; /* clippe le motif + le debordement du track au bord droit */
	padding-block: var(--wp--preset--spacing--55); /* 80 (cote Figma) */
	background-color: var(--wp--preset--color--grey-dark); /* fond sombre */
	color: var(--wp--preset--color--white);
}

/* Motif repete par-dessus le fond (opacite reconstruite en CSS, methode §4). */
.mx-timeline::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("../images/motif-M.png");
	background-repeat: repeat;
	background-position: left var(--mx-motif-y, 0px); /* deriveur doux via la couche d'anim */
	background-size: 532px 203px; /* cote Figma */
	opacity: var(--wp--custom--motif--opacity); /* 0.08 */
}

/* En-tete : contraint et centre. */
.mx-timeline__inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	padding-inline: var(--mx-slider-pad-x); /* 104 */
}

.mx-timeline__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40); /* 24 */
}

.mx-timeline__intro {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20); /* 8 */
}

.mx-timeline__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--title); /* 28 */
	line-height: 1;
	color: var(--wp--preset--color--white);
}

/* Navigation en haut a droite (fleches communes mx-slider.css). Sur fond sombre : fond transparent +
   contour clair (le chevron blanc ressort ; survol orange herite de la primitive ; desactivees aux bornes). */
.mx-timeline .mx-slider__nav {
	display: flex;
	gap: var(--wp--preset--spacing--30); /* 16 */
	flex: 0 0 auto;
}

.mx-timeline .mx-slider__nav-prev,
.mx-timeline .mx-slider__nav-next {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--grey-light);
}

/* Rangee de jalons : ferree a gauche sur le contenu (marge, pour clipper a l'inset), deborde a droite. */
.mx-timeline .mx-slider__viewport {
	position: relative;
	z-index: 2;
	margin-block-start: var(--wp--preset--spacing--50); /* 40 : ecart en-tete / frise */
	margin-inline-start: var(--mx-slider-inset);
}

/* Piste : gap entre jalons + LIGNE horizontale continue (::after, pleine largeur du track, deborde avec lui). */
.mx-timeline__track {
	position: relative;
	/* La boite du track prend la largeur de SON CONTENU (sinon un conteneur flex se limite a la largeur du
	   viewport et les jalons debordent sa boite : le trait ::after, en left:0/right:0, s'arreterait alors au
	   bord du viewport, pas au dernier jalon, surtout en responsive). */
	width: max-content;
	gap: 54px; /* cote Figma */
	align-items: stretch; /* jalons de meme hauteur -> bas alignes -> ligne + points alignes */
}

.mx-timeline__track::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px; /* centre sur les points */
	height: 1px;
	background-color: var(--wp--preset--color--white);
	z-index: 0;
}

/* Jalon : contenu ferre a gauche en haut, point sur la ligne en bas a gauche. */
.mx-timeline__jalon {
	position: relative;
	flex: 0 0 232px; /* cote Figma */
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20); /* 8 */
	padding-block-end: var(--wp--preset--spacing--45); /* 32 : reserve la zone ligne + point (zero CLS) */
	z-index: 1;
}

/* Point orange sur la ligne (decoratif : pas un champ). */
.mx-timeline__jalon::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 12.5px; /* 7px de diametre centre sur la ligne (bottom 16) */
	width: 7px; /* cote Figma */
	height: 7px;
	border-radius: 50%;
	background-color: var(--mx-timeline-dot);
	z-index: 1;
}

.mx-timeline__annee {
	margin: 0;
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--title); /* 28 (cote Figma) */
	line-height: 1;
	color: var(--wp--preset--color--white);
}

.mx-timeline__texte {
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
	color: var(--wp--preset--color--white);
}

.mx-timeline__texte p {
	margin: 0;
}

.mx-timeline__texte strong {
	font-weight: 700;
}

/* ---- Responsive : inset reduit, frise defilable au doigt ---- */
@media (max-width: 900px) {
	.mx-timeline {
		--mx-slider-pad-x: var(--wp--preset--spacing--40); /* 24 */
		padding-block: var(--wp--preset--spacing--55); /* 80 */
	}
}