/**
 * Section : Nos engagements.
 * D'après le design Figma "Section Content Container" (fond vert clair).
 */

@layer sections {
	.mm-engagements {
		/* Grand espacement par défaut (surchargé par le contrôle ACF). */
		--mm-section-pt: var(--mm-section-space-large);
		--mm-section-pb: var(--mm-section-space-large);
		--mm-section-bg: var(--mm-color-tint-3);
		--mm-section-color: var(--mm-color-on-tint);
	}

	.mm-engagements__inner {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--mm-space-hero); /* 64px */
		align-items: center;
	}
	@media (min-width: 62rem) {
		.mm-engagements__inner {
			grid-template-columns: 1fr 1.6fr;
		}
	}

	/* --- Colonne texte --- */
	.mm-engagements__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--mm-space-bloc); /* 32px */
	}
	.mm-engagements__title {
		margin: 0;
		font-size: var(--mm-fs-400); /* → 49px */
		line-height: 1.2;
		color: var(--mm-color-on-tint);
	}
	.mm-engagements__text {
		font-size: var(--mm-fs-p);
		color: var(--mm-color-on-tint);
	}
	.mm-engagements__text p {
		margin: 0;
		line-height: 1.5;
		max-width: 48ch;
	}
	.mm-engagements .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);
	}

	/* --- Bulles --- */
	.mm-engagements__bubbles {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
		gap: var(--mm-space-bloc);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mm-bubble {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--mm-space-xl); /* 48px */
	}

	.mm-bubble__circle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 12rem;
		aspect-ratio: 1;
		padding: var(--mm-space-sm);
		border-radius: var(--mm-radius-full);
		background-color: var(--mm-olive-900);
		text-align: center;
	}
	.mm-bubble__label {
		font-family: var(--mm-font-heading);
		font-weight: 500;
		text-transform: uppercase;
		font-size: var(--mm-fs-h6); /* 20px */
		line-height: 1.1;
		color: var(--mm-neutral-50);
	}

	.mm-bubble__desc {
		margin: 0;
		font-family: var(--mm-font-body);
		font-size: var(--mm-fs-lg); /* 18px */
		line-height: 1.3;
		color: var(--mm-color-on-tint);
	}
}