/*********** Menu 2025 ***********/

:root {
	--color-bg: #333333;
	--color-hover: #FF8727;
	--color-text: #FFFFFF;
	--font-size: 20px;
}

* {
	transition: all 0.3s ease;
}

/* Éviter l'ascenseur horizontal */
body, html {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

.fixed-menu {
	position: fixed;
	will-change: position, top;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	background-color: var(--color-bg); /* Fond du menu fixe */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre pour distinguer */
	margin: 0; /* Assurez-vous qu'il n'y a pas de marge */
	padding: 0; /* Supprimez les éventuels espacements indésirables */
}

#menu-2025 a,
#menu-2025 nav,
#menu-2025 nav a,
#menu-2025 nav label.toggle {
	font-family: Verdana, Arial, sans-serif; /* Uniformise la police */
	font-size: var(--font-size); /* Taille de la police */
	color: var(--color-text); /* Couleur du texte */
	box-sizing: border-box; /* Assure que le padding est pris en compte dans la largeur */
}

#contain-menu {
	display: flex;
	justify-content: center; /* Centre horizontalement les éléments */
	gap: var(--font-size); /* Ajoute un espacement entre les éléments */
	height: auto;
	margin: 0;
	padding: 0;
}

#top-google-menu {
	position: relative;
	display: flex;
	width: auto; /* Espace réservé au menu */
	flex: 1;
	padding: 0;
	align-items: center;
}

form.gsc-search-box {
	margin-bottom: 2px!important;
}
.gsc-search-button-v2 {
	padding: 6px!important;
}
.gsc-input-box {
	padding-bottom: 0!important;
	padding-top: 0!important;
}

#google-menu {
	flex: 1;
	margin: 0;
	z-index: 10000;
	justify-content: center; /* Centrer horizontalement les éléments internes */
	align-items: center; /* Centrer verticalement les éléments internes */
	height: auto; /* Ajuste la hauteur au contenu */
}

#menu-2025 {
	position: static;
	top: 1px;
	right: 0;
	width: auto;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	border-left-style: solid;
	border-left-color: var(--color-bg);
	border-left-width: 15px;
	border-radius: 2em 0em 0em 2em / 5em 0em 0em 5em;
	background-color: transparent;
	z-index: 9999;
}

#menu-2025 nav {
	height: 30px;
	width: auto;
}
#menu-2025 nav:after {
	content: "";
	display: table;
	clear: both;
}

/* Cacher le checkbox principal */
#menu-2025 #drop {
	display: none;
}

/* Cacher les labels de toggle et les checkboxes des sous-menus */
#menu-2025 .toggle,
#menu-2025 .submenu-checkbox {
	display: none;
}

/* Chevron bas par défaut */
#menu-2025 .toggle:after {
	content: '▼'; /* Chevron bas */
	font-size: 12px!important;
	margin-left: 5px;
	color: var(--color-text);
	transition: transform 0.3s ease; /* Animation fluide */
}

#menu-2025 a {
	color: var(--color-text);
	text-decoration: none;
	display: block;
}

#menu-2025 nav a {
	display: block;
	padding: 0 15px;
	line-height: 30px;
	font-size: 15px;
}

#menu-2025 nav a:hover {
	background-color: var(--color-hover); /* Fond OnMouseOver menus */
}

#menu-2025 nav ul {
	display: flex;
	flex-direction: row;
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}

#menu-2025 li {
	background: inherit; /* Désactiver CSS heritage */
	padding: inherit; /* Désactiver CSS heritage */
	list-style-type: inherit; /* Désactiver CSS heritage */
	text-align: left; /* Alignement du texte des liens */
}

#menu-2025 nav ul li {
	margin: 0;
	display: flex;
	align-items: center;
	background-color: var(--color-bg); /* Fond Menus */
}

#menu-2025 nav ul li:hover > ul { display: block; }

#menu-2025 nav ul ul {
	position: absolute;
	display: none;
	top: 30px; /* Position vertical des sous-menus */
	padding: 0; /* Enlever les marges et padding inutiles */
	margin: 0;
	border-bottom: 2px solid #555555;
	border-left: 2px solid #555555;
	border-radius: 0px 0px 5px 5px;
	background-color: var(--color-bg); /* Fond sombre */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	width: auto; /* S'adapte automatiquement au contenu */
}

#menu-2025 nav ul ul a {
	font-size: 60%!important; /* Ajuste la taille du texte */
	color: #e0e0e0;
	text-decoration: none;
	display: block; /* Assure que les liens remplissent leur parent */
}

#menu-2025 nav ul ul li {
	display: block;
	min-width: 130px;
	width: auto; /* Largeur s'adapte au contenu */
	position: relative;
	background-color: #555555; /* Fond sous-menus */
}

#menu-2025 nav ul li ul li:hover { background: var(--color-hover); } /* Fond OnMouseOver sous-sous menus */

#menu-2025 li > a:after { content: ' \25BE'; } /* Flèche descendante pour sous-menus */
#menu-2025 li > a:only-child:after { content: ''; } /* Retirer la flèche sur les liens seuls */

/* Media Queries pour Responsive Design */
@media screen and (max-width: 999px) {
	#contain-menu {
		top: 0;
		left: 0;
		width: 100%; /* S'assure que le conteneur occupe toute la largeur */
		max-width: 100vw;
		align-items: center;
		background-color: var(--color-bg); /* Assure un fond visible, ajustez si nécessaire */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Ajoute une ombre pour distinguer du contenu */
		padding: 2px 0; /* Ajoute de l'espacement vertical */
		z-index: 9999; /* Place le menu au-dessus des autres éléments */
	}

	#top-google-menu {
		position: absolute;
		left: 5px;
		min-width: 250px;
	}

	#google-menu {
		flex: 0 0 250%; /* Prend 60% de la largeur du conteneur parent */
		text-align: left;
		min-width: 250px;
		max-width: calc(100vw - 60px);
		top: 0;
	}

	#menu-2025 {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		max-width: 100%;
		height: 40px;
		padding: 0;
		border: 0;
		transition: all 0.3s ease-in-out;
	}

	/* ======================= */
	/* BURGER ICON / DESKTOP   */
	/* ======================= */
	/* Burger icon. */
	.burger-icon {
		display: flex;
		margin: 0;
		position: relative;
		width: 30px;
		height: 30px;
		right: 10px;
		top: 3px;
		cursor: pointer;
		align-items: center; /* Centrer verticalement */
		justify-content: center; /* Centrer horizontalement */
	}

	/* Couleur au survol */
	.burger-icon:hover .bar {
		background-color: var(--color-hover); /* Couleur orange WDA */
	}

	/* Les barres */
	.burger-icon .bar {
		position: absolute;
		width: 100%;
		height: 3px;
		background-color: var(--color-text);
		transition: all 0.4s ease;
	}

	/* bar 1, bar 2, bar 3, bar 4 */
	.burger-icon .bar:nth-child(1) { top: 1px; }
	.burger-icon .bar:nth-child(2) { top: 7px; }
	.burger-icon .bar:nth-child(3) { top: 13px; }
	.burger-icon .bar:nth-child(4) { top: 19px; }

	/* Quand la burger a la classe open => on dessine le "W" */
	.burger-icon.open .bar:nth-child(1) { transform: translate(-8px, 7px) rotate(-70deg); }
	.burger-icon.open .bar:nth-child(2) { transform: translate(-6px, 7px) rotate(-50deg) scale(0.6, 1); }
	.burger-icon.open .bar:nth-child(3) { transform: translate(-2px, 3px) rotate(-70deg) scale(0.6, 1); }
	.burger-icon.open .bar:nth-child(4) { transform: translate(3px, -4px) rotate(-55deg) scale(0.8, 1); }

	/* Menu principal */
	#menu-2025 .topmenu {
		display: none;
		transform: translateY(-100%);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s, visibility 0.3s;
	}

	/* Afficher le menu principal lorsque la checkbox principale est cochée */
	#menu-2025 #drop:checked + .topmenu {
		display: block;
		position: absolute;
		top: 100%; /* Au lieu de 130px - cela le positionnera juste en dessous du conteneur parent */
		right: 0;
		background-color: var(--color-bg);
		padding: 0;
		width: 100%;
		max-width: 100vw;
		box-sizing: border-box;
		z-index: 9999;
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}
	/* Styles pour les labels de sous-menus */
	#menu-2025 .toggle {
		display: block;
		width: 100%; /* Le label ne prend que la largeur du contenu */
		height: auto;
		margin: 0;
		justify-content: center;
		align-items: center;
		color: var(--color-text);
		line-height: 60px;
		text-decoration: none;
		border: none;
		cursor: pointer;
		z-index: 9999; /* Assure que le burger est au-dessus */
		padding: 0; /* Espacement autour du texte */
		box-sizing: border-box; /* Inclut le padding dans la largeur totale */
		text-align: left; /* Aligne le texte à gauche */
	}

	/* Cacher les labels de sous-menus et le menu principal */
	#menu-2025 .toggle + a {
		display: none;
	}

	/* Appliquer le fond orange au survol pour tous les tags <a> */
	#menu-2025 a:hover {
		background-color: var(--color-hover); /* Orange WDA */
		color: var(--color-text); /* Texte blanc pour contraste, facultatif */
	}

	/* Appliquer le fond orange uniquement aux labels toggle des sous-menus */
	#menu-2025 ul li > label.toggle:hover {
		background-color: var(--color-hover); /* Orange WDA */
		color: var(--color-text); /* Texte blanc pour contraste, facultatif */
	}

	/* Garder le label du burger menu intact */
	#menu-2025 > nav > label.toggle:hover {
		background-color: transparent; /* Pas de fond orange pour le burger */
		color: inherit; /* Pas de changement de couleur */
	}
	/* Retirer l'effet sur les labels non liés aux sous-menus (comme le burger menu) */
	#menu-2025 > nav > label.toggle {
		width: auto; /* Ne pas forcer la largeur */
		padding: 0; /* Pas d'espacement autour */
	}

	/* Afficher les sous-menus lorsque leurs checkboxes sont cochées */
	#menu-2025 .submenu-checkbox:checked + ul {
		display: block !important;
	}

	/* Ajustements pour les liens en mode mobile */
	#menu-2025 nav a {
		line-height: 60px; /* Largeur de lignes des liens */
		font-size: var(--font-size);
	}

	/* Afficher les éléments de menu en bloc */
	#menu-2025 nav ul li {
		display: block;
		width: 100%; /* Largeur Menus */
	}

	#menu-2025 nav ul li label.toggle {
		padding: 0 0 0 15px; /* Espacement identique */
	}

	#menu-2025 nav ul li a,
	#menu-2025 nav ul li label.toggle {
		display: flex;
		align-items: center; /* Centre verticalement */
		justify-content: flex-start; /* Aligne le texte à gauche */
		height: 60px; /* Uniformise la hauteur */
	}

	/* Styles pour les sous-menus en mode mobile */
	#menu-2025 nav ul ul .toggle,
	#menu-2025 nav ul ul a {
		padding: 0 25px;
		text-align: left; /* Pour aligner le texte à gauche */
		font-size: var(--font-size)!important;
	} /* Liens sous-menus */

	#menu-2025 nav ul li ul li .toggle,
	#menu-2025 nav ul ul a {
		background-color: #212121;
	} /* Fond sous-menus */

	#menu-2025 nav ul ul {
		position: static;
	}

	#menu-2025 nav ul ul li:hover > ul,
	#menu-2025 nav ul li:hover > ul {
		display: none;
	}

	#menu-2025 nav ul ul li {
		display: block;
		width: 100%; /* Largeur sous-menus par rapport aux menus */
	}
}