/**
 * Page Tours & séjours refondue - ce qui n'appartient qu'à elle.
 *
 * Le design system (socle.css) et ce que les pages de rubrique partagent
 * (pages.css) sont chargés avant. On ne trouve ici que les deux façons de
 * partir, le prochain départ posé sur une tuile de destination, la revue de
 * presse et le lecteur vidéo en grand.
 */

/* ---------- deux façons de partir ---------- */
.exo2-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.exo2-way { position: relative; overflow: hidden; display: block; color: #fff; min-height: 420px; }
.exo2-way img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.exo2-way:hover img { transform: scale(1.04); }
.exo2-way > div { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px; }
.exo2-way .exo2-badge { margin-bottom: 12px; }
.exo2-way p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .88); }
.exo2-way-meta {
	display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px;
	font: 600 11.5px var(--exo2-police); letter-spacing: 1px; text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

/* ---------- le prochain départ, sur la tuile ---------- */
/* En bloc plutôt qu'en flex : le convertisseur de devise remplace le montant
   par ses propres éléments, et un conteneur flex les aurait éparpillés sur la
   largeur de la tuile. */
.exo2-dest-next {
	display: block; margin-top: 12px;
	font: 600 11.5px/1.5 var(--exo2-police); letter-spacing: 1px; text-transform: uppercase; color: #fff;
}
.exo2-dest-next::before {
	content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
	background: #58c06a; margin-right: 8px; vertical-align: 1px;
}
.exo2-dest-complet { color: rgba(255, 255, 255, .65); }
.exo2-dest-complet::before { background: rgba(255, 255, 255, .45); }

/* ---------- la revue de presse ---------- */
.exo2-press-logos {
	display: flex; flex-wrap: wrap; align-items: center; gap: 24px 50px;
	padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--exo2-ligne);
}
.exo2-press-logos img {
	height: 34px; width: auto; flex: none; opacity: .55; filter: grayscale(1) brightness(2);
	transition: opacity .15s, filter .15s;
}
.exo2-press-logos img:hover { opacity: 1; filter: none; }

.exo2-press-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.exo2-press-card { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: #1a1a1a; }
.exo2-press-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.exo2-press-card > div { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; }
.exo2-press-card p { margin: 6px 0 0; font-size: 13px; color: rgba(255, 255, 255, .8); }

/* Quatre étapes plutôt que trois. */
.exo2-steps-4 { grid-template-columns: repeat(4, 1fr); }

/* =======================================================================
   Tablette
   ======================================================================= */
@media (max-width: 1100px) {
	.exo2-press-grid { grid-template-columns: repeat(2, 1fr); }
	.exo2-steps-4 { grid-template-columns: repeat(2, 1fr); }
}

/* =======================================================================
   Smartphone
   ======================================================================= */
@media (max-width: 960px) {
	.exo2-ways { grid-template-columns: 1fr; }
	.exo2-way { min-height: 340px; }
	.exo2-steps-4 { grid-template-columns: 1fr; }
	.exo2-press-logos { gap: 18px 30px; padding-bottom: 24px; margin-bottom: 24px; }
	.exo2-press-logos img { height: 26px; }

	/* Les pages de magazine défilent au doigt, comme les autres cartes photo. */
	.exo2-press-grid {
		display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
		padding-bottom: 8px; scrollbar-width: none;
	}
	.exo2-press-grid::-webkit-scrollbar { display: none; }
	.exo2-press-card { flex: none; width: 220px; scroll-snap-align: start; }
}