/*
  Meteo360 Radar OGD PRO — m360rad.css
  Futuristic / pro theme (scoped) + layout fixes (Leaflet + flex).
  Version: 3.6.0
*/

/* ---------- Root + theme variables (scoped) ---------- */
.m360rad-root{
  isolation: isolate;
  /* Keep CSS console clean across browsers (avoid vendor-only smoothing props) */
  line-height: 1.25;
  /* embed helpers */
  height: var(--m360h, auto);
  min-height: var(--m360min, 560px);

  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  --m360-bg0: #ffffff;
  --m360-bg1: #f1f5f9;
  --m360-surface: rgba(255,255,255,.92);
  --m360-surface2: rgba(248,250,252,.92);
  --m360-border: rgba(15,23,42,.12);
  --m360-border2: rgba(2,132,199,.22);
  --m360-text: #0f172a;
  --m360-muted: rgba(15,23,42,.62);
  --m360-accent: #0284c7;
  --m360-accent2: #0ea5e9;
  --m360-ok: #16a34a;
  --m360-warn: #f59e0b;
  --m360-bad: #dc2626;

  color: var(--m360-text);
}

/* ---------------------------------------------------------
   Dock / Split layout (full-width + sidebar)
   Enabled via shortcode: dock="1"  → adds .m360rad-dock on root
--------------------------------------------------------- */

.m360rad-root.m360rad-dock{
  max-width: none;
  padding: 0;
  /* Break out of theme containers → real full-width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: hidden;
}

.m360rad-root.m360rad-dock .m360rad-card{
  border-radius: 0;
}

.m360rad-root.m360rad-dock .m360rad-split{
  display: flex;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

.m360rad-root.m360rad-dock .m360rad-main{
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.m360rad-root.m360rad-dock .m360rad-side{
  flex: 0 0 clamp(360px, 32vw, 520px);
  min-width: 320px;
  max-width: 560px;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--m360-surface);
  border: 1px solid var(--m360-border);
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
}

.m360rad-root.m360rad-dock .m360rad-sideScroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  scrollbar-width: thin;
}

.m360rad-root.m360rad-dock .m360rad-sideScroll *{ min-width: 0; box-sizing: border-box; }

.m360rad-root.m360rad-dock .m360rad-sideScroll::-webkit-scrollbar{ width: 10px; }
.m360rad-root.m360rad-dock .m360rad-sideScroll::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.22);
  border-radius: 999px;
  border: 3px solid rgba(2,6,23,.35);
}

.m360rad-root.m360rad-dock .m360rad-sideFooter{
  flex: 0 0 auto;
  padding: 10px 12px;
  border-top: 1px solid var(--m360-border);
  background: linear-gradient(to top, rgba(2,6,23,.18), rgba(2,6,23,0));
}

.m360rad-attrib,
.m360rad-attribInline{
  font-size: 12px;
  line-height: 1.35;
  color: rgba(226,232,240,.78);
}

.m360rad-attrib strong,
.m360rad-attribInline strong{
  color: rgba(226,232,240,.92);
  font-weight: 700;
}

.m360rad-attribInline{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--m360-border);
  background: rgba(2,6,23,.22);
}

/* In dock mode: let the sidebar handle the scroll (avoid nested scroll + fixed max-heights) */
.m360rad-root.m360rad-dock .m360rad-layers{
  width: 100%;
  max-height: none;
  overflow: visible;
}
.m360rad-root.m360rad-dock .m360rad-favs{
  width: 100%;
}

/* In dock mode the sidebar is always visible → keep panels open */
.m360rad-root.m360rad-dock .m360rad-favs,
.m360rad-root.m360rad-dock .m360rad-layers{
  display: block;
}

/* Close buttons not needed in dock mode */
.m360rad-root.m360rad-dock .m360rad-favs [data-action="fav-close"],
.m360rad-root.m360rad-dock .m360rad-layers [data-action="layers-close"]{
  display: none;
}

/* Hide the popover toggles (menu is already on the left) */
.m360rad-root.m360rad-dock .m360rad-controls [data-action="favs"],
.m360rad-root.m360rad-dock .m360rad-controls [data-action="layers"]{
  display: none;
}

/* On small screens, stack sidebar above map and re-show the toggles */
@media (max-width: 980px){
  .m360rad-root.m360rad-dock .m360rad-split{ flex-direction: column; }
  .m360rad-root.m360rad-dock .m360rad-side{ max-width: none; flex: 0 0 auto; }
  .m360rad-root.m360rad-dock .m360rad-controls [data-action="favs"],
  .m360rad-root.m360rad-dock .m360rad-controls [data-action="layers"]{
    display: inline-flex;
  }
}

/* subtle background grid + glow */
.m360rad-root::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 0;
  background:
    radial-gradient(1000px 600px at 15% 20%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(900px 520px at 85% 12%, rgba(167,139,250,.16), transparent 60%),
    linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,0));
  filter: blur(0px);
  opacity: 1;
}

/* Make sure ::before can position relative to root */
.m360rad-root{ position:relative; }

/* ---------- Card ---------- */
.m360rad-card{
  z-index: 1;
  position: relative;
  background: linear-gradient(180deg, rgba(8,12,28,.84), rgba(6,8,20,.82));
  border: 1px solid var(--m360-border);
  border-radius: 20px;
  padding: 12px;
  box-shadow:
    0 28px 70px rgba(0,0,0,.40),
    0 0 0 1px rgba(34,211,238,.08) inset;

  height: 100%;
  min-height: 0;     /* FIX flex overflow */
  overflow: hidden;  /* FIX for embeds */

  display: flex;
  flex-direction: column;
  gap: 10px;

  backdrop-filter: blur(10px);
}

/* ---------- Topbar ---------- */
.m360rad-topbar{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content: space-between;
  padding: 12px;
  border-radius: 18px;
  background: var(--m360-surface);
  border: 1px solid var(--m360-border);
  box-shadow:
    0 16px 40px rgba(0,0,0,.25),
    0 0 0 1px rgba(34,211,238,.10) inset;
}

.m360rad-topbar > div:first-child{
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
}

.m360rad-title{
  font-weight: 1000;
  letter-spacing: .2px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m360rad-sub{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--m360-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m360rad-right{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
  min-width: 0;
}

/* ---------- Buttons / Segments ---------- */
.m360rad-seg{
  display:inline-flex;
  background: var(--m360-surface2);
  border: 1px solid var(--m360-border);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}

.m360rad-btn{
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.55);
  color: var(--m360-text);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 1000;
  font-size: 12px;
  cursor: pointer;
  box-shadow:
    0 14px 28px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.04) inset;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

.m360rad-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.34);
  box-shadow:
    0 18px 38px rgba(0,0,0,.34),
    0 0 0 1px rgba(34,211,238,.18) inset,
    0 0 18px rgba(34,211,238,.10);
}

.m360rad-btn:active{ transform: translateY(0px) scale(.99); }

/* ---------- Accessibility / focus ---------- */
.m360rad-root :focus-visible{
  outline: 2px solid var(--m360-accent);
  outline-offset: 2px;
}
.m360rad-btn:focus-visible{
  outline: 2px solid var(--m360-accent);
  outline-offset: 2px;
}
.m360rad-root .sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}


.m360rad-btn--seg{
  border-radius: 999px;
  padding: 8px 10px;
  background: transparent;
  box-shadow: none;
}

.m360rad-btn--seg.is-active{
  background: linear-gradient(90deg, rgba(34,211,238,.25), rgba(167,139,250,.18));
  border-color: rgba(34,211,238,.55);
  box-shadow:
    0 0 0 1px rgba(34,211,238,.20) inset,
    0 0 18px rgba(34,211,238,.12);
}

.m360rad-btn--seg.is-on{
  background: linear-gradient(90deg, rgba(52,211,153,.25), rgba(34,211,238,.18));
  border-color: rgba(52,211,153,.55);
  box-shadow:
    0 0 0 1px rgba(52,211,153,.20) inset,
    0 0 18px rgba(52,211,153,.12);
}

/* ---------- Opacity controls ---------- */
.m360rad-op{
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--m360-surface2);
  border: 1px solid var(--m360-border);
  border-radius: 16px;
  padding: 8px 10px;
}

.m360rad-opRow{ display:flex; gap:8px; align-items:center; }
.m360rad-opRow label{ font-size:11px; font-weight:1000; color: var(--m360-muted); }
.m360rad-opRow input[type="range"]{ width: 120px; }
.m360rad-opRow span{ font-size:11px; font-weight:1000; color: var(--m360-text); min-width: 34px; text-align: right; }

/* ---------- Range styling ---------- */
.m360rad-root input[type="range"]{
  accent-color: var(--m360-accent);
}
.m360rad-root input[type="range"]::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(148,163,184,.22);
}
.m360rad-root input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  margin-top: -5px;
  background: var(--m360-text);
  border: 1px solid rgba(148,163,184,.35);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.m360rad-root input[type="range"]:focus-visible::-webkit-slider-thumb{
  border-color: rgba(34,211,238,.65);
  box-shadow: 0 0 0 4px rgba(34,211,238,.18), 0 10px 24px rgba(0,0,0,.35);
}


/* ---------- Badge ---------- */
.m360rad-badge{
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.45);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 1000;
  font-size: 12px;
  box-shadow: 0 14px 28px rgba(0,0,0,.26);
}
.m360rad-badge.is-ok{ border-color: rgba(52,211,153,.40); box-shadow: 0 14px 28px rgba(0,0,0,.26), 0 0 18px rgba(52,211,153,.10); }
.m360rad-badge.is-warn{ border-color: rgba(251,191,36,.40); box-shadow: 0 14px 28px rgba(0,0,0,.26), 0 0 18px rgba(251,191,36,.10); }
.m360rad-badge.is-bad{ border-color: rgba(251,113,133,.40); box-shadow: 0 14px 28px rgba(0,0,0,.26), 0 0 18px rgba(251,113,133,.10); }

/* ---------- Map ---------- */
.m360rad-mapWrap{
  position: relative;
  flex: 1 1 auto;
  min-height: 320px; /* keep map usable */
  display: flex;
  gap: 0;
}

.m360rad-mapWrap.is-compare{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

.m360rad-mapPane{
  position: relative;
  width: 100%;
  height: auto;
  min-height: 320px;
  aspect-ratio: var(--m360-pane-ar, 1.109375);
}

.m360rad-mapPane .m360rad-map{
  height: 100%;
  min-height: 320px;
}

.m360rad-mapTag{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2px;
  background: rgba(2,6,23,.65);
  border: 1px solid rgba(148,163,184,.22);
  color: rgba(226,232,240,.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  pointer-events: none;
}

.m360rad-mapTag--right{ left: auto; right: 12px; }

.m360rad-map{
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--m360-border);
  background: rgba(0,0,0,.15);
  box-shadow:
    0 18px 44px rgba(0,0,0,.32),
    0 0 0 1px rgba(34,211,238,.08) inset;
}

/* Radar + overlays: rendu type MeteoSuisse (dégradé lisse + net)
   - on laisse le navigateur lisser (pas de pixelated)
   - on améliore la netteté via PNG upscalées + léger unsharp côté serveur
*/
.leaflet-m360_overlay-pane img,
.leaflet-m360_wx-pane img,
.leaflet-m360_wx2-pane img{
  image-rendering: auto !important;
  -ms-interpolation-mode: bicubic !important;
  backface-visibility: hidden;
  will-change: transform;
  transform: translateZ(0);
  /* Micro-boost visuel (léger) */
  filter: contrast(1.05) saturate(1.06);
}

.m360rad-root .leaflet-m360_overlay-pane img{
  transition: opacity .16s ease;
}

.leaflet-m360_overlay-pane canvas,
.leaflet-m360_wx-pane canvas,
.leaflet-m360_wx2-pane canvas{
  image-rendering: auto !important;
  -ms-interpolation-mode: bicubic !important;
}


/* Leaflet controls on dark */
.m360rad-root .leaflet-control a,
.m360rad-root .leaflet-control{
  background: rgba(15,23,42,.75);
  color: var(--m360-text);
  border-color: rgba(148,163,184,.20);
}
.m360rad-root .leaflet-control-attribution{
  background: rgba(15,23,42,.60);
  color: rgba(226,232,240,.85);
}
.m360rad-root .leaflet-control-attribution a{ color: rgba(34,211,238,.9); }

/* ---------- Cells arrow marker ---------- */
.m360rad-arrowIcon{ background: transparent; border: none; }
.m360rad-arrow{
  font-size: 18px;
  font-weight: 1000;
  text-shadow:
    0 0 10px rgba(0,0,0,.55),
    0 0 16px rgba(34,211,238,.15);
}

/* ---------- Cellules: anneaux (épaisseur + clignotement) ---------- */
.m360rad-cellRing{ stroke-linecap: round; stroke-linejoin: round; }
@keyframes m360radRingBlink{
  0%,100%{ stroke-opacity: .25; }
  50%{ stroke-opacity: 1; }
}
.m360rad-cellRing--blink{ animation: m360radRingBlink 1.2s infinite; }
.m360rad-cellRing--blinkFast{ animation-duration: .8s; }

/* ---------- Scale ---------- */
.m360rad-scale{
  background: var(--m360-surface);
  border: 1px solid var(--m360-border);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

.m360rad-scale--wx{ margin-top: 10px; }

.m360rad-scaleHead{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.m360rad-scaleTitle{ font-weight: 1000; font-size: 12px; color: var(--m360-text); }
.m360rad-scaleHint{ font-weight: 900; font-size: 11px; color: var(--m360-muted); }

.m360rad-scaleBar{
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.m360rad-scaleTicks{ position: relative; height: 18px; margin-top: 8px; }
.m360rad-scaleTicks--blocks{
  display: grid;
  align-items: start;
  gap: 0;
  height: auto;
  margin-top: 6px;
}
.m360rad-scaleTicks--blocks .m360rad-tick{
  position: static;
  transform: none;
  text-align: center;
  justify-self: stretch;
  font-size: 9px;
  line-height: 1.1;
}
.m360rad-scaleTicks--blocks .m360rad-tick::before{ display:none; }

.m360rad-tick{
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 1000;
  color: rgba(226,232,240,.90);
  white-space: nowrap;
}
.m360rad-tick::before{
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 1px;
  height: 7px;
  background: rgba(148,163,184,.35);
  transform: translateX(-50%);
}

/* ---------- Controls ---------- */
.m360rad-controls{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  background: var(--m360-surface);
  border: 1px solid var(--m360-border);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

.m360rad-rangeWrap{
  flex: 1 1 240px;
  min-width: 220px;
}

.m360rad-rangeWrap input[type="range"]{ width: 100%; }

.m360rad-rangeLabels{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 1000;
  color: var(--m360-muted);
}

/* ---------- Error overlay ---------- */
/* ---------- Loading overlay ---------- */
.m360rad-loading{
  position: absolute;
  inset: 14px;
  border-radius: 18px;
  background: rgba(2,6,23,.55);
  border: 1px solid rgba(148,163,184,.18);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  backdrop-filter: blur(8px);
  z-index: 5;
}
.m360rad-loading.is-on{ display:flex; }

.m360rad-spinner{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(226,232,240,.25);
  border-top-color: var(--m360-accent);
  animation: m360spin 1s linear infinite;
}
@keyframes m360spin{ to { transform: rotate(360deg); } }

.m360rad-loadingText{
  font-size: 12px;
  font-weight: 900;
  color: rgba(226,232,240,.92);
}

.m360rad-error{
  position: absolute;
  inset: 14px;
  border-radius: 18px;
  background: rgba(2,6,23,.80);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  gap: 10px;
  backdrop-filter: blur(8px);
}

.m360rad-errorTitle{ font-size: 14px; font-weight: 1000; }
.m360rad-errorMsg{ font-size: 12px; font-weight: 900; color: var(--m360-muted); }

/* ---------- Fullscreen fallback ---------- */
.m360rad-fakefs{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: radial-gradient(1200px 700px at 10% 15%, rgba(34,211,238,.10), transparent 55%),
              radial-gradient(900px 520px at 85% 10%, rgba(167,139,250,.10), transparent 55%),
              linear-gradient(180deg, var(--m360-bg0), var(--m360-bg1));
  padding: 10px !important;
}
.m360rad-fakefs .m360rad-card{ height: calc(100vh - 20px) !important; }
.m360rad-fakefs{ max-width: none !important; }

/* ---------- Mobile ---------- */
@media (max-width: 820px){
  .m360rad-root{ padding: 10px; }
  .m360rad-topbar{ flex-direction: column; align-items: stretch; }
  .m360rad-right{ justify-content: flex-start; }
  .m360rad-opRow input[type="range"]{ width: 100px; }
}


/* ---------- OPS panel (Solution 2) ---------- */
.m360rad-ops{
  margin-top: 10px;
  padding: 12px;
  border-radius: 18px;
  background: var(--m360-surface2);
  border: 1px solid var(--m360-border);
  box-shadow:
    0 16px 40px rgba(0,0,0,.18),
    0 0 0 1px rgba(34,211,238,.08) inset;
}

.m360rad-opsHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.m360rad-opsTitle{
  font-weight: 800;
  letter-spacing: .06em;
  font-size: 12px;
  color: var(--m360-text);
}

.m360rad-btn--small{
  padding: 8px 10px;
  border-radius: 12px;
}

/* ---------- Favorites popover + toast (Pro pack) ---------- */
.m360rad-favs{
  display: none;
  margin-top: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(2,6,23,.45);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 18px 48px rgba(0,0,0,.32);
}
.m360rad-favs.is-on{ display:block; }

.m360rad-favsHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.m360rad-favsTitle{
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 12px;
  color: var(--m360-text);
}

.m360rad-favsList{ display:flex; flex-direction:column; gap:8px; }
.m360rad-favRow{
  display:flex;
  gap:8px;
  align-items:center;
}
.m360rad-favGo{
  flex: 1 1 auto;
  text-align:left;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.45);
  color: var(--m360-text);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}
.m360rad-favGo:hover{ border-color: rgba(34,211,238,.34); }

/* fav internal layout (ETA + risk) */
.m360rad-favBtn{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.m360rad-favTop{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}
.m360rad-favName{
  font-weight: 900;
  letter-spacing: .02em;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m360rad-favBadges{
  display:flex;
  gap:6px;
  flex: 0 0 auto;
}
.m360rad-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.25);
  font-size: 11px;
  font-weight: 900;
  color: rgba(226,232,240,.92);
}
.m360rad-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--m360-accent);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
}
.m360rad-favMeta{
  font-size: 12px;
  color: var(--m360-muted);
  line-height: 1.25;
  opacity: .9;
}

.m360rad-favDetail{
  margin-top: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.20);
}
.m360rad-favDetailHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom: 8px;
}
.m360rad-favDetailTitle{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
}
.m360rad-favChart{
  width: 100%;
  height: 90px;
  display:block;
  border-radius: 14px;
  background: rgba(2,6,23,.28);
  border: 1px solid rgba(148,163,184,.16);
}

.m360rad-favDel{
  width: 38px;
  height: 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.45);
  color: rgba(226,232,240,.92);
  cursor:pointer;
}
.m360rad-favDel:hover{ border-color: rgba(251,113,133,.45); box-shadow: 0 0 18px rgba(251,113,133,.10); }

.m360rad-favsAdd{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top: 10px;
}
.m360rad-favsInput{
  flex: 1 1 auto;
  min-width: 180px;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,.20);
  background: rgba(2,6,23,.28);
  color: var(--m360-text);
  font-weight: 800;
  font-size: 12px;
}
.m360rad-favsInput::placeholder{ color: rgba(148,163,184,.75); }


/* ---------- Layers popover (couches) ---------- */
.m360rad-layers{
  display: none;
  margin-top: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(2,6,23,.45);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 18px 48px rgba(0,0,0,.32);
}
.m360rad-layers.is-on{ display:block; }

.m360rad-layersHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.m360rad-layersTitle{
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 12px;
  color: var(--m360-text);
}

.m360rad-layerList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.m360rad-layerItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.20);
  background: rgba(2,6,23,.25);
  font-weight: 900;
  font-size: 12px;
  color: var(--m360-text);
}
.m360rad-layerItem input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--m360-accent);
}

.m360rad-layerRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.20);
  background: rgba(2,6,23,.18);
  font-weight: 900;
  font-size: 12px;
  color: var(--m360-text);
}
.m360rad-layerRow input[type="range"]{
  flex: 1 1 auto;
  max-width: 220px;
}

.m360rad-layerSelect{
  flex: 1 1 auto;
  max-width: 220px;
  border-radius: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.30);
  color: var(--m360-text);
  font-weight: 900;
  font-size: 12px;
}
.m360rad-layerVal{
  min-width: 44px;
  text-align:right;
  font-weight: 900;
  font-size: 12px;
  color: rgba(226,232,240,.92);
}

.m360rad-layerSep{
  height: 1px;
  background: rgba(148,163,184,.18);
  margin: 4px 0;
}


.m360rad-toast{
  position: sticky;
  bottom: 10px;
  margin-top: 10px;
  display:none;
  width: fit-content;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(2,6,23,.88);
  border: 1px solid rgba(148,163,184,.22);
  color: rgba(226,232,240,.92);
  font-weight: 900;
  font-size: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
}
.m360rad-toast.is-on{ display:inline-block; }

.m360rad-opsList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.m360rad-opsItem{
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.20);
  background: rgba(2,6,23,.25);
}

.m360rad-opsName{
  font-weight: 800;
  font-size: 13px;
  color: var(--m360-text);
}

.m360rad-opsMeta{
  margin-top: 3px;
  font-size: 12px;
  color: var(--m360-muted);
}

.m360rad-opsBadge{
  display:inline-block;
  margin-top: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(34,211,238,.22);
  background: rgba(34,211,238,.10);
  font-size: 12px;
  color: var(--m360-text);
}

/* ---------- Themes ---------- */
/* Default (neo) uses the variables declared on .m360rad-root above. */
/* Clean: more "météo pro" (moins néon, meilleur contraste, accent bleu) */
.m360rad-root.m360rad-theme--clean{
  --m360-bg0: #0b1220;
  --m360-bg1: #0b1220;
  --m360-surface: rgba(17,24,39,.78);
  --m360-surface2: rgba(15,23,42,.62);
  --m360-border: rgba(148,163,184,.22);
  --m360-border2: rgba(59,130,246,.25);
  --m360-text: #e5e7eb;
  --m360-muted: rgba(203,213,225,.80);
  --m360-accent: #3b82f6;
  --m360-accent2: #22c55e;
}
.m360rad-root.m360rad-theme--clean::before{
  opacity: .55;
  background:
    radial-gradient(1000px 600px at 10% 10%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(900px 520px at 90% 18%, rgba(34,197,94,.08), transparent 60%),
    linear-gradient(to bottom, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.m360rad-root.m360rad-theme--clean .m360rad-title{ font-weight: 900; }
.m360rad-root.m360rad-theme--clean .m360rad-btn{ font-weight: 900; }

/* Light (optionnel) */
.m360rad-root.m360rad-theme--light{
  --m360-bg0: #f8fafc;
  --m360-bg1: #f1f5f9;
  --m360-surface: rgba(255,255,255,.80);
  --m360-surface2: rgba(255,255,255,.72);
  --m360-border: rgba(15,23,42,.16);
  --m360-border2: rgba(59,130,246,.25);
  --m360-text: #0f172a;
  --m360-muted: rgba(15,23,42,.62);
  --m360-accent: #2563eb;
  --m360-accent2: #16a34a;
}
.m360rad-root.m360rad-theme--light::before{
  opacity: .35;
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(900px 520px at 90% 20%, rgba(22,163,74,.10), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.04), rgba(0,0,0,0));
}
.m360rad-root.m360rad-theme--light .m360rad-card{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.92));
  box-shadow: 0 18px 50px rgba(2,6,23,.10);
}
.m360rad-root.m360rad-theme--light .m360rad-map{
  background: rgba(0,0,0,.04);
}
.m360rad-root.m360rad-theme--light .leaflet-control a,
.m360rad-root.m360rad-theme--light .leaflet-control{
  background: rgba(255,255,255,.85);
  color: var(--m360-text);
}
.m360rad-root.m360rad-theme--light .leaflet-control-attribution{
  background: rgba(255,255,255,.72);
  color: rgba(15,23,42,.70);
}

/* ---------- Stations PRO (filtres + proches + badge vent) ---------- */
.m360rad-stFilters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 10px 0 6px;
}
.m360rad-stFilter{
  display:flex;
  align-items:center;
  gap:6px;
  font-size: 12px;
  color: var(--m360-muted);
  user-select:none;
}
.m360rad-stFilter input{ accent-color: var(--m360-accent); }

.m360rad-layerItem--sub{
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(148,163,184,.18);
}

.m360rad-layerItem--disabled{
  opacity: .55;
  filter: saturate(.8);
}
.m360rad-layerItem--disabled input{ cursor:not-allowed; }

.m360rad-near{
  margin-top: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.20);
}
.m360rad-nearHead{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--m360-text);
  opacity: .85;
  margin-bottom: 6px;
}
.m360rad-nearList{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.m360rad-nearItem{
  width:100%;
  text-align:left;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.35);
  padding: 8px 10px;
  cursor:pointer;
  color: var(--m360-text);
}
.m360rad-nearItem:hover{
  border-color: rgba(59,130,246,.35);
  background: rgba(2,6,23,.48);
}
.m360rad-nearTop{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}
.m360rad-nearCode{
  font-weight: 900;
  letter-spacing: .03em;
}
.m360rad-nearDist{
  font-size: 12px;
  opacity: .75;
}
.m360rad-nearName{
  font-size: 12px;
  opacity: .82;
  margin-top: 1px;
}
.m360rad-nearMeta{
  font-size: 12px;
  opacity: .78;
  margin-top: 4px;
  line-height: 1.25;
}

/* Wind badge tooltip */
.m360rad-root .leaflet-tooltip.m360rad-windBadgeTip{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Wind arrow (no box) */
.m360rad-windArrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  color: #16a34a; /* default = green */
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.m360rad-windArrowSvg{
  width: 18px;
  height: 18px;
  transform: rotate(var(--m360-wdir, 0deg));
  transform-origin: 50% 50%;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
.m360rad-windArrowTxt{
  white-space: nowrap;
}

/* intensity → color */
.m360rad-windLvl-g{ color: #16a34a; } /* 0-30 */
.m360rad-windLvl-y{ color: #facc15; } /* 31-60 */
.m360rad-windLvl-o{ color: #fb923c; } /* 61-80 */
.m360rad-windLvl-r{ color: #ef4444; } /* 81-120 */
.m360rad-windLvl-v{ color: #a855f7; } /* 121+ */


@media (prefers-reduced-motion: reduce){
  .m360rad-root *{
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* --- Cellules (faible → violent) --- */
.m360rad-scale--cells .m360rad-scaleHint{
  text-transform:none;
}

/* Legend en ronds (au lieu d'une barre) */
.m360rad-cellsDots{
  height: auto;
  border: none;
  box-shadow: none;
  background: transparent;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0 0;
}

.m360rad-cellsDotItem{
  flex: 1 1 0;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.m360rad-cellsDot{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 24px rgba(0,0,0,.18);
}

.m360rad-cellsDotTxt{
  font-size: 11px;
  font-weight: 1000;
  line-height: 1.1;
  text-align: center;
  color: rgba(226,232,240,.88);
  word-break: break-word;
}

.m360rad-cellsLabels{
  display:flex;
  gap:0;
  margin-top:6px;
  font-size:11px;
  line-height:1.1;
  color: rgba(226,232,240,.88);
}

.m360rad-cellsLabels > div{
  flex: 1 1 0;
  text-align:center;
  opacity:.92;
}

@media (max-width: 520px){
  .m360rad-cellsLabels{ font-size:10px; }
  .m360rad-cellsDotTxt{ font-size:10px; }
  .m360rad-cellsDot{ width:14px; height:14px; }
}


/* ---------- PRO UI pack: sections, switches, segmented controls ---------- */

.m360rad-layers{
  width: min(360px, 92vw);
  max-height: 72vh;
  overflow: auto;
  scrollbar-width: thin;
}
.m360rad-layers::-webkit-scrollbar{ width: 10px; }
.m360rad-layers::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.22);
  border-radius: 999px;
  border: 3px solid rgba(2,6,23,.35);
}

.m360rad-section{
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(2,6,23,.18);
  overflow: hidden;
  margin: 10px 0;
}
.m360rad-section:first-child{ margin-top: 2px; }

.m360rad-sectionHead{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 12px;
  border: none;
  border-bottom: 1px solid rgba(148,163,184,.10);
  background: rgba(2,6,23,.30);
  color: rgba(226,232,240,.96);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .2px;
  cursor: pointer;
}
.m360rad-sectionHead:hover{ background: rgba(2,6,23,.38); }
.m360rad-sectionHead:focus-visible{
  outline: 2px solid rgba(59,130,246,.70);
  outline-offset: 2px;
}
.m360rad-sectionIcon{ opacity:.9; }
.m360rad-sectionTitleTxt{ flex: 1 1 auto; text-align:left; }
.m360rad-sectionChev{
  opacity:.85;
  transform: rotate(0deg);
  transition: transform .18s ease;
}
.m360rad-section.is-collapsed .m360rad-sectionChev{ transform: rotate(-90deg); }
.m360rad-sectionBody{ padding: 10px 10px; }
.m360rad-section.is-collapsed .m360rad-sectionBody{ display:none; }

.m360rad-layerList{ display:flex; flex-direction:column; gap: 8px; }

/* Switch style for main toggles */
.m360rad-layerItem input[type="checkbox"],
.m360rad-layerItem--sub input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.30);
  background: rgba(2,6,23,.30);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}
.m360rad-layerItem input[type="checkbox"]::before,
.m360rad-layerItem--sub input[type="checkbox"]::before{
  content:"";
  position:absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(226,232,240,.88);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .18s ease, background .18s ease;
}
.m360rad-layerItem input[type="checkbox"]:checked,
.m360rad-layerItem--sub input[type="checkbox"]:checked{
  border-color: rgba(59,130,246,.55);
  background: rgba(59,130,246,.25);
}
.m360rad-layerItem input[type="checkbox"]:checked::before,
.m360rad-layerItem--sub input[type="checkbox"]:checked::before{
  transform: translateX(20px);
  background: rgba(255,255,255,.96);
}
.m360rad-layerItem--disabled input[type="checkbox"]{
  opacity:.55;
  cursor:not-allowed;
}

/* Segmented control for overlay selection */
.m360rad-seg{
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.26);
  flex: 1 1 auto;
  justify-content: space-between;
}
.m360rad-segBtn{
  appearance:none;
  border:none;
  background: transparent;
  color: rgba(226,232,240,.90);
  font-weight: 950;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
  flex: 1 1 0;
  text-align:center;
  white-space: normal;
  line-height: 1.1;
  transition: background .15s ease, transform .15s ease;
}
.m360rad-segBtn:hover{ background: rgba(148,163,184,.10); }
.m360rad-segBtn[aria-pressed="true"]{
  background: rgba(59,130,246,.22);
  border: 1px solid rgba(59,130,246,.40);
}
.m360rad-segBtn:active{ transform: translateY(1px); }

/* Chips for station filters */
.m360rad-stFilters{ gap: 8px; }
.m360rad-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.20);
  background: rgba(2,6,23,.18);
  cursor:pointer;
  user-select:none;
}
.m360rad-chip input{ display:none; }
.m360rad-chip span{
  font-size: 12px;
  font-weight: 950;
  color: rgba(226,232,240,.85);
}
.m360rad-chip input:checked + span{
  color: rgba(255,255,255,.98);
}
.m360rad-chip.is-on,
.m360rad-chip:has(input:checked){
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.35);
}

/* Hide fallback select visually (kept for JS compatibility) */
.m360rad-visuallyHidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border:0 !important;
}


/* --- 3.9.8: wx overlay control as a compact select (fits narrow sidebar) --- */
.m360rad-root [data-el="wxSeg"]{ display:none !important; }
.m360rad-root [data-el="wxSelect"]{ display:block !important; width: 100%; max-width: 100%; }
.m360rad-root .m360rad-sectionBody[data-sec-body="wx"] .m360rad-layerRow{ align-items: flex-start; }


/* ---------------------------------------------------------
   3.9.9 - Sidebar wider + no overflow in boxes (dock mode)
--------------------------------------------------------- */
.m360rad-root.m360rad-dock .m360rad-layerItem,
.m360rad-root.m360rad-dock .m360rad-layerRow{
  flex-wrap: wrap;
  align-items: flex-start;
}

.m360rad-root.m360rad-dock .m360rad-layerItem > span,
.m360rad-root.m360rad-dock .m360rad-layerRow > span{
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.m360rad-root.m360rad-dock .m360rad-layerItem input[type="checkbox"]{
  margin-left: auto;
}

.m360rad-root.m360rad-dock .m360rad-layerRow input[type="range"],
.m360rad-root.m360rad-dock .m360rad-layerRow .m360rad-layerSelect,
.m360rad-root.m360rad-dock .m360rad-layerRow select{
  flex: 1 1 240px;
  width: 100%;
  max-width: none;
}

.m360rad-root.m360rad-dock .m360rad-layerVal{
  margin-left: auto;
}

/* Generic long-text wrapping in sidebar */
.m360rad-root.m360rad-dock .m360rad-side .m360rad-meta,
.m360rad-root.m360rad-dock .m360rad-side .m360rad-near,
.m360rad-root.m360rad-dock .m360rad-side .m360rad-nearList,
.m360rad-root.m360rad-dock .m360rad-side .m360rad-favsList{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------------------------------------------------------


/* --- Public-friendly UI additions --- */
.m360rad-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .7rem;
  border:1px solid var(--m360-border);
  background: var(--m360-surface2);
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
}
.m360rad-help{
  display:inline-block;
  margin-left:.6rem;
  padding-left:.6rem;
  border-left:1px solid var(--m360-border);
  color: var(--m360-muted);
  font-size:.9rem;
}
.m360rad-title{
  letter-spacing: .2px;
}

/* --- User location (blinking red target) --- */
.m360-userloc-icon{background:transparent!important;border:0!important}
.m360-userloc{
  width:22px;height:22px;
  border-radius:999px;
  border:2px solid #ff2b2b;
  box-shadow:0 0 0 0 rgba(255,43,43,.65);
  position:relative;
  animation:m360Pulse 1.1s infinite;
}
.m360-userloc:before,.m360-userloc:after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  background:#ff2b2b;
  transform:translate(-50%,-50%);
}
.m360-userloc:before{width:2px;height:14px}
.m360-userloc:after{width:14px;height:2px}

@keyframes m360Pulse{
  0%{box-shadow:0 0 0 0 rgba(255,43,43,.60);opacity:1}
  60%{box-shadow:0 0 0 10px rgba(255,43,43,0);opacity:.65}
  100%{box-shadow:0 0 0 0 rgba(255,43,43,0);opacity:1}
}