/* ========================================
   NAVIGATION PRINCIPALE - .lumin_nav
   ======================================== */

.lumin_nav {
  position: fixed;
  top: 75px;
  left: 0;
  padding: 0px 48px;
  background: #ffffff;
  width: 100%;
  border-bottom: #e3e3e3;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  display: none;
}

.admin-bar .lumin_nav {
  top: 107px;
}

@media (max-width: 899px) {
  .lumin_nav--opened-on-mobile {
    display: block;
  }

  /* Scroll pour tout le menu mobile */
  .lumin_nav {
    max-height: calc(100vh - 75px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .admin-bar .lumin_nav {
    max-height: calc(100vh - 107px);
  }

  /* Scrollbar personnalisée pour le menu mobile */
  .lumin_nav::-webkit-scrollbar {
    width: 8px;
  }

  .lumin_nav::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  .lumin_nav::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
  }

  .lumin_nav::-webkit-scrollbar-thumb:hover {
    background: #999;
  }
}

@media (min-width: 900px) {
  .lumin_nav {
    display: block;
  }
}

/* Classes utilitaires pour le menu */
.lumin_nav__menu .menu-item.mobile-only {
  display: block;
}

@media (min-width: 900px) {
  .lumin_nav__menu .menu-item.mobile-only {
    display: none !important;
  }
}

/* ========================================
   MENU PRINCIPAL - .lumin_nav__menu
   ======================================== */

.lumin_nav__menu {
  list-style: none;
  padding: 12px 0 !important;
}

@media (min-width: 900px) {
  .lumin_nav__menu {
    padding: 0 !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 20px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    justify-content: space-evenly;
  }
}

.lumin_nav__menu .menu-item {
  position: relative;
  list-style-type: none;
  padding: 0;
  font-weight: 600;
}

.lumin_nav__menu .menu-item.has-fullwidth-menu {
  position: initial;
}

.lumin_nav__menu .menu-item--lvl-0 > .menu-link {
  text-transform: uppercase;
  color: var(--text-color) !important;
  font-size: 13px;
}

.lumin_nav__menu .menu-item--lvl-0 > .menu-link.rotate-180 svg {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

@media (min-width: 900px) {
  .lumin_nav__menu .menu-item--lvl-0 > .menu-link {
    padding: 8px 0;
  }
}

.lumin_nav__menu .menu-item__icon {
  font-size: 12px;
}

.lumin_nav__menu .menu-item__icon svg {
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  display: block;
}

.lumin_nav__menu .menu-item.has-submenu > .menu-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
  cursor: pointer;
}

/* ========================================
   MENU DROPDOWN STANDARD
   ======================================== */

.lumin_nav__menu .menu-dropdown {
  padding: 6px 0 !important;
}

@media (min-width: 900px) {
  .lumin_nav__menu .menu-dropdown {
    position: absolute;
    left: 50%;
    top: 100%;
    background: white;
    -webkit-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 240px;
    border-radius: 0 0 5px 5px;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

.lumin_nav__menu .menu-dropdown .menu-link {
  color: var(--text-color) !important;
  font-size: 13px;
  width: 100%;
  display: inline-block;
  padding: 0px 16px;
}

.lumin_nav__menu .menu-dropdown .menu-link:hover {
  background-color: #f8f8f8;
}

@media (min-width: 900px) {
  .lumin_nav__menu .menu-dropdown .menu-link {
    padding: 5px 20px;
  }
}

li:first-child .lumin_nav__menu .menu-dropdown {
  left: 0%;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}

li:last-child .lumin_nav__menu .menu-dropdown {
  left: auto;
}

/* ========================================
   MEGA MENU - STYLES COMMUNS
   ======================================== */

/* Styles de base du mega-menu (mobile et desktop) */
.mega-menu .menu-item--lvl-1 > .menu-link {
  color: var(--text-color) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mega-menu .mega-menu-submenu .menu-link {
  padding: 0px 12px;
  color: var(--text-color) !important;
  font-size: 13px;
  line-height: 1.8;
  font-weight: 500;
}

/* ========================================
   MEGA MENU - VERSION MOBILE (<900px)
   ======================================== */

@media (max-width: 899px) {
  /* Container du mega-menu mobile - pas de scroll ici, c'est .lumin_nav qui gère */
  .mega-menu {
    /* Le scroll est géré par .lumin_nav maintenant */
  }

  /* Niveau 1 - Items collapse/expand */
  .mega-menu .menu-item--lvl-1 > .menu-link {
    margin-bottom: 6px;
    padding: 0px 12px;
    font-size: 13px;
    font-weight: 600;
    justify-content: space-between;
    cursor: pointer;
  }

  .mega-menu .menu-item--lvl-1 > .menu-link .menu-item__text {
    flex: 1;
  }

  /* Flèches pour collapse/expand mobile */
  .mega-menu .menu-item--lvl-1 .menu-item__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease;
  }

  .mega-menu .menu-item--lvl-1 .menu-item__icon svg {
    margin-top: 3px;
  }

  .mega-menu .menu-item--lvl-1 .menu-item__icon.rotate-180 {
    transform: rotate(180deg);
  }

  /* Liste principale */
  .mega-menu > ul {
    padding: 12px 0 !important;
  }

  /* Sous-menus */
  .mega-menu .mega-menu-submenu {
    padding: 0 0 12px 12px !important;
  }
}

/* ========================================
   MEGA MENU - VERSION DESKTOP (≥900px)
   ======================================== */

@media (min-width: 900px) {
  /* Container du mega-menu desktop - positionnement absolu */
  .mega-menu {
    position: absolute;
    left: 0;
    top: 100%;
    padding: 24px 36px 12px !important;
    border-radius: 0 0 5px 5px;
    width: 100%;
    background: white;
    -webkit-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Niveau 1 - Titres de colonnes */
  .mega-menu .menu-item--lvl-1 > .menu-link {
    padding: 0px 12px;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: bold;
  }

  /* Liste principale - affichage en colonnes */
  .mega-menu > ul {
    padding: 0 !important;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .mega-menu > ul > .menu-item {
    width: 25%;
  }

  /* Sous-menus - toujours visibles sur desktop */
  .mega-menu .mega-menu-submenu {
    display: block;
    padding: 0 0 12px 12px !important;
  }

  .mega-menu .mega-menu-submenu .menu-link:hover {
    background-color: #f8f8f8;
  }
}

/* ========================================
   ILLUSTRATED MENU (Menu avec images)
   ======================================== */

.illustrated-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0px !important;
  border-radius: 0 0 5px 5px;
  width: 100%;
  background: white;
  overflow-y: scroll;
}

@media (min-width: 900px) {
  .illustrated-menu {
    position: absolute;
    left: 0;
    top: 100%;
    -webkit-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    max-height: calc(100vh - 117px);
  }
}

.illustrated-menu ul {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0 6px !important;
}

.illustrated-menu .menu-item {
  width: 50%;
  padding: 12px 6px;
}

.illustrated-menu .menu-item .menu-link {
  position: relative;
  display: block;
  color: #ffffff !important;
  font-size: 22px;
  background-color: #000000;
  overflow: hidden;
}

.illustrated-menu .menu-item .menu-link .menu-media-title {
  position: absolute;
  z-index: 2;
  bottom: 18px;
  left: 26px;
}

.illustrated-menu .menu-item .menu-link .menu-media-image {
  opacity: 0.75;
  z-index: 1;
  position: relative;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  display: block;
}

.illustrated-menu .menu-item .menu-link:hover .menu-media-image {
  -webkit-transform: scale(1.1) rotate(-2deg);
          transform: scale(1.1) rotate(-2deg);
}

@media (min-width: 780px) {
  .illustrated-menu .menu-item {
    width: 20%;
  }
}