/* OA Voyages — vitrine voyages/lieux, habillage « charte OA » partagé avec
   la landing (tourisme-landing) : blanc, turquoise #17a1b8, jaune #ffcd0d,
   Poppins (Charte-graphique-OA.pdf, CDC/). Les couleurs secondaires de la
   charte (vert 8abd24, orange f08100, magenta e82d88, gris) servent aux
   pastilles et états. La structure HTML des templates est inchangée. */

:root{
--paper:#ffffff;--ink:#231f20;--ink-dim:#5c5c5c;--ink-faint:#767676;
--line:rgba(35,31,32,.12);--line-strong:rgba(35,31,32,.25);--panel:#ffffff;--panel-2:#f4fafb;
--accent:#17a1b8;--accent-fonce:#0c5f70;--jaune:#ffcd0d;
--sec-vert:#8abd24;--sec-orange:#f08100;--sec-magenta:#e82d88;
--p-cream:#ffeeb3;--p-blue:#c9eaf0;--p-green:#e2efc3;--p-pink:#f9d3e5;--p-purple:#ffe3c2;
--titres:'Poppins',"Segoe UI",sans-serif;--texte:'Poppins',"Segoe UI",sans-serif;
--script:'Kaushan Script',cursive}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--texte);color:var(--ink);line-height:1.6;font-size:16px;
background:radial-gradient(circle 300px at 92% -90px,rgba(255,205,13,.20),transparent 70%),
radial-gradient(ellipse 46% 55% at 4% 0%,rgba(23,161,184,.08),transparent 70%),var(--paper)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* --- navigation façon grands sites (gabarit copié de la PrimaryNav
   d'evaneos.fr) : barre FINE de 60px, logo à gauche, liens à droite ;
   blanche et collante partout. Sur l'accueil charte elle démarre
   TRANSPARENTE posée sur la photo du hero (logo et liens blancs) puis se
   remplit en douceur dès le premier défilement ; partout elle S'EFFACE en
   défilant vers le bas et revient au moindre défilement vers le haut
   (classes est-en-haut / est-cachee posées par le script de l'en-tête). --- */
.oa-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:transform .3s ease-in-out,background-color .5s ease-in-out,border-color .5s ease-in-out}
.oa-header.est-cachee{transform:translateY(-100%)}
.nav{display:flex;align-items:center;min-height:60px;max-width:1240px;margin:0 auto;padding:0 32px;gap:clamp(18px,3vw,44px)}
.nav__logo{flex:0 0 auto;margin-right:auto;position:relative}
.nav__logo img{height:36px;width:auto;display:block}
/* le logo blanc est SUPERPOSÉ au logo couleur : le passage transparent ↔
   plein est un fondu croisé d'opacité (0,5s), synchronisé avec le
   remplissage de la barre — jamais deux logos empilés */
.nav__logo .nav__logo-blanc{position:absolute;left:0;top:0;opacity:0;transition:opacity .5s ease-in-out}
.nav__logo .nav__logo-couleur{transition:opacity .5s ease-in-out}
.nav__liens{display:flex;align-items:center;gap:clamp(16px,2.6vw,38px)}
.nav__liens a{font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-dim);transition:color .3s ease;white-space:nowrap}
.nav__liens a:hover,.nav__liens a.actif{color:var(--accent)}
/* accueil charte : barre HORS FLUX (fixed) pour laisser le hero occuper
   tout l'écran derrière elle, TRANSPARENTE tant qu'on est au sommet — le
   régime d'avant la v4.39.0, remis à la demande du client (v4.97.0).
   Ce qui l'avait fait tomber en v4.39.0 : la suppression du voile sombre
   (v4.37.0) laissait les liens blancs illisibles sur les photos claires.
   Le voile est revenu depuis (rgba(14,11,16,.28) sur .ac-diapo__fonds),
   l'objection est donc levée — mais elle REVIENDRAIT si on décochait
   « Voile sombre » dans l'admin « Accueil charte ». Deuxième filet, par
   sécurité : les liens portent le halo doux validé au questionnaire
   v4.38.0 pour le texte du hero (trois flous concentriques, invisibles en
   tant qu'effet) plutôt que l'ombre portée simple d'origine.
   Comme chez Evaneos, la barre transparente SE REMPLIT dès qu'on la
   survole : l'état transparent ne tient que hors survol (:not(:hover)),
   la sortie de souris la rend à la photo, le tout en fondu (0,5 s). */
body.oa-accueil-charte .oa-header{position:fixed;left:0;right:0}
body.oa-accueil-charte .oa-header.est-en-haut:not(:hover){background:transparent;backdrop-filter:none;border-bottom-color:rgba(255,255,255,.16)}
body.oa-accueil-charte .oa-header.est-en-haut:not(:hover) .nav__liens a{color:#fff;text-shadow:0 0 2px rgba(0,0,0,.35),0 0 10px rgba(0,0,0,.4),0 0 30px rgba(0,0,0,.35)}
body.oa-accueil-charte .oa-header.est-en-haut:not(:hover) .nav__logo-couleur{opacity:0}
body.oa-accueil-charte .oa-header.est-en-haut:not(:hover) .nav__logo-blanc{opacity:1}
body.oa-accueil-charte .oa-header.est-en-haut:not(:hover) .nav__burger span{background:#fff}
@media (prefers-reduced-motion:reduce){
.oa-header{transition:none}
}

/* burger + menu mobile (cachés en desktop) — align-items:stretch obligatoire :
   les navigateurs posent flex-start par défaut sur <button>, et les <span>
   vides auraient alors une largeur nulle (burger invisible) */
.nav__burger{display:none;flex-direction:column;justify-content:center;align-items:stretch;gap:5px;width:44px;height:44px;padding:10px;border:0;background:none;cursor:pointer}
.nav__burger span{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .25s}
.nav__burger.est-ouvert span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.est-ouvert span:nth-child(2){opacity:0}
.nav__burger.est-ouvert span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav__mobile{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 26px rgba(15,90,104,.10)}
.nav__mobile a{padding:14px 24px;font-size:15px;font-weight:500;color:var(--ink);border-top:1px solid var(--line)}
.nav__mobile a:hover{color:var(--accent)}
.nav__mobile[hidden]{display:none}

.fil{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);padding:26px 0 0}
.fil a:hover{color:var(--accent)}

/* ============ carrousel de voyages — composant PARTAGÉ (accueil charte,
   fiche voyage) ; copie du module carouselNatural d'evaneos.fr. Les
   flèches sont câblées dans oa-effets.js (.ac-carrousel générique). ============ */
/* ---- carrousel « derniers voyages » — défilement natif avec cartes
   aimantées (scroll-snap), barre masquée, flèches rondes en desktop.
   Depuis la v3.83.0 la piste est CONTENUE dans la colonne centrée (demande
   « centrer comme les autres sections ») : mêmes marges que le titre et la
   grille des thématiques — plus de bande pleine largeur d'écran. Les 6px
   de débord (padding piste / marge négative) laissent vivre les ombres. ---- */
.ac-carrousel{position:relative;margin:-18px -6px -58px}
.ac-grille{
	/* petit débord pour les ombres et l'aimantation (compensé par la marge
	   négative de .ac-carrousel : la 1re carte s'aligne sur le titre) */
	--bord:6px;
	/* 4 cartes portrait remplissent la colonne, séparées de 4px à peine
	   (le « naturalGap4 » d'Evaneos) — la 5e dépasse et invite à défiler.
	   % = largeur utile de la piste (colonne − 2×6px de padding) */
	--carte:calc((100% - 12px)/4);
	display:flex;flex-wrap:nowrap;gap:4px;
	/* piste plus courte que l'écran : centrée (« safe » = revient au début
	   quand ça déborde, un navigateur sans safe ignore la ligne) */
	justify-content:safe center;
	overflow-x:auto;overflow-y:hidden;
	/* marges verticales INTERNES (compensées sur .ac-carrousel) : ombres,
	   soulèvement au survol et flottement vivent dans la piste au lieu
	   d'être rognés par overflow */
	padding:18px var(--bord) 58px;
	scroll-snap-type:x mandatory;scroll-padding:0 var(--bord);scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
	touch-action:pan-x pan-y;
}
.ac-grille::-webkit-scrollbar{display:none}
/* flèches rondes blanches façon grands sites — absentes en tactile/mobile,
   estompées en butée (classe posée par le JS) ; centrées sur les cartes
   (le décalage corrige l'asymétrie des marges internes 18/58) */
.ac-carrousel__fleche{position:absolute;z-index:5;top:calc(50% - 20px);transform:translateY(-50%);display:none;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 6px 16px rgba(15,90,104,.14);transition:opacity .3s ease,visibility .3s ease,background .2s ease}
.ac-carrousel__fleche:hover{background:var(--panel-2)}
.ac-carrousel__fleche svg{width:22px;height:22px}
.ac-carrousel__fleche--prec{left:-24px}
.ac-carrousel__fleche--suiv{right:-24px}
.ac-carrousel__fleche.is-cachee{visibility:hidden;opacity:0;pointer-events:none}
/* à cheval sur les bords de la colonne : il faut la marge d'écran pour les
   loger — en dessous de 1200px le doigt et la molette suffisent */
@media (min-width:1200px){
.ac-carrousel__fleche{display:inline-flex}
}
/* cartes PORTRAIT façon destinations Evaneos : photo plein cadre de 356px
   de haut, infos posées sur un dégradé sombre en bas de photo. Règle
   charte respectée : le jaune reste en FOND (badge promo), jamais en
   texte — sur la photo tout est blanc. Sans photo, fond turquoise. */
.ac-voyage{width:var(--carte);flex-shrink:0;scroll-snap-align:center;position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:356px;border-radius:2px;overflow:hidden;background:var(--accent);will-change:width;transition:width .6s cubic-bezier(.175,.885,.32,1.275)}
.ac-voyage__photo{position:absolute;inset:0;background-size:cover;background-position:center}
/* Photo posée en fondu par oa-effets.js (bande « Notre palette de produits »,
   v4.139.0) : l'image n'est montrée qu'une fois téléchargée, elle monte en
   0,4 s au-dessus du turquoise de la carte au lieu de la remplacer d'un coup.
   La classe n'est ajoutée QUE par le JS : sans lui, rien n'est masqué. */
.oa-fond-fondu{opacity:0}
.oa-fond-fondu.oa-fond-pret{opacity:1;transition:opacity .4s ease}
@media (prefers-reduced-motion:reduce){.oa-fond-fondu.oa-fond-pret{transition:none}}
/* PLUS DE VOILE SOMBRE sur ces photos (demande client, même position que
   pour le hero en v4.37.0 : « moins de noir »). Le dégradé montait jusqu'à
   82 % de noir sur les deux tiers bas de la carte et éteignait la photo.
   La lisibilité du texte blanc repose désormais sur le seul HALO — les
   mêmes trois couches de flou que le hero, sans décalage : le texte reste
   lisible sur un ciel clair sans assombrir l'image. Ne pas remettre de
   voile sans redemander. */
.ac-voyage__corps{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding:0 16px 16px;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.62),0 0 12px rgba(0,0,0,.55),0 0 34px rgba(0,0,0,.45)}
.ac-voyage__nature{align-self:flex-start;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:2px;padding:3px 10px}
.ac-voyage b{font-family:var(--titres);font-weight:700;font-size:17px;line-height:1.25;color:#fff}
.ac-voyage__metas{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.92)}
.ac-voyage__metas s{opacity:.72}
/* SURVOL SIGNATURE copié d'Evaneos (souris fine, desktop) : la carte
   s'élargit avec un rebond élastique et dévoile plus de photo, les
   voisines glissent — remplace l'ancien soulèvement de 4px */
@media (hover:hover) and (pointer:fine) and (min-width:961px){
.ac-voyage:hover,.ac-voyage:focus-visible{width:390px}
}
@media (prefers-reduced-motion:reduce){
.ac-voyage{transition:none}
}
.ac-voyage__promo{position:absolute;top:12px;left:12px;z-index:2;background:var(--sec-magenta);color:#fff;border-radius:2px;padding:4px 12px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:960px){
/* 3 cartes portrait + un bout de la 4e — les flèches ont disparu
   (tactile), c'est le débordement qui montre que ça défile */
.ac-grille{--carte:calc((100vw - 120px)/3)}
}
@media (max-width:760px){
/* au doigt : cartes de 240px comme Evaneos mobile, la suivante dépasse */
.ac-grille{--carte:min(240px,68vw)}
}

/* --- boutons, notes, pied de page ---
   Registre du modèle (relaisrossar.it) : rectangle net à peine adouci,
   petites capitales espacées, rembourrage généreux — la pilule turquoise
   de 15 px faisait « application web » là où le site vend du voyage haut
   de gamme. Le vocabulaire typographique est celui du lien discret
   .ac-lien (12,5 px, .14em, capitales) : boutons et liens forment ainsi un
   seul système, comme sur le modèle où l'appel à l'action est souvent un
   simple lien. */
.btn{display:inline-block;text-align:center;font-family:var(--texte);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.25;padding:16px 32px;border-radius:2px;background:var(--accent);color:#fff;border:1px solid var(--accent);cursor:pointer;transition:background .3s ease,color .3s ease,border-color .3s ease}
.btn:hover{background:transparent;color:var(--accent)}
.btn--ghost{background:transparent;color:var(--accent)}
.btn--ghost:hover{background:var(--accent);color:#fff}
.note{margin-top:26px;font-size:13px;color:var(--ink-dim);background:var(--panel-2);border:1px solid var(--line);border-radius:2px;padding:14px 18px}
/* Liens INLINE d'une note (« réinitialisez-les »…) — jamais les boutons :
   sans le :not(.btn), cette règle (0,1,1) l'emportait sur .btn (0,1,0) et
   repeignait le libellé du bouton dans la couleur d'accent, c'est-à-dire
   la couleur de son propre fond — texte invisible. */
.note a:not(.btn){color:var(--accent)}
.oa-footer{background:var(--accent-fonce);color:rgba(255,255,255,.88);padding:38px 24px 30px;font-size:14px;text-align:center;margin-top:70px}
.oa-footer a{color:var(--jaune)}
.oa-footer a:hover{color:#fff}
.oa-footer__logo{height:34px;width:auto;display:inline-block}
.oa-footer__slogan{font-family:var(--script);font-size:21px;color:#fff;margin:8px 0 14px}
.oa-footer__presentation{max-width:54ch;margin:0 auto 10px;color:rgba(255,255,255,.9)}
.oa-footer__coord{margin:0 0 16px;color:#fff}
.oa-footer__rs{display:flex;justify-content:center;gap:12px;margin:0 0 18px}
.oa-footer__rs a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;transition:background .25s,color .25s}
.oa-footer__rs a:hover{background:var(--jaune);color:var(--ink)}
.oa-footer__rs svg{width:16px;height:16px;fill:currentColor}
.oa-footer__copy{color:rgba(255,255,255,.82);font-size:13px}

/* ============ archive (liste des voyages) ============ */
.oa-archive h1{font-family:var(--titres);font-weight:700;font-size:clamp(32px,4.2vw,50px);letter-spacing:-.01em;margin:10px 0 12px}
.oa-archive .sous{color:var(--ink-dim);max-width:40em;margin-bottom:38px}
/* bandeau des pages THÉMATIQUE (/type-sejour/…) : nom + description du terme,
   photo en fond quand elle existe (voile sombre pour garder le texte lisible) */
.them-entete{margin-bottom:38px}
.them-entete .sous{margin-bottom:0}
.them-entete--photo{position:relative;margin-top:14px;border-radius:2px;overflow:hidden;padding:clamp(28px,4.5vw,52px) clamp(22px,3.5vw,40px);background-size:cover;background-position:center}
.them-entete--photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,11,16,.30),rgba(14,11,16,.64))}
.them-entete--photo h1{position:relative;color:#fff;margin-top:0}
.them-entete--photo .sous{position:relative;color:rgba(255,255,255,.92)}
/* état vide d'une thématique sans voyage (sur mesure, croisières…) */
.note--theme{text-align:center;padding:34px 24px}
.note--theme p{max-width:52ch;margin:0 auto}
.note--theme .btn{margin-top:16px}

/* ============ départs garantis (GIR) — lignes-cartes fiche + page /departs-gir/ ============ */
.gir-note{color:var(--ink-dim);max-width:56em;margin-bottom:16px}
.gir-note a{color:var(--accent);font-weight:600}
.gir-departs{list-style:none;display:flex;flex-direction:column;gap:12px}
.gir-depart{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;padding:14px 18px;background:var(--panel);border:1px solid var(--line);border-radius:2px}
.gir-depart--complet{background:var(--panel-2);opacity:.68}
/* pastille calendrier : mois / grand jour / année */
.gir-depart__cal{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:62px;padding:7px 10px;border-radius:2px;background:var(--panel-2);border:1px solid var(--line);line-height:1.15}
.gir-depart--complet .gir-depart__cal{background:#fff}
.gir-depart__cal i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.gir-depart__cal b{font-family:var(--titres);font-size:23px;font-weight:700;color:var(--ink)}
.gir-depart__cal u{text-decoration:none;font-size:10.5px;color:var(--ink-faint)}
.gir-depart__quand{flex:1 1 220px;display:flex;flex-direction:column;gap:2px}
.gir-depart__quand b{font-family:var(--titres);font-weight:600;font-size:15.5px}
.gir-depart__quand>span{font-size:13px;color:var(--ink-dim)}
.gir-depart__prix{display:flex;flex-direction:column;gap:2px;text-align:right;margin-left:auto}
.gir-depart__prix b{font-family:var(--titres);font-weight:700;font-size:17px;color:var(--accent)}
.gir-depart__prix>span{font-size:12px;color:var(--ink-faint)}
.gir-pastille{border-radius:2px;padding:4px 12px;font-size:11.5px;font-weight:600;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-dim);white-space:nowrap}
.gir-pastille--alerte{background:var(--sec-orange);border-color:var(--sec-orange);color:#fff}
.gir-pastille--complet{background:transparent;border-color:transparent;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.gir-depart__btn{padding:9px 20px;font-size:13.5px}
@media (max-width:760px){
/* la ligne se replie : calendrier + dates en tête, prix à gauche, bouton pleine largeur */
.gir-depart__prix{flex-basis:100%;margin-left:0;flex-direction:row;align-items:baseline;gap:8px;text-align:left}
.gir-depart__btn{flex:1 1 auto}
}
/* réassurance de la page /departs-gir/ : 3 points sous le chapeau */
.gir-points{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 6px}
.gir-points li{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;background:var(--panel-2);border:1px solid var(--line);border-radius:2px}
.gir-points svg{width:22px;height:22px;color:var(--accent);flex:0 0 auto;margin-top:2px}
.gir-points b{display:block;font-family:var(--titres);font-weight:600;font-size:14.5px;margin-bottom:2px}
.gir-points span span{display:block;font-size:12.5px;color:var(--ink-dim);line-height:1.45}
@media (max-width:760px){
.gir-points{grid-template-columns:1fr}
}
/* page /departs-gir/ : un bloc par voyage, photo à gauche */
.oa-gir main{padding-bottom:90px}
.gir-voyage{display:grid;grid-template-columns:280px 1fr;gap:24px;margin:34px 0;padding:24px;border:1px solid var(--line);border-radius:2px;background:var(--panel)}
.gir-voyage__photo{display:block;border-radius:2px;background-size:cover;background-position:center;min-height:200px}
.gir-voyage__sur{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.gir-voyage h2{font-family:var(--titres);font-weight:700;font-size:22px;margin:0 0 14px}
.gir-voyage h2 a:hover{color:var(--accent)}
.gir-voyage__lien{display:inline-block;margin-top:14px;font-weight:600;color:var(--accent)}
@media (max-width:760px){
.gir-voyage{grid-template-columns:1fr}
.gir-voyage__photo{min-height:170px}
}
.oa-archive .layout{display:grid;grid-template-columns:250px 1fr;gap:34px;padding-bottom:90px}
aside.filtres{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:22px;align-self:start;position:sticky;top:84px}
.filtres h2{font-family:var(--titres);font-size:18px;font-weight:600;margin-bottom:16px;display:flex;justify-content:space-between;align-items:baseline}
.filtres h2 a{font-family:var(--texte);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:500}
.grp{margin-bottom:20px}
.grp .k{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:9px}
.grp label{display:flex;align-items:center;gap:9px;font-size:14.5px;padding:4px 0;cursor:pointer;color:var(--ink-dim)}
.grp label:hover{color:var(--ink)}
.grp input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
/* champs alignés sur le rayon du bouton (2 px) : des champs très arrondis
   à côté d'un bouton rectangulaire donnaient un formulaire dépareillé */
.grp select,.barre .tri{width:100%;font-family:var(--texte);font-size:14px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:2px;background:#fff;color:var(--ink)}
.barre{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.barre .n{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.barre .n b{color:var(--accent);font-weight:600}
.barre .tri{width:auto}
.grille{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.carte{background:var(--panel);border:1px solid var(--line);border-radius:2px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.carte:hover{transform:translateY(-4px);border-color:var(--accent)}
/* Cartes voyage : la photo est nue — badges d'état et nature·région
   vivent dans le corps (choix questionnaire, v3.58.0). */
.visuel{height:150px;background-size:cover;background-position:center}/* le fond arrive en data-fond (v4.100.0), plus de « center/cover » en ligne */
/* aplats de repli quand un voyage n'a pas de photo. background-IMAGE et non
   le raccourci background : le raccourci remettait background-size et
   background-position à leurs valeurs par défaut, et la photo posée ensuite
   par le chargement différé s'affichait à sa taille réelle, calée en haut à
   gauche — un morceau de ciel au lieu du paysage (constat v4.143.0). */
.v1{background-image:linear-gradient(160deg,var(--p-cream),#ffdf75)} .v2{background-image:linear-gradient(160deg,var(--p-blue),#9adbe8)} .v3{background-image:linear-gradient(160deg,var(--p-green),#cde49a)} .v4{background-image:linear-gradient(160deg,var(--p-pink),#f4aed1)}
.carte__etats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 9px}
.etat{border-radius:2px;padding:3px 11px;font-size:11.5px;font-weight:600;letter-spacing:.02em;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-dim)}
.etat--vedette{background:var(--jaune);border-color:var(--jaune);color:var(--ink)}
.etat--promo{background:var(--sec-magenta);border-color:var(--sec-magenta);color:#fff}
.etat--gir{background:var(--accent);border-color:var(--accent);color:#fff}
.carte__sur{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 6px}
.corps{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.corps h2,.corps h3{font-family:var(--titres);font-size:20px;font-weight:600;margin:0 0 6px}
.corps .etapes{font-size:14px;color:var(--ink-dim);flex:1}
.datas{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:14px 0;padding:12px 0;border-top:1px dashed var(--line-strong);border-bottom:1px dashed var(--line-strong)}
.datas b{display:block;font-family:var(--titres);font-size:16px;letter-spacing:0;text-transform:none;color:var(--accent);font-weight:600}

/* ---- /voyages/ : cartes éditoriales (v4.143.0) ----
   La photo n'était qu'une bande de 150 px au-dessus du texte, soit un 2,5:1
   sur une carte de ~380 px où un paysage ne tenait plus. Le plein cadre à
   texte blanc essayé en 4.142.0 a été écarté : son voile éteignait les
   couleurs et le titre posé sur l'image manquait de netteté. Ici la photo
   est nue en 3:2, sans cadre ni panneau, et la légende se pose dessous sur
   le fond de page — le seul texte sur l'image est le badge d'état. */
.grille--edito{gap:34px 26px}
.carte--edito{position:relative;background:none;border:0;border-radius:0;overflow:visible;transition:none}
.carte--edito:hover{transform:none}
.carte--edito .visuel{aspect-ratio:3/2;height:auto;border-radius:2px;overflow:hidden}
.carte--edito .corps{padding:14px 0 0}
.carte--edito .carte__etats{position:absolute;top:12px;left:12px;right:12px;margin:0}
.carte--edito .carte__sur{margin-bottom:7px}
.carte--edito .corps h2{font-size:21px;line-height:1.25;margin-bottom:9px;transition:color .25s ease}
.carte--edito:hover .corps h2{color:var(--accent)}
/* « Durée 14 jours · Étapes 12 » sur une ligne, sans les filets pointillés
   qui refermaient la carte */
.carte--edito .datas{border:0;padding:0;margin:0;gap:2px 10px;font-size:12.5px;letter-spacing:.04em;text-transform:none;color:var(--ink-dim)}
.carte--edito .datas div{display:flex;gap:5px}
.carte--edito .datas div+div::before{content:"·";margin-right:10px;color:var(--ink-faint)}
.carte--edito .datas b{display:inline;font-family:var(--texte);font-size:12.5px;font-weight:600;color:var(--ink)}
/* lien souligné plutôt que bouton plein ; son ::before étend le lien à
   toute la carte, photo comprise */
.carte--edito .btn{align-self:flex-start;margin-top:14px;padding:0 0 3px;background:none;border:0;border-bottom:1px solid var(--accent);color:var(--accent);font-size:11.5px}
.carte--edito .btn::after{content:" →"}
.carte--edito .btn::before{content:"";position:absolute;inset:0}
.carte--edito .btn:hover{color:var(--ink);border-color:var(--ink)}
@media(max-width:640px){
.carte--edito .corps h2{font-size:19px}
}
.oa-archive .navigation.pagination{margin-top:30px;font-size:14px}
.oa-archive .nav-links{display:flex;gap:10px;flex-wrap:wrap}
.oa-archive .nav-links .page-numbers{border:1px solid var(--line-strong);border-radius:2px;padding:6px 12px;background:var(--panel);color:var(--ink-dim)}
.oa-archive .nav-links .page-numbers.current{background:var(--jaune);color:var(--ink);border-color:var(--jaune)}

/* ============ fiche voyage ============ */
.oa-fiche{line-height:1.65}
.bandeau{background:radial-gradient(circle 260px at 88% -70px,rgba(255,205,13,.28),transparent 70%),radial-gradient(ellipse 55% 70% at 4% 100%,rgba(23,161,184,.10),transparent 72%),var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:2px;padding:44px 44px 38px;margin:22px 0 36px;position:relative;overflow:hidden}
.bandeau .tag{display:inline-block;background:var(--jaune);color:var(--ink);border-radius:2px;padding:5px 14px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.bandeau h1{font-family:var(--titres);font-weight:700;font-size:clamp(32px,4.2vw,52px);line-height:1.1;letter-spacing:-.01em;margin-bottom:18px}
.bandeau .metas{display:flex;gap:30px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);flex-wrap:wrap}
.bandeau .metas b{display:block;font-family:var(--titres);font-size:18px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600;margin-top:2px}
.bandeau .metas b a{color:var(--ink)}
.bandeau .metas b a:hover{color:var(--accent)}
/* pastilles type & régions sous le titre */
.bandeau__pastilles{display:flex;gap:8px;flex-wrap:wrap;margin:-6px 0 18px}
.bandeau__pastilles span{border:1px solid var(--line-strong);color:var(--ink-dim);border-radius:2px;padding:4px 12px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
/* bandeau avec photo de fond (inline style) : textes clairs sur voile sombre —
   vaut pour la fiche voyage ET la fiche lieu */
.bandeau[style]{color:#fff;border-color:transparent}
.bandeau[style] h1{color:#fff}
.bandeau[style] .metas{color:rgba(255,255,255,.75)}
.bandeau[style] .metas b,.bandeau[style] .metas b a{color:#fff}
.bandeau[style] .metas b a:hover{color:var(--jaune)}
.bandeau[style] .accroche{color:rgba(255,255,255,.88)}
.bandeau[style] .bandeau__pastilles span{border-color:rgba(255,255,255,.55);color:#fff}
/* grand format immersif de la fiche voyage */
.bandeau--photo{min-height:60vh;min-height:60svh;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
/* ---- cover façon fiche Evaneos : mosaïque de photos cliquables (grande +
   colonne de petites, « +N photos » sur la dernière) + panneau blanc
   titre/durée/prix/bouton — remplace le bandeau plein cadre + la galerie */
.fiche-cover{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;margin:22px 0 40px;align-items:stretch}
.fiche-cover__photos{display:grid;grid-template-columns:188px minmax(0,1fr);gap:8px;min-height:400px}
.fiche-cover__photos--seule{grid-template-columns:minmax(0,1fr)}
.fiche-cover__petites{display:grid;grid-template-rows:1fr 1fr;gap:8px}
.fiche-cover__petites a{position:relative;display:block;border-radius:2px;overflow:hidden;border:1px solid var(--line)}
.fiche-cover__grande{position:relative;display:block;border-radius:2px;overflow:hidden;border:1px solid var(--line)}
.fiche-cover__petites img,.fiche-cover__grande img{width:100%;height:100%;object-fit:cover;display:block}
/* « +N photos » : le voile est passé de 55 % à 18 % de noir (demande
   client, même logique que le hero et le carrousel de bas de fiche). Il
   reste juste ce qu'il faut pour dire « il y a d'autres photos derrière »
   sans éteindre l'image ; la lisibilité vient du HALO, pas du voile. */
.fiche-cover__reste{position:absolute;inset:0;display:grid;place-items:center;background:rgba(14,11,16,.18);color:#fff;font-weight:600;font-size:14px;text-shadow:0 0 3px rgba(0,0,0,.62),0 0 12px rgba(0,0,0,.55),0 0 30px rgba(0,0,0,.45)}
.fiche-cover__grande .tag--promo{position:absolute;top:14px;left:14px;margin:0;background:var(--sec-magenta);color:#fff;border-radius:2px;padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.fiche-cover__panneau{display:flex;flex-direction:column;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:24px}
.fiche-cover__pastilles{display:flex;gap:6px;flex-wrap:wrap}
.fiche-cover__pastilles span{border:1px solid var(--line-strong);color:var(--ink-dim);border-radius:2px;padding:3px 10px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.fiche-cover__panneau h1{font-family:var(--titres);font-weight:700;font-size:clamp(23px,2.4vw,29px);line-height:1.22;letter-spacing:-.01em}
.fiche-cover__duree{display:flex;align-items:center;gap:9px;font-size:14.5px}
.fiche-cover__duree svg{width:19px;height:19px;color:var(--accent);flex:0 0 auto}
.fiche-cover__metas{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--ink-dim)}
.fiche-cover__metas b{color:var(--ink);font-weight:600}
.fiche-cover__metas b a:hover{color:var(--accent)}
.fiche-cover__prix{margin-top:auto;padding-top:13px;border-top:1px solid var(--line)}
.fiche-cover__des{font-size:13px;color:var(--ink-dim)}
.fiche-cover__montant{display:block;font-family:var(--titres);font-weight:700;font-size:25px;color:var(--accent)}
.fiche-cover__montant small{font-family:var(--texte);font-size:14px;font-weight:500;color:var(--ink-dim)}
.fiche-cover__montant s{color:var(--ink-faint);font-weight:500;font-size:16px;margin-right:6px}
.fiche-cover__note{font-size:12px;color:var(--ink-faint)}
/* CTA jaune comme l'encart résa : texte encre sur fond jaune (charte) */
.fiche-cover__btn{width:100%;background:var(--jaune);border-color:var(--jaune);color:var(--ink)}
.fiche-cover__btn:hover{background:transparent;color:var(--ink)}
.fiche-cover__aide{font-size:12.5px;color:var(--ink-faint);text-align:center;margin-top:-4px}
.sejour-heb h3{font-family:var(--titres);font-size:20px;font-weight:600;margin-bottom:4px}
.sejour-heb p{font-size:14.5px;color:var(--ink-dim)}
.sejour-heb .pension{margin-top:8px}
.sejour-heb .pension b{color:var(--accent);font-weight:600}
.forts li small{color:var(--ink-faint);font-weight:400}
.forts--proposees{margin-top:10px}
.forts--proposees li::before{content:"◇";color:var(--ink-faint);font-weight:400}
.jour-photo{display:block;border-radius:2px;overflow:hidden;border:1px solid var(--line);margin-bottom:10px}
.jour-photo img{width:100%;max-height:220px;object-fit:cover;display:block}
.jour-vignettes{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.jour-vignettes a{display:block;width:64px;height:64px;border-radius:2px;overflow:hidden;border:1px solid var(--line)}
.jour-vignettes img{width:100%;height:100%;object-fit:cover;display:block}
/* corps de fiche PLEINE LARGEUR (l'encart résa a disparu : comme chez
   Evaneos, prix et bouton ne vivent que dans le panneau du cover) */
.fiche-corps{padding-bottom:70px}
.colD{position:sticky;top:84px}
.oa-fiche h2{font-family:var(--titres);font-weight:700;font-size:26px;margin:40px 0 18px}
.fiche-corps>h2:first-child,.fiche-corps>.fiche-listes:first-child h2{margin-top:0}
/* points forts / points d'attention face à face (repris des programmes
   d'origine) : le voyage vendu à gauche, ses contraintes à droite */
.fiche-listes--duo{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;align-items:start}
.fiche-listes--duo .forts{grid-template-columns:1fr}
.attention{list-style:none;display:grid;gap:10px}
.attention li{display:flex;gap:10px;font-size:15.5px;color:var(--ink-dim)}
.attention li::before{content:"!";flex:0 0 auto;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--sec-orange);color:#fff;font-size:12px;font-weight:700;line-height:18px;text-align:center}
.forts{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;list-style:none}
.forts li{display:flex;gap:10px;font-size:15.5px;color:var(--ink-dim)}
.forts li::before{content:"✓";color:var(--sec-vert);font-weight:700}
/* ---- détail du voyage façon fiche Evaneos : jours en ACCORDÉONS à
   vignette (details natifs, fermés) à gauche, carte Leaflet COLLANTE à
   droite — la page se raccourcit, la carte suit la lecture ---- */
.fiche-detail{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:22px;align-items:start;margin:14px 0 6px}
.fiche-detail--sans-carte{grid-template-columns:1fr}
.fiche-detail__carte{position:sticky;top:84px}
.fiche-detail__carte .oa-carte{height:480px;margin:0}
/* chaque jour est un BOUTON fin — le détail vit dans la modale */
.jour-acc{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;color:inherit;padding:10px 14px;border:1px solid var(--line);border-radius:2px;background:var(--panel);cursor:pointer;transition:border-color .2s}
.jour-acc:hover{border-color:var(--accent)}
.jour-acc+.jour-acc{margin-top:10px}
.jour-acc:hover .jour-acc__chevron{color:var(--accent)}
.jour-acc__vignette{flex:0 0 auto;width:80px;height:64px;border-radius:2px;overflow:hidden}
.jour-acc__vignette img{width:100%;height:100%;object-fit:cover;display:block}
.jour-acc__textes{min-width:0}
.jour-acc__textes b{display:block;font-family:var(--titres);font-size:16px;font-weight:600;line-height:1.3}
.jour-acc__ligne{font-size:12.5px;color:var(--ink-dim)}
.jour-acc__j{font-weight:700;color:var(--accent)}
.jour-acc__chevron{margin-left:auto;flex:0 0 auto;width:20px;height:20px;color:var(--ink-faint);transition:color .2s ease}

/* ---- modales de détail (jours d'itinéraire, hébergements, activités) ----
   <dialog> natif : Échap, focus et empilement gérés par le navigateur ;
   ouverture/fermeture câblées dans fiche-modales.js */
.fiche-modale{margin:auto;border:0;border-radius:2px;padding:0;width:min(680px,calc(100vw - 32px));max-height:min(85vh,780px);box-shadow:0 30px 80px rgba(14,11,16,.35);flex-direction:column;overflow:hidden}
.fiche-modale[open]{display:flex}
/* un <dialog> se dimensionne sur son CONTENU : sans plancher, un jour peu
   bavard donne une boîte minuscule et la hauteur saute à chaque navigation.
   La modale des jours reçoit donc une hauteur stable (le contenu défile
   dans __defile, le pied reste en bas) ; les fiches hébergement/activité
   gardent leur taille naturelle en desktop. */
#oa-modale-jours{height:min(78vh,720px)}
.fiche-modale::backdrop{background:rgba(14,11,16,.55)}
.fiche-modale__entete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 22px 14px;border-bottom:1px solid var(--line)}
.fiche-modale__entete h3,.fiche-modale__titre{font-family:var(--titres);font-size:19px;font-weight:700;line-height:1.3}
.fiche-modale__sous{font-size:12.5px;color:var(--ink-dim);margin-top:2px}
.fiche-modale__fermer{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:background .2s}
.fiche-modale__fermer:hover{background:var(--panel-2)}
.fiche-modale__fermer svg{width:16px;height:16px}
/* overscroll-behavior:contain — arrivé en bout de course, le geste ne se
   propage pas à la page derrière (au doigt comme à la molette) */
.fiche-modale__defile{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px 22px}
.fiche-modale__panneau[hidden]{display:none}
.fiche-modale__panneau>p{font-size:14.5px;color:var(--ink-dim)}
.fiche-modale .jour-photo img{max-height:320px}
.fiche-modale__pied{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;border-top:1px solid var(--line)}
.fiche-modale__pied .btn{font-size:11px;letter-spacing:.1em;padding:11px 20px}
.fiche-modale__pied .btn:disabled{opacity:.35;pointer-events:none}
.fiche-modale__ou{font-size:12.5px;color:var(--ink-faint)}
/* fiche hébergement/activité : lignes clé-valeur + lien vers le lieu */
.fiche-modale__infos{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14.5px}
.fiche-modale__infos dt{font-weight:700}
.fiche-modale__infos dd{color:var(--ink-dim)}
.fiche-modale__lieu{margin-top:14px;font-weight:600}
.fiche-modale__lieu a{color:var(--accent)}
.fiche-modale__lieu a:hover{text-decoration:underline}
@media (prefers-reduced-motion: no-preference){
.fiche-modale[open]{animation:oa-modale-entre .28s cubic-bezier(.34,1.4,.64,1)}
@keyframes oa-modale-entre{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
}

/* sections DÉTAILLÉES du panneau d'un jour (plus de pastilles) : lieu,
   hébergement, activités avec durée et prix, bon à savoir */
.jour-detail{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.jour-detail__section{border:1px solid var(--line);border-radius:2px;padding:14px 16px;font-size:14px}
.jour-detail__section--large{grid-column:1/-1}
.jour-detail__section h3{display:flex;align-items:center;gap:8px;font-family:var(--titres);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.jour-detail__section h3 svg{width:16px;height:16px;color:var(--accent);flex:0 0 auto}
.jour-detail__section b{font-weight:600}
.jour-detail__section p{font-size:13.5px;color:var(--ink-dim);margin-top:2px}
.jour-detail__section ul{list-style:none}
.jour-detail__section li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:5px 0;border-bottom:1px dashed var(--line)}
.jour-detail__section li:last-child{border-bottom:0;padding-bottom:0}
.jour-detail__section li span{font-size:13px;color:var(--ink-dim)}
.jour-detail__lien{color:var(--accent);font-weight:600;font-size:13.5px}
.jour-detail__lien:hover{text-decoration:underline}
@media (max-width:640px){
.jour-detail{grid-template-columns:1fr}
}
/* liens texte vers une fiche (hébergement, activité) — soulignés pointillés */
.ref-lien{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;border-bottom:1px dashed var(--line-strong);transition:color .2s,border-color .2s}
.ref-lien:hover{color:var(--accent);border-color:var(--accent)}

/* ---- visionneuse d'images (cover, jours, séjour) : photo en grand sur
   fond sombre, flèches en boucle, compteur et rangée de vignettes ---- */
.fiche-cover__cachee{display:none}
.oa-visionneuse{margin:auto;border:0;padding:0;background:transparent;width:min(1100px,calc(100vw - 20px));overflow:visible}
.oa-visionneuse[open]{display:flex;flex-direction:column;gap:12px}
.oa-visionneuse::backdrop{background:rgba(14,11,16,.88)}
.oa-visionneuse__barre{display:flex;align-items:center;justify-content:space-between;gap:14px}
.oa-visionneuse__ou{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.85)}
.oa-visionneuse__fermer{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(14,11,16,.45);color:#fff;cursor:pointer;transition:background .2s}
.oa-visionneuse__fermer:hover{background:rgba(255,255,255,.18)}
.oa-visionneuse__fermer svg{width:17px;height:17px}
.oa-visionneuse__cadre{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
.oa-visionneuse__image{max-width:100%;max-height:min(70vh,700px);border-radius:2px;box-shadow:0 24px 70px rgba(0,0,0,.5);display:block}
.oa-visionneuse__fleche{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(14,11,16,.45);color:#fff;cursor:pointer;transition:background .2s}
.oa-visionneuse__fleche:hover{background:rgba(255,255,255,.18)}
.oa-visionneuse__fleche svg{width:20px;height:20px}
.oa-visionneuse__fleche--prec{left:10px}
.oa-visionneuse__fleche--suiv{right:10px}
.oa-visionneuse__vignettes{display:flex;gap:8px;justify-content:center;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.oa-visionneuse__vignettes::-webkit-scrollbar{display:none}
.oa-visionneuse__vignettes button{flex:0 0 auto;width:64px;height:48px;padding:0;border:2px solid transparent;border-radius:2px;overflow:hidden;background:none;cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s}
.oa-visionneuse__vignettes button:hover{opacity:.85}
.oa-visionneuse__vignettes button.est-actif{opacity:1;border-color:var(--jaune)}
.oa-visionneuse__vignettes img{width:100%;height:100%;object-fit:cover;display:block}
/* cadre d'attente : la photo précédente disparaît dès le clic, ce cadre prend
   sa place au format de la photo attendue (aspect-ratio posé par le JS) le
   temps du téléchargement, puis porte le message si la photo ne vient pas —
   sans lui, sur connexion lente, on voyait encore la photo d'avant */
.oa-visionneuse__etat{display:none;position:relative;overflow:hidden;height:min(70vh,700px);width:auto;max-width:100%;border-radius:2px;background:rgba(255,255,255,.07);box-shadow:0 24px 70px rgba(0,0,0,.5)}
.oa-visionneuse__cadre.est-en-attente .oa-visionneuse__etat,
.oa-visionneuse__cadre.est-en-echec .oa-visionneuse__etat{display:grid;place-items:center}
.oa-visionneuse__message{display:none;margin:0;padding:0 20px;text-align:center;font-size:14px;color:rgba(255,255,255,.92)}
.oa-visionneuse__cadre.est-en-echec .oa-visionneuse__message{display:block}
.oa-visionneuse__reessayer{margin-left:12px;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font:inherit;cursor:pointer;transition:background .2s}
.oa-visionneuse__reessayer:hover{background:rgba(255,255,255,.18)}
@media (prefers-reduced-motion: no-preference){
.oa-visionneuse[open]{animation:oa-modale-entre .28s cubic-bezier(.34,1.4,.64,1)}
/* balayage lumineux du cadre d'attente — seulement pendant le chargement */
.oa-visionneuse__cadre.est-en-attente .oa-visionneuse__etat::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.16) 50%,transparent 75%);transform:translateX(-100%);animation:oa-vision-balaye 1.25s ease-in-out infinite}
@keyframes oa-vision-balaye{to{transform:translateX(100%)}}
}
@media (max-width:640px){
.oa-visionneuse__fleche{width:40px;height:40px}
.oa-visionneuse__vignettes button{width:52px;height:40px}
}
/* ---- « Inclus dans ce prix / À prévoir en plus » : carte unique façon
   Evaneos, services cochés (coche turquoise, croix grise) ---- */
.prix-detail{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:24px 26px;margin-top:34px}
.prix-detail h3{font-family:var(--titres);font-size:19px;font-weight:700}
.prix-detail__sous{font-size:13px;color:var(--ink-dim);margin:2px 0 4px}
.prix-detail__liste{list-style:none;margin-top:8px}
.prix-detail__liste li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14.5px;font-weight:600}
.prix-detail__liste li:last-child{border-bottom:0}
.prix-detail__liste svg{flex:0 0 auto;width:18px;height:18px;color:var(--accent)}
.prix-detail__liste--exclus li{font-weight:500;color:var(--ink-dim)}
.prix-detail__liste--exclus svg{color:var(--ink-faint)}
.prix-detail hr{border:0;border-top:1px solid var(--line);margin:18px 0 12px}
/* description du voyage (tête du corps de fiche) — absente si le champ est vide */
.fiche-description{max-width:56em;font-size:17px;color:var(--ink-dim);margin:4px 0 30px}
.fiche-description p{margin-bottom:10px}
.fiche-description p:last-child{margin-bottom:0}
/* note importante (formalités, santé, conditions…) — encart orange, absent si vide */
.fiche-note-importante{background:rgba(240,129,0,.07);border:1px solid rgba(240,129,0,.35);border-left:4px solid var(--sec-orange);border-radius:2px;padding:18px 22px;margin-top:26px}
.fiche-note-importante h3{display:flex;align-items:center;gap:9px;font-family:var(--titres);font-size:16.5px;font-weight:600;color:var(--sec-orange);margin-bottom:8px}
.fiche-note-importante svg{width:20px;height:20px;flex:0 0 auto}
.fiche-note-importante p{font-size:14.5px;color:var(--ink-dim);margin-bottom:6px}
.fiche-note-importante p:last-child{margin-bottom:0}
/* fin de fiche : carrousel de voyages partagé (composant .ac-carrousel) */
.fiche-suggestions{margin-top:64px}
.fiche-suggestions h2{font-family:var(--titres);font-weight:700;font-size:clamp(24px,3vw,32px);margin-bottom:24px}
.encart{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:20px 22px}
.encart h3{font-family:var(--titres);font-size:17px;font-weight:600;margin-bottom:10px}
.encart ul{list-style:none}
.encart li{font-size:14.5px;padding:4px 0;display:flex;gap:9px;color:var(--ink-dim)}
.resa{background:var(--panel);border:1px solid var(--line-strong);border-radius:2px;padding:26px 24px}
.resa .prix{font-family:var(--titres);font-weight:700;font-size:30px;color:var(--accent)}
.resa .prix small{font-family:var(--texte);font-weight:400;font-size:13px;color:var(--ink-faint)}
.resa .lignes{margin:16px 0;padding:14px 0;border-top:1px dashed var(--line-strong);border-bottom:1px dashed var(--line-strong);font-size:14px;color:var(--ink-dim)}
.resa .lignes div{display:flex;justify-content:space-between;padding:3px 0}
.resa .lignes b{font-weight:600;font-size:13.5px;color:var(--ink)}
/* CTA principal des fiches en JAUNE (l'autre couleur principale de la
   charte) — texte encre, contraste 10,4:1 */
.resa .btn{display:block;width:100%;font-size:12.5px;padding:16px 14px;background:var(--jaune);border-color:var(--jaune);color:var(--ink)}
.resa .btn:hover{background:transparent;color:var(--ink)}
.resa .aide{font-size:12.5px;color:var(--ink-faint);text-align:center;margin-top:12px}

/* --- lieux --- */
.bandeau .accroche{font-size:17px;color:var(--ink-dim);max-width:36em;margin:-6px 0 18px}
.dest-contenu{font-size:15.5px;color:var(--ink-dim)}
.dest-contenu p{margin-bottom:16px}
.dest-contenu h2{font-family:var(--titres);font-weight:700;font-size:26px;color:var(--ink);margin:34px 0 16px}
.dest-contenu h2:first-child{margin-top:0}
.dest-contenu h3{font-family:var(--titres);font-weight:600;font-size:19px;color:var(--ink);margin:24px 0 10px}
.dest-contenu ul,.dest-contenu ol{margin:0 0 16px 22px}
.dest-contenu li{padding:2px 0}
.dest-contenu a{color:var(--accent)}
.dest-contenu img{max-width:100%;height:auto;border-radius:2px;border:1px solid var(--line)}
.dest-contenu figure{margin:0 0 16px}
.dest-contenu figcaption{font-size:12.5px;color:var(--ink-faint);margin-top:6px}
.dest-contenu blockquote{border-left:3px solid var(--accent);padding-left:16px;font-style:italic;margin-bottom:16px}
.grille--fiche{grid-template-columns:1fr 1fr}
.resa-titre{font-family:var(--titres);font-size:19px;font-weight:600;margin-bottom:10px}
.conseils{list-style:none}
.conseils li{display:flex;gap:10px;font-size:14px;color:var(--ink-dim);padding:4px 0}
.conseils li::before{content:"◆";color:var(--jaune);font-size:10px;line-height:2.1}

/* --- responsive --- */
@media(max-width:900px){
.oa-archive .layout,.grille,.grille--fiche,.forts,.fiche-listes--duo{grid-template-columns:1fr}
aside.filtres,.colD{position:static}
.fiche-cover,.fiche-detail{grid-template-columns:1fr}
.fiche-detail__carte{position:static}
.fiche-detail__carte .oa-carte{height:320px}
.nav__liens{gap:16px}
.nav__liens a{font-size:12px}
.nav__logo{width:118px}
.bandeau{padding:28px 24px}
.bandeau--photo{min-height:46svh}
}
@media(max-width:640px){
/* cover : grande photo d'abord, les petites en rang dessous */
.fiche-cover__photos{display:flex;flex-direction:column;gap:8px;min-height:0}
.fiche-cover__grande{order:-1;height:230px}
.fiche-cover__petites{display:grid;grid-template-rows:none;grid-template-columns:1fr 1fr;gap:8px;height:110px}
}
/* nav mobile : les deux ailes de liens laissent place au burger + menu */
@media(max-width:860px){
.nav{min-height:64px;padding:0 16px}
.nav__liens{display:none}
.nav__burger{display:flex}
/* le logo garde son margin-right:auto : le burger file au bord droit */
.nav__logo{order:-1}
.nav__mobile:not([hidden]){display:flex}
}

/* --- animations (vitrine-anim.js + micro-interactions CSS) --- */
@media (prefers-reduced-motion: no-preference){
/* Le balayage lumineux au survol des boutons a été RETIRÉ avec la refonte
   du bouton : ce reflet en diagonale était le dernier effet « brillant »
   de la charte et jurait avec la sobriété du modèle. L'inversion des
   couleurs au survol suffit. */
/* soulignés animés de la navigation */
.nav__liens a{position:relative}
.nav__liens a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav__liens a:hover::after{transform:scaleX(1)}
/* zoom doux des visuels de cartes */
.carte{will-change:transform}
.carte .visuel{transition:transform .6s ease;transform-origin:center}
.carte:hover .visuel{transform:scale(1.04)}
/* ---- fiche voyage ---- */
/* cover : zoom doux des photos de la mosaïque au survol */
.fiche-cover__grande img,.fiche-cover__petites a img{transition:transform .6s ease}
.fiche-cover__grande:hover img,.fiche-cover__petites a:hover img{transform:scale(1.05)}
/* jours de l'itinéraire : la vignette zoome, le chevron s'avance */
.jour-acc__vignette img{transition:transform .5s ease}
.jour-acc:hover .jour-acc__vignette img{transform:scale(1.1)}
.jour-acc:hover .jour-acc__chevron{transform:translateX(3px)}
.jour-acc__chevron{transition:color .2s ease,transform .25s ease}
/* modale des jours : chaque panneau entre en douceur au changement
   (l'animation rejoue quand hidden saute — aucune ligne de JS) */
.fiche-modale__panneau{animation:oa-panneau-entre .3s ease}
@keyframes oa-panneau-entre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* visionneuse : la photo entre en fondu à chaque changement (classe
   rejouée par fiche-modales.js) */
.oa-visionneuse__image.est-anime{animation:oa-photo-entre .28s ease}
@keyframes oa-photo-entre{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
/* « inclus dans ce prix » : les coches et croix SE DESSINENT une à une à
   l'entrée de la carte (classes posées par vitrine-anim.js) */
.prix-detail svg path{stroke-dasharray:30;stroke-dashoffset:0}
.prix-detail--attente svg path{stroke-dashoffset:30}
.prix-detail--vu svg path{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease}
.prix-detail--vu li:nth-child(1) svg path{transition-delay:.1s}
.prix-detail--vu li:nth-child(2) svg path{transition-delay:.2s}
.prix-detail--vu li:nth-child(3) svg path{transition-delay:.3s}
.prix-detail--vu li:nth-child(4) svg path{transition-delay:.4s}
.prix-detail--vu li:nth-child(5) svg path{transition-delay:.5s}
.prix-detail--vu li:nth-child(6) svg path{transition-delay:.6s}
.prix-detail--vu li:nth-child(7) svg path{transition-delay:.7s}
.prix-detail--vu li:nth-child(8) svg path{transition-delay:.8s}
}

/* --- effets transverses (oa-effets.js) --- */
@media (prefers-reduced-motion: no-preference){
/* rideaux photo : un cache coloré glisse et dévoile l'image */
.oa-rideau{position:relative;overflow:hidden}
/* Le rideau impose position:relative APRÈS la déclaration des calques photo
   des cartes de voyage (.ac-voyage__photo, position:absolute;inset:0, plus
   haut dans ce fichier) : sans cette ligne le calque retombait dans le flux
   de la carte flex, hauteur 0, et la carte n'affichait plus que son fond
   turquoise jusqu'au rechargement (bug v4.139.0). Le rideau garde son cadre
   (overflow + ::after en inset:0) sur le calque resté absolu. */
.ac-voyage__photo.oa-rideau{position:absolute;inset:0}
.oa-rideau::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(1);transform-origin:right;z-index:2;pointer-events:none}
.oa-rideau--jaune::after{background:var(--jaune)}
.oa-rideau--joue::after{transform:scaleX(0);transition:transform .7s cubic-bezier(.7,0,.25,1)}
/* marqueurs de carte : ils « tombent » quand la carte entre à l'écran */
.oa-marqueur{animation:oa-marqueur-tombe .5s cubic-bezier(.34,1.56,.64,1) both paused}
.oa-carte--vue .oa-marqueur{animation-play-state:running}
@keyframes oa-marqueur-tombe{from{opacity:0;transform:translateY(-16px) scale(.6)}to{opacity:1;transform:none}}
}

/* --- cartes Leaflet (itinéraire du voyage, situation d'un lieu) --- */
.oa-carte{height:380px;border:1px solid var(--line);border-radius:2px;margin:14px 0 6px;z-index:0}
.oa-carte--lieu{height:260px;margin:0 0 18px}
.oa-marqueur{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--texte);font-weight:600;font-size:13px;border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.28);transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s,color .2s}
.oa-marqueur--seul{font-size:10px}
/* survol d'un jour de l'itinéraire (fiche voyage) : SON marqueur passe en
   pastille jaune agrandie (jaune en FOND, texte encre — règle charte) */
.est-vise .oa-marqueur{animation:none;background:var(--jaune);color:var(--ink);transform:scale(1.4)}
@media (prefers-reduced-motion: no-preference){
/* halo pulsé autour de la pastille visée */
.est-vise .oa-marqueur{animation:oa-marqueur-vise 1.1s ease-in-out infinite}
@keyframes oa-marqueur-vise{0%,100%{}50%{}}
}
.oa-carte .leaflet-popup-content{font-family:var(--texte);font-size:13px;line-height:1.45;margin:10px 14px}

/* ---------- Promotions — badge jaune (jamais de jaune en texte : fond jaune,
   texte encre) et anciens prix barrés, cartes du catalogue + fiche voyage ---------- */
.bandeau .tag+.tag{margin-left:8px}
.datas b s{color:var(--ink-faint);font-weight:400;font-size:12.5px;margin-right:2px}
.resa .prix s{color:var(--ink-faint);font-weight:400;font-size:18px;margin-right:4px}

/* ---- modales en mobile : FEUILLE DU BAS (bottom sheet) ----
   Sous 760 px, les modales de détail (jours, hébergements, activités)
   s'ancrent en bas de l'écran : pleine largeur, coins hauts arrondis,
   poignée de préhension, montée depuis le bas. Le glisser-pour-fermer et
   le balayage entre jours sont câblés dans fiche-modales.js (transform
   seul, jamais de reflow pendant le geste). Desktop inchangé. */
@media (max-width:760px){
.fiche-modale{margin:auto 0 0;width:100vw;max-width:100%;max-height:92svh;
border-radius:2px 2px 0 0;will-change:transform;min-height:55svh}
/* modale des jours : hauteur PLEINE et constante (pas de saut entre jours) */
#oa-modale-jours{height:90svh}
/* poignée : la zone au-dessus de l'en-tête appartient au geste de fermeture */
.fiche-modale::before{content:"";display:block;flex:0 0 auto;width:44px;height:5px;
border-radius:99px;background:var(--line-strong);margin:10px auto 0}
.fiche-modale__entete{padding-top:12px}
.fiche-modale__pied{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.fiche-modale__pied .btn{font-size:10.5px;letter-spacing:.08em;padding:10px 14px;white-space:nowrap}
/* points de position entre les boutons (générés par fiche-modales.js pour
   la modale des jours) — remplacent le « 3 / 8 » texte quand ils existent.
   Sélecteur descendant : prime sur le display:none de base (déclaré après) */
.fiche-modale__pied .fiche-modale__points{display:flex;gap:6px;align-items:center}
.fiche-modale__pied:has(.fiche-modale__points) .fiche-modale__ou{display:none}
}
@media (max-width:760px) and (prefers-reduced-motion: no-preference){
.fiche-modale[open]{animation:oa-feuille-monte .32s cubic-bezier(.22,1,.36,1)}
@keyframes oa-feuille-monte{from{transform:translateY(45%)}to{transform:none}}
}
/* les points n'existent qu'en mobile (créés par le JS selon la largeur) */
.fiche-modale__points{display:none}
.fiche-modale__points i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);transition:background .2s,transform .2s}
.fiche-modale__points i.est-actif{background:var(--jaune);transform:scale(1.35)}

/* ---- FAQ dérivée des fiches voyage (SEO/GEO, v3.45.0) ---- */
.fiche-faq{margin:44px 0 8px}
.fiche-faq h2{font-family:var(--titres);font-size:24px;font-weight:700;margin-bottom:16px}
.fiche-faq__item{background:var(--panel-2);border:1px solid var(--line);border-radius:2px;margin-bottom:10px;padding:0 18px}
.fiche-faq__item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;font-weight:600}
.fiche-faq__item summary::-webkit-details-marker{display:none}
.fiche-faq__item i{font-style:normal;color:var(--accent);font-weight:700;transition:transform .25s}
.fiche-faq__item[open] i{transform:rotate(45deg)}
.fiche-faq__item p{padding:0 0 16px;color:var(--ink-dim)}

/* ---- barre de recherche de /voyages/ (pleine largeur au-dessus des
   colonnes filtres/résultats, suggestions instantanées via recherche.js) ---- */
.recherche{grid-column:1/-1;position:relative;display:flex;align-items:center;min-width:0;
background:var(--panel);border:1.5px solid var(--line-strong);border-radius:2px;
padding:0 18px;transition:border-color .2s ease}
.recherche:focus-within{border-color:var(--accent)}
.recherche__loupe{flex:0 0 auto;width:19px;height:19px;color:var(--ink-faint)}
.recherche input{flex:1;border:0;background:none;font:inherit;font-size:15.5px;
color:var(--ink);padding:14px 12px;min-width:0}
.recherche input:focus{outline:none}
.recherche input::-webkit-search-cancel-button{-webkit-appearance:none}
.recherche__efface{flex:0 0 auto;color:var(--ink-faint);font-size:15px;padding:4px 2px}
.recherche__efface:hover{color:var(--sec-magenta)}
.recherche__suggestions{position:absolute;top:calc(100% + 8px);left:14px;right:14px;z-index:30;
background:#fff;border:1px solid var(--line-strong);border-radius:2px;overflow:hidden;
/* seule ombre conservée du lot : ce menu FLOTTE au-dessus du texte de la page,
   l'ombre y porte l'information « je suis au-dessus », pas la décoration */
box-shadow:0 10px 26px rgba(35,31,32,.10);
}
.recherche__sugg{display:flex;align-items:center;gap:13px;padding:10px 16px;transition:background .15s ease}
.recherche__sugg:hover{background:var(--panel-2)}
.recherche__sugg+.recherche__sugg{border-top:1px solid var(--line)}
.recherche__sugg img{width:52px;height:40px;object-fit:cover;border-radius:2px;flex:0 0 auto}
.recherche__sugg span{min-width:0}
.recherche__sugg b{display:block;font-size:14.5px;line-height:1.3}
.recherche__sugg small{display:block;font-size:12px;color:var(--accent);font-weight:700}
@media (max-width:860px){
.recherche input{padding:12px 10px;font-size:15px}
}

/* ---- page À propos (/a-propos/) — sobre : une colonne de lecture,
   aucun encadré ni pastille (choix client « simple et professionnel ») ---- */
.apropos{max-width:66ch;padding-bottom:90px}
.apropos>p{font-size:16.5px;line-height:1.8;color:var(--ink-dim);margin-bottom:22px}
.apropos-contact{margin-top:48px;padding-top:34px;border-top:1px solid var(--line)}
.apropos-contact h2{font-family:var(--titres);font-weight:700;font-size:20px;margin-bottom:18px}
.apropos-contact dl{display:grid;grid-template-columns:130px 1fr;row-gap:10px;margin-bottom:26px}
.apropos-contact dt{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);padding-top:2px}
.apropos-contact dd{margin:0;font-size:15.5px}
@media (max-width:560px){
.apropos-contact dl{grid-template-columns:1fr;row-gap:2px}
.apropos-contact dd{margin-bottom:10px}
}

/* ---- formulaire de contact B2B (bloc #contact de /a-propos/) ---- */
.apropos-contact dd a{color:var(--accent);font-weight:600}
.apropos-contact dd a:hover{text-decoration:underline}
.apropos-form{margin-top:34px;padding:26px;background:var(--panel-2);border:1px solid var(--line);border-radius:2px}
.apropos-form h3{font-family:var(--titres);font-weight:600;font-size:17px;margin-bottom:16px}
.contact-form__grille{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.contact-form__champ{display:flex;flex-direction:column;gap:6px;margin:0}
/* alignement (v4.122.0) : dans une rangée de la grille, les champs se calent en
   bas — une étiquette sur deux lignes ne décale plus son voisin */
.contact-form__champ>input,.contact-form__champ>select,.contact-form__champ>textarea,.contact-form__champ>.contact-form__tel,.contact-form__champ>.contact-form__pays-saisie{margin-top:auto}
.contact-form__champ--large{margin-top:14px}
.contact-form__champ--plein{grid-column:1 / -1}
.contact-form label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.contact-form label span{color:var(--sec-orange)}
.contact-form input,.contact-form select,.contact-form textarea{
width:100%;font-family:var(--texte);font-size:15px;color:var(--ink);background:#fff;
padding:10px 12px;border:1px solid var(--line-strong);border-radius:2px}
.contact-form textarea{resize:vertical;min-height:110px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
/* piège à robots : hors écran, jamais masqué en display:none (certains
   robots ignorent les champs cachés, pas ceux qui sont déplacés) */
.contact-form__piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* drapeaux : images SVG locales (assets/img/drapeaux), jamais des emoji (v4.121.0) */
.oa-drapeau{display:inline-block;width:20px;height:15px;vertical-align:-2px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08);object-fit:cover;flex:none}
/* pays à saisie assistée : drapeau dans le champ, liste filtrée dessous */
.contact-form__pays{position:relative}
.contact-form__pays-saisie{position:relative;display:block}
.contact-form__pays-drapeau{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none}
.contact-form__pays-drapeau[hidden]{display:none}
.contact-form input#oa-contact-pays.a-drapeau{padding-left:40px}
.contact-form__pays-liste{position:absolute;z-index:20;left:0;right:0;top:100%;margin:2px 0 0;padding:4px 0;list-style:none;max-height:300px;overflow-y:auto;
background:#fff;border:1px solid var(--line-strong);border-radius:2px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.contact-form__pays-liste[hidden]{display:none}
.contact-form__pays-liste li{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:15px;color:var(--ink);cursor:pointer}
.contact-form__pays-liste li small{margin-left:auto;color:var(--ink-faint);font-size:13px}
.contact-form__pays-liste li:hover,.contact-form__pays-liste li[aria-selected="true"]{background:#eef7f9}
/* téléphone : drapeau + indicatif du pays choisi accolés devant le numéro */
.contact-form__tel{display:flex;align-items:stretch}
.contact-form__tel .contact-form__indicatif{display:flex;align-items:center;gap:6px;white-space:nowrap;padding:0 10px;font-size:15px;color:var(--ink);background:#f4f2ee;border:1px solid var(--line-strong);border-right:0;border-radius:2px 0 0 2px}
.contact-form__tel .contact-form__indicatif b{font-weight:500}
.contact-form__tel .contact-form__indicatif[hidden]{display:none}
.contact-form__tel .contact-form__indicatif:not([hidden])+input{border-radius:0 2px 2px 0}
.contact-form__pied{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:20px}
/* Période souhaitée : trois segments (dates précises / période / pas défini),
   le panneau du mode actif dessous. Bloc sur toute la largeur de la grille.
   Préfixe .contact-form obligatoire : « .contact-form label » et « label span »
   (étiquettes majuscules, astérisque orange) l'emporteraient sinon. */
.contact-form__periode{grid-column:1 / -1;gap:10px}
.contact-form__etiquette{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.contact-form__segments{display:flex;flex-wrap:wrap;border:1px solid var(--line-strong);border-radius:2px;background:#fff;overflow:hidden}
.contact-form .contact-form__segment{flex:1 1 auto;position:relative;margin:0;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-dim)}
.contact-form .contact-form__segment+.contact-form__segment{border-left:1px solid var(--line-strong)}
.contact-form .contact-form__segment input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;border:0;pointer-events:none}
.contact-form .contact-form__segment span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;text-align:center;color:inherit;cursor:pointer;transition:background .15s,color .15s}
.contact-form .contact-form__segment span:hover{background:var(--panel-2);color:var(--ink)}
.contact-form .contact-form__segment input:checked+span{background:var(--accent);color:#fff;font-weight:600}
.contact-form .contact-form__segment input:focus-visible+span{outline:2px solid var(--accent-fonce);outline-offset:-2px}
.contact-form__panneau{display:flex;flex-direction:column;gap:8px}
.contact-form__panneau[hidden]{display:none}
.contact-form__panneau input[type=date]{max-width:260px}
.contact-form__panneau select{max-width:420px}
.contact-form__periode-listes{display:flex;gap:8px;flex-wrap:wrap}
.contact-form__periode-listes select{flex:1 1 130px;min-width:0;max-width:200px}
.contact-form__note{font-size:13px;color:var(--ink-dim);font-style:italic}
@media (max-width:560px){.contact-form__segments{flex-direction:column}.contact-form .contact-form__segment+.contact-form__segment{border-left:0;border-top:1px solid var(--line-strong)}}
.contact-form__aide{font-size:13px;color:var(--ink-dim)}
.contact-form__aide a{color:var(--accent);font-weight:600}
.contact-msg{padding:12px 16px;border-radius:2px;font-size:14.5px;margin-bottom:16px}
.contact-msg--ok{background:rgba(138,189,36,.14);border:1px solid var(--sec-vert);color:#4a6a10}
.contact-msg--err{background:rgba(240,129,0,.12);border:1px solid var(--sec-orange);color:#8a4a00}
@media (max-width:560px){
.contact-form__grille{grid-template-columns:1fr}
.apropos-form{padding:20px 16px}
}

/* ---- archive /lieux/ : carte de l'île + grandes cartes région ---- */
.oa-carte--archipel{height:440px;border-radius:2px;overflow:hidden;margin:6px 0 44px;
border:1px solid var(--line)}
.oa-marqueur--lieu{position:relative;display:grid;place-items:center;width:16px;height:16px;
border-radius:50%;background:var(--jaune);border:3px solid #fff;
color:transparent;cursor:pointer}
.oa-marqueur--lieu i{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-style:normal;
font-family:var(--titres);font-weight:700;font-size:12.5px;color:var(--ink);white-space:nowrap;
background:rgba(255,255,255,.92);border-radius:2px;padding:3px 10px}
.oa-marqueur--lieu:hover{background:var(--accent)}
/* grille « collection » : la photo occupe toute la carte, titre + lieux
   précis + nombre de voyages sur un voile dégradé bas ; zoom léger au
   survol sur le CALQUE photo interne (transform seul, composé GPU). */
.lieux-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding-bottom:90px}
.lieu-carte{position:relative;display:block;aspect-ratio:3/3.6;border-radius:2px;overflow:hidden;
transition:transform .3s ease}
.lieu-carte:hover{transform:translateY(-4px)}
.lieu-carte__photo{position:absolute;inset:0;background-size:cover;background-position:center;
transition:transform .6s ease;will-change:transform}
.lieu-carte:hover .lieu-carte__photo{transform:scale(1.06)}
.lieu-carte::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(14,11,16,.06) 38%,rgba(14,11,16,.74) 100%)}
.lieu-carte__contenu{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px 24px;
display:grid;gap:6px;color:#fff}
.lieu-carte__titre{font-family:var(--titres);font-weight:800;font-size:clamp(19px,2.2vw,24px);
letter-spacing:-.01em;line-height:1.2}
.lieu-carte__fins{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.85)}
.lieu-carte__nb{font-size:12.5px;font-weight:700;color:var(--jaune)}
.lieu-carte__nb i{font-style:normal;display:inline-block;transition:transform .25s ease}
.lieu-carte:hover .lieu-carte__nb i{transform:translateX(4px)}
@media (max-width:760px){
.lieux-grille{grid-template-columns:1fr 1fr;gap:12px}
.lieu-carte__contenu{padding:14px 16px}
.oa-carte--archipel{height:320px}
}
@media (max-width:520px){
.lieux-grille{grid-template-columns:1fr}
}

/* ---- fiche lieu « guide » : activités en cartes, infos en icônes ---- */
.lieu-actis{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:10px}
.lieu-acti{display:flex;gap:13px;align-items:flex-start;background:var(--panel);
border:1px solid var(--line);border-radius:2px;padding:16px 18px}
.lieu-acti svg{flex:0 0 auto;width:26px;height:26px;color:var(--accent);margin-top:2px}
.lieu-acti b{display:block;font-size:14.5px;line-height:1.35}
.lieu-acti span{font-size:12.5px;color:var(--ink-faint)}
.lieu-infos{display:grid;gap:12px;margin-bottom:18px}
.lieu-info{display:flex;gap:12px;align-items:center}
.lieu-info svg{flex:0 0 auto;width:22px;height:22px;color:var(--accent)}
.lieu-info span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint)}
.lieu-info b{font-size:14px;line-height:1.3}

/* ---- badge « Coup de cœur » (voyages mis en avant — ★ sur la fiche) ---- */
.ac-voyage__promo--vedette{background:var(--jaune);color:var(--ink)}

/* ---- photos dans la fenêtre de détail hébergement/activité ---- */
.fiche-modale__photos{display:grid;grid-template-columns:2fr 1fr;gap:8px;margin-bottom:18px}
.fiche-modale__photos a{display:block;border-radius:2px;overflow:hidden}
.fiche-modale__photos img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
/* la 1re photo (★) en grand sur deux rangées, les suivantes en colonne */
.fiche-modale__photos a:first-child{grid-row:span 2}
.fiche-modale__photos a:nth-child(n+4){display:none}
.fiche-modale__photos--seule{grid-template-columns:1fr}
.fiche-modale__photos--seule a:first-child{grid-row:auto}

/* bouton « programme imprimable » du panneau de la fiche */
.fiche-cover__programme{display:block;margin-top:10px;padding:9px 20px;font-size:13.5px;text-align:center}

/* ---- grille tarifaire dégressive (fiche + espace agence) ---- */
.grille-defile{overflow-x:auto;border:1px solid var(--line);border-radius:2px;background:var(--panel);max-width:560px}
.grille-tarifs{width:100%;border-collapse:collapse;font-size:14.5px}
.grille-tarifs th{text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel-2);white-space:nowrap}
.grille-tarifs td{padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.grille-tarifs tr:last-child td{border-bottom:0}
.grille-tarifs__net{font-weight:700;color:var(--accent)}
.grille-single{margin-top:10px;font-size:13.5px;color:var(--ink-dim)}

/* ---- page introuvable (404) : message éditable + recherche du catalogue ----
   Bloc centré et aéré, sans photo (choix client) : le visiteur égaré n'a que
   deux gestes possibles sous les yeux, chercher ou rentrer. La barre reprend
   telle quelle le composant .recherche de /voyages/ — d'où la largeur bornée
   ici plutôt qu'une variante de la barre. */
.e404__inner{max-width:660px;padding-top:clamp(64px,11vh,120px);padding-bottom:clamp(72px,14vh,140px);text-align:center}
.e404__code{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.e404__titre{font-family:var(--titres);font-size:clamp(30px,5vw,46px);font-weight:600;line-height:1.15;margin:14px 0 0}
.e404__texte{margin-top:18px;color:var(--ink-dim);font-size:16.5px}
.e404__texte p+p{margin-top:12px}
.e404__recherche{margin-top:32px;text-align:left}
.e404__actions{margin-top:26px}