/* ===========================================================
   Asia4All — Menu mobile (hamburger + panneau catégories)
   À inclure sur toutes les pages publiques.
   Styles activés uniquement en dessous de 768px.
   =========================================================== */

.mobile-menu-btn,
.mobile-menu,
.mobile-menu-overlay { display:none; }

@media (max-width: 768px) {

  .nav-links { display:none !important; }

  /* Bouton hamburger dans le nav */
  .mobile-menu-btn {
    display:inline-flex !important;
    width:38px; height:38px;
    align-items:center; justify-content:center;
    flex-direction:column;
    gap:5px;
    background:#f2f2f2;
    border:1px solid rgba(0,0,0,.08);
    cursor:pointer;
    z-index:1002;
    margin-right:.55rem;
    flex-shrink:0;
  }
  .mobile-menu-btn span {
    display:block; width:18px; height:2px;
    background:#0a0a0a; border-radius:10px;
  }

  /* Overlay sombre */
  .mobile-menu-overlay {
    display:block;
    position:fixed; inset:0;
    background:rgba(0,0,0,.45);
    opacity:0; pointer-events:none;
    transition:opacity .3s ease;
    z-index:998;
  }
  .mobile-menu-overlay.active { opacity:1; pointer-events:all; }

  /* Panneau coulissant à droite */
  .mobile-menu {
    display:flex;
    position:fixed; top:0; right:0;
    width:min(86vw, 360px); height:100svh;
    background:#ffffff;
    z-index:999;
    transform:translateX(100%);
    transition:transform .42s cubic-bezier(.23,1,.32,1);
    flex-direction:column;
    box-shadow:-20px 0 60px rgba(0,0,0,.18);
  }
  .mobile-menu.active { transform:translateX(0); }

  .mobile-menu-head {
    height:72px; padding:0 1.25rem;
    border-bottom:1px solid rgba(0,0,0,.08);
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0;
  }
  .mobile-menu-head span {
    font-size:10px; letter-spacing:.32em; text-transform:uppercase;
    color:#0a0a0a;
  }
  .mobile-menu-close {
    width:34px; height:34px;
    border:1px solid rgba(0,0,0,.12);
    background:#ffffff; color:#0a0a0a;
    font-size:24px; line-height:1;
    cursor:pointer;
  }

  .mobile-menu-content {
    padding:1.25rem;
    overflow-y:auto;
  }

  .mobile-main-link,
  .mobile-accordion {
    width:100%; min-height:52px;
    display:flex; align-items:center; justify-content:space-between;
    border:none; border-bottom:1px solid rgba(0,0,0,.08);
    background:transparent; color:#0a0a0a;
    text-decoration:none;
    font-size:11px; letter-spacing:.24em; text-transform:uppercase;
    font-family:'DM Sans', system-ui, sans-serif;
    cursor:pointer;
  }
  .mobile-accordion span {
    font-size:18px; line-height:1;
    transition:transform .25s ease;
  }
  .mobile-menu-group.open .mobile-accordion span {
    transform:rotate(45deg);
  }

  .mobile-submenu {
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .35s ease;
    border-bottom:1px solid rgba(0,0,0,.08);
  }
  .mobile-submenu > * { overflow:hidden; }
  .mobile-menu-group.open .mobile-submenu {
    grid-template-rows:1fr;
  }
  .mobile-submenu a {
    display:block;
    padding:.85rem 0 .85rem 1rem;
    color:rgba(0,0,0,.62);
    text-decoration:none;
    font-size:10px; letter-spacing:.16em; text-transform:uppercase;
    border-bottom:1px solid rgba(0,0,0,.045);
  }
  .mobile-submenu a:last-child { border-bottom:none; }

  .mobile-order-btn {
    margin-top:1.5rem;
    width:100%; height:46px;
    display:inline-flex; align-items:center; justify-content:center;
    background:#0a0a0a; color:#ffffff;
    text-decoration:none;
    font-size:9px; letter-spacing:.24em; text-transform:uppercase;
  }

  body.mobile-menu-open { overflow:hidden !important; }
}