/* 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);
}

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

/************** HEADER ***************/
.nav-principale {
  display: flex;
  justify-content: space-around;
  column-gap: 2rem;
}

.nav-principale li {
  display: block;
}

.item-nav-top.closed .secteur__enfants{
	display:none;
}

/************** FOOTER ***************/
footer .nav-principale {
	flex-direction: column;
	gap: 1rem;
}

.nav-footer {
	display: grid;
	gap: 1rem;
}

footer ul.nav-principale {
	padding-left: 0;
}

footer ul.nav-principale a:hover,
footer ul.nav-principale .active a {
	color: var(--theme-vert);
}

.nav-footer li {
  display: block;
} 


/************** MOBILE ***************/
@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-principale,
	nav .nav-principale {
		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-principale span,
	nav .nav-principale span {
		display: none;
	}

	header .nav-principale.open,
	nav .nav-principale.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;
	}

	.menu-is-open{
		overflow: hidden;
	}

	.burger {
		position:absolute;
		top:10px;
		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(-12px) rotate(-45deg);
	}

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