/* ============================================================
   Escrime Stuff — adaptation téléphone et tablette
   S'ajoute à styles.css sans le modifier (chargé juste après).
   ============================================================ */
@media (max-width: 900px){
  html, body { overflow-x: hidden; height: auto !important; }

  /* Barre du haut : les informations passent sur plusieurs lignes */
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; height: auto; }
  .topbar .who { flex-wrap: wrap; gap: 6px; font-size: 12px; width: 100%; }
  .topbar .who > span:first-child { flex-basis: 100%; }

  /* Tout s'empile : la colonne de gauche, puis la fiche, sans aucune hauteur imposée */
  #app-screen, .app-body { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; }
  .sidebar { display: block !important; width: 100% !important; max-width: none !important; position: static !important;
             height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important;
             border-right: none !important; border-bottom: 1px solid var(--line, #e5e7eb); padding-bottom: 8px; }
  .sidebar-head { display: block !important; position: static !important; height: auto !important; max-height: none !important; }
  .search-box, #members-saison-wrap { position: static !important; }
  .main { display: block !important; position: static !important; height: auto !important; max-height: none !important;
          overflow: visible !important; padding: 14px 12px 40px !important; margin: 0 !important; }

  /* La liste (adhérents, équipements) : défile à l'intérieur de son cadre */
  .eq-list { display: block !important; flex: none !important; height: auto !important; min-height: 0 !important;
             max-height: 45vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  /* Onglets sans liste (simple phrase d'explication) : on masque la phrase pour gagner de la place */
  .eq-list:has(> .empty-list:only-child) { display: none !important; }

  /* Onglets : sur plusieurs lignes, toutes les rubriques sont visibles */
  .tab-switch { display: flex !important; flex-wrap: wrap !important; gap: 4px; width: 100% !important; max-width: 100% !important; overflow: visible !important; }
  .tab-btn { flex: 0 0 auto; white-space: nowrap; padding: 8px 10px !important; }

  /* Formulaires sur une colonne, tableaux qui défilent sur le côté */
  .grid-fields { grid-template-columns: 1fr !important; max-width: 100% !important; }
  .grid-fields .cell { grid-column: auto !important; }
  table.controls { display: block; overflow-x: auto; max-width: 100% !important; }
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .detail-head { flex-wrap: wrap; gap: 8px; }
  .actions-row, .quick-actions, .head-actions { flex-wrap: wrap; gap: 6px; }
  .bar-label { min-width: 0 !important; width: 40% !important; }

  /* Pour le doigt : boutons et cases plus grands ; 16 px évite le zoom automatique de l'iPhone */
  input, select, textarea { font-size: 16px !important; }
  .btn-ghost, .add-row-btn, .btn-primary, .btn-new, .tab-btn { min-height: 40px; }
  input[type="checkbox"] { width: 20px; height: 20px; }

  /* Écran de connexion et formulaire d'inscription */
  #login-screen { padding: 12px; }
  .login-card { padding: 22px 18px !important; }
}

@media (max-width: 480px){
  .stat-card .num { font-size: 20px !important; }
  .detail-head h2 { font-size: 20px; }
}

/* Appli installée (plein écran) : place pour l'encoche des téléphones */
@media (display-mode: standalone){
  .topbar { padding-top: max(10px, env(safe-area-inset-top)); }
}