/* ============================================================
   Baignade dans la Seine — v2 "clean dashboard" design system
   (adopted from the Stitch direction: light UI, left sidebar,
    blue accent, pill badges). CSS variable names are kept stable
    because app.js references some of them inline in SVG charts.
   ============================================================ */

:root {
  /* surfaces */
  --paper:      #f4f6fb;   /* app background            */
  --paper-2:    #eceffa;   /* subtle fills              */
  --surface:    #ffffff;   /* cards                     */

  /* ink */
  --ink:        #1a2340;
  --ink-soft:   #5b6480;

  /* accent (kept as --seine so inline chart lines follow it) */
  --seine:      #2f56d6;   /* primary blue / E. coli    */
  --seine-deep: #1b2a63;   /* headings                  */
  --seine-glow: #6f8cec;

  /* status */
  --gold:       #c8891b;   /* medium / entérocoques     */
  --ok:         #1f9d57;
  --ok-deep:    #157a41;
  --no:         #d8384c;
  --na:         #9aa3b8;

  --line:       #e6e9f3;
  --line-soft:  #f0f2f9;

  --shadow:     0 1px 2px rgba(27,42,99,.05), 0 10px 26px -18px rgba(27,42,99,.35);
  --shadow-sm:  0 1px 2px rgba(27,42,99,.06);
  --radius:     16px;

  --font-body:    "Plus Jakarta Sans", system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --sidebar-w: 260px;
  --topbar-h: 60px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--seine); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--ink-soft); }
.c-ok { color: var(--ok-deep); font-weight: 600; }
.c-mid { color: var(--gold); font-weight: 600; }
.c-no { color: var(--no); font-weight: 600; }

/* ───────────── APP SHELL ───────────── */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 1.4rem 1.1rem;
  display: flex; flex-direction: column; gap: 1.6rem;
  overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand__mark {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center; font-size: 1.4rem; color: #fff;
  background: linear-gradient(135deg, #2f56d6, #17255a);
}
.brand__name { font-weight: 800; font-size: 1.05rem; color: var(--seine-deep); letter-spacing: -.01em; }
.brand__sub { font-size: .72rem; color: var(--ink-soft); }

.side-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .13em; color: var(--na); margin: 0 0 .55rem .2rem; font-weight: 600; }
.side-nav { display: flex; flex-direction: column; gap: .15rem; }
.snav {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .55rem; border-radius: 10px; color: var(--ink); font-size: .86rem;
}
.snav:hover { background: var(--paper-2); text-decoration: none; }
.snav__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--na); }
.snav__dot[data-state="ok"]  { background: var(--ok); }
.snav__dot[data-state="mid"] { background: var(--gold); }
.snav__dot[data-state="no"]  { background: var(--no); }
.snav__name { flex: 1; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.side-foot a { font-size: .82rem; color: var(--ink-soft); }
.side-foot a:hover { color: var(--seine); }

/* ───────────── MAIN ───────────── */
.main { min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 500;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1rem, 3vw, 2.4rem);
  background: rgba(244,246,251,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; }
.tabs a {
  font-size: .86rem; font-weight: 600; color: var(--ink-soft);
  padding: .45rem .7rem; border-radius: 9px;
}
.tabs a:hover { background: var(--surface); color: var(--seine-deep); text-decoration: none; }
.topbar__meta { display: flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-soft); white-space: nowrap; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--na); box-shadow: 0 0 0 3px rgba(154,163,184,.18); }
.dot-live[data-state="ok"] { background: var(--ok); box-shadow: 0 0 0 3px rgba(31,157,87,.18); }
.dot-live[data-state="no"] { background: var(--no); box-shadow: 0 0 0 3px rgba(216,56,76,.18); }
.icon-btn { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: .95rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: var(--surface); color: var(--ink); }

.panel { padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1rem, 3vw, 2.4rem); scroll-margin-top: calc(var(--topbar-h) + 8px); border-bottom: 1px solid var(--line); }
.panel__head { margin-bottom: 1.2rem; }
.panel__head h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700; color: var(--seine-deep); margin: 0 0 .25rem; letter-spacing: -.01em; }
.eyebrow { font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; color: var(--seine); font-weight: 700; margin: 0 0 .7rem; }

/* ───────────── OVERVIEW / VERDICT ───────────── */
.verdict { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.6rem; }
.verdict__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--na); margin-top: .5rem; flex: none; box-shadow: 0 0 0 5px rgba(154,163,184,.18); }
.verdict[data-state="loading"] .verdict__dot { animation: pulse 1.2s ease-in-out infinite; }
.verdict[data-state="ok"]  .verdict__dot { background: var(--ok); box-shadow: 0 0 0 5px rgba(31,157,87,.2); }
.verdict[data-state="mid"] .verdict__dot,
.verdict[data-state="mixed"] .verdict__dot { background: var(--gold); box-shadow: 0 0 0 5px rgba(200,137,27,.2); }
.verdict[data-state="no"]  .verdict__dot { background: var(--no); box-shadow: 0 0 0 5px rgba(216,56,76,.2); }
@keyframes pulse { 0%,100%{opacity:.35} 50%{opacity:1} }
.verdict__text { font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--seine-deep); margin: 0; }
.verdict__text strong { color: inherit; }
.v-when { display: block; margin-top: .5rem; font-size: .84rem; font-weight: 500; color: var(--ink-soft); }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); }
.tile__k { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); font-weight: 600; }
.tile__v { display: block; font-weight: 800; font-size: 1.9rem; color: var(--seine-deep); line-height: 1.1; margin: .35rem 0 .15rem; letter-spacing: -.01em; }
.tile__note { font-family: var(--font-mono); font-size: .68rem; color: var(--na); }

/* ───────────── MAP ───────────── */
#map { height: 440px; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); z-index: 0; }
.leaflet-container { font-family: var(--font-body); background: #dfe6f2; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 1.3rem; padding: 0; margin: 1rem 0 0; font-size: .84rem; color: var(--ink-soft); }
.legend li { display: flex; align-items: center; gap: .5rem; }
.pin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.pin--ok { background: var(--ok); } .pin--mid { background: var(--gold); } .pin--no { background: var(--no); } .pin--na { background: var(--na); }

/* ───────────── SITE CARDS ───────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.1rem; }
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem 1.3rem 1.1rem; box-shadow: var(--shadow-sm); overflow: hidden;
  opacity: 0; transform: translateY(10px); animation: rise .5s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes rise { to { opacity: 1; transform: none; } }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--na); }
.card[data-state="ok"]::before  { background: var(--ok); }
.card[data-state="mid"]::before { background: var(--gold); }
.card[data-state="no"]::before  { background: var(--no); }
.card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.card__name { font-weight: 700; font-size: 1.15rem; color: var(--seine-deep); margin: 0; letter-spacing: -.01em; }
.card__meta { font-size: .78rem; color: var(--ink-soft); margin-top: .3rem; display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.chip { font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; padding: .18rem .5rem; border-radius: 6px; border: 1px solid var(--line); }
.chip--seine { color: var(--seine); background: rgba(47,86,214,.08); border-color: rgba(47,86,214,.25); }
.chip--canal { color: var(--gold); background: rgba(200,137,27,.09); border-color: rgba(200,137,27,.28); }

.badge { flex: none; font-weight: 700; font-size: .72rem; padding: .35rem .65rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--ok  { color: var(--ok-deep); background: rgba(31,157,87,.12); }
.badge--mid { color: var(--gold);    background: rgba(200,137,27,.13); }
.badge--no  { color: var(--no);      background: rgba(216,56,76,.11); }
.badge--na  { color: var(--na);      background: rgba(154,163,184,.14); }

.readouts { display: flex; gap: 1.3rem; margin: 1.1rem 0 .3rem; }
.readout { flex: 1; }
.readout__k { font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); font-weight: 600; }
.readout__v { font-family: var(--font-mono); font-weight: 600; font-size: 1.35rem; color: var(--ink); line-height: 1.2; margin-top: .1rem; }
.readout__v small { font-size: .58rem; color: var(--na); font-weight: 400; }
.readout__v.over { color: var(--no); } .readout__v.mid { color: var(--gold); } .readout__v.under { color: var(--ok-deep); }
.card__date { font-family: var(--font-mono); font-size: .7rem; color: var(--na); margin: .4rem 0 .8rem; }
.card__date .src { color: var(--seine); } .card__date a { color: var(--seine); }

.chart { width: 100%; height: 100px; display: block; }
.chart circle.cdot { cursor: pointer; }
.chart circle.cdot:hover { fill: rgba(27,42,99,.06); }
.chart-tip {
  position: fixed; z-index: 3000; pointer-events: none;
  background: #17255a; color: #fff;
  padding: .4rem .55rem; border-radius: 8px; font-size: .74rem; line-height: 1.3;
  box-shadow: var(--shadow); white-space: nowrap; transform: translate(12px, -118%);
}
.chart-tip.flip { transform: translate(calc(-100% - 12px), -118%); }
.chart-tip b { font-weight: 700; }
.chart-tip small { opacity: .7; }
.chart-tip span { display: block; font-family: var(--font-mono); font-size: .62rem; opacity: .8; margin-top: .12rem; }
.chart-cap { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .6rem; color: var(--na); margin-top: .25rem; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .66rem; color: var(--ink-soft); margin-top: .5rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.chart-legend i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.chart-legend i.lg-line { height: 0; border-top: 2px dashed var(--no); border-radius: 0; }
.card__loading { color: var(--na); font-family: var(--font-mono); font-size: .8rem; padding: 1rem 0; }
.card__err { color: var(--no); font-size: .82rem; }

/* ───────────── FORECAST ───────────── */
.beta { font-family: var(--font-mono); font-size: .56rem; text-transform: uppercase; letter-spacing: .13em; vertical-align: middle; padding: .2rem .5rem; border-radius: 6px; background: rgba(200,137,27,.13); color: var(--gold); margin-left: .5rem; }
.forecast-strip { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: .6rem; }
.fday { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .85rem .55rem 1rem; text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(8px); animation: rise .45s cubic-bezier(.2,.7,.2,1) forwards; }
.fday::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--na); }
.fday[data-risk="ok"]::before  { background: var(--ok); }
.fday[data-risk="mid"]::before { background: var(--gold); }
.fday[data-risk="no"]::before  { background: var(--no); }
.fday__dow  { font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
.fday__date { font-weight: 700; font-size: 1.05rem; color: var(--seine-deep); line-height: 1; margin: .2rem 0 .55rem; }
.fday__rain { font-family: var(--font-mono); font-size: .74rem; color: var(--seine); margin-bottom: .5rem; display: flex; align-items: center; justify-content: center; gap: .25rem; }
.fday__rain svg { width: 11px; height: 11px; opacity: .7; }
/* per-day probability bar (good / medium / poor) */
.fbar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--line-soft); margin: .1rem 0 .55rem; }
.fbar__seg { display: block; height: 100%; }
.fbar--ok { background: var(--ok); } .fbar--mid { background: var(--gold); } .fbar--no { background: var(--no); }
.fday__class { font-size: .78rem; color: var(--ink-soft); }
.fday__class b { color: var(--seine-deep); font-weight: 700; }
.fday__class span { font-family: var(--font-mono); font-size: .68rem; }
.forecast-note { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-soft); margin-top: 1rem; line-height: 1.6; }

/* collapsible model details */
.models { margin-top: 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.models > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .85rem 1.1rem; font-weight: 600; font-size: .92rem; color: var(--seine-deep); }
.models > summary::-webkit-details-marker { display: none; }
.models > summary:hover { background: var(--paper-2); }
.models__chev { color: var(--ink-soft); transition: transform .2s ease; }
.models[open] .models__chev { transform: rotate(180deg); }
.model-compare { display: grid; gap: 1rem; padding: 0 1.1rem 1.1rem; }
.models:not([open]) .model-compare { display: none; }
.mc-row { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.15rem; box-shadow: var(--shadow-sm); }
.mc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.mc-name { font-weight: 700; font-size: 1rem; color: var(--seine-deep); }
.mc-name small { font-weight: 400; font-size: .76rem; color: var(--ink-soft); margin-left: .4rem; }
.mc-skill { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-soft); }
.mc-skill b { color: var(--seine); }
.mc-lead { font-size: .9rem; color: var(--ink-soft); margin-bottom: .2rem; }
.mc-lead b { color: var(--seine-deep); }
.mc-desc { font-size: .86rem; color: var(--ink-soft); margin: .1rem 0 .8rem; line-height: 1.5; }
.mc-desc b { color: var(--seine-deep); }
.mc-fine { font-size: .72rem; color: var(--ink-soft); margin-top: .55rem; }
/* per-model predicted-class dots across the week */
.mc-dots { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; }
.mc-day { flex: 1 0 44px; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.mc-day small { font-family: var(--font-mono); font-size: .56rem; color: var(--ink-soft); white-space: nowrap; }
.mc-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--na); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.mc-dot[data-state="ok"]  { background: var(--ok); }
.mc-dot[data-state="mid"] { background: var(--gold); }
.mc-dot[data-state="no"]  { background: var(--no); }
.coefs { display: grid; gap: .3rem; margin-top: .6rem; }
.coef { display: grid; grid-template-columns: 90px 1fr 44px; align-items: center; gap: .5rem; font-size: .72rem; }
.coef__k { color: var(--ink-soft); }
.coef__bar { position: relative; height: 8px; background: var(--line-soft); border-radius: 4px; }
.coef__fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.coef__fill.pos { background: var(--no); left: 50%; }
.coef__fill.neg { background: var(--seine); right: 50%; }
.coef__v { font-family: var(--font-mono); font-size: .68rem; text-align: right; color: var(--ink); }
.coef__mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line); }

/* ───────────── PHYSICO ───────────── */
.phys-fresh { font-size: .82rem; margin-top: -.4rem; }
.phys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.phys { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); }
.phys__k { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.phys__k .qdot { width: 8px; height: 8px; border-radius: 50%; background: var(--na); flex: none; }
.phys__k .qdot.good { background: var(--ok); } .phys__k .qdot.mid { background: var(--gold); } .phys__k .qdot.bad { background: var(--no); }
.phys__v { font-family: var(--font-mono); font-weight: 600; font-size: 1.4rem; color: var(--seine-deep); margin: .35rem 0 .1rem; line-height: 1.1; }
.phys__v small { font-size: .58rem; color: var(--na); font-weight: 400; }
.phys__note { font-size: .68rem; color: var(--ink-soft); }
.phys__note .stale { color: var(--no); font-family: var(--font-mono); font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; }

/* ───────────── METHOD ───────────── */
.method { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.method__item { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); }
.method__item h3 { margin: 0 0 .5rem; }
.method__item p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.tag { font-family: var(--font-mono); font-size: .74rem; background: #1b2a63; color: #fff; padding: .2rem .55rem; border-radius: 7px; }
:root[data-theme="dark"] .tag { background: rgba(122,162,255,.2); color: var(--seine); }

/* ───────────── FOOTER ───────────── */
.footer { padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1rem, 3vw, 2.4rem) 2rem; background: var(--surface); }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.2rem; }
.footer h4 { font-weight: 700; font-size: 1.02rem; color: var(--seine-deep); margin: 0 0 .7rem; }
.footer ul { list-style: none; padding: 0; margin: 0; font-size: .88rem; line-height: 1.9; color: var(--ink-soft); }
.disclaimer { font-size: .86rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.footer__sign { margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .7rem; color: var(--na); }

/* ───────────── RESPONSIVE ───────────── */
/* Prevent sideways scroll WITHOUT killing position:sticky.
   `overflow-x: hidden` would force overflow-y:auto → makes the root a scroll
   container → sidebar/topbar stop sticking. `clip` avoids that. */
html, body { overflow-x: clip; max-width: 100%; }
/* let grid/flex children shrink instead of forcing horizontal overflow */
.cards, .tiles, .phys-grid, .method, .forecast-strip, .footer__cols { min-width: 0; }
.card, .tile, .fday, .phys, .method__item, .mc-row, .readout, .panel { min-width: 0; }
img, svg, #map, .chart { max-width: 100%; }

/* ── Tablet & below: collapse the sidebar into a top strip ── */
@media (max-width: 920px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; flex-direction: column; gap: .9rem;
    padding: 1rem; border-right: none; border-bottom: 1px solid var(--line);
  }
  .side-nav { flex-direction: row; overflow-x: auto; gap: .4rem; padding-bottom: .2rem; scrollbar-width: none; }
  .side-nav::-webkit-scrollbar { display: none; }
  .snav { flex: 0 0 auto; background: var(--paper-2); }
  .snav__name { max-width: 130px; }
  .side-foot { display: none; }               /* nav duplicated by the top tabs */
  .topbar { position: sticky; top: 0; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { white-space: nowrap; }
  .forecast-strip { grid-template-columns: repeat(4, 1fr); }
}

/* ── Phone ── */
@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  #map { height: 300px; }
  .panel { padding: 1.3rem 1rem; }
  .verdict__text { font-size: 1.45rem; }
  .verdict__dot { width: 13px; height: 13px; }
  .tile__v { font-size: 1.6rem; }
  .topbar__meta { display: none; }
  .footer { padding: 1.6rem 1rem 1.8rem; }
  .footer__cols { gap: 1.4rem; }
  .chart-tip { font-size: .78rem; }           /* easier to read on tap */
}

/* ── Small phone ── */
@media (max-width: 520px) {
  .forecast-strip { grid-template-columns: repeat(2, 1fr); }
  .readouts { gap: 1rem; }
  .panel__head h2 { font-size: 1.2rem; }
  .legend { gap: .9rem .9rem; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .fday, .verdict__dot { animation: none !important; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  .skel { animation: none !important; }
}

/* ───────────── ACCESSIBILITY ───────────── */
:focus-visible { outline: 2px solid var(--seine); outline-offset: 2px; border-radius: 4px; }

/* ───────────── SEASON CHIPS ───────────── */
.chip--open   { color: var(--ok-deep); background: rgba(31,157,87,.12); border-color: rgba(31,157,87,.3); }
.chip--closed { color: var(--na);      background: rgba(154,163,184,.14); border-color: rgba(154,163,184,.3); }

/* ───────────── BEST-WINDOW BANNER ───────────── */
.best-window { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-radius: 12px; font-size: .95rem; margin-bottom: 1.1rem; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.best-window .bw__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--na); flex: none; }
.best-window[data-state="ok"]  { background: rgba(31,157,87,.08); border-color: rgba(31,157,87,.3); }
.best-window[data-state="ok"]  .bw__dot { background: var(--ok); }
.best-window[data-state="mid"] { background: rgba(200,137,27,.09); border-color: rgba(200,137,27,.3); }
.best-window[data-state="mid"] .bw__dot { background: var(--gold); }
.best-window[data-state="no"]  { background: rgba(216,56,76,.08); border-color: rgba(216,56,76,.3); }
.best-window[data-state="no"]  .bw__dot { background: var(--no); }

/* ───────────── SKELETONS ───────────── */
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel { background: linear-gradient(90deg, var(--line-soft) 25%, var(--paper-2) 40%, var(--line-soft) 60%); background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; border-radius: 8px; color: transparent !important; }
.tile__v.skel { display: inline-block; width: 62%; height: 1.7rem; }
.fday--skel { display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.fday--skel .skel { width: 100%; }
.skel-sm { height: .7rem; width: 60% !important; } .skel-md { height: 1.1rem; } .skel-bar { height: 9px; }

/* ───────────── DARK THEME ───────────── */
:root[data-theme="dark"] {
  --paper: #0e1621; --paper-2: #172433; --surface: #17222f;
  --ink: #e7edf6; --ink-soft: #9db0c8;
  --seine: #7aa2ff; --seine-deep: #e8eefb; --seine-glow: #9db8ff;
  --gold: #e0a63a; --ok: #37b26b; --ok-deep: #62cf90; --no: #ec6072; --na: #7f8ea3;
  --line: rgba(255,255,255,.12); --line-soft: rgba(255,255,255,.06);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.8);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
}
:root[data-theme="dark"] .chip--seine { background: rgba(122,162,255,.14); border-color: rgba(122,162,255,.32); }
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .leaflet-container a.leaflet-popup-close-button { color: var(--ink-soft); }