menu {
	background-color: var(--fond-menu-footer);
	padding: 0.5rem 0 0.5rem 0;
	margin: 0;
	/* Rendre le menu collant */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	border-bottom: 1px solid;
	border-color: var(--gris-clair);
}

.menu-content {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0rem;
	display: flex;
	justify-content: left;
	align-items: center;
}
	.menu-content .cartes {
		flex-shrink: 0;  /*Le logo ne rétrécit pas */
	}

	.menu-content nav {
		flex: 1;  /*Prend tout l'espace restant */
	}
		.menu-content nav ul {
			display: flex;
			flex-direction: row;
			/*gap: 6rem;*/
			list-style: none;
			margin: 0;
			padding: 0 3rem 0 3rem;
			justify-content: space-between;
		}

.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
}

nav {
	padding: 0rem;
}
	nav ul {
		padding: 0;
		list-style: none;
		display: flex;
	}

nav a {
	color: var(--gris-clair);
	text-decoration: none;
	padding: 0 0 0.5rem 0;
	border-bottom: 2px solid transparent;
	font-size: 1.2em;
}
	nav a.active {
		color: var(--blanc);
		border-bottom-color: var(--blanc);
	}
	nav a:hover {
		color: var(--vert);
		border-bottom-color: var(--vert);
	}

/*	Mode mobile */
@media (max-width: 768px) {

	.cartes {
		order: 1;
		margin: 0 auto;
	}

	.menu-content {
		display: flex;
		align-items: center;
		position: relative;
	}

		.menu-content nav {
			display: none;
			position: absolute;
			width: 100%;
			background: var(--fond-footer);
			order: 3;
		}
			.menu-content nav.open {
				display: block;
				background: var(--fond-menu-footer);
				top: 65px;
			}

		.menu-content nav ul {
			display: flex;
			flex-direction: column;
			gap: 0rem;
			width: 100%;
			padding: 0 0 0 0;
		}

	.menu-content nav li {
		border-bottom: 1px solid var(--gris-clair);
		display: flex;
		align-items: center; /* centrage vertical */
		justify-content: center;
		padding-top: 1rem;
		padding-bottom: 1rem;
		width: 100%
	}
	n.menu-content av li:hover {
		border-bottom-color: var(--vert);
	}

	.menu-content nav a {
		padding: 1rem;
		font-size: 2em;
	}
		.menu-content nav a.active,
		.menu-content nav a:hover {
			border-bottom: none;
		}

	.menu-toggle {
		order: 2;
		display: block;
		border: none;
		cursor: pointer;
		border: 1px solid var(--gris-fonce);
		margin-right:2rem;
	}
		.menu-toggle span {
			display: block;
			width: 25px;
			height: 3px;
			background: var(--gris-clair);
			margin: 5px 0;
		}	
}