/* 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; }
}

/* ---------- Usage tactile (tablette, téléphone) : l'application doit se manier comme une vraie application ---------- */
@media (pointer: coarse) {
  html, body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* pas de « tirer pour recharger » ni de rebond de la page */
  button, a, select, label, summary, .btn, .tab-btn, .chip, .card-head, th, .sidebar-item, .art-card, .cart-line, .ot-sm-btn, .ot-sm-chip, .ot-sm-stat, #otchino-statusbar {
    touch-action: manipulation; -webkit-tap-highlight-color: transparent; /* pas d'attente de double-tap, pas de halo gris */
  }
  button, .btn, .tab-btn, .chip, .card-head, th, .sidebar-item, .art-card, .ot-sm-btn, .ot-sm-chip, .ot-sm-stat, #otchino-statusbar, .header {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; /* un appui long ne sélectionne pas les menus et boutons */
  }
  input, select, textarea { font-size: max(16px, 1em); } /* iPad / iPhone : en dessous de 16 px, l'écran zoome tout seul à la saisie */
  /* Texte jamais minuscule (les tailles en « em » se cumulaient jusqu'à 8 px) */
  button, .btn, .btn-sm, .chip, .tab-btn, select, label { font-size: max(13px, 1em); }
  small, .small, .muted, .ps-hint, .badge-muted, .small-title { font-size: max(11.5px, .8em); }
  /* Cibles de 44 px : pastilles, filtres, boutons compacts, champs de recherche */
  .chip, .btn-sm, .input-sm, .vcl-q, #caisse-search, #global-search { min-height: 40px !important; }
  .chip { display: inline-flex; align-items: center; padding-left: 14px; padding-right: 14px; }
  .sidebar-item, .art-card, .cart-line, .vo-row, .cmdp-row, .cmdp-item { min-height: 44px; }
  .hv-day, #grid-articles .sidebar-item, #cal-grid button, #vcv-modes button { min-height: 40px !important; }
  [class*="vcl-"] small, .vcl-nm { font-size: max(11px, .8em) !important; }
  .vcl-av, .vcl-letter { font-size: max(11px, 1em) !important; }
  #grid-articles .sidebar-item { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .header .tab-btn { font-size: max(11.5px, .72em) !important; }
  @media (max-width: 600px) { html body .header .tab-btn { white-space: normal; line-height: 1.12; text-align: center; justify-content: center; overflow: hidden; padding-left: 2px !important; padding-right: 2px !important; min-height: 44px; } } /* onglets du téléphone : jamais plus petits que 11,5 px */
  /* Encoches / coins arrondis : rien sous l'encoche en application installée */
  .header { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-top: max(6px, env(safe-area-inset-top)); }
  main { padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }
  /* Défilement doux dans les listes et colonnes */
  .col-body, .panel-row, #ventes-panels, .modal, .tabs { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
}

/* ---------- Tablette en largeur (≤ 1180 px) : on réduit l'affichage au nécessaire ---------- */
@media (max-width: 1180px) and (pointer: coarse) {
  .global-search { display: none; }
  .header .shop-name { max-width: 14vw; }
}