/**
 * Section : Fiche produit + carrousel sticky.
 * D'après le design Figma "Main Container".
 */

@layer sections {
	.mm-product__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--mm-space-section); /* 40px */
	}

	/* Encadré principal (fond sauge) : contenu à gauche + média à droite.
	   Placement explicite : header/badges (haut) et blocs (bas) en colonne
	   gauche, média en colonne droite sur toute la hauteur. */
	.mm-product__details {
		width: 100%;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 42.625rem); /* média ~682px */
		gap: var(--mm-space-hero);
		align-items: start;
		padding: var(--mm-space-hero);
		background-color: var(--mm-color-tint-3); /* sauge-200 */
		color: var(--mm-color-on-tint);
	}
	.mm-product__content { grid-column: 1; grid-row: 1; }
	.mm-product__blocks  { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: var(--mm-space-large); }
	.mm-product__media   { grid-column: 2; grid-row: 1 / span 2; }

	@media (max-width: 64rem) {
		.mm-product__details { grid-template-columns: 1fr; }
		/* Mobile : ordre du DOM → header/badges, puis média, PUIS les blocs. */
		.mm-product__content,
		.mm-product__media,
		.mm-product__blocks { grid-column: 1; grid-row: auto; }
	}

	/* --- Colonne contenu --- */
	.mm-product__content {
		display: flex;
		flex-direction: column;
		gap: var(--mm-space-bloc); /* header ↔ badges (32px) */
	}
	.mm-product__header { display: flex; flex-direction: column; gap: var(--mm-space-list); align-items: flex-start; }
	.mm-product__overline {
		margin: 0;
		font-family: var(--mm-font-heading);
		font-weight: 500;
		font-size: var(--mm-fs-h6); /* 20px */
		text-transform: uppercase;
		color: var(--mm-feuille-900);
	}
	.mm-product__title {
		margin: 0;
		font-family: var(--mm-font-heading);
		font-weight: 500;
		font-size: clamp(2.5rem, 3.3vw, 4rem); /* → 64px */
		letter-spacing: 0.04em;
		line-height: 1.2;
		color: var(--mm-feuille-800);
	}

	/* Badges (origine, label bio…). */
	.mm-product__badges {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--mm-space-md);
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.mm-product__badge {
		display: flex;
		align-items: center;
		gap: var(--mm-space-2xs);
		font-family: var(--mm-font-heading);
		text-transform: uppercase;
		color: var(--mm-olive-900);
	}
	.mm-product__badge + .mm-product__badge {
		padding-inline-start: var(--mm-space-md);
		border-inline-start: 1px solid var(--mm-feuille-900);
	}
	.mm-product__badge-icon { width: auto; height: 3.5rem; }
	.mm-product__badge-label { line-height: 1.14; letter-spacing: 0.04em; }
	/* « Origine France » : texte plus petit, empilé sur deux lignes (cf. design). */
	.mm-product__badge--origine .mm-product__badge-label { font-size: 0.85em; }

	/* --- Blocs de contenu (répéteur) --- */
	.mm-product__block { display: flex; flex-direction: column; gap: var(--mm-space-bloc); }
	.mm-product__block-title {
		margin: 0;
		font-family: var(--mm-font-heading);
		font-weight: 600;
		font-size: 2rem; /* 32px */
		text-transform: uppercase;
		color: var(--mm-olive-900);
	}
	.mm-product__block-text {
		font-family: var(--mm-font-body);
		font-weight: 300; /* Light */
		font-size: var(--mm-fs-p);
		color: var(--mm-olive-900);
	}
	.mm-product__block-text p { margin: 0; line-height: 1.5; }

	.mm-product__features { display: flex; flex-direction: column; gap: var(--mm-space-bloc); margin: 0; padding: 0; list-style: none; }
	.mm-product__feature {
		display: flex;
		align-items: center;
		gap: var(--mm-space-l); /* 20px */
		font-family: var(--mm-font-body);
		font-weight: 300;
		font-size: var(--mm-fs-p);
		color: var(--mm-olive-900);
	}
	.mm-product__feature-picto { display: inline-flex; flex-shrink: 0; color: var(--mm-olive-900); }

	/* --- Média : carrousel sticky (scrolle jusqu'au bas de l'encadré) --- */
	.mm-product__media {
		position: sticky;
		inset-block-start: calc(var(--mm-header-h) + var(--mm-space-md));
		align-self: start;
	}
	@media (max-width: 64rem) {
		/* Carrousel en flux + cadré/centré (évite l'image plein cadre géante
		   sur tablette/iPad ; sans effet sur téléphone où la largeur est < 30rem). */
		.mm-product__media { position: static; max-width: 30rem; margin-inline: auto; width: 100%; }
	}

	/* ===== Carrousel (molecule) ===== */
	.mm-carousel__viewport { overflow: hidden; }
	.mm-carousel__track {
		display: flex;
		margin: 0;
		padding: 0;
		list-style: none;
		transition: transform var(--mm-transition);
	}
	.mm-carousel__slide {
		flex: 0 0 100%;
		min-width: 0;
	}
	.mm-carousel__img {
		display: block;
		width: 100%;
		aspect-ratio: 682 / 683;
		object-fit: cover;
	}
	.mm-carousel__dots {
		display: flex;
		justify-content: center;
		gap: var(--mm-space-2xs);
		margin-block-start: var(--mm-space-list);
	}
	.mm-carousel__dot {
		width: 0.75rem;
		height: 0.75rem;
		padding: 0;
		border: 0;
		border-radius: var(--mm-radius-full);
		background-color: var(--mm-feuille-900);
		opacity: 0.35;
		cursor: pointer;
		transition: opacity var(--mm-transition);
	}
	.mm-carousel__dot[aria-current="true"] { opacity: 1; }
	.mm-carousel__dot:hover,
	.mm-carousel__dot:focus-visible { opacity: 0.7; }
}