/**
 * CBS Theme — boutons (design-system.md §7)
 */

.btn-primary {
	font-family: var(--cbs-font-sans);
	font-weight: 600;
	font-size: var(--cbs-text-small);
	letter-spacing: var(--cbs-tracking-wide);
	text-transform: uppercase;
	color: var(--cbs-white);
	/* Bleu principal du thème sur tous les CTA (Hugo, 21/09/2026). */
	background-color: var(--cbs-primary);
	border: 1px solid var(--cbs-primary);
	padding: var(--cbs-space-4) var(--cbs-space-8);
	border-radius: var(--cbs-radius-sm);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		background-color var(--cbs-transition-base),
		border-color var(--cbs-transition-base);
}

.btn-primary:hover {
	background-color: var(--cbs-primary-light);
	border-color: var(--cbs-primary-light);
}

.btn-secondary {
	font-family: var(--cbs-font-sans);
	font-weight: 600;
	font-size: var(--cbs-text-small);
	letter-spacing: var(--cbs-tracking-wide);
	text-transform: uppercase;
	/* Bleu principal assombri (Hugo, 21/09/2026) ; sur fond sombre voir les
	   variantes plus bas et dans cards.css / hero.css. */
	color: var(--cbs-primary-dark);
	background-color: transparent;
	border: 1px solid var(--cbs-primary-dark);
	padding: var(--cbs-space-4) var(--cbs-space-8);
	border-radius: var(--cbs-radius-sm);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		background-color var(--cbs-transition-base),
		color var(--cbs-transition-base);
}

.btn-secondary:hover {
	background-color: var(--cbs-primary-dark);
	color: var(--cbs-white);
}

/* Sur section sombre, un contour bleu foncé disparaît : texte blanc, contour
   bleu clair, remplissage bleu foncé au survol. Liste des contextes à fond
   silver-900 qui portent un bouton secondaire. */
.cbs-section--fond-sombre .btn-secondary,
.methode-spa-hero .btn-secondary,
.qui-sommes-nous__ecosysteme .btn-secondary,
.offre-gestion-hub-modeles .btn-secondary,
.etude-cas-single__hero .btn-secondary,
.diagnostic-page__hero .btn-secondary {
	color: var(--cbs-white);
	border-color: var(--cbs-primary-light);
}

.cbs-section--fond-sombre .btn-secondary:hover,
.methode-spa-hero .btn-secondary:hover,
.qui-sommes-nous__ecosysteme .btn-secondary:hover,
.offre-gestion-hub-modeles .btn-secondary:hover,
.etude-cas-single__hero .btn-secondary:hover,
.diagnostic-page__hero .btn-secondary:hover {
	background-color: var(--cbs-primary-dark);
	border-color: var(--cbs-primary-dark);
	color: var(--cbs-white);
}

.btn-ghost {
	font-family: var(--cbs-font-sans);
	font-weight: 500;
	font-size: var(--cbs-text-small);
	letter-spacing: var(--cbs-tracking-wide);
	text-transform: uppercase;
	color: var(--cbs-white);
	background-color: transparent;
	border: 1px solid color-mix(in srgb, var(--cbs-white) 40%, transparent);
	padding: var(--cbs-space-4) var(--cbs-space-8);
	border-radius: var(--cbs-radius-sm);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		border-color var(--cbs-transition-base),
		background-color var(--cbs-transition-base);
}

.btn-ghost:hover {
	border-color: var(--cbs-white);
	background-color: color-mix(in srgb, var(--cbs-white) 8%, transparent);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible {
	outline: 2px solid var(--cbs-gold);
	outline-offset: 2px;
}