/*
 * kp-buttons.css — Boutons mutualisés KP.
 *
 * `.kp-btn--primary` = pill orange (texte sombre) commun à tous les CTA.
 * Auto-enqueué (kp-pattern-buttons, dep kp-tokens).
 *
 * TODO refacto : migrer kp-navbar__cta / kp-hero-home__cta / kp-audience__cta
 * vers cette classe (actuellement dupliqués, visuellement identiques via tokens).
 */

.kp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--kp-space-2);
	height: 56px;
	min-width: 26rem; /* 416px — demande Morgan 2026-06-10 r3 : encore plus large */
	padding: var(--kp-space-3) 4.5rem; /* 72px horizontal */
	border-radius: var(--kp-radius-sm);
	font-family: var(--kp-font-sans);
	font-size: var(--kp-font-size-18);
	font-weight: var(--kp-font-weight-medium);
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.kp-btn--primary {
	background: var(--kp-color-brand-primary);
	border: 1px solid var(--kp-color-border-subtle);
	color: var(--kp-color-text-on-brand);
}

.kp-btn--primary:hover {
	background: var(--kp-color-brand-primary-hover);
	transform: scale(1.02);
}

.kp-btn--ghost {
	background: transparent;
	border: 1px solid var(--kp-color-text-inverse);
	color: var(--kp-color-text-inverse);
}

.kp-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
	transform: scale(1.02);
}