/**
 * Socle des pages refondues d'Exoride.
 *
 * Le design system du site, relevé de theme.9.css et custom.css : fond #121212
 * et ses quatre styles de section, cartes #1f1f1f à liseré, dégradé signature
 * corail vers framboise à 135°, boutons sans arrondi en Josefin Sans 700
 * italique majuscules, titres en Archivo Black, fond topographique réservé aux
 * aplats Secondary.
 *
 * Ce fichier ne connaît aucune page en particulier : il porte ce que la page
 * événement et la page d'accueil partagent - la typographie, les boutons, les
 * sections, les cartes, les vignettes de sortie, le bandeau d'appel, la
 * privatisation, la newsletter. Chaque page charge ensuite sa propre feuille
 * pour ce qui n'appartient qu'à elle.
 *
 * Tout est préfixé exo2- : rien ne fuit vers le thème, et le thème ne fuit pas
 * vers nos pages.
 */

.exo2 {
	--exo2-fond: #121212;
	--exo2-fond-profond: #0d0d0d;
	--exo2-carte: #1f1f1f;
	--exo2-texte: rgba(255, 255, 255, .86);
	--exo2-meta: rgba(255, 255, 255, .55);
	--exo2-ligne: rgba(255, 255, 255, .09);
	--exo2-lien: #bb022e;
	--exo2-accent: #d02144;
	--exo2-corail: #f56d52;
	--exo2-degrade: linear-gradient(135deg, #f56d52, #bb022e);
	--exo2-degrade-survol: linear-gradient(135deg, #f68069, #c50230);
	--exo2-ombre: 0 8px 45px 0 rgba(0, 0, 0, .6);
	--exo2-ombre-survol: 0 5px 25px 0 rgba(0, 0, 0, .6);
	--exo2-liseret: inset 1px 1px 0 rgba(255, 255, 255, .05);
	--exo2-police: 'Fira Sans Condensed', 'Arial Narrow', Arial, sans-serif;
	--exo2-police-titre: 'Josefin Sans', 'Trebuchet MS', Arial, sans-serif;
	--exo2-police-h3: 'Archivo Black', 'Josefin Sans', Arial, sans-serif;

	font-family: var(--exo2-police);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.73;
	color: var(--exo2-texte);
	background: var(--exo2-fond);

	position: relative;
}

/* Pleine largeur : plutôt que d'élargir la page à 100vw - une largeur qui
   compte la barre de défilement, donc qui déborde -, on demande au conteneur
   du thème de rendre la main. La page gère ses propres sections. */
.uk-container:has(> .exo2) { max-width: none; padding-left: 0; padding-right: 0; }

/* En-tête posé sur la photo plutôt que sur un bandeau noir. Le thème rend la
   barre transparente lui-même sur les pages construites au Builder ; ici c'est
   à nous de le dire. Le fond revient dès que la barre se colle en haut
   (uk-navbar-sticky), sinon le menu deviendrait illisible sur le contenu. */
body:has(.exo2) .tm-header-overlay .uk-navbar-container:not(.uk-navbar-sticky) {
	background: transparent;
	box-shadow: none;
}
/* La barre de contact qui surmonte le menu perd elle aussi son fond : c'était
   le dernier bandeau noir en haut de page. Elle reprend le sien dès que
   l'en-tête se colle, avec le menu. */
body:has(.exo2) .tm-header-overlay .tm-toolbar,
body:has(.exo2) .tm-header-overlay .tm-toolbar-default {
	background: transparent;
	box-shadow: none;
}
/* Le thème réserve la hauteur de l'en-tête en poussant le contenu vers le bas.
   Sur ces pages, la photo doit passer dessous : c'est tout l'intérêt d'un
   en-tête posé sur l'image. */
body:has(.exo2) .tm-header-placeholder { display: none; }

/* Le conteneur du thème n'a plus de raison d'aérer autour d'une page qui gère
   ses propres sections. */
.tm-main:has(.exo2) { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Aucun overflow posé sur le document : le lui donner en ferait le conteneur
   de défilement à la place de la fenêtre, et l'en-tête collant du thème, qui
   suit le défilement de la fenêtre, ne se déclencherait plus jamais. */
html:has(.exo2) { /* essai : plus rien ici */ }

.exo2 *, .exo2 *::before, .exo2 *::after { box-sizing: border-box; }
.exo2 img { max-width: 100%; }
.exo2 p { margin: 0 0 12px; }
.exo2 p:last-child { margin-bottom: 0; }
.exo2 ul { margin: 0; padding: 0; list-style: none; }
.exo2 a { color: var(--exo2-corail); text-decoration: none; }
.exo2 a:hover { color: #fff; }
.exo2 a:focus-visible, .exo2 button:focus-visible, .exo2 summary:focus-visible { outline: 2px solid var(--exo2-corail); outline-offset: 3px; }

.exo2 h1, .exo2 h2, .exo2 h3, .exo2 h4 { color: #fff; margin: 0; text-transform: uppercase; }
.exo2 h2 { font: 600 27.2px/1.2 var(--exo2-police-titre); letter-spacing: .5px; }
.exo2 .exo2-h4 { font: 700 20px/1.25 var(--exo2-police-titre); }
.exo2-display { font: italic 700 40px/1.1 var(--exo2-police-titre); letter-spacing: 3px; text-transform: uppercase; color: #fff; }
.exo2-display-xl { font: italic 700 clamp(34px, 5vw, 64px)/1.05 var(--exo2-police-titre); letter-spacing: 4px; text-transform: uppercase; color: #fff; }
.exo2-label { font: 600 12px/1.4 var(--exo2-police); letter-spacing: 1px; text-transform: uppercase; color: var(--exo2-corail); }
/* Le surtitre d'un hero se détache du titre : collés, ils se lisent comme
   une seule ligne cassée en deux. */
.exo2-hero-label { margin-bottom: 28px; }

/* Silhouette de crête devant les surtitres, au dégradé signature.
   La forme est portée par un masque, donc par une seule couleur de fond :
   sans prise en charge du masque, l'ornement s'efface plutôt que de laisser
   un rectangle plein. */
@supports ((-webkit-mask: none) or (mask: none)) {
	.exo2-kicker::before, .exo2-hero-label::before {
		content: "";
		display: inline-block;
		width: 16px;
		height: 11px;
		margin-right: 9px;
		vertical-align: -1px;
		background: linear-gradient(135deg, #f56d52, #bb022e);
		-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'><path d='M0 11L6 1l4 5 2-2 4 7z' fill='black'/></svg>") no-repeat center/contain;
		mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'><path d='M0 11L6 1l4 5 2-2 4 7z' fill='black'/></svg>") no-repeat center/contain;
	}
}

.exo2-badge {
	display: inline-flex; align-items: center; height: 18px; padding: 0 9px 1px; border-radius: 500px;
	background: var(--exo2-accent); color: #fff; font: 600 11px/18px var(--exo2-police);
	letter-spacing: .6px; text-transform: uppercase; white-space: nowrap;
}
.exo2-badge-sombre { background: #333; }

.exo2 .exo2-more { color: #fff; font: italic 700 12px var(--exo2-police-titre); letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
.exo2 .exo2-more:hover { color: var(--exo2-corail); }
.exo2-fleche { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-left: 6px; }

/* Boutons : radius 0, Josefin 700 italique, compensation optique en bas.
   Sélecteurs préfixés .exo2 : la règle « .exo2 a » (liens corail) pèse autant
   qu'une classe seule et repeignait le texte des boutons en orange. */
.exo2 .exo2-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 30px 2px;
	font: italic 700 12px/34px var(--exo2-police-titre); letter-spacing: 2px; text-transform: uppercase;
	border-radius: 0; cursor: pointer; border: 2px solid transparent; color: #fff;
	transition: box-shadow .15s, border-color .15s, background-image .15s; white-space: nowrap; text-decoration: none;
}
.exo2 .exo2-btn:hover { color: #fff; }
.exo2 .exo2-btn-primary { background-color: var(--exo2-accent); background-image: var(--exo2-degrade); box-shadow: var(--exo2-ombre); color: #fff; }
.exo2 .exo2-btn-primary:hover { background-image: var(--exo2-degrade-survol); box-shadow: var(--exo2-ombre-survol); }
.exo2 .exo2-btn-secondary { background: transparent; color: #c9c9c9; border-color: #c9c9c9; }
.exo2 .exo2-btn-secondary:hover { color: #fff; border-color: #fff; }
.exo2-btn-lg { font-size: 13px; line-height: 44px; padding: 0 34px 2px; }
.exo2-btn-sm { font-size: 11px; line-height: 30px; padding: 0 18px 1px; letter-spacing: 1.5px; }
.exo2-btn-block { width: 100%; }

/* ---------- sections : les quatre styles du thème ---------- */
.exo2-section { position: relative; padding: 76px 0; }
.exo2-s-default { background: #0d0d0d linear-gradient(#000, #0d0d0d); }
.exo2-s-muted { background: #2a2a2a linear-gradient(#202020, #161616); }
.exo2-s-secondary { background: #121212; }
.exo2-s-primary { background: #bb022e linear-gradient(135deg, #f56d52, #bb022e); }
.exo2-s-default::before, .exo2-s-muted::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .5;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* La section Primary reprend exactement le fond des sections Primary du site
   (theme.9.css) : le dégradé signature mélangé en soft-light avec la texture
   du thème. Le grain et le fond topographique la quittent - la texture du
   thème fait ce travail, et trois couches en feraient une bouillie. */
@supports (background-blend-mode: soft-light) {
	.exo2-s-primary {
		background-image:
			linear-gradient(135deg, #f56d52, #bb022e),
			url("../../vendor/assets/uikit-themes/master-vibe/images/section-background-image.avif");
		background-blend-mode: soft-light;
		background-position-x: 0, 50%;
		background-color: transparent;
	}
}
.exo2-section > .exo2-wrap { position: relative; z-index: 1; }

/* Fond topographique, sur les seuls aplats Secondary.
 *
 * Le motif suit le contenu en retard, ce qui le fait lire comme un plan plus
 * lointain. Deux choses le permettent, et il en manquait deux :
 *
 * - background-attachment: fixed ancre le motif a la fenetre et non a la
 *   section. Deux sections eloignees dans la page montrent alors la meme
 *   carte, au bon endroit, sans raccord.
 * - --exo-topo-decalage est ecrite au defilement par js/custom.js, sur les
 *   sections concernees. C'est la meme variable que les pages du
 *   constructeur : un seul reglage pour tout le site, un seul script.
 *
 * La feuille lisait auparavant une variable a elle, --exo2-topo-y, que rien
 * n'ecrivait jamais : le fond restait fige sur toutes les pages refondues.
 */
.exo2-topo { isolation: isolate; }
.exo2-topo::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image: url("../../../../images/exoride/topographic-valais-altitudes.svg");
	background-repeat: repeat; background-size: 2400px auto;
	background-position: center calc(50% + var(--exo-topo-decalage, 0px));
	background-attachment: fixed;
	opacity: .12;
}

/*
 * Sur telephone, background-attachment: fixed est mal supporte et coute cher
 * au defilement : on revient a un ancrage normal, et le script abandonne le
 * mouvement de lui-meme sous 768 px.
 */
@media (max-width: 767px) {
	.exo2-topo::after { background-size: 1500px auto; opacity: .10; background-attachment: scroll; }
}

/* Point GPS ambiant, derrière le contenu des seules sections topo. */
.exo2-gps {
	position: absolute; z-index: 0; width: 9px; height: 9px; border-radius: 50%;
	background: #fff; opacity: .5; pointer-events: none;
	box-shadow: 0 0 0 2px #121212, 0 0 0 3px rgba(255, 255, 255, .45);
}
.exo2-gps::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); animation: exo2gps 3.2s ease-out infinite; }
@keyframes exo2gps { 0% { transform: scale(.3); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }

.exo2-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

.exo2-card { background: var(--exo2-carte); box-shadow: var(--exo2-liseret), var(--exo2-ombre); padding: 28px; }
.exo2-card-secondary { background: #000004 linear-gradient(135deg, #444141, #2d2d2d); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .07), var(--exo2-ombre); }

.exo2-sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.exo2-sec-head p { color: var(--exo2-meta); max-width: 640px; margin: 10px 0 0; font-size: 16px; }
.exo2-kicker { margin-bottom: 10px; }

.exo2-figcap { font-size: 12.5px; color: var(--exo2-meta); margin-top: 10px; }
.exo2-note { font-size: 13px; color: var(--exo2-meta); margin-top: 14px; }

/* ---------- voiles d'image ----------
   Le teint corail et le fondu vers le fond, posés sur toute photo pleine
   largeur : hero de la fiche, hero de l'accueil, bandes photo. */
.exo2-hero-shade {
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		rgba(18, 18, 18, .58) 0%,
		rgba(18, 18, 18, .3) 11%,
		rgba(18, 18, 18, 0) 23%,
		rgba(18, 18, 18, .32) 48%,
		rgba(18, 18, 18, .96) 100%);
}
.exo2-hero-tint { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(245, 82, 103, .3), rgba(187, 2, 64, .3)); opacity: .38; mix-blend-mode: multiply; }

/* ---------- vignettes de sortie ----------
   Les mêmes cartes servent les « autres sorties » d'une fiche et les
   « prochains départs » de l'accueil : une sortie se présente partout de la
   même façon, état des places compris. */
.exo2-events { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.exo2-ev { background: var(--exo2-carte); box-shadow: var(--exo2-liseret), var(--exo2-ombre); color: inherit; display: flex; flex-direction: column; transition: box-shadow .15s; }
.exo2-ev:hover { box-shadow: var(--exo2-liseret), var(--exo2-ombre-survol); color: inherit; }

/* Le texte que seuls les lecteurs d'écran lisent. Il reste dans le flux et
   reste sélectionnable : « display: none » le retirerait aussi d'eux. */
.exo2-lecteur {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

/*
 * Au survol, la vignette se soulève.
 *
 * Deux gardes. « hover: hover » écarte le tactile, où le survol se déclenche
 * au premier appui et fait bouger ce qu'on essaie de toucher. Et la barre des
 * 960 px écarte les petits écrans, où une vignette qui grandit recouvre ses
 * voisines faute de place autour.
 *
 * transform et box-shadow uniquement : ni la largeur ni la position dans la
 * grille ne changent, le navigateur n'a donc rien à recalculer. Sur une page
 * qui porte cinquante-huit vignettes, cela compte.
 */
@media (hover: hover) and (min-width: 960px) {
	.exo2-ev { transition: transform .18s ease, box-shadow .18s ease; will-change: transform; }
	/* position: relative rend le z-index effectif : sans lui, l'ombre de la
	   vignette survolee passerait sous sa voisine de droite, qui vient
	   apres elle dans le flux. */
	.exo2-ev:hover { transform: translateY(-5px) scale(1.012); position: relative; z-index: 2; }
	.exo2-ev figure img { transition: transform .35s ease; }
	.exo2-ev:hover figure img { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
	.exo2-ev, .exo2-ev figure img { transition: none; }
	.exo2-ev:hover { transform: none; }
	.exo2-ev:hover figure img { transform: none; }
}
.exo2-ev figure { margin: 0; aspect-ratio: 16 / 10; position: relative; background: #1a1a1a; overflow: hidden; }
.exo2-ev figure img { width: 100%; height: 100%; object-fit: cover; }
.exo2-ev .exo2-badge { position: absolute; left: 12px; top: 12px; }
.exo2-ev-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.exo2-ev-date { font: 600 11px var(--exo2-police); letter-spacing: 1.2px; text-transform: uppercase; color: var(--exo2-corail); }
.exo2-ev-body .exo2-h4 { font-size: 18px; margin: 6px 0 8px; }
.exo2-ev-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--exo2-meta); }
.exo2-ev-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--exo2-ligne); }
.exo2-ev-foot b { font: italic 700 20px var(--exo2-police-titre); color: #fff; letter-spacing: 1px; }
.exo2-ev-foot span { font: 600 11px var(--exo2-police); letter-spacing: 1px; text-transform: uppercase; color: var(--exo2-meta); }
/* La mention « changer de devise » du convertisseur ne s'affiche que là où le
   prix est le sujet - la carte de réservation, les formules. Ailleurs, elle
   coupe une phrase ou déborde d'une vignette. */
.exo2 .exo-price-hint { display: none; }
.exo2 .exo2-price .exo-price-hint,
.exo2 .exo2-formule-prix .exo-price-hint { display: block; }
.exo2-ev-ok { color: var(--exo2-texte) !important; display: inline-flex; align-items: center; gap: 7px; }
.exo2-ev-ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #58c06a; flex: none; }

/* ---------- vignette v2 : la date en pastille, les niveaux en jauge ---------- */

/* Un voile en bas de la photo : l'étiquette de format s'y pose sans que la
   photo ait à être sombre. */
.exo2-ev2 figure::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 96px; pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
}

/* La pastille de date. Le quantième porte la lecture, le mois le situe. */
.exo2-ev2-quand {
	position: absolute; left: 14px; top: 14px; z-index: 2;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-width: 54px; padding: 8px 10px 7px;
	background: rgba(18, 18, 18, .82); backdrop-filter: blur(6px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.exo2-ev2-quand b {
	font: italic 700 21px/1 var(--exo2-police-titre); color: #fff; letter-spacing: .5px;
}
.exo2-ev2-quand i {
	margin-top: 3px; font: 600 10px/1 var(--exo2-police); font-style: normal;
	letter-spacing: 1.4px; text-transform: uppercase; color: var(--exo2-corail);
}

/*
 * « Nouveau » passe à droite : la pastille de date occupe la gauche.
 *
 * Deux classes, et la plus faible perdait. Le socle place tout badge d'une
 * vignette en haut à gauche (« .exo2-ev .exo2-badge », deux classes) ; une
 * regle a classe unique ne peut pas le contredire. Le badge gardait donc son
 * « left: 12px » et recevait mon « right: 12px » : ancré des deux côtés, il
 * s'étirait sur toute la largeur de la photo et recouvrait la date.
 *
 * Le sélecteur en porte donc trois, et « left: auto » redevient effectif.
 */
.exo2-ev2 .exo2-badge.exo2-ev2-neuf {
	position: absolute; right: 12px; top: 14px; left: auto; z-index: 2;
}

/* Le format, en bas de la photo, sur le voile. */
.exo2-ev2-format {
	position: absolute; left: 14px; bottom: 12px; z-index: 2;
	font: 600 11px var(--exo2-police); letter-spacing: 1.1px; text-transform: uppercase;
	color: rgba(255, 255, 255, .92);
}

/* Le titre prend la première ligne du corps, que la date occupait. */
.exo2-ev2 .exo2-ev-body { gap: 0; }
.exo2-ev2 .exo2-h4 { font-size: 18.5px; line-height: 1.28; margin: 0 0 9px; }

/* Où et quand : une ligne, une icône, rien qui concurrence le titre. */
.exo2-ev2-ou {
	display: flex; align-items: center; gap: 7px;
	font-size: 13px; color: var(--exo2-meta);
}
.exo2-ev2-ou svg { width: 14px; height: 14px; flex: none; opacity: .8; }
.exo2-ev2 .exo2-ev-desc { margin: 11px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--exo2-meta); }

/* Les jauges de niveau : deux colonnes égales, détachées par un filet. */
.exo2-ev2-niveaux {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px;
	margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--exo2-ligne);
}
.exo2-ev2-jauge { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.exo2-ev2-jauge-nom {
	font: 600 10.5px var(--exo2-police); letter-spacing: .9px; text-transform: uppercase;
	color: var(--exo2-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.exo2-ev2-barres { display: flex; gap: 3px; flex: none; }
/*
 * Chaque barre porte deux fractions, posées par le gabarit : --p, ce qui est
 * acquis (le minimum), et --g, ce qui est possible (le maximum). Un niveau
 * exact les a égales ; un demi-niveau les arrête à mi-barre ; une plage laisse
 * entre les deux une teinte plus claire. Le dégradé peint les trois d'un coup,
 * sans classe ni barre supplémentaire.
 */
.exo2-ev2-barres i {
	width: 13px; height: 4px;
	background: linear-gradient(to right,
		var(--exo2-corail) 0 calc(var(--p, 0) * 100%),
		rgba(245, 109, 82, .42) calc(var(--p, 0) * 100%) calc(var(--g, 0) * 100%),
		rgba(255, 255, 255, .14) calc(var(--g, 0) * 100%) 100%);
}

/* Le prix domine son pied de vignette ; la disponibilité s'y range. */
.exo2-ev2 .exo2-ev-foot { margin-top: 14px; padding-top: 13px; }
.exo2-ev2 .exo2-ev-foot b { font-size: 22px; }

/*
 * La vignette est un article, plus un lien : elle porte deux boutons, et un
 * lien dans un lien n'est pas du HTML valide.
 *
 * Le lien du titre s'étire malgré tout sur toute la carte par un ::after, ce
 * qui rend la grande cible de clic sans ajouter d'arrêt de tabulation. Les
 * boutons repassent au-dessus par leur seul position: relative.
 */
.exo2-ev2 { position: relative; }
/* Le titre ne se souligne jamais, survol compris : la carte entiere repond
   deja au survol, un soulignement de plus ne dit rien et alourdit une grille
   de cinquante-huit vignettes. */
/* Trois classes, parce que « .exo2 a » du socle en pese deux : le titre
   ressortait en corail comme un lien ordinaire, alors qu'il doit se lire comme
   un titre. */
.exo2-ev2 .exo2-h4 .exo2-ev2-titre,
.exo2-ev2 .exo2-h4 .exo2-ev2-titre:hover,
.exo2-ev2 .exo2-h4 .exo2-ev2-titre:focus { color: inherit; text-decoration: none; }
.exo2-ev2-titre::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.exo2-ev2:hover .exo2-h4 .exo2-ev2-titre { color: #fff; }

.exo2-ev2-actions {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
	margin-top: 14px;
}
/* Les libellés varient d'une langue à l'autre (« Voir les prochaines dates »
   contre « Buchen ») : le bouton se resserre plutôt que de déborder. */
.exo2-ev2-actions .exo2-btn { width: 100%; padding-left: 10px; padding-right: 10px; text-align: center; }

@media (max-width: 639px) {
	.exo2-ev2-quand { min-width: 48px; padding: 7px 9px 6px; }
	.exo2-ev2-quand b { font-size: 19px; }
	.exo2-ev2-niveaux { grid-template-columns: minmax(0, 1fr); gap: 5px; }
}

/* ---------- avis ---------- */
.exo2-rating { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.exo2-stars { color: var(--exo2-corail); letter-spacing: 2px; font-size: 18px; }
.exo2-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.exo2-review { display: flex; flex-direction: column; gap: 12px; }
.exo2-review .exo2-badge { align-self: flex-start; }
.exo2-review p { font-size: 15px; line-height: 1.55; margin: 0; flex: 1; font-weight: 300; }
.exo2-review footer { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--exo2-meta); }
.exo2-avatar { width: 36px; height: 36px; background: var(--exo2-degrade); color: #fff; display: grid; place-items: center; font: 700 13px var(--exo2-police-titre); flex: none; }
.exo2-review footer b { display: block; color: #fff; font: 700 13px var(--exo2-police-titre); text-transform: uppercase; letter-spacing: .3px; }

/* ---------- bandeau d'appel final ---------- */
.exo2-final { text-align: center; }
.exo2-final .exo2-display-xl { max-width: 900px; margin: 8px auto 16px; }
.exo2-final p { color: var(--exo2-texte); font-size: 17px; max-width: 600px; margin: 0 auto 30px; font-weight: 300; }
.exo2-final-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ---------- privatiser ---------- */
.exo2-priv { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.exo2-priv .exo2-label { color: #fff; }
.exo2-priv-titre { font-size: 34px; margin-top: 8px; }
.exo2-priv p { margin: 10px 0 0; color: #fff; font-size: 16px; max-width: 680px; }
.exo2-s-primary .exo2-btn-secondary { color: #fff; border-color: #fff; }
.exo2-s-primary .exo2-btn-secondary:hover { background: rgba(255, 255, 255, .12); }
.exo2-tiroir { background: #121212; color: var(--exo2-texte); padding: 30px; }

/* ---------- newsletter ---------- */
.exo2-news-section { padding: 40px 0; }
.exo2-news { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; }
.exo2-news p { margin: 6px 0 0; color: var(--exo2-meta); }
.exo2-news-form form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.exo2-news-form input[type="email"], .exo2-news-form input[type="text"] {
	width: 300px; max-width: 100%; border: 1px solid rgba(255, 255, 255, .3); background: #0d0d0d;
	color: #fff; padding: 0 16px; height: 40px; font: 15px var(--exo2-police); border-radius: 0;
}
.exo2-news-form input[type="submit"], .exo2-news-form button {
	background-color: var(--exo2-accent); background-image: var(--exo2-degrade); color: #fff; border: 0; border-radius: 0;
	font: italic 700 12px/40px var(--exo2-police-titre); letter-spacing: 2px; text-transform: uppercase;
	padding: 0 26px 2px; cursor: pointer; box-shadow: var(--exo2-ombre);
}

/* =======================================================================
   Smartphone et tablette
   ======================================================================= */
@media (max-width: 960px) {
	.exo2 { font-size: 16px; }
	.exo2-wrap { padding: 0 18px; }
	.exo2-section { padding: 48px 0; }
	.exo2 h2 { font-size: 23px; }
	.exo2-display { font-size: 26px; letter-spacing: 2px; }

	.exo2-sec-head { display: block; margin-bottom: 22px; }
	.exo2-sec-head .exo2-more { display: inline-block; margin-top: 10px; }

	/* Les vignettes de sortie et les avis passent en carrousels à balayage. */
	.exo2-events, .exo2-reviews {
		display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
		padding-bottom: 8px; scrollbar-width: none;
	}
	.exo2-events::-webkit-scrollbar, .exo2-reviews::-webkit-scrollbar { display: none; }
	.exo2-ev { flex: none; width: 280px; scroll-snap-align: start; }
	/* Les prochains départs de l'accueil rendent la carte partagée : elle prend
	   sa place dans le carrousel au même titre que l'ancienne vignette. */
	.exo2-events > .exo2-carte { flex: none; width: 280px; scroll-snap-align: start; }
	.exo2-review { flex: none; width: 300px; scroll-snap-align: start; padding: 16px; }

	.exo2-final-actions { display: grid; gap: 10px; }
	.exo2-final-actions .exo2-btn { width: 100%; }

	.exo2-priv { display: block; }
	.exo2-priv .exo2-btn { margin-top: 16px; width: 100%; }
	.exo2-priv-titre { font-size: 22px; }

	.exo2-news { display: block; }
	.exo2-news-form { margin-top: 14px; }
	/* Le formulaire d'AcyMailing est une table de largeur fixe : sur un
	   téléphone, elle sortait de l'écran. */
	.exo2-news-form table, .exo2-news-form td, .exo2-news-form .acym_module_form { max-width: 100%; width: 100%; }
	.exo2-news-form input[type="email"], .exo2-news-form input[type="text"] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.exo2-gps::after { animation: none; opacity: .25; }
	html:has(.exo2) { scroll-behavior: auto; }
}