/* ============================================================
   LA BOUSSOLE — BUTTON SYSTEM (LOT A)
   Single source of truth for every button on the site.
   VARIANTES AUTORISÉES : --primary (coral #E84545) ·
   --secondary (bleu #1B6BC9) · --ghost (transparent + bordure).
   Aucune autre couleur de variante.
   ============================================================ */

/* ============================================================
   1 · BASE — lbs-btn
   inline-flex · centré · line-height 1.2 · white-space normal
   (les textes longs passent à la ligne, jamais de débordement)
   · word-break break-word · min-height fixe · largeur = texte.
   ============================================================ */
.lbs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.8125rem 1.75rem;
	min-height: 48px;
	font-family: var(--lbs-font-body);
	font-size: var(--lbs-fs-body);
	font-weight: var(--lbs-fw-semibold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	word-break: break-word;
	border: 2px solid transparent;
	border-radius: var(--lbs-radius-sm);
	cursor: pointer;
	transition: background var(--lbs-transition-base),
				color var(--lbs-transition-base),
				border-color var(--lbs-transition-base),
				transform var(--lbs-transition-fast),
				box-shadow var(--lbs-transition-base);
}

.lbs-btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--lbs-shadow-md);
}

.lbs-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

.lbs-btn:focus-visible {
	outline: 3px solid var(--lbs-blue-accent);
	outline-offset: 3px;
}

/* Disabled — placeholder actions (e.g. bouton « Itinéraire »). */
.lbs-btn:disabled,
.lbs-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}
.lbs-btn:disabled:hover {
	transform: none;
	box-shadow: none;
}

/* ============================================================
   2 · VARIANTES
   ============================================================ */

/* Primary — coral #E84545, texte blanc */
.lbs-btn--primary {
	background: var(--lbs-accent);
	color: var(--lbs-white);
	border-color: var(--lbs-accent);
}
.lbs-btn--primary:hover {
	background: var(--lbs-accent-hover);
	border-color: var(--lbs-accent-hover);
	color: var(--lbs-white);
}

/* Secondary — bleu #1B6BC9, texte blanc */
.lbs-btn--secondary {
	background: var(--lbs-blue-accent);
	color: var(--lbs-white);
	border-color: var(--lbs-blue-accent);
}
.lbs-btn--secondary:hover {
	background: #1556A8;
	border-color: #1556A8;
	color: var(--lbs-white);
}

/* Ghost — fond transparent, bordure navy (fonds clairs).
   Sur fonds sombres, une règle contextuelle de section
   (hero, CTA, bannières) passe la bordure/texte en blanc. */
.lbs-btn--ghost {
	background: transparent;
	color: var(--lbs-primary);
	border-color: var(--lbs-primary);
}
.lbs-btn--ghost:hover {
	background: var(--lbs-primary);
	border-color: var(--lbs-primary);
	color: var(--lbs-white);
}

/* ============================================================
   3 · TAILLES & BLOCK
   ============================================================ */

/* Small — nav/header */
.lbs-btn--sm {
	padding: 0.5rem 1.25rem;
	min-height: 36px;
	font-size: var(--lbs-fs-small);
}

/* Large — CTA principaux */
.lbs-btn--lg {
	padding: 1rem 2.5rem;
	min-height: 56px;
	font-size: var(--lbs-fs-body-lg);
}

/* Full width — panneaux, formulaires */
.lbs-btn--block {
	display: flex;
	width: 100%;
}

/* ============================================================
   4 · ALIASES DÉPRÉCIÉS (rétro-compatibilité)
   Anciens noms du système avant LOT A — mappés sur les
   variantes canoniques pour ne jamais casser un contenu
   hérité (Gutenberg "Accueil" legacy, rollback).
   NE PAS utiliser dans le nouveau markup.
   ============================================================ */
.lbs-btn-primary,
.lbs-btn-primary-blue,
.lbs-btn-outline,
.lbs-btn-outline-blue,
.lbs-btn-outline-white {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.8125rem 1.75rem;
	min-height: 48px;
	font-family: var(--lbs-font-body);
	font-size: var(--lbs-fs-body);
	font-weight: var(--lbs-fw-semibold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	word-break: break-word;
	border: 2px solid transparent;
	border-radius: var(--lbs-radius-sm);
	cursor: pointer;
	transition: background var(--lbs-transition-base),
				color var(--lbs-transition-base),
				border-color var(--lbs-transition-base),
				transform var(--lbs-transition-fast),
				box-shadow var(--lbs-transition-base);
}
.lbs-btn-primary:hover,
.lbs-btn-primary-blue:hover,
.lbs-btn-outline:hover,
.lbs-btn-outline-blue:hover,
.lbs-btn-outline-white:hover {
	transform: translateY(-1px);
	box-shadow: var(--lbs-shadow-md);
}
.lbs-btn-primary:focus-visible,
.lbs-btn-primary-blue:focus-visible,
.lbs-btn-outline:focus-visible,
.lbs-btn-outline-blue:focus-visible,
.lbs-btn-outline-white:focus-visible {
	outline: 3px solid var(--lbs-blue-accent);
	outline-offset: 3px;
}
.lbs-btn-primary { background: var(--lbs-accent); color: var(--lbs-white); border-color: var(--lbs-accent); }
.lbs-btn-primary:hover { background: var(--lbs-accent-hover); border-color: var(--lbs-accent-hover); }
.lbs-btn-primary-blue { background: var(--lbs-blue-accent); color: var(--lbs-white); border-color: var(--lbs-blue-accent); }
.lbs-btn-primary-blue:hover { background: #1556A8; border-color: #1556A8; }
.lbs-btn-outline { background: transparent; color: var(--lbs-primary); border-color: var(--lbs-primary); }
.lbs-btn-outline:hover { background: var(--lbs-primary); color: var(--lbs-white); }
.lbs-btn-outline-blue { background: transparent; color: var(--lbs-blue-accent); border-color: var(--lbs-blue-accent); }
.lbs-btn-outline-blue:hover { background: var(--lbs-blue-accent); color: var(--lbs-white); }
.lbs-btn-outline-white { background: transparent; color: var(--lbs-white); border-color: var(--lbs-white); }
.lbs-btn-outline-white:hover { background: var(--lbs-white); color: var(--lbs-primary); }
.lbs-btn-block { display: flex; width: 100%; }
.lbs-btn-lg { padding: 1rem 2.5rem; font-size: var(--lbs-fs-body-lg); }
.lbs-btn-sm { padding: 0.5rem 1.25rem; min-height: 36px; font-size: var(--lbs-fs-small); }

/* ============================================================
   5 · RESPONSIVE & ACCESSIBILITÉ
   ============================================================ */
@media (max-width: 768px) {
	.lbs-btn--lg,
	.lbs-btn-lg {
		padding: 0.875rem 2rem;
		font-size: var(--lbs-fs-body);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lbs-btn {
		transition: none;
	}
	.lbs-btn:hover {
		transform: none;
		box-shadow: none;
	}
}