/**
 * Boutons et formulaire newsletter.
 * Emplacement : assets/css/components/button.css
 */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	flex-shrink: 0;
	min-height: 44px;
	padding: var(--space-3) var(--space-5);
	/* --font-body et non --font-display : Figma pose HomepageBaukasten Bold sur
	   les libellés de bouton, sans aucun fragment Eigerdals — contrairement aux
	   titres. Pointer sur --font-display les aurait fait basculer avec eux. */
	font-family: var(--font-body);
	font-size: var(--fs-body);          /* Figma : 16 px */
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-button);
	color: var(--e4y-off-white);
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	background-color: var(--e4y-green);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition:
		background-color var(--duration) var(--ease),
		color var(--duration) var(--ease),
		transform var(--duration) var(--ease);
}

.btn:hover,
.btn:focus-visible {
	background-color: var(--e4y-orange);
	transform: translateY(-1px);
}

.btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* Variante orange, dominante sur les cartes et les hero. */
.btn--accent {
	background-color: var(--e4y-orange);
}

.btn--accent:hover,
.btn--accent:focus-visible {
	background-color: var(--e4y-green);
}

/* Variante ambre, utilisée dans les cartes participants. */
.btn--amber {
	background-color: var(--e4y-amber);
}

.btn--amber:hover,
.btn--amber:focus-visible {
	background-color: var(--e4y-orange);
}

/* Variante or, utilisée pour le CTA du consortium. */
.btn--gold {
	background-color: var(--e4y-gold);
}

.btn--gold:hover,
.btn--gold:focus-visible {
	background-color: var(--e4y-green);
}

/* Variante blanc plein à texte vert, sur fond sombre (cercle du programme, hero). */
.btn--light {
	color: var(--e4y-green);
	background-color: var(--e4y-white);
	border-color: var(--e4y-white);
}

.btn--light:hover,
.btn--light:focus-visible {
	color: var(--e4y-green);
	background-color: var(--e4y-cream);
	border-color: var(--e4y-cream);
}

/* Variante contour, utilisée pour le lien WhatsApp. */
.btn--ghost {
	color: var(--e4y-green);
	background-color: transparent;
	border-color: var(--e4y-green); /* Figma : contour vert, pas gris */
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	color: var(--e4y-green);
	background-color: transparent;
	border-color: var(--e4y-green);
}


/* ------------------------------------------------------------
   Formulaire newsletter
   ------------------------------------------------------------ */

.form-newsletter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	max-width: 460px;
}

.form-newsletter__input {
	flex: 1 1 200px;
	min-height: 44px;
	padding: var(--space-3) var(--space-4);
	font-size: var(--fs-small);
	color: var(--color-text-body);
	background-color: var(--e4y-sand);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	transition: border-color var(--duration) var(--ease);
}

.form-newsletter__input::placeholder {
	color: var(--color-text-muted);
}

.form-newsletter__input:focus-visible {
	border-color: var(--e4y-green);
	outline-offset: 1px;
}

.form-newsletter__submit {
	flex: 0 0 auto;
	font-size: var(--fs-lead); /* Figma : 17.578 px ≈ --fs-lead borne basse (clamp 17→20 px) */
}

/* Icônes dans les boutons (taille globale ; surcharges contextuelles si besoin) */
.btn__icon--arrow {
	flex-shrink: 0;
	width: 17px;
	height: 13px;
}

/* Message d'administration, visible uniquement en interne. */
.form-newsletter__notice {
	max-width: 40ch;
	margin-block-start: var(--space-2);
	font-size: var(--fs-caption);
	color: var(--e4y-orange);
}