/**
 * MENU-MOBILE.CSS - NOVA IP CAMERA THEME
 * Drawer mobile + Burger + Navigation multi-niveaux
 */

/* ==========================================
   TABLE DES MATIÈRES
   ========================================== */
/*
1. BURGER MENU MOBILE (Animation → X)
2. DRAWER MOBILE - OVERLAY & STRUCTURE
3. HEADER DRAWER (Titre + Navigation)
4. MENU DANS LE DRAWER - FORCER AFFICHAGE
5. STRUCTURE MOBILE - SYSTÈME SLIDES
6. STRUCTURE MOBILE - SOUS-MENUS
7. ITEMS DE SOUS-MENUS - STYLE BOULANGER
*/

/* ==========================================
   RÈGLE GLOBALE - CACHER DESKTOP EN MOBILE
   ========================================== */

@media (max-width: 991px) {
  .mx-desktop-only {
    display: none !important;
  }
}

/* ==========================================
   1. BURGER MENU MOBILE (Animation → X)
   ========================================== */

/* Visible uniquement en mobile */
@media (min-width: 992px) {
  .mx-burger-menu {
    display: none !important;
  }
}

/* Cacher TOUS les éléments mobile en desktop */
@media (min-width: 992px) {
  .mx-mobile-toggle-root,
  .mx-burger-menu,
  .mx-mobile-menu-overlay,
  .mx-mobile-submenu {
    display: none !important;
  }
}

.mx-burger-menu {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.mx-burger-menu:hover {
  opacity: 0.7;
}

/* Icon dans burger menu */
.mx-burger-menu .mx-burger-icon {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 24px;
}

.mx-burger-menu .mx-burger-line {
  display: block;
  height: 2px;
  background: #1f2937;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.mx-burger-menu .mx-burger-line:first-child {
  width: 24px;
}

.mx-burger-menu .mx-burger-line:last-child {
  width: 18px;
  align-self: flex-end;
}

.mx-burger-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--mx-gray-900);
}

/* Animation : burger → X au clic */
.mx-burger-menu[aria-expanded="true"] .mx-burger-line:first-child {
  transform: translateY(3px) rotate(45deg);
  width: 24px;
}

.mx-burger-menu[aria-expanded="true"] .mx-burger-line:last-child {
  transform: translateY(-3px) rotate(-45deg);
  width: 24px;
  align-self: center;
}

/* ==========================================
   2. DRAWER MOBILE - OVERLAY & STRUCTURE
   ========================================== */

/* Overlay fond noir */
.mx-mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  display: none;
}

.mx-mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Drawer slide depuis la gauche */
.mx-mobile-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  background: white;
  transition: left 0.4s ease;
  overflow-y: auto;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
  z-index: 10000;
}

/* Tablette - 2/3 de l'écran */
@media (min-width: 768px) and (max-width: 991px) {
  .mx-mobile-menu {
    width: 66vw;
    max-width: 66vw;
  }
}

.mx-mobile-menu-overlay.active .mx-mobile-menu {
  left: 0;
}

.mx-mobile-menu-close:hover {
  background: var(--mx-gray-100);
}

/* Contenu du drawer */
.mx-mobile-menu-content {
  padding: var(--space-16) var(--space-6) var(--space-6);
}

/* Afficher en mobile uniquement */
@media (max-width: 991px) {
  .mx-mobile-menu-overlay {
    display: block;
  }
}

/* ==========================================
   3. HEADER DRAWER (Titre + Navigation)
   ========================================== */

.mx-mobile-menu-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: #000;
  border-bottom: 1px solid var(--border-color);
  z-index: 10;
}

.mx-mobile-menu-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: #fff;
  flex: 1;
  text-align: left;
}

.mx-mobile-menu-back {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-md);
  margin-right: var(--space-2);
}

/* Bouton close menu mobile - Styles complets */
.mx-mobile-menu-header .mx-header-mobile-close {
  /* Styles de base du bouton */
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: #000;
  transition: all var(--transition-fast);
  
  /* Positionnement */
  position: absolute;
  top: 50%;
  right: var(--space-4);
  transform: translateY(-50%);
}

.mx-mobile-menu-header .mx-header-mobile-close:hover {
  background: var(--mx-gray-100);
  color: var(--mx-gray-900);
}

.mx-mobile-menu-close {
  width: 44px;
  height: 44px;
}

/* ==========================================
   4. MENU DANS LE DRAWER - FORCER AFFICHAGE
   ========================================== */

/* Override du .hidden-sm-down uniquement dans le drawer */
.mx-mobile-menu-content #_desktop_top_menu {
  display: block !important;
}

/* Masquer les éléments desktop inutiles */
.mx-mobile-menu-content .mx-mega-menu-dropdown,
.mx-mobile-menu-content .mx-burger-icon {
  display: none;
}

/* Liste verticale simple */
.mx-mobile-menu-content .top-menu {
  flex-direction: column;
  gap: 0;
}

.mx-mobile-menu-content .top-menu > li {
  width: 100%;
  border-bottom: 1px solid var(--border-color);
}

.mx-mobile-menu-content .top-menu > li > a {
  display: block;
  padding: var(--space-4);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
}

/* ==========================================
   5. STRUCTURE MOBILE - SYSTÈME SLIDES
   ========================================== */

/* Cacher le mega menu desktop dans le drawer mobile */
.mx-mobile-menu-content .mx-mega-menu-layout-sidebar {
  display: none !important;
}

/* Cacher l'icône burger desktop */
.mx-mobile-menu-content .mx-burger-icon {
  display: none !important;
}

/* Garder la structure mega menu dropdown mais en static */
.mx-mobile-menu-content .mx-mega-menu-dropdown {
  display: block !important;
  position: static !important;
}

@media (max-width: 991px) {
  
  /* Items racine = flexbox pour lien + chevron */
  .mx-mobile-menu-content #top-menu > li {
    display: flex !important;
    align-items: center;
    /* border-bottom: 1px solid var(--mx-gray-200); */
  }

  /* Lien prend toute la largeur */
  .mx-mobile-menu-content #top-menu > li > a.dropdown-item {
    flex: 1;
    padding: var(--space-4);
    color: var(--mx-gray-900);
    text-decoration: none;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
  }

  #header .mx-mobile-menu-content #top-menu > li > a.dropdown-item:hover {
    color: var(--mx-orange-500);
  }

  /* Bouton chevron racine */
  .mx-mobile-toggle-root {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--mx-gray-700);
    cursor: pointer;
  }
}

/* ==========================================
   6. STRUCTURE MOBILE - SOUS-MENUS
   ========================================== */

/* ✅ CRITIQUE : Reset nav en block (override theme.css inline-block) */
#header nav#mx-main-menu {
  display: block !important;
}

/* Structure des sous-menus - cachés par défaut */
.mx-mobile-submenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Sous-menu actif = visible */
.mx-mobile-submenu.active {
  display: block;
  width: 100%;
}

/* ✅ CRITIQUE : Forcer width 100% sans toucher au display */
#header .menu .mx-mobile-submenu {
  width: 100% !important;
}

#header .menu .mx-mobile-submenu > li {
  width: 100% !important;
  /* PAS de display ici ! On garde flex/block selon les règles existantes */
}

/* ===== DEPTH 1 ACTIF ===== */
/* Cacher TOUS les items racine */
#top-menu:has(.mx-mobile-submenu.active[data-depth="1"]) > li {
  display: none !important;
}

/* SAUF celui qui contient le submenu actif */
#top-menu > li:has(.mx-mobile-submenu.active[data-depth="1"]) {
  display: block !important;
}

/* Cacher le lien et chevron du LI parent */
#top-menu > li:has(.mx-mobile-submenu.active) > a.dropdown-item,
#top-menu > li:has(.mx-mobile-submenu.active) > .mx-mobile-toggle-root {
  display: none;
}

/* ===== DEPTH 2 ACTIF ===== */
/* Cacher les siblings du depth 1 */
.mx-mobile-submenu[data-depth="1"]:has(.mx-mobile-submenu.active[data-depth="2"]) > li:not(:has(.mx-mobile-submenu.active)) {
  display: none;
}

/* Cacher le lien et chevron du LI qui contient depth 2 actif */
.mx-mobile-submenu[data-depth="1"] > li:has(.mx-mobile-submenu.active[data-depth="2"]) > .mx-mobile-menu-link,
.mx-mobile-submenu[data-depth="1"] > li:has(.mx-mobile-submenu.active[data-depth="2"]) > .mx-mobile-toggle {
  display: none !important;
}

/* ===== DEPTH 3 ACTIF ===== */
/* Cacher les siblings du depth 2 */
.mx-mobile-submenu[data-depth="2"]:has(.mx-mobile-submenu.active[data-depth="3"]) > li:not(:has(.mx-mobile-submenu.active)) {
  display: none;
}

/* Cacher le lien et chevron du LI qui contient depth 3 actif */
.mx-mobile-submenu[data-depth="2"] > li:has(.mx-mobile-submenu.active[data-depth="3"]) > .mx-mobile-menu-link,
.mx-mobile-submenu[data-depth="2"] > li:has(.mx-mobile-submenu.active[data-depth="3"]) > .mx-mobile-toggle {
  display: none !important;
}

/* ==========================================
   7. ITEMS DE SOUS-MENUS - STYLE BOULANGER
   ========================================== */

/* Background UNIQUEMENT sur les LI qui n'ont PAS de submenu actif */
ul[data-depth="1"] > .mx-mobile-menu-item:not(:has(.mx-mobile-submenu.active)),
ul[data-depth="2"] > .mx-mobile-menu-item:not(:has(.mx-mobile-submenu.active)) {
  display: flex;
  align-items: center;
  background: white;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  /* box-shadow: 0 1px 3px rgba(0,0,0,0.1); */
  transition: box-shadow 0.2s ease;
}

/* Liens depth 1, 2, 3 */
#header ul[data-depth="1"] .mx-mobile-menu-link,
#header ul[data-depth="2"] .mx-mobile-menu-link,
#header ul[data-depth="3"] .mx-mobile-menu-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2);
  color: var(--mx-gray-900);
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  transition: color .2s ease;
}

/* Liens depth 1, 2, 3 - HOVER */
#header ul[data-depth="1"] .mx-mobile-menu-link:hover,
#header ul[data-depth="2"] .mx-mobile-menu-link:hover,
#header ul[data-depth="3"] .mx-mobile-menu-link:hover {
  color: var(--mx-orange-500);
}

/* Icon wrapper depth 1, 2, 3 - Styles identiques pour le moment */
ul[data-depth="1"] .mx-mobile-icon-wrapper,
ul[data-depth="2"] .mx-mobile-icon-wrapper,
ul[data-depth="3"] .mx-mobile-icon-wrapper {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #f3f4f6;
}

/* Icon img depth 1, 2, 3 */
ul[data-depth="1"] .mx-mobile-icon,
ul[data-depth="2"] .mx-mobile-icon,
ul[data-depth="3"] .mx-mobile-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Toggle chevron depth 1, 2 (pas de depth 3 normalement) */
ul[data-depth="1"] .mx-mobile-toggle,
ul[data-depth="2"] .mx-mobile-toggle {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--mx-gray-700);
  cursor: pointer;
}

/* Fond drawer */
.mx-mobile-menu {
  background: var(--bg-main);
}

.mx-mobile-menu-content {
  padding: var(--space-6);
}

/* ==========================================
   DEPTH 3 - Style simple avec séparateur
   ========================================== */

ul[data-depth="3"] > .mx-mobile-menu-item {
  width: 100%;
  border-bottom: 1px solid var(--border-color);
}

/* Lien depth 3 - Padding légèrement décalé */
#header ul[data-depth="3"] .mx-mobile-menu-link {
  flex: 1;
  display: flex;
  align-items: center;
  padding: var(--space-4); /* Padding uniforme */
  color: var(--mx-gray-900);
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: var(--fw-normal); /* Un peu moins gras que depth 1 et 2 */
}