:root {
  --bg:#0d1117; --surface:#161b22; --surface-2:#1c2128; --surface-3:#21262d;
  --border:rgba(255,255,255,0.08); --text:#e6edf3; --text-muted:#8b949e; --text-faint:#3d444d;
  --primary:#f59e0b; --primary-dark:#d97706; --primary-glow:rgba(245,158,11,0.12);
  --green:#3fb950; --red:#f85149;
  --font:'Inter',system-ui,sans-serif;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-full:999px;
  --shadow:0 4px 24px rgba(0,0,0,.4);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;overflow:hidden;}
body{height:100%;overflow:hidden;font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none;}
button{cursor:pointer;font-family:var(--font);}
a{text-decoration:none;}

/* ── APP SHELL ── */
#app{display:flex;flex-direction:column;height:100dvh;position:relative;overflow:hidden;}

/* ── SPLASH ── */
#splash{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity .5s;}
#splash.out{opacity:0;pointer-events:none;visibility:hidden;}
.spl-icon{font-size:48px;animation:bob 2s ease-in-out infinite;}
.spl-title{font-size:32px;font-weight:900;letter-spacing:-.04em;color:var(--text);}
.spl-title b{color:var(--primary);}
.spl-sub{font-size:13px;color:var(--text-muted);}
.spl-bar{width:160px;height:3px;background:var(--surface-2);border-radius:2px;overflow:hidden;margin-top:8px;}
.spl-fill{height:100%;background:var(--primary);animation:fill-bar 2s ease forwards;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fill-bar{0%{width:0}100%{width:100%}}

/* ── LOADER ── */
#loader{position:fixed;inset:0;background:rgba(13,17,23,.7);z-index:8000;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;}
.loader-txt{font-size:13px;color:var(--text-muted);}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── TOAST ── */
#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);z-index:9000;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px 18px;font-size:13px;font-weight:600;color:var(--text);box-shadow:var(--shadow);opacity:0;transition:all 300ms;pointer-events:none;white-space:nowrap;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.ok{border-color:var(--green);color:var(--green);}
#toast.err{border-color:var(--red);color:var(--red);}
@keyframes fadein{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ── TOPBAR ── */
.topbar{height:56px;min-height:56px;flex-shrink:0;z-index:900;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:0 12px;}
.topbar-logo{font-size:18px;font-weight:900;letter-spacing:-.03em;color:var(--text);flex-shrink:0;}
.topbar-logo span{color:var(--primary);}
.topbar-center{position:relative;flex:1;min-width:0;}

/* ── SEARCH BOX ── */
.search-box{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius-full);padding:6px 36px 6px 10px;position:relative;transition:border-color 180ms;}
.search-box:focus-within{border-color:var(--primary);}
.search-box>svg{width:16px;height:16px;stroke:var(--text-muted);flex-shrink:0;}
.search-box input{flex:1;border:none;outline:none;background:transparent;font:500 14px/1 var(--font);color:var(--text);min-width:0;}
.search-box input::placeholder{color:var(--text-muted);}
.search-clear{display:none;position:absolute;right:34px;top:50%;transform:translateY(-50%);background:var(--surface-3);border:none;color:var(--text-muted);width:18px;height:18px;border-radius:50%;font-size:10px;align-items:center;justify-content:center;line-height:1;}
.search-clear.vis{display:flex;}
.search-geo-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:none;background:#e8f0fe;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;}

/* ── SUGGESTIONS ── */
.suggestions{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);list-style:none;z-index:1000;display:none;max-height:260px;overflow-y:auto;}
.sug-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;transition:background 120ms;}
.sug-item:hover,.sug-item.active{background:var(--surface-2);}
.sug-icon{flex-shrink:0;width:18px;height:18px;color:var(--text-muted);}
.sug-icon svg{width:18px;height:18px;}
.sug-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sug-main{font-size:14px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sug-sub{font-size:11px;color:var(--text-muted);}
.sug-main mark{background:rgba(245,158,11,.25);color:var(--primary);border-radius:2px;padding:0 1px;font-weight:700;}

/* ── MAP ── */
#map-wrap{position:relative;flex:1;min-height:0;overflow:hidden;}
#leaflet-map{width:100%;height:100%;}
.map-watermark{position:absolute;inset:0;z-index:200;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.map-watermark span{font-size:clamp(60px,15vw,120px);font-weight:900;color:rgba(0,200,150,0.06);letter-spacing:.15em;text-transform:uppercase;user-select:none;white-space:nowrap;}


/* ── CHIPS CARTE ── */
#map-chips{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:800;display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;max-width:calc(100% - 16px);scrollbar-width:none;padding-bottom:2px;}
#map-chips::-webkit-scrollbar{display:none;}

/* ── BOUTON ZONE ── */
#search-zone-btn{position:absolute;top:54px;left:50%;transform:translateX(-50%);z-index:700;}
#search-zone-btn button{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full);padding:8px 16px;font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px;cursor:pointer;box-shadow:var(--shadow);transition:background 150ms;font-family:var(--font);}
#search-zone-btn button:hover{background:var(--surface-2);}

/* ── GÉOLOC BTN ── */
#map-geo-btn{position:absolute;right:10px;bottom:14px;z-index:800;width:40px;height:40px;border-radius:50%;border:none;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;}
#map-geo-btn:hover{box-shadow:0 4px 14px rgba(0,0,0,.38);}

/* ── GEO DOT ── */
.geo-dot{width:18px;height:18px;border-radius:50%;background:#4285f4;border:3px solid #fff;box-shadow:0 0 0 3px rgba(66,133,244,.3);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(66,133,244,.3)}50%{box-shadow:0 0 0 7px rgba(66,133,244,.1)}}

/* ── CHIPS ── */
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex-shrink:0;padding:6px 14px;border-radius:var(--radius-full);background:var(--surface-2);border:1.5px solid var(--border);font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all 160ms;white-space:nowrap;}
.chip.active{background:var(--primary);border-color:var(--primary);color:#000;}
.chip:hover:not(.active){border-color:var(--primary);color:var(--text);}

/* ── BOTTOM SHEET LISTE ── */
#list-sheet{flex-shrink:0;background:var(--surface);border-top:2px solid var(--border);border-radius:18px 18px 0 0;display:flex;flex-direction:column;overflow:hidden;transition:height 300ms cubic-bezier(.4,0,.2,1);z-index:700;}
#list-sheet.peek{height:110px;}
#list-sheet.half{height:46vh;}
#list-sheet.full{height:70vh;}

.ls-handle-wrap{flex-shrink:0;padding:8px 14px 6px;cursor:pointer;user-select:none;display:flex;flex-direction:column;align-items:center;gap:8px;}
.ls-handle-bar{width:36px;height:4px;border-radius:2px;background:var(--border);}
.ls-kpi{display:flex;align-items:center;width:100%;}
.ls-kpi-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;}
.ls-kpi-val{font-size:clamp(12px,3.5vw,15px);font-weight:700;color:var(--text);}
.ls-kpi-val.green{color:var(--green);}
.ls-kpi-val.red{color:var(--red);}
.ls-kpi-lbl{font-size:clamp(8px,2vw,10px);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;}
.ls-kpi-sep{width:1px;height:28px;background:var(--border);flex-shrink:0;margin:0 2px;}

#list-sheet.peek .ls-toolbar,
#list-sheet.peek .ls-list{display:none;}

.ls-toolbar{flex-shrink:0;padding:4px 10px 6px;display:flex;flex-direction:column;gap:6px;border-bottom:1px solid var(--border);}
.ls-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

.ls-list{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0;}
.ls-list::-webkit-scrollbar{width:3px;}
.ls-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}

/* ── BOTTOM NAV ── */
#bottom-nav{flex-shrink:0;height:58px;background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-around;padding-bottom:env(safe-area-inset-bottom,0px);z-index:900;}
.bnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;background:none;border:none;cursor:pointer;color:var(--text-muted);font-family:var(--font);font-size:10px;font-weight:500;transition:color 140ms;position:relative;}
.bnav-btn svg{width:20px;height:20px;stroke:currentColor;}
.bnav-btn.active{color:var(--primary);}
.bnav-btn.active svg{stroke:var(--primary);}
.bnav-badge{position:absolute;top:4px;right:calc(50% - 20px);font-size:8px;font-weight:800;background:var(--primary);color:#000;border-radius:4px;padding:1px 4px;line-height:1.4;}

/* ── BOTTOM SHEET STATION ── */
.bs{position:absolute;bottom:0;left:0;right:0;z-index:1000;background:var(--surface);border-top:1px solid var(--border);border-radius:20px 20px 0 0;padding:20px 18px 32px;transform:translateY(100%);transition:transform 280ms cubic-bezier(.4,0,.2,1);max-height:80vh;overflow-y:auto;}
.bs.open{transform:translateY(0);}
.bs-close{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;border:none;background:var(--surface-2);color:var(--text-muted);font-size:13px;display:flex;align-items:center;justify-content:center;}
.bs-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 14px;}
.bs-name{font-size:15px;font-weight:700;margin-bottom:4px;}
.bs-addr{font-size:12px;color:var(--text-muted);margin-bottom:14px;}
.bs-nav-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;border-radius:var(--radius-md);font-size:12px;font-weight:700;transition:background 150ms;}
.bs-nav-google{background:rgba(66,133,244,.12);border:1px solid rgba(66,133,244,.25);color:#4285f4;}
.bs-nav-google:hover{background:rgba(66,133,244,.22);}
.bs-nav-waze{background:rgba(99,210,109,.1);border:1px solid rgba(99,210,109,.25);color:#63d26d;}
.bs-nav-waze:hover{background:rgba(99,210,109,.2);}
.bs-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.bsp{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px;display:flex;flex-direction:column;gap:4px;transition:border-color 180ms;}
.bsp.cheap{border-color:rgba(63,185,80,.3);}
.bsp.pricey{border-color:rgba(248,81,73,.3);}
.bsp-f{font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;}
.bsp-v{font-size:15px;font-weight:700;color:var(--text);}
.bsp-v.cheap{color:var(--green);}
.bsp-v.pricey{color:var(--red);}
.bsp-v.na{color:var(--text-faint);}
.bsp-t{font-size:10px;color:var(--text-muted);}

/* ── TABLE ── */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:320px;}
thead{position:sticky;top:0;z-index:10;background:var(--surface);}
th{padding:8px 10px;text-align:left;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);white-space:nowrap;}
td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,0.04);vertical-align:middle;}
tbody tr{cursor:pointer;transition:background 120ms;}
tbody tr:hover{background:var(--surface-2);}
.rank{width:30px;text-align:center;font-size:14px;}
.td-name{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:5px;}
.td-addr{font-size:11px;color:var(--text-muted);margin-top:2px;}
.td-dist{font-size:12px;color:var(--text-muted);white-space:nowrap;}
.badge-auto{background:rgba(63,185,80,.15);color:var(--green);border:1px solid rgba(63,185,80,.3);border-radius:4px;font-size:10px;font-weight:700;padding:1px 5px;white-space:nowrap;}

/* ── PRICE TAGS ── */
.price-tag{display:inline-block;padding:3px 7px;border-radius:6px;font-size:12px;font-weight:700;white-space:nowrap;}
.pt-cheap{background:rgba(63,185,80,.15);color:var(--green);border:1px solid rgba(63,185,80,.3);}
.pt-mid{background:var(--surface-3);color:var(--text);border:1px solid var(--border);}
.pt-pricey{background:rgba(248,81,73,.12);color:var(--red);border:1px solid rgba(248,81,73,.3);}
.pt-na{background:var(--surface-2);color:var(--text-faint);border:1px solid var(--border);}

/* ── MARKERS CARTE ── */
.km{display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;border-radius:8px;font-size:12px;font-weight:700;white-space:nowrap;border:1.5px solid;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform 120ms;}
.km:hover{transform:scale(1.08);}
.km-cheap{background:#d4f7d4;border-color:#3fb950;color:#1a6b1a;}
.km-mid{background:#fff;border-color:#ccc;color:#333;}
.km-pricey{background:#ffd6d6;border-color:#f85149;color:#8b0000;}
.km-na{background:#eee;border-color:#bbb;color:#666;}

/* ── FILTER / TRI ── */
.filter-btn-group{display:flex;gap:4px;}
.filter-sort-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--radius-md);border:1.5px solid var(--border);background:var(--surface-2);color:var(--text-muted);font-size:12px;font-weight:600;transition:all 150ms;cursor:pointer;font-family:var(--font);}
.filter-sort-btn svg{width:13px;height:13px;}
.filter-sort-btn.active{background:var(--primary-glow);border-color:var(--primary);color:var(--primary);}
.filter-sort-btn:hover:not(.active){border-color:var(--primary);color:var(--text);}

/* ── RAYON ── */
.radius-wrap{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);}
.radius-val{font-weight:700;color:var(--text);min-width:36px;}
input[type=range]{accent-color:var(--primary);width:80px;cursor:pointer;}

/* ── EMPTY STATE ── */
.empty{padding:32px 20px;text-align:center;}
.empty-icon{font-size:32px;margin-bottom:8px;}
.empty-msg{font-size:15px;font-weight:600;color:var(--text);margin-bottom:4px;}
.empty-sub{font-size:13px;color:var(--text-muted);}

/* ── MAP STATS pill compact ── */
.map-stats{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  z-index:800;background:rgba(13,17,23,.88);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-full);padding:6px 16px;
  display:flex;align-items:center;gap:14px;
  font-size:12px;white-space:nowrap;pointer-events:none;
  box-shadow:0 2px 12px rgba(0,0,0,.35);
}
.ms{display:flex;flex-direction:column;align-items:center;gap:1px;}
.ms-v{font-size:13px;font-weight:700;color:var(--text);}
.ms-sep{width:1px;height:24px;background:rgba(255,255,255,.12);}
.ms-k{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;}

/* ── BOTTOM SHEET HANDLE épuré ── */
#list-sheet.peek{height:64px;}
.ls-handle-wrap{
  flex-shrink:0;padding:10px 14px 6px;
  cursor:grab;user-select:none;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.ls-handle-wrap:active{cursor:grabbing;}

/* ── HINT ANIMÉ ── */
.ls-hint{
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:11px;color:var(--text-muted);font-weight:500;
}
@keyframes hint-pulse{
  0%,100%{opacity:.45;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-2px)}
}
.ls-hint{animation:hint-pulse 2.2s ease-in-out infinite;}
#list-sheet.half .ls-hint,
#list-sheet.full .ls-hint{display:none;}

/* ── GÉOLOC au-dessus zoom Leaflet ── */
#map-geo-btn{bottom:80px;right:10px;z-index:1000;}

/* ── SEARCH BOX fond blanc ── */
.search-box{
  background:#ffffff !important;
  border:1.5px solid #e0e0e0 !important;
  border-radius:var(--radius-full);
  padding:11px 40px 11px 14px;
  max-width:100%;
  width:100%;
}
.search-box:focus-within{border-color:var(--primary) !important;}
.search-box input{color:#111 !important;font-size:15px !important;}
.search-box input::placeholder{color:#999 !important;}
.search-box>svg{stroke:#888;}
/* Centré et large sur desktop */
@media(min-width:600px){
  .topbar-center{max-width:680px;margin:0 auto;}
}

/* ── HINT — fond distinct ── */
.ls-hint{
  background:linear-gradient(135deg,var(--surface-2) 0%,var(--surface-3) 100%);
  border:1px solid rgba(245,158,11,.18);
  border-radius:var(--radius-full);
  padding:5px 14px;
  font-size:11px;color:var(--text-muted);font-weight:600;
  display:flex;align-items:center;gap:6px;
  box-shadow:0 1px 6px rgba(0,0,0,.2);
  animation:hint-pulse 2.2s ease-in-out infinite;
}
.ls-hint svg{color:var(--primary);stroke:var(--primary);opacity:.8;}

/* ── LOGO TOPBAR v12 ── */
.topbar-logo{
  display:flex;align-items:center;gap:0;
  font-size:22px;font-weight:900;letter-spacing:-.03em;
  color:var(--text);flex-shrink:0;
}
.topbar-logo span{color:var(--primary);}
.logo-pump{flex-shrink:0;margin-right:8px;filter:drop-shadow(0 1px 4px rgba(229,57,53,.35));}

/* ── LOGO fix espace ── */
.topbar-logo span{color:var(--primary);display:inline;letter-spacing:inherit;font-size:inherit;font-weight:inherit;}

/* ── CHIPS plus gros + texte blanc ── */
.chip{
  font-size:14px;
  font-weight:700;
  color:#ffffff;
  padding:7px 16px;
}
.chip.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#000;
}
.chip:hover:not(.active){
  color:#ffffff;
  border-color:var(--primary);
}