body{
	display: inline-flex;
}

#header{
	z-index: 1;
	width: $header-width;
	height: 100%;
	padding-top: 1.5rem;
	padding-left: 30px;
	position: fixed;
	background: white;

	#logo{
		padding-bottom: 15px;
	}
	#navbar{
		padding-left: 15px;
		
		.sous-menu{
			height: $fonth2;
			transition: all 0.3s ease-in-out;
			transition-delay: 0.5s;
			& > ol{
				visibility: hidden;
			  opacity: 0;
			  transition: visibility 0.5s, opacity 0.5s linear;
				margin-left: 30px;
				padding-left: 5px;
			}

			&:hover{
				height: 100px;
				transition: all 0.3s ease-in-out;
				& > a {
					text-decoration: underline;
					&::after {
						@include background-nav-sm('../images/trait.svg');
					}
				}
				& > ol{
					visibility: visible;
					transition: all 0.5s linear;
					transition-delay: 0.2s;
					opacity: 1;
				}
			}
		}
		.underline{
			&::before{
				@include background-nav('../images/point_b.svg');
			}
		}
		.block{
			height: 100px;
			transition: all 0.3s ease-in-out;
			&::before{
				@include background-nav('../images/point_b.svg');
			}
			& > a::after {
				@include background-nav-sm('../images/trait.svg');
			}
			ol{
				visibility: visible;
				transition: visibility 0.5s, opacity 0.5s linear;
				opacity: 1;
			}
		}

		ul > li, ol{
			&::before{
				@include background-nav-content-b;
				@include background-nav-b('../images/point.svg');
			}
			.underline{
				&::before{
					@include background-nav('../images/point_b.svg');
				}
			}
			&:hover{
				&::before{
					@include background-nav('../images/point_b.svg');
				}
				&> a{
					text-decoration: underline;
				}
			}
		}
	}
	.separation{
		position: absolute;
		left: 100%;
		width: 1px;
		height: 100%;
		top: 1.5rem;
		background: black;
		&::before{
			@include background-nav-content-s;
			@include background-nav('../images/point_b.svg');
		}
	}
}