/**
 * Section : En-tête de page.
 * D'après le design Figma "Hero Image" (bannière de page interne).
 */

@layer sections {
	.mm-page-header {
		/* Plein cadre : pas d'espacement de section, la carte gère sa marge. */
		--mm-section-pt: 0;
		--mm-section-pb: 0;
		position: relative;
		isolation: isolate;
		overflow: hidden;
		display: flex;
		align-items: center; /* carte centrée verticalement */
		min-height: calc(100vh - var(--mm-header-h));
		min-height: calc(100dvh - var(--mm-header-h));
	}
	/* Mobile : ne prend plus toute la hauteur, ~70 % de l'écran (comme le hero). */
	@media (max-width: 48rem) {
		.mm-page-header {
			min-height: 70vh;
			min-height: 70dvh;
		}
	}

	/* Image plein cadre. */
	.mm-page-header__bg {
		position: absolute;
		inset: 0;
		z-index: -1;
	}
	.mm-page-header__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Carte titre + description (alignée à gauche via le .container). */
	.mm-page-header__inner { display: flex; }
	.mm-page-header__card {
		width: min(100%, 36.625rem); /* 586px */
		display: flex;
		flex-direction: column;
		gap: var(--mm-space-page); /* 56px */
		padding: var(--mm-space-hero); /* 64px */
		background-color: var(--mm-color-bg-alt); /* neutral-50 */
		color: var(--mm-color-on-tint);
	}

	.mm-page-header__title {
		margin: 0;
		font-weight: 700;
		font-size: var(--mm-fs-500); /* ~95/96px @1920 (taille conservée ; c'est la carte qui s'élargit) */
		letter-spacing: 0.04em;
		line-height: 1.1;
		text-wrap: balance; /* équilibre les 2 lignes */
		overflow-wrap: break-word;
		color: var(--mm-color-on-tint);
	}

	.mm-page-header__desc {
		margin: 0;
		font-family: var(--mm-font-body);
		font-size: clamp(1.125rem, 1.25vw, 1.5rem); /* → 24px @1920 */
		line-height: 1.35;
		color: var(--mm-color-on-tint);
	}
}