*{
	margin:0;
	box-sizing:border-box;
	font-family:HelveticaNeue, Helvetica, sans-serif;
	}

.nav{color:white;
}

.nav__trigger-finger{
	position:fixed;
	top:0;
	right:40px;
	z-index:10;
	display:flex;
	align-items:center;
	width:15px;
	height:10px;
	margin:40px;
	color:hotpink;
	visibility:visible;
	cursor:pointer;
	}

.nav__trigger-finger::before{
	content:"";
	position:absolute;
	top:-5px;
	left:-5px;
	bottom:-5px;
	right:-5px;
	background:hotpink;
	opacity:0;
	z-index:-1;
	transition:opacity 0.3s cubic-bezier(0.75, 0, 0.25, 1);
	}

.nav__trigger-finger span{
	display:block;
	width:100%;
	height:2px;
	transition:transform 1s cubic-bezier(0.75, 0, 0.25, 1);
	background:currentColor;
	}

.nav__trigger-finger span::before,
.nav__trigger-finger span::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	display:block;
	height:2px;
	background:currentColor;
	transition:transform 0.4s cubic-bezier(0.75, 0, 0.25, 1), top 0.4s 0.4s cubic-bezier(0.75, 0, 0.25, 1), background 0.2s cubic-bezier(0.75, 0, 0.25, 1);
	}

.nav__trigger-finger span::before{
	top:0;
	}

.nav__trigger-finger span::after{
	top:calc(100% - 2px);
	}

.nav__trigger-input,
.nav__submenu-trigger-input{
	opacity:0;
	width:0;
	height:0;
	appearance:none;
	position:fixed
	}

.nav__trigger-input:focus+label{
	color:white;
	}

.nav__trigger-input:focus+label::before{
	opacity:1;
	}

.nav__trigger-input:checked+label{
	height:10px;color:white;
	}

.nav__trigger-input:checked+label span{
	transform:rotate(45deg);
	}

.nav__trigger-input:checked+label span::before,
.nav__trigger-input:checked+label span::after{
	top:calc(50% - 1px);
	transition:transform 0.4s 0.4s cubic-bezier(0.75, 0, 0.25, 1), top 0.4s cubic-bezier(0.75, 0, 0.25, 1), background 0.2s cubic-bezier(0.75, 0, 0.25, 1);
	}

.nav__trigger-input:checked+label span::after{
	transform:rotate(90deg);
	}

.nav__trigger-input:checked~ul{
	z-index:9;
	transform:none;
	transition:0.5s cubic-bezier(0.75, 0, 0.25, 1);
	}

.nav__list{
	position:fixed;
	overflow-y:scroll;
	top:0;
	left:0;
	bottom:-220px;
	right:0;
	z-index:-1;
	background:linear-gradient(180deg, #FF512F 10%, #FF512F 50%, #DD2476 90%);
	font-size:25px;
	padding:40px;
	transform:translate(100vw) rotate(45deg);
	transition:0.2s cubic-bezier(0.75, 0, 0.25, 1);
	}

.nav__item{
	list-style:none;
	}

.nav__item+.nav__item{
	margin-top:20px;
	}

.nav__submenu-trigger-input:checked+label::after{
	transform:translateY(10px);
	}

.nav__submenu-trigger-input:checked~ul{
	display:block;
	}

.nav__submenu-trigger-input:focus+label::after{
	transform:translateY(5px);
	}

.nav__submenu-trigger-finger::after{
	content:"";
	display:inline-block;
	border:10px solid transparent;
	border-top-color:white;
	transition:0.4s cubic-bezier(0.75, 0, 0.25, 1);
	}

.nav__link{
	text-decoration:none;
	color:inherit;
	}

.nav__list-child{
	display:none;
	font-size:2rem;
	margin-top:10px;
	padding-left:2rem;
	}
	
/***ajoutés menu***/
.menu {
	list-style:none;
	width:375px;
}


.menu a{
	padding-left:30px;
	font-size:20px;
}

.menu-separator{
	visibility:hidden;
	height:15px;
}

.nav-header {
display: inline-block;
  margin-top: 30px;
  position: relative;
  left: -32px;
  font-size:24px;
}


.menu-cadre-haut{
	border-left: solid white 2px;
  border-top: solid white 2px;
  width: 50px;
  height: 20px;
  float: left;
  visibility:visible;
  margin-top:25px;
}

.menu-cadre-bas{
	border-right: solid white 2px;
  border-bottom: solid white 2px;
  width: 50px;
  height: 20px;
  float: right;
  visibility:visible;
}

.menu-divider {
	height:10px;
}


@media only screen and (max-width:480px){
	
	.nav{
		color:white;
		}
	
	.nav__trigger-finger{
		position:fixed;
		top:0;
		right:0;
		z-index:1002;
		display:flex;
		align-items:center;
		width:15px;
		height:10px;
		margin:40px;
		color:hotpink;
		}
	
	.nav__trigger-finger::before{
		content:"";
		position:absolute;
		top:-5px;
		left:-5px;
		bottom:-5px;
		right:-5px;
		background:hotpink;
		opacity:0;
		z-index:-1;
		transition:opacity 0.3s cubic-bezier(0.75, 0, 0.25, 1);
		}
	
	.nav__trigger-finger span{
		display:block;
		width:100%;
		height:2px;
		transition:transform 1s cubic-bezier(0.75, 0, 0.25, 1);
		background:currentColor;
		}
	
	.nav__trigger-finger span::before,
	.nav__trigger-finger span::after{
		content:"";
		position:absolute;
		left:0;
		right:0;
		display:block;
		height:2px;
		background:currentColor;
		transition:transform 0.4s cubic-bezier(0.75, 0, 0.25, 1), top 0.4s 0.4s cubic-bezier(0.75, 0, 0.25, 1), background 0.2s cubic-bezier(0.75, 0, 0.25, 1);
		}
	
	.nav__trigger-finger span::before{
		top:0;
		}
	
	.nav__trigger-finger span::after{
		top:calc(100% - 2px);
		}
	
	.nav__trigger-input,.nav__submenu-trigger-input{
		opacity:0;
		width:0;
		height:0;
		appearance:none;
		position:fixed;
		}
	
	.nav__trigger-input:focus+label{
		color:white;
		}
	
	.nav__trigger-input:focus+label::before{
		opacity:1;
		}
	
	.nav__trigger-input:checked+label{
		height:10px;
		color:white;
		}
	
	.nav__trigger-input:checked+label span{
		transform:rotate(45deg);
		}
	
	.nav__trigger-input:checked+label span::before,
	.nav__trigger-input:checked+label span::after{
		top:calc(50% - 1px);
		transition:transform 0.4s 0.4s cubic-bezier(0.75, 0, 0.25, 1), top 0.4s cubic-bezier(0.75, 0, 0.25, 1), background 0.2s cubic-bezier(0.75, 0, 0.25, 1);
		}
	
	.nav__trigger-input:checked+label span::after{
		transform:rotate(90deg);
		}
	
	.nav__trigger-input:checked~ul{
		z-index:1001;
		transform:none;
		transition:0.5s cubic-bezier(0.75, 0, 0.25, 1);
		height:100%;
		}
	
	.nav__list{
		position:fixed;
		overflow-y:scroll;
		top:0;
		left:0;
		bottom:0;
		right:0;
		z-index:-1;
		font-size:2rem;
		padding:40px;
		transform:translate(200vw) rotate(45deg);
		transition:0.2s cubic-bezier(0.75, 0, 0.25, 1);
		}
	
	.nav__item{
		list-style:none;
		}
	
	.nav__item+.nav__item{
		margin-top:20px;
		}
	
	.nav__submenu-trigger-input:checked+label::after{
		transform:translateY(10px);
		}
	
	.nav__submenu-trigger-input:checked~ul{
		display:block;
		}
	
	.nav__submenu-trigger-input:focus+label::after{
		transform:translateY(5px);
		}
	
	.nav__submenu-trigger-finger::after{
		content:"";
		display:inline-block;
		border:10px solid transparent;
		border-top-color:white;
		transition:0.4s cubic-bezier(0.75, 0, 0.25, 1);
		}
	
	.nav__link{
		text-decoration:none;
		color:inherit;
		}
	
	.nav__list-child{
		display:none;
		font-size:2rem;
		margin-top:10px;
		padding-left:2rem;
		}
}

:root{
	--width: 100%;
	--height: 100%;
	--border-width: 200px;
	--border-height: 200px;
	}
	
:root{
	--nf1: #0f7b95;
	--nf2: #0bb3aa;
	--nf3: #0dda86;
	--nf4: #1bed0d;
	--nf5: #73ff00;
	--nd1: #ffc979;
	--nd2: #ff8380;
	--nd3: #f2379a;
	--nd4: #567d9a;
	--nd5: #452386;
	--ne1: #330099;
	--ne2: #336699;
	--ne3: #339999;
	--ne4: #33cc99;
	--ne5: #33ff99;
	--ns1: #fe246b;
	--ns2: #c3267b;
	--ns3: #a71787;
	--ns4: #8c26c2;
	--ns5: #0053f7;
	--fd1: #d8ff00;
	--fd2: #fe246b;
	--fd3: #ffa500;
	--full1:#6fcb9f;
	--full2: #6fc9cb;
	}