header {
	background-image: url("img/logo-feuille.png");
	background-position: left;
	background-size: 300px;
	background-repeat: no-repeat;
	justify-content: space-around;
	align-content: center;

	margin: auto;
	margin-left: 5%;
	margin-right: 5%;
	font-family: georgia, serif;
}

header div {
	display: flex;
}

#logo {
	margin-right: auto;
	margin-left: 5%;
}

nav {
	border-top: 2px rgb(42, 75, 23) solid;
	margin: auto;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 1%;

	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: center;
	margin: auto;
}

nav li {
	list-style-type: none;
}

header a {
	text-align: center;
	display: block;
}

.menu-case, .menu-bouton {
	display: none;
}

@media (max-width: 860px) {
	header {
		position: relative;
		background-position: left top;
		background-size: 35%;
	}

	#logo {
		display: block;
		width: 100%;
		margin: 0;
		padding-top: 25%;
	}
	#logo img {
		display: none;
	}

	.menu-bouton {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 7px;
		width: 34px;
		height: 34px;
		position: absolute;
		top: 28px;
		right: 5%;
		cursor: pointer;
	}
	.menu-bouton span {
		display: block;
		height: 2px;
		background: var(--vert-fonce);
		border-radius: 2px;
		transition: transform 0.2s, opacity 0.2s;
	}

	nav {
		display: none;
		margin: 6px 0 10px 0;
		border-top: 2px solid var(--vert-fonce);
		border-radius: 16px;
	}
	nav ul {
		flex-direction: column;
		padding: 0;
		margin: 0;
	}
	nav li {
		width: 100%;
	}
	nav a {
		padding: 12px 0;
		font-size: 110%;
	}
	.menu-case:checked ~ nav {
		display: block;
	}

	.menu-case:checked ~ .menu-bouton span:nth-child(1) {
		transform: translateY(9px) rotate(45deg);
	}
	.menu-case:checked ~ .menu-bouton span:nth-child(2) {
		opacity: 0;
	}
	.menu-case:checked ~ .menu-bouton span:nth-child(3) {
		transform: translateY(-9px) rotate(-45deg);
	}
}