html,body,#map{height:100%;margin:0;background:#000}
#map{position:fixed;top:0;left:0;right:0;bottom:0;z-index:0}
#hud{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:99999}
.brand{position:absolute;top:20px;left:20px;display:flex;align-items:center;gap:12px;background:rgba(28,31,36,.75);padding:10px 14px;border-radius:10px}
.page-title{position:absolute;top:20px;left:50%;transform:translateX(-50%);background:rgba(28,31,36,.75);padding:10px 14px;border-radius:10px}
.brand img{height:36px;filter:brightness(1.1) contrast(1.05)}
.title{color:#fff;font:600 16px "Segoe UI",Roboto,Inter,Arial,sans-serif;letter-spacing:.2px}
.metrics{position:absolute;top:20px;right:20px;display:flex;gap:14px;background:rgba(28,31,36,.75);padding:10px 14px;border-radius:10px}
.metrics div{display:flex;flex-direction:column;align-items:flex-start;color:#cfd6de;font:500 12px "Segoe UI",Roboto,Inter,Arial,sans-serif}
.metrics strong{color:#fff;font:600 16px "Segoe UI",Roboto,Inter,Arial,sans-serif}
#hud .controls{position:absolute;top:86px;right:20px;display:flex;gap:8px;z-index:100000;pointer-events:auto}
#hud .controls button{width:36px;height:36px;border:none;border-radius:50%;background:rgba(255,255,255,.5) !important;box-shadow:0 2px 12px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;cursor:pointer}
#hud .controls button img{width:18px;height:18px;filter:brightness(1.1) contrast(1.05)}
#progress{position:absolute;bottom:72px;left:20px;right:20px;height:6px;background:rgba(255,255,255,.18);border-radius:999px;overflow:hidden}
#bar{height:100%;width:0;background:#0078D4}
#badge{position:absolute;top:80px;left:50%;transform:translateX(-50%);background:rgba(0,120,212,.9);color:#fff;padding:8px 14px;border-radius:999px;font:600 14px "Segoe UI",Roboto,Inter,Arial,sans-serif;box-shadow:0 4px 16px rgba(0,0,0,.3);z-index:100000}
.hidden{display:none}
#footer{position:absolute;bottom:20px;left:20px;color:#cfd6de;background:rgba(28,31,36,.75);padding:8px 12px;border-radius:10px;font:500 12px "Segoe UI",Roboto,Inter,Arial,sans-serif;z-index:100000}
.leaflet-container{background:#000}
#speedbox{position:absolute;bottom:20px;right:20px;display:flex;gap:8px;align-items:center;background:rgba(28,31,36,.75);padding:8px 12px;border-radius:10px;pointer-events:auto;z-index:100002}
#speedbox span{color:#cfd6de;font:500 12px "Segoe UI",Roboto,Inter,Arial,sans-serif}
#speedbox input{width:64px;height:28px;border:none;border-radius:8px;background:rgba(255,255,255,.9);color:#1C1F24;padding:0 8px;font:600 12px "Segoe UI",Roboto,Inter,Arial,sans-serif}
#speedbox button{height:28px;padding:0 12px;border:none;border-radius:8px;background:#0078D4;color:#fff;cursor:pointer;font:600 12px "Segoe UI",Roboto,Inter,Arial,sans-serif}
/* Labels permanents pour les arrêts */
.leaflet-tooltip.stop-label{
  background: rgba(28,31,36,.85);
  color: #fff;
  border: none;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  padding: 4px 10px;
  border-radius: 999px;
  font: 600 13px "Segoe UI",Roboto,Inter,Arial,sans-serif;
  pointer-events: none;
  opacity: 1 !important;
}
/* Fallback si Leaflet CSS est filtré côté VPS */
.leaflet-pane.leaflet-tooltip-pane{z-index:100000}
.leaflet-tooltip{position:absolute;opacity:1;transform:translate3d(0,0,0);will-change:transform}
.leaflet-tooltip-left{margin-right:6px}
.leaflet-tooltip-right{margin-left:6px}
/* Safe-area (notches) */
.brand{top:calc(20px + env(safe-area-inset-top));left:calc(20px + env(safe-area-inset-left))}
.page-title{top:calc(20px + env(safe-area-inset-top))}
.metrics{top:calc(20px + env(safe-area-inset-top));right:calc(20px + env(safe-area-inset-right))}
#footer{bottom:calc(20px + env(safe-area-inset-bottom));left:calc(20px + env(safe-area-inset-left))}
#progress{bottom:calc(72px + env(safe-area-inset-bottom))}
.brand{top:calc(20px + env(safe-area-inset-top));left:calc(20px + env(safe-area-inset-left))}
.page-title{top:calc(20px + env(safe-area-inset-top))}
#speedbox{bottom:calc(20px + env(safe-area-inset-bottom));right:calc(20px + env(safe-area-inset-right))}

/* Tablet */
@media (max-width: 1024px){
  .brand{gap:10px;padding:8px 12px}
  .brand img{height:32px}
  .title{font-weight:600;font-size:14px}
  .metrics{gap:10px;padding:8px 12px;flex-wrap:wrap}
  .metrics div{font-size:11px}
  .metrics strong{font-size:14px}
  #hud .controls button{width:34px;height:34px}
  #hud .controls button img{width:16px;height:16px}
  #progress{height:5px}
  .leaflet-tooltip.stop-label{font-size:12px;padding:3px 8px}
}

/* Phone */
@media (max-width: 600px){
  .brand{gap:8px;padding:6px 10px}
  .brand img{height:28px}
  .title{font-weight:600;font-size:12px}
  .metrics{top:auto;bottom:calc(20px + env(safe-area-inset-bottom));left:20px;right:20px;justify-content:space-between;flex-wrap:wrap}
  .metrics div{font-size:10px}
  .metrics strong{font-size:13px}
  #hud .controls{top:auto;bottom:calc(90px + env(safe-area-inset-bottom));right:20px}
  #hud .controls button{width:32px;height:32px}
  #hud .controls button img{width:16px;height:16px}
  #progress{bottom:calc(54px + env(safe-area-inset-bottom));height:4px}
  #badge{top:auto;bottom:calc(90px + env(safe-area-inset-bottom))}
  .leaflet-tooltip.stop-label{font-size:11px}
}