*,*::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. */
/* L'en-tete de l'accueil poussait la carte a 420 px du haut de page. Il dit
   la meme chose en deux fois moins de haut : titre plus court, compteurs sur
   une ligne, marges resserrees. */
.hero.acc{padding:18px 0 14px}
.hero.acc h1{font-size:clamp(28px,3.4vw,40px);max-width:14ch;margin-bottom:6px}
.hero.acc .lede{margin:0;font-size:15px;max-width:74ch}
.hero.acc .stats{margin:12px 0 0;gap:8px 26px}
.hero.acc .stat{display:flex;align-items:baseline;gap:7px}
.hero.acc .stat b{display:inline;font-size:20px}
.hero.acc .stat span{font-size:13px}
@media(max-width:620px){
  .hero.acc{padding:14px 0 10px}
  .hero.acc h1{font-size:26px}
  .hero.acc .lede{font-size:14px}
  .hero.acc .stats{gap:6px 18px}
}
.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)}
/* La carte a quitte l'en-tete pour rejoindre l'explorateur : le texte
   occupe desormais toute la largeur, avec une mesure lisible. */
.acc-in{grid-template-columns:1fr}
.acc-t{max-width:78ch}
@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}
/* Un bloc borde, arrondi, sur fond blanc : c'est la forme d'un element
   cliquable, et aucun de ceux-ci ne l'est. On garde un filet en tete de
   colonne — assez pour separer les modes, pas assez pour promettre un clic. */
.mode{border:0;border-top:2px solid var(--line);border-radius:0;
  padding:13px 0 4px;background:none}
.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)}
/* L'alerte, elle, doit se voir : le filet passe a l'ambre et s'epaissit. */
.mode.alerte{border-top-color:var(--amber);border-top-width:3px;background:none}
.mode.alerte h3{color:#8A6100}
.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}
/* Le bouton d'itineraire d'un lieu. « Itineraire et horaires » ecrit en
   toutes lettres apparaissait jusqu'a vingt-cinq fois sur une fiche : le
   pictogramme suffit, le texte reste pour les lecteurs d'ecran et au survol.
   Aligne a droite, la ou l'oeil termine sa lecture de la carte. */
/* `button.lc-b` et non `.lc-b` : ces boutons portent aussi la classe
   `.pop-b`, declaree plus bas avec `display:block;width:100%`. A specificite
   egale, c'est la derniere qui gagne — le bouton restait large et rectangulaire.
   Un selecteur de type suffit a trancher, sans `!important`. */
button.lc-b{margin-top:auto;align-self:flex-end;display:grid;place-items:center;
  width:38px;height:38px;background:var(--green-l);color:var(--green-d);
  border:0;border-radius:999px;padding:0;cursor:pointer;flex:none;
  transition:background .12s,color .12s}
button.lc-b:hover,button.lc-b:focus-visible{background:var(--green);color:#fff}
button.lc-b svg{width:17px;height:17px}
/* Le texte reste dans le document, hors de l'ecran : un lecteur d'ecran
   l'annonce, l'oeil ne le voit pas. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 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. */
/* ---------- la bascule entre les deux cartes ---------- */
/* Les deux vues occupent exactement la meme boite : basculer ne doit rien
   deplacer autour. Le bouton flotte au-dessus, en haut a gauche de la carte,
   la ou il ne recouvre ni les commandes de zoom ni l'attribution. */
/* Sur mobile, `.outils` flotte au-dessus de la carte : le champ de recherche
   recouvrait la bascule et la rendait inatteignable — mesure au clic, pas a
   l'oeil. Elle passe donc SOUS la barre. Au-dela de 900 px les outils sont
   dans la colonne de gauche, la carte est libre, et la bascule remonte. */
.bascule{position:absolute;top:66px;left:12px;z-index:6;display:inline-flex;
  gap:3px;padding:3px;background:rgba(255,255,255,.92);border-radius:999px;
  box-shadow:var(--sh);backdrop-filter:blur(6px)}
.bascule button{border:0;background:none;color:var(--ink-2);border-radius:999px;
  padding:7px 13px;font:600 13px var(--f);cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px}
.bascule button svg{width:15px;height:15px;flex:none}
.bascule button.on{background:var(--green);color:#fff}
.bascule button:not(.on):hover{color:var(--ink)}
/* La carte des regions doit remplir sa boite comme le fait la carte
   interactive : meme cadre, meme centre. Le panneau qui l'enveloppe perd sa
   bordure et son ombre — il est deja dans un cadre — et le SVG se contente de
   la place disponible, sans deborder ni se tasser dans un coin. */
#carte-reg{height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--bg-2);padding:60px 14px 18px;overflow:hidden}
#carte-reg .pan-fr{background:none;border:0;box-shadow:none;padding:0;
  width:100%;height:100%;justify-content:center}
#carte-reg svg{width:100%;height:auto;max-height:100%;max-width:100%;display:block}
#carte-reg[hidden],#map[hidden]{display:none}
@media(min-width:900px){.bascule{top:10px;left:10px}}

.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-h{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}
  /* Elle etait statique : elle partait avec le defilement et il fallait
     remonter toute la page pour filtrer. Collante sous l'en-tete du site,
     avec un fond opaque — sans lui, les vignettes defilent au travers. */
  .outils{position:sticky;top:calc(var(--h-head,65px) + 12px);height:auto;
    padding:10px 0;grid-column:1;grid-row:1;background:var(--bg);
    box-shadow:0 10px 12px -10px var(--bg)}
  .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. */
/* L'accueil a sa propre barre de recherche et de filtres, collante en haut :
   l'onglet lateral y faisait doublon, et son ancrage a droite de la carte le
   posait sur la carte elle-meme. Les pages de liste, qui n'ont pas de barre,
   le gardent — c'est leur seul acces aux filtres une fois defilees. */
body.accueil .onglet-f{display:none}
.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 9 : les familles de lieux ---------- */
.h-fam{display:flex;align-items:center;gap:9px;margin:26px 0 10px}
.h-fam:first-child{margin-top:0}
.h-fam .pastille{display:grid;place-items:center;width:30px;height:30px;
  border-radius:9px;background:var(--green-l);color:var(--green-d);flex:none}
.h-fam h3{margin:0;font-size:17px}
.h-fam .mut{font-weight:400;color:var(--ink-3);font-size:14px}

/* ---------- lot 8 : les sites d'exception ---------- */
/* L'or, et lui seul, pour ce qui est officiellement remarquable. Le vert du
   site dit « accessible » ; il ne doit pas dire aussi « exceptionnel », sans
   quoi les deux mots finissent par ne plus rien dire. */
/* Le bandeau du monument, au bas de la vignette. Le degrade est la pour la
   lisibilite : une photo aerienne peut etre claire ou sombre, le texte doit
   tenir sur les deux. Il ne recouvre que le tiers bas de l'image. */
.ph .exc{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
  gap:7px;padding:22px 11px 9px;background:linear-gradient(180deg,
  rgba(15,23,28,0) 0%,rgba(15,23,28,.55) 45%,rgba(15,23,28,.82) 100%);
  color:#fff;border:0;border-radius:0;font:600 12.5px var(--f);pointer-events:none}
/* `.card .ph svg` etire l'illustration de repli a 100 % de la vignette. Sans
   cette regle, le pictogramme du bandeau heritait de la meme taille et
   occupait toute l'image. */
.ph .exc svg{width:15px;height:15px;flex:none;opacity:.9}
.ph .exc .exc-n{flex:1;min-width:0;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.ph .exc .d{color:#F0E2BC;font-weight:600;flex:none;
  text-shadow:0 1px 2px rgba(0,0,0,.35)}

.exc{display:inline-flex;align-items:center;gap:6px;background:#FBF3DC;
  color:#7A5B12;border:1px solid #E4CE8E;border-radius:999px;
  padding:3px 10px 3px 8px;font:600 12.5px var(--f);line-height:1.35;max-width:100%}
.exc svg{flex:none}
.exc .d{font-weight:400;color:#8E7333;font-variant-numeric:tabular-nums}
.exc-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .exc{margin:2px 0 0}

/* La section des sites d'exception, en tete de « ce qu'il y a autour ». */
.h-exc{display:flex;align-items:center;gap:9px;margin:0 0 10px}
.h-exc .pastille{display:grid;place-items:center;width:30px;height:30px;
  border-radius:9px;background:#FBF3DC;color:#7A5B12;flex:none}
.lc.exception{border-color:#E4CE8E;background:linear-gradient(180deg,#FEFBF3,var(--card))}
.lc.exception .lc-ic{background:#FBF3DC;color:#7A5B12}
/* .lc-lab a disparu : il repetait le libelle deja porte par .lc-y. */
.lc.exception{border-color:#E8D9A8}
/* Une carte de monument n'a pas de description : `margin-top:auto` poussait
   son bouton tout en bas et creusait deux lignes de vide sous le nom. */
.lc.exception button.lc-b{margin-top:2px}
/* Une position approximative ne doit pas annoncer un temps de marche faux. */
.lc-d.approx{color:var(--ink-3);font-weight:500}
.lc-d.approx i{font-style:normal}

/* ---------- 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}