/* 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 );
}

/* ===== Galerie de réalisations =====
   La grille se resserre d'elle-même : une galerie de huit photos sur un
   téléphone doit rester lisible sans réglage par site. */
.gallery{display:grid;gap:14px;margin-top:26px}
.gallery-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.gallery-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.gallery-4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.gallery__item{margin:0;display:flex;flex-direction:column;gap:7px}
.gallery__item img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border-radius:var(--radius,6px);display:block}
.gallery__item figcaption{font-size:.86rem;color:var(--muted,#6b6663)}

/* Zone d'intervention : une liste de communes, pas un tableau. */
.communes{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.communes__item{background:var(--soft,#f6f4f2);border-radius:999px;padding:6px 14px;font-size:.92rem}
.communes__item--attache{background:var(--ink,#201c1d);color:var(--paper,#fff);font-weight:600}
.communes__cp{opacity:.6;margin-left:6px;font-size:.86em}