/* =====================================================
   MAP — responsive.css
   Breakpoints : 768px (tablette) et 480px (mobile)
   ===================================================== */

/* === TABLETTE === */
@media (max-width: 768px) {

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay.open {
    display: block;
  }

  .main-content {
    margin-left: 0;
  }

  .hamburger {
    display: block;
  }

  /* Le bouton de réduction desktop du menu n'a pas sa place sur le menu hors-écran mobile,
     déjà géré par le hamburger + l'overlay */
  .sidebar-toggle {
    display: none;
  }

  .user-name {
    display: none;
  }

  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

  .form-row { grid-template-columns: 1fr; }
}

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

  .page-content { padding: 1rem; }

  .top-header { padding: 0 1rem; }

  .page-title { font-size: 0.9rem; }

  .grid-5,
  .grid-4,
  .grid-3,
  .grid-2 { grid-template-columns: 1fr; }

  .content-header { flex-direction: column; align-items: flex-start; }

  table { font-size: 0.8rem; }

  thead th { padding: 0.5rem 0.75rem; }

  tbody td { padding: 0.5rem 0.75rem; }

  .login-card { padding: 1.75rem 1.25rem; margin: 1rem; }

  .setup-card { padding: 1.75rem 1.25rem; margin: 1rem; }

  /* Liste clients : colonnes secondaires masquées, seul le nom reste visible */
  .col-type,
  .col-contacts,
  .col-adresses,
  .col-enfants,
  .col-agrements,
  .col-actions { display: none; }
}