/**
 * css/buttons-modern.css
 *
 * Modernise les boutons (button, a.btn) du front avec 2 styles inspirés du header :
 *  - OUTLINE (défaut, sans .fill) : fond blanc, bordure + texte dans la couleur, hover inversion
 *  - PLAIN (avec .fill) : fond plein coloré, texte blanc, shadow, hover léger soulèvement
 *
 * Conserve la compat avec les tailles existantes (.secondary, .primary) et variants (.tertiary).
 */

:root {
	--btn-primary: #F64522;
	--btn-primary-dark: #d93a1a;
	--btn-primary-light: #FFF2EE;
	--btn-text: #1a1a2e;
	--btn-border: #e5e7eb;
	--btn-radius: 999px; /* pill comme le header */
	--btn-transition: 180ms ease;
	--btn-shadow-plain: 0 2px 6px rgba(246,69,34,.2);
	--btn-shadow-plain-hover: 0 4px 12px rgba(246,69,34,.3);
}

/* ─── BASE : reset de l'ancien style, on repart propre ────────────────── */
:is(button, a.btn, input[type="submit"]) {
	--color: var(--btn-primary);
	--color-contrast: #fff;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid var(--color);
	border-radius: var(--btn-radius);
	padding: 12px 22px;
	line-height: 1.2;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	font-family: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--btn-transition),
		color var(--btn-transition),
		border-color var(--btn-transition),
		transform var(--btn-transition),
		box-shadow var(--btn-transition);
	/* Outline par défaut : fond clair, bord + texte dans color */
	background-color: #fff;
	color: var(--color);
}

/* Hover outline : on inverse vers plain */
:is(button, a.btn, input[type="submit"]):not(:disabled):not(.fill):hover {
	background-color: var(--color);
	color: var(--color-contrast);
	transform: translateY(-1px);
	box-shadow: var(--btn-shadow-plain);
}

/* ─── PLAIN (.fill) : fond plein ────────────────────────────────────── */
:is(button, a.btn, input[type="submit"]).fill {
	background-color: var(--color);
	color: var(--color-contrast);
	border: 1px solid var(--color);
	box-shadow: var(--btn-shadow-plain);
}
:is(button, a.btn, input[type="submit"]).fill:not(:disabled):hover {
	background-color: var(--btn-primary-dark);
	border-color: var(--btn-primary-dark);
	color: var(--color-contrast);
	transform: translateY(-1px);
	box-shadow: var(--btn-shadow-plain-hover);
}

/* ─── Tailles ──────────────────────────────────────────────────────── */
:is(button, a.btn, input[type="submit"]).secondary {
	padding: 16px 28px;
	font-size: 15px;
}
:is(button, a.btn, input[type="submit"]).primary {
	padding: 20px 32px;
	font-size: 16px;
	font-weight: 700;
}
a.btn.compact,
button.compact {
	padding: 9px 16px;
	font-size: 13px;
}
/* ─── .tertiary : style outline noir discret (cards) ───────────────── */
:is(button, a.btn, input[type="submit"]).tertiary {
	--color: #1a1a2e;
	--color-contrast: #fff;
	font-weight: 600;
	background-color: #fff;
	color: #1a1a2e;
	border: 1px solid #1a1a2e;
	box-shadow: none;
}
:is(button, a.btn, input[type="submit"]).tertiary:not(:disabled):not(.fill):hover {
	background-color: #1a1a2e;
	color: #fff;
	border-color: #1a1a2e;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(26,26,46,.2);
}
:is(button, a.btn, input[type="submit"]).tertiary.fill {
	background-color: #1a1a2e;
	color: #fff;
	border-color: #1a1a2e;
	box-shadow: 0 2px 6px rgba(26,26,46,.15);
}
:is(button, a.btn, input[type="submit"]).tertiary.fill:not(:disabled):hover {
	background-color: #000;
	border-color: #000;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(26,26,46,.25);
}

/* ─── Disabled ─────────────────────────────────────────────────────── */
:is(button, a.btn, input[type="submit"]):disabled,
:is(button, a.btn, input[type="submit"]).fill:disabled {
	--color: #cbd5e1;
	--color-contrast: #fff;
	background-color: #f3f4f6;
	color: #9ca3af;
	border-color: #e5e7eb;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

/* ─── Icônes ::after : on garde la flèche (mask-image depuis icons.css) ─ */
/* Le mask-image/mask-size/mask-repeat sont déjà déclarés dans icons.css.
   Ici on ajuste juste la taille, la couleur suit currentColor. */
:is(button, a.btn)::after {
	width: 0.85em;
	height: 0.85em;
	margin-left: 0;
	background-color: currentColor;
}

/* Override : sur .primary.fill, pas de bg/padding/border-radius custom sur ::after */
:is(button, a.btn).primary::after,
:is(button, a.btn).primary.fill::after {
	background-color: currentColor;
	padding: 0;
	border-radius: 0;
	color: inherit;
}

/* ─── Suppression des règles "on hover change couleur en noir" désuètes ─ */
:is(button, a.btn, input[type="submit"]):not(:disabled):not(.fill):not(:hover) {
	color: var(--color);
	border-color: var(--color);
}