:root {
  --fond: #f6f7fb; --carte: #ffffff; --texte: #1b1f2a; --doux: #5d6475; --trait: #e3e6ee;
  --lien: #1d4ed8; --accent: #14213d;
  --gauche: #d94a64; --centre: #8a8fa3; --droite: #2f6fd6; --neutre: #c9ccd6;
  --note: #fff6db; --note-texte: #6b5200;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0f1420; --carte: #171d2b; --texte: #e7eaf2; --doux: #9aa3b8; --trait: #2a3245;
    --lien: #8ab4ff; --accent: #e7eaf2; --neutre: #4a5266;
    --note: #2d2714; --note-texte: #e9d58a;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--lien); text-decoration: none; }
a:hover { text-decoration: underline; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* En-tête : marque et choix de la date */
.barre {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--accent); color: #fff;
}
@media (prefers-color-scheme: dark) { .barre { background: #0a0e17; border-bottom: 1px solid var(--trait); } }
.marque { color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; }
.choix-date { margin-left: auto; }
.choix-date select {
  font: inherit; font-size: .95rem; padding: 6px 10px; border-radius: 8px; border: 0;
  background: rgba(255, 255, 255, .15); color: #fff; max-width: 60vw;
}
.choix-date option { color: #000; }

main { max-width: 780px; margin: 0 auto; padding: 8px 16px 24px; }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 16px 0 4px; }
h2 { font-size: 1.2rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
h3 { font-size: 1.02rem; line-height: 1.35; margin: 0 0 4px; }
.periode, .aide, .meta, .h, .rien { color: var(--doux); font-size: .87rem; }
.compte { font-size: .8rem; font-weight: 600; color: var(--doux); background: var(--trait); border-radius: 99px; padding: 1px 8px; }
.note { background: var(--note); color: var(--note-texte); padding: 8px 12px; border-radius: 8px; font-size: .9rem; }

section { margin: 18px 0; }
.synthese, .meteo, .essentiel, .section {
  background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 14px 16px;
}
.meteo p { margin: 0; }
.synthese p { margin: 0 0 10px; }
.niveau { border-left: 4px solid var(--teinte, var(--trait)); padding: 2px 0 2px 12px; margin: 14px 0; }
.niveau h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--teinte); margin: 0 0 6px; }
.niveau ul { list-style: none; padding: 0; margin: 0; }
.niveau li { padding: 7px 0; border-top: 1px solid var(--trait); }
.niveau li:first-child { border-top: 0; padding-top: 0; }
.niveau li strong { display: block; }
.niveau li strong a { color: var(--texte); }
.niveau-communes { --teinte: #e0a100; } .niveau-region { --teinte: #2a9d8f; } .niveau-sport { --teinte: #2e9e4f; }
.niveau-france { --teinte: #3a6ff0; } .niveau-monde { --teinte: #7a4fd6; }
.claude { margin: 4px 0; }
.cadrages { margin: 4px 0; font-size: .92rem; border-left: 3px solid var(--trait); padding-left: 8px; }
.vigilance { font-weight: 700; }
.vigilance.jaune { color: #b58900; } .vigilance.orange { color: #e06c00; } .vigilance.rouge { color: #d0021b; }
.essentiel ol { margin: 0; padding-left: 1.3em; }
.essentiel li { margin: 6px 0; }
.essentiel h3 { margin-top: 14px; }
.essentiel .n { color: var(--doux); font-size: .8rem; }

/* Événement */
.ev { padding: 12px 0; border-top: 1px solid var(--trait); }
.section h2 + .ev { border-top: 0; padding-top: 0; }
.ev h3 a { color: var(--texte); }
.ev .resume, .commune .resume { color: var(--doux); font-size: .9rem; margin: 2px 0 4px; }
.meta { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.g-t { color: var(--gauche); font-weight: 600; } .c-t { color: var(--centre); font-weight: 600; } .d-t { color: var(--droite); font-weight: 600; }
.angle { color: #fff; background: #7a4fd6; border-radius: 99px; padding: 0 8px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.couverture { display: inline-flex; width: 64px; height: 8px; border-radius: 99px; overflow: hidden; background: var(--trait); vertical-align: middle; }
.seg.g { background: var(--gauche); } .seg.c { background: var(--centre); } .seg.d { background: var(--droite); } .seg.n { background: var(--neutre); }
details { margin-top: 6px; }
summary { cursor: pointer; color: var(--lien); font-size: .88rem; }
details.reste > summary { margin-top: 8px; font-weight: 600; }
ul.articles { list-style: none; padding: 0; margin: 6px 0 0; }
ul.articles li { margin: 6px 0; font-size: .92rem; }
.m { font-weight: 600; }
.pastille { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--neutre); }
.pastille.gauche { background: var(--gauche); } .pastille.centre { background: var(--centre); } .pastille.droite { background: var(--droite); }

/* Communes */
.commune + .commune { border-top: 1px solid var(--trait); padding-top: 10px; margin-top: 10px; }
.rien { margin: 0; }

/* Sources */
table.sources { width: 100%; border-collapse: collapse; font-size: .85rem; background: var(--carte); }
table.sources th, table.sources td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--trait); vertical-align: top; }
table.sources tr.ko td:first-child { color: var(--gauche); }
@media (max-width: 600px) { table.sources th:nth-child(3), table.sources td:nth-child(3) { display: none; } }

.pied { max-width: 780px; margin: 0 auto; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); color: var(--doux); font-size: .82rem; }

/* Auteur et version, discrets tout en bas. */
.credit { text-align: center; font-size: 11px; opacity: .75; margin-top: 18px; }
.credit a { color: inherit; }

/* Retour en haut : discret (translucide), mais toujours repérable. */
.haut {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--trait);
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  background: var(--carte); color: var(--doux); opacity: .85;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.haut[hidden] { display: none; }
.haut:hover, .haut:focus-visible { opacity: 1; color: var(--texte); }
.haut svg { width: 22px; height: 22px; }