:root {
  --bg: #f7f5f2; --fg: #1d1b19; --muted: #6b665f; --panel: #ffffff; --border: #e3ded6;
  --p-low: #f2c14e; --p-mid: #f08a24; --p-high: #d63a1f; --accent: #2f6f5e;
  --tab-active: #2f6f5e; --tab-text: #fff;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #151413; --fg: #efebe6; --muted: #a39d95; --panel: #1f1d1b; --border: #34302c; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 system-ui, sans-serif; background: var(--bg); color: var(--fg); height: 100vh; display: flex; flex-direction: column; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: .5rem 1rem; border-bottom: 1px solid var(--border); }
body, main, #panel { min-width: 0; overflow-x: hidden; }
header h1 { font-size: 1.1rem; margin: 0; }
#updated { color: var(--muted); font-size: .85rem; margin-left: auto; }

/* Onglets */
#tabs { display: flex; gap: .3rem; }
.tab { border: 1px solid var(--border); background: var(--panel); color: var(--fg); border-radius: 6px 6px 0 0; padding: .35rem .9rem; cursor: pointer; font-size: .9rem; font-weight: 500; transition: background .15s; }
.tab:hover { background: var(--bg); }
.tab.active { background: var(--tab-active); color: var(--tab-text); border-color: var(--tab-active); }

main { flex: 1; display: flex; min-height: 0; }
#panel { width: 380px; max-width: 45vw; overflow-y: auto; padding: .8rem 1rem; background: var(--panel); border-right: 1px solid var(--border); }
#map { flex: 1; }

/* Contenu des onglets */
.tab-content { display: none; }
.tab-content.active { display: block; }

.filters { display: grid; gap: .4rem; margin-bottom: .6rem; }
.filters input[type=range] { vertical-align: middle; width: 140px; }
.filters select { padding: .2rem .4rem; border-radius: 4px; border: 1px solid var(--border); background: var(--panel); color: var(--fg); }
#summary { color: var(--muted); margin: .4rem 0; }
#events { list-style: none; padding: 0; margin: 0; }
#events li { padding: .5rem .4rem; border-bottom: 1px solid var(--border); cursor: pointer; display: grid; grid-template-columns: 2.4rem 1fr; gap: .5rem; }
#events li:hover { background: var(--bg); }
.badge { font-weight: 700; text-align: center; border-radius: 4px; padding: .1rem 0; color: #fff; }
.meta { color: var(--muted); font-size: .85rem; }
.popup dl { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; margin: .4rem 0; }
.popup dt { color: #666; }
.popup dd { margin: 0; }
.confirm { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.confirm button { border: 1px solid #bbb; background: #fff; border-radius: 4px; padding: .2rem .45rem; cursor: pointer; }
.confirm button.chosen { background: var(--accent); color: #fff; border-color: var(--accent); }
.note { color: var(--muted); font-size: .8rem; margin-top: .6rem; }

/* Légende prédiction */
.legend { margin: 1rem 0; }
.legend p { margin: 0 0 .4rem; }
.legend-row { display: flex; align-items: center; gap: .5rem; padding: .15rem 0; font-size: .85rem; }
.swatch { display: inline-block; width: 18px; height: 14px; border-radius: 2px; border: 1px solid rgba(0,0,0,.15); }

/* Liste des zones à risque */
#predTopZones { margin-top: 1rem; }
#predTopZones p { margin: 0 0 .4rem; }
#predZoneList { padding-left: 1.2rem; margin: 0; }
#predZoneList li { padding: .3rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; cursor: pointer; }
#predZoneList li:hover { color: var(--accent); }
.risk-tag { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .35rem; border-radius: 3px; margin-right: .3rem; }
.risk-tag.critical { background: #67000d; color: #fff; }
.risk-tag.high { background: #d63a1f; color: #fff; }
.risk-tag.medium { background: #f08a24; color: #fff; }

@media (max-width: 720px) {
  main { flex-direction: column-reverse; }
  #panel { width: 100%; max-width: none; height: 40vh; border-right: 0; border-top: 1px solid var(--border); }
  #updated { margin-left: 0; }
}