*,*::before,*::after{box-sizing:border-box}
:root{
  /* Guinguette : turquoise et jaune soleil. La couleur est concentree sur les
     etiquettes, les boutons et les badges ; le fond reste presque blanc. Une
     page dont le fond est colore parait plus complexe, et la complexite visuelle
     est ce qui se juge le plus vite — des 17 millisecondes. */
  --bg:#FFFFFF; --bg-2:#F5F7F7; --bg-3:#E9EFEE; --card:#FFFFFF;
  --ink:#12211F; --ink-2:#586462; --ink-3:#5F6D6A; --line:#E3E8E7;
  --green:#0F6E7A; --green-d:#0A5058; --green-l:#DFF1F2; --amber:#E9960B;
  --r:14px; --r-l:20px; --r-xl:28px;
  --f:"Instrument Sans","Segoe UI Variable Display","Segoe UI",system-ui,
      -apple-system,Inter,"Helvetica Neue",Arial,sans-serif;
  --f-titre:"Bricolage Grotesque",var(--f);
  --sh:0 1px 2px rgba(14,26,20,.05),0 6px 20px -10px rgba(14,26,20,.16);
  --sh-h:0 2px 6px rgba(14,26,20,.07),0 22px 44px -20px rgba(14,26,20,.30);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--f);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-d)}
h1,h2,h3,h4{font-family:var(--f-titre);font-weight:700;line-height:1.12;
  letter-spacing:-.02em;margin:0 0 .45em;font-optical-sizing:auto}
h1{font-weight:800}
h1{font-size:clamp(32px,5vw,54px)}
h2{font-size:clamp(24px,3vw,34px);margin-top:1.5em}
h3{font-size:19px;letter-spacing:-.015em}
p{margin:0 0 1em}
.wrap{max-width:1320px;margin:0 auto;padding:0 24px}
.narrow{max-width:720px}
.mut{color:var(--ink-2)}
/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:26px;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;
  letter-spacing:-.03em;color:var(--ink)}
.brand em{font-style:normal;color:var(--green)}
/* Hauteur et largeur sont dans le HTML : le navigateur reserve la place avant
   meme d'avoir charge le fichier, et l'entete ne saute pas au chargement. */
.brand .logo{display:block;width:34px;height:34px;flex:none}
@media (max-width:520px){.brand{font-size:18px;gap:8px}
  .brand .logo{width:28px;height:28px}}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto;font-size:15px;font-weight:500}
.nav a{color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.nav .cta{border:1.5px solid var(--ink);border-radius:999px;padding:9px 18px;color:var(--ink);
  font-weight:600}
.nav .cta:hover{background:var(--ink);color:#fff}
@media(max-width:900px){.head-in{height:64px;gap:16px}.nav{gap:14px;font-size:13.5px}
  .nav .cta{display:none}}
@media(max-width:620px){.nav a:not(.keep){display:none}}
/* ---------- hero ---------- */
.hero{padding:34px 0 22px;background:
  radial-gradient(1200px 460px at 80% -20%,var(--green-l),transparent 68%),var(--bg)}
.hero h1{max-width:16ch}
/* La carte de France remonte a hauteur du titre : elle occupait la moitie droite
   de l'ecran plus bas, pendant que cette meme moitie restait vide en haut. */
.hero.acc{padding:26px 0 28px}
.acc-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40%);
  gap:30px 40px;align-items:center}
.acc-c .pan-fr{padding:14px 16px 10px}
.acc-c .pan-fr svg{max-height:min(46vh,420px)}
@media (max-width:900px){.acc-in{grid-template-columns:1fr}}
.hero.bande{padding:24px 0 18px}
.bande-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:14px 40px}
.bande-in>div{flex:1 1 380px;min-width:0}
.bande-in .liste-h1{max-width:20ch;margin-bottom:6px;font-size:clamp(27px,3.2vw,40px)}
.bande-in .lede{margin-bottom:0;font-size:16px;max-width:60ch}
/* flex:0 0 auto empechait le bandeau de retrecir : a 390 px la troisieme
   valeur sortait de l'ecran. Il retrecit et passe a la ligne. */
.bande-in .stats{flex:1 1 auto;min-width:0;margin:0;gap:10px 26px}
.bande-in .stat b{font-size:23px}
.grp.eq{grid-column:span 2}
.hero .lede{font-size:17.5px;color:var(--ink-2);max-width:64ch;margin-bottom:18px}
.searchbar{display:flex;align-items:center;gap:0;background:var(--card);border:1px solid var(--line);
  border-radius:999px;box-shadow:var(--sh);padding:5px 5px 5px 20px;max-width:560px;margin:0 0 4px}
.searchbar input{flex:1;border:0;outline:0;font:16px var(--f);padding:12px 0;background:none;color:var(--ink)}
.searchbar button{border:0;background:var(--green);color:#fff;width:46px;height:46px;
  border-radius:50%;cursor:pointer;font-size:17px;display:grid;place-items:center}
.searchbar button:hover{background:var(--green-d)}
/* Les filtres s'enroulent au lieu de defiler. Une barre en overflow-x avec la
   barre de defilement masquee rendait les derniers filtres — desserte, vie
   autour, tri — litteralement inatteignables a la souris comme au clavier. */
/* La barre de filtres colle sous l'en-tete. Sa hauteur varie avec le nombre de
   lignes qu'elle occupe : le script la mesure et la publie dans --h-barre, dont
   se sert la carte pour se caler juste dessous au lieu de passer dessous. */
.barre{position:sticky;top:var(--h-head,72px);z-index:40;
  background:rgba(255,255,255,.95);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line)}
.barre-in{padding-top:10px;padding-bottom:10px}
.rangee{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ch-q{display:inline-flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;flex:0 1 230px}
.ch-q input{border:0;background:none;font:inherit;color:inherit;outline:0;width:100%;
  min-width:0}
.ch-q svg{opacity:.45;flex:none}
.qf{display:inline-flex;align-items:center;gap:7px;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;
  font-weight:500;color:var(--ink);cursor:pointer;user-select:none;white-space:nowrap;
  position:relative;transition:.12s}
.qf input{position:absolute;opacity:0;width:1px;height:1px}
.qf:hover{border-color:var(--green)}
.qf:has(input:checked){background:var(--green);border-color:var(--green);color:#fff}
.qf input:focus-visible+span{outline:2px solid var(--ink);outline-offset:4px;border-radius:3px}
.ch-f{display:inline-flex;align-items:center;gap:8px;background:var(--card);
  border:1.5px solid var(--ink);border-radius:999px;padding:8px 15px;
  font:600 14px var(--f);color:var(--ink);cursor:pointer;white-space:nowrap}
.ch-f:hover{background:var(--ink);color:#fff}
.ch-f .badge{background:var(--green);color:#fff;border-radius:999px;min-width:19px;
  height:19px;display:grid;place-items:center;font-size:11.5px;padding:0 5px;font-weight:700}
.ch-f .badge[hidden]{display:none}
.ch-t{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink-2);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  cursor:pointer;white-space:nowrap}
.ch-t select{border:0;background:none;font:inherit;color:var(--ink);outline:0;cursor:pointer}
.cnt{margin-left:auto;font-size:14.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.raz{background:none;border:0;padding:0;font:600 13.5px var(--f);color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.raz:hover{color:var(--ink)}
.raz[hidden]{display:none}
.panneau{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px 26px;padding:16px 0 10px;border-top:1px solid var(--line);margin-top:10px}
.panneau[hidden]{display:none}
.grp{border:0;margin:0;padding:0;min-width:0}
.grp legend{font:700 12px var(--f);color:var(--ink-3);padding:0 0 8px;
  text-transform:uppercase;letter-spacing:.06em}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:var(--card);border-radius:999px;padding:5px 11px;font-size:13px;
  cursor:pointer;user-select:none}
.opt input{accent-color:var(--green);margin:0;width:13px;height:13px;flex:none}
.opt:hover{border-color:var(--green)}
.opt:has(input:checked){border-color:var(--green);background:var(--green-l);font-weight:600}
@media (max-width:640px){
  .cnt{margin-left:0;order:-1;width:100%}
  .barre-in{padding-top:8px;padding-bottom:8px}
}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:9px;list-style:none;
  padding:2px 0 8px;margin:0}
.chips .chip{flex:0 0 auto}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:9px 15px;font-size:14px;
  font-weight:500;color:var(--ink);white-space:nowrap;cursor:pointer}
.chip:hover{border-color:var(--ink-3);box-shadow:var(--sh)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.raz{cursor:pointer;border-style:dashed;color:var(--ink-2)}
.chip.raz:hover{color:var(--ink);border-color:var(--ink-3)}
.grid > li[hidden],.liens > li[hidden]{display:none}
.chip svg{opacity:.72}
.chip select,.chip input{border:0;background:none;font:inherit;color:inherit;outline:0}
.stats{display:flex;flex-wrap:wrap;gap:12px 30px;margin:18px 0 0;padding:0;list-style:none}
.stat b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.stat span{font-size:13.5px;color:var(--ink-2)}
/* ---------- split listings + carte ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);gap:0;align-items:start}
.split .col{padding-right:26px}
.split .sticky{position:sticky;top:calc(var(--h-head,72px) + var(--h-barre,60px) + 14px);
  display:flex;flex-direction:column;gap:14px;
  height:calc(100vh - var(--h-head,72px) - var(--h-barre,60px) - 34px)}
.split .sticky #map{flex:1;min-height:0;border-radius:var(--r-l);margin:0;
  border:1px solid var(--line);box-shadow:var(--sh)}
.split .sticky .pan-fr{flex:0 0 auto}
.liste-h1{font-size:clamp(28px,3.4vw,42px)}
/* Colonne de droite de l'accueil : le panneau se colle en haut mais garde sa
   hauteur naturelle, contrairement au bloc carte des pages de liste. */
.split .sticky-fr{position:sticky;top:calc(var(--h-head,72px) + 16px)}
@media(max-width:1050px){.split .sticky-fr{position:static;order:-1}}
@media(max-width:1050px){.split{grid-template-columns:1fr}.split .col{padding-right:0}
  .split .sticky{position:static;height:auto;margin-bottom:28px;order:-1}
  .split .sticky #map{height:360px;flex:none}}
/* ---------- cartes ---------- */
/* Trois colonnes plutot que quatre : la photographie est ce qui rend un site de
   voyage reconnaissable au premier coup d'oeil, et une grande image remplace
   plusieurs petits elements — elle fait donc monter la familiarite et baisser
   la complexite en meme temps. */
.grid{display:grid;gap:22px 20px;grid-template-columns:repeat(auto-fill,minmax(296px,1fr));
  margin:20px 0 0;padding:0;list-style:none}
.split .grid{grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.card{background:var(--card);display:flex;flex-direction:column;gap:11px}
.card .ph{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/11;
  background:var(--bg-3);box-shadow:0 1px 2px rgba(14,26,20,.05)}
.card .ph img,.card .ph svg{width:100%;height:100%;object-fit:cover}
.card:hover .ph{box-shadow:var(--sh-h)}
.ete{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 11px;
  font-size:12.5px;font-weight:700;white-space:nowrap}
.ete.tempere{background:#E4F1F6;color:#125E77}
.ete.chaud{background:#FBF3E2;color:#7A5A16}
.ete.tres_chaud{background:#FBE7DA;color:#8A4B12}
.ete .lb{font-weight:600;font-size:10.5px;letter-spacing:.02em;opacity:.75}
.ete.sur{position:absolute;top:10px;right:10px;z-index:1;background:rgba(255,255,255,.95);
  box-shadow:0 2px 8px rgba(14,26,20,.14);gap:4px;padding:4px 9px}
.ete.sur.tempere{color:#125E77}
.ete.sur.chaud{color:#7A5A16}
.ete.sur.tres_chaud{color:#8A4B12}
.card .ph .far{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.95);
  border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:5px;box-shadow:0 2px 8px rgba(14,26,20,.14)}
.tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  background:var(--green-l);color:var(--green-d);border-radius:5px;padding:3px 7px}
.tag.n{background:#FDF6DC;color:#8A6A00}
.rate{margin-left:auto;font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:3px}
.rate svg{fill:var(--amber)}
.card h3{margin:0;font-size:16.5px;font-weight:700;line-height:1.28}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--green)}
.lieu{font-size:13.5px;color:var(--ink-2);margin-top:-4px}
.acces{font-size:13.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
.acces span{display:flex;align-items:center;gap:7px}
.acces b{color:var(--ink);font-weight:600}
.acces svg{flex:none;opacity:.6}
.card .bas{border-top:1px solid var(--line);padding-top:9px;font-size:13.5px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.card .bas b{font-weight:700}
/* ---------- sections ---------- */
.band{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:52px 0;margin-top:64px}
.tete{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tete h2{margin:0}
.tete a{font-weight:600;font-size:15px}
/* ---------- fiche ---------- */
.fiche{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start;
  margin-top:26px}
@media(max-width:960px){.fiche{grid-template-columns:1fr;gap:26px}}
/* Un seul appel a l'action de poids fort : quatre boutons de meme valeur se
   neutralisent, et le visiteur d'une fiche cherche d'abord comment y aller. */
.liens-aside{list-style:none;padding:0;margin:16px 0 0;font-size:14.5px}
.liens-aside li{padding:9px 0;border-top:1px solid var(--line);line-height:1.45}
.liens-aside .mut{font-size:12.5px;display:block}
.aside{position:sticky;top:92px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-l);padding:22px;box-shadow:var(--sh)}
.kv{margin:0;font-size:14.5px}
.kv div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.kv div:last-child{border:0}
.kv dt{color:var(--ink-2)}
.kv dd{margin:0;text-align:right;font-weight:700}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--green);
  color:#fff;border-radius:999px;padding:13px 20px;font-weight:600;font-size:15px;margin-top:14px}
.btn:hover{background:var(--green-d);color:#fff}
.btn.enligne{display:inline-flex;width:auto;margin:4px 0 0}
.btn.sec{background:var(--card);color:var(--ink);border:1.5px solid var(--line)}
.btn.sec:hover{background:var(--bg-2);color:var(--ink);border-color:var(--ink-3)}
.banniere{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/5;margin:14px 0 6px;
  box-shadow:var(--sh);position:relative}
.banniere img,.banniere svg{width:100%;height:100%;object-fit:cover}
.entete{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
ul.poi{list-style:none;padding:0;margin:10px 0 18px;font-size:15px}
ul.poi li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding:11px 0;
  border-bottom:1px solid var(--line)}
ul.poi .poi-t{flex:1 1 auto;min-width:0}
ul.poi .poi-d{flex:1 0 100%;margin:2px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.5}
ul.poi li:last-child{border:0}
ul.poi .dist{margin-left:auto;color:var(--ink-2);font-size:13.5px;white-space:nowrap}
ul.poi li:hover .voir-carte{border-color:var(--green)}
ul.equips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:14px 0 10px}
.eq{display:inline-flex;align-items:center;gap:8px;background:var(--green-l);
  color:var(--green-d);border-radius:10px;padding:8px 13px;font-size:14px;font-weight:600}
.eq svg{opacity:.85}
figure.frise{margin:20px 0 8px;padding:16px 14px 8px;border:1px solid var(--line);
  border-radius:var(--r-l);background:var(--card)}
figure.frise svg{width:100%;height:auto;overflow:visible}
figure.frise figcaption{margin-top:6px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.frise .gr{stroke:var(--line);stroke-width:1}
.frise .zero{stroke:var(--ink-3)}
.frise .sais{fill:#F0F6F2}
.frise .bande{fill:#7CC4A0;fill-opacity:.55}
.frise .bande1{stroke:#7CC4A0;stroke-width:9;stroke-opacity:.55;stroke-linecap:round}
.frise .moy{fill:none;stroke:var(--green-d);stroke-width:2.4;stroke-linejoin:round;
  stroke-linecap:round}
.frise .mo{fill:var(--green-d);stroke:var(--card);stroke-width:1.6}
.frise .rec{fill:#98A5A0}
.frise .tige{stroke:#C9D2CD;stroke-width:1.2}
.frise .ax{font:11px var(--f);fill:var(--ink-2)}
.frise .fin{text-anchor:end}
.frise .mi{text-anchor:middle}
.frise .mi.fort{font-weight:700;fill:var(--ink)}
.frise .et{text-anchor:middle;font-weight:700;fill:var(--green-d)}
.frise .rc{text-anchor:middle;font-size:10px;fill:var(--ink-3)}
.leg-clim{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 10px;font-size:12.5px;
  color:var(--ink-2)}
.leg-clim .lg{display:inline-flex;align-items:center;gap:7px}
.leg-clim i{display:inline-block;flex:none;border-radius:2px}
.leg-clim .sw-bande{width:16px;height:11px;background:#7CC4A0;opacity:.55}
.leg-clim .sw-moy{width:16px;height:3px;background:var(--green-d);border-radius:2px}
.leg-clim .sw-rec{width:7px;height:7px;border-radius:50%;background:#9AA6A0}
.resume-clim{margin:-2px 0 14px;max-width:66ch;color:var(--ink-2)}
.resume-clim b{color:var(--ink)}

/* notes sur cinq : la jauge est un rappel visuel, le chiffre brut reste la */
.notes{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.note-l{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px}
.note-t{font-weight:700;min-width:82px}
.note-n{font-weight:700}
.note-b{color:var(--ink-2)}
.note-d{color:var(--ink-3)}
.jauge{display:inline-flex;gap:3px}
.jauge i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.jauge i.p{background:var(--green)}
.note-l.vie .jauge i.p{background:#B07D2A}
.card .notes{margin:0;gap:4px}
.card .note-l{font-size:12px;gap:6px;flex-wrap:nowrap;white-space:nowrap}
.card .note-t{min-width:62px;font-weight:600;color:var(--ink-2)}
.card .note-b{margin-left:auto;font-size:11.5px}
.card .jauge i{width:7px;height:7px}
/* Pictogrammes d'equipement sur la vignette. Chacun garde son intitule en texte
   cache : une forme ne nomme pas un equipement, elle le rappelle. */
/* ---------- plan de ligne ---------- */
.ints{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.int{display:inline-flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:9px 15px;font:600 14px var(--f);
  color:var(--ink-2);cursor:pointer;transition:.12s}
.int:hover{border-color:var(--green);color:var(--green)}
.int[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.int .n{font-weight:700;opacity:.65;font-size:12.5px}
.ligne{list-style:none;margin:18px 0 0;padding:0;position:relative}
/* le trait de la ligne, tire d'un bout a l'autre */
.ligne::before{content:"";position:absolute;left:63px;top:14px;bottom:14px;width:3px;
  background:var(--green-l);border-radius:2px}
.stn{position:relative;margin:0}
.stn-b{all:unset;display:flex;width:100%;box-sizing:border-box;gap:18px;padding:11px 12px;
  border-radius:var(--r-l);cursor:pointer;align-items:flex-start}
.stn-b:hover{background:var(--bg-2)}
.stn-b:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.stn .t{flex:0 0 52px;text-align:right;font:700 13.5px var(--f);color:var(--ink-2);
  padding-top:2px}
.stn .c{position:relative;padding-left:22px;flex:1;min-width:0}
/* la pastille de la station, posee sur le trait */
.stn .c::before{content:"";position:absolute;left:-9px;top:5px;width:13px;height:13px;
  border-radius:50%;background:var(--card);border:3px solid var(--green)}
.stn.depart{padding:11px 12px;display:flex;gap:18px}
.stn.depart .c::before{background:var(--green);border-color:var(--green)}
.stn.depart .t{flex:0 0 52px;text-align:right;font-style:italic}
.stn b{display:block;font-size:15.5px;line-height:1.3}
.stn .m{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.stn .ss{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.stn .ss .s{font-size:12.5px;background:var(--green-l);color:var(--green-d);
  border-radius:999px;padding:3px 10px}
.stn[hidden]{display:none}
.stn.sel .c::before{background:var(--amber);border-color:var(--amber);
  box-shadow:0 0 0 4px rgba(233,150,11,.22)}
.stn.sel .stn-b{background:var(--bg-2)}
@media(max-width:620px){.ligne::before{left:47px}.stn .t{flex-basis:36px;font-size:12.5px}
  .stn-b,.stn.depart{gap:12px}}
/* ---------- pastille d'information ---------- */
.th{display:flex;align-items:center;gap:9px;flex-wrap:wrap;position:relative}
/* Les etoiles doivent rester a droite du nom, pas passer a la ligne : la
   ligne ne se coupe plus, c'est le nom lui-meme qui se replie s'il est long. */
h1.th{gap:14px;flex-wrap:nowrap;align-items:center}
h1.th .nom{min-width:0}
.etoiles{display:inline-flex;align-items:center;gap:2px}
.etoiles svg{width:24px;height:24px;fill:var(--amber)}
@media (max-width:640px){.etoiles svg{width:19px;height:19px}}
h1.th .info .i{width:26px;height:26px;font-size:14px}
/* La pastille se posait sur la ligne de texte du titre : un <details> en
   inline-block herite de la hauteur de ligne du h2 (38 px pour 34 px de corps)
   et l'icone, alignee sur la ligne de base, tombait huit pixels trop bas. En
   faire une boite flex de sa propre hauteur la recentre vraiment. */
.th .info{position:static;display:flex;align-items:center;line-height:1}
.th .info>summary{display:flex}
.th .info .i{width:24px;height:24px;font-size:12px}
.th .info .info-c{left:0;right:auto;top:calc(100% + 6px);width:min(34rem,100%);
  font:400 13.5px/1.55 var(--f)}
.trj{display:inline-flex;align-items:center;gap:8px;margin-left:auto;background:var(--ink);
  border:1px solid var(--ink);border-radius:999px;padding:9px 15px;font:600 14px var(--f);
  color:#fff;cursor:pointer;transition:.12s}
.trj:hover{background:var(--green-d);border-color:var(--green-d)}
.trj[hidden]{display:none}
/* Les chiffres qui decident : distance a l'arret, marche, gare, departs. */
/* La carte des liaisons : un dessin, pas une carte glissante. Elle doit se lire
   d'un coup d'oeil et rester juste meme sans JavaScript. */
.trains-b{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:22px;align-items:center;margin-top:16px}
@media (max-width:800px){.trains-b{grid-template-columns:1fr}}
.trains-b.seule{grid-template-columns:1fr;max-width:640px}
.carte-tr{margin:0}
.carte-tr svg{width:100%;height:auto;display:block}
.carte-tr .fond path{fill:var(--bg-2);stroke:#fff;stroke-width:1.4;stroke-linejoin:round}
.carte-tr .tr line{stroke:var(--green);stroke-width:2;stroke-dasharray:5 5;opacity:.65}
.carte-tr .pt circle{fill:#fff;stroke:var(--green);stroke-width:2.5}
.carte-tr .pt circle.ici{fill:var(--amber);stroke:var(--ink);stroke-width:2.5}
.carte-tr .lb text{font:700 22px var(--f);fill:var(--ink);paint-order:stroke;
  stroke:#fff;stroke-width:6px;stroke-linejoin:round}
.carte-tr .lb .d{font-weight:500;fill:var(--ink-2)}
.carte-tr .tr line.fil{stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:none;opacity:.55}
.trains-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.trains-l li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.trains-l li:last-child{border-bottom:0}
.trains-l b{font-size:15px}
.trains-l span{font-size:13px;color:var(--ink-2);white-space:nowrap;text-align:right}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;margin:16px 0 0}
.mode{border:1px solid var(--line);border-radius:var(--r-l);padding:15px 17px 16px;
  background:var(--card)}
.mode h3{display:flex;align-items:center;gap:8px;margin:0;font:700 12px var(--f);
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.mode h3 svg{flex:none;opacity:.75;width:16px;height:16px}
.mode-v{margin:9px 0 8px;font:800 21px/1.15 var(--f-titre);letter-spacing:-.02em;
  color:var(--ink)}
.mode ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.mode li{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.mode li b{color:var(--ink)}
.mode.alerte{border-color:var(--amber);background:#FFFAF0}
.acces-cles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:10px;margin:16px 0 0;padding:0;list-style:none}
.ac{border:1px solid var(--line);border-radius:var(--r-l);padding:12px 14px 13px;
  background:var(--card)}
.ac .k{display:flex;align-items:center;gap:7px;font:700 11px var(--f);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.05em;line-height:1.3}
.ac .k svg{flex:none;opacity:.75;width:15px;height:15px}
.ac>b{display:block;font:800 22px/1.1 var(--f-titre);letter-spacing:-.02em;margin:8px 0 3px}
.ac>span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;font-size:12.5px;color:var(--ink-2);line-height:1.4}
.ac.alerte{border-color:var(--amber);background:#FFFAF0}
.ac.alerte>span b{color:#8A5A00}
.mentions{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.mentions li{font-size:15px;line-height:1.6;padding-left:16px;position:relative}
.mentions li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;
  border-radius:50%;background:var(--green-l)}
.mentions mark{background:#FFF0CC;color:#7A5A16;padding:1px 6px;border-radius:4px;
  font-weight:600}
.note.alerte{border-left:4px solid var(--amber);background:#FFFAF0}
.fait{margin:12px 0 0;font-size:14px;color:var(--ink-2);line-height:1.55;max-width:70ch}
.fait.alerte{border-left:3px solid var(--amber);padding-left:12px;color:var(--ink)}
/* Fenetre contextuelle « comment y aller » */
.modal{border:0;padding:0;border-radius:var(--r-xl);width:min(560px,92vw);
  background:var(--card);color:var(--ink);box-shadow:0 24px 60px rgba(14,26,20,.28)}
.modal::backdrop{background:rgba(14,26,20,.45)}
.modal:not([open]){display:none}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 20px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.modal-h b{font-size:16.5px;line-height:1.3}
.modal-x{background:none;border:0;font-size:26px;line-height:1;color:var(--ink-3);
  cursor:pointer;padding:0 2px}
.modal-x:hover{color:var(--ink)}
.modal-c{padding:18px 20px 20px}
.etapes{list-style:none;margin:18px 0 0;padding:0;counter-reset:etape}
.etapes>li{position:relative;padding-left:38px;margin-bottom:15px}
.etapes>li:last-child{margin-bottom:0}
.etapes>li::before{counter-increment:etape;content:counter(etape);position:absolute;
  left:0;top:1px;width:26px;height:26px;border-radius:50%;background:var(--green);
  color:#fff;display:grid;place-items:center;font:700 13px var(--f)}
.etapes>li>b{display:block;font-size:15px;margin-bottom:4px}
.etapes p b{color:var(--ink)}
.etapes p{margin:0 0 6px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.etape-l{display:flex;flex-wrap:wrap;gap:6px 18px}
.ymener{margin:18px 0 8px;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r-l);background:var(--bg-2)}
.ym-lab{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;
  margin:0 0 9px;position:relative}
.ym-lab .info .info-c{left:0;width:min(34rem,78vw)}
.ym-l{display:flex;gap:9px;flex-wrap:wrap}
.ym-l input{flex:1 1 250px;min-width:0;padding:11px 15px;font:inherit;
  border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink)}
.ym-l input:focus{outline:2px solid var(--green);outline-offset:1px}
.ym-l .btn{flex:none}
.ym-s{margin:12px 0 0;font-size:14px;color:var(--ink-2);max-width:68ch}
.ym-b{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:8px}
.lnk{font-size:13.5px;font-weight:600;color:var(--green-d);text-decoration:underline;
  text-underline-offset:3px}
.lnk:hover{color:var(--ink)}
/* Les trois modes tiennent sur une ligne dans la bulle : ce sont des choix
   equivalents, pas une action principale suivie de deux replis. */
.lieux{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));
  gap:14px;list-style:none;padding:0;margin:14px 0 0}
.lc{border:1px solid var(--line);border-radius:var(--r-l);padding:14px 16px 15px;
  background:var(--card);display:flex;flex-direction:column;gap:9px;transition:.12s}
.lc:hover{border-color:var(--green);box-shadow:var(--sh)}
.lc-h{display:flex;align-items:flex-start;gap:11px}
.lc-ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;
  place-items:center;color:#fff;background:#6B7280}
.lc-ic svg{width:19px;height:19px}
.lc-ic.visiter{background:#0F766E}.lc-ic.baigner{background:#1D4ED8}
.lc-ic.bus{background:#0F6E7A}
.lc-ic.marcher{background:#15803D}.lc-ic.amuser{background:#B45309}
.lc-n{flex:1;min-width:0}
.lc-n b{display:block;font-size:15.5px;line-height:1.3}
.lc-y{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.lc-d{flex:none;text-align:right;font:700 14.5px var(--f);color:var(--ink);
  white-space:nowrap}
.lc-d i{display:block;font:400 11.5px var(--f);font-style:normal;color:var(--ink-3);
  margin-top:3px}
.lc-d.loin{font-weight:600;color:var(--ink-2)}
.lc-p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.lc-x{border:0;padding:0;margin:0}
.lc-x>summary{list-style:none;cursor:pointer;display:block;font-weight:400}
.lc-x>summary::-webkit-details-marker{display:none}
.lc-x>summary>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.lc-x[open]>summary>span{display:block}
.lc-x>summary::after{content:"Voir plus";display:inline-block;margin-top:5px;
  font:700 12.5px var(--f);color:var(--green-d);text-decoration:underline;
  text-underline-offset:3px}
.lc-x[open]>summary::after{content:"Voir moins"}
.lc-ss{display:flex;flex-wrap:wrap;gap:6px}
.lc-s{font-size:12.5px;background:var(--green-l);color:var(--green-d);
  border-radius:999px;padding:3px 10px}
.tete-bus{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:22px}
.tete-bus h3{margin:0}
.tete-bus .trj{margin-left:0}
.lc-b{margin-top:auto;align-self:flex-start;background:var(--green-l);
  color:var(--green-d);border:0;border-radius:999px;padding:7px 14px;
  font:700 13px var(--f);cursor:pointer;width:auto}
.lc-b:hover{background:var(--green);color:#fff}
/* Le bouton se place sous la liste et au centre : c'est la ou l'oeil arrive
   quand il a fini de parcourir la grille. Le chevron se retourne a l'ouverture. */
.lieux-plus{border:0;padding:0;margin:18px 0 0;text-align:center}
.lieux-plus>summary{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;
  border:1.5px solid var(--line);border-radius:999px;font:600 14px var(--f);
  color:var(--ink);background:var(--card);list-style:none;cursor:pointer;
  transition:.12s}
.lieux-plus>summary::after{content:none}
.lieux-plus>summary:hover{border-color:var(--green);color:var(--green)}
.lieux-plus>summary .chev{transition:transform .15s ease}
.lieux-plus[open]>summary .chev{transform:rotate(180deg)}
.lieux-plus[open]>summary{margin-bottom:14px}
.lieux-plus .lieux{text-align:left}
.tr-p>summary .chev{transition:transform .15s ease;vertical-align:-2px}
.tr-p[open]>summary .chev{transform:rotate(180deg)}
.pop-b{display:block;width:100%;margin-top:9px;background:var(--green);color:#fff;
  border:0;border-radius:999px;padding:8px 12px;font:700 12.5px var(--f);cursor:pointer}
.pop-b:hover{background:var(--green-d)}
/* Le panneau d'itineraire vit dans la page : aucune requete au chargement,
   aucune dependance a un service tiers pour lire un horaire. */
.trajet{margin:14px 0 4px;border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--card);box-shadow:var(--sh);overflow:hidden}
.trajet[hidden]{display:none}
.tr-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px 11px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.tr-h b{font-size:16.5px;line-height:1.25}
.tr-x{background:none;border:0;font-size:24px;line-height:1;color:var(--ink-3);
  cursor:pointer;padding:0 2px}
.tr-x:hover{color:var(--ink)}
.tr-modes{display:flex;gap:6px;padding:11px 16px 0}
.tr-modes button{flex:1 1 0;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:9px 10px;color:var(--ink-2);cursor:pointer;
  transition:.12s;display:flex;align-items:center;justify-content:center;gap:6px}
.tr-modes button svg{width:23px;height:23px}
.tr-modes button:hover{border-color:var(--green);color:var(--green)}
.tr-modes button[aria-selected="true"]{background:var(--green);border-color:var(--green);
  color:#fff}
.tr-carte{padding:12px 16px 0}
#tr-map{height:190px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-2)}
.tr-mc{margin:7px 0 0;font-size:12px;line-height:1.45;color:var(--ink-3)}
.tr-c{padding:14px 16px 16px}
.tr-t{margin:0 0 10px;font-size:15px;color:var(--ink-2)}
.tr-t b{font-size:19px;color:var(--ink);font-weight:800}
.tr-s{border-top:1px solid var(--line);padding-top:11px;margin-top:11px}
.tr-s h4{margin:0 0 7px;font:700 13px var(--f);text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-3)}
.tr-e{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-2)}
.tr-j{margin:8px 0 5px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.tr-j.vide{font-weight:400;color:var(--ink-3);font-style:italic}
.tr-hs{display:flex;flex-wrap:wrap;gap:5px}
.tr-hs b{background:var(--green-l);color:var(--green-d);border-radius:6px;
  padding:4px 8px;font:700 13px/1 var(--f);font-variant-numeric:tabular-nums}
.tr-p{border:0;padding:0;margin:6px 0 0}
.tr-p>summary{list-style:none;cursor:pointer;display:inline-block;font:600 12.5px var(--f);
  color:var(--green-d);text-decoration:underline;text-underline-offset:3px}
.tr-p>summary::after{content:none}
.tr-p>summary::-webkit-details-marker{display:none}
.tr-p[open]>summary{margin-bottom:6px}
.tr-src{margin:11px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.tr-src.alerte{border-left:3px solid var(--amber);padding-left:11px;color:var(--ink-2)}
.tr-src.alerte b{color:var(--ink)}
.tr-c .lnk{display:inline-block;margin-top:10px}
.info{display:inline-block;vertical-align:middle;position:relative;border:0;padding:0}
.info>summary::after{content:none}
/* La FAQ pose un « + » sur tout summary et un « – » quand il est ouvert. Le
   second a la meme specificite que nos annulations et passe apres dans la
   feuille : sans ces regles, un tiret apparaissait a cote du titre ouvert. */
.info[open]>summary::after,.tr-p[open]>summary::after,
.lieux-plus[open]>summary::after,.voir-plus>details[open]>summary::after{content:none}
.voir-plus>details{border:0;padding:0}
.voir-plus>details>summary::after{content:none}
/* Le dessin fait 24 px, la zone tactile 44 : le padding negatif elargit la
   cible sans deplacer quoi que ce soit (WCAG 2.5.8 demande 24, les guides
   tactiles 44). */
.info>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  padding:10px;margin:-10px}
.info>summary::-webkit-details-marker{display:none}
.info .i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--line);color:var(--ink-3);font:italic 700 13px var(--f-titre);
  background:var(--card);transition:.12s}
.info>summary:hover .i,.info[open] .i{border-color:var(--green);color:var(--green)}
.info>summary:focus-visible .i{outline:2px solid var(--ink);outline-offset:2px}
.info .info-c{position:absolute;z-index:40;left:0;top:32px;width:min(34rem,80vw);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:0 10px 34px rgba(18,33,31,.16);padding:16px 18px;font-size:13.5px;
  line-height:1.55;color:var(--ink-2)}
.info .info-c b{color:var(--ink)}
@media(max-width:620px){.info .info-c{position:static;width:auto;margin-top:8px}}
/* Le bouton qui ouvre la tranche suivante prend la place d'une carte, sans en
   avoir l'air : pointille et fond neutre, pour qu'on ne le lise pas comme un
   camping de plus. */
.plus-liste{display:flex;align-items:center;justify-content:center;padding:22px;
  border:1px dashed var(--line);border-radius:var(--r-l);background:none;box-shadow:none}
.plus-liste:hover{box-shadow:none;transform:none}
/* ---------- listes repliees ---------- */
.voir-plus{list-style:none;padding:0}
.voir-plus>details>summary{cursor:pointer;display:inline-block;padding:8px 14px;
  border:1px dashed var(--line);border-radius:999px;font-size:13.5px;font-weight:600;
  color:var(--ink-2);list-style:none}
.voir-plus>details>summary::-webkit-details-marker{display:none}
.voir-plus>details>summary:hover{border-color:var(--green);color:var(--green)}
.voir-plus>details[open]>summary{margin-bottom:10px}
.voir-plus ul.poi{margin:0;padding:0}
.eqs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.eqp{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);cursor:default}
.eqp svg{opacity:.85}
.eqp.plus{width:auto;padding:0 9px;font-size:12px;font-weight:600}
.card .notes{margin:2px 0 0}
/* ---------- carte de France cliquable ---------- */
.pan-fr{display:flex;flex-direction:column;gap:10px;padding:18px 18px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh)}
 /* Carte de reperage, pas seconde carte principale : hauteur fixee, largeur
   suivie, et le tout couche en ligne pour ne pas laisser un grand vide. */
.pan-fr.mini{flex-direction:row;align-items:center;gap:18px;padding:14px 18px;
  box-shadow:none;background:var(--bg-2)}
.pan-fr.mini svg{flex:none;width:auto;height:150px}
.pan-fr.mini .nom{text-align:left;font-size:14px;color:var(--ink);font-weight:600}
.pan-fr.mini .nom span{display:block;font-weight:400;font-size:12.5px;
  color:var(--ink-2);margin-top:4px}
.pan-fr svg{display:block;width:100%;height:auto;flex:1;min-height:0}
.pan-fr .rg path{fill:#E4F2F1;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;
  transition:fill .12s ease}
.pan-fr .rg.n2 path{fill:#C0E3E2}
.pan-fr .rg.n3 path{fill:#8FCCCD}
.pan-fr .rg.n4 path{fill:#4FA8AF}
.pan-fr .rg.n5 path{fill:#14707C}
.pan-fr .rg:hover path,.pan-fr .rg:focus path{fill:var(--amber)}
/* La region courante ne se signale pas par la seule couleur : le trait epaissit
   aussi, et le titre de la page la nomme. */
.pan-fr .rg.ici path{fill:var(--amber);stroke:var(--ink);stroke-width:2.4}
.pan-fr .rg{outline:0}
.pan-fr .rg:focus-visible path{stroke:var(--ink);stroke-width:2.6}
.pan-fr text{font:700 26px var(--f);fill:var(--ink);paint-order:stroke;
  stroke:#fff;stroke-width:6px;stroke-linejoin:round;pointer-events:none}
.pan-fr .nom{font-size:13px;color:var(--ink-2);margin:0;text-align:center}
.pan-fr.mini text{display:none}
@media(max-width:1050px){.pan-fr{max-width:520px;margin:0 auto 26px}}

/* carte de situation : reperes, legende-filtre, infobulles */
.leg-carte{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 0}
.leg-carte button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--card);border-radius:999px;padding:5px 12px 5px 5px;font:600 12.5px var(--f);
  color:var(--ink);cursor:pointer;min-height:32px}
.leg-carte button:hover{border-color:var(--green)}
.leg-carte button:focus-visible{outline:2px solid var(--green-d);outline-offset:2px}
/* une categorie coupee s'affiche eteinte, et pas seulement d'une autre couleur */
.leg-carte button[aria-pressed="false"]{color:var(--ink-3);text-decoration:line-through}
.leg-carte button[aria-pressed="false"] .pastille{filter:grayscale(1);opacity:.45}
td.vieux{color:#8A4B12;font-weight:600}
.leg-seule{display:flex;align-items:center;gap:9px;margin:10px 0 0;font-size:13.5px;
  color:var(--ink-2)}
.leg-seule b{color:var(--ink)}
.pastille{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;flex:none}
.pastille svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
/* le repere : 26 px, anneau blanc pour rester visible sur n'importe quelle tuile */
.poi-mk .mk{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;box-shadow:0 0 0 2px #fff,0 1px 4px rgba(14,26,20,.4);
  transition:transform .12s}
.poi-mk .mk svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.poi-mk:hover .mk,.poi-mk:focus .mk{transform:scale(1.18)}
.poi-mk:focus-visible{outline:3px solid #111;outline-offset:3px;border-radius:50%}
@media (prefers-reduced-motion: reduce){.poi-mk .mk{transition:none}}
/* grappes : la geometrie vient de la feuille du greffon, les couleurs d'ici.
   style.css etant charge avant elle, il faut un selecteur plus specifique. */
.leaflet-container .marker-cluster{background:rgba(31,122,77,.26)}
.leaflet-container .marker-cluster div{background:#1F7A4D;color:#fff;
  font:700 13px/30px var(--f);box-shadow:0 1px 4px rgba(14,26,20,.3)}
.leaflet-container .marker-cluster-medium{background:rgba(20,83,45,.26)}
.leaflet-container .marker-cluster-medium div{background:#14532D}
.leaflet-container .marker-cluster-large{background:rgba(11,58,32,.28)}
.leaflet-container .marker-cluster-large div{background:#0B3A20}
.leaflet-container .marker-cluster span{font-weight:700}
/* bouton de renvoi vers la carte, sur chaque ligne de liste */
.voir-carte{border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:4px 11px;font:600 12px var(--f);color:var(--ink-2);cursor:pointer;
  min-height:26px;align-self:start}
.voir-carte:hover{border-color:var(--green);color:var(--ink)}
.voir-carte:focus-visible{outline:2px solid var(--green-d);outline-offset:2px}
.poi-mk.camp .mk{width:34px;height:34px;background:var(--green-d);
  box-shadow:0 0 0 3px #fff,0 2px 8px rgba(14,26,20,.45)}
.poi-mk.camp .mk svg{width:19px;height:19px;stroke-width:2}
/* formulaire d'itineraire : un champ, un bouton, aucune dependance */
.itin{margin:20px 0 4px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-2)}
.itin label{display:block;font-weight:700;margin-bottom:8px}
.itin-l{display:flex;gap:9px;flex-wrap:wrap}
.itin input[type=text]{flex:1 1 260px;min-width:0;padding:11px 14px;font:inherit;
  border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink)}
.itin input[type=text]:focus{outline:2px solid var(--green);outline-offset:1px}
.itin .btn{flex:none}
.itin .mut{font-size:12.5px;margin:10px 0 0;max-width:62ch}
.itin.etape2{margin-top:10px;background:var(--card)}
.itin .t2{font-weight:700;margin:0 0 6px}
.itin.etape2 p{margin:0 0 12px;max-width:62ch}
.regions{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.chip-reg{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--card);border-radius:999px;padding:6px 13px;font-size:13.5px;
  cursor:pointer;user-select:none}
.chip-reg:hover{border-color:var(--green)}
.chip-reg input{accent-color:var(--green);margin:0}
.chip-reg:has(input:checked){border-color:var(--green);background:var(--green-l);
  font-weight:600}
.chip-reg .mut{font-size:12px}
.leaflet-popup-content .pop-poi{min-width:172px}
.pop-poi b{display:block;font-size:14px;margin-bottom:2px}
.pop-poi span{display:block;color:var(--ink-2);font-size:12.5px}
.pop-poi .pop-d{margin-bottom:7px}
.pop-poi a{display:block;font-size:12.5px;font-weight:600}
.pop-poi .pop-s{margin-top:4px;font-weight:500;color:var(--ink-2)}
figure.rue{margin:24px 0;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-2)}
figure.rue img{width:100%;aspect-ratio:16/8;object-fit:cover;display:block}
figure.rue figcaption{padding:12px 18px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.credit{font-size:12px;color:var(--ink-3);margin:6px 2px 0;text-align:right}
.credit a{color:var(--ink-3)}
.credit a:hover{color:var(--ink-2)}
.note{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:0 var(--r) var(--r) 0;padding:16px 20px;font-size:14.5px;margin:22px 0;color:var(--ink-2)}
.note b{color:var(--ink)}
.demo{background:var(--ink);color:#fff;text-align:center;padding:9px 16px;font-size:13.5px}
/* z-index:0 cree un contexte d'empilement autour de la carte : les couches
   internes de Leaflet (z-index 400 a 700) y restent enfermees, au lieu de
   passer par-dessus l'en-tete colle (60) et la barre de filtres (40). */
#map{position:relative;z-index:0;
  height:380px;border-radius:var(--r-l);border:1px solid var(--line);margin:18px 0;background:var(--bg-3) repeating-linear-gradient(45deg,rgba(255,255,255,.5) 0 12px,transparent 12px 24px)}
.fil{font-size:13px;color:var(--ink-3);padding-top:18px}
.fil a{color:var(--ink-3)}
.fil a:hover{color:var(--ink-2)}
details{border-bottom:1px solid var(--line);padding:16px 0}
summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;
  justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--green);font-weight:400;font-size:22px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:12px 0 0;color:var(--ink-2)}
.liens{columns:4;column-gap:24px;list-style:none;padding:0;font-size:15px}
.liens li{break-inside:avoid;padding:5px 0}
.liens a{color:var(--ink)}
.liens a:hover{color:var(--green)}
@media(max-width:900px){.liens{columns:2}}
@media(max-width:520px){.liens{columns:1}}
table.tb{width:100%;border-collapse:collapse;font-size:14.5px;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
table.tb th{text-align:left;background:var(--bg-2);padding:11px 14px;font-size:12px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
table.tb td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top}
ol li,ul.puces li{margin-bottom:.5em}
/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#B9C6BF;margin-top:0;padding:56px 0 32px;font-size:14.5px}
footer.site a{color:#fff}
footer.site a:hover{color:var(--amber)}
footer.site h4{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:#7C8C85;
  margin:0 0 12px;font-weight:600}
.fgrid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.fgrid ul{list-style:none;padding:0;margin:0}
.fgrid li{padding:3px 0}
.fbot{border-top:1px solid rgba(255,255,255,.13);margin-top:38px;padding-top:20px;
  color:#7C8C85;font-size:13px;max-width:90ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Le temps de trajet, sur les pages de depart : des boutons radio deguises en
   pastilles, dans la barre et non dans le panneau replie. */
.grp-dur{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.grp-dur::before{content:"≤";color:var(--ink-3);font-size:14px;margin-right:2px}
/* ---------- accueil : d'ou partez-vous ? ---------- */
.depart{margin:22px 0 12px;display:flex;flex-direction:column;gap:9px}
.depart>label{font:600 15px var(--f);color:var(--ink)}
.depart-in{display:flex;gap:8px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:7px 8px 7px 16px;
  box-shadow:var(--sh);max-width:620px}
.depart-in svg{flex:none;opacity:.55}
.depart-in input{flex:1;min-width:0;border:0;background:none;font:16px var(--f);
  color:inherit;outline:0;padding:10px 4px}
.depart-in .btn{white-space:nowrap;min-height:44px}
.depart-ex{margin:0;font-size:13.5px;color:var(--ink-2);display:flex;gap:7px;
  flex-wrap:wrap;align-items:center}
.depart-ex .chip{padding:5px 11px;font-size:13px}
.searchbar.mince{max-width:620px;box-shadow:none;border:1px solid var(--line)}
.searchbar.mince input{font-size:15px}
@media(max-width:620px){
  .depart-in{flex-wrap:wrap;border-radius:var(--r-l);padding:10px}
  .depart-in .btn{width:100%}
}
/* ---------- « au depart de » : le temps de porte a tente ----------
   Le chiffre qui decide, sur une page de depart, n'est pas la distance a
   l'arret : c'est le temps qu'on met vraiment. Il passe donc en tete de la
   vignette, avant les equipements. */
.tr-dep{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:10px 0 0;
  padding:8px 11px;border-radius:var(--r);background:var(--green-l);
  color:var(--green-d);font-size:12.8px;line-height:1.45}
.tr-dep svg{flex:none;opacity:.8}
.tr-dep b{font-weight:700}
/* ---------- fiche : la barre d'action, la ou est le pouce ----------
   Elle n'existe que sur telephone : au-dela de 900 px, la colonne laterale de
   la fiche porte deja les memes actions, et une barre collee en bas d'un grand
   ecran ne fait que voler de la place. */
.barre-action{position:sticky;bottom:0;z-index:50;display:flex;gap:9px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line)}
.barre-action .btn{flex:1;justify-content:center;min-height:48px}
.barre-action .btn.sec{flex:0 0 auto}
@media(min-width:900px){.barre-action{display:none}}
/* ---------- explorateur : la carte d'abord ----------
   La feuille de resultats ne se traine pas au doigt : elle remonte avec le
   defilement de la page. Une marge negative la fait demarrer a mi-hauteur, la
   carte reste collee derriere. Aucun gestionnaire tactile maison, donc le meme
   comportement a la molette, au clavier et au lecteur d'ecran. */
.expl{position:relative}
.outils{position:sticky;top:calc(var(--h-head,65px) + 10px);z-index:7;height:0;
  display:flex;gap:8px;padding:0 12px;align-items:flex-start}
.outils .ch-q{flex:1 1 auto;min-width:0;background:var(--card);box-shadow:var(--sh)}
.outils .ch-f{background:var(--card);box-shadow:var(--sh);white-space:nowrap}
.expl-carte{position:sticky;top:var(--h-head,65px);height:calc(100dvh - var(--h-head,65px));
  z-index:0}
.expl #map{height:100%;margin:0;border:0;border-radius:0}
.expl-zone{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(64dvh + 10px);
  z-index:5;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:11px 18px;
  font:600 14px var(--f);box-shadow:var(--sh-h);cursor:pointer}
.feuille{position:relative;z-index:6;margin-top:-62dvh;background:var(--card);
  border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 -10px 34px rgba(18,33,31,.18);
  min-height:100dvh;padding:0 14px 70px}
.poignee{display:block;width:100%;background:none;border:0;padding:12px 0 6px;cursor:pointer}
.poignee>span:first-child{display:block;width:44px;height:5px;border-radius:99px;
  background:var(--line);margin:0 auto}
.feuille-tete h1{font:700 20px/1.15 var(--f-titre);letter-spacing:-.02em;margin:2px 0 5px}
.feuille-tete .lede{font-size:13.5px;line-height:1.5;margin:0 0 10px;color:var(--ink-2)}
.rapides{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
.rapides::-webkit-scrollbar{display:none}
.rapides .qf,.rapides .ch-t{flex:none}
.feuille-etat{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:2px 0 12px;
  border-bottom:1px solid var(--line);margin-bottom:14px}
.zone-active{background:var(--green-l);color:var(--green-d);border:0;border-radius:999px;
  padding:7px 12px;font:600 13px var(--f);cursor:pointer}
.expl .grid{margin:0}
.vide-liste,.plus-liste{grid-column:1/-1}
/* ---------- la feuille des filtres ---------- */
body.fige{overflow:hidden}
.modale[hidden]{display:none}
.modale{position:fixed;inset:0;z-index:90;background:rgba(9,20,18,.45);
  display:flex;align-items:flex-end;justify-content:center}
.modale-in{background:var(--card);width:100%;max-height:88dvh;overflow:auto;
  border-radius:var(--r-xl) var(--r-xl) 0 0;padding:0 18px}
.modale-tete{position:sticky;top:0;z-index:2;background:var(--card);display:flex;
  align-items:center;justify-content:space-between;padding:16px 0 12px;
  border-bottom:1px solid var(--line);font:600 17px var(--f-titre)}
.modale-x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);cursor:pointer;font-size:15px;color:var(--ink-2)}
.modale-pied{position:sticky;bottom:0;background:var(--card);padding:12px 0 16px;
  border-top:1px solid var(--line)}
.modale-pied .btn{width:100%;justify-content:center}
.modale .opt{display:flex;align-items:center;gap:9px}
.modale .opt .n{margin-left:auto;color:var(--ink-3);font-size:12.5px;
  font-variant-numeric:tabular-nums}
.modale .opt.vide{opacity:.45}
@media(min-width:900px){
  /* Deux colonnes : la liste a gauche, la carte collee a droite. Le format
     paysage n'a aucune raison d'empiler ce que l'oeil peut comparer. */
  .expl{display:grid;grid-template-columns:minmax(360px,44%) 1fr;gap:26px;
    max-width:1500px;margin:0 auto;padding:16px 22px 0;align-items:start}
  .outils{position:static;height:auto;padding:0;grid-column:1;grid-row:1}
  .expl-carte{grid-column:2;grid-row:1 / span 2;position:sticky;
    top:calc(var(--h-head,65px) + 16px);height:calc(100dvh - var(--h-head,65px) - 32px);
    border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
  .feuille{grid-column:1;grid-row:2;position:static;margin:0;background:none;
    box-shadow:none;border-radius:0;min-height:0;padding:14px 0 40px}
  .poignee{display:none}
  .expl-zone{bottom:18px}
  .rapides{flex-wrap:wrap;overflow:visible}
  .modale{align-items:center}
  .modale-in{max-width:760px;border-radius:var(--r-l);max-height:82dvh}
}

/* ---------- l'onglet lateral des filtres ---------- */
/* Il est pose EN RETRAIT du bord, pas colle contre lui : les vingt premiers
   pixels appartiennent au navigateur, qui y lit son geste « page precedente ».
   Il s'ouvre au clic seul — on ne lui apprend jamais un balayage que le
   navigateur intercepterait une fois sur deux. */
.onglet-f{position:fixed;right:14px;top:58%;transform:translateY(-50%);z-index:80;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--green);color:#fff;border:0;border-radius:999px;
  padding:14px 9px;min-width:38px;min-height:104px;cursor:pointer;
  font:600 12.5px/1.1 var(--f-titre);letter-spacing:.04em;
  box-shadow:0 2px 6px rgba(14,26,20,.16),0 14px 30px -12px rgba(14,26,20,.5);
  transition:transform .18s ease,opacity .18s ease}
.onglet-f:hover{background:var(--green-d)}
.onglet-lib{writing-mode:vertical-rl;text-orientation:mixed}
.onglet-n{background:#fff;color:var(--green-d);border-radius:999px;
  min-width:20px;padding:1px 5px;font-size:11.5px;font-variant-numeric:tabular-nums}
.onglet-n[hidden]{display:none}
/* WCAG 2.4.11 : un element fixe ne doit pas recouvrir ce qui recoit le focus.
   L'onglet s'ecarte le temps qu'un element sous lui soit au clavier. */
.onglet-f.ecarte{transform:translate(120%,-50%);opacity:0;pointer-events:none}
.onglet-f[hidden]{display:none}
@media(max-width:520px){.onglet-f{right:10px;top:auto;bottom:104px;transform:none}
  .onglet-f.ecarte{transform:translateX(120%)}}
@media print{.onglet-f{display:none}}


/* ---------- lot 7 : la bande de liens ---------- */
/* Ce qui partait avec les paragraphes du lot 6, ce n'etait pas la prose :
   c'etaient les liens qu'ils contenaient. Ils reviennent seuls, en jetons. */
.bl{margin:34px 0 8px;display:flex;flex-direction:column;gap:14px}
.bl h2{font:700 15px var(--f-titre);margin:0 0 8px;color:var(--ink-2)}
.bl-l{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.bl-l a{display:inline-flex;align-items:center;gap:6px;min-height:36px;
  padding:7px 13px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink);text-decoration:none;font-size:14px}
.bl-l a:hover{border-color:var(--green);color:var(--green-d)}
.bl-l .mut{color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------- lot 6 : la barre reduite, le panneau en accordeons ---------- */
.barre-in{padding:9px 0 10px}
.rangee{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
.rangee .ch-q{flex:1 1 auto;min-width:0}
.rangee .ch-f{flex:0 0 auto;min-height:44px}
.etat-liste{display:flex;align-items:center;gap:12px;padding:8px 0 0;min-height:22px}
.etat-liste .cnt{margin-left:0}
.etat-liste .raz{margin-left:auto}

/* Le bouton Filtres : pictogramme, mot, pastille. */
.ch-f{gap:7px;padding-left:13px;padding-right:13px}
.ch-f svg{flex:none}

/* Un critere = un accordeon replie. Ouverts d'un bloc, les douze groupes
   demandaient trois ecrans de defilement avant d'atteindre le bouton. */
/* Les fiches ont leurs propres <details> — la foire aux questions — et une
   regle globale leur ajoute un « + ». Nos titres de critere portent deja leur
   chevron : deux signes pour la meme chose, c'est un de trop. */
.grp-d>summary::after,.grp-d[open]>summary::after{content:none}
.grp-d{border-bottom:1px solid var(--line);padding:0}
.grp-d:last-of-type{border-bottom:0}
.grp-d>summary{display:flex;align-items:center;gap:11px;padding:13px 2px;
  cursor:pointer;list-style:none;min-height:52px;
  font:600 15px/1.25 var(--f-titre);color:var(--ink)}
.grp-d>summary::-webkit-details-marker{display:none}
.grp-d>summary:hover{color:var(--green-d)}
.grp-d>summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px;border-radius:8px}
.grp-d .gi{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:var(--green-l);color:var(--green-d);flex:none}
.grp-d .gt{flex:1 1 auto;min-width:0}
.grp-d .chev{flex:none;color:var(--ink-3);transition:transform .18s ease}
.grp-d[open] .chev{transform:rotate(180deg)}
.grp-d[open]>summary{color:var(--green-d)}
.grp-n{flex:none;background:var(--green);color:#fff;border-radius:999px;
  min-width:21px;padding:1px 6px;font:600 12px var(--f);text-align:center;
  font-variant-numeric:tabular-nums}
.grp-n[hidden]{display:none}
.grp-d .opts{padding:0 0 14px}
.grp-d .hint{padding-bottom:12px}
@media(prefers-reduced-motion:reduce){.grp-d .chev{transition:none}}

/* La gare de depart, dans le panneau. */
.dep-p{display:flex;flex-direction:column;gap:9px;padding:0 0 14px}
.dep-p input{width:100%;font:inherit;font-size:15px;padding:12px 13px;min-height:46px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg-2);color:var(--ink)}
.dep-p input:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.dep-p .btn{width:100%;justify-content:center;min-height:46px}
.dep-p .mut{font-size:13px;color:var(--ink-3);margin:0}

/* Remonter en haut : present partout, il n'apparait qu'une fois la page
   defilee — un bouton qui ne sert a rien occupe quand meme l'ecran. */
.haut{position:fixed;right:14px;bottom:24px;z-index:79;width:46px;height:46px;
  border-radius:999px;background:var(--card);border:1px solid var(--line);
  color:var(--ink-2);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(14,26,20,.10),0 14px 30px -14px rgba(14,26,20,.42)}
.haut:hover{color:var(--ink);border-color:var(--ink-3)}
.haut[hidden]{display:none}
/* Sur telephone, l'onglet des filtres occupe le bas du bord droit. Empiler les
   deux au meme endroit les rendait inatteignables l'un et l'autre : le
   remonter passe a gauche, ou rien ne flotte. Les deux restent dans la zone
   du pouce, et aucun ne recouvre la barre d'action des fiches. */
@media(max-width:520px){.haut{left:10px;right:auto;bottom:104px}}
@media print{.haut{display:none}}

/* L'onglet : pictogramme au-dessus du mot, l'ensemble centre. */
.onglet-f{justify-content:center;padding:13px 8px;gap:7px}
.onglet-f .oi{flex:none;display:grid;place-items:center}
.onglet-lib{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.05em}

/* ---------- les filtres actifs, en jetons ---------- */
/* Sans ce rappel hors du panneau, on rouvre le panneau juste pour savoir ce
   qui est coche — et l'on finit par croire qu'aucun camping ne convient. */
.jetons{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.jetons:empty{display:none}
.barre .jetons{padding:0 0 8px}
.modale .jetons{padding:12px 0 4px}
.jeton{display:inline-flex;align-items:center;gap:2px;background:var(--green-l);
  color:var(--green-d);border:1px solid rgba(15,110,122,.32);border-radius:999px;
  padding:3px 3px 3px 11px;font-size:13px;line-height:1.3;max-width:100%}
.jeton>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jeton button{width:26px;height:26px;min-width:26px;border:0;border-radius:999px;
  background:transparent;color:inherit;cursor:pointer;font-size:15px;line-height:1;
  display:grid;place-items:center}
.jeton button:hover{background:rgba(15,110,122,.16)}

/* Le pied de la feuille porte deux actions : effacer, et valider en annoncant
   le nombre. On coche dans la feuille, on applique en la fermant : le
   rafraichissement a chaque case, sur telephone, fait sauter la liste sous le
   doigt qui coche encore. */
.modale-pied{display:flex;gap:10px;align-items:center}
.modale-pied .btn{width:auto;flex:1 1 auto;justify-content:center}
.modale-pied .btn.sec{flex:0 0 auto}
.modale .opt .lib{flex:1 1 auto}
/* Une page sans liste n'a rien a compter : mieux vaut pas de nombre du tout
   qu'un nombre faux. Les nombres ecrits par le serveur, eux, restent vrais. */
.modale.sans-compte .opt .n:not([data-fixe]){display:none}
/* Deux nombres cote a cote qui ne comptent pas la meme chose, c'est un piege :
   « Piscine 11 » parle de cette page, « Bretagne 441 » parle du site entier.
   La ligne le dit, des que les deux bases different. */
.grp-d .hint{margin:2px 0 0;font-size:12.5px;color:var(--ink-3);flex-basis:100%}
.grp-d .hint[hidden]{display:none}