:root {
  --fond: #f4f6f8; --carte: #ffffff; --encre: #16202a; --sourdine: #66717d; --ligne: #e1e6eb;
  --accent: #14324a; --accent-2: #1f6fb2; --hausse: #157347; --baisse: #c0392b; --alerte: #b26a00;
  --hausse-fond: #e3f3ea; --baisse-fond: #fbe7e5; --rayon: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0f141a; --carte: #171e26; --encre: #e6ebf0; --sourdine: #93a0ad; --ligne: #26313c;
    --accent: #9cc3e6; --accent-2: #5aa7e6; --hausse: #4cc38a; --baisse: #ff7b6b; --alerte: #f0b35a;
    --hausse-fond: #12301f; --baisse-fond: #3a1a17; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #0f141a; --carte: #171e26; --encre: #e6ebf0; --sourdine: #93a0ad; --ligne: #26313c;
  --accent: #9cc3e6; --accent-2: #5aa7e6; --hausse: #4cc38a; --baisse: #ff7b6b; --alerte: #f0b35a;
  --hausse-fond: #12301f; --baisse-fond: #3a1a17; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--encre);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
a { color: var(--accent-2); text-decoration: none; } a:hover { text-decoration: underline; }
.sourdine { color: var(--sourdine); }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hausse { color: var(--hausse); } .baisse { color: var(--baisse); }

/* En-tête + onglets */
header.barre { position: sticky; top: 0; z-index: 20; background: var(--carte); border-bottom: 1px solid var(--ligne);
  padding: env(safe-area-inset-top) 16px 0; }
.barre-haut { display: flex; align-items: center; gap: 12px; padding: 10px 0 6px; max-width: 1500px; margin: 0 auto; }
.marque { font-weight: 700; color: var(--accent); white-space: nowrap; }
.marque small { color: var(--sourdine); font-weight: 400; margin-left: 6px; }
.recherche { flex: 1; max-width: 360px; margin-left: auto; }
.recherche input, select, .champ { width: 100%; padding: 7px 10px; border: 1px solid var(--ligne); border-radius: 8px;
  background: var(--fond); color: var(--encre); font: inherit; }
.date-donnees { color: var(--sourdine); font-size: 12px; white-space: nowrap; }
nav.onglets { display: flex; gap: 2px; overflow-x: auto; max-width: 1500px; margin: 0 auto; scrollbar-width: none; }
nav.onglets a { padding: 9px 13px; color: var(--sourdine); border-bottom: 2px solid transparent; white-space: nowrap; }
nav.onglets a.actif { color: var(--encre); border-bottom-color: var(--accent-2); font-weight: 600; }
nav.onglets a:hover { text-decoration: none; color: var(--encre); }
main#vue { max-width: 1500px; margin: 0 auto; padding: 16px 16px 60px; }

/* Cartes / tuiles */
.grille-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tuile { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 11px 13px; min-height: 92px; }
.tuile .t { color: var(--sourdine); font-size: 12px; }
.tuile .v { font-size: 22px; font-weight: 650; margin: 3px 0 2px; font-variant-numeric: tabular-nums; }
.tuile .s { color: var(--sourdine); font-size: 11.5px; }
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 14px 16px; margin-bottom: 16px; }
.carte h2 { font-size: 15px; margin: 0 0 3px; }
.carte .aide { color: var(--sourdine); font-size: 12px; margin: 0 0 10px; }
.deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .deux-col { grid-template-columns: 1fr; } }
.graphe { width: 100%; height: 320px; }
.graphe.petit { height: 240px; }
.outils { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.outils select, .outils input { width: auto; }
button, .btn { font: inherit; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--ligne);
  background: var(--carte); color: var(--encre); cursor: pointer; }
button:hover { border-color: var(--accent-2); }
button.actif { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.pastille { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 11.5px; background: var(--fond); border: 1px solid var(--ligne); }
.pastille.erreur { color: var(--baisse); border-color: var(--baisse); }
.pastille.alerte { color: var(--alerte); border-color: var(--alerte); }
.drapeau { cursor: help; }

/* Tableaux simples */
table.simple { width: 100%; border-collapse: collapse; font-size: 13px; }
table.simple th, table.simple td { padding: 6px 8px; border-bottom: 1px solid var(--ligne); }
table.simple th { text-align: left; color: var(--sourdine); font-weight: 500; position: sticky; top: 0; background: var(--carte); }
.defile { overflow-x: auto; }
td.chaleur { text-align: right; font-variant-numeric: tabular-nums; }

/* Tabulator aux couleurs du site */
.tabulator { background: var(--carte) !important; border: 1px solid var(--ligne) !important; border-radius: var(--rayon); font-size: 12.5px !important; }
.tabulator .tabulator-header, .tabulator .tabulator-header .tabulator-col { background: var(--carte) !important; color: var(--sourdine) !important; border-color: var(--ligne) !important; }
.tabulator .tabulator-header .tabulator-col input { background: var(--fond); color: var(--encre); border: 1px solid var(--ligne); border-radius: 5px; padding: 2px 4px; }
.tabulator-row { background: var(--carte) !important; color: var(--encre) !important; border-color: var(--ligne) !important; }
.tabulator-row.tabulator-row-even { background: var(--fond) !important; }
.tabulator-row:hover { background: var(--hausse-fond) !important; cursor: pointer; }
.tabulator .tabulator-footer { background: var(--carte) !important; color: var(--sourdine) !important; border-color: var(--ligne) !important; }

/* Panneau colonnes */
.panneau { position: absolute; z-index: 30; background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon);
  padding: 10px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.15); max-height: 60vh; overflow: auto; columns: 2; min-width: 320px; }
.panneau label { display: block; break-inside: avoid; padding: 2px 0; }

/* Explications (glossaire) */
.expli { color: var(--sourdine); font-size: 11px; line-height: 1.3; margin-top: 4px; font-weight: 400; }
td .expli { max-width: 320px; }
.info { display: inline-block; color: var(--accent-2); cursor: pointer; font-size: 12px; margin-left: 2px; font-weight: 400; }
.bulle { position: absolute; z-index: 50; max-width: 320px; background: var(--carte); color: var(--encre); border: 1px solid var(--ligne);
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.titre-section { font-size: 15px; margin: 6px 0 10px; }
.tuile .expli { border-top: 1px dashed var(--ligne); padding-top: 4px; margin-top: 6px; }

/* Connexion */
.page-connexion { min-height: 100vh; display: flex; }
.connexion { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.carte-connexion { background: var(--carte); border: 1px solid var(--ligne); border-radius: 14px; padding: 30px 26px;
  max-width: 420px; width: 100%; text-align: center; }
.logo-grand { font-size: 46px; } .carte-connexion h1 { margin: 6px 0 4px; font-size: 20px; color: var(--accent); }
.btn-grand { display: block; width: 100%; padding: 14px; margin-top: 18px; border: 0; border-radius: 10px;
  background: var(--accent-2); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
.btn-grand[disabled] { opacity: .5; }
.erreur { color: var(--baisse); background: var(--baisse-fond); padding: 10px; border-radius: 8px; margin-top: 14px; }
.chargement { color: var(--sourdine); padding: 30px 0; text-align: center; }
@media (max-width: 600px) {
  .tuile .v { font-size: 19px; } .recherche { max-width: none; } .date-donnees { display: none; }
  main#vue { padding: 12px 12px 60px; }
}