/* Page Souveraineté numérique — ce qui n'appartient qu'à elle. */

/*
 * Les emplacements visuels de cette page sont en 534 × 400, comme sur les autres
 * pages intérieures. Le composant global lit ce rapport dans une variable.
 */
.media--split {
	--media-ratio: 534 / 400;
}

/* -------------------------------------------------------------- Gouvernance */

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

/* ---------------------------------------------------------------- Services */

.services__head {
	--head-width: 820px;
}

.services {
	--cards: 2;
}

/* La carte navy porte son halo à droite, et non à gauche comme sur Continuité. */
.services .card__halo {
	--halo-x: 396px;
}

/* -------------------------------------------------------------- Renvoi */

/*
 * Carte posée à cheval sur la section sable qui précède.
 *
 * Le décalage se déduit du retrait de cette section : une valeur fixe mordrait
 * sur les cartes dès qu'il se resserre. `position` obligatoire, sinon la carte
 * passe sous le sable malgré l'ordre du DOM.
 */
.bridge-section {
	position: relative;
	margin-top: calc(20px - var(--section-pad));
	padding-block: 0 var(--section-pad-tight);
}

.bridge {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 56px;
	padding: 46px 52px 50px;
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
	background: var(--color-white);
	box-shadow: 0 34px 74px -34px rgba(24, 25, 50, 0.3);
}

.bridge__head {
	grid-column: 1 / -1;
	padding-bottom: 6px;
}

.bridge__eyebrow {
	color: var(--color-blue);
	font: var(--text-section);
	letter-spacing: var(--ls-section);
}

/* Pas de largeur plafond : le titre tient sur une ligne, c'est ce qu'on veut. */
.bridge__title {
	padding-top: 12px;
}

.bridge__link {
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: 14px;
}

@media (max-width: 1024px) {
	.bridge {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 36px 34px 40px;
	}
}

@media (max-width: 640px) {
	.bridge {
		padding: 28px 24px 32px;
	}
}

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

/*
 * Le CTA de cette page porte trois paragraphes en plus du titre : le bloc de
 * texte est un peu plus large, et la trame s'arrête avant le bas de la section.
 */
.page-cta {
	--cta-text-width: 58.30%; /* 660 / 1132 */
	--grid-height: 520px;
}

.page-cta__lead {
	--lead-gap: 16px;
}