/**
 * Menu latéral mobile (#navbarNav) — thème clair, mise en page structurée.
 * Le panneau reste dans le header (pattern Cartzilla offcanvas-lg), sans déplacement DOM.
 */
@media (max-width: 991.98px) {
  #navbarNav.offcanvas:not(.show):not(.showing) {
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-100%) !important;
  }

  #navbarNav.offcanvas.show,
  #navbarNav.offcanvas.showing {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    max-height: 100dvh !important;
    width: min(18.5rem, 86vw) !important;
    z-index: 1100 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    color: #181d25 !important;
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.12) !important;
    --cz-body-bg: #ffffff !important;
    --cz-body-bg-rgb: 255, 255, 255 !important;
    --cz-body-color: #4e5562 !important;
    --cz-offcanvas-bg: #ffffff !important;
    --cz-offcanvas-color: #181d25 !important;
    --cz-nav-link-color: #333d4c !important;
    --cz-nav-link-hover-color: #181d25 !important;
    --cz-border-color: #e8ecf0 !important;
  }

  body:has(#navbarNav.show) .offcanvas-backdrop,
  body:has(#navbarNav.showing) .offcanvas-backdrop {
    z-index: 1095 !important;
  }

  /* En-tête du tiroir */
  #navbarNav .offcanvas-header {
    display: flex !important;
    flex-shrink: 0 !important;
    padding: 1rem 1.15rem !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e8ecf0 !important;
  }

  #navbarNav .offcanvas-title {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #181d25 !important;
    margin: 0 !important;
  }

  #navbarNav .btn-close {
    filter: none !important;
    opacity: 0.5 !important;
  }

  /* Corps scrollable */
  #navbarNav .offcanvas-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #ffffff !important;
  }

  #navbarNav .site-header-container.site-header-nav-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  #navbarNav .site-header-nav-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  #navbarNav .site-header-nav-left {
    width: 100% !important;
  }

  #navbarNav .site-header-nav-left > .navbar-nav {
    width: 100% !important;
  }

  /* Bloc catégories */
  #navbarNav .site-categories-toggle-mobile {
    width: 100% !important;
    margin: 0 !important;
    padding: 0.8rem 1.15rem !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #181d25 !important;
    border: 0 !important;
    border-bottom: 1px solid #e8ecf0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #navbarNav .site-categories-chevron {
    transition: transform 0.2s ease;
  }

  #navbarNav .site-categories-toggle-mobile.is-open .site-categories-chevron {
    transform: rotate(180deg);
  }

  #navbarNav .site-categories-mobile-panel {
    border-bottom: 1px solid #e8ecf0;
  }

  #navbarNav .site-categories-mobile-list {
    max-height: 50vh;
    overflow-y: auto;
    padding: 0.35rem 0 0.65rem 0.5rem;
  }

  #navbarNav .site-categories-mobile-group {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e8ecf0;
  }

  #navbarNav .site-categories-mobile-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  #navbarNav .site-categories-mobile-cat {
    display: block;
    padding: 0.25rem 0.65rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #181d25 !important;
    text-decoration: none;
  }

  #navbarNav .site-categories-mobile-sub {
    font-size: 0.84rem !important;
    padding: 0.35rem 0.65rem 0.35rem 1rem !important;
    color: #4e5562 !important;
  }

  /* Liens principaux */
  #navbarNav .site-header-nav-links {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.25rem 0 !important;
    border-bottom: 1px solid #e8ecf0;
  }

  #navbarNav .site-header-nav-links .nav-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #navbarNav .site-header-nav-links .nav-link {
    display: block !important;
    width: 100% !important;
    padding: 0.75rem 1.15rem !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #181d25 !important;
    border-radius: 0 !important;
  }

  #navbarNav .site-header-nav-links .nav-link.active {
    color: #f55266 !important;
    background: #fef0f2;
  }

  /* Téléphone */
  #navbarNav .site-header-phone {
    margin: 0 !important;
    padding: 0.85rem 1.15rem !important;
    font-size: 0.92rem !important;
    color: #181d25 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #e8ecf0 !important;
  }

  #navbarNav .site-header-phone span {
    color: #181d25 !important;
  }

  /* Compte / favoris / déconnexion */
  #navbarNav .mobile-nav-account {
    margin: 0 !important;
    padding: 0.35rem 0 0.85rem !important;
    border-top: 0 !important;
  }

  #navbarNav .mobile-nav-account .nav-link,
  #navbarNav .mobile-nav-account button.nav-link {
    padding: 0.65rem 1.15rem !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    color: #181d25 !important;
    white-space: nowrap;
  }

  #navbarNav .mobile-nav-account button.nav-link {
    cursor: pointer;
  }

  #navbarNav .mobile-nav-account .nav-link i,
  #navbarNav .mobile-nav-account button.nav-link i {
    opacity: 0.55;
    width: 1.35rem;
    text-align: center;
  }
}