/* =========================================================
   MLT AUTRES PRODUITS — offre complémentaire, poids visuel volontairement
   inférieur aux sections huile : photo à gauche, liste à filets à droite.
   Dépend de mlt-tokens.
   ========================================================= */

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

/* Suit la section Terroir (même fond blanc) : sous 1280 px sa marge basse suffit, pas de double
   respiration ; dès 1280 px le Terroir se termine sur sa photo → marge haute normale (voir plus bas). */
.mlt-autres > .mlt-section__inner {
	padding-top: 0;
}

.mlt-autres__inner {
	display: grid;
	gap: var(--mlt-space-48);
}

/* Titre un cran en dessous des sections principales */
.mlt-page .mlt-autres .mlt-h2 {
	font-size: clamp(2rem, 3.4vw, 3rem);
}

.mlt-autres__photo {
	overflow: hidden;
	aspect-ratio: 4 / 5;
	max-height: 640px;
	border-radius: var(--mlt-radius-panel);
	background: var(--mlt-color-fond);
}

.mlt-autres .mlt-autres__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.mlt-autres__liste {
	margin: var(--mlt-space-32) 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--mlt-color-ligne);
}

.mlt-autres__produit {
	padding: var(--mlt-space-24) 0;
	border-bottom: 1px solid var(--mlt-color-ligne);
}

.mlt-page .mlt-autres__nom {
	margin: 0 0 var(--mlt-space-4);
	color: var(--mlt-color-olive);
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.mlt-autres__detail {
	margin: 0;
	color: var(--mlt-color-texte);
}

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

@media (min-width: 768px) {
	.mlt-autres__photo {
		aspect-ratio: 16 / 10;
	}
}

@media (min-width: 1024px) {
	.mlt-autres__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--mlt-space-96);
		align-items: center;
	}

	.mlt-autres__photo {
		aspect-ratio: 4 / 5;
	}
}

@media (min-width: 1280px) {
	.mlt-autres > .mlt-section__inner {
		padding-top: var(--mlt-section-pad);
	}
}