/* ═══════════════════════════════════════════════════════════
   responsive.css — Moustique Tigre · Mobile & Tablette
   Utilisé par mosquito_citoyen.html et mosquito_dashboard_regional.html
   ═══════════════════════════════════════════════════════════ */

/* ── TABLETTE (≤ 1024px) ────────────────────────────────── */
@media (max-width: 1024px) {

  /* Dashboard : réduire les panneaux */
  body:has(.panel-left) {
    grid-template-columns: 220px 1fr 260px;
  }
}

/* ── MOBILE & PETITE TABLETTE (≤ 768px) ─────────────────── */
@media (max-width: 768px) {

  /* ── PAGE CITOYEN ─── */

  /* Header compact */
  .header-title { font-size: 13px; }
  .hbtn { font-size: 11px; padding: 4px 8px; }
  .header-btns { gap: 4px; }

  /* Widget de recherche pleine largeur */
  #search-widget {
    width: calc(100% - 20px);
    top: 10px;
    left: 10px;
    transform: none;
  }

  /* Légende repositionnée */
  #legend {
    bottom: 90px;
    right: 8px;
    font-size: 11px;
    padding: 7px 10px;
  }
  #legend.elu-shift { right: 8px; }

  /* Barre du bas pleine largeur */
  #bottom-bar {
    width: calc(100% - 20px);
    left: 10px;
    transform: none;
    flex-wrap: wrap;
    font-size: 12px;
    bottom: 58px;
  }

  #bottom-actions {
    left: 10px;
    right: 10px;
    transform: none;
    width: calc(100% - 20px);
  }
  #bottom-actions button {
    flex: 1;
    font-size: 12px;
    padding: 6px 10px;
  }

  /* Panel élu : pleine largeur en bas sur mobile */
  #panel-elu {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 55vh;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,.15);
  }
  #panel-elu.elu-shift { right: 0; }

  /* Modales pleine largeur */
  .modal-box {
    width: 96%;
    max-width: none;
    padding: 16px 14px;
    margin: 0 auto;
    border-radius: 10px;
  }
  .risk-grid { grid-template-columns: 1fr; gap: 6px; }

  /* ── PAGE DASHBOARD ─── */

  /* Grille : passer en colonne unique */
  body:has(.panel-left) {
    grid-template-columns: 1fr !important;
    grid-template-rows: 56px 45vh auto auto;
    overflow-y: auto;
  }

  /* Header KPIs : masquer les moins importants */
  .header-kpis .hkpi:nth-child(n+4) { display: none; }
  .header-badge { display: none; }

  /* Panneau gauche horizontal scrollable */
  .panel-left {
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
    padding: 10px;
    gap: 8px;
    max-height: none;
  }
  .panel-left > div { min-width: 140px; flex: 1; }

  /* Carte */
  #map { height: 45vh; min-height: 200px; }

  /* Panneau droit */
  .panel-right {
    border-left: none;
    border-top: 1px solid var(--border);
    height: auto;
    overflow-y: visible;
  }

  /* Grilles KPI 2→2 colonnes (déjà ok) */
  .kpi-grid { grid-template-columns: 1fr 1fr; }

  /* Var buttons 2 colonnes */
  .var-grid { grid-template-columns: 1fr 1fr; }

  /* Tabs scrollables */
  .tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .tab { white-space: nowrap; flex-shrink: 0; }
}

/* ── TRÈS PETIT ÉCRAN (≤ 480px) ─────────────────────────── */
@media (max-width: 480px) {

  header { padding: 0 10px; gap: 6px; }
  .logo { font-size: 10px; letter-spacing: 1px; }
  .hkpi { padding: 0 10px; }
  .hkpi .val { font-size: 12px; }

  /* Dashboard : masquer panneau gauche par défaut, affichage carte prioritaire */
  body:has(.panel-left) {
    grid-template-rows: 56px 60vh auto auto;
  }
  #map { height: 60vh; }

  /* Citoyen : widget compact */
  #search-widget { top: 8px; }
  .sw-header { padding: 8px 10px 6px; font-size: 11px; }
  #sw-input { font-size: 12px; padding: 6px 10px; }

  /* Modales */
  .modal-box { padding: 12px 10px; }
  .modal-box h2 { font-size: 14px; }

  /* KPI dashboard : 1 colonne sur très petit */
  .kpi-grid { grid-template-columns: 1fr 1fr; }
}