/* GESTION DE L'AFFICHAGE DU HEADER ET DU BURGER =======*/
/* La gestion du JS est dans /js/nav_adaptative.js 		*/
/*======================================================*/

.js-nav {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	transition: all .4s ease-in-out;
	height: var(--hauteur-nav-desktop-xxl);
}

.js-nav.over{
	box-shadow: 0 7px 9px 4px rgba(70,70,70,.2);
}

.js-nav.inactive{
	transform: translateY(-100%);
}

.js-nav + section,
.js-nav + article,
.js-nav + div {
    margin-top: var(--hauteur-nav-desktop-xxl);
}

.header__nav {
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 1200px) {
	.js-nav + section,
	.js-nav + article,
	.js-nav + div {
	    margin-top: var(--hauteur-nav-desktop-xl);
	}
}

@media screen and (max-width: 992px) {

	.js-nav {
		height: var(--hauteur-nav-mobile);
	}

	.js-nav + section,
	.js-nav + article,
	.js-nav + div {
	    margin-top: var(--hauteur-nav-mobile);
	}

	.header__nav {
		flex-direction: column;
		position: fixed;
		top: var(--hauteur-nav-mobile);
		left: 0;
		width: 100%;
		height:auto;
		padding: 1rem 1.5rem;
		background-color: white;
		overflow: auto;
		line-height: 2rem;
		visibility: hidden;
		transform: translateX(100%);
		transition: all 0.6s cubic-bezier(0.25, 0, 0.45, 1);
	}

	.header__nav span {
		display: none;
	}

	.header__nav.open {
		visibility: visible;
		z-index: 1;
		transform: translateX(0);
		transition: transform 0.4s cubic-bezier(0.25, 0, 0.45, 1);
		border-bottom: solid 1px #999;
	}

.burger {
	position:absolute;
	top:22px;
	right:30px;
	width:40px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.25, 0, 0.45, 1) !important;
}

.burger span {
	display: block;
	background-color: white;
	width: 100%;
	height: 4px;
	margin:8px 0;
	transition: all 0.3s ease-in-out;
}

.burger.active {
	transform: rotate(-180deg);
}

.burger.active span:nth-child(1) {
	transform: translateY(13px) rotate(45deg);
}

.burger.active span:nth-child(2) {
	opacity: 0;
}

.burger.active span:nth-child(3) {
	transform: translateY(-11px) rotate(-45deg);
}

@media screen and (max-width: 720px) {
	.js-nav + section,
	.js-nav + article,
	.js-nav + div {
	    margin-top: var(--hauteur-nav-mobile);
	}
}