.myfw-button {
	--myfw-button-radius: var(--radius-small, 6px);
	--myfw-button-border-width: 1.5px;

	display: flex;
	justify-content: flex-start;
}

.myfw-button--full .myfw-button__link {
	width: 100%;
}

.myfw-button__link {
	/* Jeu de couleurs résolu ici puis relu par les variantes. */
	--_bg: var(--myfw-button-bg, var(--color-primary, #111827));
	--_fg: var(--myfw-button-color, #ffffff);
	--_bd: var(--myfw-button-border, var(--_bg));

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--myfw-button-icon-gap, 0.5em);
	padding: 0.7em 1.5em;
	border: var(--myfw-button-border-width) solid transparent;
	border-radius: var(--myfw-button-radius);
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.myfw-button__link--icon-right {
	flex-direction: row-reverse;
}

.myfw-button__icon {
	display: inline-flex;
	align-items: center;
	font-size: 1em;
	line-height: 0;
}
.myfw-button__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ---- Variantes ----
   La couleur du texte (`--myfw-button-text`, contrôle « Couleur du
   texte ») s'applique à TOUTES les variantes ; sinon chaque variante
   garde sa couleur par défaut. */
.myfw-button__link--filled {
	background-color: var(--_bg);
	color: var(--myfw-button-text, var(--_fg));
	border-color: var(--_bg);
}
.myfw-button__link--outline {
	background-color: transparent;
	color: var(--myfw-button-text, var(--_bg));
	border-color: var(--_bd);
}
.myfw-button__link--soft {
	background-color: color-mix( in srgb, var(--_bg) 14%, transparent );
	color: var(--myfw-button-text, var(--_bg));
	border-color: transparent;
}
.myfw-button__link--ghost {
	background-color: transparent;
	color: var(--myfw-button-text, var(--_bg));
	border-color: transparent;
	padding-inline: 0;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---- Verre liquide ----
   Flou + saturation du fond derrière le bouton, teinte translucide, un
   reflet en dégradé (façon lumière qui glisse sur du verre bombé) et un
   double liseré intérieur (clair en haut, sombre en bas) pour donner de
   l'épaisseur. Sans backdrop-filter, le bouton reste lisible : juste une
   teinte translucide, sans flou. */
.myfw-button__link--glass {
	--_glass-tint: var(--myfw-button-glass-tint, rgba(255, 255, 255, 0.22));
	background-color: var(--_glass-tint);
	background-image: linear-gradient( 135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55% );
	-webkit-backdrop-filter: blur( var(--myfw-button-glass-blur, 16px) ) saturate( 180% );
	backdrop-filter: blur( var(--myfw-button-glass-blur, 16px) ) saturate( 180% );
	color: var(--myfw-button-text, #ffffff);
	border-color: rgba(255, 255, 255, 0.35);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.15);
}
.myfw-button__link--glass:hover,
.myfw-button__link--glass:focus-visible {
	background-color: color-mix( in srgb, var(--_glass-tint) 100%, #ffffff 12% );
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* ---- Animations au survol ---- */
@media ( prefers-reduced-motion: no-preference ) {
	.myfw-button__link--anim-grow:hover,
	.myfw-button__link--anim-grow:focus-visible {
		transform: scale( 1.05 );
	}
	.myfw-button__link--anim-float:hover,
	.myfw-button__link--anim-float:focus-visible {
		transform: translateY( -4px );
	}
	.myfw-button__link--anim-sink:hover,
	.myfw-button__link--anim-sink:focus-visible {
		transform: translateY( 3px );
	}
}

.myfw-button__link:focus-visible {
	outline: 2px solid var(--_bg);
	outline-offset: 3px;
}

@media ( prefers-reduced-motion: reduce ) {
	.myfw-button__link {
		transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	}
}