/* =====================================================================
 *  AEIES ViZé — Responsive Mobile (Android)
 *  Cabinet ViZé Consulting — VISION ZERO SARLU
 * ===================================================================== */

/* ── MOBILE : écrans < 768px ── */
@media (max-width: 767px) {

  /* Sidebar : cachée par défaut, glisse depuis la gauche */
  aside {
    position: fixed !important;
    left: -260px !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 1000 !important;
    width: 240px !important;
    transition: left 0.3s ease !important;
    box-shadow: none !important;
  }

  aside.mobile-open {
    left: 0 !important;
    box-shadow: 6px 0 24px rgba(0,0,0,0.4) !important;
  }

  /* Overlay sombre derrière la sidebar ouverte */
  #mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 999;
    cursor: pointer;
  }

  /* Bouton hamburger ☰ */
  #mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #1F3864;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 8px;
    -webkit-tap-highlight-color: transparent;
  }

  /* Header : réduire le padding gauche */
  header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Zone principale : prend toute la largeur */
  .flex.h-screen.overflow-hidden > div:last-child {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Titres principaux */
  h1.text-2xl, .text-2xl { font-size: 1.15rem !important; }
  h1.text-xl,  .text-xl  { font-size: 1.05rem !important; }

  /* Grilles : 1 colonne sur mobile */
  .grid.grid-cols-2,
  .grid.md\:grid-cols-2,
  .grid.grid-cols-3,
  .grid.md\:grid-cols-3,
  .grid.grid-cols-4,
  .grid.md\:grid-cols-4,
  .grid.grid-cols-5,
  .grid.md\:grid-cols-5 {
    grid-template-columns: 1fr !important;
  }

  /* Tableaux : scroll horizontal */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto !important;
  }

  /* Padding des pages */
  main.p-6 { padding: 12px !important; }
  main { padding: 12px !important; }

  /* Cartes */
  .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl {
    max-width: 100% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Boutons plus grands pour le tactile */
  button.px-4 { padding-left: 14px !important; padding-right: 14px !important; }
  button.py-2 { padding-top: 10px !important; padding-bottom: 10px !important; }

  /* Champs de saisie : éviter le zoom iOS/Android */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Stepper horizontal : scroll tactile */
  .min-w-max { min-width: max-content; }

  /* Section cards sur mobile */
  .bg-white.rounded-xl.card-shadow.p-5,
  .bg-white.rounded-xl.card-shadow.p-6 {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  /* Bouton déconnexion plus visible */
  #sb-signout-btn {
    bottom: 20px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* Bannière PWA */
  #pwa-banner {
    bottom: 12px !important;
    left: 8px !important;
    right: 8px !important;
  }
}

/* ── DESKTOP : masquer les éléments mobile ── */
@media (min-width: 768px) {
  #mobile-menu-btn  { display: none !important; }
  #mobile-overlay   { display: none !important; }
}