/*header desktop*/
.header{
	position: fixed;
	left: 0;
	height: 100vh;
	width: 300px;
	background-color: white;
	z-index: 11;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	box-shadow: 0 2px 5px 1px rgba(64,60,67,.16);
}

	.header .desktop{
		width: 100%;
		display: flex;
		flex-direction: column;
	}

		.header nav{
			padding: 50px 70px 30px 20px;
		}

		.header #logo{
			width: 180px;
			margin-bottom: 30px;
			overflow: hidden;
		}

.header ul{
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

	.header ul li{
		margin-bottom: 5px;
	}

	.header a{
		display: flex;
		justify-content: flex-end;
	}

.credit{
	color: #939695;
	margin-bottom: 30px;
}

	.credit .social{
		width: 100%;
		display: grid;
		grid-template-columns: repeat(4,30px);
		grid-column-gap: 15px;
		justify-content: center;
	}

		.social svg{
			width: 100%;
			fill: black;
		}

			.social svg path{
				width: 100%;
			}

	.credit p{
		margin: 0;
		font-size: 0.8em;
		text-align: center;
	}

.header_portable{
	display: none;
}



/*animation croix header portable*/
.croix {
	display: inline-block;
	cursor: pointer;
}

.bar1, .bar2, .bar3 {
 	width: 35px;
 	height: 5px;
  	background-color: #333;
  	margin: 6px 0;
  	transition: 0.5s;
}

/* Rotate first bar */
.bar1.active {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.bar2.active {
  opacity: 0;
}

/* Rotate last bar */
.bar3.active {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}



/*Ecran portable*/
	@media all and (max-width:768px){
		.corps.active{
			overflow-y: hidden;
		}

			.header{
				left: -100vw;
				transition: all 0.5s ease-in;
			}

			.header.active{
				left: 0;
				width: 100%;
			}

				.desktop ul{
					
				}

				.header #logo{
					width: 250px;
				}

		.social svg{
			width: 40px;
		}

		.header_portable{
			display: flex;
			justify-content: center;
			background-color: #f8f9fa;
		}

			.header_portable a{
				display: flex;
				justify-content: center;
			}

				.header_portable a svg{
					width: 70%;
					padding: 50px 0;
				}

		.croix{
			z-index: 12;
			position: fixed;
			background-color: white;
			padding: 10px;
			bottom: 10vh;
			right: 5vw;
			box-shadow: 0 2px 5px 1px rgba(64,60,67,.16);
		}
	}
	
/*Ecran PC*/
	@media all and (min-width:768px){
		.header .croix{
			display: none;
		}
	}