/******COULEURS
Bleu foncé:#43577D;
Bleu clair:#C6D4E2;
Dégradé blanc
	background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.9));
	background-image: -o-linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.9));
	background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.9));
******/

/*BALISES GÉNÉRIQUES*/

*{
	padding:0px;
	margin:0px;
	outline:none;
	box-sizing: border-box;
}
body{
	font-family: 'Open Sans', sans-serif;
	background-color:#C6D4E2;
	background-image: linear-gradient(to bottom, white 8px, transparent 1px);
	background-size: 60px 60px;
	height:100%;/*prendre la hauteur des divers navigateurs*/
	}
a{
	text-decoration:none;
	color:inherit;/*garde la couleur de son parent*/
	}
h2{
	font-size: 2.1em;
	}
img{
	vertical-align:middle;
	max-width:100%;/*Redimensionnement des images (en conservant le ratio)*/
	height:auto;/*Redimensionnement des images (en conservant le ratio)*/
	border:none;
	}
.clear{
	clear:both;
	}
.text{
	font-size: 1.5em;
	}
.align-right, .align-right-introduction{
	text-align:right;
	}
.text-color-blue{
	color:#43577D;
	}
.text-color-white{
	color:#ffffff;
	}
.text-color-cyan{
	color:#00C9FF;
	}
.text-bold{
	font-weight:700;
	}
 .text-resized{
	font-size:1.3em;
	}

.anchor{/*spécifier des zones pour les ancres qui sont décalées de la hauteur du header toujours visible*/
	transform:translateY(-127px);
	-ms-transform:translateY(-127px); /* IE 9 */
	-moz-transform:translateY(-127px); /* Firefox */
	-webkit-transform:translateY(-127px); /* Safari and Chrome */
	-o-transform:translateY(-127px); /* Opera */
}

/***EFFET lire la suite***/
#more, #more2, #more3 {
	display: none;
}
#myBtn, #myBtn2, #myBtn3{
	background-color:#ffffff;
	color:#43577D;
	border-radius:10px;
	padding:10px;
	border:none;
}

/***ZONE HEADER***/

#header{
	position:fixed;	/*le header est tjs visible dans le haut de la fenêtre*/
	z-index:100;
	background-color:#C6D4E2;
	top:0px;
	left:10%;/*centrage horizontal*/
	right:0px;/*centrage horizontal*/
	width:90%;/*centrage horizontal*/
	height:128px;
	border-bottom:8px solid #fff;
	border-left:8px solid #fff;
	}
.logo-header a{
	position:fixed;
	z-index:200;
	right:0;
	top:0;
	width:450px;
	height:105px;
	margin:7px 50px 8px 0px;
	text-indent:-2000px;
	font-size:3px;
	background-image:url(../images/logo-300x70-OK.svg);
	background-position:center left;
	background-size: cover;
	background-repeat:no-repeat;
	color:#C6D4E2;
	float:right;
	}
.main-nav{
	position:fixed;
	z-index:200;
	top:15%;
	left:0%;
	height:16vw;
    width: 32vw;
	color:#C6D4E2;
	display:table;
	-moz-transition-duration:0.3s;
	-webkit-transition-duration:0.3s;
	transition-duration:0.3s;
	-moz-transform:translateX(-16vw);
	-webkit-transform:translateX(-16vw);
	transform:translateX(-16vw);
	background-image:url(../images/fond_menu.svg);
	background-position:center left;
	background-repeat:no-repeat;
	}
.nav{
	display:table-cell;
	vertical-align:middle;
	width:50%;
	}
.nav li{
	display:block;
	margin:0px;
	padding:10px 0px;
	}
.nav .subnav a{
	background-image:url(../images/planche_nav1.svg);
	background-repeat:no-repeat;
	background-position:left center;
	background-size:20px;
	display:block;
	padding-left:26px;
	font-weight:bold;
	font-size:20px;
	min-height:40px;
	line-height:40px;
	text-align:left;
	float:left;
	width:100%;
	overflow:hidden;
	}
.nav_triangle{
	display:table-cell;
	vertical-align:middle;
	width:50%;
	cursor:pointer;
	position:relative;
}
.nav_icon{
	top:0;
	bottom:0;
	height:100%;
	width:auto;
	vertical-align:middle;
	background-image:url(../images/planche_menu4.svg);
	background-repeat:no-repeat;
	background-position:left center;
	background-size:contain;
	}
.nav_icon:hover{
	background-image:url(../images/planche_menu5.svg);
	}
/***EFFECTS WITH--SIDEBAR***/
.with--sidebar .main-nav{
	-moz-transition-duration:0.3s;
	-webkit-transition-duration:0.3s;
	transition-duration:0.3s;
	-moz-transform:translateX(0vw);
	-webkit-transform:translateX(0vw);
	transform:translateX(0vw);
	}
.with--sidebar .nav_icon{
	background-image:url(../images/planche_nav3.svg);
	}
.with--sidebar .nav_icon:hover{
	background-image:url(../images/planche_nav4.svg);
	}
.with--sidebar .site-cache{
	position:absolute;
	z-index:150;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background-color:rgba(0,0,0,0.3);
	}
.site-container{
	position:relative;
	overflow:hidden;
	margin-left:0px;
	width:100%;
	background-image:url("../images/marge-80x300.svg");
	background-repeat:repeat-y;
	background-position:left top;
	background-size:80px 300px;
	}	
.left-side{
	background-image:url(../images/marge-10x10.svg);
	background-repeat:repeat-x;
	background-position:left top;
	background-size:80px;
	/*background-color:#C6D4E2;*/
	position:relative;
	width:10%;
	padding-top:80px;
	min-height:100vh;
	height:auto;
	float:left;
	}
.right-side{
	width:90%;
	background-color:#C6D4E2;
	float:left;
	margin-top:88px;
	border-left:8px solid #ffffff;
	}	

#cover{
	position:relative;
	}
video{
	width: 100%;
	height:auto;
	margin:0 auto;
	}
.graphs{
	width:90%;
	}	
.graphspopup{
	width:100%;
	}	
.graph-left{
	background-image:url(../images/graph-0.svg);
	background-repeat: no-repeat;
	padding-right:10%;
	}	
.graph-right{
	padding-left:10%;
	}
.round-number-left{
	position:absolute;
	top:0;
	right:10%;
	width:22%;
	}
.round-number-right{
	position:absolute;
	top:0;
	left:0;
	width:22%;
	}
.title-long{
	width:90%;
	float:left;
	line-height:80px;
	color:#fff;
	padding-left:5%;
	border-bottom:8px solid #fff;
	}	
.title-medium{
	width:75%;
	float:left;
	line-height:80px;
	color:#fff;
	padding-left:5%;
	border-bottom:8px solid #fff;
	}	
.title{
	width:50%;
	float:left;
	line-height:80px;
	color:#fff;
	padding-left:5%;
	border-bottom:8px solid #fff;
	}	
.notice{
	font-size:1.0em;
	}
.advert{
	width:90%;
	padding:5px 10% 0px 0px;
	text-align: center;
	font-size:1.0em;
	}
.center{
	width:90%;
	padding:20px 0px;
	float:left;
	}
.center p{
	padding-bottom:5px;
	}
.table{
	padding:20px 5%;
	display:table;
	width:100%;
	min-height:180px;
	}
.table-cell{
	display:table-cell;
	vertical-align:middle;
	}
.table2{
	padding:50px 5%;
	width:100%;
	height:auto;
	min-height:500px;
	}
.table3{
	display:table;
	width:100%;
	min-height:500px;
	}
.encadre{
	width:30%;
	background-color:#43577D;
	font-size:1.8em;
	text-align:center;
	padding:10px;
	/*float:left;*/
	}	
.encadre2-left{
	vertical-align:middle;
	width:45%;
	background-color:#C6D4E2;
	float:left;
	}	
.encadre3-left{
	position:relative;
	width:50%;
	background-color:#C6D4E2;
	float:left;
	}
.encadre2-right{
	width:45%;
	background-color:#C6D4E2;
	float:right;
	}	
.encadre3-right{
	position:relative;
	width:50%;
	background-color:#C6D4E2;
	float:right;
	}	
.table3 p{
	display:table-cell;
	vertical-align:middle;
	}	
.marge{
	width:5%;
	float:left;
	}	
.gradient{
	width:100%;
	background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.6));
	background-image: -o-linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.6));
	background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.6));
	float:left;
	min-height:100px;
	border-bottom:8px solid #fff;
	}	
.numberlist{
	padding-left:30px;
	font-weight:700;
	font-size:1.1em;
	}	
.numberlist li, .partenaires{
	padding:10px 0px 0px 0px;
	}	
.partenaire span{
	font-size:1.2em;
	font-weight: 700;
	line-height:40px;
	}	

/******* FORMULAIRE CONTACT *******/
.contactform{
	color:#43577D;
	}
.contactform .fields{
	font-size: 1.5em;
	}
.contactform .fields .field{
	width:100%;
	text-align:left;
	height:110px;
	font-weight: 700;
	}
.contactform .fields .field2{
	width:100%;
	text-align:left;
	height:auto;
	font-weight: 700;
	}
.contactform .fields .field .white-field{
	float:left;
	width:100%;
	height:50px;
	margin:10px 0px 20px 0px;
	padding:5px 10px;
 	background-color: rgba(255,255,255,0.5);
	border:none;
	font-size: 1.0em;
	}
.contactform .fields .field2 .white-field2{
	float:left;
	width:100%;
	min-height:180px;
 	background-color: rgba(255,255,255,0.5);
	/*background-image: linear-gradient(to bottom, #C6D4E2, rgba(255,255,255,0.5));*/
	border:none;
	font-size: 1.2em;
	padding:10px;
	margin-top:10px;
	}
.button-send{
	position:relative;
	margin:60px 25% 0px 25%;/*aligner la zone du bouton*/
	width:50%;
	height:auto;
	float:left;
	background-color:#43577D;
	text-decoration:none;
	border:none;
	padding:20px 0px;
	line-height:26px;
	color:#ffffff;
	text-align:center;
	font-weight: 500;
	font-size: 1.5em;
	}
.button-send:hover, a:hover{
	cursor:pointer;	/*curseur adapté pour autre(s) média(s) que smartphone*/
	color:#00C9FF;
	}
#footer{
	background-color:#C6D4E2;
	color:#43577D;
	font-size:1.2em;
	text-align:right;
	padding:10px 5%;
	margin:0px auto;
	width:100%;
	}

/*CONDITION POUR ECRAN ORDINATEUR (GRANDE TAILLE)*/
@media only screen and (max-width:1500px){
 h2{
	font-size: 1.8em;
	}
.text{
	font-size: 1.2em;
	}
/*.nav .subnav a{
	background-image:url(../images/planche_nav1.svg);
	background-repeat:no-repeat;
	background-position:left center;
	background-size:20px;
	display:block;
	min-height:50px;
	padding-left:26px;
	font-weight:bold;
	font-size:16px;
	line-height:50px;
	text-align:left;
	float:left;
	max-width:none;
	overflow:hidden;
	}
.nav .remove a{
	background-image:url(../images/planche_nav3.svg);
	background-repeat:no-repeat;
	background-position:left center;
	background-size:20px;
	display:block;
	height:50px;
	margin-left:25px;
	padding-left:26px;
	font-weight:bold;
	font-size:14px;
	line-height:50px;
	text-align:left;
	float:left;
	max-width:none;
	overflow:hidden;
	}*/
.notice{
	font-size:0.7em;
	}
.advert{
	width:90%;
	padding:5px 10% 0px 0px;
	text-align: center;
	font-size:0.7em;
	}
.encadre{
	width:30%;
	background-color:#43577D;
	font-size:1.8em;
	text-align:center;
	padding:10px;
	/*float:left;*/
	}	

/******* FORMULAIRE CONTACT *******/
.contactform .fields{
	font-size: 1.0em;
	}
.contactform .fields .field .white-field{
	float:left;
	width:100%;
	height:50px;
 	background-color: rgba(255,255,255,0.5);
	border:none;
	font-size: 1.0em;
	}
.contactform .fields .field2 .white-field2{
	float:left;
	width:100%;
	min-height:180px;
 	background-color: rgba(255,255,255,0.5);
	/*background-image: linear-gradient(to bottom, #C6D4E2, rgba(255,255,255,0.5));*/
	border:none;
	font-size: 1.2em;
	padding:10px;
	margin-top:10px;
	}
.button-send{
	position:relative;
	margin:60px 25% 0px 25%;/*aligner la zone du bouton*/
	width:50%;
	height:auto;
	float:left;
	background-color:#43577D;
	text-decoration:none;
	border:none;
	padding:20px 0px;
	line-height:26px;
	color:#ffffff;
	text-align:center;
	font-weight: 500;
	font-size: 1.0em;
	}
#footer{
	background-color:#C6D4E2;
	color:#43577D;
	font-size:0.7em;
	text-align:right;
	padding:10px 5%;
	margin:0px auto;
	width:100%;
	}
.table2{
	min-height:300px;
	}
.table3{
	min-height:400px;
	}
	}	

/*CONDITION POUR ECRAN ORDINATEUR (GRANDE TAILLE)*/
@media only screen and (max-width:1200px){
body{
	background-size: 40px 40px;
	}
#header{
	height:88px;
	}
.nav .subnav a{
	font-size:16px;
	min-height:32px;
	line-height:32px;
	}
.site-container{
	background-image:url("../images/marge-40x200.svg");
	background-size:40px 200px;
	/*background-position:-2% top;*/
	}	
.left-side{
	background-image:url(../images/marge-10x10.svg);
	}	
.anchor{/*spécifier des zones pour les ancres qui sont décalées de la hauteur du header toujours visible*/
	transform:translateY(-87px);
	-ms-transform:translateY(-87px); /* IE 9 */
	-moz-transform:translateY(-87px); /* Firefox */
	-webkit-transform:translateY(-87px); /* Safari and Chrome */
	-o-transform:translateY(-87px); /* Opera */
}
/*.nav .subnav a{
	font-size:14px;
	}*/
.logo-header a{
	width:300px;
	height:70px;
	margin:5px 30px 5px 0px;
	}
.table2{
	min-height:200px;
	}
.table3{
	min-height:300px;
	}
	}	

/*CONDITION POUR ECRAN ORDINATEUR (GRANDE TAILLE)*/
@media only screen and (max-width:1000px){
 h2{
	font-size: 1.6em;
	}
.text{
	font-size: 1.0em;
	}
.text-resized{
	font-size:1.1em;
	}
.main-nav{
	height:40vw;
    width: 80vw;
	-moz-transform:translateX(-50vw);
	-webkit-transform:translateX(-50vw);
	-webkit-transform:translateX(-50vw);
	transform:translateX(-50vw);
	}
.nav_icon{
	top:10%;
	bottom:10%;
	height:80%;
	width:auto;
	vertical-align:middle;
	background-image:url(../images/planche_menu4.svg);
	background-repeat:no-repeat;
	background-position:30% 50%;
	}
	}	


/*CONDITION POUR ECRAN ORDINATEUR (GRANDE TAILLE)*/
@media only screen and (max-width:900px){
.encadre{
	font-size:1.6em;
	}
	}	

/*CONDITION POUR ECRAN TABLETTE (TAILLE MOYENNE)*/
@media only screen and (max-width:880px){
	}	

/*CONDITION POUR ECRAN TABLETTE (TAILLE MOYENNE)*/
@media only screen and (max-width:780px){
body{
	background-size: 20px 20px;
	background-image: linear-gradient(to bottom, white 5px, transparent 1px);
	}
.site-container{
	background-image:url("../images/marge-20x100.svg");
	background-size:20px 100px;
	/*background-position:-2% top;*/
	}	
.left-side{
	background-image:url(../images/marge-10x10.svg);
	}
#header{
	height:85px;
	border-bottom:5px solid #fff;
	border-left:5px solid #fff;
	}
.right-side{
	margin-top:85px;
	border-left:5px solid #ffffff;
	}	
.title-long, .title-medium{
	line-height:60px;
	color:#fff;
	border-bottom:5px solid #fff;
	font-size:1.2em;
	}	
.title{
	line-height:60px;
	color:#fff;
	border-bottom:5px solid #fff;
	font-size:1.2em;
	}	
.gradient{
	border-bottom:5px solid #fff;
	}	
.encadre{
	width:100% !important;
	font-size:1.4em;
	float:left;
	height:100px;
	line-height:100px;
	margin-bottom:10px;
	padding:0px;
	}	
.encadre2-left, .encadre3-left, .encadre2-right, .encadre3-right{
	width:100%;
	float:none;
	}	
.advert{
	padding:5px 0% 0px 10%;
	}
.intermarge{
	display:none;
	}
	
.table2{
	padding:20px 5%;
	}
.table3{
	padding:20px 0px;
	min-height:0px;
	}
	
.button-send{
	margin:60px 0% 0px 0%;
	width:100%;
	}
.round-number-left{
	left:0;
	right:0;
	}
.graph-left{
	padding-left:10%;
	padding-right:0%;
	background-position:top right;
	}
.anchor{/*spécifier des zones pour les ancres qui sont décalées de la hauteur du header toujours visible*/
	transform:translateY(-84px);
	-ms-transform:translateY(-84px); /* IE 9 */
	-moz-transform:translateY(-84px); /* Firefox */
	-webkit-transform:translateY(-84px); /* Safari and Chrome */
	-o-transform:translateY(-84px); /* Opera */
}

.title,.title-long, .title-medium{
	line-height:30px;
	padding:12px 0px 12px 6%;
	font-size:1.2em;
	}
.numberlist{
	font-size:1.0em;
	}	
	}	
/*CONDITION POUR ECRAN SMARTPHONE (PETITE TAILLE)*/
@media only screen and (max-width:580px){
.logo-header a{
	width:240px;
	height:56px;
	margin:12px 20px 12px 0px;
	}
	}	

/*CONDITION POUR ECRAN SMARTPHONE (PETITE TAILLE)*/
@media only screen and (max-width:470px){
	}	

/*CONDITION POUR ECRAN SMARTPHONE (PETITE TAILLE)*/
@media only screen and (max-width:390px){
	}	

/*CONDITION POUR ECRAN SMARTPHONE (PETITE TAILLE)*/
@media only screen and (max-width:360px){
	}