/* Styles pour les écrans plus larges */
.navigation {
	background-color: white; /* Couleur de fond */
	border-top: 20px solid #2a0a10; /* Bordure supérieure */
	border-bottom: 2px solid black; /* Bordure inférieure */
	display: flex; /* Utilisation de flexbox pour l'agencement */
	position: fixed; /* Position fixée en haut de la page */
	left: 0;
	right: 0;
	top: 0;
	justify-content: space-around; /* Espacement égal des éléments horizontalement */
	align-items: center; /* Alignement vertical au centre */
	/* Ajouter du padding verticalement (haut et bas) et supprimer le padding horizontal (gauche et droite) */
	padding: 5px 0; /* 20px en haut et en bas, 0 à gauche et à droite */
	z-index: 1000;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Style des images à l'intérieur de la barre de navigation */
.navigation img {
	width: 50px; /* Largeur maximale de l'image */
	height: fit-content; /* Hauteur fit-content pour conserver les proportions */
}

/* Style des liens à l'intérieur de la barre de navigation */
.navigation a {
	font-size: 15px; /* Taille de police */
	color: #042123; /* Couleur du texte */
	text-decoration: none; /* Pas de soulignement de texte */
	font-weight: bold; /* Police en gras */
	font-family: 'Montserrat', sans-serif; /* Police de caractères */
}

/* Style des liens au survol de la souris */
.navigation a:hover {
	color: #B22222; /* Couleur du texte au survol de la souris */
}

/* Structure desktop */
.nav-links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.nav-logo { margin-right: 12px; align-items: center; gap: 8px; }
.nav-toggle { display: none; color: #042123; padding: 8px; }


/* Styles pour les écrans plus étroits (ajoutez des media queries appropriées) */
@media screen and (max-width: 768px) {
	.navigation { justify-content: space-between; padding: 8px 12px; flex-wrap: wrap; }
	.nav-toggle { display: inline-block; font-size: 24px; background: transparent; border: none; cursor: pointer; order: -1; }
	.nav-logo { 
		align-items: center;
		transition: all 0.3s ease-in-out;
	}
	.navigation.nav-open .nav-logo {
		position: absolute;
		left: 50%;
		top: 12px;
		transform: translateX(-50%);
	}
	.nav-links { 
		display: flex; 
		flex-direction: column; 
		width: 100%; 
		padding-top: 8px;
		order: 3;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
	}
	.navigation.nav-open .nav-links { 
		max-height: 500px;
		opacity: 1;
	}
	.navigation a { margin: 6px 0; font-size: 16px; }
	.navigation img { width: 40px; height: auto; }
	.navigation p { margin: 0; }
}