/* Add a black background color to the top navigation */
.topnav {
	border-top: 1px solid #5084BD;
	border-bottom: 1px solid #5084BD;
	background-color: #F1F1F1;
	margin: 0 auto;
	display: flex;
	justify-content: center; /* Centre horizontalement */
	align-items: center;     /* Aligne verticalement */
	flex-wrap: wrap;         /* Permet le passage à la ligne sur petits écrans */
	overflow: hidden;
}

.topnav a {
	display: flex;          /* Pour que l’icon et le texte soient alignés */
	align-items: center;
	color: #1E6CA0;
	text-align: center;
	padding: 14px 8px;
	text-decoration: none;
	font-size: 17px;
	font-weight: normal;
	margin: 0 4px;          /* petit espacement entre les liens (optionnel) */
	float: none;            /* Supprime les flottants */
}

.topnav a:hover {
	color: #525252;
}

.topnav iconify-icon {
	font-size: 150%;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
	display: none;
}

/* adapatation perso pour menu du bas */
.topnav .fa-exclamation-triangle {
	font-size: 100%;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
	.topnav {
		flex-direction: column;
		align-items: stretch;
		position: relative; /* IMPORTANT pour le positionnement de l’icône */
	}

	.topnav a.icon {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		align-self: flex-end;
		margin-right: 0;
		width: auto;
		border-bottom: none;
  }

	.topnav a:not(:first-child), .menu_dropdown .menu_dropbtn {
		display: none;
	}

	.topnav a.icon {
		align-self: flex-end;
		display: block;
		width: auto;
	}

	.topnav.responsive {
		flex-direction: column;
		align-items: stretch;
	}

	.topnav.responsive a {
		display: flex;
		width: 100%;
		margin: 0;
		border-bottom: 1px solid #ececec;
		justify-content: flex-start;
	}

	.topnav.responsive a.icon {
		border-bottom: none;
		width: auto;
		align-self: flex-end;
	}

	.menu_dropdown {
		width: 100%;
	}

	.menu_dropdown .menu_dropbtn {
		width: 100%;
		text-align: left;
	}

	.menu_dropdown_content {
		position: static; /* ← Ne pas le positionner en absolu */
		display: none;
		width: 100%;
		border: none;
		border-top: 1px solid #ddd;
	}

	.menu_dropdown_content.show {
		display: block;
	}
}

/* Add an active class to highlight the current page */
.active {
	font-weight: bold;
}

/* menu_dropdown container - needed to position the menu_dropdown content */
.menu_dropdown {
	float: left;
	overflow: hidden;
}

/* Style the menu_dropdown button to fit inside the topnav */
.menu_dropdown .menu_dropbtn {
	font-size: 17px;
	border: none;
	outline: none;
	color: #1E6CA0;
	padding: 14px 10px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
}

/* Style the menu_dropdown content (hidden by default) */
.menu_dropdown_content {
	display: none;
	position: absolute;
	background-color: #F1F1F1;
	min-width: 160px;
	z-index: 1;
	border-radius: 0 0 10px 10px;
	border-left: 1px solid #5084BD;
	border-right: 1px solid #5084BD;
	border-bottom: 1px solid #5084BD;
	border-top: 0;
}

/* Style the links inside the menu_dropdown */
.menu_dropdown_content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.menu_dropdown_content a:hover {
	background: none;
}

/* Add a dark background on topnav links and the menu_dropdown button on hover */
.menu_dropdown:hover .menu_dropbtn {
	color: #525252;
	cursor: pointer;
}

/* Add a grey background to menu_dropdown links on hover */
.menu_dropdown_content a:hover {
	color: #7b7b7b;
}

/* Show the menu_dropdown menu when the user moves the mouse over the menu_dropdown button */
.menu_dropdown:hover .menu_dropdown_content {
	display: block;
}