/**
 * BoisVision — mise en page.
 *
 * Mobile-first. Quatre points de rupture seulement (640 / 900 / 1200 / 1440),
 * et des grilles intrinsèques (auto-fit + minmax) partout où c'est possible,
 * de façon à ne pas empiler des media queries pour chaque composant.
 */

/* ---------------------------------------------------------------
 * Conteneurs
 * ------------------------------------------------------------ */

.bv-wrap {
	width: 100%;
	max-width: var(--bv-wrap);
	margin-inline: auto;
	padding-inline: var(--bv-gutter);
}

.bv-wrap--wide {
	max-width: var(--bv-wrap-wide);
}

.bv-wrap--prose {
	max-width: var(--bv-wrap-prose);
}

.bv-wrap--flush {
	padding-inline: 0;
}

/* ---------------------------------------------------------------
 * Rythme vertical
 *
 * Le padding respire et se contracte : clamp(5rem, 10vw, 10rem).
 * Une valeur fixe donnerait 80px aussi bien sur un téléphone que sur
 * un écran 27 pouces — c'est le défaut le plus courant des thèmes.
 * ------------------------------------------------------------ */

.bv-section {
	padding-block: var(--bv-space-2xl);
	position: relative;
}

.bv-section--tight {
	padding-block: var(--bv-space-xl);
}

.bv-section--linen {
	background-color: var(--bv-linen);
}

.bv-section--char {
	background-color: var(--bv-char);
	color: var(--bv-paper);
}

.bv-section--char :is(h1, h2, h3, h4) {
	color: var(--bv-paper);
}

.bv-section--char .bv-lede,
.bv-section--char .bv-eyebrow {
	color: color-mix(in srgb, var(--bv-paper) 72%, transparent);
}

/* ---------------------------------------------------------------
 * Empilements
 * ------------------------------------------------------------ */

.bv-stack {
	display: flex;
	flex-direction: column;
	gap: var(--bv-space-md);
}

.bv-stack--sm {
	gap: var(--bv-space-sm);
}

.bv-stack--lg {
	gap: var(--bv-space-lg);
}

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

.bv-cluster--tight {
	gap: var(--bv-space-2xs);
}

/* ---------------------------------------------------------------
 * Grilles intrinsèques
 * ------------------------------------------------------------ */

.bv-grid {
	display: grid;
	gap: var(--bv-space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bv-grid-min, 260px)), 1fr));
}

.bv-grid--cards {
	--bv-grid-min: 280px;

	gap: var(--bv-space-lg) var(--bv-space-md);
}

.bv-grid--wide {
	--bv-grid-min: 340px;
}

.bv-grid--narrow {
	--bv-grid-min: 200px;
}

/* ---------------------------------------------------------------
 * Split éditorial
 *
 * Asymétrique volontairement : la typographie occupe la colonne
 * étroite, l'image la large. Le 50/50 est ce que tout le monde fait.
 * ------------------------------------------------------------ */

.bv-split {
	display: grid;
	gap: var(--bv-space-lg);
	align-items: center;
}

@media (width >= 900px) {

	.bv-split {
		grid-template-columns: 5fr 7fr;
		gap: var(--bv-space-xl);
	}

	.bv-split--reverse {
		grid-template-columns: 7fr 5fr;
	}

	.bv-split--reverse > :first-child {
		order: 2;
	}

	.bv-split--even {
		grid-template-columns: 1fr 1fr;
	}

	.bv-split--top {
		align-items: start;
	}
}

/* ---------------------------------------------------------------
 * Bento asymétrique
 *
 * Douze colonnes au-delà de 900px, une seule en dessous : toutes les
 * portées sont réinitialisées pour éviter les conflits de zone tactile.
 * ------------------------------------------------------------ */

.bv-bento {
	display: grid;
	gap: var(--bv-space-md);
	grid-template-columns: 1fr;
}

.bv-bento > * {
	grid-column: auto;
}

@media (width >= 900px) {

	.bv-bento {
		grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: minmax(180px, auto);
	}

	.bv-bento__lead {
		grid-column: span 7;
		grid-row: span 2;
	}

	.bv-bento__tall {
		grid-column: span 5;
		grid-row: span 2;
	}

	.bv-bento__wide {
		grid-column: span 8;
	}

	.bv-bento__slim {
		grid-column: span 4;
	}

	.bv-bento__half {
		grid-column: span 6;
	}

	.bv-bento__third {
		grid-column: span 4;
	}
}

/* ---------------------------------------------------------------
 * Colonne de contenu éditorial
 * ------------------------------------------------------------ */

.bv-prose {
	max-width: var(--bv-wrap-prose);
}

.bv-prose > * + * {
	margin-block-start: var(--bv-space-md);
}

.bv-prose > :is(h2, h3, h4) {
	margin-block-start: var(--bv-space-lg);
}

.bv-prose :is(ul, ol):not([class]) {
	padding-inline-start: 1.35em;
	display: flex;
	flex-direction: column;
	gap: var(--bv-space-2xs);
}

.bv-prose img {
	border-radius: var(--bv-r);
}

.bv-prose figcaption {
	margin-block-start: var(--bv-space-2xs);
	font-size: var(--bv-text-xs);
	color: var(--bv-muted);
}

/* ---------------------------------------------------------------
 * Alignements Gutenberg
 *
 * Fraicheo déclarait align-wide sans jamais le styler : les blocs
 * « pleine largeur » ne faisaient rien. Ici on les traite vraiment.
 * ------------------------------------------------------------ */

.bv-prose > .alignwide {
	max-width: var(--bv-wrap);
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	padding-inline: var(--bv-gutter);
}

@media (width >= 1200px) {

	.bv-prose > .alignwide {
		width: auto;
		max-width: none;
		margin-inline: calc((var(--bv-wrap-prose) - var(--bv-wrap)) / 2);
		padding-inline: 0;
	}
}

.bv-prose > .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.alignleft,
.alignright {
	max-width: 45%;
}

@media (width >= 640px) {

	.alignleft {
		float: inline-start;
		margin-inline-end: var(--bv-space-md);
		margin-block-end: var(--bv-space-sm);
	}

	.alignright {
		float: inline-end;
		margin-inline-start: var(--bv-space-md);
		margin-block-end: var(--bv-space-sm);
	}
}

/* ---------------------------------------------------------------
 * Séparateur « cernes »
 *
 * Le motif signature du thème : des arcs concentriques, comme la
 * coupe d'un tronc. Purement décoratif, donc masqué aux lecteurs
 * d'écran par aria-hidden côté template.
 * ------------------------------------------------------------ */

.bv-rings {
	display: block;
	width: 100%;
	height: clamp(48px, 7vw, 88px);
	color: var(--bv-rule);
	overflow: hidden;
}

.bv-rings svg {
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------
 * Entrées au défilement
 *
 * transform + opacity + filter uniquement : aucune propriété
 * déclenchant un recalcul de mise en page.
 * ------------------------------------------------------------ */

[data-reveal] {
	opacity: 0;
	transform: translate3d(0, 2.5rem, 0);
	filter: blur(6px);
	transition:
		opacity var(--bv-dur-slow) var(--bv-ease-out),
		transform var(--bv-dur-slow) var(--bv-ease-out),
		filter var(--bv-dur-slow) var(--bv-ease-out);
	transition-delay: var(--bv-reveal-delay, 0ms);
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	filter: blur(0);
}

[data-reveal-delay="1"] {
	--bv-reveal-delay: 90ms;
}

[data-reveal-delay="2"] {
	--bv-reveal-delay: 180ms;
}

[data-reveal-delay="3"] {
	--bv-reveal-delay: 270ms;
}

[data-reveal-delay="4"] {
	--bv-reveal-delay: 360ms;
}