/* Didatec — bloc « frise historique ».
   Chargé uniquement quand le bloc est présent (enqueue_style ACF). */

/* Figma 12223:3951 : bandeau photo, titre en haut à gauche, jalons en bas. */

.timeline {
	/* Gouttière du conteneur, recalculée ici : le rail des jalons est pleine
	   largeur pour filer jusqu'au bord de l'écran, il ne peut donc pas hériter
	   du padding de .container. */
	--timeline-gutter: calc(
		max(0px, 100% - var(--wp--style--global--wide-size)) / 2 + var(--wp--preset--spacing--70)
	);
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--80);
	min-height: 642px;
	padding-block: var(--wp--preset--spacing--90);
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.timeline__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* Un voile sombre garantit la lisibilité quelle que soit la photo déposée. */
.timeline__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.3) 30%,
		rgba(0, 0, 0, 0.7) 55%,
		rgba(0, 0, 0, 0.7) 100%
	);
}

.timeline__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.timeline__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--80);
	flex: 1 1 auto;
}

.timeline__head {
	padding-inline: var(--timeline-gutter);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.timeline__title {
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.timeline__nav {
	display: none;
	gap: 8px;
}

.timeline.is-scrollable .timeline__nav { display: flex; }

.timeline__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	border: 1px solid var(--wp--preset--color--white-20);
	border-radius: 5px;
	background: none;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* La maquette n'appuie que la flèche « suivant » : contour seul à gauche,
   bouton plein à droite. */
.timeline__arrow[data-carousel-next] {
	border-color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.timeline__arrow .icon { width: 17px; height: 17px; }

.timeline__arrow:hover,
.timeline__arrow:focus-visible {
	border-color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.timeline__arrow[disabled] {
	cursor: default;
	opacity: 0.5;
}

.timeline__arrow[disabled]:hover {
	border-color: var(--wp--preset--color--white-20);
	background: none;
	color: var(--wp--preset--color--white);
}

.timeline__arrow[data-carousel-next][disabled]:hover {
	border-color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

/* Le rail déborde jusqu'aux bords de l'écran quand les cartes ne tiennent pas :
   les jalons entrent et sortent du cadre au lieu d'être coupés par le
   conteneur. Au repos la première carte reste alignée sur la gouttière. */
.timeline__list {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	padding-inline: var(--timeline-gutter);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--timeline-gutter);
	scrollbar-width: none;
}

.timeline__list::-webkit-scrollbar { display: none; }

.timeline__item {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 0 0 337px;
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--white-30);
	border-radius: 5px;
	scroll-snap-align: start;
}

.timeline__year {
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
}

.timeline__text {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	color: var(--wp--preset--color--white);
}

@media (min-width: 1024px) {
	.timeline .carousel-dots { display: none; }
}

@media (max-width: 1023px) {
	.timeline {
		/* Figma 12235:2977 : 663px de haut, 40px de padding vertical. */
		min-height: 663px;
		gap: var(--wp--preset--spacing--60);
		padding-block: 40px;
	}

	/* Les puces situent la position dans la frise, que les flèches seules ne
	   donnent pas sur un écran qui n'affiche qu'une carte. */
	.timeline .carousel-dots__dot::before {
		background-color: var(--wp--preset--color--white-20);
	}

	.timeline .carousel-dots__dot.is-active::before {
		background-color: var(--wp--preset--color--white);
	}

	.timeline__item { flex: 0 0 calc((100% - 2 * var(--timeline-gutter) - 16px) / 2); }
}

@media (max-width: 599px) {
	.timeline__item { flex: 0 0 calc(100% - 2 * var(--timeline-gutter)); }
}