/* ------------------------------------------- */
/* --- Menu horizontal supérieur (header) --- */
/* ----------------------------------------- */

.entete {
	background-color: #7F1525;
	position: fixed;
	width: 100%;
	z-index: 5;
	animation: 2s anim-titre ease-out;
}

@keyframes anim-titre {
	0% {
		opacity: 0;
		transform: translateY(-80%);
	}
	20% {
		opacity: 0;
	}
	50% {
		opacity: 1;
		transform: translateY(0%);
	}
	100% {
		opacity: 1;
		transform: translateY(0%);
	}
}

/* Lien vers l'accueil à gauche */

.accueil {
	display: block;
	float: left;
	text-decoration: none;
	margin: 10px 0 5px 5px;
	line-height: 40px;
}

.accueil img {
	width: 45px;
	height: 45px;
	float: left;
	margin-top:-5px;
	background-color:#F5DDD2;
}

.accueil span {
	font-family: "Stalinist One", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.5rem;
	letter-spacing: -2px;
	color: #F5DDD2;
}

.accueil:hover span {
  color: #fff;
}

.accueil:hover img {
  background-color: #fff;
}


/* Liens vers les autres pages à droite ou en menu "hamburger" */

.entete ul {
	background-color: #7F1525;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

.entete li a {
	display: block;
	padding: 15px 20px;
	color: #F5DDD2;
	font-family: "Audiowide", sans-serif;
	font-weight: bold;
	text-decoration: none;
}

.entete li a:hover,
.entete .btn-menu:hover {
	color: #fff;
}

.entete .menu {
	clear: both;
	max-height: 0;
	transition: max-height .2s ease-out;
}

/* menu "hamburger" */

.entete .hamburger-menu {
	cursor: pointer;
	display: inline-block;
	float: right;
	padding: 28px 20px;
	position: relative;
	user-select: none;
}

.entete .hamburger-menu .navicon {
	background: #F5DDD2;
	display: block;
	height: 3px;
	position: relative;
	transition: background .2s ease-out;
	width: 20px;
}

.entete .hamburger-menu .navicon:before,
.entete .hamburger-menu .navicon:after {
	background: #F5DDD2;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
}

.entete .hamburger-menu .navicon:before {
	top: 5px;
}

.entete .hamburger-menu .navicon:after {
	top: -5px;
}

.entete .btn-menu {
	display: none;
}

.entete .btn-menu:checked ~ .menu {
	max-height: 240px;
}

.entete .btn-menu:checked ~ .hamburger-menu .navicon {
	background: transparent;
}

.entete .btn-menu:checked ~ .hamburger-menu .navicon:before {
	transform: rotate(-45deg);
}

.entete .btn-menu:checked ~ .hamburger-menu .navicon:after {
	transform: rotate(45deg);
}

.entete .btn-menu:checked ~ .hamburger-menu:not(.steps) .navicon:before,
.entete .btn-menu:checked ~ .hamburger-menu:not(.steps) .navicon:after {
	top: 0;
}


/* Passage du menu "hamburger" au menu horizontal à droite */
@media (min-width: 49em) {
	.entete li {
		float: left;
	}
  
	.entete li a {
		padding: 15px 10px;
	}
  
	.entete li:last-child a {
		margin-right: 25px;
	}
	
	.entete .menu {
		clear: none;
		float: right;
		max-height: none;
	}

	.entete .hamburger-menu {
		display: none;
	}
}