/* Mise en page : conteneurs, sections, grilles. Les en-têtes de page sont dans hero.css. */

/* Header, contenu et footer sont des enfants directs de <body> (requis par navigation.js).
   Pas de hauteur minimale : le footer suit naturellement le contenu (charte V2.1, § 4.14). */

.container {
	width: min(100% - 2 * var(--gutter), var(--width-container));
	margin-inline: auto;
}

/* Colonne de lecture alignée à gauche sur la grille, comme le titre de page. */
.container--editorial > :not(.alignwide, .alignfull) {
	max-width: var(--width-editorial);
}

/* Sections */

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

.section--compact {
	padding-block: var(--space-7);
}

.section--alt {
	background: var(--color-bg-alt);
}

.section--dark {
	background: var(--color-blue-900);
	color: var(--color-on-dark);
}

.section--dark :is(h1, h2, h3, h4) {
	color: var(--color-white);
}

/* Deux sections claires consécutives partagent un seul espacement. */
.section:not(.section--alt, .section--dark) + .section:not(.section--alt, .section--dark) {
	padding-top: 0;
}

.section__header {
	display: grid;
	gap: var(--space-3);
	max-width: var(--width-editorial);
	margin-bottom: var(--space-7);
}

.section__header .lead {
	margin-top: var(--space-1);
}

/* Empilement vertical régulier */

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

/* Grilles responsives (3 colonnes dès 1024px pour les collections : actualités, consultations) */

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

@media (min-width: 48em) {
	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.grid {
		gap: var(--space-6);
	}

	.grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Corps de page éditorial */

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

.page-body > .container--editorial + * {
	margin-top: var(--space-8);
}

.page-body + .section:not(.section--alt, .section--dark) {
	padding-top: 0;
}

/* Barre dorée de ponctuation, réutilisée par plusieurs composants */

.rule {
	display: block;
	width: 3rem;
	height: 3px;
	border: 0;
	border-radius: 2px;
	background: var(--color-accent);
}

/* Image à la une d'un article */

.entry-figure {
	margin-block: 0 var(--space-7);
}

.entry-figure__image {
	width: 100%;
	aspect-ratio: 21 / 9; /* image d'article panoramique (maquette V2.1) */
	object-fit: cover;
	border-radius: var(--radius-md);
}

/* Bande de conclusion « Rejoindre » après le contenu d'une page */
.page-body + .join-band {
	padding-top: 0;
}

.entry-figure figcaption {
	margin-top: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-small);
	line-height: 1.5;
}