/* Style du sous-menu */
.menu-deroulant > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: 0;
    margin: 0;
    list-style: none;
    min-width: 200px;
    border-radius: 5px;
    z-index: 1000;
}

.menu-deroulant:hover > ul {
    display: block;
	
}


/* Style des éléments du sous-menu */
.menu-deroulant ul li {
    padding: 10px 15px;
    box-sizing: border-box;  /* Assure que le padding ne change pas la taille totale */
}

/* Style des liens du sous-menu */
.menu-deroulant ul li a {
    text-decoration: none;
    <!-- display: block; -->
    padding: 8px 15px;  /* Fixe un padding constant pour éviter les changements */
    transition: background 0.3s, color 0.3s;
    box-sizing: border-box;  /* Assure que le padding ne change pas la taille totale */
	
}

/* Effet au survol des liens du sous-menu */
.menu-deroulant ul li:hover {
    <!-- background-color: #f0f0f0; -->
	color :#129589;
}

/* Effet au survol des liens du sous-menu */
.menu-deroulant ul li a:hover {
 
	 color :#129589;
}

		
		/* Style au focus ou au clic - Empêcher les changements d'apparence */
.menu-deroulant ul li a:focus,
.menu-deroulant ul li a:active {
    background-color: transparent;  /* Pas de fond changeant */
     <!-- color: #0F7270;  /*  changement de couleur */ -->
    outline: none;  /* Éviter le contour au focus */
}

<!-- /* Affichage du sous-menu au clic */ -->
<!-- .menu-deroulant.show > ul { -->
    <!-- display: block; -->
<!-- } -->

/* Tourner la flèche de droite à bas au survol ou au clic */
.menu-deroulant:hover .toggle-dropdown,
.menu-deroulant.show .toggle-dropdown {
    transform: rotate(90deg);
	
}



.categorie-titre {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color: var(--nav-color);
  display: inline-block;
  position: relative;
  padding-bottom: 5px; /* Espacement pour le tiret */
}

.categorie-titre:hover {

  color :#129589;
}

.categorie-titre:hover::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  <!-- height: 2px; /* Épaisseur du tiret */ -->
  background-color: #000; /* Couleur du tiret */
}


 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* Menu principal */
  nav {
    <!-- background: #1e1e2f; -->
    padding: 1rem 2rem;
  }

  ul {
    list-style: none;
  }

  nav ul li {
    position: relative;
  }

  .dropbtn {
    color: #fff;
    text-decoration: none;
    padding: 0.75rem 1rem;
    display: block;
    <!-- background: #1e1e2f; -->
    border-radius: 6px;
    transition: background 0.3s;
  }

  .dropbtn:hover {
    <!-- background: #34344e; -->
	
  }

  /* Sous-menus */
  nav ul li ul {
    position: absolute;
    top: 100%;
    left: 0;
    <!-- background: #2e2e42; -->
    min-width: 180px;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 100;
  }

  nav ul li:hover > ul {
    opacity: 1;
    transform: translateY(0px);
    visibility: visible;
    pointer-events: auto;
  }

  nav ul li ul li a {
    color: #fff;
    padding: 0.75rem 1rem;
    display: block;
    text-decoration: none;
  }

  nav ul li ul li a:hover {
    <!-- background: #444466; -->
	<!-- color : #129589; -->
  }

  /* Sous-sous-menu */
  nav ul li ul li ul {
    top: 0;
    left: 100%;
    transform: translateX(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
  }

  nav ul li ul li:hover > ul {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
	color :#129589;
  }
  
  
  


  
  ul.vertical {
  display: flex;
  flex-direction: column;
  padding-left: 20px;

}

ul.vertical li {
  margin: 5px 0;
}