/**

 * Theme Dioqa - Menu Mobile Multi-Niveaux

 * Styles pour le système de navigation avec off-canvas empilés

 */



/* ============================================

   BOUTON BURGER

   ============================================ */



.menu-btn {

  background: none;

  border: none !important;

  cursor: pointer;

  padding: 0 !important;

}



.line {

  transition: transform 0.4s ease, opacity 0.4s ease;

  transform-origin: center;

}



.top {

  transform-origin: 23% 16%;

}



.bottom {

  transform-origin: 50% 100%;

}



.menu-btn.active .top {

  transform: rotate(45deg) translate(5px, 5px);

}



.menu-btn.active .middle {

  opacity: 0;

}



.menu-btn.active .bottom {

  transform: rotate(-45deg) translate(5px, -5px);

}



.menu-btn:focus:not(:focus-visible),

.navbar-toggler:focus:not(:focus-visible) {

  outline: 0 !important;

  box-shadow: none !important;

}



.menu-btn:focus-visible,

.navbar-toggler:focus-visible {

  outline: 2px solid var(--bs-primary);

  outline-offset: 2px;

}



/* Personnaliser le bouton de fermeture */

.offcanvas .btn-close {

  filter: invert(12%) sepia(95%) saturate(5493%) hue-rotate(216deg) brightness(91%) contrast(108%);

  opacity: 1;

}



.offcanvas .btn-close:hover {

  filter: invert(12%) sepia(95%) saturate(5493%) hue-rotate(216deg) brightness(91%) contrast(108%);

  opacity: 0.75;

}



/* ============================================

   OFF-CANVAS BASE

   ============================================ */



.offcanvas {

  max-width: 100%;

}



.offcanvas-header {

  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

  padding: 1.25rem 1.5rem;

}



.offcanvas-title {

  font-weight: 600;

  font-size: var(--text-xl);

  color: var(--bs-primary);

}



/* Logo dans le menu mobile */

.offcanvas-logo {

  display: inline-flex;

  align-items: center;

  text-decoration: none;

}



.logo-mobile {

  max-height: 40px;

  width: auto;

  height: auto;

  transition: opacity 0.3s ease;

}



.offcanvas-logo:hover .logo-mobile {

  opacity: 0.85;

}



.offcanvas-body {

  padding: 0;

}



/* ============================================

   BOUTON RETOUR

   ============================================ */



.btn-back {

  background: none;

  border: none;

  padding: 0;

  margin-right: 0.75rem;

  color: var(--bs-secondary);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.2s ease;

}



.btn-back:hover {

  transform: translateX(-3px);

}



.btn-back:focus {

  outline: 2px solid var(--bs-primary);

  outline-offset: 2px;

  border-radius: var(--radius-sm);

}



/* Header du sous-menu avec bouton retour */

.offcanvas[data-level] .offcanvas-header {

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



/* Menu principal sans bouton retour */

#mobileMenu .offcanvas-header {

  justify-content: space-between;

}



/* ============================================

   MENU PRINCIPAL (Niveau 0)

   ============================================ */



#mobile-menu {

  list-style: none;

  padding: 0;

  margin: 0;

}



/* Masquer tous les sous-menus dans le premier off-canvas */

#mobile-menu .sub-menu {

  display: none !important;

}



#mobile-menu > li {

  border-bottom: 1px solid rgba(0, 0, 0, 0.05);

}



#mobile-menu > li > a {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 1rem 1.5rem;

  color: var(--bs-gray-darker);

  text-decoration: none;

  font-weight: 500;

  transition: all 0.3s ease;

  cursor: pointer;

}



#mobile-menu > li > a:hover {

  color: var(--bs-primary);

  background-color: rgba(255, 0, 136, 0.05);

}



/* Flèche pour les items avec sous-menu */

#mobile-menu .menu-item-has-children > a::after {

  content: '';

  width: 8px;

  height: 8px;

  border-right: 2px solid var(--bs-primary);

  border-bottom: 2px solid var(--bs-primary);

  transform: rotate(-45deg);

  transition: transform 0.3s ease;

  flex-shrink: 0;

}



#mobile-menu .menu-item-has-children > a:hover::after {

  transform: rotate(-45deg) translateX(3px);

}



/* ============================================

   SOUS-MENUS (Niveaux 1, 2, 3... infini)

   ============================================ */



/* Styles pour tous les sous-menus (off-canvas dynamiques) */

.offcanvas[data-level] .offcanvas-body > .sub-menu {

  list-style: none;

  padding: 0;

  margin: 0;

  display: block !important;

}



.offcanvas[data-level] .offcanvas-body > .sub-menu > li {

  border-bottom: 1px solid rgba(0, 0, 0, 0.05);

}



.offcanvas[data-level] .offcanvas-body > .sub-menu > li > a {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 1rem 1.5rem;

  color: var(--bs-gray-darker);

  text-decoration: none;

  font-weight: 500;

  transition: all 0.3s ease;

}



.offcanvas[data-level] .offcanvas-body > .sub-menu > li > a:hover {

  color: var(--bs-primary);

  background-color: rgba(255, 0, 136, 0.05);

}



/* Flèche pour les items avec sous-menus (tous niveaux) */

.offcanvas[data-level] .menu-item-has-children > a::after {

  content: '';

  width: 8px;

  height: 8px;

  border-right: 2px solid var(--bs-primary);

  border-bottom: 2px solid var(--bs-primary);

  transform: rotate(-45deg);

  transition: transform 0.3s ease;

  flex-shrink: 0;

}



.offcanvas[data-level] .menu-item-has-children > a:hover::after {

  transform: rotate(-45deg) translateX(3px);

}



/* Masquer les sous-menus imbriqués dans les off-canvas (seront affichés dans un nouvel off-canvas) */

.offcanvas[data-level] .sub-menu .sub-menu {

  display: none !important;

}



/* Items sans sous-enfants */

.offcanvas[data-level] .sub-menu .menu-item:not(.menu-item-has-children) a {

  padding-left: 1.5rem;

}