/* Observatoire Vivant — CSS commun (généré automatiquement depuis templates.py) */

  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: #edf2f7; color: #1a202c; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }
  #header { padding: 12px 16px; background: #1e3a5f; color: white; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
  #header h2 { color: #fff; font-size: 1.1em; flex: 1; }
  .nav-links a { color: rgba(255,255,255,0.9); text-decoration: none; margin: 0 6px; font-size: 0.85em; padding: 3px 8px; border-radius: 5px; transition: background 0.15s; }
  .nav-links a:hover { background: rgba(255,255,255,0.15); }
  .content { max-width: 960px; margin: 0 auto; padding: 24px 16px; }
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 28px; }
  .stat-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
  .stat-card .value { font-size: 2em; font-weight: 800; color: #1e3a5f; }
  .stat-card .label { font-size: 0.8em; color: #64748b; margin-top: 4px; }
  .chart-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
  .chart-box h3 { color: #1e3a5f; margin-bottom: 16px; font-size: 1em; }
  .ai-insight { background: #f0f4ff; border-left: 4px solid #1e3a5f; border-radius: 0 10px 10px 0; padding: 14px 18px; margin-bottom: 20px; font-size: 0.88em; color: #1a202c; line-height: 1.6; }
  .ai-insight strong { color: #1e3a5f; }
  .pdf-btn { position: fixed; bottom: 20px; right: 20px; background: #1e3a5f; color: white; border: none; border-radius: 8px; padding: 10px 18px; font-size: 0.9em; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 9999; }
  .pdf-btn:hover { background: #2a4f7f; }
  @media print {
    .pdf-btn { display: none; }
    body { background: white; }
    #header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ai-insight, .stat-card, .chart-box { break-inside: avoid; }
  }

  /* ── Mode sombre ── */
  body.dark { background: #0f172a; color: #e2e8f0; }
  body.dark .stat-card { background: #1e293b; border-color: #334155; color: #e2e8f0; }
  body.dark .stat-card .value { color: #93c5fd; }
  body.dark .stat-card .label { color: #94a3b8; }
  body.dark .chart-box { background: #1e293b; border-color: #334155; }
  body.dark .chart-box h3 { color: #93c5fd; }
  body.dark .ai-insight { background: #1e3a5f; border-left-color: #93c5fd; color: #e2e8f0; }
  body.dark .ai-insight strong { color: #93c5fd; }
  body.dark canvas { filter: invert(0.85) hue-rotate(180deg); }
  body.dark .content { background: #0f172a; }
  body.dark h1, body.dark h2, body.dark h3, body.dark h4 { color: #e2e8f0; }
  body.dark p, body.dark li, body.dark td, body.dark th { color: #cbd5e1; }
  body.dark table { border-color: #334155; }
  body.dark thead { background: #1e293b; color: #93c5fd; }
  body.dark tbody tr:nth-child(even) { background: #1a2535; }
  body.dark tbody tr:hover { background: #1e3a5f; }
  body.dark .chart-box, body.dark .kpi-box, body.dark .info-box { background: #1e293b; border-color: #334155; }
  body.dark a { color: #93c5fd; }
  body.dark .badge { background: #1e3a5f; }
  body.dark footer { background: #0f172a; color: #64748b; border-top-color: #1e293b; }
  body.dark .section-title { color: #93c5fd; border-bottom-color: #334155; }
  body.dark select, body.dark input { background: #1e293b; color: #e2e8f0; border-color: #334155; }
  .dark-toggle { background: none; border: none; outline: none; -webkit-appearance: none; appearance: none; color: white; border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 0.85em; margin-left: 8px; }
.dark-toggle:focus { outline: none; box-shadow: none; }
  .dark-toggle:hover { background: rgba(255,255,255,0.15); }


/* Variables communes */
:root {
  --blue-dark: #1e3a5f;
  --blue-mid: #2563eb;
  --green: #00b894;
  --orange: #f59e0b;
  --red: #e17055;
  --gray-light: #f8fafc;
  --border: #e2e8f0;
}

/* Navigation contextuelle (nav.js) */
.nav-ville { color: rgba(255,255,255,0.95); font-weight: 700; font-size: 0.92em; margin-right: 10px; white-space: nowrap; }
.nav-module-select { background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; padding: 4px 8px; font-size: 0.82em; cursor: pointer; max-width: 220px; }
.nav-module-select:focus { outline: none; background: rgba(255,255,255,0.2); }
.nav-module-select option, .nav-module-select optgroup { background: #1e3a5f; color: white; }

/* ── Responsive mobile ── */
@media (max-width: 640px) {
  .content { padding: 16px 12px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px 10px; }
  .stat-card .value { font-size: 1.5em; }
  .chart-box { padding: 16px 12px; overflow-x: auto; }
  .chart-box canvas { max-width: 100%; }
  #header { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
  #header h2 { font-size: 1em; }
  .nav-links { font-size: 0.8em; }
  .nav-links a { margin: 0 3px; padding: 2px 6px; }
  .nav-module-select { max-width: 160px; font-size: 0.78em; }
  .pdf-btn { bottom: 12px; right: 12px; padding: 8px 14px; font-size: 0.82em; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ai-insight { padding: 12px 14px; font-size: 0.85em; }
}

@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card .value { font-size: 1.3em; }
}

/* ── Fond institutionnel global ────────────────────────────── */
body {
  background-color: #edf2f7 !important;
  background-image: radial-gradient(#c8d4e3 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
}
body::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #1e3a5f 0%, #C6A75E 50%, #1e3a5f 100%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* ── Scrollbar dorée ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1e3a5f; }
::-webkit-scrollbar-thumb { background: #C6A75E; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #e0c07a; }
* { scrollbar-color: #C6A75E #1e3a5f; scrollbar-width: thin; }

/* Topbar : flash évité via CSS (pas opacity pour ne pas casser position:fixed des enfants) */

/* Mobile : masquer le badge de fraîcheur des données */
@media (max-width: 640px) {
  #header h2 span[title] { display: none !important; }
}

/* Burger menu nav.v4 : position relative pour dropdown absolu */
#header { position: relative; }

/* Empêcher le débordement horizontal sur mobile */
@media (max-width: 640px) {
  .content { overflow-x: hidden; }
}