/* Main Navigation */
.main-nav {
	position: relative;
	display: flex; /* For alignment of toggle and menu */
	align-items: center;
	justify-content: center; /* Centre tous les éléments */
	flex-wrap: wrap; /* Autorise le retour à la ligne */
	padding: 10px 0;
}

.main-nav,
.main-nav button {
	font-size: 17px;
}

.main-nav > .logo img {
	max-height: 60px;
}

.nav-toggle {
	display: none; /* Hidden by default on larger screens */
	background: none;
	border: none;
	color: #FFFFFF;
	cursor: pointer;
	padding: 5px 10px;
}

/* Main Menu */
.menu {
	display: contents;
	flex-wrap: wrap;	/* Permet de passer à la ligne */
	justify-content: center;
	gap: 10px;			/* Optionnel : espace entre les items */
	padding: 0;
	list-style: none;
}

.menu li {
	flex: 0 1 auto; /* largeur auto mais peut s’adapter */
	position: relative;
	margin: 5px;
	border: 1px solid #5084BD;
}

.menu > li > a {
	padding: 10px 15px;
}

.menu > li > button {
	padding: 12px 15px;
}

.menu button,
.menu li {
	border-radius: 10px;
	background-color: #E9E9E9;
}

.menu > li > a,
.menu > li > button {
	display: block;
	text-align: center; /* centre le texte */
}

.menu a,
.menu button {
	display: block;
	padding: 10px 15px;
	text-decoration: none;
	white-space: nowrap; /* Prevent wrapping for menu items */
	color: #1E6CA0;
}

.menu button {
	border: 0;
}

.menu button:hover {
	cursor: pointer;
}

.menu a:hover,
.menu a:active,
.menu li.has-submenu.open > a,
.menu li.has-submenu:hover > a,
.submenu a:hover,
.menu button:hover,
.menu button:active,
.menu li.has-submenu.open > button,
.menu li.has-submenu:hover > button,
.submenu button:hover {
	color: #229DEE;
}

.menu li:hover {
	border: 1px solid #F1F1F1;
}

.menu li.has-submenu.open > a,
.menu li.has-submenu:hover > a,
.menu li.has-submenu.open > button,
.menu li.has-submenu:hover > button,
.menu li.has-submenu:hover > .submenu {
	background-color: #EDEDED;
	border-radius: 10px 10px 0 0;
}

/* .menu > li:not(:first-child) > a:hover, */
.menu li:hover,
.menu li.has-submenu.open > a,
.menu li.has-submenu:hover > a,
.menu li.has-submenu.open > button,
.menu li.has-submenu:hover > button,
.menu li.has-submenu:hover > .submenu {
	box-shadow: 1px 1px 5px #6481BC;
}

.menu .has-submenu .submenu li {
	box-shadow: none;
}

.menu > li > a:hover {
	border-radius: 10px;
}

.menu li.has-submenu:hover > .submenu {
	clip-path: inset(0px -30px -30px -30px); /* haut | droite | bas | gauche */
	border-radius: 0 10px 10px;
}

/* Submenu Styling */
.submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100%; /* Position below parent */
	left: 0;
	background-color: #F1F1F1;
	min-width: 100%; /* au moins la largeur du parent */
	width: max-content; /* s’élargit au besoin selon le contenu */
	z-index: 100; /* Ensure submenu is above other content */
	display: none; /* Hidden by default */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	margin-top: 1px;
}

.main-nav .logo,
.menu .has-submenu .submenu li {
	background-color: transparent;
	border: 0;
}

.submenu .submenu {
	left: 100%; /* s’affiche à droite du parent */
	top: 0;
	min-width: 100%;
	width: max-content;
}

.submenu li {
	width: 100%; /* Ensure submenu items take full width */
}

.submenu a {
	padding: 10px 15px;
}

.menu li.has-submenu.close button,
.menu > li > a,
.menu > li > button,
.submenu a {
	color: #000000;
}

/* Show submenu on hover for desktop */
.menu li.has-submenu:hover > .submenu {
	display: block;
	opacity: 1;
	visibility: visible;
}

/* Responsive Styles (Mobile First Approach) */
@media (max-width: 768px) {
	.main-nav {
		flex-direction: column; /* Stack items vertically */
		align-items: flex-start;
		width: 100%;
		display: list-item;
	}

	nav .nav-toggle {
		display: block; /* Show hamburger icon on small screens */
		color: #1E6CA0;
		/* margin-left: auto; Pousse le bouton à droite */
		font-size: 24px;
		position: absolute;
		top: 0;
		right: 0;
	}

	.menu {
		display: block;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease-out;
		width: 100%;
	}

	.menu.active {
		max-height: 1000px; /* assez grand pour contenir le menu complet */
	}

	.menu li {
		width: 100%;
		border-bottom: 1px solid #ECECEC;
		border: 0;
		margin: 0;
	}

	.menu > li > a,
	.menu > li > button {
		text-align: left;
	}

	.menu li:last-child {
		border-bottom: none;
	}

	.menu a,
	.menu button {
		padding: 12px 20px;
	}

	/* Submenu for mobile */
	.submenu {
		position: static; /* Stack below parent on mobile */
		/*! background-color: #555; */
		width: 100%;
		display: none; /* Hidden by default on mobile */
		opacity: 1; /* Always visible when displayed on mobile */
		visibility: visible; /* Always visible when displayed on mobile */
		transition: none; /* No transition for mobile submenu display */
		/*! border-bottom: 1px solid #ececec; */
	}

	.submenu li {
		border-left: 0;
		border-right: 0;
	}

	.submenu a,
	.menu > li > a,
	.menu > li > button {
		padding: 10px 15px;
		font-weight: normal;
	}

	.menu li.has-submenu > a,
	.menu li.has-submenu > button {
		position: relative; /* For the chevron icon */
	}

	.menu li.has-submenu > button {
		width: 100%;
	}

	/* Show submenu when parent is 'open' on mobile */
	.menu li.has-submenu.open > .submenu {
		display: block;
	}

	/* Show submenu when parent is 'open' on mobile */
	.menu li.has-submenu.close > .submenu {
		display: none;
	}

	/* .menu > li:not(:first-child) > a:hover, */
	.menu li.has-submenu.open > a,
	.menu li.has-submenu:hover > a,
	.menu li.has-submenu.open > button,
	.menu li.has-submenu:hover > button,
	.menu li.has-submenu:hover > .submenu {
		box-shadow: none;
	}

	.menu button,
	.menu li,
	.menu li.has-submenu.open > a,
	.menu li.has-submenu:hover > a,
	.menu li.has-submenu.open > button,
	.menu li.has-submenu:hover > button,
	.menu li.has-submenu:hover > .submenu {
		border-radius: 0;
	}
}