:root{
  --ink:#0b1620;
  --ink-2:#101f2c;
  --ink-3:#16293a;
  --line:#243748;
  --amber:#e8a23c;
  --amber-dim:#8a621f;
  --teal:#3fa79e;
  --coral:#d9633b;
  --blue:#4f9cf9;
  --cream:#ece7dc;
  --cream-dim:#8fa0ac;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, "Roboto Mono", monospace;
  --sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; margin:0; overflow:hidden; background:var(--ink); font-family:var(--sans); color:var(--cream); user-select:none;}

#app{position:fixed; inset:0; background: radial-gradient(120% 90% at 50% 8%, #16293a 0%, #0b1620 60%);}

/* ---------- top bar ---------- */
#topbar{position:absolute; top:0; left:0; right:0; z-index:30; display:flex; align-items:center; justify-content:space-between; padding:18px 22px; pointer-events:none;}
#brand{display:flex; align-items:baseline; gap:10px; pointer-events:none;}
#brand .mark{font-family:var(--mono); font-size:13px; letter-spacing:.28em; color:var(--amber); border:1px solid var(--amber-dim); padding:4px 8px; border-radius:2px;}
#brand .name{font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-dim); font-weight:600;}

/* ---------- viewport / map ---------- */
#viewport{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; touch-action:none;}
#stage{
  position:relative;
  width:min(100vw, calc(100vh * (2400/2249)));
  aspect-ratio: 2400/2249;
  will-change:transform;
  box-shadow:0 10px 40px rgba(0,0,0,.4);
  overflow:hidden;
}
#stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block; pointer-events:none;}
#stage::after{content:""; position:absolute; inset:0; pointer-events:none; box-shadow: inset 0 0 90px rgba(0,0,0,.35);}
svg#routeLayer{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}

.marker{position:absolute; transform:translate(-50%,-100%); cursor:pointer;}
.marker .pin{width:14px; height:14px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--teal); border:2px solid #0b1620; box-shadow:0 2px 6px rgba(0,0,0,.5);}
.marker.villaType .pin{background:var(--cream-dim);}
.marker.destination .pin{background:var(--coral); width:20px; height:20px; box-shadow:0 0 0 6px rgba(217,99,59,.22), 0 2px 8px rgba(0,0,0,.6);}
.marker.destination{animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translate(-50%,-100%);}50%{transform:translate(-50%,-108%);}}
.marker.home .pin{background:var(--amber); width:18px; height:18px; box-shadow:0 0 0 6px rgba(232,162,60,.22);}

/* "vous êtes ici" (position GPS live) */
.meMarker{position:absolute; transform:translate(-50%,-50%); pointer-events:none;}
.meMarker .dot{width:16px; height:16px; border-radius:50%; background:var(--blue); border:3px solid #fff; box-shadow:0 0 0 6px rgba(79,156,249,.28);}
.meMarker .ring{position:absolute; inset:-14px; border-radius:50%; border:2px solid rgba(79,156,249,.5); animation:pulseRing 1.8s ease-out infinite;}
@keyframes pulseRing{0%{transform:scale(.6); opacity:1;} 100%{transform:scale(1.8); opacity:0;}}

/* ---------- zoom controls ---------- */
#zoomControls{position:absolute; left:20px; bottom:24px; z-index:25; display:flex; flex-direction:column; gap:8px;}
.roundbtn{width:44px; height:44px; border-radius:8px; border:1px solid var(--line); background:rgba(16,31,44,.72); color:var(--cream); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px);}
.roundbtn:active{transform:scale(.94);}

/* ---------- home bar (retour à la villa) ---------- */
#homeBar{
  position:absolute; left:20px; top:70px; z-index:25;
  background:rgba(11,22,32,.86); backdrop-filter:blur(8px);
  border:1px solid var(--amber-dim); border-radius:12px; padding:10px 12px;
  display:flex; align-items:center; gap:10px; box-shadow:0 12px 30px rgba(0,0,0,.4);
}
#homeLabel{font-family:var(--mono); font-size:13px; color:var(--amber);}
#homeReturnBtn{background:var(--amber); color:#20140a; border:none; border-radius:8px; padding:9px 12px; font-size:12px; letter-spacing:.04em; cursor:pointer;}

/* ---------- bouton loupe (FAB) ---------- */
#searchFab{
  position:absolute; right:26px; bottom:26px; z-index:26;
  width:56px; height:56px; border-radius:50%;
  background:var(--amber); border:none; color:#20140a; font-size:22px; cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
#searchFab:active{transform:scale(.94);}
#searchFab.open{background:var(--ink-3); color:var(--cream); border:1px solid var(--amber);}

/* ---------- search panel ---------- */
#searchWrap{position:absolute; right:26px; bottom:26px; z-index:25; width:min(400px, 92vw);}
#searchCard{background:rgba(11,22,32,.86); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:14px; padding:16px 18px 18px; box-shadow:0 20px 50px rgba(0,0,0,.5);}
#searchLabel{font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); margin-bottom:10px; display:flex; align-items:center; gap:8px;}
#searchLabel .rule{flex:1; height:1px; background:var(--line);}
#searchRow{display:flex; gap:8px; margin-bottom:12px;}
#searchInput{flex:1; background:var(--ink-3); border:1px solid var(--line); border-radius:8px; color:var(--cream); font-size:20px; padding:12px 14px; font-family:var(--sans); letter-spacing:.02em;}
#searchInput::placeholder{color:var(--cream-dim); font-size:15px;}
#goBtn{width:52px; border-radius:8px; border:1px solid var(--amber-dim); background:var(--amber); color:#20140a; font-size:20px; cursor:pointer;}
#goBtn:active{transform:scale(.95);}
#keypad{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.key{padding:14px 0; text-align:center; font-size:20px; font-family:var(--mono); background:var(--ink-3); border:1px solid var(--line); border-radius:8px; cursor:pointer; color:var(--cream);}
.key:active{background:var(--ink-2);}
.key.func{color:var(--amber); font-family:var(--sans); font-size:13px; letter-spacing:.06em; text-transform:uppercase;}
#chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; max-height:88px; overflow-y:auto;}
.chip{padding:8px 12px; border-radius:20px; border:1px solid var(--line); background:var(--ink-3); color:var(--cream-dim); font-size:13px; cursor:pointer;}
.chip:active{background:var(--ink-2);}
#emptyState{font-size:13px; color:var(--cream-dim); line-height:1.5; text-align:center; padding:6px 4px 2px;}
#resultCard{display:none;}
#resultCard.show{display:block;}
#resultTitle{font-family:var(--mono); font-size:22px; letter-spacing:.04em; color:var(--cream);}
#resultSub{font-size:12px; color:var(--cream-dim); text-transform:uppercase; letter-spacing:.14em; margin-top:2px;}
#resultMeta{display:flex; gap:18px; margin:14px 0 4px; font-size:13px; color:var(--teal); font-family:var(--mono);}
#resultMeta span b{color:var(--cream);}
#newSearchBtn{width:100%; margin-top:14px; padding:13px 0; border-radius:8px; border:1px solid var(--amber-dim); background:transparent; color:var(--amber); font-size:13px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;}
#noMatch{display:none; font-size:13px; color:var(--coral); margin-top:8px;}
#suggestions{display:none; margin-top:-4px; margin-bottom:10px; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
#suggestions .sugg{padding:10px 14px; font-size:14px; background:var(--ink-3); cursor:pointer; border-bottom:1px solid var(--line);}
#suggestions .sugg:last-child{border-bottom:none;}
#suggestions .sugg:active{background:var(--ink-2);}
#stepsList{list-style:none; margin:12px 0 0; padding:0; font-size:13px; color:var(--cream);}
#stepsList li{padding:7px 0 7px 20px; position:relative; border-bottom:1px dashed var(--line);}
#stepsList li:last-child{border-bottom:none;}
#stepsList li::before{content:"›"; position:absolute; left:0; color:var(--amber); font-family:var(--mono);}
#stepsList b{color:var(--amber);}

/* ---------- admin ---------- */
#adminOverlay{position:fixed; inset:0; z-index:100; background:rgba(6,12,18,.82); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center;}
#adminOverlay.show{display:flex;}
#adminBox{width:min(440px,92vw); max-height:86vh; overflow-y:auto; background:var(--ink-2); border:1px solid var(--line); border-radius:14px; padding:22px 22px 24px; position:relative;}
#adminBox h2{font-family:var(--mono); font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin:0 0 16px;}
#adminBox h3{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-dim); margin:18px 0 8px;}
.adminPinRow{display:flex; gap:8px; justify-content:center; margin-bottom:18px;}
.pinDot{width:14px; height:14px; border-radius:50%; border:1px solid var(--line); background:var(--ink-3);}
.pinDot.filled{background:var(--amber);}
.adminBtnFull{width:100%; padding:13px; border-radius:8px; border:1px solid var(--line); background:var(--ink-3); color:var(--cream); font-size:14px; cursor:pointer; margin-bottom:10px; text-align:left; display:flex; align-items:center; justify-content:space-between;}
.adminBtnFull:active{background:var(--ink);}
.adminBtnFull .hint{font-size:11px; color:var(--cream-dim);}
#placesList,#streetsList{max-height:160px; overflow-y:auto; border:1px solid var(--line); border-radius:8px;}
.placeRow{display:flex; justify-content:space-between; align-items:center; padding:8px 12px; font-size:13px; border-bottom:1px solid var(--line);}
.placeRow:last-child{border-bottom:none;}
.placeRow .del{color:var(--coral); cursor:pointer; font-size:16px; padding:2px 6px;}
#adminClose{position:absolute; top:14px; right:16px; color:var(--cream-dim); font-size:22px; cursor:pointer; background:none; border:none;}
.smallNote{font-size:11px; color:var(--cream-dim); line-height:1.5; margin-top:10px;}

/* ---------- quick-add floating input (admin add mode) ---------- */
#quickAdd{position:absolute; z-index:50; display:none; background:var(--ink-2); border:1px solid var(--amber); border-radius:8px; padding:8px; box-shadow:0 10px 30px rgba(0,0,0,.5);}
#quickAdd.show{display:flex; gap:6px;}
#quickAdd input{width:150px; background:var(--ink-3); border:1px solid var(--line); color:var(--cream); border-radius:6px; padding:8px; font-size:14px;}
#quickAdd button{background:var(--amber); border:none; color:#20140a; border-radius:6px; padding:0 12px; font-size:13px; cursor:pointer;}

#addModeBar{position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:60; display:none; background:var(--ink-2); border:1px solid var(--amber-dim); border-radius:30px; padding:8px 8px 8px 16px; align-items:center; gap:10px; box-shadow:0 10px 30px rgba(0,0,0,.5);}
#addModeBar.show{display:flex;}
#addModeBar span{font-size:12px; color:var(--cream-dim); letter-spacing:.06em; text-transform:uppercase;}
.segBtn{padding:8px 14px; border-radius:20px; border:1px solid var(--line); background:var(--ink-3); color:var(--cream-dim); font-size:12px; cursor:pointer;}
.segBtn.active{background:var(--amber); color:#20140a; border-color:var(--amber);}
#exitAddMode{background:none; border:none; color:var(--coral); font-size:20px; cursor:pointer; padding:4px 10px;}

#streetTraceBar{position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:60; display:none; background:var(--ink-2); border:1px solid var(--teal); border-radius:16px; padding:12px 14px; align-items:center; gap:8px; box-shadow:0 10px 30px rgba(0,0,0,.5); flex-wrap:wrap; max-width:94vw;}
#streetTraceBar.show{display:flex;}
#streetTraceBar select, #streetTraceBar input[type=text]{background:var(--ink-3); border:1px solid var(--line); color:var(--cream); border-radius:6px; padding:8px 10px; font-size:13px;}
#streetTraceBar button{padding:8px 12px; border-radius:16px; border:1px solid var(--line); background:var(--ink-3); color:var(--cream-dim); font-size:12px; cursor:pointer;}
#streetTraceBar button.primary{background:var(--teal); color:#06201e; border-color:var(--teal);}
#streetTraceBar .exit{background:none; border:none; color:var(--coral); font-size:20px; cursor:pointer; padding:2px 6px;}
#streetTraceHint{width:100%; font-size:11px; color:var(--cream-dim); text-align:center;}

#geoTraceBar{position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:60; display:none; background:var(--ink-2); border:1px solid var(--blue); border-radius:16px; padding:12px 14px; align-items:center; gap:10px; box-shadow:0 10px 30px rgba(0,0,0,.5); flex-wrap:wrap; max-width:94vw;}
#geoTraceBar.show{display:flex;}
#geoTraceBar span{font-size:12px; color:var(--cream-dim); letter-spacing:.06em; text-transform:uppercase;}
#geoTraceBar button{padding:8px 12px; border-radius:16px; border:1px solid var(--blue); background:var(--blue); color:#04182e; font-size:12px; cursor:pointer;}
#geoTraceBar .exit{background:none; border:1px solid var(--coral); color:var(--coral); font-size:14px; cursor:pointer; padding:6px 10px;}
#geoTraceHint{width:100%; font-size:11px; color:var(--cream-dim); text-align:center;}

#idleHint{position:absolute; bottom:8px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--cream-dim); z-index:20; opacity:.6;}

@media (max-width:480px){
  #brand .name{display:none;}
  #searchWrap{bottom:14px; right:12px;}
}