:root{
  --bg:#f6f7f9; --surface:#fff; --ink:#0f172a; --muted:#64748b; --line:#e4e8ee;
  --accent:#c2410c; --accent-soft:#fff1e9; --ring:rgba(194,65,12,.28);
  --ok:#0d7d5a; --ok-soft:#e6f5ef; --err:#dc2626;
  --safe-b:env(safe-area-inset-bottom,0px);
  --bar:56px; --search:60px; --chips:48px; --tabs:44px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0b1120;--surface:#131c2e;--ink:#e8eef7;--muted:#93a3b8;--line:#243247;
        --accent:#fb923c;--accent-soft:#3a1f10;--ring:rgba(251,146,60,.3);
        --ok:#34d399;--ok-soft:#123328;--err:#f87171;}
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--ink);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;overscroll-behavior-y:none;
}
button,input{font:inherit;color:inherit}
a{color:var(--accent)}

/* ---------- barres fixes ---------- */
.app-bar,.search-row,.chips,.tabs{position:fixed;left:0;right:0;z-index:600;background:var(--bg)}
.app-bar{top:0;height:var(--bar);display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand-mark{width:26px;height:26px;color:var(--accent);flex:none}
.app-bar h1{font-size:16.5px;font-weight:700;margin:0;letter-spacing:-.01em;white-space:nowrap}
.icon-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:transparent;font-weight:700;color:var(--muted);cursor:pointer}

.search-row{top:var(--bar);height:var(--search);display:flex;gap:8px;align-items:center;padding:0 12px}
.search-field{flex:1;display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;min-width:0}
.search-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.search-field svg{width:18px;height:18px;color:var(--muted);flex:none}
.search-field input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:16px}
.clear-btn{border:0;background:none;color:var(--muted);font-size:22px;line-height:1;padding:0 2px;cursor:pointer}
.geo-btn{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;cursor:pointer}
.geo-btn svg{width:20px;height:20px}
.geo-btn.is-on{background:var(--accent);border-color:var(--accent);color:#fff}

.chips{top:calc(var(--bar) + var(--search));height:var(--chips);display:flex;gap:7px;
  align-items:center;padding:0 12px 6px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
/* La barre des puces est fixed avec z-index 600, comme celle des onglets qui la
   suit dans le DOM : sans ce coup de pouce, un tiroir ouvert passe dessous. */
.chips.chips-open{z-index:700}
.chip{flex:none;white-space:nowrap;padding:7px 13px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:13.5px}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
/* Le sélecteur de département vit dans la même barre que les puces, mais ce n'est
   pas une puce : il ne se bascule pas, il se choisit. */
/* La largeur suit le contenu : l'attribut size est posé par afficherDep(),
   « 44 · Loire-Atlantique » ne doit pas être coupé. */
.chip-select{flex:none;width:auto;max-width:240px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:13.5px;color-scheme:light dark;outline:none;text-overflow:ellipsis}
.chip-select::placeholder{color:var(--muted);opacity:1}
.chip-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.chip-select.is-on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.chip-select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Tiroirs de filtres. La barre des puces defile horizontalement, donc elle
   rogne : le panneau est en position:fixed, place par placerPanneau(). */
.drop{flex:none;position:relative}
.drop>summary{list-style:none;display:inline-flex;align-items:center;gap:2px}
.drop>summary::-webkit-details-marker{display:none}
.drop>summary::after{content:"";width:0;height:0;margin-left:5px;
  border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.drop[open]>summary::after{transform:translateY(-2px) rotate(180deg)}
.drop-panel{position:fixed;z-index:60;min-width:196px;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.28)}
.drop-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  font-size:14px;color:var(--ink);cursor:pointer}
.drop-item:hover{background:var(--accent-soft)}
.drop-item input{accent-color:var(--accent);width:16px;height:16px;flex:none;margin:0}

.tabs{top:calc(var(--bar) + var(--search) + var(--chips));height:var(--tabs);
  display:flex;align-items:center;gap:4px;padding:0 12px;border-bottom:1px solid var(--line)}
.tab{border:0;background:none;padding:8px 12px;border-radius:8px;color:var(--muted);
  font-size:14px;font-weight:600;cursor:pointer}
.tab.is-active{color:var(--accent);background:var(--accent-soft)}
.result-count{margin-left:auto;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}

main{padding-top:calc(var(--bar) + var(--search) + var(--chips) + var(--tabs))}
.view{display:none}
.view.is-active{display:block}

/* ---------- liste ---------- */
.results{list-style:none;margin:0;padding:8px 12px calc(24px + var(--safe-b));display:grid;gap:8px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 13px;cursor:pointer}
.card.has-photo{display:flex;gap:11px;align-items:flex-start;padding-right:11px}
.card-main{flex:1;min-width:0}
.thumb{flex:none;width:74px;height:74px;object-fit:cover;border-radius:10px;background:var(--bg)}
.rating{display:flex;align-items:center;gap:6px;margin:5px 0 0;font-size:12px;color:var(--muted)}
.stars{color:#f59e0b;letter-spacing:1px;font-size:12.5px}
.rating.big{margin:0 0 14px;font-size:13.5px}
.rating.big .stars{font-size:16px}
.card:active{transform:scale(.995)}
.card-top{display:flex;gap:10px;align-items:baseline}
.card h2{margin:0;font-size:15px;font-weight:650;letter-spacing:-.01em;flex:1;min-width:0}
.dist{flex:none;font-size:12.5px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.card .loc{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.tag{font-size:11.5px;padding:3px 8px;border-radius:6px;background:var(--bg);
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tag.sol{font-weight:650;color:var(--ink)}
.tag.sol-synthetique{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.tag.free{background:var(--ok-soft);border-color:transparent;color:var(--ok);font-weight:650}
.tag.maybe{border-style:dashed}
.more-btn{display:block;margin:0 auto 28px;padding:10px 20px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:14px}
.empty{text-align:center;color:var(--muted);padding:48px 24px;font-size:14px}
.muted{color:var(--muted)}

/* ---------- carte ---------- */
#map{height:calc(100dvh - var(--bar) - var(--search) - var(--chips) - var(--tabs));width:100%}
.leaflet-container{background:var(--bg);font:inherit}
.pin{border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.cluster{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-weight:700;font-size:12.5px;
  border:2.5px solid var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.8)}

/* ---------- loader ---------- */
.loader{position:fixed;left:50%;bottom:calc(22px + var(--safe-b));transform:translateX(-50%);
  z-index:900;background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:999px;
  font-size:13px;display:flex;align-items:center;gap:9px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.loader[hidden]{display:none}
.spinner{width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- fiche détail ---------- */
.sheet{position:fixed;inset:0;z-index:1000}
.sheet[hidden]{display:none}
.sheet-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.5)}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:88dvh;overflow-y:auto;
  background:var(--surface);border-radius:18px 18px 0 0;padding:0 16px calc(28px + var(--safe-b));
  animation:up .22s cubic-bezier(.2,.8,.3,1)}
@keyframes up{from{transform:translateY(18px);opacity:.6}}
.sheet-grab{position:sticky;top:0;display:block;width:100%;height:26px;border:0;background:var(--surface);
  cursor:pointer;z-index:2}
.sheet-grab::before{content:"";display:block;width:40px;height:4px;border-radius:2px;
  background:var(--line);margin:9px auto 0}
.sheet h2{margin:2px 0 2px;font-size:20px;letter-spacing:-.02em}
.sheet .loc{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;border-radius:11px;
  border:1px solid var(--line);background:var(--bg);text-decoration:none;color:var(--ink);
  font-size:14px;font-weight:600;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.sec{margin:16px 0 6px;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.kv{background:var(--bg);border-radius:10px;padding:9px 11px}
.kv dt{font-size:11.5px;color:var(--muted);margin:0}
.kv dd{margin:2px 0 0;font-size:14px;font-weight:600}
.eq{display:flex;flex-wrap:wrap;gap:6px}
.eq span{font-size:13px;padding:6px 11px;border-radius:8px;background:var(--accent-soft);
  color:var(--accent);font-weight:600}
.eq span.maybe{background:var(--bg);color:var(--muted);border:1px dashed var(--line)}
.note{background:var(--bg);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;
  padding:10px 12px;font-size:13.5px;margin:8px 0}
.src{font-size:11.5px;color:var(--muted);margin-top:18px;line-height:1.6}
.src a{color:var(--muted)}

/* ---------- mini-carte dans la fiche ---------- */
.minimap{margin:-6px 0 16px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.minimap-canvas{height:220px;width:100%}
.minimap-canvas .leaflet-control-zoom{margin:8px}
.minimap-full{display:block;width:100%;padding:10px;border:0;border-top:1px solid var(--line);
  background:var(--bg);color:var(--accent);font-size:13.5px;font-weight:600;cursor:pointer}
.pin-big{width:100%;height:100%;border-width:3px}

/* ---------- galerie photo ---------- */
.gallery{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 -16px 16px;padding:0 16px 4px;scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery figure{flex:none;width:min(84%,420px);margin:0;scroll-snap-align:center}
.gallery img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;
  background:var(--bg);cursor:zoom-in;display:block}
.gallery figcaption{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4}
.gallery figcaption span{opacity:.7}

/* Vue aérienne : proposée quand le site n'a aucune photo de terrain. Le liseré
   et la légende la distinguent d'une photo contribuée. */
.aerial{margin:0 0 4px}
.aerial img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;
  background:var(--line);border:1px solid var(--line)}
.aerial figcaption{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4}
.aerial figcaption span{display:block;opacity:.7}
/* À la souris, un défilement horizontal sans barre visible passe pour un bug :
   la molette ne le déplace pas. Sur grand écran on abandonne donc le carrousel
   pour une grille, et les photos y gardent leur cadrage d'origine. */
@media (min-width:760px){
  .gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow:visible;
    margin:0 0 16px;padding:0;scroll-snap-type:none}
  .gallery figure{width:auto;scroll-snap-align:none}
  .gallery img{aspect-ratio:auto;height:auto}
}
/* Fenêtre étroite mais souris présente : au moins une barre pour voir qu'on peut défiler. */
@media (hover:hover) and (max-width:759px){
  .gallery{scrollbar-width:thin}
  .gallery::-webkit-scrollbar{display:block;height:6px}
  .gallery::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
}

/* ---------- formulaire de contribution ---------- */
.contrib .retour{border:0;background:none;color:var(--accent);font-size:13.5px;
  padding:0;margin:0 0 6px;cursor:pointer}
.contrib .intro{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.champ{display:block;margin:12px 0}
.champ>span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.champ input,.champ select,.champ textarea{width:100%;padding:10px 12px;border-radius:11px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:15px;
  font-family:inherit;color-scheme:light dark}
.champ textarea{resize:vertical;min-height:118px;line-height:1.5}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px var(--ring);outline:none}
.erreur{color:var(--err);font-size:13px;margin:10px 0 0}
.aides{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:center;margin-top:6px}

/* ---------- avis ---------- */
.avis{background:var(--bg);border-radius:12px;padding:11px 13px;margin-bottom:8px}
.avis header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.avis header strong{font-size:13.5px}
.avis header time{font-size:11.5px;color:var(--muted);margin-left:auto}
.avis p{margin:0;font-size:13.5px;line-height:1.55}
.vide{font-size:13.5px;color:var(--muted);background:var(--bg);border-radius:12px;
  padding:14px;margin:0;text-align:center}

/* ---------- photo plein écran ---------- */
.viewer{position:fixed;inset:0;z-index:1200;background:rgba(2,6,23,.94);
  display:grid;place-items:center;padding:16px;cursor:zoom-out}
.viewer img{max-width:100%;max-height:100%;border-radius:8px}
.viewer button{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:14px;
  width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.15);
  color:#fff;font-size:24px;line-height:1;cursor:pointer}

/* ---------- à propos ---------- */
.about h3{margin:18px 0 6px;font-size:15px}
.about p,.about li{font-size:13.5px;color:var(--muted);line-height:1.6}
.about ul{padding-left:18px;margin:6px 0}

@media (min-width:760px){
  .results{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));max-width:1100px;margin:0 auto}
  .sheet-panel{left:50%;transform:translateX(-50%);max-width:560px;border-radius:18px;
    bottom:auto;top:50%;margin-top:-44dvh;max-height:88dvh}
}

/* ---------- bascule de langue & plan du site ---------- */
.bar-actions{display:flex;align-items:center;gap:8px;flex:none}
.lang-btn{display:grid;place-items:center;text-decoration:none;font-size:11.5px;letter-spacing:.04em}
.site-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;
  padding:4px 24px calc(30px + var(--safe-b));font-size:12.5px}
.site-links a{color:var(--muted)}

/* ---------- vitrine des contributions ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.vitrine{padding:14px 12px 4px}
.vitrine h2{margin:18px 0 2px;font-size:15px;letter-spacing:-.01em}
.vitrine h2:first-child{margin-top:0}
.vit-intro{margin:0 0 10px;color:var(--muted);font-size:13px}

.vit-grid{display:grid;gap:8px;grid-template-columns:1fr}

/* Sur mobile la carte est couchee : la vitrine ne doit pas repousser les
   resultats sous la ligne de flottaison. Trois vignettes a gauche tiennent
   dans la hauteur qu'une seule photo pleine largeur occuperait. */
.vit-card{display:flex;gap:11px;align-items:center;overflow:hidden;text-decoration:none;
  color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.vit-card img{display:block;flex:none;width:104px;height:84px;object-fit:cover;background:var(--line)}
.vit-body{display:block;min-width:0;padding:8px 11px 8px 0}

@media (min-width:560px){
  .vit-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .vit-card{display:block}
  .vit-card img{width:100%;height:126px}
  .vit-body{padding:9px 11px 11px}
}
.vit-body strong{display:block;font-size:14px;line-height:1.25;letter-spacing:-.01em}
.vit-body .loc{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.vit-body .meta{display:block;color:var(--accent);font-size:12px;margin-top:5px;font-weight:600}

.vit-tops{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.vit-top{display:flex;align-items:center;gap:11px;padding:9px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px}
.vit-top .rang{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:12.5px}
.vit-top .qui{min-width:0}
.vit-top strong{display:block;font-size:14px}
.vit-top .meta{display:block;color:var(--muted);font-size:12.5px}

.vit-plus{margin:8px 0 0;font-size:13px}
.vit-plus a{text-decoration:none;font-weight:600}

.vit-cta{margin:16px 0 4px;padding:14px;border-radius:14px;
  background:var(--accent-soft);border:1px solid var(--ring)}
.vit-cta strong{display:block;font-size:15px;letter-spacing:-.01em}
.vit-cta p{margin:5px 0 11px;font-size:13.5px;color:var(--ink);opacity:.85}
.vit-cta .btn{width:100%}
.vit-cta .src{display:block;margin-top:8px;color:var(--muted);font-size:12px;text-align:center}

/* Contenu statique de l'accueil (index.html). L'application etant peinte par
   JavaScript, ce bloc est le seul texte qu'un moteur ou un agent lit dans le
   HTML servi. Il vit sous le plan du site, donc sous les resultats : il
   informe qui descend, sans jamais s'interposer entre la recherche et sa
   reponse. */
.seo{max-width:44rem;margin:0 auto;padding:8px 24px calc(40px + var(--safe-b));
  color:var(--muted);font-size:13.5px;line-height:1.65}
.seo h2{margin:0 0 8px;font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.seo h3{margin:20px 0 4px;font-size:13.5px;color:var(--ink)}
.seo p{margin:0}
.seo strong{color:var(--ink)}
.seo-liens{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.seo-liens a{color:var(--muted)}