/* =========================
   HABYS - RESPONSIVE (phone/tablette)
   ========================= */

html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }

:root {
  --safe-pad: 12px;
}

/* Empêche les débordements horizontaux qui "cassent" l'écran */
body {
  overflow-x: hidden;
}

/* Tables : rend toute table scrollable si elle dépasse */
.table-scroll,
.alert-table-container,
.alert-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Empêche les champs/select trop larges */
input, select, textarea, button {
  max-width: 100%;
}

/* =========================
   TABLETTE + MOBILE
   ========================= */
@media (max-width: 1024px) {

  /* Grilles -> 1 colonne (si elles existent) */
  .stats-grid { grid-template-columns: 1fr !important; }

  /* Blocs en ligne -> empilement */
  .section-row {
    flex-direction: column !important;
  }

  .communes-grid .ville-card {
    flex: 1 1 100% !important;
  }

  /* Main padding plus petit */
  .main {
    padding: 14px var(--safe-pad) !important;
  }
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 900px) {

  body {
    flex-direction: column !important;
    min-height: 100vh;
  }

  /* Sidebar devient barre en haut */
  .sidebar {
    width: 100% !important;
    padding: 14px var(--safe-pad) !important;
    gap: 14px !important;
  }

  .sidebar-nav {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }

  .sidebar-nav li a {
    padding: 8px 10px !important;
    font-size: 0.9rem !important;
  }

  .icon-img {
    width: 30px !important;
    height: 30px !important;
  }

  .building-img {
    width: 90px !important;
    height: 90px !important;
  }

  .letter { font-size: 52px !important; }

  .main-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .user-pill {
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Filtres -> 1 par ligne */
  .filters label { width: 100% !important; }
  .filters select,
  .filters input {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Cartes */
  .card { padding: 14px !important; }
}

/* Très petits téléphones */
@media (max-width: 420px) {
  .letter { font-size: 44px !important; }
  .card-metric { font-size: 1.35rem !important; }
}