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

body{
	margin:0;}

#lignes{
	z-index:-5;
	position:absolute;
	top:0;
	left:0;}

/* #lignes>svg{
	width:100vw;
	height:260vw;} */

@media only screen and (max-width: 600px) {
	#lignes{
		top:15vh;
	}	
}

/* TEXTE */

a{
	font-family:inherit;
	font-size:inherit;
	text-decoration:none;
	color:inherit;}
	
p>a{
	text-decoration:underline !important;}
h1>a{
	text-decoration:underline !important;}
h2>a{
	text-decoration:underline !important;}
h3>a{
	text-decoration:underline !important;}
h4>a{
	text-decoration:underline !important;}

.white{color:white;}
.black{color:black;}

.fondorange{background-color:#fac1a2;}
.fondbleu{background-color:#A9C8E4;}

h1{
	font-family: 'Roboto Condensed', sans-serif;
	font-size:3vw;
	font-weight:300;
	text-align:left;}
	
h2{
	font-family: 'Amiko', sans-serif;
	font-size:16px;}
	
h3{
	font-family: 'Roboto Condensed', sans-serif;
	font-size:1.5vw;
	font-weight:100;
	text-align:center;}
	
h4{
	color:grey;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:8px;}
	
p{
	font-family: 'Roboto Condensed', sans-serif;
	font-size:1.3vw;
	font-weight:100;
	text-align:justify;}

@media only screen and (max-width: 600px) {
	h1{
		font-size:1.5em;
	}
	h2{
		font-size: 1em;
	}
	h3{
		font-size: 0.85em;
	}
	p{
		font-size: 0.85em;
	}
}
	

/* MENU */

#header{
	width:100%;
	position:fixed;
	top:0;
	left:0;
	padding-bottom:15px;
	min-height:100px;
	z-index: 1500;}
	
div.logo{
	float:left;
	top:15px;
	left:40px;
	z-index:1500;}

img.logo{
	margin-top:15px;
	margin-left:40px;
	height:100px;}
	
img.white{filter: invert(100%);}

#menumobile{
	display: none;
}
	
div.topmenu{
	position:fixed;
	top:40px;
	right:20px;
	margin-left:150px;
	width:80%;
	z-index:1500;}

ul.topmenu{
	position:relative;}
	
li.topmenupage{
	display:inline;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:400;
	font-size:1.1vw;
	padding-top:5px;
	padding-bottom:5px;
	padding-right:10px;
	padding-left:10px;
	margin:5px;
	letter-spacing:0.1em;}
	
li.black{color:black;}
li.white{color:white;}
	
li.norm:hover{text-decoration:underline;}
	
li.impwhite{border:solid 1px white;}
li.impblack{border:solid 1px black;}

li.impwhite:hover{background-color:white;}
li.impblack:hover{background-color:black; color:white;}
	
li.accueil:hover{color:#A9C8E4;}

@media only screen and (max-width: 600px) {
	#header{
		background-color:#fac1a2;
		position: absolute;
		min-height:0;
	}

	#menumobile{
		display: block;
		position: absolute;
		left:50vw;
		top:9vw;
	}

	div.topmenu{
		display:none;
		position:absolute;
		background-color:#fac1a2;
		width:100vw;
		margin-left:0;
		left:0;
		top:30vw;}

	li.topmenupage{
		display:block;
		font-size:1em;
		padding-bottom:5px;
		padding-right:10px;
		margin-right:15vw;
		margin-left:20vw;
		letter-spacing:0.1em;}

	div.logo{
		float:clear;
		display: block;
		top:2vw;}
		
	img.logo{
		margin-top:5vw;
		margin-left:5vw;
		height:20vw;}
} 

/* LAYOUT & CONTENU */

div.first{
	margin-top:150px !important;}
	
div.short{
	padding-bottom:25px !important;}
	
div.short-top{
	padding-top:25px !important;}

div.contenu{
	position:relative;
	z-index:1;
	width:80%;
	margin:auto;
	padding-top:100px;
	padding-bottom:100px;
	padding-right:50px;
	padding-left:50px;
	margin-top:50px;
	margin-bottom:50px;
	box-sizing: border-box;}
	
.contenu>img{
	display:block;
	width:70%;
	margin:auto;
	padding-top:50px;
	padding-bottom:50px;}
	
.contenularge{
	position:relative;
	z-index:1;
	width:100%;
	padding-top:100px;
	padding-bottom:100px;
	margin-top:50px;
	margin-bottom:100px;
	box-sizing: border-box;}
	
.superpose>img{
	display:block;
	width:70%;
	margin:auto;
	padding-top:50px;
	padding-bottom:50px;}
	
.superpose{
	position:relative;
	z-index:1;
	width:80%;
	margin: auto;
	padding-top:50px;
	padding-bottom:50px;
	padding-left:50px;
	padding-right:50px;
	margin-top:50px;
	margin-bottom:50px;
	box-sizing: border-box;}
	
	
/* FOOTER */
	
#footer{
	width:100%;
	padding-top:1em;
	box-sizing: border-box;
	border: red 2px;}
	
#footer>div.footercontent{
	width:100%;
	margin-bottom:3em;}
	
#footer>h3{
	text-align:center;
	font-size:1.2vw;}
	
#footer>div>p{
	font-size:0.8vw;}
	
#nomfooter{
	font-size:1.5vw;
	font-weight:400;}
	
a.niv1{
	font-weight:700 !important;}
	
#footergrid{
	display:grid;
	grid-template-columns:3fr 3fr 3fr 3fr 3fr 2fr 2fr;
	grid-column-gap:1em;
	justify-items:center;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:400;
	font-size:1.1vw;
	letter-spacing:0.1em;}

#footergrid>div>a:hover{
	text-decoration:underline;}

@media only screen and (max-width: 600px) {
	#footergrid{
		display:none !important;}
	#nomfooter{
		font-size:1em !important;}
	.footercontent>h3{
		font-size:1em !important;
	}
}
	
/* COULEURS FOND */
	
div.white{
	background-color:white;}

div.bleu{
	background-color:#A9C8E4;}
	
div.vert{
	background-color:rgba(172,219,193,1);}
	
div.corail{
	background-color:#fac1a2;}
	
div.rose{
	background-color:#e7c9c6;}
	
div.transparent{
	background-color:transparent;}

body.bleu{
	background-color:#A9C8E4;}
	
body.vert{
	background-color:rgba(172,219,193,1);}
	
body.corail{
	background-color:#fac1a2;}
	
/* BOUTONS DIV */

.bouton{
	position:relative;
	display:block;
	width:400px;
	height:50px;
	margin:auto;
	margin-top:50px;
	margin-bottom:50px;}
	
a.bouton.white{
	background-color:white;}

a.bouton.bleu{
	background-color:#A9C8E4;}
	
a.bouton.vert{
	background-color:rgba(172,219,193,1);}
	
a.bouton.corail{
	background-color:#fac1a2;}
	
a.bouton.bleu:hover{
	border:solid 1px #A9C8E4;
	background-color:white;}
	
a.bouton.vert:hover{
	border:solid 1px rgba(172,219,193,1);
	background-color:white;}
	
a.bouton.corail:hover{
	border:solid 1px #fac1a2;
	background-color:white;}
	
h3.boutonbleu:hover{
	color:#A9C8E4;}
	
h3.boutonvert:hover{
	color:rgba(172,219,193,1);}
	
h3.boutoncorail:hover{
	color:#fac1a2;}

/* PAGE ACCUEIL */
	
#citation{
	position:relative;
	width:85%;
	margin:auto;
	margin-bottom:10px;}
	
#boutonformation{
	position:absolute;
	display:box;
	top:45%;
	height:10%;
	margin-left:10%;
	width:19%;
	z-index:1;}
	
#boutonlivre{
	position:absolute;
	display:block;
	top:45%;
	height:10%;
	margin-left:10%;
	width:19%;
	z-index:1;
	background-color:rgba(172,219,193,1);}

#boutonlivre:hover{
	border:solid 1px rgba(172,219,193,1);
	background-color:white;}

#boutonformation>h3{
	line-height:25px !important;}

#boutonlivre>h3{
	line-height: 35px !important;
}
	
.ressourcesindex>img{
	width:100%;
	max-width:1150px;
	z-index:0;}
	
#formation{
	display:inline-block;
	margin-left:10%;
	width:39%;
	max-width:1150px;}
	
#livre{
	display:inline-block;
	margin-left:2%;
	width:39%;
	max-width:1150px;}
	
#contenanticones{
	position:relative;
	margin:auto;
	width:100%;}
	
.iconesindex{
	display:inline-block;
	width:29%;
	text-align:center !important;}
	
.plus{
	display:inline-block;
	width:5%;}
	
.plus>h1{
	text-align:center !important;}
	
.iconesindex>img{
	width:50%;}

@media only screen and (max-width: 600px) {

	.contenu>img{
		width:100%;
	}

	.iconesindex{
		display: block;
		width:100%;
	}

	.plus{
		display: block;
		width:100%;
	}

	#lienvision{
		padding-top: 10vw;;
	}

	#boutonformation{
		position:absolute;
		display:block;
		top:22%;
		height:8%;
		margin-left:15%;
		width:40%;
		z-index:1;}
		
	#boutonlivre{
		position:absolute;
		display:block;
		top:62%;
		height:8%;
		margin-left:15%;
		width:40%;
		z-index:1;}
	
	.ressourcesindex>a>h3{
		line-height:15px !important;}

	#formation{
		display:block;
		width:70vw;
		max-width:1150px;
		margin-left:15vw;}
			
	#livre{
		display:block;
		width:70vw;
		max-width:1150px;
		margin:15vw;}

}
	
	
/* VISION */
	
div.contenu-lignes{
	background-color:#F9CEB7;
	position:relative;
	padding-right:150px;
	padding-left:150px;
	padding-top:100px;
	padding-bottom:150px;
	z-index:-10;
	width:100%;
	box-sizing: border-box;}
	
div.sous-contenu-lignes{
	background-color:white;
	position:relative;
	padding-right:150px;
	padding-left:150px;
	padding-top:50px;
	padding-bottom:50px;
	z-index:0;
	width:90%;
	margin:auto;
	box-sizing: border-box;
	margin-top:50px;}
	

/* SUIVI */

.inscrire>h3{
	line-height: 45px !important;
}


/* FORMATION */

#video{
	position:relative;
	top:0;
	left:0;
	width:100%;}
	
#video>video{
	width:100%;
	height:100%;}
	
#titre{
	position:absolute;
	z-index:10;
	background-color:rgba(172,219,193,0.8);
	padding:50px;
	box-sizing: border-box;
	top:35%;
	width:60%;
	left: 50%;
    transform: translate(-50%, 0)}
	
.section{
	position:relative;
	width:100%;}
	
#introduction{
	border:solid 1px blue;}
	
#videointro{
	position:relative;
	float:left;
	width:50%;
	padding-left:50px;
	padding-right:50px;
	border:solid 1px red;
	padding-top:150px;
	padding-bottom:150px;}
	
#videointro>video{
	width:100%;
	height:100%;}
	
#texteintro{
	position:relative;
	float:left;
	width:30%;
	padding:50px;
	padding-top:150px;
	padding-bottom:150px;}
	
#contenu{
	background-color:#A9C8E4;
	clear: left;}
	
#contenu>img{
	max-width:350px;}

#textecontenu{
	width:70%;
	padding:100px;
	margin:auto;}
	
#fiches>img{
	max-width:650px;
	width:80%;
	padding-top:50px;
	padding-bottom:50px;}

/* RESSOURCES */


#imagelivre{
	width:100%;
	height:1000%;}
	
#description{
	width:65%;
	padding-right:100px;
	padding-left:100px;
	padding-top:50px;
	padding-bottom:50px;
	position:absolute;
	top:0;
	right:0;
	box-sizing: border-box;}
	
.youtubecontenu1{
	display:table-cell;
	width:35%;
	box-sizing: border-box;
	padding:50px;
	vertical-align:middle;}
	
.youtubecontenu2{
	display:table-cell;
	width:55%;
	box-sizing: border-box;
	padding:50px;
	vertical-align:middle;}
	
#texteyoutube{
	box-sizing: border-box;}
	
/* SUIVI INDIVIDUEL */

.colonnes{
  	display: table;
	border-collapse:separate;
	border-spacing:15px;}

.individuel{
	display:table-cell;
	width:30%;
	height:100%;
	padding-top:25px;
	padding-right:50px;
	padding-left:50px;
	padding-bottom:50px;
	box-sizing: border-box;}
	
.icone{
	width:35%;
	margin:auto;
	margin-bottom:25px;}
	
.icone>img{
	width:100%;}
	
	
	
#sport{
	background-image:url(images/fond-sport-etude4.png);
	background-size:cover;
	z-index:0;}

 #textespo{
	 background-color:rgba(249,206,183,0.7);}


/* CONTACT */

#contact{
  	display: table;
	border-collapse:separate;
	border-spacing:50px;}
	
#contact1{
	display:table-cell;}
	
/* INSCRIPTIONS */

#form{
	margin:auto;
	width:640px;}