/* The window: a one-line header (title, timeline, status), then the map with
   the side bar on its right. The header and the station details share the
   same dark band; the side bar uses it for the chosen value. */
:root { --band: #2d4b6e; --band-dark: #233c59; --band-line: rgba(255, 255, 255, .25); --band-muted: rgba(255, 255, 255, .75);
  --panel: #f3f6fa; --panel-line: #d6dee8; --panel-hover: #e2e9f2; }
html, body { height: 100%; }
body { font-family: system-ui, sans-serif; margin: 0; display: flex; flex-direction: column; }
/* Above the map's panes, so its shadow falls on the map. */
body > header { position: relative; z-index: 1000; display: flex; align-items: center; gap: .4rem 1.5rem; flex-wrap: wrap;
  padding: .4rem .8rem; background: var(--band); color: #fff; font-size: .85rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
h1 { font-size: 1rem; margin: 0; letter-spacing: .01em; white-space: nowrap; }
#play { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 1.7rem; padding: 0;
  color: #fff; background: var(--band-dark); border: 1px solid var(--band-line); border-radius: 4px; cursor: pointer; }
#play svg { width: .8rem; height: .8rem; fill: currentColor; }
#play:hover { border-color: rgba(255, 255, 255, .6); }
main { flex: 1; display: flex; min-height: 0; }
/* Neutral grey: shows only where a map tile is still loading (see app.js). */
#map { flex: 1; min-height: 300px; background: #e0e0e0; }

/* Side bar: the value shown on the labels, then the extra layers. */
#sidebar { width: 12.5rem; flex: none; display: flex; flex-direction: column; overflow-y: auto; background: var(--panel);
  border-left: 1px solid var(--panel-line); font-size: .85rem; padding-bottom: .5rem; }
#sidebar h2 { margin: .8rem .8rem .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--band); }
#params button { display: flex; justify-content: space-between; align-items: baseline; width: 100%; padding: .38rem .8rem;
  border: 0; background: none; font: inherit; color: #222; text-align: left; cursor: pointer; }
#params button small { color: #888; }
#params button:hover { background: var(--panel-hover); }
#params button[aria-pressed="true"] { background: var(--band); color: #fff; font-weight: 600; }
#params button[aria-pressed="true"] small { color: var(--band-muted); }
.layer { display: flex; align-items: center; gap: .5rem; padding: .38rem .8rem; cursor: pointer; }
.layer:hover { background: var(--panel-hover); }
.layer[hidden] { display: none; }
.layer input { accent-color: var(--band); margin: 0; }
/* At the bottom of the side bar: the disclaimer, the log in or out button,
   then the discreet legal link. */
.disclaimer { margin: auto .8rem 0; padding: .45rem .6rem; font-size: .75rem; line-height: 1.4; color: #5a4300;
  background: #fff6d6; border: 1px solid #ecd27a; border-radius: 4px; }
.disclaimer a { color: inherit; font-weight: 600; }
.account { margin: .6rem .8rem 0; }
.account a, .account button { display: block; box-sizing: border-box; width: 100%; padding: .35rem .6rem;
  font: inherit; font-size: .8rem; text-align: center; text-decoration: none; color: var(--band); cursor: pointer;
  background: #fff; border: 1px solid var(--panel-line); border-radius: 4px; }
.account a:hover, .account button:hover { background: var(--panel-hover); }
.legal-link { margin: 0 .8rem; padding-top: .6rem; font-size: .75rem; color: #888; }
.legal-link:hover { color: var(--band); }

/* Legal notice page (mentions-legales.html): the same header band, then text. */
.legal-page h1 a { color: inherit; text-decoration: none; }
.legal-page main { display: block; flex: none; max-width: 40rem; padding: 1rem 1.5rem; line-height: 1.5; }
.legal-page h2 { color: var(--band); }
/* Login page (connexion.html), in the legal page's layout. */
.login { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.login label { display: flex; flex-direction: column; gap: .3rem; }
.login input { font: inherit; padding: .3rem .4rem; }
.login-error { margin: 0; color: #a00; }

/* Timeline of the stations, radar and clouds (app.js). */
#timeline { flex: 1; display: flex; align-items: center; gap: .7rem; min-width: 30rem; }
/* Time slider: a tall hit area around a thick track, filled up to the shown
   time (--pct, app.js), and a large thumb. */
#time { flex: 1; min-width: 8rem; height: 1.7rem; margin: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; --pct: 100%; }
#time::-webkit-slider-runnable-track { height: 8px; border-radius: 4px;
  background: linear-gradient(to right, #9cc3ee var(--pct), rgba(255, 255, 255, .22) var(--pct)); }
#time::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
#time::-moz-range-progress { height: 8px; border-radius: 4px; background: #9cc3ee; }
#time::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -5px; border-radius: 50%;
  background: #fff; border: 2px solid #9cc3ee; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
#time::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #9cc3ee;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
#time:hover::-webkit-slider-thumb { transform: scale(1.15); }
#time:hover::-moz-range-thumb { transform: scale(1.15); }
#time:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
/* Fixed width, fitting the longest label: the slider keeps its size. */
#time-label { font-variant-numeric: tabular-nums; font-weight: 600; flex: 0 0 30rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Opens the side bar as a panel, on a phone only (below). */
#panel-toggle { display: none; }
/* Rain legend, a map control at the bottom right (app.js). */
.legend { display: flex; align-items: center; gap: 2px; padding: 4px 6px; font-size: .75rem; color: #333;
  background: rgba(255, 255, 255, .9); border-radius: 4px; box-shadow: 0 1px 5px rgba(0, 0, 0, .3); }
.legend span { border-radius: 2px; }
.legend[hidden] { display: none; }

/* Webcams (app.js): a point with one view cone per camera, a count from 3. */
.webcam { cursor: pointer; }
.webcam svg { width: 44px; height: 44px; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.webcam path { fill: rgba(45, 75, 110, .35); stroke: var(--band); stroke-width: 1; }
.webcam:hover path { fill: rgba(45, 75, 110, .6); }
.webcam circle { fill: #fff; stroke: var(--band); stroke-width: 2.5; }
.webcam text { font: 700 9px system-ui, sans-serif; fill: var(--band); text-anchor: middle; }
/* Their popup: per camera, a title band like the station details, then the
   thumbnail; scrolls past a few cameras. */
.webcam-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 6px; overflow: hidden; }
.webcam-popup .leaflet-popup-content { margin: 0; font: 12px/1.35 system-ui, sans-serif; }
.cams { max-height: min(70vh, 640px); overflow-y: auto; }
.cams header { padding: .3rem .55rem .25rem; background: var(--band); color: #fff; }
.cams header strong { display: block; font-size: 13px; }
.cams header span { font-size: 11px; color: var(--band-muted); }
.cams header a { color: inherit; }
.cams time.stale { color: #ffd38a; font-weight: 600; }
.cam-img { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #ccd; cursor: zoom-in; }
.cam-img[hidden] { display: none; }
.webcam-popup a.leaflet-popup-close-button { color: #fff; }
/* A fixed frame: the popup's size is known before the image loads, so Leaflet
   moves the map enough to show it whole. */
.cam-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #1b2633; }
.cam-img span { position: absolute; right: 6px; bottom: 6px; padding: 0 6px; border-radius: 4px; font-size: 16px;
  color: #fff; background: rgba(0, 0, 0, .45); }
.cams .none { margin: 0; padding: .8rem .55rem; color: #666; }
/* Full-screen viewer. */
#viewer { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: rgba(10, 18, 28, .95); }
#viewer[hidden] { display: none; }
.viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem .8rem;
  background: var(--band); color: #fff; font-size: .9rem; }
.viewer-bar a { color: inherit; }
.viewer-tools { display: flex; gap: .4rem; }
.viewer-tools button { min-width: 2.2rem; height: 1.9rem; font: inherit; font-weight: 600; color: #fff; cursor: pointer;
  background: var(--band-dark); border: 1px solid var(--band-line); border-radius: 4px; }
.viewer-tools button:hover { border-color: rgba(255, 255, 255, .6); }
#viewer-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  touch-action: none; cursor: grab; }
#viewer-img { max-width: 100%; max-height: 100%; user-select: none; -webkit-user-drag: none; }
/* White clouds (app.js): a dark halo sets them apart from the light land. */
.clouds { filter: drop-shadow(0 0 1.5px rgba(0, 0, 40, .7)) drop-shadow(0 0 4px rgba(0, 0, 40, .35)); }
.legend span { display: inline-block; width: 2.2em; height: 1.1em; text-align: center; line-height: 1.1em; }
.station { white-space: nowrap; }
.station div { transform: translate(-50%, -50%); padding: 1px 5px; border-radius: 4px;
               border: 1px solid #555; font: 600 12px system-ui, sans-serif; }
.station .arrow { display: inline-block; }

/* Station detail on hover (app.js): Leaflet's tooltip box is replaced by the
   detail's own, which unfolds from the label at each opening. Fixed width and
   rows, so its size does not change while the timeline plays. */
.leaflet-tooltip.station-tip { background: none; border: none; box-shadow: none; padding: 0; }
.leaflet-tooltip.station-tip::before { display: none; }
.detail { width: 14rem; background: #fff; border-radius: 6px; overflow: hidden;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .3); font: 12px/1.35 system-ui, sans-serif; white-space: nowrap;
  transform-origin: 50% 100%; animation: unfold .22s cubic-bezier(.2, .8, .3, 1.15); }
@keyframes unfold { from { transform: translateY(6px) scale(.5, .1); opacity: 0; } }
/* Below the label (no room above, app.js): unfolds downwards. */
.detail.below { transform-origin: 50% 0; animation-name: unfold-down; }
@keyframes unfold-down { from { transform: translateY(-6px) scale(.5, .1); opacity: 0; } }
/* Title band: station name, then altitude, zone and measurement time. */
.detail header { padding: .3rem .55rem .25rem; background: var(--band); color: #fff; }
.detail header strong { display: block; font-size: 13px; }
.detail header span { font-size: 11px; opacity: .8; }
.detail table { width: 100%; margin: 0; border-collapse: collapse; }
.detail th, .detail td { padding: 1px .55rem; border: 0; }
.detail th { text-align: left; font-weight: normal; color: #666; }
.detail td { text-align: right; font-weight: 600; color: #111; font-variant-numeric: tabular-nums; }
.detail td small { font-weight: normal; color: #888; }
.detail tr:first-child th, .detail tr:first-child td { padding-top: .25rem; }
.detail tr:last-child th, .detail tr:last-child td { padding-bottom: .3rem; }
/* The parameter shown on the labels. */
.detail tr.selected { background: #e6eef8; }
.detail tr.selected th { color: var(--band); font-weight: 600; }

/* Refresh status (app.js): spinner while fetching, colour by outcome. */
#status { color: var(--band-muted); white-space: nowrap; }
#status.new { color: #8fe3a5; }
#status.error { color: #ffa3a3; }
#status.loading::before { content: ""; display: inline-block; width: .8em; height: .8em;
  margin-right: .4em; vertical-align: -.1em; border: 2px solid var(--band-muted); border-top-color: transparent;
  border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* New observations: labels pulse. */
.station.fresh div { animation: pulse .8s ease-out; }
@keyframes pulse { 40% { transform: translate(-50%, -50%) scale(1.3); } }

/* Phone (portrait): the map full screen between a slim title band and the
   timeline at the bottom, within the thumb's reach; the side bar becomes a
   panel sliding up over the map, opened by its button in the timeline and
   closed by choosing a value or touching the map (app.js). Touch targets are
   at least 2.75rem (44 px). The legal pages keep their layout. */
@media (max-width: 40rem) {
  /* The header's children become the grid's cells; they keep its colour and
     font size (inherited), each one takes its band background. */
  body:not(.legal-page) { height: 100dvh; display: grid; grid-template: "title status" auto "main main" 1fr "time time" auto / 1fr auto; }
  body:not(.legal-page) > header { display: contents; }
  body:not(.legal-page) h1, #status, #timeline { background: var(--band); }
  body:not(.legal-page) h1 { grid-area: title; padding: .4rem .8rem; }
  h1 span { display: none; }
  #status { grid-area: status; padding: .55rem .8rem .4rem 0; white-space: normal; text-align: right; }
  body:not(.legal-page) main { grid-area: main; position: relative; overflow: hidden; }
  #timeline { grid-area: time; min-width: 0; flex-wrap: wrap; gap: .2rem .6rem; padding: .3rem .8rem .5rem;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .3); position: relative; z-index: 1000; }
  #play { width: 2.75rem; height: 2.75rem; }
  #time { height: 2.75rem; }
  #time::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -8px; }
  #time::-moz-range-thumb { width: 20px; height: 20px; }
  #time-label { order: 1; flex: 1 0 100%; white-space: normal; }
  #panel-toggle { display: block; height: 2.75rem; padding: 0 .7rem; font: inherit; font-weight: 600; color: #fff;
    background: var(--band-dark); border: 1px solid var(--band-line); border-radius: 4px; cursor: pointer; }
  /* Above the map's controls (z-index 1000); out of sight below the map when
     closed, hidden too so its controls are not reachable. */
  #sidebar { position: absolute; inset: auto 0 0; z-index: 1001; width: auto; max-height: 75%; border: 0;
    border-top: 1px solid var(--panel-line); box-shadow: 0 -3px 12px rgba(0, 0, 0, .3);
    transform: translateY(100%); visibility: hidden; transition: transform .2s, visibility .2s; }
  #sidebar.open { transform: none; visibility: visible; }
  /* Two columns: the whole panel fits without scrolling. */
  #params { display: grid; grid-template-columns: 1fr 1fr; }
  #params button, .layer { min-height: 2.75rem; box-sizing: border-box; align-items: center; }
  .account a, .account button { padding: .75rem .6rem; }
  .legal-link { padding: .6rem 0 .2rem; }
  .legend { font-size: .65rem; }
  .cams { max-height: 45vh; }
  .viewer-bar { flex-wrap: wrap; gap: .3rem 1rem; }
  .viewer-tools button { min-width: 2.75rem; height: 2.75rem; }
}