@charset "UTF-8";

/*##################################################*/
/*#################### GENERAL #####################*/
/*##################################################*/

body, html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: "OpenSans","Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-weight:100;
	font-style:normal;
	font-size: 1rem;
	color: #333;
}
@media screen and (max-width: 699px) {
	body, html {-moz-text-size-adjust:none;-webkit-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none;}
}
section { width:100%; margin:0; padding:0; overflow:hidden;  position:relative;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
 }
 
h1 { font-weight:bold; text-transform:uppercase; }
h2 { font-weight:bold; text-transform:uppercase; }
h3 { text-transform:uppercase; }
p, cite {  }
a { cursor:pointer; color:#333; text-decoration:none; }
h1 span, h2 span { font-weight:100; }
span.after {background:#333; display:block; width:15%; height:1px; margin:0 auto;}

@media screen and (max-width: 699px) { /*mobile*/
h1 { font-size:1.5rem;  }
h2 { font-size:1.4rem;  }
h3 { font-size:1.1rem; }
p, cite  { font-size:1rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { /*tablette*/
h1 { font-size:2.5rem;  }
h2 { font-size:2.2rem;  }
h3 { font-size:1.87rem; }
p, cite  { font-size:1.25rem; }/*1.19*/
}
@media screen and (min-width: 1350px) { /*desktop*/
h1 { font-size:2.5rem;  }
h2 { font-size:2.2rem;  }
h3 { font-size:1.87rem; }
p, cite  { font-size:1.13rem; }/*1.25*/
}

/*##################################################*/
/*#################### HEADER ######################*/
/*##################################################*/
#header { height:4.2rem; width:100%; background:white; z-index:50;  }
#header nav { height:4.2rem; width:100%; }
#header ul, #header li {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#header ul { display:block; padding:0; }
#header ul.gauche { height:4.2rem; float:left; }
#header ul.droite { float:right; }
#header li { display:block; text-transform:uppercase; overflow:hidden; height:4.2rem; }
#header .gauche li img { width:auto; }
#header ul.droite li.separator { background:none; margin:none; padding:none; border:none; -webkit-transition:none; -moz-transition:none; -o-transition:none; transition:none;}
#header li a { display:block; color:#666;}
#header li a:hover,#header li:hover a {color:#333;}
#header li.reseaux img { width:auto; height:1.9rem; display:none; }
#header li.reseaux img+img { display:inline; }
#burger, #burger2 { cursor: pointer; background-image:url(../images/bouton-menu2.svg); background-position:center; background-repeat:no-repeat; background-color:#FCFF00; -webkit-background-size:50%; -moz-background-size:50%; background-size:50%;  }
@media screen and (max-width: 1349px) {
#burger, #burger span {display:none; width:0; height:0;}
#header { position:relative; }
#header ul { width:100%; background-color:white; }	
#header ul.gauche { border-bottom:1px solid #EEE; }
#header ul.droite { height:0rem; background:rgba(255,255,255,1);  overflow:auto;}
#header li { float:none; border-bottom:1px solid #EEE; }
#header .gauche li{ float:left; width:100%;  }	 
#header .gauche li img { height:3.4rem; margin:0.4rem; margin-left:1.05rem; }	 
#header .droite li { text-align:center; font-size:1.1rem; font-weight:normal; }
#header ul.droite li.separator { height:0; }
#burger2 {display:block; right:0; z-index:60; width:4.2rem; height:4.2rem;  }
#burger2 span { color: rgba(0,0,0,0); font-size:0.3rem; }	
.fixed { position:fixed; top:0; }
.absolute { position:absolute; top:0; }
}
@media screen and (max-width: 699px) {
#header li a { padding:1.55rem 1rem; }
#header li.reseaux a { padding:1.15rem;}
}
@media screen and (min-width: 700px) and (max-width: 1349px) {
#header .droite li { height:5.25rem; }
#header li a { padding:2rem 1rem; }
#header li.reseaux a { padding:1.6rem;}
}
@media screen and (min-width: 1350px) {
#burger2, #burger2 span {display:none;width:0; height:0;}
#header { position:fixed; border-bottom:1px solid #EEE; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#header ul { height:4.2rem;}
#header ul.gauche { margin-left:5.2rem; }
#header li { float:left; }
#header .gauche li img { height:3rem; margin:0.6rem 0; }
#header .droite li { background-image:url(../images/jaune.png); background-repeat:no-repeat;background-position:0 -4.3rem;-webkit-background-size:100% 4.2rem; -moz-background-size:100% 4.2rem; -o-background-size:100% 4.2rem; background-size:100% 4.2rem; }
#header ul.droite li.reseaux { background-image:url(../images/noir.png); }
#header ul.droite li:hover {  background-position:0 0; }
#header ul.droite li.separator { width:4.2rem; height:4.2rem; }
#header li.selected { border-bottom:0.25rem solid rgba(252,255,0,1); }
#header li a { padding:1.5rem 1rem; }
#header li.reseaux a { padding:1.15rem; }
#header li.reseaux:hover img { display:inline; }
#header li.reseaux:hover img+img { display:none; }
#header { -webkit-transition:top 0.5s ease; -moz-transition:top 0.5s ease; -o-transition:top 0.5s ease; transition:top 0.5s ease; }
#header ul.droite li { -webkit-transition:background-position ease 0.5s;-moz-transition:background-position ease 0.5s;-o-transition:background-position ease 0.5s;transition:background-position ease 0.5s;}
#burger {display:block; position: fixed; top: 0; left: 0; z-index:40; width:4.2rem; height:4.2rem; }
#burger span { color: rgba(0,0,0,0); font-size:0.3rem; }	
}

/*##################################################*/
/*#################### LAYOUT ######################*/
/*##################################################*/

/*****COLORWHITE*****/
.colorwhite { color:white; }
.colorwhite .after, .colorwhite .after2 { background-color:white; }

/*****BGCOLOR*****/
.bgffffff { background-color:#ffffff; }
.bgfec601 { background-color:#fec601; }
.bgebebeb { background-color:#ebebeb; }

/*****FOND TEXTURE*****/
.texture { background-color:#ffffff; -webkit-background-size:100%;-moz-background-size:100%;-o-background-size:100%;background-size:100%;  }

@media screen and (max-width: 699px) {
	/*.texture {background-image:url(../images/bg-page_small.jpg);}*/
}
@media screen and (min-width: 700px) and (max-width: 1349px) {
	.texture {background-image:url(../images/bg-page_medium.jpg);}
}
@media screen and (min-width: 1350px) {
	.texture {background-image:url(../images/bg-page_big.jpg);}
}

/*****IMG100*****/
.img100 img { width:100%;height:auto; vertical-align:middle; }

/*****IMG75*****/
.img75 { text-align:center; }
.img75 img { height:auto;vertical-align:middle; }
@media screen and (max-width: 699px) { 
	.img75 img { width:100%; height:auto; vertical-align:middle;  }
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation : portrait) { 
	.img75 img { width:100%; height:auto; vertical-align:middle;  }
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation : landscape) { 
	.img75 img { width:74.7%; height:auto; vertical-align:middle; }
}
@media screen and (min-width: 1350px) { 
	.img75 img { width:74.7%; height:auto; vertical-align:middle;  }
}

/*****TITRE1*****/
.titre1 {
	padding-left:5%; padding-right:5%; 
	text-align:center;
	position:fixed; z-index:-2;
}

@media screen and (max-width: 699px) { 
	.titre1 h1 { margin:0; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
	.titre1 h1 { margin:0 8.35%; }
}
@media screen and (min-width: 1350px) { 
	.titre1 h1 { margin:0 17.66%;}
}

/*****ECART 1*****/
.ecart1 {
	padding-left:5%; padding-right:5%;
	text-align:center;
}
.ecart1 div { margin:1%; overflow:hidden; position:relative; text-align:center; }

@media screen and (max-width: 699px) { 
	.ecart1 h2, .ecart1 h3, .ecart1 p, .ecart1 ul { margin:0; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
	.ecart1 h2, .ecart1 h3, .ecart1 p, .ecart1 ul{ margin:0 8.35%; }
}
@media screen and (min-width: 1350px) { 
	.ecart1 h2, .ecart1 h3, .ecart1 p, .ecart1 ul { margin:0 17.66%; }
}


/*****ECART 2*****/
.ecart2 {
	padding-left:5%; padding-right:5%;
	text-align:center;
}
.ecart2 div { margin:1%; overflow:hidden; position:relative;  }

@media screen and (max-width: 699px) { 
	.ecart2 div { width:98%; margin:0 auto; text-align:center; }
	.ecart2 img { width:40%; height:auto; text-align:left;}
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
	.ecart2 div { width:98%; margin:0 auto; text-align:center; }
	.ecart2 img { width:25%; height:auto; text-align:left;}
}
@media screen and (min-width: 1350px) { 
	.ecart2 div { width:26.1%; float:left; text-align:left; margin-left:6.25%;  }
	.ecart2 div+div { width:59.4%; text-align:left; margin-left:1%; margin-right:6.25%; }
	.ecart2 img { width:50%; height:auto;}
}

/*****ECART 3*****/
.ecart3 {
	padding-left:5%; padding-right:5%;
	text-align:center;
}
.ecart3 div { margin:1%; text-align:center; overflow:hidden; position:relative;  }
.ecart3 h3, .ecart3 h6{ padding-top:1rem; padding-bottom:1rem; text-transform:none; }

@media screen and (max-width: 699px) { 
	.ecart3 h2, .ecart3 p { margin:0; }
	.ecart3 div { width:98%; margin:0 auto; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation : portrait) { 
	.ecart3 h2, .ecart3 p { margin:0 8.35%; }
	.ecart3 div { width:31.33%; float:left;  }
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation : landscape) { 
	.ecart3 h2, .ecart3 p { margin:0 8.35%; }
	.ecart3 div { width:31.33%; float:left;  }
}
@media screen and (min-width: 1350px) { 
	.ecart3 h2, .ecart3 p { margin:0 17.66%; }
	.ecart3 div { width:25%; float:left; }
	.ecart3 .d1 { margin-left:6.25%; margin-right:3.12%;  }
	.ecart3 .d2 { margin-left:3.13%; margin-right:3.12%;  }
	.ecart3 .d3 { margin-left:3.13%; margin-right:6.25%;  }
}


/*##################################################*/
/*#################### SPECIFIC ####################*/
/*##################################################*/


/*****VIDETITRE1*****/
#videtitre1 { pointer-events:none; }

/*****TOPO*****/
#topo ul { list-style:none; text-transform:uppercase; margin:0; padding:0; font-weight:normal; }
#topo li { -webkit-transition:opacity 1s ease;-moz-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease; }

/*****ENBREF*****/
@media screen and (max-width: 699px) { 
	#enbref div img { width:40%; height:auto;}
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation : portrait) { 
	#enbref div img { width:80%; height:auto;}
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation : landscape) { 
	#enbref div img { width:60%; height:auto;}
}
@media screen and (min-width: 1350px) { 
	#enbref div img { width:40%; height:auto;}
}	

/*****CARROUSEL*****/
#carrousel .box { position:relative; left:0px; overflow:hidden; -webkit-transition:left 1s ease;-moz-transition:left 1s ease;-o-transition:left 1s ease; transition:left 1s ease;  }
#carrousel .box > div{ position:relative;float:left; }

#carrousel .bullet { width:100%; margin:0; padding:0; text-align:center; }
#carrousel .bullet li { 
	display:inline-block; 
	list-style:none;  
	width:0.8rem; height:0.8rem; 
	border:1px solid black;
	border-radius:0.8rem;
	margin:0 0.5rem;
	cursor: pointer;
	color:rgba(255,255,255,0);
}
#carrousel .bcurrent { background-color:rgba(0,0,0,1); }

#carrousel .prev, #carrousel .next { background:rgba(255,255,255,0); height:100%;}
#carrousel span { display:block; position:absolute; cursor: pointer; top:0; width:5.25rem; }
#carrousel span img { display:block; margin:0 auto; width:2.62rem; }
#carrousel .prev { left:0px;   }
#carrousel .next { right:0px;  }


@media screen and (max-width: 699px) {
#carrousel .box img { width:96%; height:auto; margin:0 2%; }
#carrousel span { width:2.5rem; }
#carrousel span img { display:none;}
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
#carrousel .bullet li { width:0.8rem; height:0.8rem; border-radius:0.8rem;}
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation : portrait) { 
#carrousel .box img { width:96%; height:auto; margin:0 2%; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation : landscape) { 
#carrousel .box img { width:90%; height:auto; margin:0 5%; }
}
@media screen and (min-width: 1350px) { 
#carrousel .box img { width:80%; height:auto; margin:0 10%; }
}

/*****CARROUSEL2*****/

#carrousel2 .box { position:relative; left:0px; overflow:hidden; -webkit-transition:left 1s ease;-moz-transition:left 1s ease;-o-transition:left 1s ease; transition:left 1s ease;  }
#carrousel2 .box > div{ position:relative;float:left; }

#carrousel2 .bullet { width:100%; margin:0; padding:0; text-align:center; }
#carrousel2 .bullet li { 
	display:inline-block; 
	list-style:none;  
	width:0.8rem; height:0.8rem; 
	border:1px solid black;
	border-radius:0.8rem;
	margin:0 0.5rem;
	cursor: pointer;
	color:rgba(255,255,255,0);
}
#carrousel2 .bcurrent { background-color:rgba(0,0,0,1); }

#carrousel2 .prev, #carrousel2 .next { background:rgba(255,255,255,0); height:100%;}
#carrousel2 span { display:block; position:absolute; cursor: pointer; top:0; width:5.25rem; }
#carrousel2 span img { display:block; margin:0 auto; width:2.62rem; }
#carrousel2 .prev { left:0px;   }
#carrousel2 .next { right:0px;  }


@media screen and (max-width: 699px) {
	#carrousel2 .box img { width:100%; height:auto;  } 
	#carrousel2 span { width:2.5rem; }
	#carrousel2 span img { display:none;}
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
	#carrousel2 .bullet li { width:0.8rem; height:0.8rem; border-radius:0.8rem;}
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation : portrait) { 
	#carrousel2 .box img { width:100%; height:auto; vertical-align:middle; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation : landscape) { 
	#carrousel2 .box img { width:100%; height:auto; vertical-align:middle; }
}
@media screen and (min-width: 1350px) { 
	#carrousel2 .box img { width:100%; height:auto;  }
}

/*##################################################*/
/*#################### FOOTER ######################*/
/*##################################################*/
/*****FOOTER*****/
#footer { height:5.25rem; background:url(../images/border.gif) white repeat-x;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#footer div { position:absolute; top:0; height:5.25rem; overflow:hidden; }
#footer a {display:block; color:#666;}
#footer a:hover { color:#333;}
#footer p { text-transform:uppercase;  }
#footer p span { font-weight:normal;  }
#footer .prev { left:0; text-align:left; }
#footer .next { right:0; text-align:right; }
#footer .prev .fleche { float:left; margin-right:1rem; }
#footer .next .fleche { float:right; margin-left:1rem; }

#footer .fleche { display:block; width:2.62rem; height:2.62rem; margin:0; padding:1.31rem;padding-bottom:1.45rem;float:right; background-color:#fcff00;} 
#footer img { width:2.62rem; height:2.62rem; margin:0; } 
#footer .noir { display:block; }
#footer .blanc {display:none; }

@media screen and (max-width: 699px) { 
#footer div { width:50%;  }
#footer p { display:none;}
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
#footer div { width:50%;  }
#footer p { font-size:1.1rem; padding:1.3rem 1rem; }
}
@media screen and (min-width: 1350px) { 
#footer div { width:40%; } 
#footer p { padding:1rem; }
#footer  a:hover .blanc { display:block; }
#footer a:hover .noir { display:none; }
#footer a  .fleche { 	
	background-image:url(../images/noir.png); background-repeat:no-repeat;
	-webkit-background-size:100% 105%; -moz-background-size:100% 105%; -o-background-size:100% 105%; background-size:100% 105%; 
	-webkit-transition:background-position ease 0.5s; -moz-transition:background-position ease 0.5s; -o-transition:background-position ease 0.5s; transition:background-position ease 0.5s; 
	}
#footer .prev .fleche { background-position:5.25rem; }
#footer .next .fleche { background-position:-5.25rem; }
#footer a:hover .fleche { background-position:center; }
}

/*##################################################*/
/*#################### CORRECTIFS ##################*/
/*##################################################*/

/*****EFFET APPARITION AU SCROLL*****/
@media screen and (min-width: 1350px) { 

h3, p, div {-webkit-transition:opacity 1s ease;-moz-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease; }
.delais05, .delais05 h3, .delais05 p {-webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;transition-delay:0.5s;}
.delais1, .delais1 h3, .delais1 p {-webkit-transition-delay:1s;-moz-transition-delay:1s;-o-transition-delay:1s;transition-delay:1s;}
.delais15, .delais15 h3, .delais15 p {-webkit-transition-delay:1.5s;-moz-transition-delay:1.5s;-o-transition-delay:1.5s;transition-delay:1.5s;}
.delais2, .delais2 h3, .delais2 p {-webkit-transition-delay:2s;-moz-transition-delay:2s;-o-transition-delay:2s;transition-delay:2s;}
}

/*****DECOUPE*****/
img.decoupe  { width:100%; height:auto; vertical-align:middle; }

/*****NOMOBILE*****/
@media screen and (max-width: 699px) { 
	.nomobile { display:none; height:0; width:0; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
	.nomobile { display:none; height:0; width:0; }
}
@media screen and (min-width: 1350px) { 
	.nodesktop { display:none; height:0; width:0; }
}


/****MYDEVICE****/
#mydevice {display:none;}
@media screen and (max-width: 699px) { #mydevice { float:left;} }
@media screen and (min-width: 700px) and (max-width: 1349px) { #mydevice {float:right;} }
@media screen and (min-width: 1350px) { #mydevice {float:none;} }
@media screen and (max-width: 1999px) { #mydevice { position:relative;} }
@media screen and (min-width: 2000px) { #mydevice { position:absolute;} }


img {vertical-align: bottom; text-align:center;}