/* Section « Notre histoire » : frise chronologique */
.histoire {
	padding-block: var(--section-space);
}

.histoire__grid {
	display: grid;
	gap: clamp(32px, 5vw, 72px);
	max-width: 1180px;
}

.histoire__intro .pill {
	margin-bottom: 14px;
}

.histoire__title {
	font-size: var(--fs-h2);
}

.histoire__text {
	max-width: 44ch;
	margin-top: 14px;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--c-text);
}

.histoire__image {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-top: 28px;
	border-radius: 12px;
}

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

/* Frise : ligne verticale et pastilles */
.histoire__steps {
	position: relative;
	display: grid;
	gap: clamp(18px, 2.2vw, 26px);
	margin: 0;
	padding: 0 0 0 36px;
	list-style: none;
}

.histoire__steps::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 7px;
	width: 2px;
	background: linear-gradient(var(--c-gold), var(--c-cream));
}

.histoire__step {
	position: relative;
	padding: 22px 24px;
	border-radius: 12px;
	background: var(--c-ivory);
}

.histoire__step::before {
	content: "";
	position: absolute;
	top: 28px;
	left: -36px;
	width: 16px;
	height: 16px;
	border: 3px solid var(--c-white);
	border-radius: 50%;
	background: var(--c-gold);
	box-shadow: 0 0 0 2px var(--c-gold);
}

.histoire__date {
	display: inline-block;
	margin-bottom: 8px;
	padding: 3px 12px;
	border-radius: var(--radius-pill);
	background: var(--c-gold-tint);
	font-size: 0.8125rem;
	font-weight: 600;
	color: #8a6418;
}

.histoire__step-title {
	font-size: 1.25rem;
	font-weight: 500;
}

.histoire__step-text {
	margin-top: 8px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--c-text);
}

@media (min-width: 1024px) {
	.histoire__grid {
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
		align-items: start;
	}

	/* L'introduction reste visible pendant que l'on parcourt la frise. */
	.histoire__intro {
		position: sticky;
		top: calc(var(--admin-bar, 0px) + var(--header-top, 16px) + var(--header-h, 56px) + 32px);
	}
}