/**
 * Section : Texte + Image.
 * D'après le design Figma "Section Content Container".
 */

@layer sections {
	.mm-text-image__inner {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--mm-space-bloc);
		align-items: center;
	}

	@media (min-width: 48rem) {
		.mm-text-image__inner {
			grid-template-columns: 1fr 1fr;
			gap: clamp(var(--mm-space-xl), 6vw, var(--mm-space-big-hero)); /* → 96px */
		}
		/* Choix éditeur : image à gauche → on inverse l'ordre visuel (DOM inchangé, a11y). */
		.mm-text-image--img-left .mm-text-image__media {
			order: -1;
		}
	}

	/* --- Colonne texte --- */
	.mm-text-image__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--mm-space-bloc); /* 32px */
	}

	.mm-text-image__title {
		margin: 0;
		font-size: var(--mm-fs-400); /* → 49px (h2) */
		line-height: 1.2;
		color: var(--mm-color-on-tint);
	}

	.mm-text-image__text {
		color: var(--mm-color-on-tint);
		font-size: var(--mm-fs-p); /* 16px */
	}
	.mm-text-image__text > * + * {
		margin-block-start: var(--mm-paragraph-gap);
	}
	.mm-text-image__text p {
		line-height: 1.5;
		max-width: 60ch;
	}

	/* Bouton contextualisé (olive) : outline olive → survol rempli olive, texte clair. */
	.mm-text-image .mm-button {
		--mm-btn-color: var(--mm-color-on-tint);
		--mm-btn-border: var(--mm-color-on-tint);
		--mm-btn-color-hover: var(--mm-neutral-50);
		--mm-btn-bg-hover: var(--mm-color-on-tint);
		--mm-btn-border-hover: var(--mm-color-on-tint);
	}

	/* --- Colonne image --- */
	.mm-text-image__media {
		width: 100%;
	}
	.mm-text-image__img {
		width: 100%;
		aspect-ratio: 733 / 570;
		object-fit: cover;
		display: block;
	}
}