#navigation {
	position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; z-index: 2;
	display: block; height: calc(100% - var(--wp-admin--admin-bar--height, 0px)); width: 100%; overflow: hidden;
	
	isolation: isolate;
	
	pointer-events: none;
	
	--nav-height: 40px;
}
#navigation:before {
	content: '';
	position: absolute; top: 0; left: 0;
	display: block; height: 100%; width: 100%;
	
	background-color: #000;
	
	opacity: 0; transition: opacity .4s cubic-bezier(0.38, 0.005, 0.215, 1) .4s;
}
body[class*='-menu-open'] #navigation:before {
	opacity: .3; transition: opacity .4s cubic-bezier(0.38, 0.005, 0.215, 1);
	pointer-events: auto;
}

/*-------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

#navigation > .main-nav {
	position: absolute; top: 25px; left: 25px; z-index: 2;
	display: flex; width: calc(100% - 50px); height: 60px;
	flex-direction: row;
	column-gap: 10px;
	
	font-size: 13px;
	font-weight: 500;
}
#navigation > .main-nav > * {
	padding: 10px 15px;
	
	background-color: rgba(255,255,255,.9);
	border-radius: 5px;
	
	pointer-events: auto;
}

/*-------------------------------------------------------------------------------------------------*/

#navigation > .main-nav > .outer-nav {
	position: relative;
	display: flex; flex: 1;
	flex-direction: row;
	align-items: center;
	column-gap: 30px;
}

#navigation > .main-nav > .outer-nav > .home-btn {
	display: block; height: var(--nav-height); width: 185px;
	margin-right: auto;
	
	background-image: url("../../images/logo.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

@media (min-width: 900px) {
	#navigation > .main-nav > .outer-nav > .menu-item {
		position: relative;
		isolation: isolate;

		cursor: pointer;
	}
	#navigation > .main-nav > .outer-nav > .menu-item:before {
		content: '';
		position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1;
		display: block; height: var(--nav-height); width: calc(100% + var(--nav-height));

		background-color: #BCD5E4;
		border-radius: 20px;

		opacity: 0; transition: opacity .2s ease-out;
	}
	#navigation > .main-nav > .outer-nav > .menu-item.current:before,
	#navigation > .main-nav > .outer-nav > .menu-item:hover:before { opacity: 1; }
	#navigation > .main-nav > .outer-nav > .menu-item.dropdown > .label {
		position: relative;
		padding-right: 20px;
	}
	#navigation > .main-nav > .outer-nav > .menu-item.dropdown > .label:after {
		content: '';
		position: absolute; top: 50%; right: 0; transform: translateY(-50%);
		display: block; height: 5px; width: 10px;

		background-image: url("../../images/icons/arrow.down.svg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;

		transition: transform .2s ease-out;
	}
}
@media (max-width: 899.99px) {
	#navigation > .main-nav > .outer-nav > .menu-item { display: none; }
}

.extra-menu-open #navigation > .main-nav > .outer-nav > .extra-menu-btn > .label:after,
.expertises-menu-open #navigation > .main-nav > .outer-nav > .expertises-menu-btn > .label:after,
.sectors-menu-open #navigation > .main-nav > .outer-nav > .sectors-menu-btn > .label:after {
	transform: translateY(-50%) scaleY(-1);
}

#navigation > .main-nav > .outer-nav > .menu-item.career > .label { text-decoration: underline; }
#navigation > .main-nav > .outer-nav > .menu-item.career > .count {
	position: absolute; top: -5px; right: -10px;
	display: block; height: 12px; width: 12px; overflow: hidden;
	
	background-color: #D5ED99;
	border-radius: 50%;
	
	text-align: center;
	line-height: 12px;
	font-size: 7px;
	font-weight: 500;
}

/*-------------------------------------------------------------------------------------------------*/


@media (min-width: 900px) {
	#navigation > .main-nav > .menu-item {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		column-gap: 10px;

		transition: background-color .2s ease-out;
		
		cursor: pointer;
	}
	#navigation > .main-nav > .menu-item:has(.illustration) { padding-left: 20px; }
	#navigation > .main-nav > .menu-item:hover { background-color: #BCD5E4; }

	#navigation > .main-nav > .menu-item > span {}
	#navigation > .main-nav > .menu-item > .illustration {
		position: relative;
		display: block; height: var(--nav-height); width: var(--nav-height); overflow: hidden;

		border-radius: 50%;
	}
}
@media (max-width: 899.99px) {
	#navigation > .main-nav > .menu-item { display: none; }
}

/*-------------------------------------------------------------------------------------------------*/

#navigation > .main-nav > .outer-nav > .extra-menu-btn {
	position: relative;
	display: block; width: var(--nav-height); height: var(--nav-height); overflow: hidden;
	
	background-color: #CAE9CD;
	border-radius: 50%;
	
	color: #000;
	
	cursor: pointer;
	
	isolation: isolate;
	
	--menu-btn-bar-height: 2px;
}
.loaded #navigation > .main-nav > .outer-nav > .extra-menu-btn {
	transition:
		background-color .2s ease-out,
		color			 .2s ease-out;
}

#navigation > .main-nav > .outer-nav > .extra-menu-btn > div {
	position: absolute; left: 50%; transform: translate(-50%, -50%) rotate(0deg);
	width: 50%; height: var(--menu-btn-bar-height);

	background-color: currentColor;
	border-radius: calc(var(--menu-btn-bar-height) / 2);
}
.loaded #navigation > .main-nav > .outer-nav > .extra-menu-btn > div {
	transition:
		top		  .2s ease-out .2s,
		width	  .2s ease-out,
		transform .2s ease-out;
}
#navigation > .main-nav > .outer-nav > .extra-menu-btn > .top { top: 40%; }
#navigation > .main-nav > .outer-nav > .extra-menu-btn > .bot { top: 60%; }

#navigation > .main-nav > .outer-nav > .extra-menu-btn:hover > div {
	transition:
		top		  .2s ease-out,
		width	  .2s ease-out,
		transform .2s ease-out;
}
#navigation > .main-nav > .outer-nav > .extra-menu-btn:hover > .top { top: 50%; transform: translate(-50%, -50%) rotate(0deg); }
#navigation > .main-nav > .outer-nav > .extra-menu-btn:hover > .bot { top: 50%; transform: translate(-50%, -50%) rotate(0deg); }

#navigation > .main-nav > .outer-nav > .extra-menu-btn:hover,
.mobile-menu-open #navigation > .main-nav > .outer-nav > .extra-menu-btn,
.extra-menu-open #navigation > .main-nav > .outer-nav > .extra-menu-btn {
	background-color: #BCD5E4;
}
.mobile-menu-open #navigation > .main-nav > .outer-nav > .extra-menu-btn > div,
.extra-menu-open #navigation > .main-nav > .outer-nav > .extra-menu-btn > div {
	transition:
		top		  .2s ease-out,
		width	  .2s ease-out,
		transform .2s ease-out .2s;
}
.mobile-menu-open #navigation > .main-nav > .outer-nav > .extra-menu-btn > .top,
.extra-menu-open #navigation > .main-nav > .outer-nav > .extra-menu-btn > .top {
	top: 50%; right: calc(50% - var(--menu-btn-bar-height) / 2);
	transform: translateX(-70%) scale(.7) rotate(45deg);
}
.mobile-menu-open #navigation > .main-nav > .outer-nav > .extra-menu-btn > .bot,
.extra-menu-open #navigation > .main-nav > .outer-nav > .extra-menu-btn > .bot {
	top: 50%; left: calc(50% + var(--menu-btn-bar-height) / 2);
	transform: translateX(-30%) scale(.7) rotate(-45deg);
}

/*-------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

#navigation > .inner-nav {
	position: absolute; top: 95px; left: 25px; right: 25px; transform: translateY(-30px); z-index: 1;
	display: block; overflow: hidden;
	padding: 10px;

	background-color: rgba(255,255,255,.9);
	border-radius: 5px;

	opacity: 0;

	isolation: isolate;

	transition:
		opacity	  .4s cubic-bezier(0.38, 0.005, 0.215, 1),
		transform .4s cubic-bezier(0.38, 0.005, 0.215, 1);
}

#extra-menu,
#expertises-menu,
#sectors-menu {
	height: 420px;
}
#mobile-menu {
	bottom: 25px;
}
.extra-menu-open #extra-menu,
.expertises-menu-open #expertises-menu,
.sectors-menu-open #sectors-menu,
.mobile-menu-open #mobile-menu {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

@media (min-width: 900px) {
	#navigation > .inner-nav > .swiper {
		height: 100%; width: 100%;
	}
	#navigation > .inner-nav > .swiper .swiper-slide {
		position: relative;
		display: flex; width: 330px; overflow: hidden;
		flex-direction: column;
		justify-content: flex-end;
		row-gap: 25px;
		padding: 25px 25px 80px;

		border-radius: 3px;

		isolation: isolate;
	}
	#navigation > .inner-nav > .swiper .swiper-slide > .illustration {
		position: absolute; top: 0; left: 0; z-index: -1;
		height: 100%; width: 100%;
	}
	#navigation > .inner-nav > .swiper .swiper-slide > .illustration:after {
		content: '';
		position: absolute; top: 0; left: 0; z-index: 1;
		display: block; height: 100%; width: 100%;

		background-image: linear-gradient(to bottom, transparent 40%, #000 100%);

		opacity: .6;
	}
	#navigation > .inner-nav > .swiper .swiper-slide > .label {
		font-size: 25px;
		font-weight: 500;
		color: #FFF;
	}
	#navigation > .inner-nav > .swiper .swiper-slide:before {
		content: '';
		box-sizing: border-box;
		position: absolute; bottom: 15px; right: 15px; transform: scale(0.9);
		display: block; height: 40px; width: 40px; overflow: hidden;
		padding: 10px;


		background-color: #D5ED99;
		background-image: url("../../images/icons/cta-arrow.svg");
		background-origin: content-box;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		border-radius: 50%;
	}
	#navigation > .inner-nav > .swiper .swiper-slide:after {
		content: 'Je découvre';
		position: absolute; bottom: 15px; right: 40px; transform: translateX(0);
		padding: 0 15px;

		background-color: #D5ED99;
		border-radius: 20px;

		line-height: 40px;
		font-size: 18px;
		font-weight: 500;

		opacity: 0;

		transition:
			transform .2s ease-out,
			opacity	  .2s ease-out;
	}
	#navigation > .inner-nav > .swiper .swiper-slide:hover:after {
		transform: translateX(-5px);
		opacity: 1;
	}
}
@media (max-width: 899.99px) {
}