@charset "utf-8";
/* CSS document */

/* menu burger */

#ouvrir {
	max-width:75px;
	display:none;
}

#fermer {
	display:none;
}

/* menu dans le header page desktop */

header nav {
	margin:auto 15% auto auto;
}

header nav ul {
	list-style-type: none;
	display: flex;
	justify-content: space-between;
	width: 35%;
}

header nav ul li {
	padding: 5%;
}

header nav ul li a {
	text-decoration: none;
	color: black;
	font-size: 1.65em;
	font-weight: 500;
}

header nav ul li a:hover {
	color: #ff9933;
	border-bottom: 2px solid #748da6;
}

#accueil, #accueil:hover {
	color: #748da6;
	border-bottom: 0;
}


@media screen and (max-width:1200px) {

	#ouvrir {
		display:block;
		position:static;
		margin-top:5px;
		margin-left:10px;
	}

	#fermer {
		display:block;
		position:fixed;
		top:.25%;
		left:3.85%;
		font-size:5em;
		color:#ff9933;
		background-color:transparent;
		border:none;
	}

	header nav.open{
		transform:translateX(0px);
	}

	header nav{
        position:fixed;
        top:0;
        left:0;
        background-color: rgba(0,0,0,.9);
        width:100%;
        height:100vh;
        transform:translateX(-1500px);
        transition:transform 0.25s ease-in-out;
        z-index:2;
    }

    header nav ul{
    	flex-direction: column;
        height:auto;
        margin-top:200px;
        margin-left:75px;
    }

    header nav ul li, header nav ul li a {
        height:auto;
		font-size: 1.5em;
		color:#748da6;
		line-height: 2em;
    }

    header nav ul li a:hover {
	color: #748da6;
	border-bottom: 0;
	}

}