/**
 * Section : Image + formulaire de contact.
 * D'après le design Figma "Contact Image Container".
 */

@layer sections {
	.mm-contact-form__inner {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--mm-space-m); /* 16px */
		align-items: stretch;
	}
	@media (min-width: 62rem) {
		.mm-contact-form__inner { grid-template-columns: 1fr 1fr; }
		.mm-contact-form--img-right .mm-contact-form__media { order: 1; }
	}

	/* --- Image (remplit la hauteur du panneau) --- */
	.mm-contact-form__media { position: relative; min-height: 20rem; }
	.mm-contact-form__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	@media (max-width: 62rem) {
		.mm-contact-form__media { position: static; }
		.mm-contact-form__img { position: static; aspect-ratio: 737 / 500; }
	}

	/* --- Panneau formulaire --- */
	.mm-contact-form__panel {
		display: flex;
		flex-direction: column;
		gap: var(--mm-space-bloc); /* 32px */
		justify-content: center;
		padding: clamp(var(--mm-space-xl), 5vw, var(--mm-space-large)) clamp(var(--mm-space-md), 4vw, var(--mm-space-large));
		background-color: var(--mm-neutral-100b); /* #f2f2f2 (maquette) */
	}
	.mm-contact-form__title {
		margin: 0;
		font-family: var(--mm-font-body); /* DM Sans (pas Barlow) cf. maquette */
		font-weight: 700;
		font-size: var(--mm-fs-400); /* → 49px */
		line-height: 1.1;
		text-transform: none;
		color: var(--mm-olive-900);
	}
	.mm-contact-form__intro { margin: 0; font-size: var(--mm-fs-p); line-height: 1.5; color: var(--mm-color-text); }
	.mm-contact-form__note { margin: 0; font-size: var(--mm-fs-p); color: var(--mm-neutral-700); }
}