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

/* Header et menu */

#navigation_wrapper {
	position:relative;
	/*max-width: 1200px;*/
	width: 100%;
	line-height: 1.3;
}

.logo_inner {
	height: 105px;
	background-color: #fff;
	width: 270px;
	float: left;
	padding: 20px;
	position:relative;
	z-index: 2;
}

.logo_inner:after {
	background-color: #fff;
	height: 100%;
	width: 100px;
	position: absolute;
	top: 0px;
	right: -14%;
    transform: skew(-30deg);
	content: "";
	z-index: 1;
}

.titre_site {
	position: absolute;
	top: 20px;
	right: 10px;
	width: 150px;
	z-index: 2;
}
.titre_site a {
	text-decoration: none;	
}
.titre_site h1 {
	font-size: 90%;	
	color: #244952; /* bleu petrole */
}

.logo {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 75px;
	height: auto;	
}

nav {
	width: 100%;	
}

nav ul, nav li {
	list-style-type: none;	
}

nav.navigation_desktop {
	position: relative;
	width: 1200px;
	height: 100%;
	margin: 0px auto;
	text-align: center;	
}

nav.navigation_desktop:after, #contenu:after, .menu_principal:after {
    clear: both;
    content: "";
    display: block;
}

.navigation_desktop li.gauche {
	float: left;
}

.navigation_desktop li.droite {
	float: right;
}

.navigation_desktop li a {
	position: relative;	
	display:inline-block;	
	text-decoration: none;	
	transition: 0.8s all;	
}

.menus {
	float: right;
	width: 820px;
	padding-top: 20px;	
}

.menu_principal:before {
	height: 100%;
	width: 80px;
	background-color: #244952; /* bleu petrole */
	position: absolute;
	z-index: 20;
	top: 0px;
	left: -7%;	
	transform: skew(-30deg);
	content: "";
}

.menu_langues, .menu_principal, .menu_vetos {
	float: right;
}

.menu_langues {
	text-transform: uppercase;
}

.menu_langues .acces_veto a {
	color: #c0003f; /* rouge-rose */
	font-weight: 700;
	padding: 15px 30px;
}

.menu_langues .langues a {
	padding: 15px 5px;
	color: #244952; /* bleu petrole */
}
.menu_langues .langues a.active {
	color: #c0003f; /* rouge-rose */
}
.menu_principal {
	background-color: #244952;	/* bleu petrole */
	width: 820px;
	height: 55px;	
	text-align: right;
	position: relative;
	z-index: 0;
}

.menu_principal ul {
	float: right;	
}

.menu_principal li a {
	color: #fff;
	text-transform: uppercase;
	padding: 17px 0px 12px 0px;
	margin: 0px 25px 0px 25px;
}

.menu_principal li.active a {
	border-bottom: 5px solid #e4491e /* orange */
}

.menu_vetos li a {
	padding: 15px 18px;
	color: #244952; /* bleu petrole */
	font-size: 125%;
	font-weight: 700;
	transition: 0.5s color;
}

.menu_vetos li a:hover {
	color: #153138; /* bleu petrole + fonce */
}

/* menu qui suit le scroll */

#navigation_wrapper.follow_scroll {
	position:fixed;
	width: 100%;
	z-index: 100;
	background-image: url(../images/fond-menu-scroll.svg);
	background-size: cover;
	background-position: center;
	height: 55px;   
}

#navigation_wrapper.follow_scroll .menu_langues {
	display: none;	
}

#navigation_wrapper.follow_scroll .menus {
    padding-top: 0px;
}

#navigation_wrapper.follow_scroll .logo {
    width: 45px;
	top: 6px;
}

#navigation_wrapper.follow_scroll .logo_inner {
    height: 55px;   
	width: 200px; 
}
#navigation_wrapper.follow_scroll .titre_site  {
	top: 5px;
	width: 190px;
	right: -20px;
}
#navigation_wrapper.follow_scroll .titre_site img {
	width: 90px;
}

#navigation_wrapper.follow_scroll .titre_site h1 {
    /*font-size: 80%;*/
	/*display: none;*/
}

#navigation_wrapper.follow_scroll .menu_principal {
	width: 920px;
}

#navigation_wrapper.follow_scroll .menu_vetos {
	background-color: #fff;	
	
	position: relative;
}

#navigation_wrapper.follow_scroll .menu_vetos li a {
    padding: 5px 25px;
	font-size: 105%;
}

#navigation_wrapper.follow_scroll .menu_vetos:before, #navigation_wrapper.follow_scroll .menu_vetos:after {
	background-color: #fff;
	height: 100%;
	width: 25px;
	position: absolute;
	top: 0px;

	content: "";
	z-index: 1;	
}

#navigation_wrapper.follow_scroll .menu_vetos:before {
	left: -2%;
    transform: skew(18deg);
}
#navigation_wrapper.follow_scroll .menu_vetos:after {
	right: -2%;
    transform: skew(-18deg);
}