/* Désactiver l'icône par défaut */
.wp-block-navigation__responsive-container-open svg {
  display: none;
}

/* Style du bouton pour ouvrir le menu */
.bouton_nav {
  background-color: #f7f5f2;
  border-radius: 10px;
  width: 60px;
  height: 60px;
  position: fixed;
  z-index: 9999;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav_menu {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Icône du menu fermé */
.wp-block-navigation__responsive-container-open {
  background-image: url("https://news.pom-g.com/wp-content/themes/Bleumojo/src/images/navigation/menu-ouvert.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  z-index: 9999;
  cursor: pointer;
}

/* Styles pour le menu */
.wp-block-navigation__responsive-container-open {
  position: relative;
}

.wp-block-navigation__responsive-container.has-modal-open::before {
  content: "";
  position: fixed; /* Garde l'image en position fixe même lors du scroll */
  top: 20%; /* Positionne l'image au milieu verticalement */
  right: 30%; /* Colle l'image à droite de l'écran */
  width: 531px;
  height: 180px;
  background: url("https://news.pom-g.com/wp-content/themes/Bleumojo/src/images/navigation/Logo-bleu-mojo-bk.png") no-repeat center center;
  background-size: cover;
  opacity: 0.5;
  z-index: 10; /* Assure que l'image reste en arrière-plan */
}

/* Affichage des liens de menu */
.menu_link {
  padding-left: 30px !important;
}

.menu_link:nth-child(1) {
  border-left: 10px solid #f7b74f;
}
.menu_link:nth-child(2) {
  border-left: 10px solid #7dcfb6;
}
.menu_link:nth-child(3) {
  border-left: 10px solid #ec0868;
}
.menu_link:nth-child(4) {
  border-left: 10px solid #b7d9ff;
}
.menu_link:nth-child(5) {
  border-left: 10px solid #8390fa;
}

@media (max-width: 1024px) {
  .wp-block-navigation__responsive-container.has-modal-open::before {
    background: none;
  }
}