/* Responsive (session H) : téléphone ≤ 600, tablette ≤ 900/1024, ordinateur au-delà (inchangé).
   Chargé APRÈS style.css. N'agit que sous les seuils ci-dessous : l'affichage ordinateur n'est pas touché. */

/* Jamais de défilement horizontal de la page */
html { overflow-x: hidden; }
body { max-width: 100%; }
main { min-width: 0; }
img, video, canvas { max-width: 100%; }

/* ---------- Écran Ventes : colonnes en onglets (≤ 900 px) ---------- */
#vcol-tabs { display: none; }
@media (max-width: 900px) {
  #vcol-tabs { flex: none; display: flex; gap: 6px; padding: 4px 2px 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #vcol-tabs::-webkit-scrollbar { display: none; }
  #vcol-tabs button { flex: 1 0 auto; min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-weight: 700; font-size: .78em; white-space: nowrap; }
  #vcol-tabs button.on { background: var(--accent); color: var(--accent-fg, #fff); border-color: transparent; }

  #ventes-panels.vtabs-on { flex-direction: column !important; flex-wrap: nowrap !important; overflow: hidden !important; }
  #ventes-panels.vtabs-on > .resize-handle { display: none !important; }
  /* Une seule colonne affichée. La colonne active garde son propre display : une colonne
     masquée par la personnalisation (display:none en ligne) n'est jamais réaffichée. */
  #ventes-panels.vtabs-on > .ventes-col:not(.vtab-active) { display: none !important; }
  #ventes-panels.vtabs-on > .ventes-col { width: 100% !important; max-height: none !important; min-height: 0 !important; flex: 1 1 0 !important; }
}

/* ---------- Mise en page générale ≤ 900 px ---------- */
@media (max-width: 900px) {
  .header { gap: 6px; }
  .global-search { display: none; }
  .tabs { justify-content: flex-start; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  main { padding: 6px; }
  .modal { max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  table { max-width: 100%; }
}

/* ---------- Cibles tactiles ≥ 44 px (écran étroit ou tactile) ---------- */
@media (max-width: 900px), (pointer: coarse) {
  .btn, .btn-sm, .tab-btn, .qty-btn, .btn-outline, .btn-primary, #btn-login, .tabs button,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select { min-height: 44px; }
  .btn, .btn-sm, .btn-outline, .btn-primary { min-width: 44px; }
  .qty-btn { min-width: 44px; }
  .tab-btn { padding-left: 10px; padding-right: 10px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  #user-badge { width: 44px !important; height: 44px !important; }
  .stock-card, .sidebar-item, .art-card, .cart-line { min-height: 44px; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 600px) {
  :root { --font-base: 16px; }
  .header { padding: 4px 6px; }
  #login-screen > div { width: calc(100vw - 24px) !important; max-width: 340px; padding: 22px !important; }
  /* les écrans à plusieurs colonnes (Stock, Commandes, Historique…) défilent verticalement */
  .panel-row { overflow-y: auto !important; overflow-x: hidden !important; }
  .panel-row > .card { max-height: none !important; min-height: 220px; }
}

/* ---------- Super-admin (public/superadmin) ≤ 700 px : navigation en barre d'onglets, colonnes empilées ---------- */
@media (max-width: 700px) {
  .app-body { flex-direction: column; }
  .app-body > .sidebar { display: flex !important; flex-direction: row; width: 100%; flex: none; border-right: 0; border-bottom: 1px solid var(--border); }
  .app-body > .sidebar .sidebar-head, .app-body > .sidebar .sidebar-footer { display: none; }
  .app-body > .sidebar .nav-item { flex: 1; justify-content: center; width: auto; min-height: 44px; border-bottom: 3px solid transparent; border-left: 0; padding: 8px 10px; }
  .app-body > .sidebar .nav-item.active { border-bottom-color: var(--accent); border-left: 0; padding-left: 10px; }
  .page.active { padding: 10px; }
  .page.active table { display: block; max-width: 100%; overflow-x: auto; }
  .boutique-split { flex-direction: column; overflow-y: auto; }
  .blist-col { width: 100%; max-height: 45vh; border-right: 0; border-bottom: 1px solid var(--border); flex: none; }
  .bdetail-col { flex: none; overflow: visible; }
  .bdetail-inner { flex-direction: column; overflow: visible; }
  .bdet-id { width: 100%; border-right: 0; border-bottom: 1px solid var(--border); }
  .bdet-users { min-width: 0; border-right: 0; overflow: visible; }
  .nav-item, .user-menu-item, .btn-close { min-height: 44px; }
}

/* ---------- Catalogue public : barre « mode édition » (administrateur connecté) sur petit écran ---------- */
@media (max-width: 640px) {
  #edit-bar { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  #edit-bar > * { flex: none; }
  #edit-bar::-webkit-scrollbar { display: none; }
}