/* ============================================================
   responsive.css — Ars Salva PSBC
   Correctifs responsive globaux · mobile-first
   Chargé dans base.html après le <style> embarqué
   ============================================================ */


/* ── 1. Anti débordement horizontal ──────────────────────────
   Filet de sécurité global contre le scroll horizontal parasite.
   Remarque : overflow-x:hidden sur body peut désactiver
   position:sticky sur l'axe vertical dans certains navigateurs.
   Inoffensif ici : le topbar est sticky top:0 (axe vertical)
   et l'overflow masqué est horizontal seulement.
   ────────────────────────────────────────────────────────── */
html { overflow-x: hidden; }
body { overflow-x: hidden; }


/* ── 2. Images responsives ───────────────────────────────────
   Cause fréquente de débordement quand une image est plus large
   que son conteneur (ex: photos d'œuvres, logos d'établissement).
   ────────────────────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}


/* ── 3. Tables dans .main-content (mobile uniquement) ────────
   Scroll horizontal ciblé sur les pages qui étendent base.html
   (.main-content). N'affecte pas les pages /admin standalone.
   Desktop : comportement natif inchangé (display:table conservé).
   ────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .main-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* défilement fluide iOS */
  }
}

/* Classe utilitaire réutilisable dans les templates enfants
   (équivalent .table-responsive Bootstrap, sans dépendance).
   Usage : <div class="table-scroll-x"><table>…</table></div>  */
.table-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}


/* ── 4. Tap targets mobiles (44 px minimum) ──────────────────
   Apple HIG & WCAG 2.5.5 : zone tactile ≥ 44 × 44 px.
   Appliqué UNIQUEMENT sous 768 px ; desktop identique.
   ────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* Boutons et liens d'action de la topbar */
  .btn-logout,
  .mode-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Liens de navigation */
  .nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Champs de formulaire :
     - min-height 44px pour la zone tactile
     - font-size 16px empêche le zoom automatique iOS au focus    */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }
}


/* ── 5. Grille maison et composants divers ───────────────────
   Règles conservées de l'ancienne version, inoffensives.
   ────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* Grille CSS custom → colonne unique */
  .grid         { grid-template-columns: 1fr !important; }
  .checkbox-group { grid-template-columns: 1fr !important; }

  /* En-têtes flexbox → repli vertical */
  .header { flex-wrap: wrap; }
}