﻿@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; background-color:white;
-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; }
}
@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 ######################*/
/*##################################################*/

/*****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);}
}

/*****BGCOLOR*****/
.bgfcff00 { background-color:#fcff00; }
.bgebebeb { background-color:#ebebeb; }

/*****IMG100*****/
.img100 img { width:100%;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;
}

@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%; }
}

/*##################################################*/
/*#################### SPECIFIC ####################*/
/*##################################################*/

/*****VIDETITRE1*****/
#videtitre1 { pointer-events:none; background-color:rgba(255,255,255,0); }

#legacy span, #credits span { font-weight:normal;}

/*##################################################*/
/*#################### 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:100%;  }
#footer .next { display:none;}
#footer p { font-size:1.1rem; padding:1.3rem 1rem; }
}
@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; }
img.grisbas { background-color:#ebebeb; }
img.jaunebas {background-color:#fcff00; }

/****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;}
