/* Police Rubik (latin), servie localement — licence : fonts/OFL-LICENSE.txt */
@font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/rubik-latin-400-normal.woff2) format('woff2') }
@font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/rubik-latin-500-normal.woff2) format('woff2') }
@font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/rubik-latin-600-normal.woff2) format('woff2') }
@font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 700; src: url(../fonts/rubik-latin-700-normal.woff2) format('woff2') }
@font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 800; src: url(../fonts/rubik-latin-800-normal.woff2) format('woff2') }

:root {
  --bg: #0a0a0a;
  --panel: #161616;
  --panel-2: #222;
  --text: #fff;
  --mute: #9a9a9a;
  --dim: #5e5e5e;
  --blue: #2979ff;
  --cyan: #00d1ff;
  --yellow: #ffe600;
  --orange: #ff8a00;
  --red: #ff1744;
  --top: max(14px, env(safe-area-inset-top));
  --bottom: max(16px, env(safe-area-inset-bottom));
}
* { box-sizing: border-box }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: 'Rubik', system-ui, sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent }
button { font: inherit; color: inherit }
#map { position: fixed; inset: 0 }
.panel { background: var(--panel); border-radius: 22px; box-shadow: 0 8px 28px rgba(0, 0, 0, .65) }
[hidden] { display: none !important }

/* ---------- barre du haut ---------- */
.top { position: fixed; top: var(--top); left: 16px; right: 16px; display: flex; gap: 10px; z-index: 3; pointer-events: none }
.top > * { pointer-events: auto }
.brand { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border: 0; cursor: pointer; text-align: left }
.brand:active { transform: scale(.97) }
.brand .logo { display: block; border-radius: 10px }
.brand .name { font-weight: 800; font-size: 21px; letter-spacing: .01em }
.live { font-weight: 700; font-size: 12px; color: #fff; background: var(--red); display: flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 999px }
.live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite }
.live.off { background: var(--panel-2); color: var(--mute) }
.live.off i { background: var(--mute); animation: none }
@keyframes blink { 50% { opacity: .2 } }
.loc { all: unset; pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 0 16px 0 14px; font-weight: 700; font-size: 16px; min-width: 0; background: var(--panel); border-radius: 22px; box-shadow: 0 8px 28px rgba(0, 0, 0, .65) }
.loc svg { color: var(--blue); flex: none }
.loc .chev { color: var(--mute) }
.loc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px }
.loc.auto #loc-ico { color: var(--cyan) }
.spacer { flex: 1 }
.clock { padding: 0 20px; display: flex; align-items: center; font-weight: 700; font-size: 20px }

/* ---------- alerte ---------- */
.alert { position: fixed; top: calc(var(--top) + 68px); left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 12px; align-items: center; padding: 10px 12px 10px 10px; border-radius: 20px; max-width: min(560px, calc(100% - 32px)); background: var(--orange); color: #000; box-shadow: 0 8px 28px rgba(0, 0, 0, .6) }
.alert.red { background: var(--red); color: #fff }
.alert-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #000; color: var(--orange); display: grid; place-items: center; font-weight: 800; font-size: 20px }
.alert.red .alert-ico { color: var(--red) }
.alert-txt { min-width: 0 }
.alert b { display: block; font-weight: 800; font-size: 15px }
.alert span { display: block; font-weight: 500; font-size: 13px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.alert button { all: unset; cursor: pointer; flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, .15); display: grid; place-items: center; font-weight: 800; font-size: 18px }

/* ---------- couches ---------- */
.layers { position: fixed; left: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; padding: 8px; z-index: 3 }
.layers button { all: unset; cursor: pointer; width: 66px; height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 16px; background: var(--panel-2); color: var(--dim); font-weight: 700; font-size: 11px; transition: background .15s, color .15s }
.layers button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }
.layers button.on { background: var(--c); color: #000 }
.layers button.act { color: var(--text) }
.layers button.act svg { color: var(--c) }
.layers button.act:active { transform: scale(.95) }

/* ---------- autour de vous ---------- */
.near { position: fixed; right: 16px; top: calc(var(--top) + 68px); width: 300px; padding: 18px; z-index: 3; max-height: calc(100% - var(--top) - var(--bottom) - 190px); overflow: auto }
.hd { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; color: var(--mute) }
button.hd { all: unset; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; color: var(--mute); width: 100%; cursor: default }
.pill { background: var(--blue); color: #fff; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px }
.big { display: flex; align-items: center; gap: 12px; margin: 12px 0 8px }
.big .v { font-weight: 800; font-size: 48px; line-height: 1; white-space: nowrap }
.big .v small { font-size: 22px; margin-left: 3px }
.big .l { font-weight: 500; font-size: 14px; color: var(--mute); line-height: 1.3 }
.rw { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; border-top: 2px solid #202020; font-size: 14px; color: var(--mute); font-weight: 500 }
.rw b { color: var(--text); font-weight: 700; font-size: 16px; text-align: right }
.rw b small { color: var(--mute); font-size: 13px; margin-left: 5px; font-weight: 600 }
.chip { display: inline-block; font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 999px; background: var(--c, #2a2a2a); color: var(--ct, #9a9a9a); white-space: nowrap }
.threat { margin-top: 12px; padding-top: 14px; border-top: 2px solid #202020 }
.threat .hd { margin-bottom: 10px }
.threat .lvl { font-weight: 800; font-size: 15px }
.segs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px }
.segs i { height: 12px; border-radius: 6px; background: #262626; transition: background .3s }
.src { margin-top: 14px; font-size: 11px; color: var(--dim); text-align: center; font-weight: 500 }
.near-top { display: flex; align-items: center; gap: 10px }
.near-top button.hd { flex: 1; min-width: 0; gap: 10px }
.near-top .ttl { white-space: nowrap }
.mini { display: none; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--text); font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mini i { flex: none; width: 12px; height: 12px; border-radius: 50% }
.min-btn { all: unset; cursor: pointer; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--panel-2); color: var(--mute); display: grid; place-items: center; transition: transform .2s }
.min-btn:active { transform: scale(.92) }
.near.min .min-btn { transform: rotate(180deg) }
.near.min { padding-top: 10px; padding-bottom: 10px; overflow: hidden }
.near.min .body { display: none }
.near.min .ttl { display: none }
.near.min .mini { display: flex }
.near.min button.hd { cursor: pointer }
/* prévisions heure par heure */
.hours-box { margin-top: 12px; padding-top: 12px; border-top: 2px solid #202020 }
.hours-box .hd { font-size: 13px }
.hours-box .hd span:last-child { color: var(--text) }
.hours { display: flex; gap: 6px; overflow-x: auto; margin: 10px -18px 0; padding: 0 18px 2px; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity }
.hours::-webkit-scrollbar { display: none }
.hours .h { flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 0 8px; border-radius: 14px; background: var(--panel-2); scroll-snap-align: start }
.hours .h:first-child { background: #2c2c2c }
.hours .h.storm { box-shadow: inset 0 0 0 2px var(--orange) }
.hours .t { font-size: 12px; font-weight: 600; color: var(--mute) }
.hours .h b { font-size: 16px; font-weight: 800 }
.hours .p { font-size: 12px; font-weight: 700; color: var(--cyan) }
.hours .p.dry { color: var(--dim) }
.hours .mm { font-size: 11px; font-weight: 600; color: var(--mute); min-height: 13px; white-space: nowrap }

/* ---------- fiche au clic ---------- */
.sheet { position: fixed; left: 104px; bottom: calc(var(--bottom) + 106px); width: 300px; padding: 16px 18px 8px; z-index: 3; animation: up .2s ease-out }
@keyframes up { from { opacity: 0; transform: translateY(10px) } }
.sheet .hd { color: var(--text); font-size: 15px }
.sheet .hd button, .picker .hd button { all: unset; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; background: var(--panel-2); display: grid; place-items: center; color: var(--mute); font-size: 14px }
.sheet .hd small { display: block; color: var(--dim); font-size: 12px; font-weight: 500; margin-top: 2px }
.sheet .rows { margin-top: 10px }
.pin { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 6px solid #000; box-shadow: 0 4px 12px rgba(0, 0, 0, .6); pointer-events: none }

/* ---------- timeline ---------- */
.timeline { position: fixed; left: 16px; right: 16px; bottom: var(--bottom); display: flex; align-items: center; gap: 20px; padding: 14px 22px 14px 14px; z-index: 3 }
#play { all: unset; cursor: pointer; flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #000; background: var(--yellow); transition: transform .12s }
#play:active { transform: scale(.94) }
#play svg { width: 24px; height: 24px; fill: currentColor }
.tl { flex: 1; min-width: 0 }
.tl-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px }
.tl-top .t { font-weight: 800; font-size: 22px }
.tl-top .off { font-weight: 600; font-size: 14px; color: var(--mute) }
.tag { font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px }
.tag.now { background: var(--blue); color: #fff }
.tag.past { background: var(--panel-2); color: var(--mute) }
.track { position: relative; height: 28px; margin: 0 14px }
.rail { position: absolute; left: 0; right: 0; top: 9px; height: 10px; border-radius: 5px; background: #2a2a2a }
.rail.fill { right: auto; background: #fff }
.rail.fc { left: 50%; background: repeating-linear-gradient(-45deg, #3a3a3a 0 5px, #262626 5px 10px) }
.tag.fc { background: var(--yellow); color: #000 }
#scrub { position: absolute; left: -14px; right: -14px; top: 0; width: calc(100% + 28px); height: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer }
#scrub::-webkit-slider-runnable-track { height: 28px; background: transparent }
#scrub::-moz-range-track { height: 28px; background: transparent }
#scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 6px solid #000; box-shadow: 0 2px 10px rgba(0, 0, 0, .6) }
#scrub::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 6px solid #000 }
.scale { position: relative; height: 16px; margin: 4px 14px 0; font-weight: 600; font-size: 12px; color: var(--dim) }
.scale span { position: absolute; transform: translateX(-50%); white-space: nowrap }
.scale span:first-child { transform: none }
.scale span:last-child { transform: translateX(-100%) }
.scale span.n { color: var(--mute) }
.legend { flex: none; display: grid; gap: 10px; padding-left: 20px; border-left: 2px solid #222 }
.lg { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; color: var(--mute) }
.lg .n { width: 50px }
.lg .bar { display: block; width: 110px; height: 14px; border-radius: 7px }

/* ---------- choix du lieu ---------- */
.picker { position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, .6); display: flex; justify-content: center; align-items: flex-start; padding: calc(var(--top) + 60px) 16px 16px }
.picker-card { width: 100%; max-width: 460px; padding: 18px; max-height: 100%; display: flex; flex-direction: column; animation: up .2s ease-out }
.picker .hd b { color: var(--text); font-size: 19px; font-weight: 800 }
.search { display: flex; align-items: center; gap: 10px; background: var(--panel-2); border-radius: 16px; padding: 0 14px; margin-top: 14px; color: var(--mute) }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: 600 17px 'Rubik', sans-serif; padding: 15px 0 }
.search input::placeholder { color: var(--dim) }
.search input::-webkit-search-cancel-button { filter: invert(1) }
.gps { all: unset; cursor: pointer; display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: var(--blue); color: #fff }
.gps b { display: block; font-weight: 700; font-size: 16px }
.gps small { display: block; font-size: 13px; opacity: .85; font-weight: 500 }
.gps.busy { opacity: .7; pointer-events: none }
.list-title { margin: 16px 4px 6px; font-weight: 700; font-size: 13px; color: var(--mute) }
.results { list-style: none; margin: 0; padding: 0; overflow: auto }
.results button { all: unset; cursor: pointer; display: block; width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 14px }
.results button:hover, .results button:focus-visible { background: var(--panel-2) }
.results b { display: block; font-weight: 700; font-size: 16px }
.results small { display: block; font-size: 13px; color: var(--mute); margin-top: 2px }
.results .empty { padding: 11px 12px; color: var(--dim); font-weight: 500 }

/* ---------- paramètres ---------- */
.settings { max-width: 440px }
.set-scroll { overflow: auto; margin: 0 -18px; padding: 0 18px }
.install { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px; border-radius: 18px; background: var(--panel-2) }
.install img { flex: none; border-radius: 14px }
.install div { flex: 1; min-width: 0 }
.install b, .set-row b { display: block; font-weight: 700; font-size: 16px }
.install small, .set-row small { display: block; font-size: 13px; color: var(--mute); font-weight: 500; margin-top: 2px; line-height: 1.35 }
.btn { all: unset; cursor: pointer; flex: none; background: var(--yellow); color: #000; font-weight: 800; font-size: 15px; padding: 11px 18px; border-radius: 999px }
.btn:active { transform: scale(.95) }
.btn.ghost { background: var(--panel-2); color: var(--text); font-weight: 700; font-size: 14px; padding: 9px 16px }
.btn.ghost:disabled { color: var(--dim); cursor: default }
.set-title { margin: 22px 4px 4px; font-weight: 700; font-size: 13px; color: var(--mute) }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 4px; border-top: 2px solid #202020; cursor: default }
.set-title + .set-row { border-top: 0 }
label.set-row { cursor: pointer }
.switch { -webkit-appearance: none; appearance: none; flex: none; margin: 0; width: 52px; height: 32px; border-radius: 999px; background: #333; position: relative; cursor: pointer; transition: background .15s }
.switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .15s }
.switch:checked { background: var(--blue) }
.switch:checked::after { transform: translateX(20px) }
.seg { flex: none; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--panel-2) }
.seg button { all: unset; cursor: pointer; font-weight: 700; font-size: 14px; padding: 7px 12px; border-radius: 999px; color: var(--mute) }
.seg button.on { background: var(--blue); color: #fff }
.about { margin: 8px 4px 0; font-size: 13px; line-height: 1.5; color: var(--mute); font-weight: 500 }
.about a { color: var(--text); text-decoration: none; font-weight: 600 }

.toast { position: fixed; left: 50%; bottom: calc(var(--bottom) + 110px); transform: translateX(-50%); z-index: 11; background: #fff; color: #000; font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 999px; box-shadow: 0 8px 28px rgba(0, 0, 0, .6); max-width: calc(100% - 32px); text-align: center }

.maplibregl-ctrl-bottom-right { bottom: calc(var(--bottom) + 94px) }
.maplibregl-ctrl-attrib { background: rgba(10, 10, 10, .7) !important; color: var(--dim) }
.maplibregl-ctrl-attrib a { color: var(--mute) !important }
.maplibregl-ctrl-attrib-button { filter: invert(1) opacity(.5) }

/* ---------- mobile ---------- */
@media (max-width: 820px) {
  .brand .name { font-size: 18px }
  .brand { gap: 9px; flex: none }
  .live { font-size: 0; gap: 0; padding: 7px }
  .loc { flex: 0 1 auto }
  .brand .logo { width: 32px; height: 32px }
  .loc { font-size: 15px; padding: 0 12px }
  .loc span { max-width: 110px }
  .clock { font-size: 17px; padding: 0 14px }
  .alert { left: 16px; right: 16px; transform: none; top: calc(var(--top) + 62px); max-width: none }
  .layers { left: auto; right: 12px; top: calc(var(--top) + 136px); transform: none; padding: 6px; gap: 6px; border-radius: 20px }
  .layers button { width: 54px; height: 54px; font-size: 9.5px; border-radius: 14px }
  .layers button svg { width: 21px; height: 21px }
  .near { top: auto; left: 16px; right: 16px; width: auto; bottom: calc(var(--bottom) + 100px); padding: 12px 16px; max-height: 60vh }
  button.hd { cursor: pointer }
  .near .hd .pill::after { content: ' ▾' }
  .near.open .hd .pill::after { content: ' ▴' }
  .near .big { margin: 6px 0 0 }
  .near .big .v { font-size: 36px }
  .near:not(.open) .hide-m { display: none }
  .near:not(.open) .rw { padding: 6px 0; border-top: 0 }
  .near .threat { margin-top: 8px; padding-top: 10px }
  .near .threat .hd { margin-bottom: 7px }
  .near .hours-box { margin-top: 10px; padding-top: 10px }
  .near .hours { margin: 8px -16px 0; padding: 0 16px 2px }
  .near.min { padding: 8px 10px 8px 16px }
  .near.min .pill::after { content: none }
  .legend { display: none }
  .timeline { gap: 14px; padding: 12px 16px 12px 12px }
  #play { width: 50px; height: 50px }
  .tl-top .t { font-size: 19px }
  .sheet { left: 16px; right: 16px; width: auto; bottom: calc(var(--bottom) + 100px); z-index: 4 }
  .maplibregl-ctrl-bottom-right { bottom: auto; top: calc(var(--top) + 64px) }
}
@media (max-width: 420px) {
  .brand .name { display: none }
}