/**
 * CYPURGE — conteneur, sections, grilles communes.
 */

body.cypurge .c-container {
	width: 100%;
	max-width: var(--c-container);
	margin-inline: auto;
	padding-inline: var(--c-gutter);
}

body.cypurge .c-container--narrow {
	max-width: var(--c-container-narrow);
	padding-inline: 1.25rem;
}

/* L'en-tête est fixe : une ancre doit s'arrêter sous lui, pas derrière. */
body.cypurge [id] {
	scroll-margin-top: var(--c-header-h);
}

/* ── Sections ───────────────────────────────────────────────────── */

body.cypurge .c-section {
	position: relative;
	padding-block: var(--c-section-y);
}

@media (min-width: 1024px) {
	body.cypurge .c-section--roomy {
		padding-block: 8rem;
	}
}

/*
 * Deux fonds : le fond de page, et le fond teinté filé haut et bas. Les
 * sections alternent ; le relief vient des cartes blanches posées dessus.
 */
body.cypurge .c-section--base {
	background: transparent;
}

body.cypurge .c-section--surface {
	background: var(--c-surface);
	border-block: 1px solid var(--c-border);
}

/* Le chapeau d'une section : sur-titre, titre, texte, sur 48rem. */
body.cypurge .c-intro {
	max-width: 48rem;
}

/*
 * Deux colonnes, la seconde un peu plus large : « au-delà du SOC » et la
 * méthode DORA. Le propos et son visuel à gauche, la liste à droite.
 */
body.cypurge .c-split {
	display: grid;
	gap: 3rem;
}

@media (min-width: 1024px) {
	body.cypurge .c-split {
		grid-template-columns: 0.9fr 1.1fr;
	}
}

body.cypurge .c-split__cta {
	margin-top: 1.75rem;
}

body.cypurge .c-split__image {
	width: 100%;
	height: 13rem;
	margin-top: 2.25rem;
	object-fit: cover;
	opacity: 0.75;
}

body.cypurge .c-main {
	display: block;
	overflow-x: clip;
}