/**
 * Mobile shell écosystème Vallon — v1.2.0
 * Sidebar + burger, tables, safe-area, eco-bar, inputs 16px,
 * modales clavier, touch targets, formulaires visibles.
 */
@media (max-width: 900px) {
  html,
  body {
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* Empêche le zoom involontaire + respect safe-area */
  body {
    -webkit-text-size-adjust: 100%;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  /* Espace pour barre eco fixe */
  body.vallon-has-eco-bar,
  body.vallon-eco-bar-on {
    padding-top: var(--vallon-eco-bar-h, 52px);
  }

  /* Burger auto (injecté par mobile-nav-shell.js) */
  .vallon-mobile-nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 450;
    left: max(10px, env(safe-area-inset-left, 0px));
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(145deg, #d62828, #9b1c1c);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    line-height: 1;
  }
  .vallon-mobile-nav-toggle:active {
    transform: scale(0.96);
  }

  .vallon-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 405;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
  }
  body.nav-open .vallon-nav-backdrop,
  html.nav-open .vallon-nav-backdrop {
    display: block;
  }

  /* Sidebars communes */
  .side,
  aside.side,
  .sidebar,
  .vp-sidebar,
  .side-nav,
  .shell-side,
  nav.side {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 420;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    width: min(280px, 86vw) !important;
    max-width: 86vw !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
  }
  body.vallon-has-eco-bar .side,
  body.vallon-has-eco-bar aside.side,
  body.vallon-has-eco-bar .sidebar,
  body.vallon-has-eco-bar .vp-sidebar,
  body.vallon-has-eco-bar .side-nav {
    top: var(--vallon-eco-bar-h, 52px);
  }

  body.nav-open .side,
  body.nav-open aside.side,
  body.nav-open .sidebar,
  body.nav-open .vp-sidebar,
  body.nav-open .side-nav,
  body.nav-open .shell-side,
  body.nav-open nav.side,
  html.nav-open .side,
  html.nav-open .side-nav {
    transform: translateX(0) !important;
  }

  .main,
  main.main,
  .vp-workspace,
  .shell-main,
  .content,
  #content,
  .app-main {
    padding: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    min-width: 0 !important;
  }

  .brand,
  .shell-header,
  .vc-nav,
  .vp-topbar,
  header.top,
  .topbar {
    flex-wrap: wrap !important;
    gap: 8px;
  }

  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .btn,
  button.btn,
  button[type="submit"] {
    min-height: 42px;
  }

  /* Anti-zoom iOS sur focus champs */
  input,
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100%;
  }

  /* Grilles / cartes */
  .kpi-grid,
  .card-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .form-row,
  .dashboard-layout {
    grid-template-columns: 1fr !important;
  }

  /* Mail 3 colonnes → pile */
  .main-grid,
  .mail-layout,
  .settings-grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .main-grid .col-resizer {
    display: none !important;
  }
  .col-folders,
  .col-list,
  .col-read,
  .mail-folders,
  .mail-list,
  .mail-read {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40vh;
  }

  /* Modales — au-dessus eco-bar, pleine largeur, scroll + clavier */
  .modal,
  .modal-box,
  .dialog,
  .fs-overlay,
  .commercial-modal-bg,
  .wp-media-picker-overlay {
    max-width: 100vw;
    z-index: 9500 !important;
  }
  .modal:not([hidden]),
  .modal-box:not([hidden]),
  .dialog.open,
  .commercial-modal-bg[style*="flex"],
  .commercial-modal-bg[style*="block"] {
    align-items: flex-end !important;
    padding: 0 !important;
    padding-bottom: max(0px, var(--kb-inset, 0px)) !important;
  }
  .modal .panel,
  .modal .panel-lg,
  .modal-box,
  .commercial-modal,
  .dialog-panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - var(--kb-inset, 0px) - 8px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px 16px 0 0 !important;
  }

  /* Touch targets */
  a.btn,
  button,
  .btn,
  .nav-item,
  .vallon-catalog-tile {
    min-height: 42px;
    touch-action: manipulation;
  }

  /* Sticky actions bas d’écran */
  .sticky-mobile-cta,
  .park-floater {
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 800 !important;
  }

  /* Safe area bas (home indicator) */
  .shell-main,
  .main,
  .studio-main,
  .portail-section {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Topbars apps collab */
  .topbar,
  .vs-nav,
  header.top {
    flex-wrap: wrap;
    gap: 8px;
    height: auto !important;
    min-height: 48px;
  }
}

/* Burger masqué sur grand écran */
@media (min-width: 901px) {
  .vallon-mobile-nav-toggle,
  .vallon-nav-backdrop {
    display: none !important;
  }
}