/* Page Continuité opérationnelle — ce qui n'appartient qu'à elle. */

/*
 * Les emplacements visuels de cette page sont en 534 × 400, là où l'accueil les
 * pose en 534 × 380. Le composant global lit ce rapport dans une variable.
 */
.media--split {
	--media-ratio: 534 / 400;
}

/* ----------------------------------------------------------------- Leviers */

.leviers__head {
	--head-width: 760px;
}

.leviers {
	--cards: 4;
}

/* ---------------------------------------------------------------- Décideurs */

/* Rangée d'étiquettes posée au bas du visuel, et non épinglées une à une. */
.media__row {
	--drift: -22px;

	top: 86.5%; /* 346 / 400 */
	left: 3.37%; /* 18 / 534 */
	display: flex;
	gap: 9px;
}

/* ------------------------------------------------------------- Souveraineté */

.piliers__head {
	--head-width: 820px;
	--head-gap: 40px;
}

.piliers {
	--cards: 3;
}

/* --------------------------------------------------------------------- CTA */

/* Le cadre de contenu est plus court que la section : 25 px s'ajoutent en bas. */
.page-cta {
	--cta-pad-bottom: 121px;
}

/*
 * Sous 640 px, la rangée d'étiquettes rentre dans le flux. Ses coordonnées
 * vivant ici, hors couche, elles l'emporteraient sur la remise à plat de
 * `global.css` et décaleraient la rangée de plus de 200 px vers le bas.
 */
@media (max-width: 640px) {
	.media__row {
		top: auto;
		left: auto;
	}
}

/* --------------------------------------------------------------- Situations */

.media--wide {
	flex: 0 0 44.17%; /* 500 / 1132 */
	aspect-ratio: 500 / 470;
}

/* Les écarts viennent du `gap` de `.split__text` ; seul le décalage propre à la liste s'y ajoute. */
.checklist__intro {
	color: var(--color-navy);
	font: 500 1.03125rem/1.6970 var(--font-sans); /* 16,5 / 28 */
}

.checklist {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 6px 0 0;
	list-style: none;
}

.checklist__item {
	display: flex;
	gap: 13px;
	color: var(--color-text);
	font: 400 0.96875rem/1.6774 var(--font-sans); /* 15,5 / 26 */
}

/* Le disque est un aplat : CSS. Seule la coche vient d'une icône. */
.checklist__mark {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-blue-pale);
	color: var(--color-blue-dark);
}

.checklist__note {
	color: var(--color-text-muted);
	font: var(--text-small);
}