/* =========================================================
   MLT TERROIR — photo pleine largeur + panneau blanc qui la chevauche.
   Dépend de mlt-tokens.
   ========================================================= */

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

.mlt-terroir__photo {
	position: relative;
	height: clamp(320px, 62vw, 760px);
	overflow: hidden;
	background: var(--mlt-color-fond);
}

.mlt-terroir .mlt-terroir__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 60%;
}

.mlt-terroir__inner {
	position: relative;
	z-index: 1;
	max-width: var(--mlt-section-max);
	margin: 0 auto;
	padding: 0 var(--mlt-edge) var(--mlt-section-pad);
}

.mlt-terroir__panneau {
	position: relative;
	margin-top: calc(-1 * var(--mlt-space-64));
	padding: var(--mlt-space-32) var(--mlt-space-24);
	border-radius: var(--mlt-radius-panel);
	background: var(--mlt-color-blanc);
}

.mlt-terroir__regions {
	display: grid;
	gap: var(--mlt-space-16);
	margin: var(--mlt-space-32) 0 var(--mlt-space-16);
}

.mlt-terroir__region {
	padding-top: var(--mlt-space-16);
	border-top: 1px solid var(--mlt-color-ligne);
}

.mlt-terroir__region dt {
	color: var(--mlt-color-olive);
	font-weight: 700;
}

/* Repère ocre devant chaque région (point sur la carte) */
.mlt-terroir__region dt::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: var(--mlt-space-8);
	border: 2px solid var(--mlt-color-ocre);
	border-radius: 50%;
	background: var(--mlt-color-blanc);
	box-shadow: 0 0 0 3px var(--mlt-color-fond);
	vertical-align: 0;
}

.mlt-terroir__region dd {
	margin: var(--mlt-space-4) 0 0;
	color: var(--mlt-color-texte-doux);
	font-size: var(--mlt-fs-small);
}

@media (min-width: 768px) {
	.mlt-terroir__regions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--mlt-space-24);
	}
}

@media (min-width: 1280px) {
	/* Panneau posé dans le bas de la photo, à gauche (l'olivier reste visible à droite) :
	   plus de vide blanc à côté du panneau, la section s'arrête au bas de la photo. */
	.mlt-terroir {
		position: relative;
	}

	.mlt-terroir__photo {
		height: clamp(680px, 56vw, 820px);
	}

	.mlt-terroir__inner {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: flex-end;
		width: 100%;
		padding: 0 var(--mlt-edge) var(--mlt-space-64);
	}

	.mlt-terroir__panneau {
		width: min(640px, 52%);
		margin: 0;
		padding: var(--mlt-space-48);
	}
}