/* Pages de service — ce qui n'appartient qu'à elles. Cotes rapportées aux 1132 px utiles de la maquette. */

/* --------------------------------------------------------------------- Hero */

.service-hero {
	position: relative;
	overflow: clip;
}

.service-hero__halo {
	--halo-size: 640px;
	--halo-color: rgba(47, 91, 232, 0.12);
	--halo-blur: 80px;

	top: -200px;
	left: calc(50% - 820px); /* x -180 dans le cadre de 1440 centré */
}

.service-hero .page-hero__inner {
	position: relative;
	align-items: flex-start;
}

.service-hero .split__text {
	flex: 0 0 52.47%; /* 594 / 1132 */
	gap: 0;
}

/*
 * La mise en page vient de `.page-hero__lead`, cumulé sur le même élément : ne
 * pas la redéclarer ici. Seul l'appui du premier paragraphe est propre à la page.
 */
.service-hero__lead > :first-child {
	color: var(--color-navy);
	font: 500 1.0625rem/1.7 var(--font-sans); /* 17 / 29 */
}

.service-hero__action {
	padding-top: 32px;
}

.service-hero__media {
	flex: 0 0 41.17%; /* 466 / 1132 */
	align-self: center;
	aspect-ratio: 466 / 520;
}

/* ---------------------------------------------------------- Enjeu, comparatif */

.enjeu__head {
	--head-width: 800px;
}

.compare {
	--cards: 2;
}

.compare__card {
	gap: 18px;
	padding: 32px 30px 30px;
}

.compare__label {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--color-navy);
	font: 600 1.125rem/1.4444 var(--font-sans); /* 18 / 26 */
}

.card--dark .compare__label {
	color: var(--color-white);
}

/* Le repère de colonne : un aplat arrondi, seul le tracé vient d'une icône. */
.compare__mark {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: var(--color-lavender-alt);
	color: var(--color-text-muted);
}

.card--dark .compare__mark {
	background: var(--color-blue);
	color: var(--color-white);
}

/* La maquette pose l'ellipse en haut à droite du panneau, pas sur sa gauche. */
.compare__card .card__halo {
	--halo-size: 260px;
	--halo-x: 69.42%; /* 386 / 556 */

	top: -90px;
}

.compare__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.compare__list li {
	display: flex;
	gap: 12px;
	color: var(--color-text);
	font: var(--text-small);
}

/* La puce s'aligne sur la première ligne, pas sur le centre du paragraphe. */
.compare__list .dot {
	--dot-size: 7px;
	--dot-color: var(--color-rule-strong);
	margin-top: 0.55em;
}

.card--dark .compare__list li {
	color: var(--color-text-on-dark);
}

.card--dark .compare__list .dot {
	--dot-color: var(--color-blue-light);
}

/* -------------------------------------------------- Sections en deux colonnes */

.service-media {
	--media-ratio: 534 / 400;
}

/* Le bouton se réduit à son libellé : la colonne flex étire ses enfants. */
.pilotage__link {
	align-self: flex-start;
	max-width: 100%;
	margin-top: 12px;
}

/* ---------------------------------------------------------------- Capacités */

.capacites {
	--deflist-label: 29.15%; /* 330 / 1132 */
	--deflist-pad: 36px;
	--deflist-figure: 3.125rem; /* 50 */
	--deflist-title-color: var(--color-navy);
}

/* Renvoi propre à une capacité : il prolonge ses paragraphes, il ne les sépare pas. */
.capacites__link {
	margin-top: 4px;
}

/* ------------------------------------------------------ Souveraineté, durée */

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


/*
 * Traitement plus soigné que le panneau courant : le fond reste un blanc plein,
 * c'est l'ombre portée qui détache la carte. Plus marquée que `--shadow-soft`,
 * dont l'étalement négatif la garde presque invisible sur fond blanc.
 */
.souv__cards .card--panel {
	padding: 32px 30px 34px;
	box-shadow:
		0 18px 40px -22px rgba(24, 25, 50, 0.22),
		0 2px 6px -2px rgba(24, 25, 50, 0.06);
}

/* Deux boutons pleins : l'écart se resserre, ils portent déjà leur propre masse. */
.souv__links {
	flex-wrap: wrap;
	gap: 16px 20px;
}

/*
 * Tous les services n'ont pas de volets. Sans eux, le retrait du chapeau et
 * celui de la rangée de renvois s'additionnent : 84 px de vide entre le dernier
 * paragraphe et le bouton.
 */
.section:not(:has(.souv__cards)) .souv__head {
	--head-gap: 6px;
}

/*
 * Visuel à droite par `order`, jamais par `row-reverse` : le CSS de page étant
 * hors couche, il l'emporterait sur le `column` du palier tablette et la
 * section refuserait de s'empiler.
 */
.souv--right .split__text {
	order: -1;
}

/* En deux colonnes, les renvois suivent le texte : ni centrés ni détachés. */
.souv__links--inline {
	justify-content: flex-start;
	padding-top: 12px;
}

/* Les volets passent sous les deux colonnes : il leur faut leur propre écart. */
.souv__cards--below {
	padding-top: var(--section-pad-tight);
}

.souv__cards .card__text + .card__text {
	padding-top: 12px;
}

/* ----------------------------------------------------------------- Profils */

.profils__text {
	flex: 0 0 51.94%; /* 588 / 1132 */
}

.profils__media {
	flex: 0 0 42.4%; /* 480 / 1132 */
	align-self: center;
	aspect-ratio: 480 / 540;
}

/* ---------------------------------- Profils, disposition en panneau */

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

.profils__panel {
	gap: 18px;
	padding: 38px 42px 40px;
	border: 1px solid var(--color-rule);
	background: var(--color-white);
	box-shadow:
		0 18px 40px -22px rgba(24, 25, 50, 0.22),
		0 2px 6px -2px rgba(24, 25, 50, 0.06);
}

.profils__intro {
	padding-top: 10px;
	color: var(--color-navy);
	font: 600 1rem/1.75 var(--font-sans); /* 16 / 28 */
}

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

.checklist li {
	display: flex;
	gap: 13px;
	color: var(--color-text);
	font: var(--text-small);
}

.checklist__mark {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 24px;
	height: 24px;
	margin-top: 0.05em;
	border-radius: 7px;
	background: var(--color-blue-pale);
	color: var(--color-blue-dark);
}

.checklist__mark svg {
	width: 12px;
	height: 12px;
}

/* À garder après `.checklist`, dont elle change le `display`. */
.checklist--split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 44px;
	padding-top: 0;
}

.profils__outro {
	padding-top: 14px;
	color: var(--color-text-muted);
	font: var(--text-small);
}

/* ---------------------------------------------------------- Autres services */

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

.autres {
	--cards: 4;
}

.autres__card {
	gap: 0;
	overflow: clip;
	padding: 0;
	border: 1px solid var(--color-rule);
	background: var(--color-white);
}

.autres__media {
	aspect-ratio: 268 / 170;
}

.autres__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
}

.autres__name {
	color: var(--color-navy);
	font: 600 1.0625rem/1.4706 var(--font-sans); /* 17 / 25 */
}

.autres__name a {
	color: inherit;
	text-decoration: none;
}


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

.page-cta {
	--cta-text-width: 58.3%; /* 660 / 1132 */
	--grid-height: 520px;
}

/* ------------------------------------------------ Tablette et en dessous */

@media (max-width: 1024px) {
	.service-hero__media,
	.profils__media {
		align-self: stretch;
	}

	.capacites {
		--deflist-label: 34%;
	}

	.checklist--split {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.profils__panel {
		padding: 28px 26px 30px;
	}
}

@media (max-width: 640px) {
	.service-hero__action {
		padding-top: 26px;
	}

	.compare__card {
		padding: 26px 22px 24px;
	}

	.autres__body {
		padding: 20px;
	}
}