/* Météo La Seyne — styles. Les couleurs reprennent les variables du thème si
   elles existent (--ink, --gold…), avec des valeurs de repli sinon. */
.mlsm{
  --mlsm-ink:var(--ink,#15233d);
  --mlsm-muted:var(--muted,#6a768e);
  --mlsm-line:var(--line,#e3e8f0);
  --mlsm-tint:var(--tint,#eef2f7);
  --mlsm-accent:var(--gold,#b4935c);
  --mlsm-paper:var(--paper,#ffffff);
  font-family:var(--font-sans,system-ui,-apple-system,"Segoe UI",sans-serif);
  color:var(--mlsm-ink);
  box-sizing:border-box;
}
.mlsm *{box-sizing:border-box}
.mlsm b{font-weight:600}

/* ---------- bande horizontale ---------- */
.mlsm-band{
  background:var(--mlsm-tint);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 32px;padding:26px 22px;text-align:center;
}
.mlsm-band .mlsm-big{display:flex;align-items:center;gap:14px}
.mlsm-band .mlsm-ico{font-size:2.2rem;line-height:1}
.mlsm-band .mlsm-temp{font-family:var(--font-display,Georgia,serif);font-size:3rem;font-weight:400;line-height:1}
.mlsm-band .mlsm-cond{text-align:left;font-size:.9rem;color:var(--mlsm-muted);font-weight:300}
.mlsm-band .mlsm-cond b{display:block;color:var(--mlsm-ink);font-weight:500;letter-spacing:.02em}
.mlsm-sep{width:1px;height:46px;background:var(--mlsm-line)}
.mlsm-item{text-align:center}
.mlsm-item .k{display:block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mlsm-muted)}
.mlsm-item .v{display:block;font-family:var(--font-display,Georgia,serif);font-size:1.7rem;font-weight:400;margin-top:2px}
.mlsm-item .v.mlsm-small{font-size:1.1rem;padding-top:7px}
.mlsm-sea{color:var(--mlsm-accent)}

/* ---------- carte verticale ---------- */
.mlsm-card{
  background:var(--mlsm-paper);
  border:1px solid var(--mlsm-line);
  border-radius:18px;padding:22px;max-width:380px;
}
.mlsm-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mlsm-place{font-weight:600}
.mlsm-sub{font-size:.82rem;color:var(--mlsm-muted)}
.mlsm-live{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;color:var(--mlsm-accent)}
.mlsm-dot{width:8px;height:8px;border-radius:50%;background:var(--mlsm-accent);
  box-shadow:0 0 0 0 rgba(180,147,92,.6);animation:mlsm-pulse 2.2s infinite}
@keyframes mlsm-pulse{
  0%{box-shadow:0 0 0 0 rgba(180,147,92,.55)}
  70%{box-shadow:0 0 0 9px rgba(180,147,92,0)}
  100%{box-shadow:0 0 0 0 rgba(180,147,92,0)}
}
.mlsm-now{display:flex;align-items:center;gap:14px;margin:14px 0 4px}
.mlsm-now .mlsm-ico{font-size:2.4rem;line-height:1}
.mlsm-now .mlsm-temp{font-family:var(--font-display,Georgia,serif);font-size:3.2rem;font-weight:400;line-height:1}
.mlsm-now .mlsm-cond{font-size:.9rem;color:var(--mlsm-muted);font-weight:300}
.mlsm-now .mlsm-cond b{display:block;color:var(--mlsm-ink);font-weight:500}
.mlsm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.mlsm-stat{background:var(--mlsm-tint);border-radius:12px;padding:10px 8px;text-align:center}
.mlsm-stat .k{display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mlsm-muted)}
.mlsm-stat .v{display:block;font-weight:600;font-size:1.1rem;margin-top:3px}
.mlsm-days{display:flex;justify-content:space-between;gap:6px;margin-top:16px;
  border-top:1px solid var(--mlsm-line);padding-top:14px}
.mlsm-day{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;font-size:.8rem}
.mlsm-day .d{color:var(--mlsm-muted);text-transform:uppercase;font-size:.62rem;letter-spacing:.06em}
.mlsm-day .i{font-size:1.15rem}
.mlsm-day .t{font-weight:600}

/* ---------- erreur ---------- */
.mlsm-error{font-size:.9rem;color:var(--mlsm-muted,#6a768e);padding:14px 16px;
  border:1px dashed var(--mlsm-line,#e3e8f0);border-radius:12px;text-align:center}

@media (max-width:560px){
  .mlsm-band .mlsm-sep{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mlsm-dot{animation:none}
}