/**
 * Les pages de contenu refondues - ce qu'elles partagent.
 *
 * Le design system (variables, typographie, boutons, sections, cartes,
 * vignettes d'événement, avis, privatisation, newsletter) vit dans socle.css,
 * que le gabarit charge avant cette feuille. On trouve ici ce qui sert à
 * plusieurs pages sans appartenir au socle : le hero de page et son bloc de
 * choix, les bandes photo, les filtres d'événements et la règle du départ
 * garanti, les formules, les tuiles, les partenaires - plus ce qui n'existe
 * que sur l'accueil : le bandeau « en ce moment », les expériences, les
 * piliers, les destinations, le blog.
 */

/* ---------- hero ---------- */
.exo2-hhero {
	position: relative; background: #0d0d0d; color: #fff;
	min-height: 660px; display: flex; align-items: flex-end; overflow: hidden;
}
.exo2-hhero-media { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; object-fit: cover; }
.exo2-hhero-media img { width: 100%; height: 100%; object-fit: cover; }
.exo2-hhero-grid {
	position: relative; z-index: 2; width: 100%;
	display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: end;
	padding-top: 150px; padding-bottom: 56px;
}
/* L'accueil donne plus de place à sa photo : elle y est le premier argument. */
.exo2-home .exo2-hhero { min-height: min(860px, 92vh); }
.exo2-hhero h1 { max-width: 660px; text-wrap: balance; }
.exo2-hhero-sub {
	font: 300 20px/1.5 var(--exo2-police); color: var(--exo2-texte);
	max-width: 560px; margin: 18px 0 0;
}
.exo2-hhero-note { margin-top: 18px; }
.exo2-hhero-note b { color: #fff; }
.exo2-hhero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 28px; }

/* Le moteur de recherche : trois choix, une seule décision. */
.exo2-finder { padding: 26px 26px 24px; }
.exo2-finder .exo2-h4 { margin: 6px 0 18px; }
.exo2-finder-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.exo2-finder-large { grid-column: 1 / -1; }
.exo2-finder label {
	display: block; font: 600 11px var(--exo2-police); letter-spacing: 1px;
	text-transform: uppercase; color: var(--exo2-meta); margin: 14px 0 6px;
}
.exo2-finder input[type="date"] {
	width: 100%; height: 42px; padding: 0 12px; border-radius: 0;
	background: #0d0d0d; color: #fff; border: 1px solid rgba(255, 255, 255, .22);
	font: 15px var(--exo2-police);
}
/* Le sélecteur de date des navigateurs Chromium est noir sur noir sans cela. */
.exo2-finder input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .6; cursor: pointer; }
.exo2-finder input[type="date"]:focus-visible { outline: 2px solid var(--exo2-corail); outline-offset: 2px; }
.exo2-finder select {
	width: 100%; height: 42px; padding: 0 14px; border-radius: 0;
	background: #0d0d0d; color: #fff; border: 1px solid rgba(255, 255, 255, .22);
	font: 15px var(--exo2-police); appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23f56d52' stroke-width='2'><path d='M5 8l5 5 5-5'/></svg>");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.exo2-finder select:focus-visible { outline: 2px solid var(--exo2-corail); outline-offset: 2px; }
.exo2-finder .exo2-btn { margin-top: 22px; }

/* ---------- la vidéo en grand ---------- */
.exo2-play { display: inline-flex; align-items: center; gap: 10px; }

/*
 * « Regarder la vidéo », sous les deux boutons du hero.
 *
 * Là où le hero porte déjà deux actions - voir les dates, privatiser - un
 * troisième cadre venait se disputer le même regard, alors que la vidéo n'est
 * pas une action de même rang. Elle descend sous la ligne, sans cadre, à la
 * typographie des liens de la maison (.exo2-more), en gardant sa pastille de
 * lecture pour rester reconnaissable.
 *
 * Le bouton reste un <button> : il ouvre une fenêtre, il ne mène nulle part.
 */
.exo2-hhero-video { margin: 16px 0 0; }
.exo2 .exo2-play-lien {
	padding: 0; border: 0; background: none; box-shadow: none; appearance: none;
	color: #fff; font: italic 700 12px var(--exo2-police-titre);
	letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
	cursor: pointer;
}
.exo2 .exo2-play-lien:hover { color: var(--exo2-corail); }
.exo2 .exo2-play-lien:hover .exo2-play-ic { background: var(--exo2-corail); }
.exo2 .exo2-play-lien:focus-visible { outline: 2px solid var(--exo2-corail); outline-offset: 4px; }
.exo2-play-ic {
	display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
	background: var(--exo2-accent); color: #fff;
}
.exo2-play-ic svg { width: 10px; height: 10px; margin-left: 1px; }
.exo2-video-modal { background: #0d0d0d; padding: 0; width: min(1100px, 92vw); }
.exo2-video-modal video { width: 100%; height: auto; display: block; }

/* ---------- en ce moment ---------- */
.exo2-now-section { padding: 0; }
.exo2-now {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 34px;
	padding-top: 18px; padding-bottom: 18px;
	font-size: 14.5px; color: var(--exo2-texte);
}
/* Chaque fait est une ligne, qu'elle mène quelque part ou non. */
.exo2-now > span,
.exo2-now > a { display: inline-flex; align-items: center; gap: 10px; }
.exo2-now b { color: #fff; }

/* Ceux qui mènent à une fiche se signalent : le texte s'éclaircit au survol,
   la pastille garde sa couleur. Pas de soulignement, la ligne est courte et
   le bandeau doit rester calme. */
.exo2-now > a { color: inherit; text-decoration: none; transition: color .15s; }
.exo2-now > a:hover { color: #fff; }

/* ---------- les quatre expériences ---------- */
.exo2-exp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.exo2-exp-item {
	background: var(--exo2-carte); box-shadow: var(--exo2-liseret), var(--exo2-ombre);
	color: inherit; display: flex; flex-direction: column; transition: box-shadow .15s;
}
.exo2-exp-item:hover { box-shadow: var(--exo2-liseret), var(--exo2-ombre-survol); color: inherit; }
.exo2-exp-item figure { margin: 0; aspect-ratio: 4 / 3; background: #1a1a1a; overflow: hidden; }
.exo2-exp-item figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.exo2-exp-item:hover figure img { transform: scale(1.04); }
.exo2-exp-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.exo2-exp-body .exo2-badge { align-self: flex-start; }
.exo2-exp-body p { color: var(--exo2-meta); font-size: 15px; line-height: 1.5; margin: 0; }
.exo2-exp-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin-top: auto; padding-top: 16px; border-top: 1px solid var(--exo2-ligne);
}

/* ---------- bandes photo ---------- */
.exo2-band {
	position: relative; overflow: hidden; color: #fff;
	min-height: 420px; display: flex; align-items: center; padding: 70px 0;
}
.exo2-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exo2-band-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 13, .55), rgba(13, 13, 13, .8)); }
/* flex: 1 et min-width: 0 : la bande est un conteneur flex, et sans cela son
   contenu large - trois avis côte à côte - étirerait le conteneur au lieu de
   défiler à l'intérieur. */
.exo2-band > .exo2-wrap { position: relative; z-index: 2; flex: 1; min-width: 0; }
.exo2-band .exo2-display-xl { margin: 10px 0 14px; max-width: 900px; text-wrap: balance; }
.exo2-band > .exo2-wrap > p { max-width: 620px; font-size: 17px; font-weight: 300; margin: 0; }
.exo2-band-label { color: #fff; }
.exo2-band-reviews { min-height: 0; padding: 76px 0; }
.exo2-band-reviews .exo2-review { background: rgba(31, 31, 31, .88); backdrop-filter: blur(2px); }
.exo2-band-reviews .exo2-rating { color: #fff; }
.exo2-band-reviews .exo2-rating b { color: #fff; }

/* ---------- prochains départs ---------- */
.exo2-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: -14px 0 26px; }
.exo2-filters button {
	background: transparent; border: 1px solid rgba(255, 255, 255, .22); border-radius: 0;
	color: var(--exo2-texte); cursor: pointer; padding: 7px 16px 6px;
	font: 600 12px var(--exo2-police); letter-spacing: 1px; text-transform: uppercase;
	transition: border-color .15s, color .15s, background-color .15s;
}
.exo2-filters button:hover { color: #fff; border-color: #fff; }
.exo2-filters button.exo2-on { background: var(--exo2-accent); border-color: transparent; color: #fff; }
.exo2-vide { color: var(--exo2-meta); margin: 24px 0 0; }

/* La règle de la maison, sous la liste : elle explique un état des places qui
   ne se raconte pas de lui-même. */
.exo2-rule {
	margin-top: 30px; padding: 20px 24px; border-left: 3px solid var(--exo2-corail);
	background: rgba(255, 255, 255, .03); font-size: 15px; color: var(--exo2-texte);
}
.exo2-rule b { color: #fff; }

/* ---------- pourquoi Exoride ---------- */
.exo2-why { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
.exo2 .exo2-pillars { display: grid; gap: 20px; margin-top: 54px; }
.exo2-pillars li { display: flex; gap: 14px; align-items: flex-start; }
.exo2-pillars b { display: block; color: #fff; font: 700 15px var(--exo2-police-titre); text-transform: uppercase; letter-spacing: .5px; }
.exo2-pillars span { color: var(--exo2-meta); font-size: 15px; line-height: 1.55; }
.exo2-coche { width: 20px; height: 20px; flex: none; color: var(--exo2-corail); margin-top: 3px; }

.exo2-bigstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--exo2-ligne); }
.exo2-bigstats b { display: block; font: italic 700 34px var(--exo2-police-titre); color: #fff; letter-spacing: 1px; }
.exo2-bigstats span { font-size: 13.5px; color: var(--exo2-meta); }

.exo2-chris { text-align: center; }
.exo2-chris figure { margin: 0 0 16px; }
/* Cadrage haut : sur un portrait de rider, le visage est au-dessus du centre,
   et un cadrage centré ne montrerait que le casque. */
.exo2-chris figure img { width: 120px; height: 120px; object-fit: cover; object-position: center 22%; border-radius: 50%; }
.exo2-chris .exo2-h4 { margin: 6px 0 10px; }
.exo2-chris-texte { font-size: 15px; line-height: 1.6; color: var(--exo2-meta); text-align: left; }
.exo2-chris-texte p { margin: 0 0 10px; }

/* ---------- destinations ---------- */
.exo2-dest { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 18px; }
.exo2-dest a { position: relative; overflow: hidden; display: block; color: #fff; }
.exo2-dest a:first-child { grid-column: span 2; grid-row: span 2; }
.exo2-dest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.exo2-dest a:hover img { transform: scale(1.05); }
.exo2-dest-ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 13, .1) 35%, rgba(13, 13, 13, .85) 100%); }
.exo2-dest a > div { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; }
.exo2-dest p { margin: 6px 0 0; font-size: 14px; color: rgba(255, 255, 255, .82); }
.exo2-dest a:first-child .exo2-h4 { font-size: 26px; }

/* ---------- navettes ---------- */
.exo2-usps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 30px; }
.exo2-usps > div { padding: 20px 22px; background: rgba(255, 255, 255, .03); border-left: 3px solid var(--exo2-corail); }
.exo2-usps b { display: block; font: italic 700 26px var(--exo2-police-titre); color: #fff; letter-spacing: 1px; }
.exo2-usps span { font-size: 14.5px; color: var(--exo2-meta); }

.exo2-formules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.exo2-formule-prix { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 16px; }
.exo2-formule-prix b { font: italic 700 32px var(--exo2-police-titre); color: #fff; letter-spacing: 1px; }
.exo2-formule-prix span { font-size: 13px; color: var(--exo2-meta); }
.exo2 .exo2-list { display: grid; gap: 10px; margin-bottom: 30px; }
.exo2-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--exo2-meta); }
.exo2-formules .exo2-btn { margin-top: auto; }
.exo2-formules .exo2-card { display: flex; flex-direction: column; }

/* La mention « changer de devise » du convertisseur passe sous le montant,
   comme sur la fiche : dans la ligne du prix, elle le coupait en deux. */
.exo2 .exo2-formule-prix .exo-price-hint {
	display: block; width: 100%; margin: 4px 0 0; font: 400 12px/1.3 var(--exo2-police);
	font-style: normal; letter-spacing: 0; color: var(--exo2-meta);
}

/* ---------- partenaires ---------- */
.exo2-partners-section { padding: 40px 0 56px; }
.exo2-partners-titre { margin-bottom: 22px; }
.exo2-partners { display: flex; flex-wrap: wrap; align-items: center; gap: 26px 54px; }
.exo2-partners img { height: 62px; width: auto; flex: none; opacity: .65; filter: grayscale(1); transition: opacity .15s, filter .15s; }
.exo2-partners a { flex: none; display: block; }
.exo2-partners a:hover img, .exo2-partners img:hover { opacity: 1; filter: none; }

/* ---------- les chiffres qui décident ---------- */
.exo2-facts-section { padding: 30px 0; }
.exo2-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 0; padding: 0; }
.exo2-facts div { padding: 4px 16px; border-left: 1px solid var(--exo2-ligne); }
.exo2-facts div:first-child { border-left: 0; padding-left: 0; }
.exo2-facts dt { font: 400 11px var(--exo2-police); letter-spacing: 1.2px; text-transform: uppercase; color: var(--exo2-meta); }
.exo2-facts dd { margin: 4px 0 0; font: 700 19px/1.2 var(--exo2-police-titre); text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.exo2-facts dd small { display: block; font: 400 12px var(--exo2-police); letter-spacing: 0; text-transform: none; color: var(--exo2-meta); }
.exo2-facts dd small a { color: var(--exo2-corail); }

/* ---------- comment ça se passe ---------- */
.exo2-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.exo2-step {
	position: relative; padding: 26px 24px 24px;
	background: rgba(255, 255, 255, .03); border-left: 3px solid var(--exo2-corail);
}
.exo2-step-num {
	display: block; font: italic 700 30px var(--exo2-police-titre);
	color: var(--exo2-corail); letter-spacing: 1px; margin-bottom: 8px;
}
.exo2-step p { color: var(--exo2-meta); font-size: 15px; line-height: 1.55; margin: 10px 0 0; }

/* ---------- formats spéciaux ---------- */
.exo2-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.exo2-format { position: relative; overflow: hidden; display: block; color: #fff; min-height: 380px; }
.exo2-format img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.exo2-format:hover img { transform: scale(1.05); }
.exo2-format > div { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; }
.exo2-format p { margin: 8px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, .85); line-height: 1.5; }
.exo2-format-prix { position: absolute; top: 16px; left: 16px; }
.exo2-format-date { display: block; margin-top: 10px; font: 600 11px var(--exo2-police); letter-spacing: 1px; text-transform: uppercase; color: var(--exo2-corail); }

/* ---------- galerie ---------- */
.exo2-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 12px; }
.exo2-gallery figure { margin: 0; position: relative; overflow: hidden; }
.exo2-gallery figure:first-child { grid-column: span 2; grid-row: span 2; }
.exo2-gallery img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- la mosaique de cinq (exo/galerie.php) ----------
 *
 * Cinq photos : une grande a gauche sur deux rangees, quatre petites a droite.
 * C'est la forme de la fiche d'evenement, reprise a l'identique - le visiteur
 * ne doit pas apprendre deux galeries.
 *
 * Le nombre n'est pas un reglage : la grille en tient cinq, le rendu en pose
 * cinq. Les suivantes vivent dans la visionneuse, par des liens caches.
 */
.exo2-gallery-mosaique {
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 260px 260px;
	grid-auto-rows: 260px;
	gap: 10px;
}

.exo2-gallery-mosaique figure { background: #1a1a1a; box-shadow: var(--exo2-ombre); }
.exo2-gallery-mosaique figure:first-child { grid-column: auto; grid-row: 1 / 3; }
.exo2-gallery-mosaique a { display: block; width: 100%; height: 100%; }
.exo2-gallery-mosaique img { transition: transform .4s; }
.exo2-gallery-mosaique figure:hover img { transform: scale(1.03); }

/*
 * Le compteur est pose SUR la cinquieme photo, qui est elle-meme l'entree de
 * la visionneuse : il ne capte donc pas le pointeur, sinon il volerait le clic
 * a la photo qu'il recouvre.
 */
/*
 * Le compteur ne capte pas le pointeur : il laisse passer le clic vers la
 * photo qui le porte, laquelle EST l'entree de la visionneuse. Il faut donc
 * qu'il reagisse au survol de la VIGNETTE, sinon il a l'air d'un bouton mort.
 */
.exo2-gallery-more {
	position: absolute; right: 14px; bottom: 14px;
	pointer-events: none;
	transition: transform .2s, box-shadow .2s;
}

.exo2-gallery-mosaique figure:hover .exo2-gallery-more {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

/* Les photos au-dela de la cinquieme : dans le document, pas a l'ecran.
 *
 * DEUX classes dans le selecteur, et ce n'est pas du zele : « .exo2-gallery a »
 * juste au-dessus pose display:block et pese une classe PLUS un type, donc plus
 * lourd qu'une classe seule. Ecrite simplement, cette regle perdait, les
 * cinquante liens vides se posaient en grille, et la galerie de l'Italie
 * mesurait 5120 px de haut - mesure. */
.exo2-gallery .exo2-gallery-cache { display: none; }
/*
 * La legende est posee SUR la photo, donc sur le lien qui ouvre la
 * visionneuse : sans « pointer-events: none » elle intercepte le clic.
 *
 * Le defaut se voyait mal et se comprenait encore moins : la bande occupe tout
 * le bas de la vignette, exactement la ou se pose le bouton « Voir les N
 * photos ». Cliquer le bouton ne faisait rien, cliquer un peu plus haut
 * ouvrait la visionneuse - Christian l'a signale ainsi : « le bouton n'est pas
 * cliquable, on dirait que c'est la photo en dessous qui reagit ». C'etait
 * exactement cela. La feuille de la fiche d'evenement, elle, portait la regle.
 */
.exo2-gcap {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px;
	background: linear-gradient(180deg, transparent, rgba(13, 13, 13, .85));
	font-size: 12.5px; color: rgba(255, 255, 255, .9);
	pointer-events: none;
}

/* ---------- engagement sur les sentiers ---------- */
.exo2-engage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.exo2-engage p { color: var(--exo2-meta); font-size: 15.5px; line-height: 1.6; margin-top: 12px; }

/* ---------- questions fréquentes ---------- */
.exo2-faq { display: grid; gap: 2px; }
.exo2-faq details { background: rgba(255, 255, 255, .03); border-left: 3px solid transparent; transition: border-color .15s; }
.exo2-faq details[open] { border-left-color: var(--exo2-corail); }
.exo2-faq summary {
	cursor: pointer; padding: 18px 22px; list-style: none;
	font: 700 15px var(--exo2-police-titre); text-transform: uppercase; letter-spacing: .4px; color: #fff;
}
.exo2-faq summary::-webkit-details-marker { display: none; }
.exo2-faq summary::after { content: "+"; float: right; color: var(--exo2-corail); font-size: 20px; line-height: 1; }
.exo2-faq details[open] summary::after { content: "–"; }
/* Le sélecteur ne visait que « div » quand toutes les pages écrivent un « p » :
   les réponses s'affichaient sans marges, collées au bord et à la taille du
   texte courant. Les deux formes sont désormais habillées. */
.exo2-faq details > div,
.exo2-faq details > p { margin: 0; padding: 0 22px 20px; color: var(--exo2-meta); font-size: 15px; line-height: 1.6; }

/* ---------- blog ---------- */
.exo2-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.exo2-post {
	background: var(--exo2-carte); box-shadow: var(--exo2-liseret), var(--exo2-ombre);
	color: inherit; display: flex; flex-direction: column; transition: box-shadow .15s;
}
.exo2-post:hover { box-shadow: var(--exo2-liseret), var(--exo2-ombre-survol); color: inherit; }
.exo2-post figure { margin: 0; aspect-ratio: 16 / 9; background: #1a1a1a; overflow: hidden; }
.exo2-post figure img { width: 100%; height: 100%; object-fit: cover; }
.exo2-post-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.exo2-post-body p { color: var(--exo2-meta); font-size: 15px; line-height: 1.5; margin: 0 0 6px; }
.exo2-post-body .exo2-more { margin-top: auto; }

/* ---------- location et bon cadeau ---------- */
.exo2-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 1200px; }
.exo2-tile { display: grid; grid-template-columns: 1fr 200px; gap: 24px; align-items: center; }
.exo2-tile p { color: var(--exo2-meta); font-size: 15px; margin: 10px 0 18px; }
.exo2-tile .exo2-h4 { margin-top: 6px; }
.exo2-tile figure { margin: 0; }
.exo2-tile figure img { width: 100%; height: auto; }

/* =======================================================================
   Tablette
   ======================================================================= */
@media (max-width: 1100px) {
	.exo2-exp { grid-template-columns: repeat(2, 1fr); }
	.exo2-hhero-grid { grid-template-columns: 1fr 340px; gap: 34px; }
	.exo2-dest, .exo2-formats, .exo2-gallery { grid-template-columns: repeat(2, 1fr); }
	/* La mosaique garde ses trois colonnes, en rangees plus basses. */
	.exo2-gallery-mosaique { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 200px 200px; }
	.exo2-dest a:first-child { grid-column: span 2; grid-row: span 1; }
}

/* =======================================================================
   Smartphone
   ======================================================================= */
@media (max-width: 960px) {
	.exo2-hhero { min-height: 0; }
	.exo2-hhero-grid { display: block; padding-top: 96px; padding-bottom: 36px; }
	.exo2-hhero-sub { font-size: 17px; }
	.exo2-finder { margin-top: 28px; }
	/* Sur un téléphone, seules les deux dates gardent leurs colonnes : un
	   « Type d'expérience » sur 160 px ne se lit plus. */
	.exo2-finder-grille > div:nth-child(-n+2) { grid-column: 1 / -1; }
	/*
	 * Les boutons du hero prennent la largeur, et surtout ils la respectent.
	 *
	 * « flex: 1 » seul ne suffit pas : un élément flex ne descend pas sous sa
	 * largeur de contenu, et « Voir les prochains événements » en capitales
	 * espacées, avec 60 px de rembourrage et white-space: nowrap, réclamait
	 * 347 px dans une colonne de 339. Le bouton débordait de 8 px. On lui rend
	 * le droit de rétrécir, et on resserre le rembourrage pour que le libellé
	 * tienne sur sa ligne.
	 */
	.exo2-hhero-actions .exo2-btn { flex: 1 1 100%; min-width: 0; padding-left: 16px; padding-right: 16px; }

	.exo2-now { display: flex; gap: 8px 18px; padding-top: 14px; padding-bottom: 14px; font-size: 13.5px; }

	.exo2-exp { grid-template-columns: 1fr; }
	.exo2-band { min-height: 320px; padding: 54px 0; }
	.exo2-posts, .exo2-usps, .exo2-formules, .exo2-tiles { grid-template-columns: 1fr; }
	.exo2-why { display: block; }
	.exo2-chris { margin-top: 34px; }
	.exo2-bigstats { grid-template-columns: repeat(2, 1fr); }
	.exo2-bigstats b { font-size: 27px; }
	.exo2-tile { grid-template-columns: 1fr; }
	.exo2-tile figure { max-width: 220px; }

	.exo2-dest { grid-template-columns: 1fr; grid-auto-rows: 180px; }
	.exo2-dest a:first-child { grid-column: span 1; }
	.exo2-dest a:first-child .exo2-h4 { font-size: 20px; }

	.exo2-facts-section { padding: 20px 0 14px; }
	.exo2-facts { grid-template-columns: repeat(2, 1fr); gap: 12px 6px; }
	.exo2-facts div, .exo2-facts div:first-child { border-left: 0; padding: 0; }
	.exo2-facts dd { font-size: 15px; }

	.exo2-steps, .exo2-engage { grid-template-columns: 1fr; }

	/* Formats et galerie défilent au doigt, comme les vignettes de sortie. */
	.exo2-formats {
		display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
		padding-bottom: 8px; scrollbar-width: none;
	}
	.exo2-formats::-webkit-scrollbar { display: none; }
	.exo2-format { flex: none; width: 280px; scroll-snap-align: start; min-height: 320px; }

	.exo2-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
	.exo2-gallery figure:first-child { grid-column: span 2; grid-row: span 1; }

	/*
	 * Sur telephone la mosaique devient un rouleau qui defile au doigt : une
	 * grande photo par ecran vaut mieux que cinq timbres-poste. Meme geste que
	 * sur la fiche d'evenement.
	 */
	.exo2-gallery-mosaique {
		display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
		padding-bottom: 8px; scrollbar-width: none;
		grid-template-rows: none; grid-auto-rows: auto;
	}
	.exo2-gallery-mosaique::-webkit-scrollbar { display: none; }
	.exo2-gallery-mosaique figure { flex: none; width: 300px; aspect-ratio: 4 / 3; scroll-snap-align: start; }
	.exo2-gallery-mosaique figure:first-child { grid-column: auto; grid-row: auto; }

	/* Les vignettes de départ défilent au doigt, comme sur la fiche. */
	.exo2-filters { margin-top: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
	.exo2-filters::-webkit-scrollbar { display: none; }
	.exo2-filters button { flex: none; }
}

/* Mouvement réduit : les images ne bougent plus au survol. La vidéo du hero,
   elle, ne démarre pas du tout - c'est le script qui s'en charge, sans quoi
   masquer l'élément emporterait aussi son image de couverture. */
@media (prefers-reduced-motion: reduce) {
	.exo2-exp-item figure img, .exo2-dest img { transition: none; }
}

/* ---------------------------------------------------------------------------
   Le bandeau des six chiffres, avec ses mentions.

   Il est né sur la page À propos, d'où le nom de sa classe, et l'accueil le
   porte aussi depuis le 8 septembre 2026. Ses règles vivent donc ici, dans la
   feuille que les deux chargent, et non plus dans apropos.css. Le balisage est
   rendu par exo/chiffres-bandeau.php, une seule fois pour les deux pages.

   La troisième ligne - « small » - est la mention : ce que le nombre ne dit
   pas. C'est elle qui distingue ce bandeau des tuiles ordinaires.
   --------------------------------------------------------------------------- */
.exo2-ap-chiffres { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
.exo2-ap-chiffres > div { min-width: 0; }
.exo2-ap-chiffres b {
	display: block; font: italic 700 clamp(28px, 3vw, 42px) var(--exo2-police-titre);
	color: #fff; letter-spacing: 1px; line-height: 1.1;
}
.exo2-ap-chiffres span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; color: var(--exo2-meta); }
.exo2-ap-chiffres small { display: block; margin-top: 3px; font-size: 12.5px; color: rgba(255, 255, 255, .38); }

@media (max-width: 1200px) {
	.exo2-ap-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 22px; }
}

@media (max-width: 960px) {
	.exo2-ap-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
}

/* Le bandeau des chiffres de l'accueil vit dans la section « Pourquoi », sous
   sa grille a deux colonnes. Il lui faut donc son propre espacement : sans
   quoi il se colle aux piliers, la grille au-dessus n'ayant pas de marge
   basse. */
.exo2-home-chiffres { margin-top: 54px; }

@media (max-width: 960px) {
	.exo2-home-chiffres { margin-top: 38px; }
}