/**
 * Page navettes refondue - ce qui n'appartient qu'à elle.
 *
 * Le design system (socle.css) et ce que les pages de contenu partagent
 * (pages.css) sont chargés avant. On ne trouve ici que le bloc de choix du
 * hero, l'Exo'bus et ses zones, la formule recommandée et le comparatif
 * guide / self-guiding. Le reste - chiffres, étapes, cartes photo, galerie,
 * F.A.Q. - est partagé avec les autres pages de rubrique.
 */

/* ---------- le choix de formule, dans le hero ---------- */
.exo2 .exo2-choix { display: grid; gap: 14px; margin: 14px 0 22px; }
.exo2-choix li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--exo2-meta); line-height: 1.5; }
.exo2-choix b { display: block; color: #fff; font: 700 14px var(--exo2-police-titre); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }

/* ---------- l'Exo'bus et ses zones ---------- */
.exo2-fleet { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin-top: 44px; }
.exo2-fleet figure { margin: 0; }
.exo2-fleet figure img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; }
.exo2-fleet p { color: var(--exo2-meta); font-size: 15.5px; line-height: 1.6; margin-top: 14px; }
.exo2-zones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.exo2-zone-tag {
	font: 600 12px var(--exo2-police); letter-spacing: 1px; text-transform: uppercase;
	padding: 7px 12px 6px; border: 1px solid rgba(255, 255, 255, .35); color: #fff;
}

/* ---------- les trois formules ---------- */
.exo2-formule-reco { position: relative; box-shadow: var(--exo2-liseret), 0 0 0 2px var(--exo2-accent), var(--exo2-ombre); }
.exo2-formule-flag { position: absolute; top: -10px; left: 24px; }
.exo2-formules .exo2-sans span { color: var(--exo2-meta); }
.exo2-croix { color: var(--exo2-meta); }
.exo2-formules .exo2-note { margin-bottom: 18px; }

/* ---------- avec guide ou self-guiding ---------- */
.exo2-compare-wrap { overflow-x: auto; }
.exo2-compare { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.exo2-compare th, .exo2-compare td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--exo2-ligne); }
.exo2-compare thead th {
	font: 700 14px var(--exo2-police-titre); text-transform: uppercase; letter-spacing: .5px;
	color: #fff; border-bottom: 2px solid var(--exo2-accent);
}
.exo2-compare thead th:first-child { border-bottom-color: var(--exo2-ligne); }
.exo2-compare tbody th {
	font: 600 13px var(--exo2-police); text-transform: uppercase; letter-spacing: 1px;
	color: var(--exo2-meta); width: 200px;
}
.exo2-compare tbody td { color: var(--exo2-texte); }
.exo2-compare tbody td:first-of-type { color: #fff; }

/* =======================================================================
   Smartphone
   ======================================================================= */
@media (max-width: 960px) {
	.exo2-fleet { display: block; }
	.exo2-fleet > div { margin-top: 24px; }

	/* Le comparatif se lit en faisant défiler le tableau, plutôt qu'en
	   écrasant six lignes sur trois colonnes de 100 px. */
	.exo2-compare { min-width: 560px; }
}