#main-navigation {
	display: none;

	ul, li {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	.menu a {
		font-size: 12px;
	}

	/** Premier niveau */
	.menu > .menu-item {
		float: left;
		position: relative;

		> a {
			padding: 2.4em 1.4em;
			height: 100%;
			display: block;
			text-transform: uppercase;
			color: $color__text-main;
			@include transition();
			font-weight: 600;
		}
		&.current_page_item > a,
		&.current-menu-item > a,
		&.current_page_ancestor > a,
		&.current-menu-ancestor > a {
			color: $color__primary;
		}
	}

	/** Second niveau */
	.menu > .menu-item:hover > .sub-menu {
		opacity: 1;
		top: 100%;
		pointer-events: all;
	}
	.menu > .menu-item > .sub-menu {
		position: absolute;
		opacity: 0;
		top: 110%;
		pointer-events: none;
		@include transition();
		background: #2b2b2b;
		z-index: 901;

		> .menu-item {
			position: relative;
			&:first-child > a {
				padding-top: 1.4em;
			}
			&:last-child > a {
				padding-bottom: 1.4em;
			}
		}
		a {
			padding: 0.6em 1.6em;
			display: inline-block;
			width: 160px;
			color: rgba(255,255,255,0.8);
			text-transform: uppercase;
			@include transition();
			&:hover {
				color: rgba(255,255,255,0.4);
			}
		}
	}

	/** Troisieme niveau */
	.menu > .menu-item > .sub-menu > .menu-item:hover > .sub-menu {
		opacity: 1;
		left: 100%;
		pointer-events: all;
	}
	.menu > .menu-item > .sub-menu > .menu-item > .sub-menu {
		position: absolute;
		opacity: 0;
		top: 0;
		left: 110%;
		pointer-events: none;
		@include transition();
		border-left: 1px solid rgba(0,0,0,0.1);
		background: #2b2b2b;
		padding: 0.8em 0;
		z-index: 902;
	}

	/** Les niveaux suivants n'existent pas */
	.menu > .menu-item > .sub-menu > .menu-item > .sub-menu .sub-menu {
		display: none;
	}

	.menu-item.menu-item-has-children {
		> a:after {
			display: inline-block;
			vertical-align: middle;
			@extend .fas;
			content: '';
		}
	}

	// Fleche Sous menu, premier niveau
	.menu > .menu-item.menu-item-has-children {
		> a:after {
			font-family: 'Font Awesome 5 Free';
			font-weight: 600;
			content: fa-content($fa-var-angle-down);
			margin-left: .5em;
			margin-bottom: .25em;
			color: rgba(0,0,0,.4);
		}
		&:hover > a:after {
			content: fa-content($fa-var-angle-up);
		}
	}
	// Fleche Sous menu, second niveaux
	.menu > .menu-item > .sub-menu > .menu-item.menu-item-has-children {
		> a:after {
			font-family: 'Font Awesome 5 Free';
			font-weight: 600;
			content: fa-content($fa-var-angle-right);
			position: absolute;
			right: 1em;
			top: 50%;
			transform: translateY(-80%);
			color: rgba(255,255,255,.4);
		}
	}
	// Pas de fleches après les autres niveaux
	.menu > .menu-item > .sub-menu > .menu-item .menu-item.menu-item-has-children {
		> a::after {
			display: none;
		}
	}
}