/* assets/css/meteo-explorer.css
 * Tout est portée sous .meteo-block pour ne rien imposer au thème.
 * La typographie est héritée du thème ; seules les couleurs de données
 * sont fixées, parce qu'elles portent du sens.
 */
.meteo-block{
  --mx-surface:#fcfcfb;
  --mx-plane:#f7f6f2;
  --mx-ink:#131211;
  --mx-ink-2:#52514e;
  --mx-muted:#898781;
  --mx-grid:#e1e0d9;
  --mx-axis:#c3c2b7;
  --mx-rule:rgba(19,18,17,.12);
  --mx-band:rgba(19,18,17,.055);
  --mx-heat:#eb6834;        /* maximum du jour */
  --mx-cold:#2a78d6;        /* minimum : du jour, et de l'année */
  --mx-max:#e34948;         /* maximum de l'année */
  --mx-e1:#eb6834;          /* échelles : Bordeaux */
  --mx-e2:#4a3aa7;          /* France */
  --mx-e3:#1baf7a;          /* Europe */
  --mx-e4:#52514e;          /* Monde — référence, en encre neutre */
  --mx-t30:#e79b6e;         /* rampe ordinale : 30-35, 35-40, 40+ */
  --mx-t35:#dd5a26;
  --mx-t40:#8f2f10;
  --mx-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--mx-ink);
  display:flex; flex-direction:column; gap:30px;
  font-variant-numeric:normal;
}
@media (prefers-color-scheme: dark){
  .meteo-block{
    --mx-surface:#1a1a19; --mx-plane:#0d0d0c; --mx-ink:#fff; --mx-ink-2:#c3c2b7;
    --mx-muted:#8f8d86; --mx-grid:#2c2c2a; --mx-axis:#383835;
    --mx-rule:rgba(255,255,255,.14); --mx-band:rgba(255,255,255,.06);
    --mx-heat:#d95926; --mx-cold:#3987e5; --mx-max:#e66767;
    --mx-e1:#d95926; --mx-e2:#9085e9; --mx-e3:#199e70; --mx-e4:#c3c2b7;
    --mx-t30:#e79b6e; --mx-t35:#dd5a26; --mx-t40:#c2450f;
  }
}
.meteo-block *{box-sizing:border-box}
.meteo-block .meteo-boot{color:var(--mx-muted);font-size:.9em}

/* ---- sélecteurs ---- */
.meteo-block .mx-controls{
  background:var(--mx-surface); border:1px solid var(--mx-rule); border-radius:3px;
  padding:18px 20px; display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end;
}
.meteo-block .mx-field{display:flex; flex-direction:column; gap:6px; flex:0 1 210px; min-width:150px}
.meteo-block .mx-field label{
  font-family:var(--mx-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mx-muted);
}
.meteo-block select{
  font:inherit; font-size:15px; line-height:1.2; color:var(--mx-ink);
  background:var(--mx-plane); border:1px solid var(--mx-rule); border-radius:2px;
  height:46px; padding:0 34px 0 12px; width:100%; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5' fill='none' stroke='%23898781' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:15px;
}
.meteo-block select:hover{border-color:var(--mx-axis)}
.meteo-block select:focus-visible,
.meteo-block .mx-nav button:focus-visible,
.meteo-block summary:focus-visible,
.meteo-block .mx-fig:focus-visible{outline:2px solid var(--mx-cold); outline-offset:2px}
.meteo-block .mx-nav{display:flex; gap:8px}
.meteo-block .mx-nav button{
  font:inherit; font-size:14px; color:var(--mx-ink-2); background:var(--mx-surface);
  border:1px solid var(--mx-rule); border-radius:2px; width:46px; height:46px;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.meteo-block .mx-nav button:hover:not(:disabled){color:var(--mx-ink); border-color:var(--mx-axis)}
.meteo-block .mx-nav button:disabled{opacity:.38; cursor:not-allowed}
.meteo-block .mx-status{flex:1 1 100%; font-size:12.5px; color:var(--mx-muted); min-height:18px; margin:0}
.meteo-block .mx-status[data-state="error"]{color:var(--mx-t35)}

/* ---- cartes ---- */
.meteo-block .mx-card{
  background:var(--mx-surface); border:1px solid var(--mx-rule); border-radius:3px;
  padding:22px 20px 16px; display:flex; flex-direction:column; gap:12px;
}
.meteo-block .mx-head{display:flex; flex-wrap:wrap; gap:8px 22px; align-items:baseline; justify-content:space-between}
.meteo-block .mx-card h3{font-size:1.05em; margin:0; font-weight:600; letter-spacing:-.01em}
.meteo-block .mx-sub{font-size:12.5px; color:var(--mx-muted); margin:4px 0 0; max-width:74ch}
.meteo-block .mx-legend{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center}
.meteo-block .mx-lg{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--mx-ink-2); white-space:nowrap}
.meteo-block .mx-lg i{display:block; flex:none; width:16px; height:2px; border-radius:2px}
.meteo-block .mx-lg i.sw{width:11px; height:11px; border-radius:1.5px}
.meteo-block .mx-fig{position:relative; width:100%}
.meteo-block .mx-fig svg{display:block; width:100%; height:auto; overflow:visible}
.meteo-block .mx-note{font-size:12px; color:var(--mx-muted); margin:0; max-width:80ch}

/* ---- statistiques de l'année ---- */
.meteo-block .mx-stats{display:flex; flex-wrap:wrap; gap:18px 34px}
.meteo-block .mx-stat{display:flex; flex-direction:column; gap:2px}
.meteo-block .mx-stat-l{font-family:var(--mx-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--mx-muted)}
.meteo-block .mx-stat-v{font-size:22px; font-weight:600; letter-spacing:-.02em; line-height:1.15; font-variant-numeric:tabular-nums}
.meteo-block .mx-stat-d{font-size:12px; color:var(--mx-ink-2)}
.meteo-block .mx-stat.t30 .mx-stat-v{color:var(--mx-t30)}
.meteo-block .mx-stat.t35 .mx-stat-v{color:var(--mx-t35)}
.meteo-block .mx-stat.t40 .mx-stat-v{color:var(--mx-t40)}

/* ---- infobulle ---- */
/* Le bandeau de lecture est SOUS le graphique, jamais par-dessus : une
   infobulle flottante masque précisément la zone qu'on est en train de lire,
   et disparaît dès qu'on veut la relire. Ici elle reste, et ne bouge pas. */
.meteo-block .mx-tip{
  pointer-events:none; margin-top:10px; padding:10px 0 2px;
  border-top:1px solid var(--mx-rule);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 22px;
  min-height:44px;
}
.meteo-block .mx-tip-h{
  font-family:var(--mx-mono); font-size:11px; letter-spacing:.05em; color:var(--mx-muted);
  flex:0 0 auto; min-width:8ch;
}
.meteo-block .mx-tip.is-idle .mx-tip-h{font-style:italic}
.meteo-block .mx-tip-r{display:flex; align-items:baseline; gap:8px; white-space:nowrap}
.meteo-block .mx-tip-r i{display:block; width:14px; height:2px; border-radius:2px; flex:none; transform:translateY(-4px)}
.meteo-block .mx-tip-v{font-weight:600; font-size:14.5px; font-variant-numeric:tabular-nums}
.meteo-block .mx-tip-n{font-size:12px; color:var(--mx-ink-2)}

/* ---- tableau ---- */
.meteo-block details{background:var(--mx-surface); border:1px solid var(--mx-rule); border-radius:3px}
.meteo-block summary{cursor:pointer; padding:14px 18px; font-size:14px; font-weight:500; list-style:none; display:flex; gap:9px; align-items:center}
.meteo-block summary::-webkit-details-marker{display:none}
.meteo-block summary::before{content:"+"; font-family:var(--mx-mono); color:var(--mx-muted)}
.meteo-block details[open] summary::before{content:"–"}
/* Défilement interne du tableau. `data-lenis-prevent` est indispensable :
   le thème pilote la molette avec Lenis, qui sinon avale l'événement et
   fige le conteneur sur ses premières lignes. Lenis est désactivé en
   mobile, où le scroll tactile natif fonctionne déjà. */
.meteo-block .mx-scroll{
  overflow-x:auto; overflow-y:auto; overscroll-behavior:contain;
  max-height:min(70vh, 620px); border-top:1px solid var(--mx-rule);
}
.meteo-block table{border-collapse:collapse; width:100%; font-size:13px; font-variant-numeric:tabular-nums}
.meteo-block th, .meteo-block td{padding:6px 16px; text-align:right; white-space:nowrap; border:0}
.meteo-block th:first-child, .meteo-block td:first-child{text-align:left}
.meteo-block thead th{
  position:sticky; top:0; background:var(--mx-surface); color:var(--mx-muted); z-index:1;
  font-family:var(--mx-mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  font-weight:400; border-bottom:1px solid var(--mx-rule);
}
.meteo-block tbody tr + tr td{border-top:1px solid var(--mx-grid)}
.meteo-block tbody td{color:var(--mx-ink-2)}
.meteo-block tbody td:first-child{color:var(--mx-ink); font-family:var(--mx-mono)}
.meteo-block tbody tr.is-current td{background:var(--mx-band); color:var(--mx-ink)}

@media (prefers-reduced-motion:reduce){ .meteo-block *{transition:none !important} }
@media (max-width:600px){
  .meteo-block .mx-field{flex:1 1 100%}
  .meteo-block .mx-stats{gap:14px 24px}
}

/* ---- journées repères (blocs seuils) ---- */
.meteo-block .sx-h{font-size:1.05em; font-weight:600; margin:0 0 12px; letter-spacing:-.01em}
.meteo-block .events{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:1px;
  background:var(--mx-rule); border:1px solid var(--mx-rule); border-radius:3px; overflow:hidden;
}
.meteo-block .ev{background:var(--mx-surface); padding:12px 14px; display:flex; flex-direction:column; gap:2px}
.meteo-block .ev-d{font-family:var(--mx-mono); font-size:10.5px; letter-spacing:.05em; color:var(--mx-muted)}
.meteo-block .ev-v{font-size:19px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.meteo-block .ev.top .ev-v{color:var(--mx-t40)}

/* ---- sommaire du dossier ---- */
.climat-sommaire{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:16px}
.climat-card{
  display:flex; flex-direction:column; gap:9px; text-decoration:none; color:inherit;
  background:var(--mx-surface); border:1px solid var(--mx-rule); border-radius:3px;
  padding:22px 20px 18px; transition:border-color .14s, transform .14s;
}
.climat-card:hover{border-color:var(--mx-axis); transform:translateY(-2px); text-decoration:none}
.climat-card:focus-visible{outline:2px solid var(--mx-cold); outline-offset:2px}
.climat-k{font-family:var(--mx-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--mx-muted)}
.climat-t{font-size:1.15em; font-weight:600; letter-spacing:-.018em; line-height:1.2; text-wrap:balance}
.climat-d{font-size:13.5px; color:var(--mx-ink-2); line-height:1.55; flex:1}
.climat-go{font-size:12.5px; font-weight:500; color:var(--mx-ink); margin-top:4px; display:inline-flex; align-items:center; gap:6px}
.climat-go::after{content:"→"; transition:transform .14s}
.climat-card:hover .climat-go::after{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){ .climat-card:hover{transform:none} }

/* Une moyenne de postes n'a pas de compteurs de seuils : la carte disparaît. */
.meteo-block.is-panel #mx-card-days{display:none}

/* ---- page des échelles ---- */
.meteo-block .ech-lg{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center}
.meteo-block .ech-lg span{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--mx-ink-2); white-space:nowrap}
.meteo-block .ech-lg i{display:block; width:18px; height:2px; border-radius:2px; flex:none}