:root{
  --primary:#0a84ff;
  --dark:#020617;
  --glass:rgba(2,6,23,.92);
  --light:#f8fafc;
  --green:#22c55e;
  --muted:rgba(248,250,252,.72);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:Segoe UI,system-ui,sans-serif;background:var(--dark);color:var(--light)}

.topbar{
  position:fixed;top:0;width:100%;height:56px;
  background:linear-gradient(to right,#020617,#020617cc);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;z-index:100
}
.logo{color:var(--primary);font-size:20px;font-weight:800;letter-spacing:.2px}
.gps-status{color:var(--green);font-size:12px}

#map{position:absolute;top:56px;bottom:0;width:100%}

/* Instruction */
.instruction-banner{
  position:fixed;top:70px;left:50%;transform:translateX(-50%);
  width:min(92%,520px);
  background:var(--glass);
  backdrop-filter:blur(12px);
  border-radius:18px;
  padding:12px 16px;
  display:flex;gap:12px;align-items:center;
  z-index:200;
  box-shadow:0 12px 30px rgba(0,0,0,.4)
}
.instruction-text{display:flex;flex-direction:column;gap:2px}
.instruction-main{font-size:15px;font-weight:700}
.instruction-sub{font-size:12px;color:var(--muted)}

.arrow{
  width:38px;height:38px;border-radius:50%;
  background:var(--primary);
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s ease;
  flex:0 0 38px;
}
.arrow::after{content:"↑";color:white;font-size:18px;font-weight:900}
.arrow.left{transform:rotate(-90deg)}
.arrow.right{transform:rotate(90deg)}
.arrow.uturn{transform:rotate(180deg)}
.arrow.straight{transform:rotate(0deg)}

/* Search */
.search-panel{
  position:fixed;top:130px;left:50%;transform:translateX(-50%);
  width:min(94%,520px);
  z-index:180;
}
.input-wrapper{position:relative}
#addressInput{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:none;outline:none;
  font-size:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}

#addressSuggestions{
  position:absolute;top:50px;width:100%;
  background:#020617;border-radius:14px;
  list-style:none;display:none;
  max-height:240px;overflow:auto;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
  z-index:300
}
#addressSuggestions li{
  padding:11px 14px;
  cursor:pointer;
  border-bottom:1px solid rgba(248,250,252,.06)
}
#addressSuggestions li:hover{background:rgba(10,132,255,.35)}
#addressSuggestions li:last-child{border-bottom:none}

.routes-panel{
  margin-top:10px;
  background:var(--glass);
  backdrop-filter:blur(12px);
  border-radius:18px;
  padding:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}

.route-card{
  width:100%;
  border:none;
  background:#071126;
  color:var(--light);
  border-radius:16px;
  padding:12px 12px;
  text-align:left;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  transition:transform .12s ease, background .18s ease;
}
.route-card:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.route-card:not(:disabled):hover{
  transform:translateY(-1px);
  background:rgba(10,132,255,.18);
}
.route-card.active{
  background:rgba(10,132,255,.28);
  outline:2px solid rgba(10,132,255,.45);
}
.route-title{font-weight:800;font-size:13px}
.route-meta{font-size:12px;color:var(--muted);white-space:nowrap}

.action-btn{
  width:100%;
  margin-top:6px;
  background:var(--primary);
  border:none;
  color:white;
  padding:12px 14px;
  border-radius:16px;
  font-weight:900;
  cursor:pointer;
}

/* HUD */
.bottom-hud{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  display:flex;gap:12px;z-index:220
}
.hud-item{
  background:var(--glass);
  backdrop-filter:blur(12px);
  border-radius:18px;
  padding:10px 16px;
  text-align:center;
  min-width:92px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.hud-item span{font-size:11px;opacity:.75}
.hud-item strong{font-size:18px}

@media(max-width:480px){
  .instruction-main{font-size:14px}
  .hud-item strong{font-size:16px}
  .route-meta{font-size:11px}
}

/* =========================
   MODE NAVIGATION ACTIVE
========================= */

/* Quand un trajet est lancé */
body.navigation-active .routes-panel {
  display: none;
}

/* Champ adresse devient compact */
body.navigation-active .search-panel {
  top: 90px;
}

body.navigation-active #addressInput {
  background: rgba(2,6,23,.85);
  color: #fff;
  font-weight: 600;
  pointer-events: none; /* pas modifiable pendant la navigation */
}

/* Bandeau instruction plus visible */
body.navigation-active .instruction-banner {
  top: 70px;
  width: min(94%, 520px);
}

/* HUD toujours visible */
body.navigation-active .bottom-hud {
  opacity: 1;
}