@layer utilities {
/**
 * Utilitaires transverses.
 */

/* Conteneur centré.
   Largeur = exactement --mm-container-max sur grand écran (aucun padding en trop),
   le padding ne sert que de gouttière quand la fenêtre est plus étroite. */
.container {
	width: min(100% - (var(--mm-container-pad) * 2), var(--mm-container-max));
	margin-inline: auto;
}

/* Masquage visuel accessible (reste lisible pour les lecteurs d'écran). */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Skip-link : caché puis révélé au focus clavier. */
.skip-link:focus {
	position: fixed;
	inset-block-start: var(--mm-space-2xs);
	inset-inline-start: var(--mm-space-2xs);
	z-index: 1000;
	padding: var(--mm-space-2xs) var(--mm-space-sm);
	background: var(--mm-color-bg);
	color: var(--mm-color-text);
	box-shadow: var(--mm-shadow-1);
	border-radius: var(--mm-radius-sm);
}

/* Rythme vertical des sections.
   Padding piloté par deux custom properties (--mm-section-pt / --mm-section-pb).
   - Par défaut : "default" (6rem) en haut et en bas.
   - Chaque section peut redéfinir ses valeurs par défaut (voir *.css de section).
   - Le contrôle ACF "Modifier l'espacement" ajoute les classes ci-dessous
     (couche utilities → priorité sur les valeurs de section). */
.mm-section {
	padding-block:
		var(--mm-section-pt, var(--mm-section-space-default))
		var(--mm-section-pb, var(--mm-section-space-default));
	/* Fond/couleur via variables → une section peut les redéfinir sans être
	   écrasée par cette règle (problème d'ordre des @layer). */
	background-color: var(--mm-section-bg, var(--mm-color-bg));
	color: var(--mm-section-color, var(--mm-color-text));
}

.mm-section--pt-none    { --mm-section-pt: var(--mm-section-space-none); }
.mm-section--pt-default { --mm-section-pt: var(--mm-section-space-default); }
.mm-section--pt-large   { --mm-section-pt: var(--mm-section-space-large); }
.mm-section--pb-none    { --mm-section-pb: var(--mm-section-space-none); }
.mm-section--pb-default { --mm-section-pb: var(--mm-section-space-default); }
.mm-section--pb-large   { --mm-section-pb: var(--mm-section-space-large); }

/* --- Page 404 --- */
.mm-404 {
	padding-block: var(--mm-space-big-page);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mm-space-large);
}
.mm-404__code {
	margin: 0;
	font-family: var(--mm-font-heading);
	font-weight: 700;
	font-size: clamp(4rem, 12vw, 9rem);
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--mm-color-primary);
}
.mm-404__title { margin: 0; }
.mm-404__text { margin: 0; }
.mm-404__nav { display: flex; flex-direction: column; gap: var(--mm-space-list); }
.mm-404__nav-title { margin: 0; font-family: var(--mm-font-heading); font-weight: 600; }
.mm-404__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-space-2xs) var(--mm-space-large);
}

/* --- index.php : liste de secours (archives éventuelles) --- */
.mm-entry-list__title { padding-block: var(--mm-space-page); }
.mm-entry__title { margin: 0 0 var(--mm-space-2xs); }
.mm-entry__excerpt { margin: 0; }
}