@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;600;700;900&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ============================
   DESIGN SYSTEM — LIGHT THEME
   ============================ */
:root {
  --primary: #FA4423;
  --primary-dark: #D93A1C;
  --primary-light: #FF6B4A;
  --primary-bg: rgba(250,68,35,0.08);
  --halal: #16A34A;
  --halal-bg: rgba(22,163,74,0.12);
  --star: #F5A623;
  --hot: #FF4500;
  --success: #16A34A;
  --success-bg: rgba(22,163,74,0.1);
  --danger: #DC2626;
  --danger-bg: rgba(220,38,38,0.1);
  --info: #2563EB;
  --info-bg: rgba(37,99,235,0.1);

  --bg: #F7F4F1;
  --bg2: #EDEAE6;
  --card: #FFFFFF;
  --border: #E2DDD8;
  --border-light: #EDE9E5;

  --text-1: #1A1412;
  --text-2: #4A4440;
  --text-3: #9A908A;
  --text-4: #C4BDB8;

  --topbar-h: 60px;
  --cat-h: 48px;
  --qf-h: 42px;
  --header-h: calc(var(--topbar-h) + var(--cat-h) + var(--qf-h));

  --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 22px; --r-full: 9999px;
  --sh-sm: 0 1px 3px rgba(26,20,18,0.06);
  --sh: 0 4px 16px rgba(26,20,18,0.09);
  --sh-md: 0 8px 28px rgba(26,20,18,0.12);
  --sh-lg: 0 20px 56px rgba(26,20,18,0.18);
  --sh-xl: 0 32px 80px rgba(26,20,18,0.24);
  --tr: all 0.22s cubic-bezier(0.4,0,0.2,1);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-title: 'Bebas Neue', 'Impact', sans-serif;
  --font-cond: 'Barlow Condensed', 'Inter', sans-serif;
}

/* ============================
   DARK THEME (DÉFAUT BANLIEUE)
   ============================ */
html[data-theme="dark"] {
  --bg: #0A0A0D;
  --bg2: #111116;
  --card: #161619;
  --border: #252528;
  --border-light: #1E1E22;
  --text-1: #F2EFEA;
  --text-2: #A8A0A0;
  --text-3: #605858;
  --text-4: #383030;
  --primary-bg: rgba(250,68,35,0.12);
  --halal-bg: rgba(22,163,74,0.12);
  --sh-sm: 0 1px 3px rgba(0,0,0,0.5);
  --sh: 0 4px 16px rgba(0,0,0,0.6);
  --sh-md: 0 8px 28px rgba(0,0,0,0.7);
  --sh-lg: 0 20px 56px rgba(0,0,0,0.8);
}

/* ============================
   RESET & BASE
   ============================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--text-1); line-height: 1.6; overflow-x: hidden; transition: background 0.3s, color 0.3s; }
/* Grain texture banlieue */
body::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9998;
  opacity: 0.5;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
input, select { font-family: inherit; outline: none; color: inherit; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.hidden { display: none !important; }

/* ============================
   SPLASH
   ============================ */
#splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: #090608;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
#splash.exit { opacity: 0; transform: scale(1.04); pointer-events: none; }
.splash-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 40% 20%, rgba(250,68,35,0.28) 0%, transparent 55%),
              radial-gradient(ellipse at 80% 80%, rgba(255,140,66,0.18) 0%, transparent 50%);
}
.splash-content { position: relative; z-index: 1; text-align: center; padding: 32px 24px; max-width: 420px; width: 100%; animation: splashIn 0.9s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes splashIn { from { opacity:0; transform:translateY(36px) scale(0.94); } to { opacity:1; transform:translateY(0) scale(1); } }
.splash-icon { font-size: 5rem; display:block; margin-bottom:10px; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.splash-title { font-family:'Bebas Neue',sans-serif; font-size:4.2rem; font-weight:400; letter-spacing:6px; background:linear-gradient(135deg,#FA4423,#FF8C42,#FFD700); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:8px; text-shadow:none; }
.splash-tagline { font-family:'Barlow Condensed',sans-serif; font-size:1rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.5); line-height:1.65; margin-bottom:28px; }
.splash-features { display:flex; justify-content:center; gap:20px; margin-bottom:32px; flex-wrap:wrap; }
.splash-feat { display:flex; flex-direction:column; align-items:center; gap:5px; }
.splash-feat span { font-size:1.4rem; }
.splash-feat p { font-size:0.68rem; color:rgba(255,255,255,0.42); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.splash-btn { display:flex; align-items:center; gap:10px; justify-content:center; width:100%; padding:15px 28px; background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; border-radius:var(--r-full); font-size:.95rem; font-weight:800; cursor:pointer; transition:var(--tr); margin-bottom:10px; box-shadow:0 8px 28px rgba(250,68,35,0.45); letter-spacing:-0.2px; }
.splash-btn:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(250,68,35,0.55); }
.splash-btn-secondary { display:block; width:100%; padding:12px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.13); color:rgba(255,255,255,0.65); border-radius:var(--r-full); font-size:.875rem; font-weight:600; cursor:pointer; transition:var(--tr); margin-bottom:18px; }
.splash-btn-secondary:hover { background:rgba(255,255,255,0.13); color:#fff; }
.splash-note { font-size:.68rem; color:rgba(255,255,255,0.22); }

/* ============================
   TOPBAR
   ============================ */
.topbar { position:fixed; top:0; left:0; right:0; z-index:100; height:var(--topbar-h); background:rgba(255,255,255,0.96); backdrop-filter:blur(18px); border-bottom:2px solid var(--primary); box-shadow:0 2px 20px rgba(250,68,35,0.12); transition:background 0.3s; }
html[data-theme="dark"] .topbar { background:rgba(10,10,13,0.97); border-bottom-color:var(--primary); box-shadow:0 2px 20px rgba(250,68,35,0.2); }
.topbar-inner { height:100%; display:flex; align-items:center; gap:10px; padding:0 14px; }
.app-logo { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.logo-icon { font-size:1.3rem; }
.logo-text { font-family:'Bebas Neue',sans-serif; font-size:1.6rem; font-weight:400; letter-spacing:3px; background:linear-gradient(135deg,var(--primary),#FFD700); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.search-wrap { flex:1; position:relative; min-width:0; }
.search-box { display:flex; align-items:center; gap:8px; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--r-full); padding:8px 14px; transition:var(--tr); }
.search-box:focus-within { border-color:var(--primary); background:var(--card); box-shadow:0 0 0 3px var(--primary-bg); }
.search-icon { font-size:.95rem; opacity:.5; flex-shrink:0; }
.search-input { flex:1; border:none; background:transparent; font-size:.875rem; color:var(--text-1); min-width:0; }
.search-input::placeholder { color:var(--text-3); }
.search-clear { background:var(--border); color:var(--text-3); border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:.6rem; flex-shrink:0; transition:var(--tr); }
.search-clear:hover { background:var(--primary); color:#fff; }
.search-suggestions { position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-lg); overflow:hidden; z-index:200; animation:fadeDown .2s ease; }
@keyframes fadeDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.suggestion-item { display:flex; align-items:center; gap:10px; padding:11px 14px; cursor:pointer; transition:var(--tr); border-bottom:1px solid var(--border-light); }
.suggestion-item:last-child { border-bottom:none; }
.suggestion-item:hover { background:var(--primary-bg); }
.sug-icon { font-size:.95rem; opacity:.6; flex-shrink:0; }
.sug-main { font-size:.85rem; font-weight:600; color:var(--text-1); }
.sug-sub { font-size:.72rem; color:var(--text-3); }
.topbar-right { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.topbar-btn { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.05rem; background:var(--bg); border:1px solid var(--border); cursor:pointer; transition:var(--tr); position:relative; flex-shrink:0; }
.topbar-btn:hover { background:var(--primary-bg); border-color:var(--primary-light); transform:scale(1.08); }
.fav-count { position:absolute; top:-3px; right:-3px; background:var(--primary); color:#fff; font-size:.58rem; font-weight:900; min-width:15px; height:15px; border-radius:var(--r-full); display:flex; align-items:center; justify-content:center; padding:0 3px; border:2px solid var(--card); }

/* ============================
   CATEGORY & QUICK FILTERS
   ============================ */
.category-bar { position:fixed; top:var(--topbar-h); left:0; right:0; z-index:90; height:var(--cat-h); background:var(--card); border-bottom:1px solid var(--border-light); transition:background 0.3s; }
.category-scroll { display:flex; align-items:center; gap:7px; padding:9px 14px; overflow-x:auto; scrollbar-width:none; height:100%; }
.category-scroll::-webkit-scrollbar { display:none; }
.cat-pill { flex-shrink:0; padding:5px 13px; border-radius:var(--r-full); font-size:.8rem; font-weight:700; background:var(--bg); border:1.5px solid var(--border); color:var(--text-2); cursor:pointer; transition:var(--tr); white-space:nowrap; }
.cat-pill:hover { border-color:var(--primary-light); color:var(--primary); background:var(--primary-bg); }
.cat-pill.active { background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 4px 14px rgba(250,68,35,0.35); }
.quick-filters { position:fixed; top:calc(var(--topbar-h) + var(--cat-h)); left:0; right:0; z-index:80; height:var(--qf-h); background:var(--bg); border-bottom:1px solid var(--border-light); transition:background 0.3s; }
.qf-scroll { display:flex; align-items:center; gap:6px; padding:7px 14px; overflow-x:auto; scrollbar-width:none; height:100%; }
.qf-scroll::-webkit-scrollbar { display:none; }
.qf-chip { flex-shrink:0; padding:4px 11px; border-radius:var(--r-full); font-size:.76rem; font-weight:700; background:var(--card); border:1px solid var(--border); color:var(--text-2); cursor:pointer; transition:var(--tr); white-space:nowrap; }
.qf-chip:hover { border-color:var(--primary-light); color:var(--primary); }
.qf-chip.active { background:var(--primary-bg); border-color:var(--primary); color:var(--primary); }
.all-filters-btn { background:var(--text-1); color:var(--card) !important; border-color:var(--text-1); }
.all-filters-btn:hover { background:var(--primary); border-color:var(--primary); }

/* ============================
   APP BODY
   ============================ */
.app-body { display:flex; margin-top:var(--header-h); height:calc(100vh - var(--header-h)); }

/* ============================
   LIST PANEL
   ============================ */
.list-panel { width:420px; flex-shrink:0; background:var(--bg); display:flex; flex-direction:column; height:100%; overflow:hidden; border-right:1px solid var(--border-light); transition:background 0.3s; }
.list-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--card); border-bottom:1px solid var(--border-light); flex-shrink:0; gap:8px; transition:background 0.3s; }
.list-count { font-size:.78rem; font-weight:700; color:var(--text-2); flex:1; }
.sort-select { font-size:.75rem; font-weight:700; color:var(--text-1); border:1px solid var(--border); border-radius:var(--r-sm); padding:4px 8px; background:var(--bg); cursor:pointer; flex-shrink:0; transition:background 0.3s,color 0.3s; }
.list-search-wrap { padding:8px 12px; background:var(--card); border-bottom:1px solid var(--border-light); flex-shrink:0; transition:background 0.3s; }
.list-search-input { width:100%; padding:8px 12px; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--r-full); font-size:.82rem; color:var(--text-1); transition:var(--tr); }
.list-search-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-bg); }
.list-search-input::placeholder { color:var(--text-3); }
.restaurant-list { flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:8px; }

/* ============================
   SKELETON
   ============================ */
.skeleton-list { flex:1; overflow:hidden; padding:10px; display:flex; flex-direction:column; gap:8px; }
.skeleton-card { display:flex; gap:10px; background:var(--card); border-radius:var(--r); padding:10px; }
.sk-photo { width:88px; height:88px; border-radius:var(--r); flex-shrink:0; background:var(--bg2); animation:shimmer 1.6s infinite; }
.sk-body { flex:1; display:flex; flex-direction:column; gap:7px; padding-top:2px; }
.sk-line { border-radius:4px; background:var(--bg2); animation:shimmer 1.6s infinite; }
.sk-title { height:14px; width:68%; }
.sk-meta { height:11px; width:50%; }
.sk-rating { height:13px; width:42%; }
.sk-tag { height:11px; width:30%; }
@keyframes shimmer { 0%{opacity:1} 50%{opacity:.5} 100%{opacity:1} }

/* ============================
   RESTAURANT CARD
   ============================ */
.restaurant-card { display:flex; gap:10px; background:var(--card); border-radius:var(--r); padding:10px; cursor:pointer; transition:var(--tr); border:1.5px solid transparent; box-shadow:var(--sh-sm); position:relative; transition:background 0.3s,box-shadow 0.22s,border-color 0.22s,transform 0.22s; }
.restaurant-card:hover { box-shadow:var(--sh-md); border-color:var(--border); transform:translateY(-2px); }
.restaurant-card.highlighted { border-color:var(--primary) !important; box-shadow:0 0 0 3px var(--primary-bg), var(--sh-md); }
.card-photo { width:88px; height:88px; border-radius:var(--r); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:2rem; position:relative; overflow:hidden; }
.card-status { position:absolute; bottom:4px; left:4px; padding:2px 6px; border-radius:var(--r-full); font-size:.58rem; font-weight:900; text-transform:uppercase; letter-spacing:.5px; backdrop-filter:blur(8px); }
.status-open { background:rgba(22,163,74,.9); color:#fff; }
.status-closed { background:rgba(220,38,38,.85); color:#fff; }
.card-fav { position:absolute; top:5px; right:5px; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; font-size:.82rem; cursor:pointer; transition:var(--tr); box-shadow:var(--sh-sm); border:none; }
.card-fav:hover { transform:scale(1.2); }
.card-body { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:3px; }
.card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:4px; }
.card-name { font-size:.88rem; font-weight:800; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-price { font-size:.72rem; font-weight:800; color:var(--success); flex-shrink:0; }
.card-meta { font-size:.73rem; color:var(--text-3); display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.card-cuisine { font-weight:600; color:var(--text-2); }
.meta-sep { opacity:.4; }
.card-dist { font-weight:700; color:var(--primary); }
.card-walk { font-weight:600; color:var(--text-3); }
.card-rating { display:flex; align-items:center; gap:4px; }
.card-stars { color:var(--star); font-size:.78rem; letter-spacing:-1.5px; line-height:1; }
.card-rnum { font-size:.82rem; font-weight:900; color:var(--text-1); }
.card-rcount { font-size:.7rem; color:var(--text-3); }
.card-bottom { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:2px; }
.card-tags { display:flex; flex-wrap:wrap; gap:3px; flex:1; }
.card-tag { padding:2px 7px; border-radius:2px; font-size:.6rem; font-weight:700; letter-spacing:.3px; background:var(--bg); color:var(--text-3); border:1px solid var(--border-light); font-family:var(--font-cond); }
.tag-open { background:rgba(22,163,74,.1); color:var(--success); border-color:rgba(22,163,74,.2); }
.tag-deliver { background:rgba(234,88,12,.1); color:#EA580C; border-color:rgba(234,88,12,.2); }
.tag-takeaway { background:rgba(37,99,235,.1); color:var(--info); border-color:rgba(37,99,235,.2); }
/* Badge Halal — prominent banlieue */
.tag-halal { background:rgba(22,163,74,.15) !important; color:#16A34A !important; border-color:rgba(22,163,74,.35) !important; font-weight:900 !important; font-size:.63rem !important; }
html[data-theme="dark"] .tag-halal { color:#4ADE80 !important; background:rgba(74,222,128,.1) !important; border-color:rgba(74,222,128,.3) !important; }
/* Badge Chaîne */
.tag-chaine { background:rgba(250,68,35,.1); color:var(--primary); border-color:rgba(250,68,35,.2); }
/* Badge Top Spot 🔥 */
.tag-top { background:rgba(255,69,0,.12); color:#FF4500; border-color:rgba(255,69,0,.3); font-weight:900 !important; }
.card-call-btn { display:flex; align-items:center; gap:4px; padding:4px 9px; background:var(--success-bg); color:var(--success); border-radius:2px; font-size:.68rem; font-weight:800; font-family:var(--font-cond); letter-spacing:.5px; border:1px solid rgba(22,163,74,.2); cursor:pointer; transition:var(--tr); flex-shrink:0; white-space:nowrap; text-decoration:none; }
.card-call-btn:hover { background:var(--success); color:#fff; }
/* Cat pill banlieue spéciale */
.cat-hot { position:relative; }
.cat-hot.active::after { content:'🔥'; position:absolute; top:-4px; right:-4px; font-size:.65rem; }
/* QF halal */
.qf-halal.active { background:var(--halal-bg) !important; border-color:var(--halal) !important; color:var(--halal) !important; }
html[data-theme="dark"] .qf-halal.active { color:#4ADE80 !important; border-color:#4ADE80 !important; background:rgba(74,222,128,.08) !important; }

.list-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px; text-align:center; }
.empty-icon { font-size:2.8rem; opacity:.4; margin-bottom:12px; }
.list-empty h3 { font-family:var(--font-cond); font-size:1.3rem; font-weight:700; letter-spacing:1px; color:var(--text-2); margin-bottom:6px; }
.list-empty p { font-size:.82rem; color:var(--text-3); line-height:1.5; margin-bottom:18px; }
.btn-reset-filters { padding:9px 18px; background:var(--primary-bg); color:var(--primary); border:1px solid rgba(250,68,35,.2); border-radius:var(--r-full); font-size:.8rem; font-weight:700; cursor:pointer; transition:var(--tr); }
.btn-reset-filters:hover { background:var(--primary); color:#fff; }

/* ============================
   MAP PANEL
   ============================ */
.map-panel { flex:1; position:relative; overflow:hidden; }
#map { width:100%; height:100%; }
.map-controls { position:absolute; top:12px; left:12px; z-index:10; display:flex; flex-direction:column; gap:6px; }
.map-ctrl-btn { padding:7px 14px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-full); font-size:.78rem; font-weight:700; color:var(--text-2); box-shadow:var(--sh); cursor:pointer; transition:var(--tr); }
.map-ctrl-btn:hover { background:var(--danger-bg); color:var(--danger); }
.map-legend { position:absolute; bottom:20px; right:12px; z-index:10; background:rgba(255,255,255,.95); border-radius:var(--r); padding:8px 12px; box-shadow:var(--sh); display:flex; flex-direction:column; gap:4px; }
html[data-theme="dark"] .map-legend { background:rgba(30,30,38,.95); }
.legend-item { display:flex; align-items:center; gap:6px; font-size:.7rem; color:var(--text-2); font-weight:600; }
.legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.legend-dot.open { background:var(--success); }
.legend-dot.closed { background:var(--danger); }
.legend-dot.selected { background:var(--primary); }

/* ============================
   MOBILE BAR & ROUTE BAR
   ============================ */
.mobile-view-bar { display:none; position:fixed; bottom:0; left:0; right:0; z-index:200; background:var(--card); border-top:1px solid var(--border); padding:8px 16px calc(8px + env(safe-area-inset-bottom)); gap:8px; transition:background 0.3s; }
.mvb-btn { flex:1; padding:9px; border-radius:var(--r); font-size:.875rem; font-weight:700; color:var(--text-3); cursor:pointer; transition:var(--tr); }
.mvb-btn.active { background:var(--primary-bg); color:var(--primary); }

.route-bar { position:fixed; bottom:0; left:0; right:0; z-index:300; background:var(--text-1); color:#fff; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow:var(--sh-xl); }
.route-info { display:flex; align-items:center; gap:12px; flex:1; }
.route-icon { font-size:1.4rem; }
.route-name { font-size:.9rem; font-weight:800; margin-bottom:2px; }
.route-meta { font-size:.78rem; color:rgba(255,255,255,.65); }
.route-close-btn { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.9rem; cursor:pointer; flex-shrink:0; transition:var(--tr); }
.route-close-btn:hover { background:rgba(255,255,255,.25); }

/* ============================
   MAP MARKERS
   ============================ */
.mrkr { width:36px; height:36px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,0.35); border:2.5px solid rgba(255,255,255,.6); cursor:pointer; transition:all .18s ease; }
.mrkr-inner { transform:rotate(45deg); font-size:.95rem; line-height:1; }
.mrkr.closed { filter:grayscale(.65); opacity:.72; }
.mrkr.sel { width:44px; height:44px; border-color:#fff; box-shadow:0 6px 22px rgba(0,0,0,0.45); z-index:1000 !important; }
.leaflet-popup-content-wrapper { border-radius:var(--r-lg) !important; box-shadow:var(--sh-lg) !important; padding:0 !important; overflow:hidden !important; border:1px solid var(--border) !important; }
.leaflet-popup-content { margin:0 !important; width:250px !important; }
.popup-photo { height:80px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
.popup-body { padding:10px 14px 0; }
.popup-name { font-weight:800; font-size:.88rem; color:var(--text-1); margin-bottom:2px; }
.popup-meta { font-size:.72rem; color:var(--text-3); margin-bottom:6px; }
.popup-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.popup-stars { color:var(--star); font-size:.75rem; letter-spacing:-1px; }
.popup-score { font-size:.8rem; font-weight:900; color:var(--text-1); margin:0 3px; }
.popup-cnt { font-size:.7rem; color:var(--text-3); }
.popup-status { font-size:.72rem; font-weight:800; }
.popup-status.open { color:var(--success); }
.popup-status.closed { color:var(--danger); }
.popup-actions { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--border-light); }
.popup-btn { padding:9px 6px; font-size:.75rem; font-weight:800; text-align:center; cursor:pointer; transition:var(--tr); border:none; background:none; color:var(--text-2); }
.popup-btn:first-child { border-right:1px solid var(--border-light); }
.popup-btn:hover { background:var(--primary-bg); color:var(--primary); }
.popup-btn.route-btn:hover { background:var(--success-bg); color:var(--success); }

/* ============================
   FILTER MODAL
   ============================ */
.modal-overlay { position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.55); backdrop-filter:blur(5px); display:flex; align-items:flex-end; justify-content:center; animation:fadeIn .2s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.filter-modal { background:var(--card); border-radius:var(--r-xl) var(--r-xl) 0 0; width:100%; max-width:580px; max-height:88vh; display:flex; flex-direction:column; animation:slideUp .32s cubic-bezier(0.34,1.56,0.64,1); transition:background 0.3s; }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.modal-handle { width:40px; height:4px; border-radius:2px; background:var(--border); margin:12px auto 4px; flex-shrink:0; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 22px 12px; border-bottom:1px solid var(--border-light); flex-shrink:0; }
.modal-header h3 { font-size:1.05rem; font-weight:900; color:var(--text-1); }
.modal-close { width:30px; height:30px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:.85rem; cursor:pointer; color:var(--text-3); transition:var(--tr); }
.modal-close:hover { background:var(--danger-bg); color:var(--danger); }
.modal-body { flex:1; overflow-y:auto; padding:18px 22px; }
.filter-section { margin-bottom:22px; }
.filter-section h4 { font-size:.72rem; font-weight:800; color:var(--text-3); margin-bottom:10px; text-transform:uppercase; letter-spacing:.8px; }
.filter-btn-group { display:flex; flex-wrap:wrap; gap:7px; }
.filter-opt-btn { padding:7px 14px; border:1.5px solid var(--border); border-radius:var(--r-full); font-size:.8rem; font-weight:700; color:var(--text-2); background:var(--card); cursor:pointer; transition:var(--tr); }
.filter-opt-btn:hover { border-color:var(--primary-light); color:var(--primary); }
.filter-opt-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.toggle-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.toggle-item { display:flex; align-items:center; gap:9px; padding:9px 12px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); cursor:pointer; transition:var(--tr); font-size:.8rem; font-weight:600; color:var(--text-2); }
.toggle-item:hover { border-color:var(--primary-light); background:var(--primary-bg); }
.toggle-item input[type="checkbox"] { accent-color:var(--primary); width:15px; height:15px; flex-shrink:0; }
.modal-footer { display:flex; gap:9px; padding:14px 22px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--border-light); flex-shrink:0; }
.btn-outline { flex:1; padding:12px; border:1.5px solid var(--border); border-radius:var(--r); font-size:.875rem; font-weight:700; color:var(--text-2); background:var(--card); cursor:pointer; transition:var(--tr); }
.btn-outline:hover { border-color:var(--text-1); }
.btn-primary { flex:2; padding:12px; background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; border-radius:var(--r); font-size:.875rem; font-weight:800; cursor:pointer; transition:var(--tr); border:none; }
.btn-primary:hover { box-shadow:0 6px 22px rgba(250,68,35,.45); transform:translateY(-1px); }

/* ============================
   DETAIL MODAL
   ============================ */
.detail-overlay { position:fixed; inset:0; z-index:600; background:rgba(0,0,0,.6); backdrop-filter:blur(5px); display:flex; align-items:flex-end; justify-content:center; animation:fadeIn .2s ease; }
.detail-modal { background:var(--card); border-radius:var(--r-xl) var(--r-xl) 0 0; width:100%; max-width:720px; max-height:94vh; overflow-y:auto; position:relative; animation:slideUp .35s cubic-bezier(0.34,1.56,0.64,1); transition:background 0.3s; }
.detail-close { position:sticky; top:14px; float:right; margin-right:14px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.95); box-shadow:var(--sh-md); display:flex; align-items:center; justify-content:center; font-size:.95rem; cursor:pointer; z-index:10; transition:var(--tr); border:none; }
html[data-theme="dark"] .detail-close { background:rgba(40,40,50,.95); color:var(--text-1); }
.detail-close:hover { background:var(--danger-bg); color:var(--danger); }
.detail-hero { width:100%; height:190px; display:flex; align-items:center; justify-content:center; font-size:5rem; position:relative; overflow:hidden; }
.detail-hero-ov { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.45)); }
.detail-status-badge { position:absolute; bottom:14px; left:14px; padding:5px 14px; border-radius:var(--r-full); font-size:.75rem; font-weight:900; backdrop-filter:blur(10px); }
.detail-share-btn { position:absolute; bottom:14px; right:14px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; font-size:1rem; cursor:pointer; border:none; transition:var(--tr); }
.detail-share-btn:hover { background:#fff; transform:scale(1.1); }
.dbody { padding:18px 20px 32px; }
.dtitle { font-size:1.5rem; font-weight:900; color:var(--text-1); letter-spacing:-.5px; margin-bottom:6px; }
.dmeta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:10px; }
.d-cuisine-badge { padding:4px 12px; border-radius:var(--r-full); font-size:.73rem; font-weight:800; background:var(--primary-bg); color:var(--primary); }
.d-price { font-size:.85rem; font-weight:900; color:var(--success); }
.d-dist { font-size:.8rem; color:var(--text-3); font-weight:600; }
.d-walk { font-size:.78rem; color:var(--text-3); }

/* Rating block */
.d-rating-block { background:var(--bg); border-radius:var(--r); padding:14px 16px; margin-bottom:14px; display:flex; gap:16px; align-items:center; }
.d-big-score { font-size:2.8rem; font-weight:900; color:var(--text-1); line-height:1; }
.d-stars-row { display:flex; align-items:center; gap:5px; margin-bottom:3px; }
.d-stars { color:var(--star); font-size:1rem; letter-spacing:-1px; }
.d-total-reviews { font-size:.78rem; color:var(--text-3); }
.d-rating-bars { flex:1; display:flex; flex-direction:column; gap:3px; }
.rbar-row { display:flex; align-items:center; gap:6px; }
.rbar-lbl { font-size:.68rem; color:var(--text-3); width:18px; text-align:right; flex-shrink:0; }
.rbar-track { flex:1; height:5px; background:var(--border-light); border-radius:3px; overflow:hidden; }
.rbar-fill { height:100%; background:var(--star); border-radius:3px; transition:width 1s ease; }
.rbar-cnt { font-size:.65rem; color:var(--text-4); width:24px; }

/* Action buttons */
.d-action-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:18px; }
.d-action-btn { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 8px; border-radius:var(--r); font-size:.75rem; font-weight:800; cursor:pointer; transition:var(--tr); border:1.5px solid var(--border); background:var(--card); color:var(--text-2); text-decoration:none; text-align:center; }
.d-action-btn .d-btn-icon { font-size:1.3rem; }
.d-action-btn:hover { transform:translateY(-2px); box-shadow:var(--sh); }
.d-btn-call { border-color:rgba(22,163,74,.3); color:var(--success); background:var(--success-bg); }
.d-btn-call:hover { background:var(--success); color:#fff; }
.d-btn-route { border-color:rgba(37,99,235,.3); color:var(--info); background:var(--info-bg); }
.d-btn-route:hover { background:var(--info); color:#fff; }
.d-btn-web { border-color:rgba(107,114,128,.3); color:var(--text-2); }
.d-btn-web:hover { background:var(--text-1); color:#fff; border-color:var(--text-1); }
.d-btn-fav { border-color:rgba(250,68,35,.2); color:var(--primary); background:var(--primary-bg); }
.d-btn-fav:hover { background:var(--primary); color:#fff; }
.d-btn-share { border-color:rgba(124,58,237,.2); color:#7C3AED; background:rgba(124,58,237,.08); }
.d-btn-share:hover { background:#7C3AED; color:#fff; }

/* Info grid */
.d-divider { height:1px; background:var(--border-light); margin:16px 0; }
.d-section-title { font-size:.95rem; font-weight:900; color:var(--text-1); margin-bottom:12px; display:flex; align-items:center; gap:7px; }
.d-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.d-info-item { display:flex; align-items:flex-start; gap:9px; padding:11px 13px; background:var(--bg); border-radius:var(--r); border:1px solid var(--border-light); }
.dii-icon { font-size:1.1rem; flex-shrink:0; margin-top:1px; }
.dii-lbl { font-size:.65rem; font-weight:800; color:var(--text-4); text-transform:uppercase; letter-spacing:.6px; margin-bottom:1px; }
.dii-val { font-size:.82rem; font-weight:600; color:var(--text-1); }
.dii-val a { color:var(--primary); }
.dii-val a:hover { text-decoration:underline; }

/* Hours */
.hours-grid { display:flex; flex-direction:column; gap:3px; }
.hour-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid var(--border-light); font-size:.8rem; }
.hour-row:last-child { border-bottom:none; }
.hour-day { color:var(--text-2); font-weight:600; }
.hour-day.today { color:var(--primary); font-weight:800; }
.hour-time { color:var(--text-3); font-weight:500; }

/* Tags */
.d-tags-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.d-tag { padding:5px 12px; border-radius:var(--r-full); font-size:.75rem; font-weight:700; background:var(--bg); border:1px solid var(--border); color:var(--text-2); }

/* Detail map */
.d-map-box { height:130px; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); }

/* Reviews */
.reviews-wrap { display:flex; flex-direction:column; gap:10px; }
.review-card { padding:14px; background:var(--bg); border-radius:var(--r); border:1px solid var(--border-light); }
.review-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.reviewer { display:flex; align-items:center; gap:9px; }
.reviewer-av { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:900; color:#fff; flex-shrink:0; }
.reviewer-name { font-size:.84rem; font-weight:800; color:var(--text-1); }
.reviewer-date { font-size:.7rem; color:var(--text-3); }
.review-stars { color:var(--star); font-size:.8rem; }
.review-text { font-size:.84rem; color:var(--text-2); line-height:1.6; }
.review-helpful { display:flex; align-items:center; gap:6px; margin-top:8px; }
.helpful-btn { display:flex; align-items:center; gap:4px; padding:3px 9px; border-radius:var(--r-full); font-size:.7rem; font-weight:700; color:var(--text-3); background:var(--card); border:1px solid var(--border); cursor:pointer; transition:var(--tr); }
.helpful-btn:hover { color:var(--primary); border-color:var(--primary-light); }
.user-review-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--r-full); font-size:.65rem; font-weight:800; background:var(--primary-bg); color:var(--primary); margin-left:auto; }

/* Write review form */
.review-form { background:var(--bg); border:1.5px dashed var(--border); border-radius:var(--r); padding:14px; margin-top:12px; }
.review-form h5 { font-size:.85rem; font-weight:800; color:var(--text-1); margin-bottom:10px; }
.star-selector { display:flex; gap:6px; margin-bottom:10px; }
.star-pick { font-size:1.4rem; cursor:pointer; opacity:.35; transition:var(--tr); }
.star-pick.active, .star-pick:hover { opacity:1; }
.review-textarea { width:100%; padding:10px 12px; background:var(--card); border:1.5px solid var(--border); border-radius:var(--r); font-size:.85rem; color:var(--text-1); resize:none; transition:var(--tr); line-height:1.5; }
.review-textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-bg); }
.review-textarea::placeholder { color:var(--text-3); }
.review-submit-btn { margin-top:8px; padding:9px 20px; background:var(--primary); color:#fff; border-radius:var(--r); font-size:.82rem; font-weight:800; cursor:pointer; border:none; transition:var(--tr); }
.review-submit-btn:hover { box-shadow:0 4px 14px rgba(250,68,35,.45); }

/* ============================
   FAVORITES PANEL
   ============================ */
.fav-overlay { position:fixed; inset:0; z-index:550; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); display:flex; justify-content:flex-end; animation:fadeIn .2s ease; }
.fav-panel { width:380px; max-width:100%; height:100%; background:var(--card); display:flex; flex-direction:column; animation:slideFromRight .3s ease; transition:background 0.3s; }
@keyframes slideFromRight { from{transform:translateX(100%)} to{transform:translateX(0)} }
.fav-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border-light); flex-shrink:0; }
.fav-header h3 { font-size:1.05rem; font-weight:900; }
.fav-body { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.fav-empty { text-align:center; padding:48px 24px; }
.fav-empty .empty-icon { font-size:2.5rem; opacity:.35; display:block; margin-bottom:10px; }
.fav-empty p { font-size:.85rem; color:var(--text-3); line-height:1.5; }

/* ============================
   TOAST
   ============================ */
.toast-container { position:fixed; bottom:80px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:7px; }
.toast { display:flex; align-items:center; gap:9px; padding:11px 16px; border-radius:var(--r); font-size:.845rem; font-weight:700; box-shadow:var(--sh-xl); animation:fadeDown .28s ease; min-width:220px; max-width:340px; color:#fff; }
.toast-success { background:var(--success); }
.toast-info { background:#334155; }
.toast-error { background:var(--danger); }
@keyframes fadeDown { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }

/* ============================
   ROUTE LINE (Leaflet)
   ============================ */
.leaflet-route-line { stroke:#2563EB; stroke-width:5; stroke-opacity:.85; stroke-dasharray:none; }

/* ============================
   BANLIEUE EXTRAS
   ============================ */
/* Tiles sombres en dark mode */
html[data-theme="dark"] #map { filter: brightness(0.82) contrast(1.05) saturate(0.85); }
html[data-theme="dark"] #dmap { filter: brightness(0.82) contrast(1.05) saturate(0.85); }

/* Card accent gauche pour fast food */
html[data-theme="dark"] .restaurant-card:hover { border-color:rgba(250,68,35,0.2); box-shadow:0 8px 28px rgba(0,0,0,.7), 0 0 0 1px rgba(250,68,35,.08); }

/* List header banlieue */
html[data-theme="dark"] .list-header { border-bottom:1px solid rgba(250,68,35,.15); }

/* Topbar brand banlieue */
html[data-theme="dark"] .topbar::after {
  content:'';
  position:absolute; bottom:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, var(--primary), transparent, var(--primary));
  opacity:0.4;
}

/* Count badge banlieue */
.list-count { font-family: var(--font-cond); font-size:.85rem; font-weight:700; letter-spacing:.5px; }

/* Sort select dark */
html[data-theme="dark"] .sort-select { background:var(--bg2); color:var(--text-1); border-color:var(--border); }

/* Surprime btn banlieue */
#surpriseBtn { font-size:1rem; }

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 768px) {
  .logo-text { display:none; }
  .list-panel { width:100%; }
  .map-panel { position:fixed; inset:0; margin-top:var(--header-h); height:calc(100dvh - var(--header-h) - 54px); z-index:5; }
  .map-panel.m-hidden { display:none; }
  .list-panel.m-hidden { display:none; }
  .app-body { height:calc(100dvh - var(--header-h) - 54px); }
  .mobile-view-bar { display:flex; }
  .d-info-grid { grid-template-columns:1fr; }
  .toggle-grid { grid-template-columns:1fr; }
  .fav-panel { width:100%; }
  .toast-container { bottom:70px; left:12px; right:12px; }
  .toast { min-width:unset; width:100%; }
  .d-action-grid { grid-template-columns:repeat(2,1fr); }
  .dtitle { font-size:1.25rem; }
  .detail-hero { height:160px; }
  .route-bar { padding-bottom:calc(12px + 54px + env(safe-area-inset-bottom)); }
}
@media (min-width:1200px) { .list-panel { width:480px; } }
@media (min-width:1600px) { .list-panel { width:520px; } }