:root {
	--transition-duration: 0.3s;
	--transition-ease: ease;
}

nav {
	position: sticky;
	display: flex;
	top: 0;
	left: 0;
	background-color: var(--color4);
	color: var(--color7);
	border-radius: 4px;
	box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	width: 100%; /* Utiliser la largeur du parent, sans dépasser */
	height: auto;
	z-index: 1000;
	justify-content: center;
	align-items: stretch; /* Change to stretch to ensure children fill the height */
	box-sizing: border-box; /* Pour prendre en compte padding et border dans la largeur totale */
}

/* Style pour l'icône burger */
.burger-icon {
	display: none;
}

/* Styles généraux */
nav a, .submenu a, .submenu .submenu a {
	display: block;
	width: auto;
	padding: 0 10px 0 10px;
	transition: color var(--transition-duration) var(--transition-ease);
	white-space: nowrap;
	font-size: var(--size2);
	color: var(--color7);
	text-decoration: none;
	line-height: 45px;
	font-style: normal;
}
.submenu a, .submenu .submenu a {
	font-weight: 400;
}
/* Accentue l'indentation visuelle */
.submenu a {
    padding-left: 15px;
    border-left: 2px solid rgba(255, 255, 255, 0.2); /* Bordure légère */
}
.submenu .submenu a {
    padding-left: 30px;
    border-left: 2px solid rgba(255, 255, 255, 0.4); /* Plus visible */
}
/* Variante : Léger fond pour bien voir les sous-niveaux */
.submenu a:hover {
    background-color: rgba(255, 255, 255, 0.08);
}
.submenu .submenu a:hover {
    background-color: rgba(255, 255, 255, 0.12);
}
.nav-menu {
	display: flex;
	justify-content: center;
	align-items: stretch;
	width: 100%;
	height: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
}
.nav-menu > li {
	position: relative; /* Contexte de positionnement pour les sous-menus */
	display: flex;
	height: 100%;
	padding: 0 15px;
}
.nav-menu a {
	font-weight: 600; /* Tous les liens de menu sont en gras */
}
.nav-menu > li > a {
	font-weight: 600; /* En gras pour les éléments principaux du menu */
}

/* Supprimer les puces des listes du menu */
.nav-menu, .submenu {
	list-style: none; /* Retire les puces */
}

.nav-menu li, .submenu li {
	list-style: none; /* Assure l'absence de puces pour les items individuels */
}
.nav-menu li:has(.submenu) > a {
	font-weight: 600; /* En gras pour les éléments parents ayant des sous-menus */
}
.nav-menu > li:hover > .submenu, .submenu li:hover > .submenu {
	display: block;
}
/* Gestion des indicateurs de sous-menu */
/* Effet d'animation au survol */
.nav-menu li a::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background-color: var(--color1);
    transition: width 0.3s ease-in-out;
    position: absolute;
    bottom: 1px; /* Avant c'était -3px, on le met en positif pour qu'il remonte */
    left: 50%;
    transform: translateX(-50%);
}
.nav-menu li a:hover::after {
    width: 100%;
}

.nav-menu a, .submenu a {
	font-weight: 400; /* Normal par défaut pour tous les liens */
}
.nav-menu a:hover, .submenu a:hover, .submenu .submenu a:hover {
	color: var(--color1);
}

.submenu, .submenu .submenu {
	position: absolute;
	display: none;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	z-index: 1001;
	min-width: 150px; /* Assure une largeur minimale pour les menus */
	max-width: calc(100vw - 20px); /* Pour éviter que les sous-menus ne dépassent la largeur de la fenêtre */
	background-color: var(--color8);
	transition: all 0.3s ease-in-out;
}

.submenu {
	top: 100%;
	left: 0;
	min-width: 150px;
	max-width: calc(100vw - 20px); /* Empêche les menus de déborder de la largeur de la fenêtre */
}
/* Ajout de transitions pour les niveaux de sous-menu */
.submenu.active {
    transition: opacity 0.3s ease;
    opacity: 1; /* Fait apparaître doucement */
}
.submenu > li {
	position: relative; /* Position relative pour positionner correctement les sous-sous-menus */
}
/* Effet subtil au survol des sous-menus */
.submenu a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Léger fond transparent */
    border-radius: 3px; /* Arrondi doux */
}

.submenu .submenu {
	top: 0; /* Alignement vertical avec le haut de l'élément parent */
	left: 100%; /* Décalage à droite pour s'aligner à l'extrémité du sous-menu parent */
	border-top: none; /* Supprime la bordure en haut spécifique aux sous-sous-menus */
}
.submenu, .submenu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.link-text {
	flex-grow: 1; /* Allows text to take up any extra space */
	cursor: pointer;
}

/* Affichage du menu burger sur les petits écrans */
@media screen and (max-width: 960px) {
	/* Style général du nav en mode responsive */
	nav {
		position: static;
		border: none;
		box-shadow: none;
		background: none;
	}

	/* Style pour l'icône burger */
	.Top-burger {
		display: block;
		position: fixed; /* Changé de 'sticky' à 'fixed' */
		top: 10px;
		left: 10px;
		width: 50px; /* Taille du cercle */
		height: 50px; /* Taille du cercle */
		background-color: #fff; /* Couleur du cercle */
		border-radius: 50%; /* Cercle parfait */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Effet d'ombré */
		cursor: pointer;
		z-index: 5000;
	}
	.burger-icon {
		display: block;
		position: fixed; /* Changé de 'sticky' à 'fixed' */
		top: 22px; /* Ajusté pour garder l'icône en haut */
		left: 23px;
		z-index: 5500;
	}
	.burger-icon span {
		display: block;
		width: 25px;
		height: 3px;
		margin: 5px 0;
		background-color: var(--color2); /* Couleur des barres */
		border-radius: 2px; /* Coins arrondis pour les barres */
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* Contour ombré des barres */
		transition: transform 0.3s ease, opacity 0.3s ease;
		z-index: 5500;
	}
	.burger-icon:hover span {
		background-color: var(--color1); /* Changement de couleur au survol */
	}
	.burger-icon.active span {
		background-color: var(--color1); /* Changement de couleur quand actif */
	}
	/* Design Burger-menu */
	/* Ligne 1 */
	.Top-burger.active .burger-icon span:nth-child(1) {opacity: 1;}
	/* Ligne 2 */
	.Top-burger.active .burger-icon span:nth-child(2) {
		opacity: 1;
		transform: translateX(-50%) rotate(90deg);
		position: absolute;
		top: 30%;
		left: 51%;
	}
	/* Ligne 3 */
	.Top-burger.active .burger-icon span:nth-child(3) {opacity: 0;}

	/* Le menu mobile est en position fixed pour couvrir tout l'écran */
	.nav-menu {
		position: fixed;
		inset: 0; /* équivaut à top: 0; right: 0; bottom: 0; left: 0 */
		height: 100vh;
		width: 100vw;
		margin: 0;
		padding: 50px 0 0 0;
		background-color: rgba(255, 255, 255, 0.95);
		display: none;
		z-index: 4000;
		transition: all 0.3s ease-in-out; /* Transition plus fluide */
	}
	.nav-menu.active {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}

	nav a, .submenu a, .submenu .submenu a {
		font-size: var(--size6);
		color: var(--color7);
		line-height: 45px;
		padding-left: 0;
		border:0;
	}

	.nav-menu > li {
		width: 100%;
		display: contents;
		margin: 8px 0;
	}
	.nav-menu > li > a {
		text-align: center;
	}

	.submenu .submenu {
		top: 100%;
		left: 0;
		min-width: 150px;
		max-width: calc(100vw - 20px);
		max-height: 184px; /* Limite la hauteur du sous-menu */
		overflow-y: auto; /* Active le défilement vertical */
		transition: max-height 0.3s ease-in-out; /* Animation fluide */
	}
	/* Active l'ascenseur UNIQUEMENT si nécessaire (3 éléments ou plus) */
	.submenu .submenu:has(li:nth-child(n+3)) {
		max-height: 184px; /* Hauteur normale */
		overflow-y: auto; /* Active le scroll */
	}

	/* Styles de la barre de défilement */
	.submenu .submenu::-webkit-scrollbar {
		width: 8px; /* Ajustez la taille de la barre de défilement */
	}
	.submenu .submenu::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0.5); /* Couleur de la barre de défilement */
		border-radius: 10px;
	}
	.submenu .submenu::-webkit-scrollbar-thumb:hover {
		background: rgba(0, 0, 0, 0.7); /* Couleur de la barre de défilement lors du survol */
	}

	.submenu,
	.submenu .submenu {
		display: none !important;
		position: static !important;
		width: auto;
		box-shadow: none !important;
		border: none !important;
		margin: 0 !important;
		padding: 0 !important;
		align-items: center;
		background: transparent !important;
		transition: none !important;
	}
	/* Les sous-menus actifs sont visibles */
	.submenu.active {
		display: block !important;
	}

	.submenu > li {
		width: 100%;
	}
	.submenu > li > a {
		text-align: center;
	}
	/* Correction de l'indentation pour les sous-sous-menus */
	.submenu .submenu > li {
		width: 100%;
	}
	.submenu .submenu > li > a {
		text-align: center;
	}

	/* Enlève toutes les transitions pour éviter les clignotements */
	.nav-menu,
	.nav-menu *,
	.submenu,
	.submenu * {
		transition: none !important;
	}

	/* Styles spécifiques pour les sous-menus en mode responsive */
	.submenu, .submenu .submenu {
		position: static;
		width: 100%;
		box-shadow: none;
		transition: none;
	}

	/* Gestion des indicateurs de sous-menu */
	.nav-menu li a .submenu-indicator::after {
		content: '\02C4';
		transition: transform 0.3s ease;
	}
	.nav-menu li a.active .submenu-indicator::after {
		content: '\02C5';
	}
	.nav-menu li li:hover > a .submenu-indicator::after { /* Règle pour les sous-sous-menus */
		content: '\02C5';
	}
}