/**
 * Site-wide pill button (.btn, + .btn--fill/.btn--line), border-radius:100px.
 * Originally the front page's own "BOUTONS" block (hero CTAs); moved here
 * once page-a-propos.php needed the exact same button shape for "Trois
 * façons d'entrer", so both templates load one definition instead of two.
 *
 * .btn's transition:transform exists for [data-magnetic] (assets/scripts/
 * main.js) — the front page's hero CTAs use it, page-a-propos.php's don't,
 * that's fine, the class works with or without it.
 */

.btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .95rem 1.6rem;
	border-radius: 100px;
	font-size: 1rem;
	font-weight: 500;
	transition: transform .3s var(--ease), background .3s, color .3s;
}

.btn--fill {
	background: var(--ink);
	color: var(--paper);
}

.btn--fill:hover {
	background: var(--accent);
}

.btn--line {
	border: 2px solid var(--paper);
}

.btn--line:hover {
	border-color: var(--flash);
	background: var(--flash);
	color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
	.btn {
		transition-duration: .01ms;
	}
}