/* Ce que le site a en plus de la maquette.
   La feuille de la maquette est reprise telle quelle à chaque mise à jour :
   nos ajouts vivent ici pour ne pas disparaître à la reprise suivante. */

/* Le pied de page gagne une quatrième colonne. Les pages d'import font près
   d'un tiers des visites venues de Google et n'étaient citées dans aucun
   menu ; l'en-tête ne peut pas les porter sans devenir illisible. */
.site-footer .footer-grid {
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
	gap: 38px;
}

@media ( max-width: 1100px ) {
	.site-footer .footer-grid {
		grid-template-columns: 1.3fr 1fr 1fr;
		gap: 32px;
	}
}

@media ( max-width: 760px ) {
	.site-footer .footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 34px;
	}
}

/* ===== Niveaux d'accompagnement =====
   Quatre cartes de même trame : un rang de pastilles, une phrase de ciblage,
   une liste, puis ce avec quoi on repart. La hauteur est égalisée pour que
   les boutons s'alignent d'une carte à l'autre. */
.level-grid {
	align-items: stretch;
}

.level-card {
	display: flex;
	flex-direction: column;
}

.level-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.level-tags .pill strong {
	font-weight: 700;
}

.level-card h3 {
	margin-bottom: 14px;
}

/* « Pour vous si… » : la phrase qui doit accrocher le bon lecteur. */
.level-target {
	color: var( --muted );
	margin-bottom: 18px;
}

.level-card .feature-list {
	margin: 0 0 22px;
}

/* Ce avec quoi on repart : détaché du reste, c'est la promesse. */
.level-outcome {
	margin-top: auto;
	padding: 18px 20px;
	border-radius: 14px;
	background: #f7f4fb;
	border: 1px solid #ebe3f3;
	font-size: .92rem;
	line-height: 1.6;
}

.level-outcome strong {
	display: block;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --purple );
	margin-bottom: 8px;
}

.level-card .btn {
	margin-top: 20px;
	align-self: flex-start;
}

/* ===== « Quel niveau pour votre situation ? » =====
   Une phrase à gauche, l'orientation à droite, un filet entre les deux. */
.match-list {
	max-width: 900px;
	border-top: 1px solid var( --line );
}

.match-row {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 24px;
	align-items: baseline;
	padding: 20px 0;
	border-bottom: 1px solid var( --line );
}

.match-row q {
	quotes: '« ' ' »';
	font-size: 1.02rem;
}

.match-row a,
.match-row span.match-to {
	color: var( --purple );
	font-weight: 700;
	font-size: .94rem;
}

.match-row a:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}

@media ( max-width: 760px ) {
	.match-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

/* Un titre de carte suivi d'une liste : la maquette ne prévoyait que des
   listes d'une ligne, et le titre se retrouve collé dès qu'elles respirent. */
.card h3 + ul {
	margin-top: 14px;
}

/* Ligne de réassurance : trois affirmations séparées par un point médian,
   plutôt que trois blocs que l'œil doit découper lui-même. */
.hero-notes span + span::before {
	content: '·';
	margin-right: 16px;
	color: var( --line );
}