/*********************************
	HEADER
*********************************/
.header{
position:fixed;
top: 0;
width:100%;
margin:auto;
z-index:100;
/*overflow: hidden;*/
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;}

.header .conteneur-header{
width: 56.25%;
min-width:1080px;
height:60px;
margin: 0 auto;
border-radius:5px;
background-color:rgba(0, 0, 0, 0.40);}

.header .logo-menu{
display:none;}

.header nav, .header.header-anim .logo-menu{
display: inline-block;
position: relative;}

/*Centrage vertical de l'image logo*/
.header.header-anim .logo-menu, .reseaux-menu{
height:60px;
line-height:60px;
text-align:center;}
.header.header-anim .logo-menu img, .reseaux-menu img{
vertical-align:middle;}

.header nav{
width:100%;}

.header nav ul li a, .header nav ul li span{
font-size:18px;
color:white;
text-transform:uppercase;}

.header nav span{
cursor:default;}

.header nav ul li a:hover, .header nav span:hover{
color:#f7941d;}

/*Li éléments de liste*/
.header nav ul li{
display: inline-block;
padding: 0 2.3%;
background:url(img/filet-menu.jpg) no-repeat left 50%;
position:relative;}

.header nav ul li:first-child{
background:none;}

.header nav ul .reseaux-menu{
padding:0 2% 0 5%;}

.header nav ul .tel-menu{
background:none;}
.header nav ul .tel-menu a{
font-size:23px;
color:#f7941d;}

/*Centrage vertical des éléments, avec la hauteur du header*/
.header nav a, .header nav span, .header.header-anim .logo-menu{
line-height: 60px;}



/*********************************
	Exclusivement pour le menu avec le logo :
	Menu à la descente au scroll sur la page d'accueil
	Menu sur les autres pages
*********************************/
.header.header-anim {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;}

.header.header-anim .conteneur-header {
width:65%;
min-width:1179px;}

.header.header-anim .logo-menu{
float:left;
width:25%;}

.header-anim nav{
width:75%;
float:right;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;}

.header.header-anim nav ul li{
padding: 0 2%;}

.header.header-anim .reseaux-menu img {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
width:25px;}

.header.header-anim nav ul .tel-menu a{
font-size:21px;}

.header.header-anim nav ul .reseaux-menu{
padding:0 2%;}


.header.header-fond-noir{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
background-color: black;}


/*********************************
	SOUS MENU
*********************************/
.header nav li .ss-menu{
width:33em;
background:#313842;
padding:10px 1% 10px 1%;
top:58px;
border-radius:6px;}

.header nav li .ss-menu li{
text-align:left;
min-height:25px;
display:block;
background:none;
height:auto;
margin:10px auto;
width:90%;
border-bottom:1px solid black;
padding:5px 0;}

.header nav li .ss-menu li:last-child{
border-bottom:none;}

.header nav ul li .ss-menu li a{
text-transform:none;
line-height:1.1em;}

.header nav ul li .ss-menu li:last-child{
margin-bottom:0;}

.header nav ul li  ul {
position: absolute;
left: -9999px;}

.header nav ul > li.hover > ul {
left: 0;}

/*********************************
	toggleMenu
*********************************/
.toggleMenu {
padding: 7px 12px;
color: #fff;
position:absolute;
top:0;
right:0;
z-index:2;
background:#202020;
background:linear-gradient(to top, #202020, #3d3d3d);}

/*********************************
	ECRANS MOINS DE 1180 px
*********************************/
@media (max-width: 1250px) {

	.header.header-anim .conteneur-header {
	width:100%;
	min-width:200px;}
	
	.header.header-anim nav ul li a, .header.header-anim nav ul li span{
	font-size:15px;}
	
	.header.header-anim nav ul .tel-menu a{
	font-size:15px;}
	
	.header.header-anim nav ul .reseaux-menu{
	padding:0 2%;}

}
/*********************************
	ECRANS MOINS DE 1080 px
*********************************/
@media (max-width: 1080px) {

	.header .conteneur-header{
	min-width:200px;
	width:100%;}
	
	.header nav{
	min-width:200px;
	width:100%;}
	
	.header nav{
	text-align:left;}
	
	.header nav ul li{
	background:none;}
	
	.header nav ul li a, .header nav ul li span{
	font-size:15px;}
	
	.header nav ul .tel-menu a{
	font-size:16px;}
	
	.header nav ul .reseaux-menu img{
	width:30px;}
	
	.header nav ul .reseaux-menu{
	padding:0 2%;}
	
	/*Menu avec logo*/
	.header.header-anim nav, .header.header-anim .logo-menu{
	width:100%;
	float:none;
	margin:auto;}
	
	.header.header-anim .conteneur-header{
	height:125px;}
	
}

/*********************************
	ECRANS MOINS DE 1000 px
*********************************/
@media (max-width: 1000px) and (min-width: 685px) {

	.nav > li > span {
	background-image: url("img/downArrow.png");
	background-repeat: no-repeat;
	background-position: 95% 50%;
	padding-right:17%;}
	
	.ss-menu{
	width:85%;
	margin:0 auto;}
	
}

/*********************************
	ECRANS MOINS DE 850 px
*********************************/
@media (max-width: 850px) {

	.header nav ul li{
	padding:0 1.5%;}
	
	.header nav ul li a, .header nav ul li span{
	font-size:15px;}
	
	.header nav ul .reseaux-menu img{
	width:25px;}
	
	.header nav ul .tel-menu a{
	font-size:15px;}
	
	/*Menu avec logo*/
	.header.header-anim nav ul li{
	padding:0 1%;}
	
	.header.header-anim nav ul .reseaux-menu{
	padding:0 0 0 2%;}
	
}

/*********************************
	ECRANS MOINS DE 750 px
*********************************/
@media (max-width: 750px) {
	.header nav ul li{
	padding:0 1%;}
	.header nav ul .tel-menu a{
	font-size:14px;}
	
}


/*********************************
	ECRANS MOINS DE 685 px
*********************************/

@media screen and (max-width: 685px) {
	.header .conteneur-header, .header.header-anim .conteneur-header,  .header.header-fond-noir{
	background:none;}
	
	.header nav{
	position:absolute;
	top:32px;
	right:0;
	background:#202020;
	background:linear-gradient(to top, #202020, #3d3d3d);}
	
	.header.header-anim .logo-menu{
	display:none;}
	
    .active {
    display: block;}
	
	.header nav ul li{
	display:block;
	height:auto;
	padding:0;}
	
    .header nav ul > li {
	float: none;
	border-top: 1px solid #fff;}
	
    .header nav ul li:first-child{
	border-top:none;}

    .header nav ul li li .parent, .header nav ul > li > .parent, .header nav ul li span{
    background: url("img/downArrow.png") no-repeat 95% 50%;}
	
	.header nav ul > li.hover > ul , .header nav ul li li.hover ul {
	position: static;}
	
	.header nav ul > li > a, .header nav ul li span, .header.header-anim nav ul > li > a, .header.header-anim nav ul li span {
    display: block;
	font-size:19px;}
	
	.header nav ul .reseaux-menu a, .header.header-anim nav ul .reseaux-menu a{
	display:inline;}
	
	.header nav ul .reseaux-menu .parent{
	background:none;}
	
	.header nav ul .reseaux-menu{
	padding-top:5px;
	line-height:20px;}
	
	.header nav ul .tel-menu a,
	.header.header-anim nav ul .tel-menu a{
	font-size:18px;}
	
	/*Sous menu*/
	.header nav li .ss-menu{
	width:90%;
	padding:0;
	margin:auto;}
	
	.header nav li .ss-menu li{
	margin:5px auto;
	border-bottom:0;}
	
	.header nav ul li li a, .header.header-anim nav ul li li a {
	color:#f7941d;
	font-size:16px;
	width:90%;
	margin:auto;}
	
	.header nav ul li .ss-menu li a{
	line-height:2.1em;}
	
	.header nav ul li li, nav ul li ul li:first-child{
	background:#313842;}
	
	/*Menu avec logo*/
	.header.header-anim nav, .header.header-anim .logo-menu{
	margin:35px auto 0 auto;}
	
	.header.header-anim nav{
	top:-3px;}
}