/*
 * layout.css — conteneurs, mesure de lecture, alignements, rythme vertical.
 *
 * C'est ici que se joue la largeur du site. Le thème ne s'appuie PAS sur les
 * règles .is-layout-constrained du core : dans un thème classique,
 * the_content() ne pose aucun conteneur de mise en page, et global-styles est
 * retiré du front-end. La mesure est donc entièrement gérée ci-dessous.
 */

/* ─── Conteneur ──────────────────────────────────────────────────────────────
   Un seul rail. En-tête, contenu, listes et pied de page partagent la même
   largeur, donc les mêmes bords gauche et droit.
   ────────────────────────────────────────────────────────────────────────── */

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

/* ─── Ossature de la page ────────────────────────────────────────────────── */

.site-main {
	flex: 1 0 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding-block: 2rem 3rem;
}

@media (min-width: 640px) {
	.site-main {
		gap: 2.5rem;
	}
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	border-block-end: 1px solid var(--border);
	background-color: color-mix(in srgb, var(--background) 85%, transparent);
	backdrop-filter: blur(8px);
}

.site-footer {
	margin-block-start: 3rem;
	border-block-start: 1px solid var(--border);
	padding-block: 2rem;
}

/* ─── Mesure du contenu rédactionnel ─────────────────────────────────────────
   .entry-content contient la sortie de the_content(), c'est-à-dire des blocs
   Gutenberg posés à plat. Chaque enfant direct est ramené à la mesure ; seuls
   les alignements explicites en sortent.
   ────────────────────────────────────────────────────────────────────────── */

.entry-content > * {
	max-width: var(--measure);
	margin-inline: auto;
}

.entry-content > .alignwide {
	max-width: var(--measure-wide);
}

.entry-content > .alignfull {
	max-width: none;
	margin-inline: calc(var(--gutter) * -1);
}

/* Alignements d'éléments flottants, hérités des thèmes classiques. */
.aligncenter {
	margin-inline: auto;
}

.alignleft {
	float: left;
	margin: 0.5rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.5rem 0 1rem 1.5rem;
}

@media (max-width: 480px) {
	.alignleft,
	.alignright {
		float: none;
		margin-inline: auto;
	}
}

.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

/* ─── Filets ─────────────────────────────────────────────────────────────────
   Le filet dégradé de Lipi : plein au centre, effacé aux extrémités.
   ────────────────────────────────────────────────────────────────────────── */

.divider {
	height: 1px;
	border: 0;
	margin: 0;
	background: var(--border);
}

.divider--soft {
	background: linear-gradient(
		90deg,
		transparent,
		var(--accent) 20%,
		var(--accent) 80%,
		transparent
	);
}

.divider--short {
	width: 6rem;
	margin-block: 1.5rem;
}

@media (min-width: 768px) {
	.divider--short {
		margin-block: 3rem;
	}
}