/* ======================================================================
   Flux Montréal — Carte V2.2
   Refonte visuelle plus propre et lisible.
   ====================================================================== */

:root{
  --mv22-bg:#08111e;
  --mv22-panel:#0d1a2b;
  --mv22-panel2:#12243a;
  --mv22-blue:#5aa9ff;
  --mv22-blue2:#8ccaff;
  --mv22-green:#68f5a0;
  --mv22-text:#f0f7ff;
  --mv22-muted:#94a9bd;
  --mv22-line:rgba(143,180,220,.17);
  --mv22-shadow:0 24px 64px rgba(0,0,0,.44);
  --hm-bus-w:288px;
  --hm-train-w:288px;
}

/* ---------------- POPUPS ---------------- */
.leaflet-popup.hm-bus-popup .leaflet-popup-content-wrapper,
.leaflet-popup.hm-train-popup .leaflet-popup-content-wrapper,
.leaflet-popup.hm-bixi-popup .leaflet-popup-content-wrapper,
.leaflet-popup.hm-entraves-popup .leaflet-popup-content-wrapper{
  background:linear-gradient(180deg,rgba(14,29,49,.985),rgba(8,18,31,.985)) !important;
  border:1px solid rgba(126,194,255,.22) !important;
  border-radius:16px !important;
  box-shadow:var(--mv22-shadow),inset 0 1px 0 rgba(255,255,255,.03) !important;
  overflow:hidden !important;
}

.leaflet-popup.hm-bus-popup .leaflet-popup-tip,
.leaflet-popup.hm-train-popup .leaflet-popup-tip,
.leaflet-popup.hm-bixi-popup .leaflet-popup-tip,
.leaflet-popup.hm-entraves-popup .leaflet-popup-tip{
  background:#0a1626 !important;
}

.leaflet-popup.hm-bus-popup,
.leaflet-popup.hm-train-popup{width:288px !important;max-width:288px !important}

.leaflet-popup.hm-bus-popup .leaflet-popup-content-wrapper,
.leaflet-popup.hm-train-popup .leaflet-popup-content-wrapper{width:288px !important;min-width:288px !important;max-width:288px !important}

.leaflet-popup.hm-bus-popup .leaflet-popup-content,
.leaflet-popup.hm-train-popup .leaflet-popup-content{padding:15px !important;margin:0 !important}

.leaflet-popup.hm-bus-popup .hm-popup-wrap,
.leaflet-popup.hm-train-popup .hm-popup-wrap{display:block !important;text-align:left !important}

.leaflet-popup.hm-bus-popup .hm-popup-head,
.leaflet-popup.hm-train-popup .hm-popup-head{
  position:relative !important;
  display:block !important;
  width:100% !important;
  padding:30px 34px 12px 0 !important;
  margin:0 !important;
  text-align:left !important;
  border-bottom:1px solid rgba(143,180,220,.10) !important;
}

/* vrai badge lisible, pas un petit texte */
.leaflet-popup.hm-bus-popup .hm-popup-head::before,
.leaflet-popup.hm-train-popup .hm-popup-head::before{
  content:"EN DIRECT";
  position:absolute;
  top:0;
  left:0;
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 8px 0 20px;
  border-radius:999px;
  color:#c8f8d5;
  background:rgba(104,245,160,.08);
  border:1px solid rgba(104,245,160,.24);
  font-size:9px;
  line-height:1;
  font-weight:800 !important;
  letter-spacing:.10em;
}

.leaflet-popup.hm-bus-popup .hm-popup-head::after,
.leaflet-popup.hm-train-popup .hm-popup-head::after{
  content:"";
  position:absolute;
  top:8px;
  left:8px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--mv22-green);
  box-shadow:0 0 10px rgba(104,245,160,.55);
}

.leaflet-popup.hm-bus-popup .hm-title,
.leaflet-popup.hm-train-popup .hm-title{
  color:var(--mv22-text) !important;
  font-size:20px !important;
  font-weight:780 !important;
  letter-spacing:-.035em !important;
  line-height:1.06 !important;
  text-align:left !important;
  margin:0 !important;
}

.leaflet-popup.hm-bus-popup .hm-sub,
.leaflet-popup.hm-train-popup .hm-sub{
  margin:6px 0 0 !important;
  color:#8499ad !important;
  font-size:11px !important;
  font-weight:600 !important;
  text-align:left !important;
}

.leaflet-popup.hm-bus-popup .hm-status-row,
.leaflet-popup.hm-train-popup .hm-status-row{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:7px !important;
  width:100% !important;
  margin-top:11px !important;
}

.leaflet-popup.hm-bus-popup .hm-status-pill,
.leaflet-popup.hm-train-popup .hm-status-pill{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  min-height:38px !important;
  padding:8px 10px !important;
  margin:0 !important;
  border-radius:9px !important;
  border:1px solid rgba(143,180,220,.11) !important;
  background:rgba(90,169,255,.035) !important;
  color:#dbe8f4 !important;
  font-size:11.5px !important;
  font-weight:650 !important;
}

.leaflet-popup.hm-bus-popup .hm-status-pill i,
.leaflet-popup.hm-train-popup .hm-status-pill i{color:var(--mv22-blue2) !important;font-size:15px !important}

.leaflet-popup.hm-bus-popup .hm-status-pill[title="Électrique"]{
  color:#ccf8d8 !important;
  border-color:rgba(104,245,160,.20) !important;
  background:rgba(104,245,160,.055) !important;
}

.leaflet-popup.hm-bus-popup .leaflet-popup-close-button,
.leaflet-popup.hm-train-popup .leaflet-popup-close-button,
.leaflet-popup.hm-bixi-popup .leaflet-popup-close-button,
.leaflet-popup.hm-entraves-popup .leaflet-popup-close-button{
  top:9px !important;
  right:9px !important;
  width:27px !important;
  height:27px !important;
  line-height:25px !important;
  border:1px solid rgba(143,180,220,.13) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.025) !important;
  color:#9fb3c6 !important;
}

/* ---------------- BADGE MODE CARTE ---------------- */
.hm-mapmode-overlay{
  top:66px !important;
  left:auto !important;
  right:10px !important;
  z-index:1500 !important;
}

.hm-mapmode-ctl{
  padding:7px 10px !important;
  border-radius:10px !important;
  background:rgba(7,16,28,.92) !important;
  border:1px solid rgba(126,194,255,.19) !important;
  box-shadow:0 13px 34px rgba(0,0,0,.30) !important;
  color:#dce9f5 !important;
}

.hm-mapmode-row{gap:7px !important}
.hm-modechip{width:23px !important;height:23px !important;border-radius:7px !important;background:#11243a !important;border:1px solid rgba(90,169,255,.14) !important;box-shadow:none !important}

/* ---------------- LÉGENDE ---------------- */
.hm-legend-card{
  min-width:150px !important;
  padding:9px !important;
  border-radius:12px !important;
  background:rgba(7,16,28,.92) !important;
  border:1px solid rgba(126,194,255,.16) !important;
  box-shadow:0 15px 40px rgba(0,0,0,.32) !important;
}
.hm-legend-title{font-size:9px !important;color:#8499ad !important;margin-bottom:7px !important}
#hm-dynamic-legend .hm-legend-row{padding:7px !important;border-radius:8px !important;background:rgba(90,169,255,.025) !important;border-color:rgba(143,180,220,.08) !important}
#hm-dynamic-legend .hm-legend-text-main{font-size:10.5px !important;color:#d5e3ef !important}
#hm-dynamic-legend .hm-legend-text-sub{font-size:9px !important;color:#73899d !important}

/* ---------------- CONTROLS ---------------- */
.leaflet-bar,.leaflet-control-zoom{
  border:1px solid rgba(126,194,255,.15) !important;
  border-radius:10px !important;
  overflow:hidden !important;
  background:rgba(7,16,28,.90) !important;
  box-shadow:0 13px 34px rgba(0,0,0,.28) !important;
}
.leaflet-bar a,.leaflet-control-zoom a{background:transparent !important;color:#b8cadb !important;border-bottom-color:rgba(143,180,220,.08) !important}
.leaflet-bar a:hover,.leaflet-control-zoom a:hover{background:rgba(90,169,255,.08) !important;color:#fff !important}

/* ---------------- MARKERS ---------------- */
.hm-bus-dot{width:9px !important;height:9px !important;box-shadow:0 2px 7px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.07) !important}
.hm-train-pin-wrap{width:27px !important;height:27px !important;background:linear-gradient(180deg,#347bb9,#215681) !important;border-color:rgba(126,194,255,.45) !important;box-shadow:0 7px 18px rgba(0,0,0,.42),0 0 0 3px rgba(90,169,255,.05) !important}

/* ---------------- MOBILE ---------------- */
@media(max-width:768px){
  .leaflet-popup.hm-bus-popup,.leaflet-popup.hm-train-popup{
    width:min(300px,calc(100vw - 28px)) !important;
    max-width:min(300px,calc(100vw - 28px)) !important;
  }
  .leaflet-popup.hm-bus-popup .leaflet-popup-content-wrapper,
  .leaflet-popup.hm-train-popup .leaflet-popup-content-wrapper{
    width:100% !important;min-width:0 !important;max-width:100% !important;
  }
  .hm-mapmode-overlay{top:56px !important;right:8px !important}
  .leaflet-popup.hm-bus-popup .hm-title,.leaflet-popup.hm-train-popup .hm-title{font-size:19px !important}
}