@layer atoms {
/**
 * Atom : bouton (d'après le composant Figma "Button").
 *
 * ⚠️ CSS natif : PAS de concaténation façon Sass (&--x / &__y ne fonctionne pas).
 * On utilise des sélecteurs complets.
 *
 * API de couleurs par variables → une section peut recolorer le bouton
 * (base ET survol) sans casser l'état :hover de l'atom :
 *   --mm-btn-color / --mm-btn-bg / --mm-btn-border
 *   --mm-btn-color-hover / --mm-btn-bg-hover / --mm-btn-border-hover
 */

.mm-button {
	/* Valeurs par défaut (surchargées par le contexte / les variantes). */
	--mm-btn-color: var(--mm-color-brand-dark);
	--mm-btn-bg: transparent;
	--mm-btn-border: var(--mm-color-black);
	--mm-btn-color-hover: var(--mm-printemps-50);
	--mm-btn-bg-hover: var(--mm-color-brand-dark);
	--mm-btn-border-hover: var(--mm-color-brand-dark);

	display: inline-flex;
	align-items: center;
	gap: var(--mm-space-s);
	padding-block: var(--mm-space-s);
	padding-inline: var(--mm-space-m) var(--mm-space-list);
	width: fit-content;

	font-family: var(--mm-font-body);
	font-weight: 400;
	font-size: var(--mm-fs-p);
	line-height: var(--mm-lh-tight);
	text-decoration: none;
	white-space: nowrap;

	color: var(--mm-btn-color);
	background-color: var(--mm-btn-bg);
	border: 1px solid var(--mm-btn-border);
	border-radius: var(--mm-radius-full);
	cursor: pointer;
	transition:
		background-color var(--mm-transition),
		border-color var(--mm-transition),
		color var(--mm-transition);
}

/* État survol / focus clavier. */
.mm-button:hover,
.mm-button:focus-visible {
	color: var(--mm-btn-color-hover);
	background-color: var(--mm-btn-bg-hover);
	border-color: var(--mm-btn-border-hover);
}

/* Picto flèche (hérite la couleur via currentColor). */
.mm-button__picto {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.mm-button__picto svg { width: 10px; height: 10px; } /* taille md */

/* Tailles. */
.mm-button--lg { font-size: var(--mm-fs-lg); } /* 18px */
.mm-button--lg .mm-button__picto svg { width: 12px; height: 12px; }
.mm-button--md { font-size: var(--mm-fs-p); }   /* 16px */

/* Variantes de couleur (API de variables). */
/* Plein olive, texte clair. Au survol : inversion (fond clair, texte olive). */
.mm-button--solid {
	--mm-btn-color: var(--mm-neutral-50);
	--mm-btn-bg: var(--mm-olive-900);
	--mm-btn-border: var(--mm-olive-900);
	--mm-btn-color-hover: var(--mm-olive-900);
	--mm-btn-bg-hover: var(--mm-neutral-50);
	--mm-btn-border-hover: var(--mm-olive-900);
}
/* Contour feuille-900, se remplit au survol. */
.mm-button--outline {
	--mm-btn-color: var(--mm-feuille-900);
	--mm-btn-border: var(--mm-feuille-900);
	--mm-btn-color-hover: var(--mm-neutral-50);
	--mm-btn-bg-hover: var(--mm-feuille-900);
	--mm-btn-border-hover: var(--mm-feuille-900);
}
}