/**
 * Les cinq pages destination - ce qui n'appartient qu'à elles.
 *
 * Le design system (socle.css) et ce que les pages de rubrique partagent
 * (pages.css) sont chargés avant. On trouve ici la carte « prochain départ »
 * du hero, les cartes de programme, les zones du terrain de jeu, la section
 * propre au pays et les tuiles des autres destinations.
 *
 * Le préfixe est exo2-destination- et non exo2-dest- : ce dernier est déjà la
 * mosaïque des destinations de la page Tours & séjours, et deux sens pour une
 * même classe finissent toujours par se croiser.
 */

/* ---------- la carte du hero ---------- */
.exo2-destination .exo2-hhero-grid { grid-template-columns: 1fr 380px; align-items: center; }
.exo2-destination-carte { padding: 26px 28px 28px; }
.exo2-destination-carte .exo2-h4 { margin: 6px 0 4px; }
.exo2-destination-carte-date { font: 600 13px var(--exo2-police); letter-spacing: .6px; text-transform: uppercase; color: var(--exo2-corail); margin: 0 0 16px; }
.exo2-destination-carte-faits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 0 0 18px; }
.exo2-destination-carte-faits dt { font: 600 10.5px var(--exo2-police); letter-spacing: .9px; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
.exo2-destination-carte-faits dd { margin: 2px 0 0; font-size: 15px; color: var(--exo2-texte); }
.exo2-destination-carte-prix { font: italic 700 34px var(--exo2-police-titre); color: #fff; letter-spacing: 1px; margin: 0 0 4px; }
.exo2-destination-carte-etat { font: 600 12px var(--exo2-police); letter-spacing: 1px; text-transform: uppercase; color: var(--exo2-meta); margin: 0 0 18px; }
.exo2-destination .exo2-destination-carte-etat.exo2-ev-ok { display: inline-flex; }
.exo2 .exo2-destination-carte-toutes { display: block; margin-top: 14px; text-align: center; }

/* Un pays où les voyages sont suspendus : pas de carte de réservation, une
   annonce. Le liseré ambre la distingue sans crier. */
.exo2-destination-suspendu { box-shadow: inset 3px 0 0 #d9a441, var(--exo2-liseret), var(--exo2-ombre); }
.exo2-destination-suspendu .exo2-label { color: #d9a441; }
.exo2-destination-suspendu p { color: var(--exo2-meta); font-size: 15px; line-height: 1.6; margin: 10px 0 20px; }

/* ---------- les programmes ---------- */
/*
 * Le nombre de colonnes suit le nombre de fiches, plafonne a quatre.
 *
 * Depuis que les fiches portent la carte portrait, trois colonnes laissaient
 * la quatrieme fiche suisse orpheline sur une deuxieme rangee - ce qui se
 * voyait peu avec les anciennes cartes larges, et beaucoup avec celles-ci.
 * La page pose la valeur ; les pays a une ou trois fiches gardent trois
 * colonnes, une fiche seule occupant alors un tiers et non toute la largeur.
 */
.exo2-destination-progs { display: grid; grid-template-columns: repeat(var(--exo2-progs, 3), minmax(0, 1fr)); gap: 22px; }
.exo2-destination-prog { padding: 0; display: flex; flex-direction: column; }
.exo2-destination-prog > figure { margin: 0; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #1a1a1a; }
.exo2-destination-prog > figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exo2-destination-prog > figure .exo2-badge { position: absolute; left: 12px; top: 12px; }
.exo2-destination-prog-corps { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.exo2-destination-prog-corps p { color: var(--exo2-meta); font-size: 15px; line-height: 1.55; margin: 10px 0 0; }
.exo2-destination-prog-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 13px; color: var(--exo2-meta); }
.exo2-destination-prog-pied {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	margin-top: auto; padding-top: 16px; border-top: 1px solid var(--exo2-ligne);
}
.exo2-destination-prog-etat { font: 600 11px var(--exo2-police); letter-spacing: 1px; text-transform: uppercase; color: var(--exo2-meta); }

/* ---------- le terrain de jeu ---------- */
.exo2-destination-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.exo2-destination-zone { padding: 24px 26px; background: rgba(255, 255, 255, .03); border-left: 3px solid var(--exo2-corail); }
.exo2-destination-zone h3 { font: 700 18px var(--exo2-police-titre); margin-bottom: 8px; letter-spacing: .4px; }
.exo2-destination-zone p { color: var(--exo2-meta); font-size: 15px; line-height: 1.55; }
/* La règle des itinéraires, dite en toutes lettres à la fin de la section. */
.exo2-destination-secret { font-style: italic; }

/* ---------- ce qui est propre au pays ---------- */
.exo2-destination-propre { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.exo2-destination-propre p { color: var(--exo2-meta); font-size: 16px; line-height: 1.65; }
.exo2 .exo2-destination-propre .exo2-list { display: grid; gap: 12px; }
.exo2 .exo2-destination-propre .exo2-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.exo2 .exo2-destination-propre .exo2-coche { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--exo2-corail); }

/* ---------- les autres destinations ---------- */
.exo2-destination-autres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 34px; }
.exo2 .exo2-destination-autre {
	position: relative; display: block; overflow: hidden; color: #fff;
	aspect-ratio: 3 / 4; background: #1a1a1a;
}
.exo2-destination-autre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.exo2 .exo2-destination-autre:hover img { transform: scale(1.05); }
.exo2-destination-autre-ov {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
	padding: 20px; background: linear-gradient(180deg, rgba(13, 13, 13, .1) 35%, rgba(13, 13, 13, .88) 100%);
}
.exo2-destination-autre-ov b { font: 700 20px var(--exo2-police-titre); text-transform: uppercase; letter-spacing: .5px; color: #fff; }
.exo2-destination-autre-ov small { margin-top: 5px; font-size: 13.5px; color: rgba(255, 255, 255, .8); line-height: 1.4; }

.exo2-destination-offres { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.exo2-destination-offres .exo2-tile { grid-template-columns: minmax(0, 1fr); }

/* =======================================================================
   Tablette
   ======================================================================= */
@media (max-width: 1200px) {
	.exo2-destination .exo2-hhero-grid { grid-template-columns: 1fr 340px; gap: 34px; }
	.exo2-destination-progs, .exo2-destination-zones,
	.exo2-destination-offres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.exo2-destination-autres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
	.exo2-destination-propre { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* =======================================================================
   Smartphone
   ======================================================================= */
@media (max-width: 960px) {
	.exo2-destination .exo2-hhero-grid { display: block; padding-top: 96px; padding-bottom: 36px; }
	.exo2-destination-carte { margin-top: 28px; }
	.exo2-destination-carte-prix { font-size: 28px; }

	.exo2-destination-progs, .exo2-destination-zones,
	.exo2-destination-offres { grid-template-columns: minmax(0, 1fr); }

	/* Les autres destinations passent en bande à balayer : quatre tuiles
	   empilées feraient deux écrans pour une ligne de navigation. */
	.exo2-destination-autres {
		display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
		scrollbar-width: none; padding-bottom: 6px;
	}
	.exo2-destination-autres::-webkit-scrollbar { display: none; }
	.exo2 .exo2-destination-autre { flex: none; width: 190px; scroll-snap-align: start; }
}