/* Page layout — site frame, container, section padding */

.bc-site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.bc-site__main { flex: 1; }

/* 1120px content container centred inside 1440 frame; 160px gutter on desktop.
 * border-box keeps the gutter INSIDE the 100% width — without this, the
 * combined width:100% + padding overflows narrow viewports (390px) by 2× gutter.
 */
.bc-container {
	width: 100%;
	max-width: calc( var(--bc-container) + var(--bc-gutter) * 2 );
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--bc-gutter);
	padding-right: var(--bc-gutter);
	box-sizing: border-box;
}

/* Section default — Figma uses ~100px vertical padding for major sections */
.bc-section {
	padding-block: var(--bc-space-25);
	background: var(--bc-bg-white);
}

.bc-section--gray  { background: var(--bc-bg-gray); }
.bc-section--dark  { background: var(--bc-brand-800); color: var(--bc-text-25); }
.bc-section--brand { background: var(--bc-brand-600); color: var(--bc-text-25); }

@media (max-width: 1199px) {
	.bc-container {
		padding-left: var(--bc-gutter-mobile);
		padding-right: var(--bc-gutter-mobile);
	}
	.bc-section { padding-block: var(--bc-space-12); }
}

/* Generic CTA button — Figma: Mulish SemiBold 16/24, pill (radius 30),
 * 18px×10px padding, shadow-xs. Asymmetric pill (0/22/22/22) is opt-in
 * via .bc-button--pill-asymmetric (used by navbar CTA / back-to-top). */
.bc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bc-space-2);
	padding: 10px 18px;
	font-family: var(--bc-font-body);
	font-weight: 600;
	font-size: var(--bc-text-md-size);
	line-height: var(--bc-text-md-leading);
	letter-spacing: 0;
	border-radius: 30px;
	box-shadow: var(--bc-shadow-xs);
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	white-space: nowrap;
}

/* Hover destinations are pulled directly from the Figma prototype graph
 * (REST `/v1/files/<key>` -> Reaction.transitionNodeID), not invented:
 *   Burgundy primary (asymmetric pill) hover → 18904:24543 = #83807c
 *   Charcoal secondary hover                 → 18904:24479 = #88263c
 *   Light/ghost hover                        → 18904:24491 = #b1afac
 * Translation here MUST match those nodes; do not re-darken brand colors. */

/* Burgundy fill — used by navbar CTA, hero CTA, expertise CTA. */
.bc-button--primary {
	background: var(--bc-brand-600);
	border-color: var(--bc-brand-600);
	color: var(--bc-text-25);
}
.bc-button--primary:hover {
	background: var(--bc-text-500);
	border-color: var(--bc-text-500);
	color: var(--bc-text-25);
	transform: translateY(-1px);
}

/* Charcoal fill — used by "Lire plus", "Tous les avis", "Envoyer" etc. */
.bc-button--secondary {
	background: var(--bc-brand-800);
	border-color: var(--bc-brand-800);
	color: var(--bc-text-25);
}
.bc-button--secondary:hover {
	background: var(--bc-brand-600);
	border-color: var(--bc-brand-600);
	color: var(--bc-text-25);
	transform: translateY(-1px);
}

/* Light pill — gray border, dark text. Used for "Notre équipe", "Nos clients". */
.bc-button--ghost {
	background: var(--bc-bg-gray);
	border-color: var(--bc-text-200);
	color: var(--bc-text-950);
}
.bc-button--ghost:hover {
	background: var(--bc-text-200);
	border-color: var(--bc-text-200);
	color: var(--bc-text-950);
	transform: translateY(-1px);
}

/* Round icon-only — 40×40 circle. Default light, hover burgundy. */
.bc-button--icon {
	width: 40px; height: 40px; padding: 0;
	border-radius: 999px;
	background: var(--bc-bg-gray);
	border-color: var(--bc-text-200);
	color: var(--bc-text-950);
}
.bc-button--icon:hover {
	background: var(--bc-brand-600);
	border-color: var(--bc-brand-600);
	color: var(--bc-text-25);
	transform: translateY(-1px);
}

/* Asymmetric pill — top-left corner squared (Figma navbar CTA pattern). */
.bc-button--pill-asymmetric { border-radius: 0 22px 22px 22px; }