:root{
  --asphalt-950:#12161B;
  --asphalt-900:#171C22;
  --asphalt-800:#1F262E;
  --asphalt-700:#2A323C;
  --asphalt-600:#3A4552;
  --ink:#ECE9E2;
  --ink-dim:#98A2AE;
  --amber:#F5A623;
  --amber-dim:#C9840F;
  --mint:#4ADE80;
  --alert:#F0645C;
  --paper:#F4F2ED;
  --radius:10px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--paper);
  color:var(--ink);
}

.app{
  display:flex;
  height:100vh;
  min-height:100vh;
}

/* ---------- Sidebar ---------- */
.sidebar{
  width:400px;
  min-width:400px;
  background:var(--asphalt-950);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  border-right:1px solid var(--asphalt-700);
}

.brand{
  padding:24px 24px 16px;
  border-bottom:1px solid var(--asphalt-700);
}
.brand-eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 4px;
}
.brand-title{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-logo{
  width:54px;
  height:38px;
  object-fit:contain;
  margin-left: auto;
}
.brand h1{
  font-family:'Space Grotesk', sans-serif;
  font-size:21px;
  font-weight:700;
  margin:0;
  color:var(--ink);
  letter-spacing:-0.01em;
}

form{ padding:22px 24px 8px; }

.field{ margin-bottom:18px; }
.field-group{ margin-bottom:20px; }

label{
  display:block;
  font-family:'Space Grotesk', sans-serif;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--ink-dim);
  margin-bottom:7px;
  text-transform:uppercase;
}

input[type="text"]{
  width:100%;
  background:var(--asphalt-800);
  border:1px solid var(--asphalt-600);
  color:var(--ink);
  padding:10px 12px;
  border-radius:8px;
  font-family:'Inter', sans-serif;
  font-size:14px;
  transition:border-color .15s ease, background .15s ease;
}
input[type="text"]::placeholder{ color:#5C6672; }
input[type="text"]:focus{
  outline:none;
  border-color:var(--amber);
  background:var(--asphalt-700);
}
input[type="text"]:focus-visible{
  box-shadow:0 0 0 3px rgba(245,166,35,0.25);
}

.destination-row{
  display:flex;
  gap:8px;
  margin-bottom:8px;
}
.destination-row input{ flex:1; }

.btn-remove{
  background:var(--asphalt-800);
  border:1px solid var(--asphalt-600);
  color:var(--ink-dim);
  width:38px;
  border-radius:8px;
  cursor:pointer;
  font-size:14px;
  transition:all .15s ease;
}
.btn-remove:hover{ border-color:var(--alert); color:var(--alert); }

.btn-ghost{
  background:none;
  border:1px dashed var(--asphalt-600);
  color:var(--ink-dim);
  padding:8px 12px;
  border-radius:8px;
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  width:100%;
  transition:all .15s ease;
}
.btn-ghost:hover{ border-color:var(--amber); color:var(--amber); }

.radio-group{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.radio{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:'Inter', sans-serif;
  font-size:13.5px;
  font-weight:400;
  text-transform:none;
  color:var(--ink);
  cursor:pointer;
}
.radio input{ accent-color:var(--amber); width:15px; height:15px; }

#retourAdresse.hidden, .hidden{ display:none !important; }
#retourAdresse{ margin-top:6px; }

.btn-primary{
  width:100%;
  background:var(--amber);
  color:var(--asphalt-950);
  border:none;
  padding:13px;
  border-radius:8px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:14.5px;
  letter-spacing:0.01em;
  cursor:pointer;
  margin-top:6px;
  transition:background .15s ease, transform .1s ease;
}
.btn-primary:hover{ background:#FFB640; }
.btn-primary:active{ transform:scale(0.99); }
.btn-primary:disabled{ background:var(--asphalt-600); color:var(--ink-dim); cursor:wait; }

.status{
  margin:0 24px 16px;
  padding:10px 12px;
  border-radius:8px;
  font-size:13px;
  font-family:'JetBrains Mono', monospace;
  background:var(--asphalt-800);
  color:var(--ink-dim);
  border-left:3px solid var(--amber);
}
.status.error{ border-left-color:var(--alert); color:#FFC2BE; }

/* ---------- Manifest (signature element) ---------- */
.manifest{
  padding:20px 24px 28px;
  border-top:1px solid var(--asphalt-700);
  margin-top:auto;
}
.manifest h2{
  font-family:'Space Grotesk', sans-serif;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--ink-dim);
  margin:0 0 14px;
}

.stop{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.badge{
  flex:none;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--asphalt-800);
  border:1px solid var(--asphalt-600);
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  font-weight:600;
  color:var(--ink);
}
.badge-start{
  background:var(--mint);
  border-color:var(--mint);
  color:var(--asphalt-950);
}
.stop-info{ padding-top:2px; }
.stop-label{
  font-family:'Space Grotesk', sans-serif;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-dim);
  margin-bottom:1px;
}
.stop-address{ font-size:13.5px; color:var(--ink); line-height:1.35; }

.leg{
  display:flex;
  align-items:center;
  gap:12px;
  margin:2px 0 2px 12px;
  padding-left:14px;
}
.leg-line{
  width:1px;
  height:22px;
  background:repeating-linear-gradient(to bottom, var(--amber) 0 4px, transparent 4px 8px);
}
.leg-info{
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px;
  color:var(--amber);
  white-space:nowrap;
}

.manifest-total{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--asphalt-700);
  font-family:'Space Grotesk', sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
}

.footnote{
  padding:14px 24px 22px;
  font-size:11px;
  color:#5C6672;
  line-height:1.5;
  font-family:'JetBrains Mono', monospace;
}
.footnote a{ color:#7B8794; }

/* ---------- Map ---------- */
.map-wrap{ flex:1; position:relative; }
#map{ width:100%; height:100%; background:var(--asphalt-800); }

.pin{
  width:28px; height:28px;
  border-radius:50% 50% 50% 0;
  transform:rotate(45deg);
  background:var(--amber);
  border:2px solid var(--asphalt-950);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.35);
}
.pin > *{ transform:rotate(-45deg); }
.pin::after{
  content:attr(data-n);
}
.pin-start{ background:var(--mint); }

/* leaflet div icon: number injected as text, rotate back */
.pin-label{
  transform:rotate(-45deg);
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  font-weight:700;
  color:var(--asphalt-950);
}

@media (max-width: 860px){
  .app{ flex-direction:column; height:auto; min-height:100vh; }
  .sidebar{ width:100%; min-width:0; max-height:60vh; border-right:none; border-bottom:1px solid var(--asphalt-700); }
  .map-wrap{ height:60vh; }
}