/**
 * Section : Hero (image plein écran + overlay + texte).
 * D'après le design Figma "Hero Image".
 */

@layer sections {
	.mm-hero {
		position: relative;
		display: flex;
		align-items: center;                 /* contenu centré verticalement */
		min-height: calc(100vh - var(--mm-header-h));
		min-height: calc(100dvh - var(--mm-header-h)); /* gère la barre d'adresse mobile */
		overflow: hidden;
		isolation: isolate;                  /* borne le mix-blend de l'overlay */
		/* Pas d'espacement de section : le contenu gère son propre padding-block. */
		--mm-section-pt: 0;
		--mm-section-pb: 0;
		--mm-section-bg: transparent;        /* l'image de fond doit rester visible */
		--mm-section-color: var(--mm-neutral-50);
	}
	/* Mobile : le hero ne prend plus toute la hauteur, ~70 % de l'écran. */
	@media (max-width: 48rem) {
		.mm-hero {
			min-height: 70vh;
			min-height: 70dvh;
		}
	}

	/* --- Fond plein écran --- */
	.mm-hero__bg {
		position: absolute;
		inset: 0;
		z-index: -1;
	}
	.mm-hero__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: bottom;             /* "object-bottom" du design */
	}
	.mm-hero__overlay {
		position: absolute;
		inset: 0;
		/* Dégradé de lisibilité (RGAA) : le texte est aligné à gauche, on assombrit
		   donc ce côté (~65→55 %) pour garantir le contraste du texte clair même
		   sur les zones claires de l'image (ciel), tout en laissant l'image visible
		   à droite (~22 %). Ratios (texte neutral-50, pire cas fond blanc) :
		   65 % → ~6,8:1 · 55 % → ~4,7:1 · 45 % → ~3,5:1 (texte « grand », seuil 3:1). */
		background-color: var(--mm-color-hero-overlay); /* repli navigateurs sans gradient */
		background-image: linear-gradient(
			90deg,
			rgb(17 17 17 / 65%) 0%,
			rgb(17 17 17 / 55%) 45%,
			rgb(17 17 17 / 22%) 100%
		);
	}

	/* --- Contenu --- */
	.mm-hero__inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--mm-space-s);              /* 12px */
		padding-block: var(--mm-space-big-page); /* respiration haute (header) */
	}

	.mm-hero__title {
		max-width: 18em;                     /* large : ne force pas le retour à la ligne */
		font-weight: 700;                    /* Bold (cf. maquette hero) */
		font-size: var(--mm-fs-500);         /* → 95px */
		letter-spacing: 0.05em;              /* ~4.75px @ 95px */
		color: var(--mm-neutral-50);
	}

	.mm-hero__subtitle {
		max-width: 34em;
		margin: 0;
		font-family: var(--mm-font-body);
		font-size: clamp(1.05rem, 1.46vw, 1.75rem); /* → 28px @1920 */
		font-weight: 400;
		font-variation-settings: "opsz" 9, "wght" 400; /* traits fins (comme Figma) */
		line-height: 1.25;
		color: var(--mm-neutral-50);
	}

	/* --- Bouton contextualisé pour fond sombre ---
	   Base : outline clair ; survol : rempli lime (printemps-500), texte foncé. */
	.mm-hero .mm-button {
		margin-block-start: var(--mm-space-list); /* 24px */
		--mm-btn-color: var(--mm-neutral-50);
		--mm-btn-border: var(--mm-neutral-50);
		--mm-btn-color-hover: var(--mm-color-on-primary); /* vert foncé */
		--mm-btn-bg-hover: var(--mm-color-primary);       /* lime */
		--mm-btn-border-hover: var(--mm-color-primary);
	}
}