/**
 * Layout — conteneurs, grille, filets, sections, alignements, flux.
 * Aucun composant. Aucune couleur hors filets. Aucune taille de police.
 *
 * Breakpoints (tokens --bp-sm/md/lg) : les @media ne peuvent pas lire de var().
 * Littéraux : 479px (< --bp-sm), 767px (< --bp-md), 768px (--bp-md et plus).
 */

/* Les conteneurs reproduisent le calage du layout « constrained » de
   WordPress : contenu de --width-content centré, gouttière --space-page
   sur les écrans étroits. Header, hero et sections partagent ainsi une
   seule verticale gauche. */
.container,
.container-wide {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--space-page);
}

.container {
	max-width: var(--width-container);
}

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

.grid {
	--grid-cols: var(--grid-columns);
	--grid-column-width: calc(
		(100% - (var(--grid-cols) - 1) * var(--grid-gutter)) / var(--grid-cols)
	);
	--grid-track: calc(var(--grid-column-width) + var(--grid-gutter));
	--grid-line-at: calc(
		var(--grid-column-width) + (var(--grid-gutter) - var(--line-width)) / 2
	);
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), 1fr);
	gap: var(--grid-gutter);
}

.grid > * {
	min-width: 0;
}

.col-1 {
	--grid-span: 1;
}

.col-2 {
	--grid-span: 2;
}

.col-3 {
	--grid-span: 3;
}

.col-4 {
	--grid-span: 4;
}

.col-5 {
	--grid-span: 5;
}

.col-6 {
	--grid-span: 6;
}

.col-7 {
	--grid-span: 7;
}

.col-8 {
	--grid-span: 8;
}

.col-9 {
	--grid-span: 9;
}

.col-10 {
	--grid-span: 10;
}

.col-11 {
	--grid-span: 11;
}

.col-12 {
	--grid-span: 12;
}

.start-1 {
	--grid-start: 1;
}

.start-2 {
	--grid-start: 2;
}

.start-3 {
	--grid-start: 3;
}

.start-4 {
	--grid-start: 4;
}

.start-5 {
	--grid-start: 5;
}

.start-6 {
	--grid-start: 6;
}

.start-7 {
	--grid-start: 7;
}

.start-8 {
	--grid-start: 8;
}

.start-9 {
	--grid-start: 9;
}

.start-10 {
	--grid-start: 10;
}

.start-11 {
	--grid-start: 11;
}

.start-12 {
	--grid-start: 12;
}

.grid > [class*="col-"] {
	grid-column-end: span min(var(--grid-span), var(--grid-cols));
}

.grid > [class*="start-"] {
	grid-column-start: min(var(--grid-start), var(--grid-cols));
}

.grid > [class*="start-"][class*="col-"] {
	grid-column-end: span min(
		var(--grid-span),
		calc(var(--grid-cols) - min(var(--grid-start), var(--grid-cols)) + 1)
	);
}

.grid > .row-break {
	grid-column-start: 1;
}

@media (max-width: 767px) {
	.grid {
		--grid-cols: 4;
	}
}

@media (max-width: 479px) {
	.grid {
		--grid-cols: 1;
	}
}

.grid--ruled {
	background-image: repeating-linear-gradient(
		to right,
		transparent 0,
		transparent var(--grid-line-at),
		var(--color-line) var(--grid-line-at),
		var(--color-line) calc(var(--grid-line-at) + var(--line-width)),
		transparent calc(var(--grid-line-at) + var(--line-width)),
		transparent var(--grid-track)
	);
}

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

.section--tight {
	--section-space: var(--space-2xl);
}

.section--loose {
	--section-space: var(--space-4xl);
}

@media (min-width: 768px) {
	.section {
		--section-space: var(--space-4xl);
	}

	.section--tight {
		--section-space: var(--space-3xl);
	}

	.section--loose {
		--section-space: var(--space-inset);
	}
}

.section--ruled {
	border-block-start: var(--line-width) solid var(--color-line);
}

.alignwide {
	width: 100%;
	max-width: var(--width-container);
	margin-inline: auto;
}

.alignfull {
	width: auto;
	max-width: none;
	margin-inline: calc(-1 * var(--space-page));
}

/* .alignfull ne s'emploie qu'en enfant direct du flux racine.
   forcerait un overflow-x: clip qui casse position: sticky. */

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

.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--grid-gutter);
}

/* Filets accentués : cadre de section uniquement, pas les séparateurs internes. */
.section--ruled-accent {
	border-block-start: var(--line-width) solid var(--color-accent);
}

.section--ruled-accent-end {
	border-block-end: var(--line-width) solid var(--color-accent);
}

/* Sous 768px, les positions explicites n'ont plus de sens : la grille
   passe à 4 puis 1 colonne et un start-10 créerait des rangées vides. */
@media (max-width: 767px) {
	.grid > [class*="start-"] {
		grid-column-start: auto;
	}
}

/* --------------------------------------------------------------------------
   Ancres de section
   Le header est collant : sans marge de defilement, un lien vers #ingenierie
   pose le titre sous le header, hors de vue. --header-height est fourni par
   le script du header ; le repli couvre le chargement et les pages sans JS.
   -------------------------------------------------------------------------- */

:target,
[id].section {
	scroll-margin-block-start: calc(var(--header-height, 5rem) + var(--space-lg));
}