.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000; /* Définir un z-index élevé */
	height: 100%;
	width: 70px;
	padding-top: 20px;
	transition: width 0.3s; 
	align-items: center;
	
	
}
.icon_menu {
	fill: currentColor;    /* couleur = couleur du texte */

}

.icon_wrapper_menu {
	position: relative;
	display: inline-block;
	text-decoration: none;
}

.menu {
	list-style: none;
	padding: 0;
}

.menu li {
	position: relative; /* Ajouter cette ligne pour positionner le menu parent */
	justify-items: center;
}


.menu li a {
	text-decoration: none;
	display: flex;
	justify-items: center;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	transition: padding 0.3s;
	
}

.menu li p {
	text-decoration: none;
	display: flex;
	align-items: center;
	margin-left:20px;
	padding:10px;
	transition: padding 0.3s;
}



.menu li a svg {
	justify-items: center;
}

.menu li a span {
	display: none;
}
.menu .arrow{
	display: none;
}

.sidebar.expanded {
	width: 210px;
}


.sidebar.expanded .toggle-btn {
	display: block; /* Afficher le bouton de basculement lorsque la barre est élargie */
}

.sidebar.expanded .menu li {
	    justify-items: start;
		margin-left:20px;
	
}
.sidebar.expanded .menu li a span {
	display: inline;
	align-content: center;
}
.sidebar.expanded .menu .arrow {
	display: inline;
}

.sidebar.expanded .toggle-btn span:first-child {
	transform: rotate(45deg) translate(2px, 2px);
}

.sidebar.expanded .toggle-btn span:nth-child(2) {
	opacity: 0;
}

.sidebar.expanded .toggle-btn span:last-child {
	transform: rotate(-45deg) translate(1px, -1px);
}

.submenu {
	display: none;
	position: absolute;
	background-color: #0a7ea2;
	left: 90%; /* Positionner le sous-menu à droite du menu parent */
	width:auto;
	text-align: left;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	padding-left:0;
	padding-right:2rem;
	top:0;
	transition: all 0.3s; /* Ajouter une transition pour une animation fluide */
    z-index: 2000; /* Définir un z-index élevé */
	
}

.submenu li {
	white-space: nowrap; /* Empêcher le titre du sous-menu de passer à la ligne */
	margin-left:10px;
	top:100%;
	
}

.subsubmenu {
	display: none;
}

.menu li:hover .submenu {
	display: block;
	width: auto; /* Largeur du sous-menu */
	
	
	
}
.menu  .submenu  li:hover .subsubmenu{
	display: block;
}

.sub-submenu {
	display: none;
}

.sub-submenu.visible {
	display: block;
}
.arrow {
  height: 1rem;
  margin: 0;         
  transition: transform 0.3s;
}

.sidebar-link2{
    text-align: left;
}
.menu li:hover .arrow {
	transform: rotate(180deg);
}

.chevron {
	margin-right: 10px;
	transition: transform 0.3s;
}

.chevron.down {
	transform: rotate(0deg); /* Par défaut orienté vers le bas */
}

.chevron.up {
	transform: rotate(-180deg); /* Orienté vers le haut lorsque le sous-sous-menu est visible */
}


.toggle-btn {
	display: none; /* Masquer le bouton par défaut */
}

#SyGMA {
	position: absolute; /* Position absolue par rapport au parent */
	top: 20px; /* Ajustez la valeur selon votre disposition */
	left:90px;
	visibility: hidden; /* Masquer par défaut */
}


.sidebar.expanded #SyGMA {
	visibility: visible; /* Afficher lorsque la barre latérale est étendue */
}


#task_m {
	position: absolute; /* Position absolue par rapport au parent */
	top: 45px; /* Ajustez la valeur selon votre disposition */
	left:90px;
	visibility: hidden; /* Masquer par défaut */
	
}


.sidebar.expanded #task_m {
	visibility: visible; /* Afficher lorsque la barre latérale est étendue */
    display: block;
	
}

/* Styles pour les écrans de petite taille */
@media screen and (max-width: 768px) {
	.sidebar {
		width: 0;
	}
	
	.toggle-btn {
		display: block; /* Afficher le bouton sur les petits écrans */
		position: fixed;
		top: 10px;
		right: 10px;
		z-index: 1000;
		cursor: pointer;
	}
	
	.menu {
		display: none; /* Masquer le menu par défaut */
	}
	
	
	
	.menu li a i {
		margin-right: 0;
	}
	
	.sidebar.expanded .menu {
		display: block; /* Afficher le menu lorsque la barre latérale est étendue */
	}
	
	.sidebar.expanded {
		width: 210px;
	}
}