/* TRAIL MASTER HUB – fusion12-8m : téléphone / tablette / APK (js/mobile-nav.js). Bureau (≥ 1024 px) inchangé. */
button, .nav-btn, .param-nav-btn, a, [role="button"], [role="tab"], label, select, summary { touch-action: manipulation; }
.pm-bar, .pm-backdrop, .pm-x { display: none; }

@media (max-width: 1023px) {
  /* --- Paramètres : la page défile normalement (plus de double barre de défilement) --- */
  #section-parametres > div:first-child { height: auto !important; min-height: 0; display: block; }
  #section-parametres #param-content { overflow: visible; padding: .5rem .25rem 1rem; background: transparent; }
  #section-parametres .pm-orig-toggle { display: none; }
  /* menu des rubriques = panneau coulissant (au-dessus de tout, même s'il a la classe hidden) */
  html body #param-sidebar { display: flex !important; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 90;
    width: min(86vw, 320px) !important; max-width: none; transform: translateX(-105%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.45);
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; }
  html body #param-sidebar.pm-open { transform: none; visibility: visible; }
  #param-sidebar > div:first-child { position: sticky; top: 0; background: #0f172a; z-index: 1; min-height: 52px; }
  #param-sidebar > div:first-child > button[onclick*="toggleParamSidebar"] { display: none; }
  #param-sidebar .pm-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: #cbd5e1; font-size: 18px; }
  #param-sidebar .pm-x:active { background: #1e293b; }
  #param-nav .param-nav-btn { min-height: 46px; font-size: 15px; padding: .6rem .8rem; }
  #param-nav .param-nav-btn:active { background: #334155; }
  #param-nav .param-nav-btn.bg-slate-700 { box-shadow: inset 3px 0 0 #818cf8; }
  .pm-backdrop { position: fixed; inset: 0; z-index: 89; background: rgba(15,23,42,.5); }
  body.pm-drawer-open .pm-backdrop { display: block; }
  body.pm-drawer-open { overflow: hidden; }
  /* barre du haut : bouton Rubriques + pastilles défilantes */
  .pm-bar { display: flex; align-items: center; gap: .4rem; position: sticky; top: var(--tmh-hdr-h, 0px); z-index: 30; margin: -.5rem -.25rem .6rem;
    padding: .45rem .4rem; background: rgba(241,245,249,.97); backdrop-filter: blur(6px); border-bottom: 1px solid #e2e8f0; }
  .pm-menu-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .8rem; border-radius: 12px;
    background: #0f172a; color: #fff; font-weight: 600; font-size: 14px; }
  .pm-menu-btn:active { transform: scale(.96); background: #1e293b; }
  .pm-chips { flex: 1 1 auto; min-width: 0; display: flex; gap: .4rem; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px; }
  .pm-chips::-webkit-scrollbar { display: none; }
  .pm-chip { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .8rem; border-radius: 999px;
    background: #fff; border: 1px solid #cbd5e1; color: #334155; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
  .pm-chip i { color: #6366f1; font-size: 13px; }
  .pm-chip.pm-on { background: #4f46e5; border-color: #4f46e5; color: #fff; box-shadow: 0 2px 8px rgba(79,70,229,.35); }
  .pm-chip.pm-on i { color: #fff; }
  .pm-chip.pm-danger { color: #b91c1c; } .pm-chip.pm-danger i { color: #dc2626; }
  .pm-chip:active { transform: scale(.96); }
  html.dark .pm-bar, body.dark .pm-bar { background: rgba(15,23,42,.95); border-color: #334155; }

  /* --- Paramètres : contenu sans débordement --- */
  #param-panels .param-accordion { max-width: 100%; }
  #param-panels input, #param-panels select, #param-panels textarea { max-width: 100%; }
  #param-panels table { max-width: 100%; }
  #param-panels .overflow-x-auto, #param-panels .table-wrap { max-width: 100%; }
  #param-panels .param-accordion-body { overflow-x: auto; }
  .param-accordion-header { min-height: 48px; }

  /* --- grilles : une colonne ne peut plus être élargie par un tableau ou un long texte --- */
  main .grid > * { min-width: 0; }
  main .card:has(> table) { overflow-x: auto; }
  /* --- Fenêtres : défilables, le haut (bouton fermer) reste atteignable --- */
  .fixed.inset-0.items-center { align-items: flex-start; align-items: safe center; overflow-y: auto; overscroll-behavior: contain; }
}

@media (max-width: 767px), (pointer: coarse) {
  /* --- cibles tactiles ≥ 44 px + état « appuyé » visible --- */
  header.app-header nav .nav-btn { min-height: 44px; display: inline-flex; align-items: center; padding-left: .8rem; padding-right: .8rem; font-size: 13px; }
  #header-menu-btn { min-height: 40px; min-width: 44px; }
  #header-menu .am-item { min-height: 46px; }
  .nav-btn:active, .param-nav-btn:active, .btn-primary:active, .btn-secondary:active, .btn-danger:active, .am-item:active, .pm-chip:active { filter: brightness(.9); transform: scale(.97); }
  .nav-btn, .btn-primary, .btn-secondary, .btn-danger, .pm-chip { transition: transform .08s ease, filter .08s ease; }
}
@media (max-width: 767px) {
  html, body { overflow-x: clip; }
  main img, main canvas, main video { max-width: 100%; }
  main .flex.flex-wrap > .flex:not(.flex-nowrap) { flex-wrap: wrap; }
}