/* Contenu du header invisible par défaut et prêt pour fade-in */
#header {
	height: 25.5em;
	width: 100%;
}

.header-container {
	padding: 1.25em;
	background-color: #7AC5E5;
	border: none;
	position: relative; /* référence pour le positionnement du sous-menu */
	z-index: 100;
}

.headerContent-container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.5625em;
	position: relative;
}

.logo-container {
	display: flex;
	justify-content: center;

}

.logo-img {
	height: 18.75em;
}

.hamburger-button {
	display: none;
	background: none;
	border: none;
	font-size: 2em;
	color: white;
	cursor: pointer;
}

.nav-container {
	display: flex;
	justify-content: flex-end;
}

.navList-container {
	list-style: none;
	display: flex;
	gap: 1.25em;
	padding: 0;
	margin: 0;
	position: relative;
}

.navItem-item {
	position: relative;
}

.navLink-link {
	text-decoration: none;
	color: white;
	padding: 0.625em;
	display: block;
}

/* Sous-menu caché */
.submenu-container {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-in-out;
	position: absolute;
	top: calc(100% + 1.25em);
	left: 0;
	background-color: #E8FE41;
	list-style: none;
	padding: 0;
	margin: 0;
	z-index: 10;
	min-width: 9.375em;
}
/* Ajout d'un pseudo-élément pour créer une zone invisible de connexion */
.menu-parent::after,
.navItemMenuParent::after {
	content: '';
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	height: 1.25em; /* Cette valeur doit correspondre au décalage dans top: calc(100% + 1.25em) */
	background: transparent; /* La zone est invisible */
}

.menu-parent, .navItemMenuParent {
	cursor: default;
	user-select: none;
	position: relative;
}

.navLink-fake {
	color: white;
	padding: 0.625em;
	display: block;
	cursor: default;
	user-select: none;
}

/* Afficher le sous-menu au survol */
.menu-parent:hover .submenu-container,
.navItemMenuParent:hover .submenu-container {
	display: block;
}

/* Liens du sous-menu */
.submenu-container li a {
	color: #7AC5E5;
	padding: 1em 3em;
	width: 15em;
	display: block;
	text-decoration: none;
	text-align: left;
}

/* Empêcher clic sur les parents */
.menu-parent {
	cursor: default;
	user-select: none;
	position: relative;
	/* padding-bottom: 1.25em; */
}

.menu-parent > a {
	pointer-events: none;
}

.navItemMenuParent {
	cursor: default;
	user-select: none;
	position: relative;
	/* padding-bottom: 1.25em; */
}

.navItemMenuParent > a {
	pointer-events: none;
}

/* --- DESKTOP uniquement : affichage au survol --- */
@media (min-width: 48.0625em) {
	.navItemMenuParent:hover .submenu-container {
		max-height: 43.75em; /* assez pour contenir tous les liens */
	}

		.submenu-container li a {
		position: relative;
		padding: 0.75em 2.1875em;
		display: block;
		color: #7AC5E5;
		text-decoration: none;
	}

	.submenu-container li a::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		height: 0.125em;
		width: 0%;
		background-color: #7AC5E5;
		transition: width 0.3s ease-in-out;
	}

	.submenu-container li a:hover::after {
		width: 100%;
	}
}


/* Version responsive */
@media (max-width: 48em) {

.header-container {
	padding: 2.5em 0em 0em 0em; /* Ajoute 2.5em en haut, 1.25em sur les autres côtés */
	background-color:	#7AC5E5;
	border: none;
	position: relative;
	z-index: 100;
}

.logo-container {
		margin-left: 60%;
}

	.logo-img {
		height: 6.25em; /* logo plus petit */
	}

	.hamburger-button {
		display: block;
		position: absolute;
		left: 0.3125em;		 /* aligné à gauche */
		top: -0.9375em;
		z-index: 101;
		background: none;
		border: none;
		padding: 0.3125em;
		font-size: 2.5em;
		color: white;
		cursor: pointer;
	}

	.nav-container {
		position: static;
	}

.navList-container {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-in-out;
	flex-direction: column;
	background-color: #E8FE41;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100vw;
	padding: 0;
	margin: 0;
	border: none;
	box-shadow: none;
	box-sizing: border-box;
	outline: none;
}

	.navList-container.nav-visible {
		max-height: 62.5em; /* assez grand pour contenir tous les liens */
	}

	.navLink-link, .submenu-container, .submenu-container li a {
		border: none !important;
		box-shadow: none !important;
		outline: none !important;
	}

.navLink-fake {
	position: relative;
	padding: 0.75em 1.25em;
	color: #7AC5E5;
	text-decoration: none;
	display: block;
	width: 100%;
	box-sizing: border-box;
}


/* Soulignement progressif */
.navLink-fake::before {
	content: "";
	position: absolute;
	bottom: 0.5em; /* distance du soulignement par rapport au texte */
	left: 1.25em;
	height: 0.125em;
	width: 0;
	background-color: #7AC5E5;
	transition: width 0.3s ease-in-out;
}

/* Quand le sous-menu est actif */
.navItemMenuParent.submenu-active .navLink-fake::before {
	width: calc(100% - 2.5em); /* correspond à 100% - padding horizontal */
}

	.submenu-container.submenu-visible {
		display: block !important;
	}

	.submenu-container li a {
		padding: 0.75em 2.1875em;
		display: block;
		color:	#7AC5E5;
	}

.navItemMenuParent > .navLink-fake::after {
	content: '+'; /* Par défaut */
	position: absolute;
	right: 1.25em;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5em;
	color:	#7AC5E5;
	transition: transform 0.3s ease;
	pointer-events: none;
}

.navItemMenuParent.submenu-active > .navLink-fake::after {
	content: '−'; /* Quand le menu est ouvert */
}

	.navLink-link, .navLink-fake {
		padding: 0.75em 1.25em; /* même padding pour tous */
		position: relative;
		width: 100%;
		box-sizing: border-box;
		display: block;
		color: #7AC5E5;
		text-decoration: none;
	}

	/* Affiche le sous-menu uniquement si la classe submenu-visible est présente */
.submenu-container {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
	position: static;
	padding: 0;
	margin: 0;
	width: 100%;
	background: #E8FE41;
	box-shadow: none;
}

/* Quand le sous-menu est visible */
.submenu-container.submenu-visible {
	max-height: 31.25em; /* valeur assez grande pour afficher tout le contenu */
}

}