:root{
  --land:#bfc4c7; --sea:#d3dce4; --line:#9aa3ab; --ink:#2b3138;
  --card:rgba(255,255,255,.92); --accent:#2f9de0;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--sea);
  font:14px/1.4 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink)}
#map{position:absolute;inset:0;background:var(--sea)}
.off{display:none!important}
.leaflet-container{background:var(--sea);font-family:inherit}

/* Tout s'empile en colonne dans le coin haut gauche : horloge, choix du
   produit, calques a superposer, puis retour vers la carte complete. */
#hud{position:absolute;top:0;left:0;z-index:800;display:flex;flex-direction:column;
  align-items:stretch;gap:8px;padding:10px 14px;pointer-events:none;width:322px;max-width:calc(100% - 28px)}
.hud-left{background:var(--card);border-radius:11px;padding:7px 14px;pointer-events:auto;
  box-shadow:0 2px 10px rgba(0,0,0,.16);min-width:132px}
#clock{font-size:21px;font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums;line-height:1.1}
#sub{font-size:11px;color:#5d6874;margin-top:1px}
#modes{display:flex;background:var(--card);border-radius:11px;overflow:hidden;
  pointer-events:auto;box-shadow:0 2px 10px rgba(0,0,0,.16)}
#modes button{flex:1}
#modes button{border:0;background:transparent;font:inherit;font-size:12.5px;padding:9px 15px;
  cursor:pointer;color:#4a555f;border-right:1px solid #dfe4e8;transition:.12s}
#modes button:last-child{border-right:0}
#modes button:hover{background:#eef2f5}
#modes button.on{background:var(--accent);color:#fff}
.hud-row{display:flex;gap:8px;pointer-events:auto}
.hud-row .tgl{flex:1}
.hud-back{align-self:flex-start;pointer-events:auto;text-align:center;
  width:calc(50% - 4px)}
.tgl{background:var(--card);border:0;border-radius:11px;padding:9px 13px;font:inherit;
  font-size:12.5px;color:#4a555f;cursor:pointer;text-decoration:none;
  box-shadow:0 2px 10px rgba(0,0,0,.16);transition:.12s}
.tgl:hover{background:#eef2f5}
.tgl.on{background:var(--accent);color:#fff}

#scale{position:absolute;right:14px;bottom:14px;z-index:800;
  background:var(--card);border-radius:11px;padding:9px 12px;width:326px;
  box-shadow:0 2px 10px rgba(0,0,0,.16)}
#scale-cv{width:300px;height:10px;border-radius:3px;display:block}
#scale-ticks{display:flex;justify-content:space-between;font-size:10px;color:#5d6874;
  margin-top:3px;font-variant-numeric:tabular-nums}
#scale-src{font-size:10px;color:#7d8894;margin-top:5px}










#age{font-size:11px;color:#2f9de0;margin-top:2px;font-weight:600;font-variant-numeric:tabular-nums}
.ev-raster{transition:opacity .18s linear}
@media (max-width:760px){
  #modes button{padding:9px 10px;font-size:11.5px}
  #scale{left:8px;right:8px;width:auto}
  #modes button{padding:9px 10px;font-size:11.5px}
  #scale-cv{width:100%}
}

.lv-city{position:relative;pointer-events:none}
.lv-dot{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;
  background:#55606b;box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
.lv-city.cap .lv-dot{width:5px;height:5px;left:-2.5px;top:-2.5px;background:#3b444d}
.lv-city.cap .lv-nm{font-weight:600;color:#2b333b}
.lv-nm{position:absolute;left:6px;top:-8px;font-size:11px;color:#39424b;font-weight:500;
  white-space:nowrap;text-shadow:0 0 3px #fff,0 0 6px #fff,0 1px 2px #fff}

/* zoom sous la barre d'outils, hors de la legende et de la frise */
.leaflet-top.leaflet-right{top:58px;right:0}
.leaflet-control-zoom{border:0!important;border-radius:11px!important;overflow:hidden;
  margin-right:14px!important;box-shadow:0 2px 10px rgba(0,0,0,.16)}
.leaflet-control-zoom a{background:rgba(255,255,255,.92)!important;color:#39424b!important;
  border-bottom:1px solid #e2e7eb!important;width:32px;height:32px;line-height:32px}
.leaflet-control-zoom a:hover{background:#eef2f5!important}