/* ==========================================================================
   Mise en page : conteneur, surfaces, sections, grilles, hero intérieur
   Points de rupture (cahier §3) : mobile < 768 px, tablette 768-1199 px, desktop >= 1200 px
   ========================================================================== */

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

/* --- Surfaces : chaque surface définit ses couleurs de texte, filets et focus --- */
.em-surface-ivory,
.em-surface-cream,
.em-surface-white,
.em-surface-night,
.em-surface-deep {
	background-color: var(--em-bg);
	color: var(--em-text);
}
.em-surface-ivory { --em-bg: var(--em-ivory); }
.em-surface-cream { --em-bg: var(--em-cream); }
.em-surface-white { --em-bg: var(--em-white); }
.em-surface-night,
.em-surface-deep {
	--em-text: var(--em-white);
	--em-text-muted: rgb(255 255 255 / 0.78);
	--em-heading: var(--em-white);
	--em-line: rgb(255 255 255 / 0.16);
	--em-focus: var(--em-copper);
	--em-accent-text: var(--em-soft);
}
.em-surface-night { --em-bg: var(--em-night); }
.em-surface-deep { --em-bg: var(--em-deep); --em-accent-text: #6fd0c4; }

/* --- Sections --- */
.em-section { padding-block: var(--em-space-section); position: relative; }
.em-section--tight { padding-block: var(--em-space-xl); }
.em-section--flush-top { padding-top: 0; }

/* --- Grilles utilitaires --- */
.em-grid {
	display: grid;
	gap: var(--em-grid-gap, var(--em-space-m));
	grid-template-columns: repeat(var(--em-cols-mobile, 1), minmax(0, 1fr));
}
@media (min-width: 768px) {
	.em-grid { grid-template-columns: repeat(var(--em-cols-tablet, 2), minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.em-grid { grid-template-columns: repeat(var(--em-cols, 3), minmax(0, 1fr)); }
}

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

/* --- En-tête superposé : le hero passe sous l'en-tête --- */
.has-hero .em-main > :first-child { padding-top: calc(var(--em-header-h) + var(--em-space-l)); }

/* --- Hero intérieur générique --- */
.em-page-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-bottom: var(--em-space-2xl);
	min-height: min(56vh, 34rem);
	display: flex;
	align-items: flex-end;
}
.em-page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Fond graphique neutre : aucune photo tant que les médias ne sont pas fournis (point B-09). */
	background:
		radial-gradient(60% 80% at 85% 10%, rgb(111 208 196 / 0.28), transparent 60%),
		radial-gradient(50% 60% at 10% 100%, rgb(111 208 196 / 0.14), transparent 60%),
		linear-gradient(160deg, var(--em-night) 0%, var(--em-night-900) 100%);
}
.em-page-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.em-page-hero__inner { position: relative; }
.em-page-hero__title { font-size: var(--em-step-5); max-width: 20ch; margin-top: var(--em-space-xs); }
.em-page-hero__intro { margin-top: var(--em-space-m); max-width: 38rem; font-size: var(--em-step-1); color: var(--em-text-muted); }

/* --- Listes d'articles / résultats --- */
.em-post-list { display: grid; gap: var(--em-space-l); }
.em-post-list__item { padding-bottom: var(--em-space-l); border-bottom: 1px solid var(--em-line); }
.em-post-list__title { font-size: var(--em-step-3); margin-block: 0.3em 0.4em; }
.em-post-list__title a { text-decoration: none; }
.em-post-list__title a:hover { text-decoration: underline; }
.em-search-page-form { margin-bottom: var(--em-space-xl); }
.em-404-actions { margin-top: var(--em-space-l); }