#nav-burger[open]{
	margin: 0;
	max-width: none;
	max-height: none;
	overflow: hidden;
	padding: 40px;
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 10000000;
	
	width: 100vw;
	height: 100vh;
	
	border: none;
	background-color: var(--violet);

	display: flex;
	justify-content: flex-start;
	align-items: center;

	/* &::backdrop{
		background-color: var(--violet);
	} */

	a#nav-close{
		display: block;
		position: fixed;
		top: 50px;
		right: 40px;

		padding: 15px;
		border-radius: 30px;
		background-color: var(--jaune);
		transition: all .3s ease-in-out;
		*{
			margin: 0;
		}
		i{
			color: black;
			line-height: 0;
			transition: all .3s ease-in-out;
		}
		&:hover{
			background-color: var(--violet);
			i{
				color: white;
			}
		}
	}
	ul#nav-burger-ul{
		display: flex;
		flex-direction: column;
		gap: 20px;

		padding: 0;
		margin: 0;
		list-style-type: none;

		li a:not(.btn){
			font-size: 1.5em;
			font-variation-settings: "slnt" 0, "wdth" 80, "wght" 500;
			color: white;
		}
		
		li a{
			position: relative;
		}
		li a:not(.btn)::after{
			content: "";
			background-color: var(--jaune);
			height: 3px;
			width: 0%;
			position: absolute;
			bottom: -3px;
			left: 0%;
			transition: all 0.3s ease-in-out;
		}
		li a:not(.btn):hover::after{
			width: 100%;
		}
		a, a:hover{
			text-decoration: none;
		}
		
		a.btn{
			display: block;
			margin: -.2em;
			margin-top: 1em;
			font-size: 1.2em;
			font-variation-settings: "slnt" 0, "wdth" 80, "wght" 700;
		}
	}

}