/**
 * Boostage Online — Mise en page : conteneurs, sections, grilles.
 */

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

.site-main {
	flex: 1 0 auto;
}

.bo-container {
	margin-inline: auto;
	max-width: calc(var(--bo-container) + var(--bo-gutter) * 2);
	padding-inline: var(--bo-gutter);
	width: 100%;
}

.bo-container--narrow {
	max-width: calc(var(--bo-container-narrow) + var(--bo-gutter) * 2);
}

.bo-section {
	padding-block: var(--bo-section);
}

.bo-section--tight {
	padding-block: calc(var(--bo-section) * 0.6);
}

.bo-section--white {
	background: var(--bo-white);
	border-block: 1px solid var(--bo-border);
}

/* Sections sombres (alternance claire / sombre) */
.bo-section--dark,
.bo-dark {
	background: var(--bo-navy);
	color: var(--bo-on-dark-muted);
	--bo-heading: var(--bo-white);
	--bo-link: var(--bo-cyan);
	--bo-link-hover: var(--bo-white);
	--bo-muted: var(--bo-on-dark-muted);
	--bo-border: var(--bo-on-dark-border);
	--bo-focus: var(--bo-cyan);
	--bo-eyebrow-color: var(--bo-cyan);
	--bo-tile-bg: var(--bo-primary-a18);
	--bo-tile-color: var(--bo-cyan);
	--bo-badge-bg: var(--bo-cyan-a12);
	--bo-badge-color: var(--bo-cyan);
}

/* Trame technologique discrète pour les fonds sombres */
.bo-grid-bg {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.bo-grid-bg::before {
	background-image:
		linear-gradient(var(--bo-white-a06) 1px, transparent 1px),
		linear-gradient(90deg, var(--bo-white-a06) 1px, transparent 1px);
	background-size: 44px 44px;
	content: "";
	inset: 0;
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 30%, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 70% at 60% 30%, #000 30%, transparent 75%);
	position: absolute;
	z-index: -1;
}

.bo-grid {
	display: grid;
	gap: var(--bo-space-6);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.bo-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.bo-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }

.bo-stack > * + * {
	margin-top: var(--bo-space-4);
}

.bo-cluster {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-space-3);
}

/* Titres de section */
.bo-section-head {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-space-6);
	justify-content: space-between;
	margin-bottom: var(--bo-space-10);
}

.bo-section-head--center {
	justify-content: center;
	text-align: center;
}

.bo-section-head--center .bo-section-head__text {
	margin-inline: auto;
	max-width: 44rem;
}

.bo-section-head__text {
	max-width: 42rem;
}

.bo-section-title {
	margin-bottom: var(--bo-space-3);
}

.bo-section-lead {
	color: var(--bo-muted);
	font-size: var(--bo-text-lg);
	margin: 0;
}

/* Blocs pleine largeur dans une colonne : pas de débordement sur la barre latérale */
.bo-with-sidebar .alignfull,
.bo-content-card .alignfull {
	margin-inline: 0;
	max-width: none;
	width: auto;
}

/* Mise en page avec barre latérale (documentation, pages légales, blog) */
.bo-with-sidebar {
	display: grid;
	gap: var(--bo-space-10);
	grid-template-columns: minmax(0, 1fr);
}

.bo-sidebar {
	align-self: start;
}

.bo-content-card {
	background: var(--bo-white);
	border: 1px solid var(--bo-border);
	border-radius: var(--bo-radius-lg);
	padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
}

.bo-page-body {
	padding-block: var(--bo-space-12) var(--bo-section);
}

/* ------------------------------------------------------------------
 * Navigation fluide : transition entre les pages (navigateurs récents) et barre de progression
 * ------------------------------------------------------------------ */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.22s;
	animation-timing-function: ease;
}

/* L'en-tête et le pied de page restent en place pendant la transition : seule la page change. */
.site-header {
	view-transition-name: bo-header;
}

.site-footer {
	view-transition-name: bo-footer;
}

::view-transition-group(bo-header),
::view-transition-group(bo-footer) {
	animation-duration: 0s;
}

.bo-nav-progress {
	background: linear-gradient(90deg, var(--bo-primary), var(--bo-cyan));
	height: 2px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	transform: scaleX(0);
	transform-origin: left;
	width: 100%;
	z-index: 9999;
}

.is-navigating .bo-nav-progress {
	animation: bo-nav-progress 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
	opacity: 1;
}

@keyframes bo-nav-progress {
	0% { transform: scaleX(0); }
	60% { transform: scaleX(0.7); }
	100% { transform: scaleX(0.92); }
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}

	.is-navigating .bo-nav-progress {
		animation: none;
		transform: scaleX(0.9);
	}
}