@layer base {
/**
 * Styles des éléments HTML nus (sans classe).
 */

body {
	font-family: var(--mm-font-base);
	font-size: var(--mm-fs-200);
	color: var(--mm-color-text);
	background-color: var(--mm-color-bg);
	/* Garde-fou anti-débordement horizontal (n'établit PAS de conteneur de
	   défilement → l'en-tête sticky reste intact, contrairement à overflow:hidden). */
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mm-font-heading);
	line-height: var(--mm-lh-tight);
	font-weight: 600; /* SemiBold (titres de section) ; le hero surcharge en 700 */
	text-transform: uppercase; /* titres condensés en capitales (cf. maquette) */
	text-wrap: balance;
}

h1 { font-size: var(--mm-fs-500); }
h2 { font-size: var(--mm-fs-400); }
h3 { font-size: var(--mm-fs-300); }

p { max-width: 68ch; }

a {
	color: var(--mm-color-primary);
	text-underline-offset: 0.15em;
}
a:hover { text-decoration: none; }

/* Focus visible homogène et accessible (RGAA). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--mm-focus-width) solid var(--mm-color-focus);
	outline-offset: 2px;
	border-radius: var(--mm-radius-sm);
}
}