/* ============================================================
   Capteur Meteo - style.css v23
   Nettoyage complet : suppression pluie CSS (canvas), doublons,
   styles obsoletes. Particules meteo gerees par weather-canvas.js
   ============================================================ */

:root {
  --navy: #0b1628;
  --navy-2: #122038;
  --navy-3: #1a2c4a;
  --orange: #f47920;
  --orange-soft: #ff9248;
  --text: #ffffff;
  --text-dim: #9aa8bf;
  --text-faint: #5c6b85;
  --border: rgba(255,255,255,0.08);
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 8px 32px rgba(0,0,0,0.35);
  --glass-bg: rgba(18, 32, 56, 0.45);
  --glass-border: rgba(255,255,255,0.08);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,0.08);
  --c-rain: #7dd3fc;
  --c-snow: #e0f2fe;
  --c-storm: #a78bfa;
  --c-hail: #ec4899;
  --c-wind: #2dd4bf;
  --c-fog: #94a3b8;
  --c-clear: #fbbf24;
  --c-success: #4ade80;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--navy); }
html, body {
  color: var(--text);
  font-family: 'Outfit', -apple-system, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}
body { position: relative; background: transparent; transition: background 1.2s ease; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }
.hidden { display: none !important; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ============================================================
   FOND DYNAMIQUE (body::before)
   Particules = weather-canvas.js (#weather-canvas)
   Les anciennes divs .sky-layer sont ignorees
   ============================================================ */
.sky-layer { display: none !important; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse at 70% 15%, #1e3a5f 0%, #0b1628 60%);
  transition: background 1.2s ease, filter 0.3s ease;
}

body.sky-clear::before { background: radial-gradient(ellipse at 80% 10%, #fbbf24 -50%, #1e3a5f 30%, #0b1628 75%); }
body.sky-night::before { background: radial-gradient(ellipse at 30% 90%, #1e1b4b 0%, #0b1628 70%); }
body.sky-cloudy::before { background: linear-gradient(180deg, #475569 0%, #1a2c4a 60%, #0b1628 100%); }
body.sky-rain::before { background: linear-gradient(180deg, #1e293b 0%, #1e3a5f 40%, #0f1e3a 80%, #0b1628 100%); }
body.sky-storm::before { background: linear-gradient(180deg, #1e1b4b 0%, #2e1065 50%, #0f0a1e 85%, #0b1628 100%); animation: storm-flash 7s infinite; }
body.sky-snow::before { background: linear-gradient(180deg, #64748b 0%, #475569 40%, #1a2c4a 80%, #0b1628 100%); }
body.sky-fog::before { background: linear-gradient(180deg, #64748b 0%, #334155 50%, #0b1628 100%); }

@keyframes storm-flash {
  0%, 91%, 93%, 95%, 100% { filter: none; }
  92%, 94% { filter: brightness(1.6) saturate(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
}

/* Canvas meteo (pluie/neige) */
#weather-canvas { z-index: 0 !important; }
.app-header, .app-main { position: relative; z-index: 2; }

/* ============================================================
   HEADER
   ============================================================ */
.app-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11,22,40,0.55);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-top: env(safe-area-inset-top);
}
.header-inner { max-width: 720px; margin: 0 auto; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.header-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.logo { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-accent { color: var(--orange); }
.header-actions { display: flex; gap: 6px; flex-shrink: 0; }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); transition: background 0.2s, color 0.2s; }
.icon-btn:hover, .icon-btn:active { background: rgba(255,255,255,0.08); color: var(--orange); }
.app-main { max-width: 720px; margin: 0 auto; padding: 18px 18px calc(40px + env(safe-area-inset-bottom)); }

/* Bouton refresh */
.icon-btn-refresh svg { transition: transform 0.3s ease; }
.icon-btn-refresh:hover svg { transform: rotate(90deg); }
.icon-btn-refresh.spinning svg { animation: refresh-spin 1s linear infinite; }
@keyframes refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Pastille bouton roadtrip */
.icon-btn-roadtrip { position: relative; }
.icon-btn-roadtrip::after { content: ''; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; background: var(--orange); border-radius: 50%; box-shadow: 0 0 6px var(--orange); }

/* ============================================================
   PANELS (search + options)
   ============================================================ */
.search-panel, .filters-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 18px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset);
}
.search-panel input {
  width: 100%;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
}
.search-panel input:focus { border-color: var(--orange); }
.search-results { margin-top: 10px; max-height: 280px; overflow-y: auto; }
.search-result { padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; color: var(--text-dim); }
.search-result:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.search-result strong { color: var(--text); font-weight: 500; }

.options-panel-inner { display: flex; flex-direction: column; gap: 8px; }
.opt-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin-bottom: 6px; }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.opt-label { font-size: 13px; color: var(--text-dim); flex: 0 0 auto; }
.opt-slider-wrap { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.opt-slider-wrap input[type=range] { flex: 1; -webkit-appearance: none; background: transparent; cursor: pointer; }
.opt-slider-wrap input[type=range]::-webkit-slider-runnable-track { height: 4px; background: rgba(255,255,255,0.15); border-radius: 2px; }
.opt-slider-wrap input[type=range]::-moz-range-track { height: 4px; background: rgba(255,255,255,0.15); border-radius: 2px; }
.opt-slider-wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: var(--orange); border-radius: 50%; margin-top: -6px; }
.opt-slider-wrap input[type=range]::-moz-range-thumb { width: 16px; height: 16px; background: var(--orange); border-radius: 50%; border: none; }
.opt-val { font-size: 12px; font-weight: 500; color: var(--orange); min-width: 38px; text-align: right; }
.opt-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--text-dim); user-select: none; flex: 1; }
.opt-toggle input { display: none; }
.opt-switch { width: 36px; height: 20px; background: rgba(255,255,255,0.12); border-radius: 20px; position: relative; transition: background 0.2s; flex-shrink: 0; }
.opt-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.opt-toggle input:checked + .opt-switch { background: var(--orange); }
.opt-toggle input:checked + .opt-switch::after { transform: translateX(16px); }
.opt-toggle input:disabled + .opt-switch { opacity: 0.4; }
.opt-separator { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); border-top: 1px solid var(--glass-border); padding-top: 10px; margin-top: 6px; }
.opt-disabled { opacity: 0.55; }
.opt-disabled .opt-toggle { cursor: not-allowed; }
.opt-badge { font-size: 10px; font-weight: 500; color: var(--orange); background: rgba(244,121,32,0.15); padding: 3px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; }

/* ============================================================
   LOCATION BAR
   ============================================================ */
.location-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding: 4px 2px; gap: 12px; }
.location-name { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; text-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.location-meta { font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 2px; }
.confidence-badge {
  font-size: 11px; font-weight: 500; padding: 6px 12px; border-radius: 20px;
  background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border); color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0;
}
.confidence-badge.high { color: var(--c-success); border-color: rgba(74,222,128,0.3); }
.confidence-badge.medium { color: var(--orange); border-color: rgba(244,121,32,0.4); }
.confidence-badge.low { color: #f87171; border-color: rgba(248,113,113,0.3); }

/* ============================================================
   HERO (temperature XXL)
   ============================================================ */
.current-card-hero {
  display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: center;
  padding: 32px 8px 40px; margin: 8px 0 32px;
  background: transparent; border: none; box-shadow: none; cursor: pointer; position: relative;
}
@media (max-width: 480px) { .current-card-hero { grid-template-columns: 110px 1fr; gap: 14px; padding: 24px 4px 32px; } }
.current-icon-wrap { width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5)); }
.current-icon-wrap .weather-icon { width: 100%; height: 100%; }
@media (max-width: 480px) { .current-icon-wrap { width: 110px; height: 110px; } }
.current-right { min-width: 0; }
.current-temp { font-size: 112px; font-weight: 200; letter-spacing: -0.06em; line-height: 0.95; text-shadow: 0 4px 24px rgba(0,0,0,0.35); }
.current-temp .unit { font-size: 36px; font-weight: 300; color: rgba(255,255,255,0.65); margin-left: 4px; }
.current-desc { font-size: 24px; font-weight: 400; margin-top: 10px; text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.current-feels, .current-minmax { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.current-context {
  margin-top: 12px; padding: 7px 12px; display: inline-block;
  background: rgba(255,255,255,0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 14px; font-size: 12px; border: 1px solid rgba(255,255,255,0.18);
}
.current-context:empty { display: none; }
@media (max-width: 480px) {
  .current-temp { font-size: 88px; }
  .current-temp .unit { font-size: 28px; }
  .current-desc { font-size: 20px; }
}

/* Accents contextuels */
body.sky-rain .daily-max { color: var(--c-rain); }
body.sky-storm .daily-max { color: var(--c-storm); }
body.sky-snow .daily-max { color: var(--c-snow); }
body.sky-clear .daily-max { color: var(--c-clear); }

/* ============================================================
   TUILES METRIQUES 3x2
   ============================================================ */
.tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 32px;
}
@media (max-width: 640px) { .tiles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 320px) { .tiles-grid { grid-template-columns: 1fr; } }

.tile {
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
}
.tile-label-top {
  font-size: 10px; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500;
  margin-bottom: 8px;
}
.tile-svg { align-items: center; padding-bottom: 8px; }
.tile-svg svg { flex: 1; min-height: 0; }
.tile-text { justify-content: center; }
.tile-big-val { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 4px; }
.tile-sub { font-size: 12px; color: var(--text-dim); font-weight: 500; letter-spacing: 0.02em; }
.tile-meta { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 6px; letter-spacing: 0.04em; }
.tile-empty { font-size: 12px; color: var(--text-faint); text-align: center; padding: 20px 0; }

.wind-compass-svg, .pressure-gauge-svg {
  width: 100%; max-width: 140px; height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.uv-bar-wrap { padding: 4px 0; }
.uv-bar-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.uv-bar-val { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; }
.uv-bar-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.uv-bar-track { position: relative; height: 10px; border-radius: 5px; background: rgba(0,0,0,0.3); overflow: visible; margin-bottom: 8px; }
.uv-bar-gradient {
  position: absolute; inset: 0; border-radius: 5px;
  background: linear-gradient(90deg, #4ade80 0%, #fbbf24 25%, #f47920 50%, #ef4444 75%, #a855f7 100%);
  opacity: 0.9;
}
.uv-bar-cursor {
  position: absolute; top: -3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transform: translateX(-50%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  border: 2px solid rgba(0,0,0,0.2);
  transition: left 0.4s ease;
}
.uv-bar-scale { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.4); font-weight: 500; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { margin-bottom: 32px; }
.section-title {
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.4); margin-bottom: 14px;
}

/* ============================================================
   DAILY (prevision 7 jours)
   ============================================================ */
.daily-list { display: flex; flex-direction: column; gap: 6px; }
.daily-row {
  display: grid; grid-template-columns: 80px 36px 1fr 50px 50px; gap: 10px; align-items: center;
  background: var(--glass-bg); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); box-shadow: var(--glass-inset);
  font-size: 14px; cursor: pointer; transition: all 0.2s ease;
}
.daily-row:hover { background: rgba(244,121,32,0.12); border-color: rgba(244,121,32,0.4); transform: translateX(4px); }
.daily-day { font-weight: 500; }
.daily-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.daily-icon .weather-icon { width: 100%; height: 100%; }
.daily-desc { color: var(--text-dim); font-size: 13px; }
.daily-min { color: var(--text-faint); text-align: right; }
.daily-max { color: var(--orange); text-align: right; font-weight: 500; }
@media (max-width: 480px) {
  .daily-row { grid-template-columns: 60px 32px 1fr 42px 42px; gap: 6px; font-size: 13px; padding: 12px; }
  .daily-icon { width: 32px; height: 32px; }
  .daily-desc { font-size: 12px; }
}

.models-list { display: flex; flex-wrap: wrap; gap: 6px; }
.model-chip {
  background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border); border-radius: 20px;
  padding: 7px 14px; font-size: 11px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
}

/* ============================================================
   NOWCAST
   ============================================================ */
.nowcast-banner {
  background: var(--glass-bg); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border); border-left: 4px solid var(--c-clear); box-shadow: var(--glass-inset);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px;
}
.nowcast-banner.event-rain, .nowcast-banner.event-drizzle { border-left-color: var(--c-rain); }
.nowcast-banner.event-snow { border-left-color: var(--c-snow); }
.nowcast-banner.event-storm { border-left-color: var(--c-storm); }
.nowcast-banner.event-hail { border-left-color: var(--c-hail); }
.nowcast-banner.event-wind { border-left-color: var(--c-wind); }
.nowcast-banner.event-fog { border-left-color: var(--c-fog); }
.nb-title { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.nb-sub { font-size: 13px; color: var(--text-dim); }
.nowcast-section { margin-top: 8px; }
.nowcast-timeline {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
  background: var(--glass-bg); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-inset);
  border-radius: var(--radius); padding: 14px 10px; height: 140px; align-items: end;
}
.nc-step { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; opacity: 1; transition: opacity 0.2s; }
.nc-step.filtered { opacity: 0.25; }
.nc-bar { width: 80%; max-width: 28px; background: var(--c-clear); border-radius: 3px 3px 0 0; min-height: 6px; box-shadow: 0 0 8px currentColor; }
.nc-step.ev-rain .nc-bar, .nc-step.ev-drizzle .nc-bar { background: var(--c-rain); }
.nc-step.ev-snow .nc-bar { background: var(--c-snow); }
.nc-step.ev-storm .nc-bar { background: var(--c-storm); }
.nc-step.ev-hail .nc-bar { background: var(--c-hail); }
.nc-step.ev-wind .nc-bar { background: var(--c-wind); }
.nc-step.ev-fog .nc-bar { background: var(--c-fog); }
.nc-time { font-size: 10px; color: var(--text-faint); }
.nc-mm { font-size: 10px; color: var(--text-dim); font-weight: 500; }

/* ============================================================
   RADAR MAP
   ============================================================ */
.radar-map {
  width: 100%; height: 360px; min-height: 360px; border-radius: var(--radius);
  border: 1px solid var(--glass-border); overflow: hidden; background: var(--glass-bg);
  margin-bottom: 10px; position: relative; box-shadow: var(--glass-inset);
}
.radar-map .leaflet-control-attribution { background: rgba(11,22,40,0.85); color: var(--text-dim); font-size: 10px; }
.radar-map .leaflet-control-attribution a { color: var(--orange); }
.radar-btn { width: 36px; height: 36px; background: var(--orange); color: var(--navy); border-radius: 50%; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; }
.radar-btn:hover { background: var(--orange-soft); }
#radar-slider { width: 100%; -webkit-appearance: none; background: transparent; cursor: pointer; }
#radar-slider::-webkit-slider-runnable-track { height: 4px; background: rgba(255,255,255,0.15); border-radius: 2px; }
#radar-slider::-moz-range-track { height: 4px; background: rgba(255,255,255,0.15); border-radius: 2px; }
#radar-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--orange); border-radius: 50%; margin-top: -5px; }
#radar-slider::-moz-range-thumb { width: 14px; height: 14px; background: var(--orange); border-radius: 50%; border: none; }
.radar-info { display: flex; flex-direction: column; align-items: flex-end; min-width: 70px; }
.radar-kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,0.08); color: var(--text-dim); font-weight: 500; }
.radar-kind.forecast { color: var(--orange); background: rgba(244,121,32,0.15); }
.radar-time { font-size: 13px; font-weight: 500; margin-top: 2px; }
.radar-jumps { display: flex; gap: 6px; justify-content: center; margin-top: 6px; flex-wrap: wrap; }
.radar-btn-sm {
  padding: 6px 12px; background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border); border-radius: 20px; font-size: 12px; color: var(--text-dim); cursor: pointer;
}
.radar-btn-sm:hover { border-color: var(--orange); color: var(--orange); }
.radar-btn-sm.active { background: var(--orange); color: var(--navy); border-color: var(--orange); font-weight: 500; backdrop-filter: none; -webkit-backdrop-filter: none; }
.radar-status { font-size: 11px; color: var(--text-faint); text-align: center; padding: 4px 0; }
.radar-timeline {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-inset);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 6px; min-height: 56px;
}
.radar-fullscreen { position: fixed !important; inset: 0 !important; z-index: 9999 !important; background: var(--navy); margin: 0 !important; padding: 12px !important; display: flex !important; flex-direction: column !important; gap: 8px; }
.radar-fullscreen .section-title { margin: 0 0 8px 0; }
.radar-fullscreen #radar-map { flex: 1; height: auto !important; min-height: 0; }
body.radar-fs-active { overflow: hidden; }

.leaflet-tooltip { background: var(--navy-3) !important; color: var(--text) !important; border: 1px solid var(--border) !important; font-family: 'Outfit', sans-serif !important; font-size: 12px !important; border-radius: 6px !important; }
.leaflet-interactive { transition: fill-opacity 0.3s ease; }

/* ============================================================
   STORM & HAIL
   ============================================================ */
.storm-section, .hail-section { margin-bottom: 32px; }
.storm-top, .hail-top { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 640px) { .storm-top, .hail-top { grid-template-columns: 1fr; } }
.storm-gauge, .hail-gauge {
  background: var(--glass-bg); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-inset);
  border-radius: var(--radius); padding: 16px; text-align: center;
}
.storm-gauge-svg { width: 100%; height: auto; max-width: 200px; display: block; margin: 0 auto; }
.storm-gauge-caption { font-size: 11px; color: var(--text-faint); margin-top: 8px; line-height: 1.4; }
.storm-metrics, .hail-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.storm-metric {
  background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-inset);
  border-radius: var(--radius-sm); padding: 12px 14px;
  display: grid; grid-template-areas: "label unit" "value value" "desc desc"; gap: 2px;
}
.storm-metric-label { grid-area: label; font-size: 10px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; }
.storm-metric-unit { grid-area: unit; font-size: 10px; color: rgba(255,255,255,0.4); text-align: right; }
.storm-metric-value { grid-area: value; font-size: 24px; font-weight: 500; color: var(--text); line-height: 1; letter-spacing: -0.02em; }
.storm-metric-desc { grid-area: desc; font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.storm-alert {
  grid-column: 1 / -1;
  background: linear-gradient(90deg, rgba(168,85,247,0.2), rgba(168,85,247,0.05));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(168,85,247,0.3); border-left: 4px solid var(--c-storm);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.storm-alert-title { font-size: 13px; font-weight: 600; color: #c4b5fd; margin-bottom: 2px; }
.storm-alert-sub { font-size: 12px; color: var(--text-dim); }
.storm-chart-wrap, .hail-chart-wrap {
  background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-inset);
  border-radius: var(--radius); padding: 12px; margin-bottom: 14px; height: 240px; position: relative;
}
.storm-lightning-btn {
  display: flex; flex-direction: column; padding: 14px 18px;
  background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); border-left: 4px solid var(--orange); box-shadow: var(--glass-inset);
  border-radius: var(--radius-sm); text-decoration: none; color: var(--text); transition: all 0.15s;
}
.storm-lightning-btn:hover { border-color: var(--orange); transform: translateX(4px); }
.storm-lightning-btn span { font-size: 14px; font-weight: 500; }
.storm-lightning-btn small { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.storm-error { text-align: center; padding: 20px; color: var(--text-faint); font-size: 13px; }

.section-title-hail::before {
  content: ''; display: inline-block; width: 10px; height: 10px;
  background: var(--c-hail); border-radius: 50%;
  margin-right: 8px; vertical-align: middle;
  box-shadow: 0 0 12px var(--c-hail);
}

/* ============================================================
   HODOGRAPHE
   ============================================================ */
.storm-hodograph-wrap {
  background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-inset);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px;
}
.hodo-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin-bottom: 10px; text-align: center; }
.hodo-svg { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto 14px; }
.hodo-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 12px; margin-bottom: 12px; }
.hodo-legend-item { display: flex; align-items: center; gap: 6px; color: var(--text-dim); }
.hodo-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.hodo-legend-item strong { color: var(--text); font-weight: 500; min-width: 36px; }
.hodo-val { color: var(--text-faint); font-size: 11px; }
.hodo-shear { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; padding: 10px 12px; background: rgba(0,0,0,0.2); border-radius: var(--radius-sm); border: 1px solid var(--glass-border); font-size: 12px; }
.hodo-shear-label { color: var(--text-dim); }
.hodo-shear-val { color: var(--orange); font-size: 14px; font-weight: 600; }
.hodo-shear-desc { color: var(--text-faint); font-size: 11px; width: 100%; margin-top: 2px; }

/* ============================================================
   WEATHER ICONS (animations SVG)
   ============================================================ */
.weather-icon { width: 100%; height: 100%; display: block; }
.wi-sun-rays, .wi-moon, .wi-cloud-drift, .wi-drop, .wi-flake, .wi-bolt, .wi-fog-line { transform-box: view-box !important; }
.wi-sun-rays { animation: wi-rotate-slow 30s linear infinite; }
@keyframes wi-rotate-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.wi-moon { animation: wi-moon-glow 5s ease-in-out infinite; }
@keyframes wi-moon-glow { 0%, 100% { opacity: 0.95; filter: drop-shadow(0 0 0 rgba(197,208,224,0)); } 50% { opacity: 1; filter: drop-shadow(0 0 4px rgba(197,208,224,0.7)); } }
.wi-cloud-drift { animation: wi-drift-subtle 10s ease-in-out infinite; }
@keyframes wi-drift-subtle { 0%, 100% { transform: translateX(-1.5px); } 50% { transform: translateX(1.5px); } }
.wi-drop { animation: wi-drop-fall 1.6s ease-in infinite; }
.wi-drop-0 { animation-delay: 0s; } .wi-drop-1 { animation-delay: 0.5s; } .wi-drop-2 { animation-delay: 1s; } .wi-drop-3 { animation-delay: 0.3s; }
@keyframes wi-drop-fall { 0% { transform: translateY(-4px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }
.wi-flake { animation: wi-flake-spin 4s linear infinite; }
.wi-flake-0 { animation-delay: 0s; } .wi-flake-1 { animation-delay: 1.3s; } .wi-flake-2 { animation-delay: 2.6s; }
@keyframes wi-flake-spin { 0% { transform: translateY(-3px) rotate(0deg); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(6px) rotate(360deg); opacity: 0; } }
.wi-bolt { animation: wi-bolt-flash 4s ease-in-out infinite; }
@keyframes wi-bolt-flash { 0%, 90%, 95%, 100% { opacity: 0.35; filter: brightness(0.85); } 92% { opacity: 1; filter: brightness(1.8) drop-shadow(0 0 5px #facc15); } 94% { opacity: 0.5; } }
.wi-fog-line { animation: wi-fog-wave 3.5s ease-in-out infinite; }
.wi-fog-1 { animation-delay: 0s; } .wi-fog-2 { animation-delay: 0.7s; } .wi-fog-3 { animation-delay: 1.4s; }
@keyframes wi-fog-wave { 0%, 100% { transform: translateX(-1.5px); opacity: 0.55; } 50% { transform: translateX(1.5px); opacity: 1; } }
.daily-icon .wi-sun-rays, .daily-icon .wi-moon, .daily-icon .wi-cloud-drift, .daily-icon .wi-drop, .daily-icon .wi-flake, .daily-icon .wi-bolt, .daily-icon .wi-fog-line { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .wi-sun-rays, .wi-moon, .wi-cloud-drift, .wi-drop, .wi-flake, .wi-bolt, .wi-fog-line { animation: none !important; } }

/* ============================================================
   AIR QUALITY + POLLENS
   ============================================================ */
.aq-section { margin-bottom: 32px; }
.aq-top { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 640px) { .aq-top { grid-template-columns: 1fr; } }
.aq-gauge {
  background: var(--glass-bg); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-inset);
  border-radius: var(--radius); padding: 16px; text-align: center;
}
.aq-gauge-svg { width: 100%; height: auto; max-width: 200px; display: block; margin: 0 auto; }
.aq-gauge-caption { font-size: 11px; color: var(--text-dim); margin-top: 8px; line-height: 1.4; padding: 0 4px; }
.aq-pollutants { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aq-pollutant {
  background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-inset);
  border-radius: var(--radius-sm); padding: 12px 14px;
  display: grid; grid-template-areas: "label unit" "value value" "desc desc"; gap: 2px;
}
.aq-pol-label { grid-area: label; font-size: 11px; font-weight: 600; color: var(--text); }
.aq-pol-unit { grid-area: unit; font-size: 10px; color: rgba(255,255,255,0.4); text-align: right; }
.aq-pol-value { grid-area: value; font-size: 20px; font-weight: 500; color: var(--orange); line-height: 1; letter-spacing: -0.01em; }
.aq-pol-desc { grid-area: desc; font-size: 10px; color: rgba(255,255,255,0.45); margin-top: 4px; }
.aq-pollen-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.4); margin: 14px 0 8px; }
.aq-pollen-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (max-width: 480px) { .aq-pollen-list { grid-template-columns: 1fr; } }
.aq-pollen-item {
  display: grid; grid-template-columns: 14px 1fr auto auto; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-inset);
  border-radius: var(--radius-sm); font-size: 13px;
}
.aq-pollen-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.aq-pollen-name { color: var(--text); font-weight: 500; }
.aq-pollen-level { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 10px; background: rgba(255,255,255,0.06); }
.aq-pollen-val { font-size: 11px; color: var(--text-faint); }
.aq-pollen-empty { padding: 14px; text-align: center; color: var(--text-faint); font-size: 12px; background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); }
.aq-error { text-align: center; padding: 20px; color: var(--text-faint); font-size: 13px; }

/* ============================================================
   SUN & MOON
   ============================================================ */
.sm-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.4); margin-bottom: 12px; }
.sm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
@media (max-width: 520px) { .sm-grid { grid-template-columns: 1fr; } }
.sm-card {
  background: var(--glass-bg); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-inset);
  border-radius: var(--radius); padding: 16px; min-height: 220px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.sm-sun-svg { width: 100%; height: auto; display: block; }
.sm-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--glass-border); }
.sm-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sm-stat-lbl { font-size: 9px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.08em; }
.sm-stat-val { font-size: 14px; font-weight: 500; color: var(--text); margin-top: 3px; }
.sm-moon-card { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: center; }
.sm-moon-visual { width: 90px; height: 90px; filter: drop-shadow(0 4px 16px rgba(197,208,224,0.3)); }
.sm-moon-svg { width: 100%; height: 100%; }
.sm-moon-info { display: flex; flex-direction: column; gap: 8px; }
.sm-moon-name { font-size: 15px; font-weight: 600; color: var(--text); }
.sm-moon-illum { font-size: 12px; color: var(--text-dim); }
.sm-moon-times { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: 12px; color: var(--text-dim); }
.sm-moon-times strong { color: var(--text); font-weight: 600; margin-left: 6px; }

/* ============================================================
   TRANSPORT (indice activite)
   ============================================================ */
.transport-section { margin-bottom: 32px; }
.tp-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; }
@media (max-width: 520px) { .tp-chips { grid-template-columns: repeat(3, 1fr); } }
.tp-chip {
  background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-inset);
  border-radius: var(--radius-sm); padding: 12px 8px; color: var(--text-dim); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all 0.15s;
}
.tp-chip:hover { border-color: var(--orange); color: var(--orange); }
.tp-chip.active { background: var(--orange); color: var(--navy); border-color: var(--orange); font-weight: 600; backdrop-filter: none; -webkit-backdrop-filter: none; }
.tp-chip-icon { font-size: 22px; line-height: 1; }
.tp-chip-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.tp-main { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
@media (max-width: 640px) { .tp-main { grid-template-columns: 1fr; } }
.tp-gauge {
  background: var(--glass-bg); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-inset);
  border-radius: var(--radius); padding: 16px; text-align: center;
}
.tp-gauge svg { width: 100%; max-width: 200px; display: block; margin: 0 auto; }
.tp-verdict { font-size: 18px; font-weight: 600; margin-top: 6px; letter-spacing: -0.01em; }
.tp-tip { font-size: 12px; color: var(--text-dim); margin-top: 6px; line-height: 1.4; }
.tp-subs { display: flex; flex-direction: column; gap: 10px; }
.tp-sub {
  background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-inset);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.tp-sub-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 13px; color: var(--text); }
.tp-sub-val { font-size: 14px; font-weight: 600; font-family: 'Outfit', sans-serif; }
.tp-sub-bar { height: 6px; background: rgba(0,0,0,0.3); border-radius: 3px; overflow: hidden; }
.tp-sub-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }

/* Alerte coupe-circuit (affichee quand conditions critiques) */
.tp-alert {
  background: linear-gradient(90deg, rgba(239,68,68,0.15), rgba(239,68,68,0.04));
  border: 1px solid rgba(239,68,68,0.35);
  border-left: 3px solid #ef4444;
  color: #fecaca;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 10px;
  line-height: 1.4;
}

/* ============================================================
   VIGILANCE (banner + modal)
   ============================================================ */
.vigilance-banner {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: var(--radius); margin-bottom: 18px; cursor: pointer;
  background: var(--glass-bg); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-inset);
  transition: transform 0.15s, box-shadow 0.15s;
}
.vigilance-banner:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.vigilance-banner.vg-yellow { background: linear-gradient(90deg, rgba(234,179,8,0.22), var(--glass-bg)); border-left: 4px solid #eab308; color: #fef3c7; }
.vigilance-banner.vg-orange { background: linear-gradient(90deg, rgba(244,121,32,0.25), var(--glass-bg)); border-left: 4px solid var(--orange); color: #fed7aa; }
.vigilance-banner.vg-red { background: linear-gradient(90deg, rgba(220,38,38,0.3), var(--glass-bg)); border-left: 4px solid #dc2626; color: #fecaca; animation: vg-pulse 2.5s ease-in-out infinite; }
@keyframes vg-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); } 50% { box-shadow: 0 0 0 6px rgba(220,38,38,0.3); } }
.vg-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.15); color: inherit; flex-shrink: 0; }
.vg-content { min-width: 0; }
.vg-title { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; }
.vg-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.vg-detail-btn { background: rgba(255,255,255,0.12); color: var(--text); border: 1px solid rgba(255,255,255,0.18); padding: 8px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.vg-detail-btn:hover { background: rgba(255,255,255,0.2); }

/* ============================================================
   MODALS (jour, summary, vigilance, roadtrip)
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: modal-fade 0.2s ease; padding: 20px; overflow-y: auto;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-content {
  background: var(--navy-2); border: 1px solid var(--glass-border); border-radius: var(--radius);
  max-width: 640px; width: 100%; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: modal-up 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative;
}
@keyframes modal-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 640px) {
  .modal-overlay { padding: 0; }
  .modal-content { max-width: 100%; max-height: 100vh; max-height: 100dvh; height: 100vh; height: 100dvh; border-radius: 0; animation: modal-slide-up 0.3s cubic-bezier(0.16,1,0.3,1); }
  @keyframes modal-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
}
body.modal-open { overflow: hidden; }
.modal-close, .modal-summary-close, .vg-modal-close, .rt-modal-close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid var(--glass-border); color: var(--text-dim);
  font-size: 18px; cursor: pointer; z-index: 10;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.modal-close:hover, .modal-summary-close:hover, .vg-modal-close:hover, .rt-modal-close:hover { background: var(--orange); color: var(--navy); border-color: var(--orange); }
.modal-loading { padding: 60px 20px; text-align: center; color: var(--text-dim); font-size: 14px; }

/* Modal jour detail */
#modal-day-content { padding: 28px 24px; }
.modal-day-header { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; margin-bottom: 20px; }
.modal-day-icon { width: 96px; height: 96px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }
.modal-day-icon .weather-icon { width: 100%; height: 100%; }
.modal-day-title { font-size: 22px; font-weight: 600; text-transform: capitalize; }
.modal-day-desc { font-size: 14px; color: var(--text-dim); margin-top: 2px; }
.modal-day-temps { margin-top: 8px; font-size: 28px; font-weight: 300; }
.modal-day-temps .t-max { color: var(--orange); }
.modal-day-temps .t-sep { color: var(--text-faint); margin: 0 6px; }
.modal-day-temps .t-min { color: var(--text-dim); }
.modal-narrative { background: var(--navy-3); border: 1px solid var(--glass-border); border-left: 4px solid var(--orange); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 20px; }
.narrative-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); margin-bottom: 6px; }
.narrative-text { font-size: 14px; line-height: 1.6; color: var(--text); }
.modal-day-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
@media (max-width: 400px) { .modal-day-stats { grid-template-columns: 1fr; } }
.modal-day-stats .stat { background: var(--navy-3); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; }
.stat-lbl { font-size: 12px; color: var(--text-dim); }
.stat-val { font-size: 13px; font-weight: 500; color: var(--text); }
.modal-chart-wrap { background: var(--navy-3); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 20px; height: 220px; }
.hourly-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); margin-bottom: 8px; }
.hourly-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
@media (max-width: 480px) { .hourly-grid { grid-template-columns: repeat(2, 1fr); } }
.hourly-cell { background: var(--navy-3); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hourly-time { font-size: 11px; color: var(--text-faint); }
.hourly-icon { width: 36px; height: 36px; }
.hourly-icon .weather-icon { width: 100%; height: 100%; }
.hourly-temp { font-size: 14px; font-weight: 500; }
.hourly-precip { font-size: 10px; color: var(--c-rain); min-height: 12px; }

/* Modal resume global */
#modal-summary-content { padding: 28px 24px; }
.summary-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.summary-place { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.summary-country { font-size: 13px; color: var(--text-faint); }
.summary-highlights { background: var(--navy-3); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; }
.highlights-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); margin-bottom: 8px; }
.highlight-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); margin-bottom: 6px; background: rgba(0,0,0,0.2); font-size: 13px; }
.highlight-row:last-child { margin-bottom: 0; }
.highlight-row.level-alert { background: linear-gradient(90deg, rgba(168,85,247,0.2), rgba(0,0,0,0.2)); border-left: 3px solid var(--c-storm); }
.highlight-row.level-warn { background: linear-gradient(90deg, rgba(244,121,32,0.15), rgba(0,0,0,0.2)); border-left: 3px solid var(--orange); }
.highlight-row.level-info { background: linear-gradient(90deg, rgba(125,211,252,0.12), rgba(0,0,0,0.2)); border-left: 3px solid var(--c-rain); }
.highlight-icon { font-size: 18px; flex-shrink: 0; }
.highlight-text { color: var(--text); }
.summary-weekly { background: var(--navy-3); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; }
.weekly-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); margin-bottom: 10px; }
.spark-svg { width: 100%; height: auto; display: block; margin-bottom: 10px; }
.trend-text { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.summary-moments { margin-bottom: 10px; }
.moments-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); margin-bottom: 8px; }
.moments-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 480px) { .moments-grid { grid-template-columns: 1fr; } }
.moment-cell { background: var(--navy-3); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.moment-icon { font-size: 20px; flex-shrink: 0; }
.moment-label { flex: 1; font-size: 12px; color: var(--text-dim); }
.moment-value { font-size: 13px; font-weight: 500; color: var(--text); }

/* Modal vigilance */
#modal-vigilance-content { padding: 28px 24px; }
.vg-modal-header { margin-bottom: 18px; }
.vg-modal-title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.vg-modal-sub { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.vg-alert-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.vg-alert { border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: var(--navy-3); padding: 14px 16px; }
.vg-alert.vg-yellow { border-left: 4px solid #eab308; }
.vg-alert.vg-orange { border-left: 4px solid var(--orange); }
.vg-alert.vg-red { border-left: 4px solid #dc2626; background: linear-gradient(90deg, rgba(220,38,38,0.1), var(--navy-3)); }
.vg-alert-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.vg-alert-type { font-size: 14px; font-weight: 600; color: var(--text); }
.vg-alert-level { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 20px; }
.vg-alert.vg-yellow .vg-alert-level { color: #fef3c7; background: rgba(234,179,8,0.25); }
.vg-alert.vg-orange .vg-alert-level { color: #fed7aa; background: rgba(244,121,32,0.25); }
.vg-alert.vg-red .vg-alert-level { color: #fecaca; background: rgba(220,38,38,0.3); }
.vg-alert-headline { font-size: 13px; color: var(--text); font-weight: 500; margin-bottom: 6px; line-height: 1.4; }
.vg-alert-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-bottom: 8px; }
.vg-alert-timing { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-faint); padding-top: 8px; border-top: 1px solid var(--glass-border); }
.vg-alert-timing strong { color: var(--text-dim); font-weight: 500; margin-right: 4px; }
.vg-modal-footer { font-size: 11px; color: var(--text-faint); text-align: center; padding-top: 10px; border-top: 1px solid var(--glass-border); }

/* ============================================================
   ROAD TRIP
   ============================================================ */
#modal-roadtrip-content { padding: 24px; min-height: 70vh; }
.rt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; }
.rt-title { font-size: 20px; font-weight: 600; }
.rt-back { background: var(--navy-3); border: 1px solid var(--glass-border); color: var(--text-dim); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; }
.rt-back:hover { color: var(--orange); border-color: var(--orange); }
.rt-btn-primary { background: var(--orange); color: var(--navy); padding: 10px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; border: none; cursor: pointer; }
.rt-btn-primary:hover { background: var(--orange-soft); }
.rt-btn-secondary { background: var(--navy-3); color: var(--text); padding: 8px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; border: 1px solid var(--glass-border); cursor: pointer; }
.rt-btn-secondary:hover { border-color: var(--orange); color: var(--orange); }
.rt-empty { text-align: center; padding: 60px 20px; color: var(--text-dim); }
.rt-empty-icon { font-size: 48px; margin-bottom: 12px; }
.rt-empty-title { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.rt-empty-sub { font-size: 13px; max-width: 300px; margin: 0 auto; line-height: 1.5; }
.rt-list { display: flex; flex-direction: column; gap: 10px; }
.rt-card { background: var(--navy-3); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; transition: all 0.15s; }
.rt-card:hover { border-color: var(--orange); transform: translateX(2px); }
.rt-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.rt-card-name { font-size: 15px; font-weight: 600; }
.rt-card-sub { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.rt-card-route { font-size: 12px; color: var(--text-faint); line-height: 1.5; }
.rt-btn-del { background: transparent; color: var(--text-faint); border: none; cursor: pointer; font-size: 20px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.rt-btn-del:hover { background: rgba(248,113,113,0.15); color: #f87171; }
.rt-form { display: flex; flex-direction: column; gap: 12px; }
.rt-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); font-weight: 500; }
.rt-input { width: 100%; background: var(--navy-3); border: 1px solid var(--glass-border); color: var(--text); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; font-family: 'Outfit', sans-serif; outline: none; }
.rt-input:focus { border-color: var(--orange); }
.rt-input-mini { width: 70px; padding: 4px 8px; font-size: 12px; }
.rt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .rt-row { grid-template-columns: 1fr; } }
.rt-col { display: flex; flex-direction: column; gap: 4px; }
.rt-transport { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
@media (max-width: 480px) { .rt-transport { grid-template-columns: repeat(2, 1fr); } }
.rt-transport-btn { background: var(--navy-3); border: 1px solid var(--glass-border); color: var(--text-dim); padding: 10px 6px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.rt-transport-btn:hover { border-color: var(--orange); color: var(--orange); }
.rt-transport-btn.active { background: var(--orange); color: var(--navy); border-color: var(--orange); font-weight: 600; }
.rt-transport-btn span { font-size: 16px; }
.rt-stops-header { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--glass-border); font-size: 13px; font-weight: 500; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.rt-stops { display: flex; flex-direction: column; gap: 8px; }
.rt-stop { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; background: var(--navy-3); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 12px 14px; align-items: start; }
.rt-stop-num { width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.rt-stop-info { min-width: 0; }
.rt-stop-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.rt-stop-meta { font-size: 11px; color: var(--text-dim); display: flex; gap: 10px; flex-wrap: wrap; }
.rt-stop-time { color: var(--orange); }
.rt-stop-dist { color: var(--text-faint); }
.rt-stop-pause { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--text-faint); }
.rt-stop-pause label { text-transform: uppercase; letter-spacing: 0.04em; }
.rt-stop-actions { display: flex; flex-direction: column; gap: 4px; }
.rt-btn-icon { width: 28px; height: 28px; border-radius: 6px; background: rgba(0,0,0,0.2); border: 1px solid var(--glass-border); color: var(--text-dim); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.rt-btn-icon:hover:not(:disabled) { background: var(--orange); color: var(--navy); }
.rt-btn-icon:disabled { opacity: 0.3; cursor: not-allowed; }
.rt-btn-icon.rt-btn-danger:hover { background: #ef4444; color: white; border-color: #ef4444; }
.rt-search-results { margin-top: 10px; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.rt-search-item { padding: 10px 12px; background: var(--navy-3); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; color: var(--text-dim); }
.rt-search-item:hover { background: rgba(255,255,255,0.06); color: var(--text); border-color: var(--orange); }
.rt-search-item strong { color: var(--text); font-weight: 500; margin-right: 6px; }
.rt-search-item small { color: var(--text-faint); font-size: 12px; }
.rt-search-empty { text-align: center; color: var(--text-faint); padding: 20px; font-size: 13px; }

/* Road trip view */
.rtv-map { width: 100%; height: 320px; border-radius: var(--radius); border: 1px solid var(--glass-border); overflow: hidden; background: var(--navy-3); margin-bottom: 14px; }
.rtv-marker { background: transparent !important; border: none !important; }
.rtv-marker-inner { width: 32px; height: 32px; background: var(--orange); color: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.rtv-summary { background: var(--navy-3); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.rtv-sum-top { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.rtv-sum-score { width: 80px; height: 80px; background: var(--navy); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid currentColor; flex-shrink: 0; }
.rtv-sum-score-num { font-size: 24px; font-weight: 700; line-height: 1; }
.rtv-sum-score-lbl { font-size: 8px; letter-spacing: 0.1em; margin-top: 2px; opacity: 0.8; }
.rtv-sum-verdict { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.rtv-sum-narr { font-size: 13px; color: var(--text-dim); line-height: 1.4; margin-bottom: 6px; }
.rtv-sum-real { font-size: 11px; color: var(--text-faint); }
.rtv-sum-loading { text-align: center; color: var(--text-faint); padding: 10px; font-size: 12px; }
.rtv-timeline { display: flex; flex-direction: column; gap: 0; }
.rtv-step { display: grid; grid-template-columns: 40px 1fr; gap: 12px; background: var(--navy-3); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 14px 16px; }
.rtv-step-num { width: 36px; height: 36px; background: var(--orange); color: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.rtv-step-body { min-width: 0; }
.rtv-step-name { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.rtv-step-time { font-size: 12px; color: var(--orange); margin-bottom: 10px; }
.rtv-step-weather { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--glass-border); }
.rtv-w-loading, .rtv-w-err { font-size: 12px; color: var(--text-faint); text-align: center; padding: 8px; }
.rtv-w-top { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; }
.rtv-w-icon { width: 44px; height: 44px; }
.rtv-w-icon .weather-icon { width: 100%; height: 100%; }
.rtv-w-main { min-width: 0; }
.rtv-w-temp { font-size: 20px; font-weight: 500; line-height: 1; }
.rtv-w-feels { font-size: 11px; color: var(--text-faint); font-weight: 400; }
.rtv-w-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.rtv-w-score { text-align: center; padding: 6px 10px; background: rgba(0,0,0,0.2); border-radius: var(--radius-sm); border: 1px solid currentColor; }
.rtv-w-score-num { font-size: 20px; font-weight: 700; line-height: 1; }
.rtv-w-score-lbl { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.rtv-w-alerts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.rtv-w-alert { font-size: 11px; padding: 3px 8px; background: rgba(244,121,32,0.15); border: 1px solid rgba(244,121,32,0.3); color: #fed7aa; border-radius: 20px; }
.rtv-leg { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 8px 16px; align-items: center; }
.rtv-leg-line { grid-column: 1; width: 2px; height: 24px; background: var(--orange); margin-left: 17px; opacity: 0.4; }
.rtv-leg-info { font-size: 11px; color: var(--text-faint); letter-spacing: 0.02em; }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border); color: var(--text);
  padding: 12px 18px; border-radius: var(--radius-sm); font-size: 13px;
  box-shadow: var(--shadow); z-index: 100;
}

/* ============================================================
   FOOTER MAJ
   ============================================================ */
.app-footer-maj {
  text-align: center; font-size: 11px; color: rgba(255,255,255,0.3);
  margin-top: 40px; padding: 20px 0 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* Fix artefacts GPU Chrome mobile sur SVG anime */
.wi-drop, .wi-flake, .wi-bolt, .wi-fog-line, 
.wi-sun-rays, .wi-moon, .wi-cloud-drift {
  transform-box: fill-box !important;
  will-change: auto !important;
}

/* Isoler le calque de composition pour eviter les fuites */
.weather-icon {
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
}

.current-icon-wrap {
  isolation: isolate;
  contain: layout paint;
}

/* ============================================================
   ADDITIONS v23 - Chips activite premium (SVG + mini-score)
   A ajouter a la fin de style.css, OU remplacer le bloc .tp-chips
   existant (lignes contenant .tp-chip et .tp-chip-icon / .tp-chip-label)
   ============================================================ */

/* Nouvelle grille chips v2 : 5 colonnes desktop, 3 mobile */
.tp-chips-v2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
@media (max-width: 640px) {
  .tp-chips-v2 { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}
@media (max-width: 380px) {
  .tp-chips-v2 { grid-template-columns: repeat(2, 1fr); }
}

.tp-chip-v2 {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset);
  border-radius: var(--radius);
  padding: 16px 8px 10px;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  overflow: hidden;
}

/* Lueur colorée selon le score (bar en bas) */
.tp-chip-v2::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--chip-score-color, transparent);
  opacity: 0.6;
  transition: opacity 0.2s, height 0.2s;
}

.tp-chip-v2:hover {
  border-color: rgba(244,121,32,0.35);
  color: var(--orange);
  transform: translateY(-2px);
}
.tp-chip-v2:hover::after { opacity: 1; height: 4px; }

/* Etat actif : fond orange, icone navy, glow */
.tp-chip-v2.active {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-soft) 100%);
  border-color: var(--orange);
  color: var(--navy);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 4px 20px rgba(244,121,32,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
  transform: translateY(-1px);
}
.tp-chip-v2.active::after {
  background: var(--navy);
  opacity: 0.25;
  height: 4px;
}

/* Pictogramme SVG */
.tp-chip-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
  transition: transform 0.2s;
}
.tp-chip-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tp-chip-v2:hover .tp-chip-icon { transform: scale(1.08); }
.tp-chip-v2.active .tp-chip-icon { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)); }

/* Label */
.tp-chip-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  color: inherit;
  opacity: 0.85;
}
.tp-chip-v2.active .tp-chip-label { opacity: 1; }

/* Mini-score */
.tp-chip-score {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--chip-score-color, var(--text));
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  margin-top: 2px;
  transition: color 0.3s;
}
.tp-chip-v2.active .tp-chip-score {
  color: var(--navy);
  text-shadow: none;
  opacity: 0.85;
}

/* Masque l'ancienne classe .tp-chips (sobre) si elle traine */
.tp-chips { display: none !important; }

/* ============================================================
   ADDITIONS v24 - Storm Hunter refonte premium
   A ajouter a la fin de style.css
   Les anciennes classes .storm-gauge, .storm-metric sont conservees
   (utilisees par le container glass et le chart), mais le contenu
   est remplace par les nouvelles classes .sh-*
   ============================================================ */

/* Remplacement du layout principal : thermometre + verdict cote a cote */
.storm-gauge {
  /* On garde le container glass existant */
  padding: 18px !important;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  text-align: left !important;
}
@media (max-width: 420px) {
  .storm-gauge { grid-template-columns: 1fr; gap: 14px; }
}

.sh-gauge-wrap {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

.sh-thermo {
  width: 140px;
  height: auto;
  max-height: 260px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

/* Verdict principal a droite du thermometre */
.sh-verdict {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.sh-verdict-main {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
@media (max-width: 480px) {
  .sh-verdict-main { font-size: 17px; }
}
.sh-verdict-sub {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 10px;
}
.sh-verdict-score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--glass-border);
}
.sh-score-val {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.sh-score-unit {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dim);
  margin-left: 2px;
}
.sh-score-label {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
  font-weight: 500;
}

/* ============================================================
   STORM METRICS - Tuiles premium (4 cases)
   ============================================================ */

/* Le container .storm-metrics devient simple wrapper */
.storm-metrics {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  grid-template-columns: unset !important;
}

/* Alerte supercellule tout en haut */
.sh-alert-supercell {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(236,72,153,0.22) 0%, rgba(168,85,247,0.12) 100%);
  border: 1px solid rgba(236,72,153,0.45);
  border-left: 4px solid #ec4899;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px rgba(236,72,153,0.2), var(--glass-inset);
  animation: sh-alert-pulse 2.5s ease-in-out infinite;
}
@keyframes sh-alert-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(236,72,153,0.2), var(--glass-inset); }
  50% { box-shadow: 0 4px 28px rgba(236,72,153,0.4), var(--glass-inset); }
}
.sh-alert-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(236,72,153,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fce7f3;
  flex-shrink: 0;
}
.sh-alert-body { min-width: 0; }
.sh-alert-title {
  font-size: 14px;
  font-weight: 600;
  color: #fce7f3;
  margin-bottom: 2px;
}
.sh-alert-sub {
  font-size: 12px;
  color: rgba(252,231,243,0.75);
  line-height: 1.4;
}

/* Grille 2x2 des tuiles metriques */
.sh-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 400px) {
  .sh-metrics-grid { grid-template-columns: 1fr; }
}

.sh-metric {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset);
  border-radius: var(--radius-sm);
  padding: 12px 14px 14px;
  overflow: hidden;
}
.sh-metric::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--sh-metric-color, var(--orange));
  opacity: 0.7;
}
.sh-metric-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.sh-metric-label {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.sh-metric-unit {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
}
.sh-metric-value {
  font-size: 24px;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.sh-metric-bar {
  height: 4px;
  background: rgba(0,0,0,0.3);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.sh-metric-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
  box-shadow: 0 0 6px currentColor;
}
.sh-metric-desc {
  font-size: 11px;
  color: var(--sh-metric-color, var(--text-dim));
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* Masque les anciennes classes si elles sont encore utilisees ailleurs */
.storm-metric { display: none !important; }
.storm-alert { display: none !important; }

/* ============================================================
   FIX v24.1 - Storm Hunter layout desktop
   Le thermometre + verdict passent en pleine largeur en haut
   Les 4 metriques sont en dessous sur 4 colonnes desktop, 2 mobile
   A coller a la fin de style.css (apres le bloc v24)
   ============================================================ */

/* Override du layout .storm-top : plus de split 220px + 1fr */
.storm-top {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

/* Le container thermometre + verdict prend toute la largeur */
.storm-gauge {
  padding: 20px 22px !important;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  text-align: left !important;
}
@media (max-width: 520px) {
  .storm-gauge { grid-template-columns: 1fr; gap: 16px; justify-items: center; text-align: center !important; padding: 18px !important; }
  .sh-verdict { align-items: center; }
  .sh-verdict-score { justify-content: center; }
}

.sh-thermo {
  width: 160px;
  max-height: 280px;
}

.sh-verdict {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.sh-verdict-main {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
@media (max-width: 480px) { .sh-verdict-main { font-size: 19px; } }
.sh-verdict-sub {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 12px;
}
.sh-verdict-score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
}
.sh-score-val {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Grille metriques : 4 colonnes desktop, 2 mobile, 1 tres petit */
.sh-metrics-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}
@media (max-width: 720px) {
  .sh-metrics-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 380px) {
  .sh-metrics-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   ADDITIONS v25 - Hail Hunter refonte premium
   A coller a la fin de style.css (apres v24 et v24.1)
   ============================================================ */

/* Le container .hail-top reprend layout pleine largeur (comme storm) */
.hail-top {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

.hail-gauge {
  padding: 20px 22px !important;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  text-align: left !important;
}
@media (max-width: 520px) {
  .hail-gauge {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
    text-align: center !important;
    padding: 18px !important;
  }
  .hh-verdict { align-items: center; }
  .hh-verdict-score { justify-content: center; }
}

/* Pictogramme grelon */
.hh-gauge-wrap {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 140px;
}
.hh-hailstone {
  width: 140px;
  height: auto;
  max-height: 170px;
  filter: drop-shadow(0 4px 16px rgba(236,72,153,0.25));
}

/* Animations pulse selon intensite */
.hh-hailstone-pulse-1 > g { animation: hh-pulse-soft 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.hh-hailstone-pulse-2 > g { animation: hh-pulse-med 2.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.hh-hailstone-pulse-3 > g { animation: hh-pulse-strong 1.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

@keyframes hh-pulse-soft {
  0%, 100% { transform: scale(1); filter: none; }
  50% { transform: scale(1.04); filter: brightness(1.1); }
}
@keyframes hh-pulse-med {
  0%, 100% { transform: scale(1) rotate(0deg); filter: none; }
  50% { transform: scale(1.06) rotate(-1deg); filter: brightness(1.15); }
}
@keyframes hh-pulse-strong {
  0%, 100% { transform: scale(1) rotate(0deg); filter: none; }
  25% { transform: scale(1.08) rotate(-2deg); filter: brightness(1.2); }
  75% { transform: scale(1.05) rotate(2deg); filter: brightness(1.15); }
}

/* Petits grelons autour */
.hh-small-0, .hh-small-2 { animation: hh-float-a 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.hh-small-1, .hh-small-3 { animation: hh-float-b 3.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.hh-small-4 { animation: hh-float-c 2.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes hh-float-a {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
  50% { transform: translateY(-4px) scale(1.1); opacity: 0.7; }
}
@keyframes hh-float-b {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
  50% { transform: translateY(4px) scale(0.9); opacity: 0.6; }
}
@keyframes hh-float-c {
  0%, 100% { transform: translateX(0); opacity: 0.4; }
  50% { transform: translateX(3px); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .hh-hailstone-pulse-1 > g,
  .hh-hailstone-pulse-2 > g,
  .hh-hailstone-pulse-3 > g,
  .hh-small-0, .hh-small-1, .hh-small-2, .hh-small-3, .hh-small-4 {
    animation: none !important;
  }
}

/* Verdict a droite */
.hh-verdict {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.hh-verdict-main {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
@media (max-width: 480px) { .hh-verdict-main { font-size: 18px; } }

.hh-verdict-sub {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 12px;
}

.hh-verdict-score {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
}
.hh-score-block {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hh-score-val {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.hh-score-unit {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dim);
  margin-left: 2px;
}
.hh-score-label {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
  font-weight: 500;
}
.hh-score-divider {
  width: 1px;
  height: 36px;
  background: var(--glass-border);
  flex-shrink: 0;
}
@media (max-width: 380px) {
  .hh-score-divider { display: none; }
  .hh-verdict-score { flex-wrap: wrap; }
}

/* ============================================================
   HAIL METRICS - Tuiles premium
   ============================================================ */
.hail-metrics {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  grid-template-columns: unset !important;
}

.hh-alert-supercell {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(236,72,153,0.22) 0%, rgba(168,85,247,0.12) 100%);
  border: 1px solid rgba(236,72,153,0.45);
  border-left: 4px solid #ec4899;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px rgba(236,72,153,0.2), var(--glass-inset);
  animation: hh-alert-pulse 2.5s ease-in-out infinite;
}
@keyframes hh-alert-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(236,72,153,0.2), var(--glass-inset); }
  50% { box-shadow: 0 4px 28px rgba(236,72,153,0.4), var(--glass-inset); }
}
.hh-alert-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(236,72,153,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fce7f3;
  flex-shrink: 0;
}
.hh-alert-body { min-width: 0; }
.hh-alert-title {
  font-size: 14px;
  font-weight: 600;
  color: #fce7f3;
  margin-bottom: 2px;
}
.hh-alert-sub {
  font-size: 12px;
  color: rgba(252,231,243,0.75);
  line-height: 1.4;
}

/* Grille tuiles 4 colonnes desktop, 2 mobile */
.hh-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 720px) { .hh-metrics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .hh-metrics-grid { grid-template-columns: 1fr; } }

.hh-metric {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset);
  border-radius: var(--radius-sm);
  padding: 12px 14px 14px;
  overflow: hidden;
}
.hh-metric::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--hh-metric-color, var(--orange));
  opacity: 0.7;
}
.hh-metric-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.hh-metric-label {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.hh-metric-unit {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
}
.hh-metric-value {
  font-size: 24px;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.hh-metric-bar {
  height: 4px;
  background: rgba(0,0,0,0.3);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.hh-metric-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
  box-shadow: 0 0 6px currentColor;
}
.hh-metric-desc {
  font-size: 11px;
  color: var(--hh-metric-color, var(--text-dim));
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* Masque les anciennes classes partagees avec storm si elles reapparaissent ici */
.hail-metrics .storm-metric,
.hail-metrics .storm-alert { display: none !important; }

/* ============================================================
   ADDITIONS v26 - Air Quality + Pollens refonte premium
   A coller a la fin de style.css
   ============================================================ */

/* Override layout .aq-top : pleine largeur (meme pattern que storm/hail) */
.aq-top {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

.aq-gauge {
  padding: 20px 22px !important;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  text-align: left !important;
}
@media (max-width: 520px) {
  .aq-gauge {
    grid-template-columns: 1fr;
    gap: 14px;
    justify-items: center;
    text-align: center !important;
    padding: 18px !important;
  }
  .aq-verdict { align-items: center; }
}

.aq-gauge-svg {
  width: 100%;
  max-width: 240px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

.aq-verdict {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.aq-verdict-main {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
@media (max-width: 480px) { .aq-verdict-main { font-size: 20px; } }

.aq-verdict-sub {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 8px;
}

.aq-verdict-reco {
  margin-top: 4px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid currentColor;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.aq-reco-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--orange);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ============================================================
   POLLUANTS - Grille 6 tuiles premium
   ============================================================ */
.aq-pollutants {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px;
}
@media (max-width: 720px) { .aq-pollutants { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 400px) { .aq-pollutants { grid-template-columns: 1fr !important; } }

/* Masque l'ancien style */
.aq-pollutant { display: none !important; }

.aq-pol {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset);
  border-radius: var(--radius-sm);
  padding: 12px 14px 12px;
  overflow: hidden;
}
.aq-pol::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--aq-pol-color, var(--orange));
  opacity: 0.75;
}
.aq-pol-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.aq-pol-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.aq-pol-unit {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
}
.aq-pol-value {
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.aq-pol-bar {
  height: 4px;
  background: rgba(0,0,0,0.3);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.aq-pol-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
  box-shadow: 0 0 6px currentColor;
}
.aq-pol-desc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aq-pol-level {
  font-size: 11px;
  color: var(--aq-pol-color, var(--text-dim));
  font-weight: 600;
  letter-spacing: 0.02em;
}
.aq-pol-subdesc {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.01em;
}

/* ============================================================
   POLLENS - Chips horizontaux avec icones SVG
   ============================================================ */
.aq-pollen-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
@media (max-width: 520px) { .aq-pollen-list { grid-template-columns: 1fr !important; } }

/* Masque l'ancien style */
.aq-pollen-item { display: none !important; }

.aq-pol-chip {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.aq-pol-chip::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--pol-color);
  opacity: 0.7;
}
.aq-pol-chip.no-data { opacity: 0.45; }
.aq-pol-chip.no-data::before { opacity: 0.3; }

.aq-pol-chip-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--pol-color) 18%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pol-color);
  flex-shrink: 0;
}
.aq-pol-chip-icon svg {
  width: 22px;
  height: 22px;
}

.aq-pol-chip-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.aq-pol-chip-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.aq-pol-chip-meta {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 11px;
}
.aq-pol-chip-level {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.aq-pol-chip-val {
  color: var(--text-faint);
  font-size: 11px;
}

/* ============================================================
   ADDITIONS v27 - Sun & Moon refonte premium
   A coller a la fin de style.css
   Les anciennes classes .sm-grid, .sm-card, .sm-moon-card restent
   pour compat ; nouvelles classes .sm-grid-v2, .sm-card-v2
   ============================================================ */

/* Masque les anciennes mises en page si elles reapparaissent */
.sm-grid { display: none !important; }

/* Nouvelle grille */
.sm-grid-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
@media (max-width: 640px) {
  .sm-grid-v2 { grid-template-columns: 1fr; }
}

.sm-card-v2 {
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Header de carte */
.sm-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.sm-card-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.5);
}
.sm-tod-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid;
}

/* === Carte Soleil === */
.sm-sun-svg-v2 {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  overflow: hidden;
}
.sm-sun-halo {
  animation: sm-sun-pulse 3s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes sm-sun-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .sm-sun-halo { animation: none; }
}

.sm-sun-status {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  padding: 4px 0;
  font-weight: 500;
}

/* Stats avec icones */
.sm-stats-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--glass-border);
}
.sm-moon-card-v2 .sm-stats-v2 {
  grid-template-columns: repeat(2, 1fr);
}
.sm-stat-v2 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
}
.sm-stat-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--orange);
  font-weight: 600;
  flex-shrink: 0;
}
.sm-stat-v2 > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sm-stat-v2 .sm-stat-lbl {
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  line-height: 1.2;
}
.sm-stat-v2 .sm-stat-val {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}

/* === Carte Lune === */
.sm-moon-card-v2 {
  text-align: center;
  align-items: stretch;
}
.sm-moon-visual-v2 {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}
.sm-moon-svg-v2 {
  width: 120px;
  height: 120px;
  filter: drop-shadow(0 4px 20px rgba(197,208,224,0.25));
}

.sm-moon-illum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--text-dim);
  padding: 0 4px;
}
.sm-illum-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.sm-illum-val {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.sm-illum-bar {
  height: 5px;
  background: rgba(0,0,0,0.3);
  border-radius: 3px;
  overflow: hidden;
}
.sm-illum-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(203,213,225,0.4), #e2e8f0);
  border-radius: 3px;
  transition: width 0.5s ease;
  box-shadow: 0 0 8px rgba(226,232,240,0.5);
}

.sm-moon-next {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  padding: 6px 8px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
}
.sm-moon-next strong {
  color: var(--text);
  font-weight: 600;
}

/* ============================================================
   ADDITIONS v28 - Nowcast Timeline refonte premium
   A coller a la fin de style.css
   ============================================================ */

/* Masque l'ancien banner */
.nowcast-banner { display: none !important; }

/* === NOUVEAU BANNER === */
#nowcast-banner.nowcast-banner-v2 {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--c-clear);
  box-shadow: var(--glass-inset);
  border-radius: var(--radius);
  margin-bottom: 14px;
  transition: border-color 0.3s;
}

#nowcast-banner.event-rain,
#nowcast-banner.event-drizzle { border-left-color: var(--c-rain); }
#nowcast-banner.event-snow { border-left-color: var(--c-snow); }
#nowcast-banner.event-storm { border-left-color: var(--c-storm); box-shadow: var(--glass-inset), 0 0 24px rgba(168,85,247,0.15); }
#nowcast-banner.event-hail { border-left-color: var(--c-hail); box-shadow: var(--glass-inset), 0 0 24px rgba(236,72,153,0.15); }
#nowcast-banner.event-wind { border-left-color: var(--c-wind); }
#nowcast-banner.event-fog { border-left-color: var(--c-fog); }
#nowcast-banner.event-clear { border-left-color: var(--c-clear); }

.nb-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
.nb-icon svg {
  width: 28px;
  height: 28px;
}

.nb-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.nb-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.nb-sub {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}

.nb-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.nb-cumul {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  gap: 2px;
}
.nb-cumul-val {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.nb-cumul-unit {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}
.nb-cumul-label {
  font-size: 9px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.nb-ring {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.nb-ring svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 6px currentColor);
}

@media (max-width: 520px) {
  #nowcast-banner.nowcast-banner-v2 {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 14px 16px;
  }
  .nb-stats {
    grid-column: 1 / -1;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--glass-border);
  }
}

/* === TIMELINE === */
/* Masque l'ancienne grid */
.nowcast-timeline {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  display: block !important;
}

.nc-timeline-v2 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset);
  border-radius: var(--radius);
  padding: 16px 12px 14px;
  align-items: end;
}

.nc-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 2px 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 140px;
  justify-content: flex-end;
}
.nc-slot:hover {
  background: rgba(255,255,255,0.04);
  transform: translateY(-2px);
}
.nc-slot.filtered {
  opacity: 0.3;
  filter: grayscale(0.6);
}

.nc-slot-icon {
  width: 22px;
  height: 22px;
  color: var(--slot-color);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  flex-shrink: 0;
  opacity: 0.85;
}
.nc-slot-icon svg {
  width: 100%;
  height: 100%;
}

.nc-slot-barwrap {
  flex: 1;
  width: 70%;
  max-width: 26px;
  display: flex;
  align-items: flex-end;
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
  overflow: hidden;
  min-height: 50px;
}
.nc-slot-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  transition: height 0.4s ease;
  min-height: 4px;
  box-shadow: 0 0 8px var(--slot-color);
}

.nc-slot-mm {
  font-size: 10px;
  font-weight: 600;
  color: var(--slot-color);
  line-height: 1;
  letter-spacing: -0.02em;
  min-height: 11px;
}
.nc-slot-time {
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  font-weight: 500;
  line-height: 1;
}

/* Slot MAINTENANT - mise en avant */
.nc-slot-now {
  background: linear-gradient(180deg, rgba(244,121,32,0.12), transparent 60%);
  border-radius: var(--radius-sm);
}
.nc-slot-now .nc-slot-time {
  color: var(--orange);
  font-weight: 700;
}
.nc-slot-now::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange);
  animation: nc-now-pulse 2s ease-in-out infinite;
}
@keyframes nc-now-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--orange); opacity: 1; }
  50% { box-shadow: 0 0 16px var(--orange); opacity: 0.7; }
}

.nc-now-indicator {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-transform: uppercase;
}

/* Tooltip au clic */
.nc-slot::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--navy-3);
  color: var(--text);
  border: 1px solid var(--glass-border);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 10;
}
.nc-slot.nc-tooltip-active::after,
.nc-slot:hover::after {
  opacity: 1;
}

/* Legende des evenements detectes */
.nc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.15);
  border-radius: var(--radius-sm);
}
.nc-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}
.nc-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}

/* Masque l'ancien .nc-step */
.nc-step { display: none !important; }

/* Responsive mobile - Timeline reste 8 colonnes mais plus serree */
@media (max-width: 480px) {
  .nc-timeline-v2 { padding: 14px 8px 12px; gap: 2px; }
  .nc-slot { padding: 4px 0; min-height: 120px; }
  .nc-slot-icon { width: 18px; height: 18px; }
  .nc-slot-barwrap { max-width: 18px; min-height: 40px; }
  .nc-slot-mm { font-size: 9px; }
  .nc-slot-time { font-size: 8px; }
  .nc-now-indicator { font-size: 7px; }
}

/* ============================================================
   ADDITIONS v29 - Day Detail modal refonte premium
   A coller a la fin de style.css
   ============================================================ */

/* Masque les anciens styles */
.modal-day-header,
.modal-narrative,
.modal-day-stats,
.modal-chart-wrap,
.hourly-grid,
.hourly-label,
.modal-hourly { display: none !important; }

/* Le container du modal garde le fond navy-2, on overrride le padding */
#modal-day-content {
  padding: 24px 22px !important;
}
@media (max-width: 480px) {
  #modal-day-content { padding: 20px 16px !important; }
}

/* === HEADER HERO === */
.dd-header {
  position: relative;
  padding: 4px 0 22px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
}
.dd-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--orange);
  background: rgba(244,121,32,0.15);
  border: 1px solid rgba(244,121,32,0.3);
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.dd-header-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  align-items: center;
}
@media (max-width: 420px) {
  .dd-header-grid { grid-template-columns: 84px 1fr; gap: 14px; }
}

.dd-icon-wrap {
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.4));
}
.dd-icon-wrap .weather-icon { width: 100%; height: 100%; }
@media (max-width: 420px) {
  .dd-icon-wrap { width: 84px; height: 84px; }
}

.dd-header-body { min-width: 0; }
.dd-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: capitalize;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  line-height: 1.1;
}
.dd-desc {
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 4px;
  font-weight: 500;
}
.dd-temps {
  margin-top: 10px;
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
}
.dd-temp-max { color: var(--orange); font-weight: 400; }
.dd-temp-sep { color: var(--text-faint); margin: 0 6px; font-size: 28px; }
.dd-temp-min { color: var(--text-dim); font-weight: 300; }
@media (max-width: 420px) {
  .dd-title { font-size: 20px; }
  .dd-temps { font-size: 30px; }
}

/* === SECTION LABELS === */
.dd-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.45);
  margin: 24px 0 12px;
}
.dd-section-label:first-child { margin-top: 0; }

/* === NARRATIVE === */
.dd-narrative {
  background: linear-gradient(135deg, rgba(244,121,32,0.08), rgba(244,121,32,0.02));
  border: 1px solid rgba(244,121,32,0.2);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 6px;
}
.dd-narrative-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--orange);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.dd-narrative-badge svg { flex-shrink: 0; }
.dd-narrative-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

/* === INSIGHTS (points cles) === */
.dd-insights-wrap { margin-top: 4px; }
.dd-insights {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dd-insight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  transition: transform 0.2s;
}
.dd-insight:hover { transform: translateX(4px); }
.dd-insight-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px currentColor, 0 0 12px currentColor;
}
.dd-insight-icon svg { width: 18px; height: 18px; }
.dd-insight-body { min-width: 0; }
.dd-insight-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.dd-insight-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.4;
}

/* === STATS === */
.dd-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 560px) { .dd-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 360px) { .dd-stats { grid-template-columns: 1fr; } }

.dd-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.dd-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--dd-stat-color, var(--orange));
  opacity: 0.7;
}
.dd-stat-wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .dd-stat-wide { grid-column: 1 / -1; } }

.dd-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dd-stat-color, var(--orange));
  flex-shrink: 0;
}
.dd-stat-icon svg { width: 18px; height: 18px; }

.dd-stat-body { min-width: 0; }
.dd-stat-label {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 2px;
}
.dd-stat-value {
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.dd-stat-unit {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 400;
}

/* === CHART === */
.dd-chart-wrap {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  height: 240px;
  margin-bottom: 8px;
}

/* === HOURLY === */
.dd-hourly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
@media (max-width: 480px) { .dd-hourly-grid { grid-template-columns: repeat(2, 1fr); } }

.dd-hourly-cell {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}
.dd-hourly-cell:hover {
  background: rgba(244,121,32,0.08);
  border-color: rgba(244,121,32,0.3);
  transform: translateY(-2px);
}
.dd-h-time {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.dd-h-icon { width: 36px; height: 36px; }
.dd-h-icon .weather-icon { width: 100%; height: 100%; }
.dd-h-temp {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
.dd-h-precip {
  font-size: 10px;
  color: var(--text-faint);
  min-height: 11px;
  font-weight: 500;
}
.dd-h-precip.has-rain { color: var(--c-rain); }

/* ============================================================
   ADDITIONS v30 - Vigilance banner + modal refonte premium
   A coller a la fin de style.css
   ============================================================ */

/* Masque l'ancien banner */
.vigilance-banner { display: none !important; }

/* === COULEURS NIVEAUX VIGILANCE === */
:root {
  --vg-yellow-c: #eab308;
  --vg-yellow-bg: rgba(234,179,8,0.14);
  --vg-yellow-border: rgba(234,179,8,0.45);
  --vg-orange-c: #f47920;
  --vg-orange-bg: rgba(244,121,32,0.16);
  --vg-orange-border: rgba(244,121,32,0.5);
  --vg-red-c: #ef4444;
  --vg-red-bg: rgba(239,68,68,0.18);
  --vg-red-border: rgba(239,68,68,0.55);
}

/* === BANNER V2 === */
#vigilance-banner.vigilance-banner-v2 {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--vg-yellow-c);
  box-shadow: var(--glass-inset);
  border-radius: var(--radius);
  margin-bottom: 14px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
#vigilance-banner.vigilance-banner-v2:hover {
  transform: translateY(-1px);
  box-shadow: var(--glass-inset), 0 4px 20px rgba(0,0,0,0.2);
}
#vigilance-banner.vg-yellow {
  border-left-color: var(--vg-yellow-c);
  background: linear-gradient(135deg, var(--vg-yellow-bg), transparent 70%), var(--glass-bg);
}
#vigilance-banner.vg-orange {
  border-left-color: var(--vg-orange-c);
  background: linear-gradient(135deg, var(--vg-orange-bg), transparent 70%), var(--glass-bg);
  box-shadow: var(--glass-inset), 0 0 24px rgba(244,121,32,0.15);
}
#vigilance-banner.vg-red {
  border-left-color: var(--vg-red-c);
  background: linear-gradient(135deg, var(--vg-red-bg), transparent 70%), var(--glass-bg);
  box-shadow: var(--glass-inset), 0 0 28px rgba(239,68,68,0.25);
  animation: vg-red-pulse 2.5s ease-in-out infinite;
}
@keyframes vg-red-pulse {
  0%, 100% { box-shadow: var(--glass-inset), 0 0 28px rgba(239,68,68,0.25); }
  50% { box-shadow: var(--glass-inset), 0 0 40px rgba(239,68,68,0.45); }
}
@media (prefers-reduced-motion: reduce) {
  #vigilance-banner.vg-red { animation: none; }
}

.vg-v2-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.vg-v2-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--vg-yellow-c);
  filter: drop-shadow(0 0 8px currentColor);
}
.vg-yellow .vg-v2-icon { color: var(--vg-yellow-c); }
.vg-orange .vg-v2-icon { color: var(--vg-orange-c); }
.vg-red .vg-v2-icon { color: var(--vg-red-c); }
.vg-v2-icon svg { width: 26px; height: 26px; }

.vg-v2-body { min-width: 0; }
.vg-v2-titlerow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}
.vg-v2-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  text-transform: capitalize;
}
.vg-v2-sub {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.3;
}

.vg-level-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border: 1px solid;
}
.vg-level-pill.vg-yellow { color: var(--vg-yellow-c); background: var(--vg-yellow-bg); border-color: var(--vg-yellow-border); }
.vg-level-pill.vg-orange { color: var(--vg-orange-c); background: var(--vg-orange-bg); border-color: var(--vg-orange-border); }
.vg-level-pill.vg-red { color: var(--vg-red-c); background: var(--vg-red-bg); border-color: var(--vg-red-border); }

.vg-v2-cta {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.vg-v2-cta:hover {
  background: rgba(255,255,255,0.12);
  transform: translateX(2px);
}

.vg-v2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--glass-border);
  margin-top: 4px;
  padding-top: 10px;
}
.vg-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
}
.vg-type-chip-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  opacity: 0.85;
}
.vg-type-chip-icon svg { width: 100%; height: 100%; }

/* === MODAL === */
#modal-vigilance-content {
  padding: 0 !important;
}

.vg-v2-modal-header {
  padding: 28px 22px 22px;
  text-align: center;
  border-bottom: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
}
.vg-v2-modal-header.vg-yellow { background: linear-gradient(180deg, var(--vg-yellow-bg), transparent); }
.vg-v2-modal-header.vg-orange { background: linear-gradient(180deg, var(--vg-orange-bg), transparent); }
.vg-v2-modal-header.vg-red { background: linear-gradient(180deg, var(--vg-red-bg), transparent); }

.vg-v2-modal-pill {
  margin-bottom: 12px;
}
.vg-v2-modal-pill .vg-level-pill {
  font-size: 12px;
  padding: 5px 14px;
}
.vg-v2-modal-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.vg-v2-modal-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 4px;
}

.vg-v2-alert-list {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 480px) { .vg-v2-alert-list { padding: 16px; } }

.vg-v2-alert {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--vg-yellow-c);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.vg-v2-alert.vg-yellow { border-left-color: var(--vg-yellow-c); }
.vg-v2-alert.vg-orange { border-left-color: var(--vg-orange-c); }
.vg-v2-alert.vg-red {
  border-left-color: var(--vg-red-c);
  box-shadow: 0 0 20px rgba(239,68,68,0.15), var(--glass-inset);
}

.vg-v2-alert-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.vg-v2-alert-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vg-v2-alert.vg-yellow .vg-v2-alert-icon { color: var(--vg-yellow-c); }
.vg-v2-alert.vg-orange .vg-v2-alert-icon { color: var(--vg-orange-c); }
.vg-v2-alert.vg-red .vg-v2-alert-icon { color: var(--vg-red-c); }
.vg-v2-alert-icon svg { width: 22px; height: 22px; filter: drop-shadow(0 0 6px currentColor); }

.vg-v2-alert-titlewrap { min-width: 0; }
.vg-v2-alert-type {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.vg-v2-alert-levelrow {
  margin-top: 4px;
}

.vg-v2-alert-headline {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.2);
  border-radius: var(--radius-sm);
}
.vg-v2-alert-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 12px;
}

/* Timeline visuelle */
.vg-v2-alert-timeline {
  margin: 14px 0 12px;
}
.vg-v2-tl-labels {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  margin-bottom: 8px;
}
.vg-v2-tl-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  min-width: 0;
}
.vg-v2-tl-label.right {
  justify-content: flex-end;
  text-align: right;
}
.vg-v2-tl-label > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.vg-v2-tl-label span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.vg-v2-tl-label strong {
  font-size: 11px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vg-v2-tl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.vg-v2-tl-dot.start { background: var(--text-faint); }
.vg-v2-tl-dot.end { background: var(--text-faint); }

.vg-v2-tl-bar {
  position: relative;
  height: 6px;
  background: rgba(0,0,0,0.3);
  border-radius: 3px;
  overflow: visible;
}
.vg-v2-tl-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.vg-v2-alert.vg-yellow .vg-v2-tl-fill { background: linear-gradient(90deg, var(--vg-yellow-c), transparent); }
.vg-v2-alert.vg-orange .vg-v2-tl-fill { background: linear-gradient(90deg, var(--vg-orange-c), transparent); }
.vg-v2-alert.vg-red .vg-v2-tl-fill { background: linear-gradient(90deg, var(--vg-red-c), transparent); }

.vg-v2-tl-now {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange);
  border: 2px solid var(--navy-2);
  box-shadow: 0 0 8px var(--orange);
  z-index: 2;
  animation: vg-tl-now-pulse 2s ease-in-out infinite;
}
@keyframes vg-tl-now-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--orange); }
  50% { box-shadow: 0 0 14px var(--orange); }
}
@media (prefers-reduced-motion: reduce) {
  .vg-v2-tl-now { animation: none; }
}

/* Conseils */
.vg-v2-advices {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  border-left: 3px solid currentColor;
}
.vg-v2-alert.vg-yellow .vg-v2-advices { color: var(--vg-yellow-c); }
.vg-v2-alert.vg-orange .vg-v2-advices { color: var(--vg-orange-c); }
.vg-v2-alert.vg-red .vg-v2-advices { color: var(--vg-red-c); }

.vg-v2-advices-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.vg-v2-advices-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vg-v2-advices-list li {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
  padding-left: 16px;
  position: relative;
}
.vg-v2-advices-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* Footer modal */
.vg-v2-modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 20px 18px;
  color: var(--text-faint);
  font-size: 11px;
  border-top: 1px solid var(--glass-border);
}
.vg-v2-modal-footer svg { opacity: 0.6; }

/* Masque les anciens styles s'ils trainent */
.vg-alert,
.vg-modal-header,
.vg-alert-timing { display: none !important; }

/* ============================================================
   FIX v30.1 - Dots SVG soleil decales dans day-detail horaire
   Meme probleme que Chrome Android sur la home, fix GPU
   ============================================================ */

.dd-h-icon,
.dd-h-icon .weather-icon,
.dd-h-icon svg {
  transform-box: fill-box;
  contain: paint;
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Sur les SVG enfants (rayons qui tournent), on force transform-origin */
.dd-h-icon svg > g,
.dd-h-icon svg > [class*="rays"],
.dd-h-icon svg > [class*="sun"] {
  transform-box: fill-box;
  transform-origin: center;
}

/* Memes fixes pour les cellules horaires du modal */
.dd-hourly-cell {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
}

/* ============================================================
   ADDITIONS v32 - Global Summary modal refonte premium
   A coller a la fin de style.css
   ============================================================ */

/* Masque les anciens styles */
.summary-header,
.summary-place,
.summary-country,
.summary-highlights,
.highlights-label,
.highlight-row,
.summary-weekly,
.weekly-label,
.weekly-sparkline,
.trend-text,
.summary-moments .moments-label,
.summary-moments .moments-grid,
.summary-moments .moment-cell { display: none !important; }

#modal-summary-content {
  padding: 24px 22px !important;
}
@media (max-width: 480px) {
  #modal-summary-content { padding: 20px 16px !important; }
}

/* === HEADER === */
.gs-header {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
}
.gs-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--orange);
  background: rgba(244,121,32,0.15);
  border: 1px solid rgba(244,121,32,0.3);
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}
.gs-place-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
}
.gs-pin {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(244,121,32,0.12);
  border: 1px solid rgba(244,121,32,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(244,121,32,0.3));
}
.gs-place-body { min-width: 0; }
.gs-place-name {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.gs-place-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* === SECTION LABELS === */
.gs-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.45);
  margin: 22px 0 10px;
}

/* === NARRATIVE 48H === */
.gs-narrative {
  background: linear-gradient(135deg, rgba(244,121,32,0.08), rgba(244,121,32,0.02));
  border: 1px solid rgba(244,121,32,0.2);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 4px;
}
.gs-narrative-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--orange);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.gs-narrative-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

/* === HIGHLIGHTS (points d'attention) === */
.gs-highlights {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gs-highlight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text);
}
.gs-highlight.gs-level-info { border-left-color: #7dd3fc; }
.gs-highlight.gs-level-warn { border-left-color: #f47920; }
.gs-highlight.gs-level-alert {
  border-left-color: #ef4444;
  background: linear-gradient(135deg, rgba(239,68,68,0.1), transparent), var(--glass-bg);
}
.gs-highlight-icon {
  font-size: 22px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gs-highlight-text { line-height: 1.4; min-width: 0; }

/* === MINI-CARTES 7 JOURS === */
.gs-week-cards {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
@media (max-width: 600px) {
  .gs-week-cards { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 380px) {
  .gs-week-cards { grid-template-columns: repeat(3, 1fr); }
}

.gs-day-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 10px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  transition: all 0.2s;
}
.gs-day-card:hover {
  background: rgba(244,121,32,0.06);
  border-color: rgba(244,121,32,0.25);
  transform: translateY(-2px);
}
.gs-day-card.gs-today {
  border-color: rgba(244,121,32,0.5);
  background: linear-gradient(180deg, rgba(244,121,32,0.12), transparent);
  box-shadow: 0 0 16px rgba(244,121,32,0.15);
}

.gs-day-name {
  font-size: 10px;
  color: var(--text-faint);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.gs-day-card.gs-today .gs-day-name { color: var(--orange); }

.gs-day-num {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}

.gs-day-icon {
  width: 36px;
  height: 36px;
  margin: 2px 0;
}
.gs-day-icon .weather-icon { width: 100%; height: 100%; }

.gs-day-temps {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 12px;
  font-weight: 500;
}
.gs-day-tmax { color: var(--orange); font-weight: 600; }
.gs-day-tmin { color: var(--text-faint); font-size: 11px; }

.gs-day-precip {
  font-size: 9px;
  font-weight: 600;
  margin-top: 2px;
}

/* === SPARKLINE === */
.gs-spark-wrap {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px 8px 4px;
  margin-bottom: 8px;
}
.gs-spark-svg {
  width: 100%;
  height: auto;
  display: block;
}

.gs-trend-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 4px;
}
.gs-trend-banner svg {
  color: var(--orange);
  flex-shrink: 0;
}

/* === INSIGHTS HEBDO === */
.gs-insights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 480px) {
  .gs-insights { grid-template-columns: 1fr; }
}

.gs-insight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  position: relative;
  overflow: hidden;
}
.gs-insight::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gs-i-color, var(--orange));
  opacity: 0.7;
}
.gs-insight-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gs-i-color, var(--orange));
  flex-shrink: 0;
  box-shadow: 0 0 0 1px currentColor, 0 0 10px currentColor;
}
.gs-insight-icon svg { width: 16px; height: 16px; }

.gs-insight-body { min-width: 0; }
.gs-insight-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.gs-insight-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.3;
}

/* === SUNMOON wrap === */
.gs-sunmoon-wrap {
  margin-top: 18px;
}

/* === MOMENTS DU JOUR === */
.gs-moments-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.gs-moment-cell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}
.gs-moment-icon { font-size: 22px; }
.gs-moment-label {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
}
.gs-moment-value {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  text-align: right;
}

/* ============================================================
   v71 : Boost visuel radar RainViewer
   ============================================================
   Mode unique après suppression OWM HD. RainViewer est déjà
   bien coloré mais saturation/contraste léger améliorent la
   lisibilité des pluies légères sur fond satellite Esri.
   ============================================================ */
#radar-map .rm-obs-layer {
  filter: saturate(1.3) contrast(1.1);
  mix-blend-mode: screen;
}
/* Léger assombrissement du fond pour que les couleurs ressortent plus */
#radar-map .rm-base-layer {
  filter: brightness(0.75) saturate(0.85);
  transition: filter 0.3s ease;
}

/* ========= SAFARI FALLBACK =========
   Safari ne supporte pas bien mix-blend-mode sur Leaflet tiles
   dans certaines versions. Pour ces navigateurs, on garde
   uniquement le filter saturé qui fonctionne. */
@supports not (mix-blend-mode: screen) {
  #radar-map .rm-obs-layer {
    mix-blend-mode: normal;
    filter: saturate(2.8) contrast(1.3) brightness(1.25);
  }
}

/* ============================================================
   ADDITIONS v34 - Roadtrip : recherche enrichie + routing info
   A coller a la fin de style.css
   ============================================================ */

/* === Hint sous la recherche === */
.rt-search-hint {
  font-size: 12px;
  color: var(--text-faint);
  margin: 8px 4px 12px;
  line-height: 1.4;
  font-style: italic;
}

/* === Loading et empty states === */
.rt-search-loading {
  text-align: center;
  padding: 20px;
  color: var(--text-dim);
  font-size: 13px;
}
.rt-search-loading::before {
  content: '◌';
  display: inline-block;
  margin-right: 8px;
  animation: rt-spin 1s linear infinite;
}
@keyframes rt-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* === RESULTATS RECHERCHE enrichis === */
.rt-search-results .rt-search-item {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.rt-search-results .rt-search-item:hover {
  background: rgba(244,121,32,0.08);
  border-color: rgba(244,121,32,0.3);
  transform: translateX(2px);
}

.rt-search-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(244,121,32,0.12);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rt-search-icon svg { width: 16px; height: 16px; }

.rt-search-body { min-width: 0; }
.rt-search-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rt-search-detail {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rt-search-type {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  background: rgba(255,255,255,0.06);
  padding: 3px 8px;
  border-radius: 20px;
  flex-shrink: 0;
}

/* === Affichage adresse complete dans la liste des etapes === */
.rt-stop-addr {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  line-height: 1.3;
  font-style: italic;
}

/* === ROADTRIP VIEW : bandeau routing info === */
.rtv-route-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 10px 0;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text);
  flex-wrap: wrap;
}
.rtv-route-info.warn {
  border-left-color: var(--vg-yellow-c);
  background: linear-gradient(135deg, var(--vg-yellow-bg), transparent 70%), var(--glass-bg);
}

.rtv-route-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
}
.rtv-route-label::before {
  content: '◌';
  animation: rt-spin 1.2s linear infinite;
  color: var(--orange);
  font-size: 14px;
}
.rtv-route-info:not(:has(.rtv-route-dist)) .rtv-route-label {
  /* state loading */
}

.rtv-route-dist {
  font-size: 16px;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: -0.01em;
}
.rtv-route-dur {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.rtv-route-sep {
  color: var(--text-faint);
  margin: 0 2px;
}
.rtv-route-engine {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}
.rtv-route-warn {
  color: var(--vg-yellow-c);
  font-size: 11px;
}

/* === Affichage adresse dans les etapes de la vue === */
.rtv-step-addr {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  font-style: italic;
  line-height: 1.3;
}

/* ============================================================
   ADDITIONS v35 - Fix GPU SVG meteo global
   Corrige les decalages des rayons de soleil, phases de lune,
   gouttes, flocons et autres elements animes sur TOUS les
   conteneurs de .weather-icon a travers l'app.
   A coller a la fin de style.css
   ============================================================ */

/* === Le conteneur canonique .weather-icon === */
/* Regle universelle : tout SVG meteo doit etre confine et GPU-accelere */
.weather-icon {
  display: block !important;
  transform-box: fill-box;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
  contain: paint;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Le SVG lui-meme doit garder ses overflow visibles pour les rayons */
.weather-icon svg {
  overflow: visible !important;
  transform-box: fill-box;
  transform-origin: center;
}

/* Tous les groupes enfants utilisent fill-box pour que les rotations
   restent sur leurs propres centres geometriques */
.weather-icon svg g,
.weather-icon svg [class*="wi-"] {
  transform-box: fill-box;
}

/* === Elements animes specifiques : forcer transform-origin correct === */
.wi-sun-rays,
.wi-moon,
.wi-cloud-drift,
.wi-drop,
.wi-flake,
.wi-bolt,
.wi-fog-line {
  transform-box: fill-box !important;
  transform-origin: center !important;
  will-change: auto !important;
}

/* === Conteneurs parents : GPU layer + clipping propre === */
/* On liste tous les endroits ou .weather-icon peut vivre dans l'app */

/* Hero card home */
.current-icon-wrap,
.current-left {
  isolation: isolate;
  contain: layout paint;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Liste 7 jours home */
.daily-icon {
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  overflow: visible;
}

/* Modal day detail - grande icone haut */
.dd-icon-wrap {
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  overflow: visible;
}

/* Modal day detail - cellules horaires */
.dd-h-icon,
.dd-hourly-cell {
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  overflow: visible;
}

/* Modal global summary - cartes 7 jours */
.gs-day-icon,
.gs-day-card {
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  overflow: visible;
}

/* Roadtrip view - icones meteo par etape */
.rtv-w-icon,
.rtv-step-weather {
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  overflow: visible;
}

/* Nowcast banner */
.nb-icon {
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  overflow: visible;
}

/* Modal day header ancien (au cas ou il traine) */
.modal-day-icon {
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  overflow: visible;
}

/* === Fix specifique rayons soleil : force transform-origin au centre SVG ===
   Quand les rayons sont un <g class="wi-sun-rays"> qui tourne, on s'assure
   que son centre de rotation est bien le centre de la boite. */
.wi-sun-rays {
  transform-origin: 50% 50% !important;
  transform-box: fill-box !important;
}

/* Si les rayons sont regroupes dans un g avec un id specifique, on couvre */
g.wi-sun-rays,
.weather-icon g.wi-sun-rays {
  transform-origin: 50% 50% !important;
  transform-box: fill-box !important;
}

/* === FIX : stat lever/coucher espacement visible ===
   Si le JS ne genere pas de separateur entre les deux heures,
   on force un padding visuel. Ne marche que si JS genere " · " ou similaire.
   Pour un fix propre, voir patch JS day-detail.js */

/* Stat wide (lever/coucher) : on ajoute un espace generoux entre valeurs */
.dd-stat-wide .dd-stat-value {
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Si le JS utilise un separateur visible comme "·" ou "—" on l'espace bien */
.dd-stat-wide .dd-stat-sep {
  display: inline-block;
  margin: 0 8px;
  color: var(--text-faint);
  font-weight: 300;
}

/* ============================================================
   ADDITIONS v36 - Roadtrip hazards (alertes meteo sur parcours)
   A coller a la fin de style.css
   ============================================================ */

.rtv-hazards {
  margin: 14px 0;
}

/* Loading */
.rtv-hz-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 12px;
}
.rtv-hz-loading svg {
  color: var(--orange);
  animation: rt-spin 1.5s linear infinite;
}

/* Empty state (aucune alerte = bonne nouvelle) */
.rtv-hz-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.25);
  border-left: 3px solid #4ade80;
  border-radius: var(--radius-sm);
  color: #a7f3d0;
  font-size: 12px;
  font-weight: 500;
}
.rtv-hz-empty svg {
  color: #4ade80;
  flex-shrink: 0;
}

/* Header */
.rtv-hz-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--orange);
  font-weight: 600;
  padding: 4px 4px 10px;
}
.rtv-hz-header svg {
  color: var(--orange);
  filter: drop-shadow(0 0 6px var(--orange));
}

/* Liste des alertes */
.rtv-hz-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Carte alerte */
.rtv-hz-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s;
}
.rtv-hz-card:hover { transform: translateX(3px); }

.rtv-hz-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}

/* Couleurs selon niveau */
.rtv-hz-yellow::before { background: #eab308; }
.rtv-hz-yellow .rtv-hz-icon { color: #eab308; background: rgba(234,179,8,0.15); }

.rtv-hz-orange::before { background: #f47920; }
.rtv-hz-orange .rtv-hz-icon { color: #f47920; background: rgba(244,121,32,0.15); }
.rtv-hz-orange {
  background: linear-gradient(135deg, rgba(244,121,32,0.08), transparent 70%), var(--glass-bg);
}

.rtv-hz-red::before { background: #ef4444; }
.rtv-hz-red .rtv-hz-icon { color: #ef4444; background: rgba(239,68,68,0.18); }
.rtv-hz-red {
  background: linear-gradient(135deg, rgba(239,68,68,0.1), transparent 70%), var(--glass-bg);
  box-shadow: 0 0 16px rgba(239,68,68,0.15);
}

.rtv-hz-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px currentColor);
}
.rtv-hz-icon svg { width: 22px; height: 22px; }

.rtv-hz-body { min-width: 0; }
.rtv-hz-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rtv-hz-count {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rtv-hz-desc {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 3px;
  line-height: 1.3;
}
.rtv-hz-loc {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 6px;
  letter-spacing: 0.02em;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
}
.rtv-hz-time {
  color: var(--orange);
  font-weight: 500;
}
.rtv-hz-sep { color: var(--text-faint); opacity: 0.6; }
.rtv-hz-dist { color: var(--text-dim); }

/* Markers hazards sur la carte */
.rtv-hz-marker { background: transparent !important; border: none !important; }
.rtv-hz-marker-inner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  animation: rtv-hz-pulse 2s ease-in-out infinite;
}
@keyframes rtv-hz-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .rtv-hz-marker-inner { animation: none; }
}

/* Note dans le global summary */
.rtv-sum-hz {
  margin-top: 6px;
  font-size: 11px;
  color: #fed7aa;
  font-weight: 500;
  padding: 4px 10px;
  background: rgba(244,121,32,0.12);
  border: 1px solid rgba(244,121,32,0.3);
  border-radius: 20px;
  display: inline-block;
}

/* Responsive */
@media (max-width: 480px) {
  .rtv-hz-card { padding: 10px 12px; gap: 10px; }
  .rtv-hz-icon { width: 36px; height: 36px; }
  .rtv-hz-icon svg { width: 20px; height: 20px; }
  .rtv-hz-title { font-size: 13px; }
  .rtv-hz-desc { font-size: 11px; }
}

/* ============================================================
   ADDITIONS v37 - Roadtrip : option C + itineraire alternatif
   - Masque le texte "52 km · 620 min" (vol d'oiseau trompeur)
   - Prompt itineraire bis + comparaison + swap
   A coller a la fin de style.css
   ============================================================ */

/* === Option C : on cache le texte du leg, on garde juste la ligne === */
.rtv-leg {
  display: flex !important;
  justify-content: center;
  padding: 4px 0 !important;
  grid-template-columns: unset !important;
}
.rtv-leg-info { display: none !important; }
.rtv-leg-line {
  width: 2px;
  height: 28px;
  background: var(--orange);
  opacity: 0.4;
  margin: 0 !important;
  border-radius: 1px;
}

/* === Container global itineraire alt === */
.rtv-alt {
  margin: 14px 0;
}
.rtv-alt:empty { display: none; }

/* === Bouton prompt (apparait si hazards detectes) === */
.rtv-alt-prompt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(244,121,32,0.1), rgba(244,121,32,0.03));
  border: 1px solid rgba(244,121,32,0.3);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
  text-align: left;
  font-family: inherit;
  transition: all 0.2s;
}
.rtv-alt-prompt:hover {
  background: linear-gradient(135deg, rgba(244,121,32,0.18), rgba(244,121,32,0.05));
  transform: translateX(3px);
  box-shadow: 0 4px 20px rgba(244,121,32,0.15);
}

.rtv-alt-prompt-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(244,121,32,0.18);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px var(--orange));
}

.rtv-alt-prompt-body { min-width: 0; }
.rtv-alt-prompt-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 2px;
}
.rtv-alt-prompt-sub {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.3;
}
.rtv-alt-prompt-chev {
  font-size: 22px;
  color: var(--orange);
  font-weight: 400;
  flex-shrink: 0;
}

/* === Loading & empty states === */
.rtv-alt-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 12px;
}
.rtv-alt-loading svg {
  color: var(--orange);
  animation: rt-spin 1.5s linear infinite;
}

.rtv-alt-nores {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--text-faint);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 12px;
}
.rtv-alt-nores svg { color: var(--text-faint); flex-shrink: 0; }

/* === Box de comparaison === */
.rtv-alt-box {
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset);
  border-radius: var(--radius);
  padding: 16px;
}

.rtv-alt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--orange);
  margin-bottom: 12px;
}

/* === Verdict === */
.rtv-alt-verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.3;
}
.rtv-alt-verdict.good {
  background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(34,197,94,0.05));
  border: 1px solid rgba(34,197,94,0.35);
  color: #86efac;
}
.rtv-alt-verdict.neutral {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
}
.rtv-alt-verdict.bad {
  background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.03));
  border: 1px solid rgba(239,68,68,0.35);
  color: #fca5a5;
}
.rtv-alt-verdict svg { flex-shrink: 0; }

/* === Table compare === */
.rtv-alt-table {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(0,0,0,0.2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
}
.rtv-alt-row {
  display: grid;
  grid-template-columns: 90px 1fr 1fr;
  gap: 8px;
  padding: 10px 12px;
  background: var(--glass-bg);
  align-items: baseline;
  font-size: 12px;
}
.rtv-alt-row-bis { border-left: 2px solid var(--orange); }
.rtv-alt-row-diff {
  background: rgba(244,121,32,0.08);
  font-weight: 500;
}
.rtv-alt-key {
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.rtv-alt-val {
  color: var(--text);
  font-weight: 500;
}
.rtv-alt-hz {
  color: var(--text-dim);
  text-align: right;
  font-size: 11px;
}
.rtv-alt-row-bis .rtv-alt-key { color: var(--orange); }
.rtv-alt-row-diff .rtv-alt-val,
.rtv-alt-row-diff .rtv-alt-hz { color: var(--orange); }

@media (max-width: 480px) {
  .rtv-alt-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .rtv-alt-hz { text-align: left; }
}

/* === Actions === */
.rtv-alt-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.rtv-alt-btn {
  padding: 10px 18px;
  background: var(--orange);
  color: var(--navy);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  flex: 1;
  max-width: 260px;
}
.rtv-alt-btn:hover {
  background: var(--orange-soft);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244,121,32,0.3);
}

/* === Badge BIS dans le bandeau routing quand alt actif === */
.rtv-route-altbadge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--orange);
  color: var(--navy);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-right: 6px;
}
.rtv-route-info.alt-active {
  border-left-color: var(--orange);
  background: linear-gradient(135deg, rgba(244,121,32,0.1), transparent 70%), var(--glass-bg);
}

/* ============================================================
   ADDITIONS v39 - Roadtrip export (partage vers applis navigation)
   - Bouton partager dans le header
   - Modal d'export avec options (Gmaps, Apple, Waze, GPX, copier)
   A coller a la fin de style.css
   ============================================================ */

/* === Header : regroupe les boutons actions === */
.rtv-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.rtv-share-btn {
  width: 38px;
  height: 38px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.rtv-share-btn:hover {
  background: rgba(244,121,32,0.12);
  border-color: rgba(244,121,32,0.5);
  color: var(--orange);
  transform: translateY(-1px);
}
.rtv-share-btn:active { transform: translateY(0); }

/* === Modal overlay === */
.rte-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modal-fade 0.2s ease;
}
@media (max-width: 640px) {
  .rte-modal-overlay { padding: 0; align-items: flex-end; }
}

.rte-modal-content {
  background: var(--navy-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  position: relative;
  animation: modal-up 0.3s cubic-bezier(0.16,1,0.3,1);
  padding: 24px 22px;
}
@media (max-width: 640px) {
  .rte-modal-content {
    max-width: 100%;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 88vh;
    padding: 20px 18px 28px;
  }
}

.rte-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  z-index: 2;
}
.rte-close:hover { background: var(--orange); color: var(--navy); border-color: var(--orange); }

.rte-header {
  margin-bottom: 20px;
  padding-right: 40px;
}
.rte-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rte-sub {
  font-size: 12px;
  color: var(--text-dim);
}
.rte-badge-alt {
  display: inline-block;
  padding: 2px 8px;
  background: var(--orange);
  color: var(--navy);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* === Liste des options === */
.rte-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.rte-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
  text-align: left;
  font-family: inherit;
  transition: all 0.15s;
}
.rte-option:hover:not(:disabled) {
  background: rgba(244,121,32,0.08);
  border-color: rgba(244,121,32,0.35);
  transform: translateX(3px);
}
.rte-option:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.rte-option:disabled:hover { transform: none; }

.rte-option-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Couleurs specifiques par service */
.rte-icon-gmaps { background: rgba(66,133,244,0.15); color: #4285f4; }
.rte-icon-amaps { background: rgba(99,102,241,0.15); color: #818cf8; }
.rte-icon-waze { background: rgba(14,165,233,0.15); color: #38bdf8; }
.rte-icon-gpx { background: rgba(244,121,32,0.15); color: var(--orange); }
.rte-icon-copy { background: rgba(156,163,175,0.15); color: #9ca3af; }

.rte-option-body {
  min-width: 0;
}
.rte-option-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 2px;
}
.rte-option-sub {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.3;
}
.rte-option-chev {
  font-size: 22px;
  color: var(--text-faint);
  font-weight: 300;
  flex-shrink: 0;
}

.rte-footnote {
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
  letter-spacing: 0.02em;
  font-style: italic;
}

/* Ajustements mobile */
@media (max-width: 480px) {
  .rte-option { padding: 12px 14px; gap: 12px; }
  .rte-option-icon { width: 38px; height: 38px; }
  .rte-option-icon svg { width: 20px; height: 20px; }
  .rte-option-title { font-size: 13px; }
  .rte-option-sub { font-size: 10px; }
}

/* Toast en haut du modal plutot que bas */
.rte-modal-overlay ~ .toast,
body:has(.rte-modal-overlay) .toast {
  z-index: 10001;
}

/* ============================================================
   ADDITIONS v40 - Menu contextuel export (Samsung/Apple style)
   Remplace le panel .rtv-export de v39 par un menu qui s'ouvre
   depuis le bouton share du header
   A coller a la fin de style.css
   ============================================================ */

/* Masque l'ancien panel horizontal v39 (on utilise maintenant un menu) */
.rtv-export { display: none !important; }

/* === Header amenage : back + title + actions (share + edit) === */
.rtv-header-v7 {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.rtv-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.rtv-share-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  padding: 0;
}
.rtv-share-btn:hover {
  background: rgba(244,121,32,0.15);
  border-color: var(--orange);
  color: var(--orange);
  transform: translateY(-1px);
}
.rtv-share-btn:active {
  transform: translateY(0);
}

/* === Menu contextuel export === */
.rtv-export-menu {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), var(--glass-inset);
  border-radius: var(--radius);
  padding: 10px;
  margin: 10px 0 14px;
  animation: rtv-export-fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 50;
}

.rtv-export-menu.hidden { display: none; }

@keyframes rtv-export-fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.rtv-export-menu-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--orange);
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 4px;
}
.rtv-export-menu-header svg { color: var(--orange); opacity: 0.9; }

.rtv-export-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.15s;
}
.rtv-export-item:hover {
  background: rgba(244,121,32,0.1);
  transform: translateX(2px);
}
.rtv-export-item:active {
  background: rgba(244,121,32,0.18);
}

.rtv-export-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(244,121,32,0.12);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(244,121,32,0.3));
}

.rtv-export-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rtv-export-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.rtv-export-item-sub {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.3;
}

.rtv-export-item-chev {
  color: var(--text-faint);
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.15s, opacity 0.15s;
}
.rtv-export-item:hover .rtv-export-item-chev {
  color: var(--orange);
  opacity: 1;
  transform: translateX(3px);
}

/* Responsive : sur mobile, items un peu plus compacts */
@media (max-width: 480px) {
  .rtv-export-item { padding: 10px 8px; gap: 10px; }
  .rtv-export-item-icon { width: 34px; height: 34px; }
  .rtv-export-item-title { font-size: 13px; }
  .rtv-export-item-sub { font-size: 10px; }
}

/* ============================================================
   ADDITIONS v41 - Scene SVG dynamique hero
   Style Samsung Weather : arriere-plan immersif derriere
   la temperature XXL, adaptatif selon taille ecran
   A coller a la fin de style.css
   ============================================================ */

/* === Container de la scene === */
.hero-scene {
  position: relative;
  width: calc(100% + 36px);
  margin: 0 -18px 12px;
  height: 260px;
  overflow: hidden;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--navy);
  box-shadow: inset 0 -20px 40px rgba(11,22,40,0.4);
  isolation: isolate;
}

@media (max-width: 480px) {
  .hero-scene {
    height: 220px;
    margin: 0 -18px 10px;
  }
}

.hero-scene .ws-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* === Fade en bas pour transition douce vers les tuiles === */
.hero-scene::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, var(--navy) 100%);
  pointer-events: none;
  z-index: 2;
}

/* === ASTRES : animations === */
.ws-sun circle:first-child,
.ws-sun circle:nth-child(2) {
  animation: ws-sun-pulse 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes ws-sun-pulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.15); }
}

.ws-moon {
  filter: drop-shadow(0 0 8px rgba(226,232,240,0.5));
}

/* === ETOILES : scintillement === */
.ws-star {
  filter: drop-shadow(0 0 2px #fff);
}
.ws-star-0 { animation: ws-twinkle-1 3s ease-in-out infinite; }
.ws-star-1 { animation: ws-twinkle-2 4s ease-in-out infinite; }
.ws-star-2 { animation: ws-twinkle-3 5s ease-in-out infinite; }
@keyframes ws-twinkle-1 {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@keyframes ws-twinkle-2 {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@keyframes ws-twinkle-3 {
  0%, 100% { opacity: 0.3; }
  30%      { opacity: 0.9; }
  70%      { opacity: 0.5; }
}

/* === NUAGES : derive horizontale lente === */
.ws-cloud-1 { animation: ws-cloud-drift 45s linear infinite; }
.ws-cloud-2 { animation: ws-cloud-drift 60s linear infinite; animation-delay: -20s; }
.ws-cloud-3 { animation: ws-cloud-drift 55s linear infinite; animation-delay: -10s; }
.ws-cloud-4 { animation: ws-cloud-drift 70s linear infinite; animation-delay: -30s; }
@keyframes ws-cloud-drift {
  from { transform: translateX(-700px); }
  to   { transform: translateX(0); }
}

/* === ECLAIRS ORAGE : flash aleatoire === */
.ws-bolt-1 { animation: ws-bolt-flash 8s ease-in-out infinite; }
.ws-bolt-2 { animation: ws-bolt-flash 8s ease-in-out infinite; animation-delay: 3s; }
@keyframes ws-bolt-flash {
  0%, 94%, 98%, 100% { opacity: 0; }
  95%                 { opacity: 1; filter: drop-shadow(0 0 12px #fef3c7); }
  96%                 { opacity: 0.3; }
  97%                 { opacity: 0.9; }
}

/* Flash general de l'ambiance orage sur toute la scene */
.ws-state-storm .ws-svg {
  animation: ws-storm-ambient 8s ease-in-out infinite;
}
@keyframes ws-storm-ambient {
  0%, 94%, 98%, 100% { filter: brightness(1); }
  95%, 97%           { filter: brightness(1.3) saturate(0.8); }
}

/* === BROUILLARD : bandes qui oscillent === */
.ws-fog-1 { animation: ws-fog-float-1 10s ease-in-out infinite; }
.ws-fog-2 { animation: ws-fog-float-2 14s ease-in-out infinite; animation-delay: -3s; }
.ws-fog-3 { animation: ws-fog-float-3 12s ease-in-out infinite; animation-delay: -6s; }
@keyframes ws-fog-float-1 {
  0%, 100% { transform: translateX(0); opacity: 0.4; }
  50%      { transform: translateX(20px); opacity: 0.6; }
}
@keyframes ws-fog-float-2 {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50%      { transform: translateX(-25px); opacity: 0.3; }
}
@keyframes ws-fog-float-3 {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50%      { transform: translateX(15px); opacity: 0.45; }
}

/* === PERSONNAGE : apparition douce === */
.ws-character {
  animation: ws-char-appear 0.8s ease-out;
  transform-origin: bottom center;
  transform-box: fill-box;
}
@keyframes ws-char-appear {
  from { opacity: 0; transform: translate(560px, 215px) translateY(8px); }
  to   { opacity: 1; transform: translate(560px, 215px) translateY(0); }
}

/* Parapluie : leger balancement */
.ws-umbrella {
  animation: ws-umbrella-sway 4s ease-in-out infinite;
  transform-origin: bottom center;
  transform-box: fill-box;
}
@keyframes ws-umbrella-sway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}

/* === Masque le personnage sur ecrans tres etroits === */
@media (max-width: 400px) {
  .ws-character { display: none; }
  .hero-scene { height: 180px; }
}

/* === Reduce motion : on coupe les animations === */
@media (prefers-reduced-motion: reduce) {
  .ws-sun circle,
  .ws-star,
  .ws-cloud-1, .ws-cloud-2, .ws-cloud-3, .ws-cloud-4,
  .ws-bolt-1, .ws-bolt-2,
  .ws-state-storm .ws-svg,
  .ws-fog-1, .ws-fog-2, .ws-fog-3,
  .ws-character, .ws-umbrella {
    animation: none !important;
  }
}

/* === Transition douce entre etats === */
.hero-scene .ws-svg {
  transition: opacity 0.4s ease;
}

/* === Adaptation du .current-card-hero pour bien s'integrer === */
/* La hero-card vient juste apres la scene, on reduit son padding top */
.hero-scene + .current-card-hero {
  padding-top: 18px !important;
  margin-top: 0 !important;
}

/* Renforce le contraste du texte hero sur les fonds clairs (snow, clear-day) */
.current-temp, .current-desc {
  text-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
}

/* ============================================================
   ADDITIONS v44 - WeatherSceneVideo FIX cadrage
   Remplace les additions v43 (on corrige le cadrage trop tronque)
   A coller a la fin de style.css, bumper ?v=44
   ============================================================ */

.wsv-container {
  position: relative;
  width: calc(100% + 36px);
  margin: -16px -18px 14px;
  /* Ratio plus haut pour laisser de la place au ciel */
  aspect-ratio: 9 / 14;
  max-height: 480px;
  min-height: 300px;
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
  border-radius: 0 0 var(--radius) var(--radius);
}

@media (max-width: 480px) {
  .wsv-container {
    aspect-ratio: 9 / 15;
    max-height: 400px;
    min-height: 280px;
  }
}

.wsv-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* CENTER center : on garde le centre de la video (ciel + paysage equilibres) */
  object-position: center center;
  transition: opacity 1.5s ease-in-out;
  pointer-events: none;
  display: block;
  will-change: opacity;

  /* Zoom REDUIT a 1.08 (8% au lieu de 18%)
     Juste de quoi couper les coins tout en haut ou les parasites Kling
     apparaissent, mais sans tronquer le paysage */
  transform: scale(1.08);
  transform-origin: center center;
}

.wsv-layer-a { opacity: 1; z-index: 1; }
.wsv-layer-b { opacity: 0; z-index: 2; }

.wsv-gradient-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(11, 22, 40, 0.4) 0%,
      rgba(11, 22, 40, 0.15) 12%,
      transparent 25%,
      transparent 65%,
      rgba(11, 22, 40, 0.35) 82%,
      var(--navy) 100%
    );
}

.wsv-container + .current-card-hero,
.wsv-container + #current-card {
  margin-top: -30px !important;
  position: relative;
  z-index: 4;
}

.current-temp,
.current-desc,
.current-feels,
.current-minmax {
  text-shadow:
    0 2px 20px rgba(0, 0, 0, 0.7),
    0 1px 4px rgba(0, 0, 0, 0.5);
}

#location-name {
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.6),
    0 1px 3px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .wsv-layer {
    transition: none;
    transform: scale(1.08);
    animation: none;
  }
}

@keyframes wsv-subtle-brighten {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.05); }
}
.wsv-layer {
  animation: wsv-subtle-brighten 30s ease-in-out infinite;
}

/* ============================================================
   ADDITIONS v45 - WeatherSceneVideo v2 (style Samsung Weather)
   ============================================================
   - Video de fond PLEIN ECRAN fixe (position: fixed)
   - Tuiles glass-morphism progressif au scroll
   - --wsv-scroll : variable CSS 0 (top) a 1 (scrolle) qui pilote
     opacity des tuiles, intensite du blur de fond, teinte dark
   - Affecte toutes les sections existantes quand body.wsv-active
   A coller a la fin de style.css et bumper ?v=45
   ============================================================ */

/* Remet a zero les additions precedentes (v42, v43, v44) */
.wsv-container { display: none !important; }
.hero-scene { display: none !important; }

/* Variable de scroll (0 a 1) alimentee par le JS */
:root {
  --wsv-scroll: 0;
}

/* ============================================================
   1. LA VIDEO DE FOND PLEIN ECRAN FIXE
   ============================================================ */
.wsv-bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh; height: 100dvh;
  object-fit: cover;
  object-position: center center;
  z-index: -2;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  pointer-events: none;
  /* Empeche les interactions */
  user-select: none;
  -webkit-user-select: none;
}

/* La video devient visible une fois chargee */
.wsv-bg-video.wsv-visible {
  opacity: 1;
}

/* Transition de fade entre ambiances */
.wsv-bg-video.wsv-fading {
  opacity: 0;
}

/* ============================================================
   2. OVERLAY qui assombrit progressivement au scroll
   ============================================================ */
.wsv-bg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh; height: 100dvh;
  z-index: -1;
  pointer-events: none;
  /* Passe de 0% (haut, video claire) a 65% (bas, toile de fond sombre) */
  background: linear-gradient(
    180deg,
    rgba(11, 22, 40, calc(var(--wsv-scroll) * 0.25)) 0%,
    rgba(11, 22, 40, calc(var(--wsv-scroll) * 0.45)) 50%,
    rgba(11, 22, 40, calc(var(--wsv-scroll) * 0.65)) 100%
  );
  /* Le blur de la video augmente avec le scroll */
  backdrop-filter: blur(calc(var(--wsv-scroll) * 12px));
  -webkit-backdrop-filter: blur(calc(var(--wsv-scroll) * 12px));
  transition: background 0.1s linear;
}

/* ============================================================
   3. BODY adapte quand la scene est active
   ============================================================ */
body.wsv-active {
  /* Le body devient transparent pour voir la video */
  background: transparent !important;
}

body.wsv-active .app-main {
  /* Assez d'espace en haut pour voir la scene */
  padding-top: 30vh;
  min-height: 100vh; min-height: 100dvh;
}

/* Header au-dessus de la video avec leger blur */
body.wsv-active .app-header {
  background: rgba(11, 22, 40, calc(var(--wsv-scroll) * 0.7));
  backdrop-filter: blur(calc(var(--wsv-scroll) * 10px));
  -webkit-backdrop-filter: blur(calc(var(--wsv-scroll) * 10px));
  transition: background 0.2s;
}

/* ============================================================
   4. TUILES GLASS-MORPHISM progressif
   ============================================================ */

/* Opacity des tuiles :
   - au top (--wsv-scroll = 0) : 0.25 (tres transparent, video visible)
   - au scroll (--wsv-scroll = 1) : 0.85 (quasi opaque, focus donnees) */
body.wsv-active .tile,
body.wsv-active .section,
body.wsv-active .storm-section,
body.wsv-active .hail-section,
body.wsv-active .aq-section,
body.wsv-active .transport-section,
body.wsv-active .nowcast-section,
body.wsv-active .current-card,
body.wsv-active .current-card-hero,
body.wsv-active .tiles-grid > *,
body.wsv-active .daily-list,
body.wsv-active .models-list,
body.wsv-active .radar-map,
body.wsv-active #home-sunmoon,
body.wsv-active #transport-block,
body.wsv-active #aq-gauge,
body.wsv-active #aq-pollutants,
body.wsv-active #aq-pollen,
body.wsv-active #storm-gauge,
body.wsv-active #storm-metrics,
body.wsv-active #hail-gauge,
body.wsv-active #hail-metrics,
body.wsv-active #nowcast-banner,
body.wsv-active #daily-list {
  background: rgba(20, 35, 60, calc(0.25 + var(--wsv-scroll) * 0.6)) !important;
  backdrop-filter: blur(calc(6px + var(--wsv-scroll) * 14px));
  -webkit-backdrop-filter: blur(calc(6px + var(--wsv-scroll) * 14px));
  border: 1px solid rgba(255, 255, 255, calc(0.08 + var(--wsv-scroll) * 0.04));
  transition: background 0.15s linear, backdrop-filter 0.15s linear;
}

/* Location bar et current card : plus transparentes encore au top */
body.wsv-active .location-bar,
body.wsv-active .current-card-hero {
  background: rgba(20, 35, 60, calc(0.15 + var(--wsv-scroll) * 0.55)) !important;
  backdrop-filter: blur(calc(4px + var(--wsv-scroll) * 12px));
  -webkit-backdrop-filter: blur(calc(4px + var(--wsv-scroll) * 12px));
}

/* ============================================================
   5. TEXTES : text-shadow fort pour rester lisible sur tout
   ============================================================ */
body.wsv-active .current-temp,
body.wsv-active .current-desc,
body.wsv-active .current-feels,
body.wsv-active .current-minmax,
body.wsv-active .current-context,
body.wsv-active #location-name,
body.wsv-active .location-name,
body.wsv-active .location-meta {
  text-shadow:
    0 2px 16px rgba(0, 0, 0, 0.7),
    0 1px 4px rgba(0, 0, 0, 0.5),
    0 0 2px rgba(0, 0, 0, 0.4);
}

/* Le logo app reste lisible */
body.wsv-active .logo {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Section titles reste lisibles */
body.wsv-active .section-title {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   6. FOOTER MAJ et divers
   ============================================================ */
body.wsv-active .app-footer-maj {
  background: rgba(11, 22, 40, calc(0.5 + var(--wsv-scroll) * 0.4));
  backdrop-filter: blur(calc(4px + var(--wsv-scroll) * 8px));
}

/* ============================================================
   7. PANELS (filter, search)
   ============================================================ */
body.wsv-active .filters-panel,
body.wsv-active .search-panel {
  background: rgba(20, 35, 60, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ============================================================
   8. MODALES (day-detail, summary, vigilance, roadtrip)
   ============================================================ */
body.wsv-active .modal-overlay:not(.hidden) {
  background: rgba(11, 22, 40, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ============================================================
   9. REDUCE MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .wsv-bg-video {
    transition: opacity 0.2s;
  }
  body.wsv-active .tile,
  body.wsv-active .section,
  body.wsv-active .current-card {
    transition: none;
  }
}

/* ============================================================
   10. MODE ETROIT (Z-Fold ferme) : reduction padding-top
   ============================================================ */
@media (max-width: 400px) {
  body.wsv-active .app-main {
    padding-top: 25vh;
  }
}

/* ============================================================
   11. IOS fix : backdrop-filter doit etre support, sinon fallback
   ============================================================ */
@supports not (backdrop-filter: blur(1px)) {
  body.wsv-active .tile,
  body.wsv-active .section,
  body.wsv-active .current-card {
    background: rgba(20, 35, 60, 0.85) !important;
  }
}

/* ============================================================
   ADDITIONS v46 - Fix header fixed + hero nettoye
   A coller APRES les additions v45, et bumper ?v=46
   ============================================================ */

/* ============================================================
   1. HEADER FIXE avec fond sombre (visible meme au scroll)
   ============================================================ */
body.wsv-active .app-header {
  /* Position fixe en haut de l'ecran, TOUJOURS visible */
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* Fond sombre constant (ne depend plus du scroll) */
  background: rgba(11, 22, 40, 0.75) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  transition: none;
}

/* Le logo reste bien visible */
body.wsv-active .logo {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Les icônes boutons : bordure et fond plus visibles */
body.wsv-active .icon-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: all 0.15s;
}
body.wsv-active .icon-btn:hover {
  background: rgba(244, 121, 32, 0.2);
  border-color: rgba(244, 121, 32, 0.5);
  color: #f47920;
}
body.wsv-active .icon-btn svg {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

/* Padding-top de .app-main pour compenser le header fixe */
body.wsv-active .app-main {
  padding-top: 80px !important;
}

@media (max-width: 480px) {
  body.wsv-active .app-main {
    padding-top: 72px !important;
  }
}

@media (max-width: 400px) {
  body.wsv-active .app-main {
    padding-top: 68px !important;
  }
}

/* ============================================================
   2. NETTOYAGE : masquer le container hero-scene fantome
   ============================================================ */
#hero-scene,
.hero-scene,
.wsv-container {
  display: none !important;
}

/* ============================================================
   3. LOCATION-BAR : plus discrete et transparente
   ============================================================ */
body.wsv-active .location-bar {
  background: rgba(20, 35, 60, calc(0.05 + var(--wsv-scroll) * 0.65)) !important;
  backdrop-filter: blur(calc(2px + var(--wsv-scroll) * 14px));
  -webkit-backdrop-filter: blur(calc(2px + var(--wsv-scroll) * 14px));
  border: 1px solid rgba(255, 255, 255, calc(0.03 + var(--wsv-scroll) * 0.08));
  padding: 16px 18px;
  border-radius: var(--radius);
}

/* ============================================================
   4. CURRENT-CARD : quasi invisible au top, subtile
   ============================================================ */
body.wsv-active .current-card-hero,
body.wsv-active #current-card {
  background: rgba(20, 35, 60, calc(0.05 + var(--wsv-scroll) * 0.7)) !important;
  backdrop-filter: blur(calc(2px + var(--wsv-scroll) * 16px));
  -webkit-backdrop-filter: blur(calc(2px + var(--wsv-scroll) * 16px));
  border: 1px solid rgba(255, 255, 255, calc(0.04 + var(--wsv-scroll) * 0.08));
}

/* ============================================================
   5. VIGILANCE banner : gardee visible (rouge important)
   ============================================================ */
body.wsv-active .vigilance-banner:not(.hidden) {
  background: rgba(220, 38, 38, 0.9) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ============================================================
   6. ARRONDIS des tuiles et sections
   ============================================================ */
body.wsv-active .tile,
body.wsv-active .tiles-grid > * {
  border-radius: 18px !important;
}

body.wsv-active .section,
body.wsv-active .storm-section,
body.wsv-active .hail-section,
body.wsv-active .aq-section,
body.wsv-active .transport-section,
body.wsv-active .nowcast-section,
body.wsv-active .current-card,
body.wsv-active .current-card-hero,
body.wsv-active #current-card,
body.wsv-active .location-bar,
body.wsv-active #nowcast-banner,
body.wsv-active .daily-list {
  border-radius: 20px !important;
}

/* Conteneurs de cartes / gauges internes */
body.wsv-active #transport-block,
body.wsv-active #aq-gauge,
body.wsv-active #aq-pollutants,
body.wsv-active #aq-pollen,
body.wsv-active #storm-gauge,
body.wsv-active #storm-metrics,
body.wsv-active #hail-gauge,
body.wsv-active #hail-metrics,
body.wsv-active #home-sunmoon,
body.wsv-active .radar-map {
  border-radius: 16px !important;
  overflow: hidden;
}

/* Options panel, search panel */
body.wsv-active .filters-panel,
body.wsv-active .search-panel {
  border-radius: 20px !important;
}

/* Modales */
body.wsv-active .modal-content {
  border-radius: 24px !important;
}

/* Chips (models-list, indice activite) */
body.wsv-active .model-chip {
  border-radius: 999px !important;
}

/* Toast */
body.wsv-active .toast {
  border-radius: 16px !important;
}


/* ============================================================
   ADDITIONS v48 - CitiesFavorites (favoris dans search-panel)
   A coller APRES les additions v46/v47, et bumper ?v=48
   ============================================================
   - Module CitiesFavorites injecte un conteneur #cities-favorites
     dans #search-panel, juste apres l'input de recherche
   - Mode VUE     : pastilles horizontales scrollables
   - Mode EDITION : liste verticale, drag & drop, etoile, trash
   - NOUVEAU v48.1 : etoile favori dans la location-bar
     (a droite du nom de ville)
   ============================================================ */

#cities-favorites.cities-favorites {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Header (titre + bouton edition) */
.cities-favorites .cf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}
.cities-favorites .cf-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}
.cities-favorites .cf-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  transition: all 0.15s;
}
.cities-favorites .cf-icon-btn:hover {
  color: var(--orange);
  border-color: rgba(244, 121, 32, 0.4);
  background: rgba(244, 121, 32, 0.08);
}
.cities-favorites .cf-done-btn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange);
  background: rgba(244, 121, 32, 0.12);
  border: 1px solid rgba(244, 121, 32, 0.4);
  padding: 5px 14px;
  border-radius: 999px;
  transition: all 0.15s;
}
.cities-favorites .cf-done-btn:hover {
  background: rgba(244, 121, 32, 0.2);
}

/* MODE VUE - pastilles horizontales */
.cities-favorites .cf-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 2px 0 6px;
  margin: 0 -2px;
  -webkit-overflow-scrolling: touch;
}
.cities-favorites .cf-pills::-webkit-scrollbar { height: 4px; }

.cities-favorites .cf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
  cursor: pointer;
}
.cities-favorites .cf-pill:hover {
  background: rgba(244, 121, 32, 0.14);
  border-color: rgba(244, 121, 32, 0.45);
  transform: translateY(-1px);
}
.cities-favorites .cf-pill.is-primary {
  background: rgba(244, 121, 32, 0.18);
  border-color: rgba(244, 121, 32, 0.55);
  color: var(--text);
}
.cities-favorites .cf-pill.is-primary .cf-pill-star {
  color: var(--orange);
  display: inline-flex;
  align-items: center;
}
.cities-favorites .cf-pill-name {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cities-favorites .cf-pill-add {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  color: var(--text-dim);
  padding: 8px 12px;
}
.cities-favorites .cf-pill-add:hover {
  color: var(--orange);
  border-color: rgba(244, 121, 32, 0.5);
  border-style: solid;
  background: rgba(244, 121, 32, 0.08);
}

/* MODE EDITION - liste verticale */
.cities-favorites .cf-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.cities-favorites .cf-row {
  display: grid;
  grid-template-columns: 22px 28px 1fr 32px;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.cities-favorites .cf-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.cities-favorites .cf-row.cf-dragging {
  opacity: 0.4;
}
.cities-favorites .cf-row.cf-drag-over {
  background: rgba(244, 121, 32, 0.1);
  border-color: rgba(244, 121, 32, 0.45);
}
.cities-favorites .cf-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  cursor: grab;
}
.cities-favorites .cf-handle:active { cursor: grabbing; }

.cities-favorites .cf-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-faint);
  background: transparent;
  transition: color 0.15s, background 0.15s;
}
.cities-favorites .cf-star:hover { color: var(--orange-soft); }
.cities-favorites .cf-star.is-on {
  color: var(--orange);
  background: rgba(244, 121, 32, 0.12);
}

.cities-favorites .cf-row-name {
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cities-favorites .cf-row-country {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 300;
}

.cities-favorites .cf-trash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--text-dim);
  background: transparent;
  transition: all 0.15s;
}
.cities-favorites .cf-trash:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* Bouton "Ajouter la position actuelle" + etat vide */
.cities-favorites .cf-add-current-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(244, 121, 32, 0.1);
  border: 1px dashed rgba(244, 121, 32, 0.4);
  color: var(--orange);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  width: 100%;
  transition: all 0.15s;
}
.cities-favorites .cf-add-current-btn:hover {
  background: rgba(244, 121, 32, 0.18);
  border-style: solid;
}

.cities-favorites .cf-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px;
}
.cities-favorites .cf-empty-text {
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
  padding: 4px 2px;
}

/* Responsive */
@media (max-width: 480px) {
  .cities-favorites .cf-pill {
    font-size: 12px;
    padding: 7px 12px;
  }
  .cities-favorites .cf-pill-name {
    max-width: 110px;
  }
}

/* ============================================================
   v48.1 - Etoile favori dans la location-bar
   ============================================================
   - Conteneur du nom (1er <div> de .location-bar) devient flex
     pour aligner nom + etoile sur la meme ligne
   - L'etoile est outline par defaut, pleine quand active
   - Couleur orange pour rester dans le design system
   - Animation pop subtile au clic d'activation
   ============================================================ */

.location-bar > div.location-with-star {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.location-bar > div.location-with-star #location-name {
  /* Le nom prend la place dispo mais ne pousse pas l'etoile */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-bar > div.location-with-star #location-meta {
  /* Force le meta sur sa propre ligne sous le nom + etoile */
  flex-basis: 100%;
}

.location-fav-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
  flex-shrink: 0;
  padding: 0;
}
.location-fav-star:hover {
  color: var(--orange-soft);
  border-color: rgba(244, 121, 32, 0.45);
  background: rgba(244, 121, 32, 0.08);
}
.location-fav-star:active {
  transform: scale(0.92);
}
.location-fav-star.is-on {
  color: var(--orange);
  background: rgba(244, 121, 32, 0.16);
  border-color: rgba(244, 121, 32, 0.5);
  animation: locationFavPop 0.32s ease-out;
}
@keyframes locationFavPop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Mobile : etoile un peu plus petite */
@media (max-width: 480px) {
  .location-fav-star {
    width: 32px;
    height: 32px;
  }
  .location-fav-star svg {
    width: 18px;
    height: 18px;
  }
}

/* ============================================================
   ADDITIONS v49 - RegionalContext (donnees specifiques zone)
   A coller APRES les additions v48, et bumper ?v=49
   ============================================================
   Section "Specifique a votre zone" qui affiche :
   - Pollens locaux non-CAMS (platane, chene, cypres...)
   - Alertes saisonnieres (ambroisie, cypres pic...)
   - Risques pollution chroniques (NO2, PM, Ozone)
   - Vigilance specifique (feux, inversions)
   - Sites industriels notables (depliable)
   ============================================================ */

#regional-context {
  background: rgba(18, 32, 56, 0.45);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Header zone */
.rc-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--glass-border);
}
.rc-zone-name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--orange);
  font-weight: 600;
}
.rc-zone-detail {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 400;
}

/* Bloc generique */
.rc-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rc-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rc-block-title svg {
  color: var(--orange);
  flex-shrink: 0;
}

/* Grille pollens locaux */
.rc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}
.rc-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.rc-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rc-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.rc-item-note {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
  font-style: italic;
  line-height: 1.4;
}

/* Badges de niveau */
.rc-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}

/* Alertes (saisonnier + specifique) */
.rc-alert {
  background: rgba(244, 121, 32, 0.08);
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  padding: 10px 12px;
}
.rc-alert-msg {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.rc-alert-severe {
  background: rgba(168, 85, 247, 0.1);
  border-left-color: #a855f7;
}
.rc-alert-high {
  background: rgba(239, 68, 68, 0.08);
  border-left-color: #ef4444;
}
.rc-alert-medium {
  background: rgba(244, 121, 32, 0.08);
  border-left-color: var(--orange);
}

/* Liste risques pollution + sites */
.rc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rc-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}
.rc-list-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--orange);
  background: rgba(244, 121, 32, 0.15);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.rc-list-tag-industrial {
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.06);
}
.rc-list-text {
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.rc-list-chronic {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  flex-shrink: 0;
}

/* Bloc depliable (sites industriels) */
.rc-block-collapsible details summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 4px 0;
}
.rc-block-collapsible details summary::-webkit-details-marker { display: none; }
.rc-block-collapsible details summary::after {
  content: '+';
  margin-left: auto;
  font-size: 18px;
  color: var(--text-dim);
  transition: transform 0.2s;
  display: inline-block;
}
.rc-block-collapsible details[open] summary::after {
  content: '−';
}
.rc-block-collapsible details > .rc-list {
  margin-top: 8px;
}

/* Etat vide / hors couverture */
.rc-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}
.rc-empty-icon {
  color: var(--text-faint);
  flex-shrink: 0;
}
.rc-empty-text {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}
.rc-empty-sub {
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
}
.rc-no-active {
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
  padding: 8px 0;
}

/* Footer sources */
.rc-footer {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: right;
  padding-top: 10px;
  border-top: 1px solid var(--glass-border);
}

/* Mobile */
@media (max-width: 480px) {
  #regional-context {
    padding: 14px;
  }
  .rc-grid {
    grid-template-columns: 1fr;
  }
  .rc-zone-detail {
    font-size: 12px;
  }
}

/* Body wsv-active : applique les memes overrides que les autres sections */
body.wsv-active #regional-context {
  background: rgba(20, 35, 60, calc(0.05 + var(--wsv-scroll) * 0.7)) !important;
  backdrop-filter: blur(calc(2px + var(--wsv-scroll) * 14px));
  -webkit-backdrop-filter: blur(calc(2px + var(--wsv-scroll) * 14px));
  border-radius: 20px !important;
}
/* ============================================================
   PULL-TO-REFRESH v50 (iOS standalone fix)
   ============================================================
   iOS en mode standalone desactive le pull-to-refresh natif.
   Cette pastille apparait en haut de l'ecran lors d'un swipe vers le bas.
   - Position fixed centree, translatee via --ptr-y
   - Couleur orange au declenchement
   - Spinner pendant le refresh
   ============================================================ */
.ptr-indicator {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 8px);
  left: 50%;
  --ptr-y: -60px;
  transform: translate(-50%, var(--ptr-y));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(11, 22, 40, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(244, 121, 32, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange, #f47920);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}
.ptr-indicator .ptr-icon {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ptr-indicator.ptr-ready {
  border-color: var(--orange, #f47920);
  background: rgba(244, 121, 32, 0.22);
  box-shadow: 0 8px 28px rgba(244, 121, 32, 0.4);
}
.ptr-indicator.ptr-ready .ptr-icon {
  transform: rotate(180deg);
}
.ptr-indicator.ptr-refreshing .ptr-icon {
  animation: ptr-spin 0.9s linear infinite;
}
@keyframes ptr-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Mode paysage ou ecran etroit : reduit la taille */
@media (max-width: 360px) {
  .ptr-indicator { width: 40px; height: 40px; }
}

/* ============================================================
   ROAD TRIP v5 - Segmented "Type de route" + badges + delta
   ============================================================ */

/* Bloc segmented control dans l'editeur */
.rt-route-profile {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 6px;
}
.rt-route-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--text-dim, #9aa8bf);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  font-size: 13px;
  text-align: center;
  min-height: 72px;
}
.rt-route-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.rt-route-btn.active {
  background: rgba(244, 121, 32, 0.18);
  border-color: var(--orange, #f47920);
  color: var(--orange, #f47920);
  box-shadow: 0 4px 14px rgba(244, 121, 32, 0.2);
}
.rt-route-btn.active .rt-route-btn-label {
  color: var(--orange, #f47920);
  font-weight: 600;
}
.rt-route-btn svg {
  flex-shrink: 0;
}
.rt-route-btn-label {
  font-size: 12px;
  line-height: 1.2;
}

/* Legende sous le segmented */
.rt-route-hint {
  color: var(--text-dim, #9aa8bf);
  font-size: 12px;
  margin-bottom: 16px;
  padding: 0 2px;
  font-style: italic;
}

/* Badge profil dans la carte de trip (liste) */
.rt-route-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(244, 121, 32, 0.15);
  color: var(--orange, #f47920);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  vertical-align: middle;
}

/* Delta temps/distance vs le plus rapide */
.rtv-route-delta {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}
.rtv-route-delta-slower {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}
.rtv-route-delta-faster {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}
.rtv-route-delta-same {
  background: rgba(154, 168, 191, 0.12);
  color: var(--text-dim, #9aa8bf);
}

/* Responsive : passe en 1 colonne sur tres petit ecran */
@media (max-width: 360px) {
  .rt-route-profile {
    grid-template-columns: 1fr;
  }
  .rt-route-btn {
    flex-direction: row;
    min-height: 56px;
    justify-content: flex-start;
    padding: 10px 14px;
  }
}

/* ============================================================
   FIX iOS SCROLL v52
   ============================================================
   iOS standalone PWA : momentum scroll + safe area bottom
   -webkit-overflow-scrolling: touch est requis dans certains
   contextes iOS pour avoir le scroll avec inertie.
   padding-bottom safe-area evite la troncature par l'indicateur home.
   ============================================================ */
.modal-content,
.modal-overlay,
.search-results,
.rt-search-results,
.rt-stops,
.rt-list,
.rtv-timeline,
.rte-modal-content {
  -webkit-overflow-scrolling: touch;
}

/* Safe area bottom sur les modals fullscreen mobile */
@media (max-width: 640px) {
  .modal-content {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

/* Fix iOS standalone : le body ne doit pas bloquer le scroll */
@supports (-webkit-touch-callout: none) {
  /* Detecte iOS Safari / WebKit */
  html, body {
    -webkit-overflow-scrolling: touch;
  }
  .modal-content {
    /* Overscroll contenu dans le modal, pas le body */
    overscroll-behavior: contain;
  }
}

/* ============================================================
   OPTIONS PANEL v54 - Popup fixed avec scrim (FIXED v54.1)
   ============================================================
   Le panel Options s'affiche en popup fixe centre, peu importe
   la position de scroll. Scrim semi-transparent derriere, clic
   exterieur ou Escape pour fermer.

   v54.1 : fond solide (pas backdrop-filter) car interaction
   visuelle foireuse avec le scrim qui rendait le popup flou.
   ============================================================ */

#options-panel:not(.hidden) {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 68px);
  left: 12px;
  right: 12px;
  max-width: 440px;
  margin: 0 auto;
  z-index: 1001;
  max-height: 75vh;
  max-height: 75dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  isolation: isolate;
  background: #0f1e36;
  border: 1px solid rgba(244, 121, 32, 0.35);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  animation: options-slide-down 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes options-slide-down {
  from {
    transform: translateY(-16px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* v57.1 : scrim retire pour une UX moins lourde
   La classe body.options-open / body.search-open est conservee
   pour cacher le bouton back-to-top quand un popup est ouvert */

/* Sur tres petit ecran */
@media (max-width: 400px) {
  #options-panel:not(.hidden) {
    left: 8px;
    right: 8px;
  }
}

/* Pareil pour le search-panel - meme traitement */
#search-panel:not(.hidden) {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 68px);
  left: 12px;
  right: 12px;
  max-width: 440px;
  margin: 0 auto;
  z-index: 1001;
  max-height: 75vh;
  max-height: 75dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  isolation: isolate;
  background: #0f1e36;
  border: 1px solid rgba(244, 121, 32, 0.35);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  animation: options-slide-down 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

body.search-open::before {
  display: none;
}

@media (max-width: 400px) {
  #search-panel:not(.hidden) {
    left: 8px;
    right: 8px;
  }
}

/* ============================================================
   AUTH MODAL v56 - Firebase Auth UI
   ============================================================ */

.auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-modal-overlay.auth-modal-visible { opacity: 1; }

.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 20, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.auth-modal-content {
  position: relative;
  width: min(92vw, 400px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #0f1e36;
  border: 1px solid rgba(244, 121, 32, 0.3);
  border-radius: 22px;
  padding: 32px 24px 24px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  transform: translateY(12px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-modal-visible .auth-modal-content {
  transform: translateY(0);
}

.auth-modal-brand {
  text-align: center;
  margin-bottom: 24px;
}

.auth-modal-icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #f47920 0%, #ff9d47 100%);
  border-radius: 16px;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 14px;
  box-shadow: 0 8px 20px rgba(244, 121, 32, 0.3);
}

.auth-modal-title {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
  font-family: 'Outfit', sans-serif;
}

.auth-modal-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
}

.auth-modal-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  color: #1f1f1f;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
  font-family: inherit;
}

.auth-btn-google:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.auth-btn-google:disabled { opacity: 0.6; cursor: wait; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 4px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.auth-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
  box-sizing: border-box;
}

.auth-input:focus {
  outline: none;
  border-color: rgba(244, 121, 32, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

.auth-input::placeholder { color: rgba(255, 255, 255, 0.4); }

.auth-btn-primary {
  width: 100%;
  padding: 13px 16px;
  background: linear-gradient(135deg, #f47920 0%, #e86c18 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
  font-family: inherit;
  margin-top: 4px;
}

.auth-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(244, 121, 32, 0.35);
}

.auth-btn-primary:disabled { opacity: 0.6; cursor: wait; }

.auth-switch {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
}

.auth-switch a, .auth-forgot a {
  color: #f47920;
  text-decoration: none;
  font-weight: 500;
}

.auth-switch a:hover, .auth-forgot a:hover { text-decoration: underline; }

.auth-forgot {
  text-align: center;
  font-size: 12px;
  margin-top: 2px;
}

.auth-error {
  display: none;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 8px;
  color: #ff9b9b;
  font-size: 13px;
}

.auth-error.info {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.4);
  color: #9be5b3;
}

.auth-skip {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-skip a {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  text-decoration: none;
}

.auth-skip a:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
}

/* ============================================================
   SECTION COMPTE dans panel Options
   ============================================================ */

.opt-section-account {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.opt-account-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.opt-account-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f47920 0%, #e86c18 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

.opt-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.opt-account-info {
  flex: 1;
  min-width: 0;
}

.opt-account-name {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opt-account-email {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opt-account-logout {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.opt-account-logout:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ff9b9b;
}

.opt-account-login {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(244, 121, 32, 0.15) 0%, rgba(244, 121, 32, 0.08) 100%);
  border: 1px solid rgba(244, 121, 32, 0.35);
  border-radius: 12px;
  color: #f47920;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.opt-account-login:hover {
  background: linear-gradient(135deg, rgba(244, 121, 32, 0.22) 0%, rgba(244, 121, 32, 0.12) 100%);
}

.opt-account-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin-top: 8px;
  line-height: 1.4;
}

/* ============================================================
   BOUTON RETOUR EN HAUT v57
   ============================================================
   Bouton flottant en bas a droite, apparait apres 400px scroll
   ============================================================ */

.btn-back-to-top {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(11, 22, 40, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(244, 121, 32, 0.35);
  color: #f47920;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  font-family: inherit;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(20px) scale(0.9);
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.15s ease,
    border-color 0.15s ease;
}

.btn-back-to-top.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.btn-back-to-top:hover,
.btn-back-to-top:active {
  background: rgba(244, 121, 32, 0.18);
  border-color: rgba(244, 121, 32, 0.55);
  transform: translateY(-3px) scale(1);
}

.btn-back-to-top:active {
  transform: translateY(-1px) scale(0.96);
}

/* Cache sur mobile tres petit quand un popup est ouvert pour pas gener */
body.options-open .btn-back-to-top,
body.search-open .btn-back-to-top,
body.modal-open .btn-back-to-top {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Petit ecran : bouton legerement plus petit et plus proche du coin */
@media (max-width: 400px) {
  .btn-back-to-top {
    width: 44px;
    height: 44px;
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  }
}

/* ============================================================
   RTV v10 - Slider vitesse motard/voiture
   ============================================================ */

.rtv-speed-slider {
  margin: 12px 0 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.rtv-speed-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  margin-bottom: 10px;
  letter-spacing: 0.2px;
}

.rtv-speed-label svg {
  color: #f47920;
  flex-shrink: 0;
}

.rtv-speed-btns {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.rtv-speed-btn {
  flex: 1;
  min-width: 48px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  color: #9aa8bf;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.rtv-speed-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.rtv-speed-btn.active {
  background: rgba(244, 121, 32, 0.18);
  border-color: #f47920;
  color: #f47920;
  font-weight: 600;
}

.rtv-speed-unit {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  padding: 0 4px;
}

/* ============================================================
   RTV v10 - Ressenti motard dans chaque etape
   ============================================================ */

.rtv-w-rider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid #60a5fa;
  border-radius: 8px;
}

.rtv-w-rider-val {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  min-width: 48px;
  text-align: center;
}

.rtv-w-rider-meta {
  flex: 1;
  min-width: 0;
}

.rtv-w-rider-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.3;
  margin-bottom: 2px;
}

.rtv-w-rider-sub {
  font-size: 12px;
  color: #fff;
  font-weight: 500;
}

/* ============================================================
   RTV v10 - Badges sinuosite (global + par segment)
   ============================================================ */

.rtv-sin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  vertical-align: middle;
  white-space: nowrap;
}

.rtv-sin-badge svg { flex-shrink: 0; }

.rtv-sin-plate,
.rtv-sin-badge.rtv-sin-plate {
  background: rgba(154, 168, 191, 0.15);
  color: #9aa8bf;
  border: 1px solid rgba(154, 168, 191, 0.3);
}

.rtv-sin-mixte,
.rtv-sin-badge.rtv-sin-mixte {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.35);
}

.rtv-sin-sinueuse,
.rtv-sin-badge.rtv-sin-sinueuse {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.rtv-sin-epicee,
.rtv-sin-badge.rtv-sin-epicee {
  background: rgba(244, 121, 32, 0.18);
  color: #f47920;
  border: 1px solid rgba(244, 121, 32, 0.5);
  font-weight: 600;
}

/* Chip par segment - insere entre 2 etapes dans la timeline */
.rtv-seg-sin {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 4px 22px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

.rtv-seg-sin.rtv-sin-plate {
  border-left-color: #9aa8bf;
  color: #9aa8bf;
}

.rtv-seg-sin.rtv-sin-mixte {
  border-left-color: #60a5fa;
  color: #60a5fa;
}

.rtv-seg-sin.rtv-sin-sinueuse {
  border-left-color: #22c55e;
  color: #22c55e;
}

.rtv-seg-sin.rtv-sin-epicee {
  border-left-color: #f47920;
  color: #f47920;
  background: rgba(244, 121, 32, 0.06);
  font-weight: 500;
}

.rtv-seg-sin svg { flex-shrink: 0; }

/* Responsive petit ecran */
@media (max-width: 400px) {
  .rtv-speed-btns { gap: 4px; }
  .rtv-speed-btn { font-size: 12px; padding: 7px 6px; min-width: 40px; }
  .rtv-sin-badge { font-size: 10px; padding: 3px 7px; }
  .rtv-seg-sin { font-size: 10px; margin-left: 18px; }
}

/* ============================================================
   ADDITIONS CONSOLIDÉES v59 → v63
   ============================================================
   Section unique propre regroupant :
   - v59 : Modal Soleil & Lune (clic sur la section sunmoon)
   - v60 : Modal Pression (clic sur tuile Pression)
   - v61 : Modal Vent (clic sur tuile Vent)
   - v62 : Pollens dérivés Peuplier + Platane (badge "est.")
   - v63 : Fix titres tuiles (centrage + padding pour éviter
           le bord arrondi)
   ============================================================ */


/* ============================================================
   v63 — FIX TITRES DES TUILES (centrage + bord arrondi)
   ============================================================
   - Padding-top supplémentaire sur les .tile pour aérer le titre
   - Titre centré horizontalement, dans le flow normal (pas absolute)
   - Marge sous titre pour respirer
   ============================================================ */

/* Plus d'espace en haut des tuiles pour que le titre respire et
   ne tombe plus dans l'arrondi du conteneur */
body .tiles-grid .tile {
  padding-top: 16px !important;
}

/* Titre toujours centré horizontalement, dans le flow normal */
body .tile .tile-label-top,
body .tiles-grid .tile .tile-label-top,
body .app-main .tiles-grid .tile .tile-label-top {
  text-align: center !important;
  width: 100% !important;
  margin: 0 0 10px !important;
  padding: 0 8px !important;
  /* Forcer le retour au flow normal au cas où une règle l'aurait passé en absolute */
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
}


/* ============================================================
   v60 + v61 — TUILES CLIQUABLES (Vent + Pression)
   ============================================================ */

#tile-wind,
#tile-pressure {
  cursor: pointer !important;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#tile-wind:hover,
#tile-pressure:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(244, 121, 32, 0.15);
}
/* Petite flèche orange en haut à droite indiquant la cliquabilité */
#tile-wind::after,
#tile-pressure::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--orange);
  border-top: 2px solid var(--orange);
  transform: rotate(45deg);
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
}


/* ============================================================
   v59 — MODAL SOLEIL & LUNE
   ============================================================ */

#home-sunmoon {
  cursor: pointer;
  transition: transform 0.2s ease;
}
#home-sunmoon:hover { transform: translateY(-2px); }

#sm-modal-overlay .modal-content {
  max-width: 760px !important;
  padding: 0 !important;
}
#sm-modal-overlay .sm-modal-head {
  padding: 28px 24px 18px !important;
  border-bottom: 1px solid var(--glass-border);
  background: linear-gradient(135deg, rgba(244,121,32,0.08), transparent 60%);
}
#sm-modal-overlay .sm-modal-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--orange) !important;
  background: rgba(244, 121, 32, 0.15) !important;
  border: 1px solid rgba(244, 121, 32, 0.3) !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}
#sm-modal-overlay .sm-modal-title {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
}
#sm-modal-overlay .sm-modal-sub {
  font-size: 13px !important;
  color: var(--text-dim) !important;
  margin: 0 !important;
}

#sm-modal-overlay .sm-modal-tabs,
#sm-modal-overlay .sm-tabs {
  display: flex !important;
  gap: 6px !important;
  padding: 14px 24px 0 !important;
  border-bottom: 1px solid var(--glass-border);
}
#sm-modal-overlay .sm-tab {
  background: transparent !important;
  border: none !important;
  color: var(--text-dim) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.15s !important;
  letter-spacing: 0.02em;
}
#sm-modal-overlay .sm-tab:hover { color: var(--text) !important; }
#sm-modal-overlay .sm-tab-active {
  color: var(--orange) !important;
  border-bottom-color: var(--orange) !important;
}

#sm-modal-overlay .sm-modal-body {
  padding: 22px 24px 28px !important;
}

#sm-modal-overlay .sm-section { margin-bottom: 22px; }
#sm-modal-overlay .sm-section:last-child { margin-bottom: 0; }
#sm-modal-overlay .sm-section-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: rgba(255,255,255,0.5) !important;
  margin: 0 0 12px !important;
}

/* ---------- Cards heures-clés (golden hour, blue hour) ---- */
#sm-modal-overlay .sm-keytimes {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
@media (min-width: 600px) {
  #sm-modal-overlay .sm-keytimes {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
/* Cards .sm-kt utilisées par sun-moon-modal */
#sm-modal-overlay .sm-kt {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-left: 3px solid var(--orange) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 14px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
/* Couleurs spécifiques par type d'heure */
#sm-modal-overlay .sm-kt.sm-kt-golden { border-left-color: #fbbf24 !important; }
#sm-modal-overlay .sm-kt.sm-kt-blue   { border-left-color: #7dd3fc !important; }
#sm-modal-overlay .sm-kt.sm-kt-civil  { border-left-color: #f47920 !important; }
#sm-modal-overlay .sm-kt.sm-kt-noon   { border-left-color: #fef08a !important; }

#sm-modal-overlay .sm-kt-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(0,0,0,0.25);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#sm-modal-overlay .sm-kt.sm-kt-golden .sm-kt-icon { color: #fbbf24; }
#sm-modal-overlay .sm-kt.sm-kt-blue   .sm-kt-icon { color: #7dd3fc; }
#sm-modal-overlay .sm-kt.sm-kt-noon   .sm-kt-icon { color: #fef08a; }

#sm-modal-overlay .sm-kt-body {
  flex: 1;
  min-width: 0;
}
#sm-modal-overlay .sm-kt-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.55) !important;
  margin-bottom: 3px !important;
}
#sm-modal-overlay .sm-kt-value {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.2 !important;
}
#sm-modal-overlay .sm-kt-sub {
  font-size: 11px !important;
  color: var(--text-faint) !important;
  margin-top: 2px !important;
  line-height: 1.4 !important;
}

/* ---------- Compas position lever/coucher ---------------- */
#sm-modal-overlay .sm-compass-wrap {
  background: rgba(5, 10, 26, 0.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
#sm-modal-overlay .sm-compass-svg {
  width: 100% !important;
  max-width: 320px !important;
  height: auto !important;
  display: block !important;
}
#sm-modal-overlay .sm-compass-hint {
  font-size: 12px !important;
  color: var(--text-dim) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  text-align: center;
}
#sm-modal-overlay .sm-compass-hint strong {
  color: var(--orange);
  font-weight: 600;
}

/* ---------- Crépuscules (twilight) ----------------------- */
#sm-modal-overlay .sm-tw-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}
@media (min-width: 600px) {
  #sm-modal-overlay .sm-tw-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
#sm-modal-overlay .sm-tw-item {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 12px !important;
}
#sm-modal-overlay .sm-tw-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.55) !important;
  margin-bottom: 3px !important;
}
#sm-modal-overlay .sm-tw-value {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.1 !important;
}
#sm-modal-overlay .sm-tw-sub {
  font-size: 11px !important;
  color: var(--text-faint) !important;
  margin-top: 2px !important;
}

/* Carte du ciel (étoiles) */
#sm-modal-overlay .sm-sky-wrap {
  position: relative;
  background: rgba(5, 10, 26, 0.75) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  padding: 12px !important;
  overflow: hidden;
}
#sm-modal-overlay .sm-sky-svg {
  width: 100% !important;
  max-width: 480px !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
  cursor: pointer;
}
#sm-modal-overlay .sm-sky-toprow {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 12px !important;
}
#sm-modal-overlay .sm-sky-time {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
#sm-modal-overlay .sm-sky-controls {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#sm-modal-overlay .sm-sky-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: var(--text-dim) !important;
  cursor: pointer !important;
}
#sm-modal-overlay .sm-sky-toggle input[type="checkbox"] {
  accent-color: var(--orange);
  width: 16px;
  height: 16px;
}
#sm-modal-overlay .sm-sky-slider {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
}
#sm-modal-overlay .sm-sky-slider label {
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#sm-modal-overlay .sm-sky-slider label span {
  color: var(--orange);
  margin-left: 6px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
}
#sm-modal-overlay .sm-sky-slider input[type="range"] {
  width: 100%;
  accent-color: var(--orange);
}
#sm-modal-overlay .sm-sky-hint {
  font-size: 11px !important;
  color: var(--text-faint) !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  margin-top: 12px !important;
}

/* Boutons agrandir / réduire la carte du ciel */
#sm-modal-overlay .sm-sky-expand,
#sm-modal-overlay .sm-sky-collapse {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.15s;
}
#sm-modal-overlay .sm-sky-expand:hover,
#sm-modal-overlay .sm-sky-collapse:hover {
  background: rgba(244,121,32,0.3);
}
#sm-modal-overlay .sm-sky-collapse { display: none; }
#sm-modal-overlay .sm-sky-fullscreen .sm-sky-expand { display: none; }
#sm-modal-overlay .sm-sky-fullscreen .sm-sky-collapse { display: flex; }

#sm-modal-overlay .sm-sky-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  background: #050a1a !important;
  padding: 60px 16px !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
#sm-modal-overlay .sm-sky-fullscreen .sm-sky-svg {
  max-width: none !important;
  max-height: 70vh !important;
}
body.sm-sky-fs-active { overflow: hidden; }

/* Liens externes Soleil & Lune */
#sm-modal-overlay .sm-external-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#sm-modal-overlay .sm-ext-link {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-left: 4px solid var(--orange) !important;
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important;
  color: var(--text) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
#sm-modal-overlay .sm-ext-link:hover {
  border-color: var(--orange) !important;
  background: rgba(244, 121, 32, 0.08) !important;
  transform: translateX(4px);
}
#sm-modal-overlay .sm-ext-link-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(244, 121, 32, 0.15);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#sm-modal-overlay .sm-ext-link-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#sm-modal-overlay .sm-ext-link-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}
#sm-modal-overlay .sm-ext-link-sub {
  font-size: 11px !important;
  color: var(--text-faint) !important;
}
#sm-modal-overlay .sm-ext-link-arrow {
  color: var(--text-dim);
  flex-shrink: 0;
  margin-left: auto;
}

@media (max-width: 480px) {
  #sm-modal-overlay .sm-modal-head { padding: 24px 16px 16px !important; }
  #sm-modal-overlay .sm-tabs { padding: 12px 16px 0 !important; }
  #sm-modal-overlay .sm-tab { padding: 10px 12px !important; font-size: 12px !important; }
  #sm-modal-overlay .sm-modal-body { padding: 18px 16px 24px !important; }
  #sm-modal-overlay .sm-modal-title { font-size: 22px !important; }
}


/* ============================================================
   v60 — MODAL PRESSION
   ============================================================ */

#pm-modal-overlay .modal-content.pm-modal {
  max-width: 720px !important;
  padding: 0 !important;
}
#pm-modal-overlay .pm-modal-head {
  padding: 28px 24px 18px !important;
  border-bottom: 1px solid var(--glass-border);
  background: linear-gradient(135deg, rgba(244,121,32,0.08), transparent 60%);
}
#pm-modal-overlay .pm-modal-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--orange) !important;
  background: rgba(244, 121, 32, 0.15) !important;
  border: 1px solid rgba(244, 121, 32, 0.3) !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}
#pm-modal-overlay .pm-modal-title {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 4px !important;
  line-height: 1.1 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#pm-modal-overlay .pm-modal-sub {
  font-size: 13px !important;
  color: var(--text-dim) !important;
  margin: 0 !important;
}
#pm-modal-overlay .pm-modal-body {
  padding: 22px 24px 28px !important;
}
@media (max-width: 480px) {
  #pm-modal-overlay .pm-modal-head { padding: 24px 16px 16px !important; }
  #pm-modal-overlay .pm-modal-body { padding: 18px 16px 24px !important; }
  #pm-modal-overlay .pm-modal-title { font-size: 22px !important; }
}

/* Loading / Error */
#pm-modal-overlay .pm-loading,
#pm-modal-overlay .pm-error {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 20px !important;
  gap: 16px !important;
  color: var(--text-dim) !important;
  text-align: center;
}
#pm-modal-overlay .pm-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(244, 121, 32, 0.2);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: pm-spin 1s linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }
#pm-modal-overlay .pm-error svg { color: #f87171; }
#pm-modal-overlay .pm-retry-btn {
  background: var(--orange);
  color: var(--navy);
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* Sections */
#pm-modal-overlay .pm-section { margin-bottom: 22px; }
#pm-modal-overlay .pm-section:last-child { margin-bottom: 0; }
#pm-modal-overlay .pm-section-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: rgba(255,255,255,0.5) !important;
  margin: 0 0 12px !important;
  display: block;
}
#pm-modal-overlay .pm-section-sub {
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text-faint) !important;
  margin-left: 6px;
}

/* Headline pression actuelle */
#pm-modal-overlay .pm-headline {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  padding: 18px 20px !important;
}
@media (max-width: 480px) {
  #pm-modal-overlay .pm-headline {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }
}
#pm-modal-overlay .pm-current { display: flex; flex-direction: column; gap: 4px; }
#pm-modal-overlay .pm-current-val {
  font-size: 42px !important;
  font-weight: 300 !important;
  color: var(--text) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#pm-modal-overlay .pm-current-unit {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--text-dim) !important;
  margin-left: 4px;
}
#pm-modal-overlay .pm-current-label {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-dim) !important;
  font-weight: 500;
}
#pm-modal-overlay .pm-trend-block {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  background: rgba(0,0,0,0.2) !important;
  border-radius: var(--radius-sm) !important;
  border-left: 3px solid var(--pm-trend-color, var(--orange)) !important;
}
#pm-modal-overlay .pm-trend-arrow {
  font-size: 32px !important;
  font-weight: 600 !important;
  color: var(--pm-trend-color) !important;
  line-height: 1 !important;
  flex-shrink: 0;
}
#pm-modal-overlay .pm-trend-info { min-width: 0; }
#pm-modal-overlay .pm-trend-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em;
}
#pm-modal-overlay .pm-trend-detail {
  font-size: 11px !important;
  color: var(--text-dim) !important;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Graphe tendance */
#pm-modal-overlay .pm-chart-wrap {
  background: rgba(5, 10, 26, 0.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  padding: 12px !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#pm-modal-overlay .pm-chart {
  width: 100% !important;
  min-width: 480px;
  height: auto !important;
  display: block !important;
}

/* Indices grid */
#pm-modal-overlay .pm-idx-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
@media (min-width: 600px) {
  #pm-modal-overlay .pm-idx-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
#pm-modal-overlay .pm-idx {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-left: 4px solid var(--idx-color, var(--orange)) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#pm-modal-overlay .pm-idx-head {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 12px !important;
  align-items: center !important;
}
#pm-modal-overlay .pm-idx-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(0,0,0,0.25);
  color: var(--idx-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px currentColor);
}
#pm-modal-overlay .pm-idx-titlewrap { min-width: 0; }
#pm-modal-overlay .pm-idx-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2;
}
#pm-modal-overlay .pm-idx-detail {
  font-size: 10px !important;
  color: var(--text-faint) !important;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
#pm-modal-overlay .pm-idx-scorewrap {
  display: flex;
  align-items: baseline;
  gap: 1px;
  flex-shrink: 0;
}
#pm-modal-overlay .pm-idx-score {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--idx-color) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
#pm-modal-overlay .pm-idx-scoremax {
  font-size: 12px !important;
  color: var(--text-faint) !important;
  font-weight: 500;
}
#pm-modal-overlay .pm-idx-bar {
  height: 4px;
  background: rgba(0,0,0,0.3);
  border-radius: 2px;
  overflow: hidden;
}
#pm-modal-overlay .pm-idx-fill {
  height: 100%;
  background: var(--idx-color);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--idx-color);
  transition: width 0.5s ease;
}
#pm-modal-overlay .pm-idx-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--idx-color) !important;
  letter-spacing: 0.02em;
}
#pm-modal-overlay .pm-idx-advice {
  font-size: 11px !important;
  color: var(--text-dim) !important;
  line-height: 1.5 !important;
}
#pm-modal-overlay .pm-idx-source {
  font-size: 11px !important;
  color: var(--text-faint) !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  margin: 12px 0 0 !important;
  text-align: center;
  padding: 0 8px;
}

/* Liens externes Pression */
#pm-modal-overlay .pm-external-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#pm-modal-overlay .pm-ext-link {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-left: 4px solid var(--orange) !important;
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important;
  color: var(--text) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
#pm-modal-overlay .pm-ext-link:hover {
  border-color: var(--orange) !important;
  background: rgba(244, 121, 32, 0.08) !important;
  transform: translateX(4px);
}
#pm-modal-overlay .pm-ext-link-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(244, 121, 32, 0.15);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#pm-modal-overlay .pm-ext-link-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#pm-modal-overlay .pm-ext-link-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}
#pm-modal-overlay .pm-ext-link-sub {
  font-size: 11px !important;
  color: var(--text-faint) !important;
  line-height: 1.4 !important;
}
#pm-modal-overlay .pm-ext-link-arrow {
  color: var(--text-dim);
  flex-shrink: 0;
  margin-left: auto;
}


/* ============================================================
   v61 — MODAL VENT (3 onglets : Maintenant, 24h, Altitude)
   ============================================================ */

#wm-modal-overlay .modal-content.wm-modal {
  max-width: 760px !important;
  padding: 0 !important;
}
#wm-modal-overlay .wm-modal-head {
  padding: 28px 24px 18px !important;
  border-bottom: 1px solid var(--glass-border);
  background: linear-gradient(135deg, rgba(244,121,32,0.08), transparent 60%);
}
#wm-modal-overlay .wm-modal-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--orange) !important;
  background: rgba(244, 121, 32, 0.15) !important;
  border: 1px solid rgba(244, 121, 32, 0.3) !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}
#wm-modal-overlay .wm-modal-title {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 4px !important;
  line-height: 1.1 !important;
}
#wm-modal-overlay .wm-modal-sub {
  font-size: 13px !important;
  color: var(--text-dim) !important;
  margin: 0 !important;
}

#wm-modal-overlay .wm-tabs {
  display: flex !important;
  gap: 6px !important;
  padding: 14px 24px 0 !important;
  border-bottom: 1px solid var(--glass-border);
}
#wm-modal-overlay .wm-tab {
  background: transparent !important;
  border: none !important;
  color: var(--text-dim) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.15s !important;
  letter-spacing: 0.02em;
}
#wm-modal-overlay .wm-tab:hover { color: var(--text) !important; }
#wm-modal-overlay .wm-tab-active {
  color: var(--orange) !important;
  border-bottom-color: var(--orange) !important;
}
#wm-modal-overlay .wm-modal-body {
  padding: 22px 24px 28px !important;
}
@media (max-width: 480px) {
  #wm-modal-overlay .wm-modal-head { padding: 24px 16px 16px !important; }
  #wm-modal-overlay .wm-tabs { padding: 12px 16px 0 !important; }
  #wm-modal-overlay .wm-tab { padding: 10px 12px !important; font-size: 12px !important; }
  #wm-modal-overlay .wm-modal-body { padding: 18px 16px 24px !important; }
  #wm-modal-overlay .wm-modal-title { font-size: 22px !important; }
}

#wm-modal-overlay .wm-section { margin-bottom: 22px; }
#wm-modal-overlay .wm-section:last-child { margin-bottom: 0; }
#wm-modal-overlay .wm-section-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: rgba(255,255,255,0.5) !important;
  margin: 0 0 12px !important;
}
#wm-modal-overlay .wm-section-intro {
  font-size: 12px !important;
  color: var(--text-dim) !important;
  line-height: 1.5 !important;
  margin: 0 0 14px !important;
  font-style: italic;
}

/* Loading */
#wm-modal-overlay .wm-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 14px;
  color: var(--text-dim);
  text-align: center;
}
#wm-modal-overlay .wm-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(244, 121, 32, 0.2);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: wm-spin 1s linear infinite;
}
@keyframes wm-spin { to { transform: rotate(360deg); } }

/* Onglet Maintenant : grosse boussole */
#wm-modal-overlay .wm-section-compass {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
}
#wm-modal-overlay .wm-compass-svg {
  width: 100% !important;
  max-width: 280px !important;
  height: auto !important;
  display: block !important;
}
#wm-modal-overlay .wm-gust-badge {
  background: rgba(244, 121, 32, 0.15);
  border: 1px solid rgba(244, 121, 32, 0.4);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  letter-spacing: 0.02em;
}
#wm-modal-overlay .wm-gust-badge strong {
  color: var(--orange);
  font-weight: 600;
}

/* Échelle Beaufort */
#wm-modal-overlay .wm-bft-bar {
  display: grid !important;
  grid-template-columns: repeat(13, 1fr) !important;
  gap: 2px !important;
  margin-bottom: 12px !important;
  background: rgba(0,0,0,0.2);
  border-radius: var(--radius-sm);
  padding: 6px;
}
#wm-modal-overlay .wm-bft-cell {
  height: 30px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s;
}
#wm-modal-overlay .wm-bft-num {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  font-variant-numeric: tabular-nums;
}
#wm-modal-overlay .wm-bft-cell-under {
  background: linear-gradient(180deg, #4ade80, #f47920);
  opacity: 0.7;
}
#wm-modal-overlay .wm-bft-cell-under .wm-bft-num {
  color: rgba(0,0,0,0.6);
}
#wm-modal-overlay .wm-bft-cell-active {
  background: var(--orange) !important;
  box-shadow: 0 0 12px rgba(244, 121, 32, 0.6);
  transform: translateY(-2px);
}
#wm-modal-overlay .wm-bft-cell-active .wm-bft-num {
  color: #0b1628;
  font-size: 12px;
  font-weight: 700;
}
#wm-modal-overlay .wm-bft-info {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
#wm-modal-overlay .wm-bft-info-force {
  font-size: 10px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
#wm-modal-overlay .wm-bft-info-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
#wm-modal-overlay .wm-bft-info-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Détails Vent (4 cards) */
#wm-modal-overlay .wm-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}
@media (min-width: 600px) {
  #wm-modal-overlay .wm-metrics-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
#wm-modal-overlay .wm-metric {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
#wm-modal-overlay .wm-metric-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}
#wm-modal-overlay .wm-metric-value {
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
#wm-modal-overlay .wm-metric-sub {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* Vents régionaux */
#wm-modal-overlay .wm-regwinds {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#wm-modal-overlay .wm-regwind {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
#wm-modal-overlay .wm-regwind-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--orange);
  margin-bottom: 4px;
}
#wm-modal-overlay .wm-regwind-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
#wm-modal-overlay .wm-regwind-meta {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}

/* Onglet 24h : chart */
#wm-modal-overlay .wm-chart-wrap {
  background: rgba(5, 10, 26, 0.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 14px;
  height: 280px;
  position: relative;
}
#wm-modal-overlay .wm-chart-wrap canvas {
  max-height: 100% !important;
}
#wm-modal-overlay .wm-h24-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}
#wm-modal-overlay .wm-h24-stat {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
#wm-modal-overlay .wm-h24-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}
#wm-modal-overlay .wm-h24-stat-val {
  font-size: 22px;
  font-weight: 500;
  color: var(--orange);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
#wm-modal-overlay .wm-h24-stat-sub {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* Onglet Altitude : Hodographe */
#wm-modal-overlay .wm-hodograph {
  background: rgba(5, 10, 26, 0.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ============================================================
   v62 — POLLENS DÉRIVÉS (Peuplier + Platane)
   ============================================================ */

/* Badge "est." pour signaler les pollens estimés (non fournis par
   l'API mais dérivés du calendrier pollinique français) */
.aq-pol-chip-derived {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(244, 121, 32, 0.15);
  border: 1px solid rgba(244, 121, 32, 0.35);
  color: var(--orange);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  vertical-align: middle;
  cursor: help;
}

/* Léger ton différenciant pour les chips estimés */
.aq-pol-chip.aq-pol-chip-est {
  border-style: dashed;
}


/* ============================================================
   v64 — MODAL UV (phototype + érythème + SPF + courbe)
   ============================================================ */

#tile-uv {
  cursor: pointer !important;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#tile-uv:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(244, 121, 32, 0.15);
}
#tile-uv::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--orange);
  border-top: 2px solid var(--orange);
  transform: rotate(45deg);
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
}

#uv-modal-overlay .modal-content.uv-modal {
  max-width: 760px !important;
  padding: 0 !important;
}
#uv-modal-overlay .uv-modal-head {
  padding: 28px 24px 18px !important;
  border-bottom: 1px solid var(--glass-border);
  background: linear-gradient(135deg, rgba(244,121,32,0.08), transparent 60%);
}
#uv-modal-overlay .uv-modal-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--orange) !important;
  background: rgba(244, 121, 32, 0.15) !important;
  border: 1px solid rgba(244, 121, 32, 0.3) !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}
#uv-modal-overlay .uv-modal-title {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 4px !important;
  line-height: 1.1 !important;
}
#uv-modal-overlay .uv-modal-sub {
  font-size: 13px !important;
  color: var(--text-dim) !important;
  margin: 0 !important;
}
#uv-modal-overlay .uv-modal-body {
  padding: 22px 24px 28px !important;
}
@media (max-width: 480px) {
  #uv-modal-overlay .uv-modal-head { padding: 24px 16px 16px !important; }
  #uv-modal-overlay .uv-modal-body { padding: 18px 16px 24px !important; }
  #uv-modal-overlay .uv-modal-title { font-size: 22px !important; }
}

#uv-modal-overlay .uv-section { margin-bottom: 22px; }
#uv-modal-overlay .uv-section:last-child { margin-bottom: 0; }
#uv-modal-overlay .uv-section-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: rgba(255,255,255,0.5) !important;
  margin: 0 0 12px !important;
}
#uv-modal-overlay .uv-section-intro {
  font-size: 12px !important;
  color: var(--text-dim) !important;
  line-height: 1.5 !important;
  margin: 0 0 14px !important;
  font-style: italic;
}
#uv-modal-overlay .uv-empty {
  padding: 14px 16px;
  background: var(--glass-bg);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  font-style: italic;
}

#uv-modal-overlay .uv-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 12px;
  color: var(--text-dim);
}
#uv-modal-overlay .uv-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(244, 121, 32, 0.2);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: uv-spin 1s linear infinite;
}
@keyframes uv-spin { to { transform: rotate(360deg); } }

#uv-modal-overlay .uv-headline {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-left: 4px solid var(--uv-color, var(--orange)) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
}
#uv-modal-overlay .uv-headline-main {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
#uv-modal-overlay .uv-headline-val {
  font-size: 64px;
  font-weight: 300;
  color: var(--uv-color);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
#uv-modal-overlay .uv-headline-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--uv-color);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
#uv-modal-overlay .uv-headline-advice {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

#uv-modal-overlay .uv-phototype-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 600px) {
  #uv-modal-overlay .uv-phototype-grid {
    grid-template-columns: 1fr 1fr;
  }
}
#uv-modal-overlay .uv-pt-card {
  display: grid !important;
  grid-template-columns: 36px 1fr auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 14px !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  text-align: left !important;
  font-family: inherit !important;
  color: var(--text) !important;
  width: 100%;
}
#uv-modal-overlay .uv-pt-card:hover {
  border-color: rgba(244, 121, 32, 0.4);
  background: rgba(244, 121, 32, 0.04);
}
#uv-modal-overlay .uv-pt-active {
  border-color: var(--orange) !important;
  background: rgba(244, 121, 32, 0.1) !important;
  box-shadow: 0 0 0 1px var(--orange);
}
#uv-modal-overlay .uv-pt-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  flex-shrink: 0;
}
#uv-modal-overlay .uv-pt-body {
  min-width: 0;
}
#uv-modal-overlay .uv-pt-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#uv-modal-overlay .uv-pt-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-top: 1px;
}
#uv-modal-overlay .uv-pt-desc {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
  margin-top: 3px;
}
#uv-modal-overlay .uv-pt-check {
  font-size: 18px;
  color: var(--orange);
  font-weight: bold;
}

#uv-modal-overlay .uv-erythema-main {
  background: linear-gradient(135deg, rgba(244,121,32,0.1), transparent);
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 12px;
  text-align: center;
}
#uv-modal-overlay .uv-erythema-val {
  font-size: 36px;
  font-weight: 400;
  color: var(--orange);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
#uv-modal-overlay .uv-erythema-label {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
}
#uv-modal-overlay .uv-erythema-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
@media (min-width: 600px) {
  #uv-modal-overlay .uv-erythema-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
#uv-modal-overlay .uv-erythema-cell {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: center;
}
#uv-modal-overlay .uv-erythema-cell-icon {
  font-size: 20px;
  margin-bottom: 4px;
}
#uv-modal-overlay .uv-erythema-cell-label {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
#uv-modal-overlay .uv-erythema-cell-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
#uv-modal-overlay .uv-erythema-note {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.5;
  font-style: italic;
  margin: 0;
  padding: 0 4px;
}

#uv-modal-overlay .uv-spf-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 18px 20px;
}
#uv-modal-overlay .uv-spf-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}
#uv-modal-overlay .uv-spf-num {
  display: inline-block;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--orange), #ff9248);
  color: var(--navy);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(244, 121, 32, 0.3);
  white-space: nowrap;
}
#uv-modal-overlay .uv-spf-num.uv-spf-none {
  background: rgba(255,255,255,0.1);
  color: var(--text-dim);
  box-shadow: none;
}
#uv-modal-overlay .uv-spf-info { min-width: 0; }
#uv-modal-overlay .uv-spf-level {
  font-size: 16px;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
#uv-modal-overlay .uv-spf-advice {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
#uv-modal-overlay .uv-spf-tips {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--glass-border);
  padding-top: 12px;
}
#uv-modal-overlay .uv-spf-tips li {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.7;
  padding-left: 16px;
  position: relative;
}
#uv-modal-overlay .uv-spf-tips li::before {
  content: '•';
  color: var(--orange);
  position: absolute;
  left: 4px;
  font-weight: bold;
}

#uv-modal-overlay .uv-chart-wrap {
  background: rgba(5, 10, 26, 0.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 14px;
  height: 240px;
  position: relative;
}
#uv-modal-overlay .uv-chart-wrap canvas {
  max-height: 100% !important;
}
#uv-modal-overlay .uv-day-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}
#uv-modal-overlay .uv-day-stat {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
#uv-modal-overlay .uv-day-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}
#uv-modal-overlay .uv-day-stat-val {
  font-size: 22px;
  font-weight: 500;
  color: var(--orange);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
#uv-modal-overlay .uv-day-stat-sub {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}

#uv-modal-overlay .uv-sources {
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
  line-height: 1.6;
  text-align: center;
  margin: 14px 0 0;
  padding: 0 8px;
}

#uv-modal-overlay .uv-external-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#uv-modal-overlay .uv-ext-link {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-left: 4px solid var(--orange) !important;
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important;
  color: var(--text) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
#uv-modal-overlay .uv-ext-link:hover {
  border-color: var(--orange) !important;
  background: rgba(244, 121, 32, 0.08) !important;
  transform: translateX(4px);
}
#uv-modal-overlay .uv-ext-link-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(244, 121, 32, 0.15);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#uv-modal-overlay .uv-ext-link-body {
  flex: 1;
  min-width: 0;
}
#uv-modal-overlay .uv-ext-link-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
#uv-modal-overlay .uv-ext-link-sub {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
#uv-modal-overlay .uv-ext-link-arrow {
  color: var(--text-dim);
  flex-shrink: 0;
  margin-left: auto;
}


/* ============================================================
   v65 — MODAL HUMIDITÉ
   ============================================================ */

#tile-humidity, #tile-visibility, #tile-gust {
  cursor: pointer !important;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#tile-humidity:hover, #tile-visibility:hover, #tile-gust:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(244, 121, 32, 0.15);
}
#tile-humidity::after,
#tile-visibility::after,
#tile-gust::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--orange);
  border-top: 2px solid var(--orange);
  transform: rotate(45deg);
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
}

#hm-modal-overlay .modal-content.hm-modal,
#vm-modal-overlay .modal-content.vm-modal {
  max-width: 760px !important;
  padding: 0 !important;
}
#hm-modal-overlay .hm-modal-head,
#vm-modal-overlay .vm-modal-head {
  padding: 28px 24px 18px !important;
  border-bottom: 1px solid var(--glass-border);
  background: linear-gradient(135deg, rgba(244,121,32,0.08), transparent 60%);
}
#hm-modal-overlay .hm-modal-badge,
#vm-modal-overlay .vm-modal-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--orange) !important;
  background: rgba(244, 121, 32, 0.15) !important;
  border: 1px solid rgba(244, 121, 32, 0.3) !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}
#hm-modal-overlay .hm-modal-title,
#vm-modal-overlay .vm-modal-title {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 4px !important;
  line-height: 1.1 !important;
}
#hm-modal-overlay .hm-modal-sub,
#vm-modal-overlay .vm-modal-sub {
  font-size: 13px !important;
  color: var(--text-dim) !important;
  margin: 0 !important;
}
#hm-modal-overlay .hm-modal-body,
#vm-modal-overlay .vm-modal-body {
  padding: 22px 24px 28px !important;
}
@media (max-width: 480px) {
  #hm-modal-overlay .hm-modal-head, #vm-modal-overlay .vm-modal-head { padding: 24px 16px 16px !important; }
  #hm-modal-overlay .hm-modal-body, #vm-modal-overlay .vm-modal-body { padding: 18px 16px 24px !important; }
  #hm-modal-overlay .hm-modal-title, #vm-modal-overlay .vm-modal-title { font-size: 22px !important; }
}

#hm-modal-overlay .hm-section,
#vm-modal-overlay .vm-section {
  margin-bottom: 22px;
}
#hm-modal-overlay .hm-section:last-child,
#vm-modal-overlay .vm-section:last-child {
  margin-bottom: 0;
}
#hm-modal-overlay .hm-section-title,
#vm-modal-overlay .vm-section-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: rgba(255,255,255,0.5) !important;
  margin: 0 0 12px !important;
}
#hm-modal-overlay .hm-empty,
#vm-modal-overlay .vm-empty {
  padding: 14px 16px;
  background: var(--glass-bg);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  font-style: italic;
}

#hm-modal-overlay .hm-loading,
#vm-modal-overlay .vm-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 12px;
  color: var(--text-dim);
}
#hm-modal-overlay .hm-spinner,
#vm-modal-overlay .vm-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(244, 121, 32, 0.2);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: hm-spin 1s linear infinite;
}
@keyframes hm-spin { to { transform: rotate(360deg); } }

/* Headline humidité */
#hm-modal-overlay .hm-headline {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-left: 4px solid var(--hm-color, var(--orange)) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
}
#hm-modal-overlay .hm-headline-main {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
#hm-modal-overlay .hm-headline-val {
  font-size: 64px;
  font-weight: 300;
  color: var(--hm-color);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
#hm-modal-overlay .hm-headline-unit {
  font-size: 28px;
  font-weight: 400;
  color: var(--text-dim);
  margin-left: 4px;
}
#hm-modal-overlay .hm-headline-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--hm-color);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
#hm-modal-overlay .hm-headline-advice {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Humidex */
#hm-modal-overlay .hm-humidex-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--hx-color, var(--orange));
  border-radius: var(--radius);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
}
#hm-modal-overlay .hm-humidex-main {
  text-align: center;
  flex-shrink: 0;
}
#hm-modal-overlay .hm-humidex-val {
  font-size: 44px;
  font-weight: 400;
  color: var(--hx-color);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
#hm-modal-overlay .hm-humidex-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--hx-color);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}
#hm-modal-overlay .hm-humidex-detail { min-width: 0; }
#hm-modal-overlay .hm-humidex-formula {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
#hm-modal-overlay .hm-humidex-advice {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
#hm-modal-overlay .hm-humidex-note {
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
  line-height: 1.5;
  margin: 8px 0 0;
  text-align: center;
}

/* Point de rosée */
#hm-modal-overlay .hm-dew-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
#hm-modal-overlay .hm-dew-cell {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}
#hm-modal-overlay .hm-dew-cell-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}
#hm-modal-overlay .hm-dew-cell-val {
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
#hm-modal-overlay .hm-dew-risk {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--dew-color, var(--orange));
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
#hm-modal-overlay .hm-dew-risk-label {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
}
#hm-modal-overlay .hm-dew-risk-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
#hm-modal-overlay .hm-dew-note {
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
  line-height: 1.6;
  margin: 12px 0 0;
}
#hm-modal-overlay .hm-dew-note strong {
  color: var(--text-dim);
  font-weight: 600;
}

/* Chart humidité */
#hm-modal-overlay .hm-chart-wrap {
  background: rgba(5, 10, 26, 0.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 14px;
  height: 280px;
  position: relative;
}
#hm-modal-overlay .hm-chart-wrap canvas { max-height: 100% !important; }

/* Tips humidité */
#hm-modal-overlay .hm-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#hm-modal-overlay .hm-tip {
  display: flex;
  gap: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
#hm-modal-overlay .hm-tip-icon {
  font-size: 24px;
  flex-shrink: 0;
}
#hm-modal-overlay .hm-tip-body { min-width: 0; }
#hm-modal-overlay .hm-tip-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
#hm-modal-overlay .hm-tip-text {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}


/* ============================================================
   v66 — MODAL VISIBILITÉ
   ============================================================ */

#vm-modal-overlay .vm-headline {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-left: 4px solid var(--vm-color, var(--orange)) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
}
#vm-modal-overlay .vm-headline-main {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
#vm-modal-overlay .vm-headline-val {
  font-size: 56px;
  font-weight: 300;
  color: var(--vm-color);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
#vm-modal-overlay .vm-headline-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--vm-color);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
#vm-modal-overlay .vm-headline-meta {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Risque brouillard */
#vm-modal-overlay .vm-fog-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--fog-color, var(--orange));
  border-radius: var(--radius);
  padding: 16px 18px;
}
#vm-modal-overlay .vm-fog-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 10px;
}
#vm-modal-overlay .vm-fog-score {
  display: flex;
  align-items: baseline;
  gap: 1px;
  flex-shrink: 0;
}
#vm-modal-overlay .vm-fog-score-val {
  font-size: 40px;
  font-weight: 400;
  color: var(--fog-color);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
#vm-modal-overlay .vm-fog-score-max {
  font-size: 14px;
  color: var(--text-faint);
  font-weight: 500;
}
#vm-modal-overlay .vm-fog-info { min-width: 0; }
#vm-modal-overlay .vm-fog-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--fog-color);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
#vm-modal-overlay .vm-fog-advice {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
#vm-modal-overlay .vm-fog-bar {
  height: 5px;
  background: rgba(0,0,0,0.3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}
#vm-modal-overlay .vm-fog-fill {
  height: 100%;
  background: var(--fog-color);
  border-radius: 3px;
  box-shadow: 0 0 8px var(--fog-color);
  transition: width 0.5s ease;
}
#vm-modal-overlay .vm-fog-factors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
}
#vm-modal-overlay .vm-fog-factor {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
#vm-modal-overlay .vm-fog-factor-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
}
#vm-modal-overlay .vm-fog-factor-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Conduite */
#vm-modal-overlay .vm-drive-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--drive-color, var(--orange));
  border-radius: var(--radius);
  padding: 16px 18px;
}
#vm-modal-overlay .vm-drive-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}
#vm-modal-overlay .vm-drive-icon {
  font-size: 28px;
  flex-shrink: 0;
}
#vm-modal-overlay .vm-drive-level {
  font-size: 18px;
  font-weight: 600;
  color: var(--drive-color);
  letter-spacing: -0.01em;
}
#vm-modal-overlay .vm-drive-rules {
  list-style: none;
  padding: 0;
  margin: 0;
}
#vm-modal-overlay .vm-drive-rules li {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  padding-left: 18px;
  position: relative;
  margin-bottom: 4px;
}
#vm-modal-overlay .vm-drive-rules li::before {
  content: '▸';
  color: var(--drive-color);
  position: absolute;
  left: 4px;
  font-weight: bold;
}

/* Levée brouillard */
#vm-modal-overlay .vm-lift-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(74,222,128,0.08), transparent);
  border: 1px solid var(--glass-border);
  border-left: 4px solid #4ade80;
  border-radius: var(--radius);
  padding: 14px 18px;
}
#vm-modal-overlay .vm-lift-icon {
  font-size: 28px;
  flex-shrink: 0;
}
#vm-modal-overlay .vm-lift-body { min-width: 0; }
#vm-modal-overlay .vm-lift-time {
  font-size: 22px;
  font-weight: 500;
  color: #4ade80;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
#vm-modal-overlay .vm-lift-sub {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Chart visibilité */
#vm-modal-overlay .vm-chart-wrap {
  background: rgba(5, 10, 26, 0.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 14px;
  height: 240px;
  position: relative;
}
#vm-modal-overlay .vm-chart-wrap canvas { max-height: 100% !important; }


/* ============================================================
   REDUCE MOTION (toutes les modales)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  #home-sunmoon, #tile-wind, #tile-pressure, #tile-uv,
  #tile-humidity, #tile-visibility, #tile-gust { transition: none; }
  #sm-modal-overlay *,
  #pm-modal-overlay *,
  #wm-modal-overlay *,
  #uv-modal-overlay *,
  #hm-modal-overlay *,
  #vm-modal-overlay * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   ÉPHÉMÉRIDE — bloc accueil (date / heure / saints / astro)
   ============================================================ */

.cm-eph-section {
  margin: 0 0 14px;
}

.cm-eph-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Variante jour férié : bordure orange marquée (signal visuel discret) */
.cm-eph-card.cm-eph-card-ferie {
  border-color: rgba(244, 121, 32, 0.55);
  box-shadow: 0 0 0 1px rgba(244, 121, 32, 0.18) inset,
              0 4px 18px rgba(244, 121, 32, 0.08);
}

.cm-eph-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Ligne 1 : date + heure */
.cm-eph-row-primary {
  justify-content: space-between;
}

.cm-eph-date-main {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.cm-eph-date-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
  font-weight: 400;
}

.cm-eph-time {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 28px;
  color: #f47920;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

/* Ligne 2 : saints + badges */
.cm-eph-row-saints {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

.cm-eph-saint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0; /* permet l'ellipsis sur les enfants */
}

.cm-eph-saint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
  margin-top: 2px;
}

.cm-eph-saint-text {
  min-width: 0;
  flex: 1 1 auto;
}

.cm-eph-saint-main {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-eph-saint-secondary {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-eph-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cm-eph-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}

.cm-eph-badge-civile {
  background: rgba(244, 121, 32, 0.10);
  color: var(--c-clear);
  border-color: rgba(244, 121, 32, 0.30);
}

.cm-eph-badge-ferie {
  background: rgba(244, 121, 32, 0.18);
  color: #f47920;
  border-color: rgba(244, 121, 32, 0.55);
}

/* Ligne 3 : soleil + lune */
.cm-eph-row-astro {
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cm-eph-sun {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.cm-eph-stat {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cm-eph-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-clear);
  flex-shrink: 0;
}

.cm-eph-stat-lbl {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.cm-eph-stat-val {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.cm-eph-empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
}

.cm-eph-moon {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-left: 4px;
}

.cm-eph-moon-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 8px rgba(254, 252, 232, 0.15));
}

.cm-eph-moon-name {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.2;
}

.cm-eph-moon-illum {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

/* Glass-morphism progressif au scroll
   Aligné sur le pattern .location-bar / .current-card-hero (zone accueil),
   PAS sur le pattern standard .tile/.section (zone données détaillées),
   pour éviter la rupture visuelle "îlot opaque" entre 2 blocs transparents
   au top de page (location-bar 0.15 → cm-eph 0.15 → current-card-hero 0.15).
   Border et box-shadow volontairement omis : préserve .cm-eph-card-ferie. */
body.wsv-active #cm-ephemeride .cm-eph-card {
  background: rgba(20, 35, 60, calc(0.15 + var(--wsv-scroll) * 0.55)) !important;
  backdrop-filter: blur(calc(4px + var(--wsv-scroll) * 12px));
  -webkit-backdrop-filter: blur(calc(4px + var(--wsv-scroll) * 12px));
  transition: background 0.15s linear, backdrop-filter 0.15s linear;
}

/* Responsive : mobile portrait (breakpoint cohérent avec le reste du projet) */
@media (max-width: 480px) {
  .cm-eph-card {
    padding: 12px 14px;
    gap: 9px;
  }
  .cm-eph-time {
    font-size: 24px;
  }
  .cm-eph-date-main {
    font-size: 15px;
  }
  .cm-eph-row-saints {
    flex-direction: column;
    align-items: flex-start;
  }
  .cm-eph-badges {
    align-self: flex-start;
  }
  .cm-eph-row-astro {
    gap: 10px;
  }
  .cm-eph-sun {
    gap: 12px;
    width: 100%;
  }
  .cm-eph-moon {
    padding-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
}

/* Reduce motion : neutralise transitions */
@media (prefers-reduced-motion: reduce) {
  .cm-eph-card { transition: none; }
}