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


	@font-face{font-family:'gotu';
	src:url(Font/Gotu/Gotu-Regular.ttf);
    font-weight: normal;
    font-style: normal;}
	@font-face{font-family:'raleway';
	src:url(Font/Raleway/Raleway-ExtraBold.ttf);
    font-weight: bold;
    font-style: normal;
	}



body {
		font-family:'gotu', sans-serif;
		font-size:0.9em;
		margin:0;
		padding:0;
		background-color:white
		}
		
a {color:inherit;
text-decoration:none}

.titresh {
	display:none}


/********** Bar du menu ***********/

header {
	position:relative;
	z-index:10;}
		
#navcheck {
  position: fixed;
  opacity: 0;
} /*masque la case à cocher*/

#label {
  cursor: pointer;
} /* indique que le menu est cliquable*/

[id="label"]::before {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(18, 67, 100, 0.4);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
} /* Etend le label cliquable à l'ensemble de la page pour la fermeture*/

#label .burger {
  height:37px;
  width:37px;
  position:fixed;
  top:60px;
  left:0px;
  background-color:rgba(255,150,0,1);
  border-radius:0px 5px 5px 0px;
  z-index: 3;
  margin: 0;
  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

#label .burger::before,
#label .burger .bar,
#label .burger::after {
  position: absolute;
  left: 0;
  display: block;
  width: 30px;
  height: 2px;
  margin-left:3px;
  background: white;
  content: '';
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}/*Dessine les lignes menu burger*/

#label .burger .bar {
  top: 47%;
}/*Place la barre du milieu du menu burger*/
#label .burger::before {
  top: 10px;
  transform-origin: top left;
}/*Place la barre du haut du menu burger*/
#label .burger::after {
  bottom: 10px;
  transform-origin: bottom left;
}/*Place la barre du bas du menu burger*/

/*input:focus + label .burger,*/
#label:hover .burger {
  opacity: .75;
}  /* désopacifie le menu burger*/


#menub {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

#menub div {
  transform: translateX(-100%);
  transition:all .5s ease}

#menub div:nth-child(1) {
  transition-delay: 100ms;
}
#menub div:nth-child(2) {
  transition-delay: 150ms;
}
#menub div:nth-child(3) {
  transition-delay: 200ms;
}
#menub div:nth-child(4) {
  transition-delay: 250ms;
}
#menub div:nth-child(5) {
  transition-delay: 300ms;
}
#menub div:nth-child(6) {
  transition-delay: 350ms;
}
#menub div:nth-child(7) {
  transition-delay: 400ms;
}

[id="navcheck"]:checked + [id="label"]::before {
  opacity: 1;
  pointer-events: auto;
}/*Rend cliquable et visible le label sur la page pour fermeture*/

[id="navcheck"]:checked + label .burger::before, 
[id="navcheck"]:checked + label .burger::after {
  width: 35px;
}/*Allonge les barres de la croix pour une forme cohérente*/
[id="navcheck"]:checked + label .burger::before {
  transform:  translate(4px, -2px) rotate(45deg);
}
[id="navcheck"]:checked + label .burger::after {
  transform: translate(4px, 6px) rotate(-45deg) ;
}
[id="navcheck"]:checked + label .burger .bar {
  transform: scale(0.1);
}
#navcheck:checked ~ nav {
  transform: translateX(0);
  position:fixed;
  top:0;
  width:100%
}/*Fait glisser le menu pour le faire apparaitre*/

#navcheck:checked ~ #menub h3 {
		height:50px;
		max-height:calc(100vh / 6 - 10px);
		background-color:rgba(22,75,93,0.8);
		padding:0px;
		padding-top:10px;
		font-size:0.8em;
		border-bottom:thin solid rgba(255,150,0,1)}
#navcheck:checked ~ #menub h3::after {
		font-size:1.6em;
		margin:0;
		padding:0;
		position:relative;
		top:-4px;
		color:white;
		display:block;
		}


#navcheck:checked ~ #menub div {
  transform: translateX(0%)}


.visuallyhidden {
  border: 0;
  clip: rect(0,0,0,0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}


	#menub h3 {text-align:center;
	color:white;
	font-size:1.6em;
	margin:0;
	padding-top:30px}
	a {
		text-decoration:none;
		color:black}


/********** BANNIERE **********/

#banniere {
	background-image:url(Images/fondulogo.png), url(Images/Aquarelle-mains.jpg);
	background-attachment:scroll, fixed;
	background-repeat:no-repeat;
	height:45vw;
	background-size:100%, 120%;
	background-position:0 2vw, -10vw 0;}


#banniere p {
	margin:0;
	padding:35vw 5vw 0 0;
	text-align:right;
	font-size:1.3em;
	color:rgba(22,75,93,0.8);
	text-transform:uppercase;
}
	
#logo {
	background-color:white;
	height:24vw;
	display:flex;
	flex-direction:row;
	box-shadow:0vw 0.4vw 0.5vw rgba(22,75,93,0.2);}
	
#logo div img {
	margin:10vw 17vw 2vw 10vw;
	width:35vw}

#menu {
	width:36vw;
	display:none;
	}

h3:hover {
	color:rgba(255,150,0,1);}

.fixe {
		position:fixed !important;
		top:0;
		height:8vw !important;
		width:100%;
		transition:all ease-in-out 500ms;
		z-index:10
		}
.logofixe {
	margin:0vw 26vw 0vw 17vw !important;
	width:19vw !important;
	transition:all ease-in-out 500ms;
}

/********** PROFILS **********/


#etudiant, #entretien, #changement {
	min-height:35vw;
	background-size:auto 100%;
	padding:0 10vw 0 10vw;
	margin:0;
	transition:all ease-in-out 500ms;
	display:flex;
	justify-content:center;
	align-items:center;
	border:2px solid white;
	}
.zoom {
	min-height:35vw;
	transition:all ease-in-out 500ms !important
}

#etudiant h1, #entretien h1, #changement h1 {
	font-family:'raleway', sans-serif;
	font-weight: bolder;
	font-size:1.5em;
	text-align:center;
	color:white;
	margin:0;
	padding:0;
	text-shadow:0.2vw 0.3vw 8px rgba(0,0,0,0.9);
	}
#etudiant:hover h1, #entretien:hover h1, #changement:hover h1 {
	transition:all ease-in-out 500ms;
	display:none
	}
#etudiant p, #entretien p, #changement p {
	display:none;
	transition:all ease-in-out 500ms
	}
#etudiant:hover p, #entretien:hover p, #changement:hover p {
	display:inherit;
	font-family:'gotu', sans-serif;
	font-weight: normal;
	font-size:1.1em;
	background-color:rgba(255,255,255,0.7);
	padding:2vw 3vw 2vw 3vw;
	color:black;
	text-shadow:0.2vw 0.1vw 3px rgba(255,255,255,0.4);
	transition:all ease-in-out 500ms}
	
	#etudiant {
		background-image:url(Images/diplome10.jpg);
		}
	#entretien {
		background-image:url(Images/entretien4.jpg);
		}
	#changement {
		background-image:url(Images/route3.jpg);
		}


#phrase {
	padding:10vw 10vw 10vw 10vw;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:center;
	font-size:1.4em;
	
	}
#phrase div {
	background-image:url(Images/Logovague.png);
	background-size:auto 150%;
	background-position:0 50%;
	width:40vw;
	height:17vw;
	margin-right:5vw}

#phrase p {
	text-align:justify;
	width:65vw}
	
	


/********** QUI SUIS JE ? **********/


#presentation {
	background-image:url(Images/phare.jpg);
	background-attachment:scroll;
	background-size:auto 100%;
	background-repeat:no-repeat;
	background-position:0 0vw;
	display:flex;
	flex-direction:column;
	align-items:flex-end;}		

#photo img {
	position:relative;
	top:5vw;
	height:40vw;
	width:40vw;
	padding:0vw 5vw 0vw 0vw;
	z-index:5}
	
#about {
	
	position:relative;
	top:-9vw;
	margin:0 10vw 0vw 5vw;
	background-color:rgba(255,255,255,0.8);
	padding:5vw 5vw 5vw 5vw;
}

#about p {
	text-align:justify}

h2 {
	font-family:'raleway', sans-serif;
	font-weight: bold;
	color:rgba(255,150,0,1);
	font-size:1.5em}



/********** BENEFICES **********/



#benefices {
	margin-top:10vw;}

#benefices div {
	margin-left:5vw;
	margin-right:5vw;
	margin-top:2vw;
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	}

#benefices div .images {
	margin:0;
	height:35vw;
	width:65vw;
	background-repeat:no-repeat;
	border-radius:2vw
	}

#echec {
	background-image:url(Images/echec3.jpg);
	background-size:cover;
	background-position:center;}
#puzzle {
	background-image:url(Images/puzzle2.jpg);
	background-size:cover;
	background-position:center;}
#montagne {
	background-image:url(Images/hilaire2.jpg);
	background-size:cover;
	background-position:top;}

#benefices p {
	text-align:justify;
	width:85vw;
	padding:5vw 0vw 5vw 0;
	margin:0;}

#benefices p span {
	font-family:'raleway', sans-serif;
	font-weight: bold;
	color:rgba(22,75,93,0.8);
	font-size:1.5em}

/********** Je vous aide à croire en vous **********/

#croire {
	font-size:3em;
	color:white;
	margin-top:0vw;
	background-color:rgba(0,0,0,0.6);
	text-align:center;
	display:flex;
	align-items: center;
	justify-content:center}

/********** FAQ **********/

#faq {
	background-color:rgba(0,0,0,0.3);
	background-image:url(Images/entretien4.jpg);
	background-attachment:scroll;
	background-size:auto 100%;
	background-repeat:no-repeat;
	background-position:0 0vw;}
#questions {margin:0 10vw 0vw 5vw;
	background-color:rgba(255,255,255,0.8);
	padding:2vw 5vw 2vw 5vw;
	text-align:justify
}
#faq h4 {
	text-align:left;
	font-weight:normal;
	font-size:1.1em}
#faq p {display:none;
	transition:all ease-in-out 500ms;}
#faq span {font-size:1.1em;
	font-weight:bold;
	color:rgba(255,150,0,1);}

#qu1:hover p, #qu2:hover p, #qu3:hover p, #qu4:hover p {display:inherit;
	transition:all ease-in-out 500ms;}

/********** Temoignages **********/

#temoignage {margin:2vw 10vw 0vw 10vw;
	height:100vw;
	max-height:70vh;
	overflow:hidden}
#tem {
	width:80vw;
	height:85vw;
	max-height:60vh;
	overflow:hidden}

h4 {
	font-family:'raleway', sans-serif;
	font-weight: bold;
	color:rgba(22,75,93,0.8);
	font-size:1.5em}
#temoignage p {
	text-align:justify}
#plus {
	position:relative;
	top:-10.5vw;
	z-index:10;
	height:13vw;
	width:100%;
	background-image:url(Images/plus.png), url(Images/fondulogo.png);
	background-size:10%, 100%;
	background-position:50% 95%, 50% 95%;
	background-repeat:no-repeat;
	cursor:pointer}

/********** CONTACT **********/

#contact {
	background-color:rgba(0,0,0,0.1);
	padding-top:0vw}
	
#coordonnées {
	background-image:url(Images/contact2.jpg);
	background-attachment:fixed;
	background-size:cover;
	padding:0 10vw 10vw 10vw}

#blocdroite {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:center;
	}

#blocdroite p {
	font-size:1.1em;
	font-weight:bold;
	min-width:20vw;
	height:2vw;
	padding-top:12vw;
	text-align:center;}

#bleu {
	background-image:url(Images/logo2.png);
	background-size:auto 90%;
	background-position:center;
	background-repeat:no-repeat;}
#telephone {
	background-image:url(Images/phone2.png);
	background-size:auto 60%;
	background-position:50% 50%;
	background-repeat:no-repeat;}
#admail {background-image:url(Images/mail2.png);
	background-size:auto 60%;
	background-position:50% 50%;
	background-repeat:no-repeat;}


/********** Formulaire **********/

#formulaire {width:66vw;
	margin:auto;
	padding:5vw 10vw 0 10vw;
	}
form > div {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	margin-bottom:1vw}
label {display:block;
	margin-bottom:0.5vw}
input { width:66vw;
	min-height:3vw;
	border:none;
	margin-bottom:10px;}
	
form .prenom{display:none}

textarea {width:66vw;
	height:30vw;
	border:none}
#submit {width:120px;
	height:37px;
	background-color:rgba(227,158,93,0.3);
	color:rgba(255,150,0,1);
	border-radius:5px;
	border:none;
	margin-top:2vw;
	margin-bottom:5vw;
	font-weight:bold}
#submit:hover {
	cursor:pointer;
	background-color:rgba(22,75,93,0.8);}
#valider {align-items:center;
	justify-content:center;
	margin-bottom:0}



/********** PIED DE PAGE **********/


#copyright {
	display:none}
	
footer {
	padding:0 10vw 0 10vw;
	margin:0;
	min-height:15vw;
	background-image:url(Images/Aquarelle-mains-black.jpg);
	background-size:cover;
	background-position:0 -9vw;
	font-size:0.8em;
	color:rgb(150,150,150);
	}

footer div {display:flex;
	justify-content:space-between;;
	align-items:center;
	text-align:right;}

footer img {
	height:10vw}





@media screen and (min-width: 1024px) {
	

#label {display:none}

/********** BANNIERE **********/

#banniere {
	height:38vw;
	background-size:100%, 100%;
	background-position:0 -5vw, 0 0vw;}

#banniere p {
	padding:28vw 5vw 0 0;
	font-size:1.9em;
}
	
#logo {
	height:13.5vw;}
	
#logo div img {
	margin:2vw 9vw 2vw 10vw;
	width:25vw}

#menu {
	width:44vw;
	display:flex;
	justify-content:space-between;
	align-items:center;
	}


.fixe {
		height:4vw !important;
		}
.logofixe {
	margin:0vw 18vw 0vw 17vw !important;
	width:11vw !important;
}


/********** PROFILS **********/

#etudiant, #entretien, #changement {
	min-height:15vw;
	height:15vw;
	background-size:100%;
	padding:0 30vw 0 30vw;
	flex-direction:column;
	}

.zoom {
	min-height:24vw;
	height:24vw !important;
}

.flou {
	min-height:10.5vw !important;
	height:10.5vw !important;
	transition:all ease-in-out 500ms !important
}

#etudiant h1, #entretien h1, #changement h1 {
	font-size:2em;
	}

#etudiant:hover h1, #entretien:hover h1, #changement:hover h1 {
	display:inherit;
	}
	
	#etudiant {
		background-position:0 -3vw;}
	#etudiant:hover {
		background-position:0 0vw;}
	#entretien {
		background-position:0 -25vw}
	#changement {
		background-position:0 -8vw;}
	#changement:hover {
		background-position:0 0vw;
		}

#phrase {
	height:30vw;
	padding:0 10vw 0 10vw;
	flex-direction:row;
	font-size:2em;
	}
	
	

/********** QUI SUIS JE ? **********/


#presentation {
	background-attachment:fixed;
	background-size:100%;
	background-position:0 -20vw;
	min-height:40vw;
	flex-direction:row;
	align-items:center}	

#photo img {
	position:inherit;
	height:20vw;
	width:20vw;
	padding:10vw 0vw 10vw 10vw}
	
#about {
	position:inherit;
	margin-left:12vw;
	margin-right:5vw;
}



/********** BENEFICES **********/


#benefices div {
	margin-left:10vw;
	margin-top:5vw;
	flex-direction:row;
	align-items:flex-start
	}

#benefices div .images {
	height:20vw;
	width:37vw;
	}

#benefices p {
	width:26vw;
	padding:0 0 0 5vw;}
	

/********** Je vous aide à croire en vous **********/

#croire {
	height:20vw;}

/********** FAQ **********/


#faq {
	background-image:url(Images/fondulogo.png), url(Images/entretien4.jpg);
	background-attachment:fixed;
	background-size:250% 100%, auto 93%;
	background-position:0 0vw, -17vw 4vw;}
#questions {margin:10vw 0vw 0vw 42vw;
	width:42vw;	
}
	
/********** Témoignages **********/

#temoignage {
	height:26vw;}
#tem {
	display:flex;
	justify-content:space-around;
	height:22vw;}
#tem div {
	width:20vw}
#plus {
	background-size:5%, 100%;
	}


/********** CONTACT **********/

#contact {
	margin-top:2vw;}
	
#coordonnées {
	height:30vw;
	padding:0 10vw 0 10vw}

#blocdroite {
	flex-direction:row;
	height:30vw;
	}

#blocdroite p {
	font-size:1.4em;
	width:20vw;}

#bleu {
	background-position:50% 0%;}
#telephone {
	background-position:80% 30%;
	text-align:right !important}
#admail {
	background-position:50% 30%;}
	

/********** Formulaire **********/

form > div {
	flex-direction:row;}
input { width:30vw;
	height:3vw;}
textarea {
	height:10vw;}


/********** PIED DE PAGE **********/

#copyright2 {
	display:none}
#copyright {
	display:inherit}

footer {
	height:15vw;
	font-size:1em;
	}

footer div {
	height:15vw;}

footer a {
	display:inline}

footer img {
	height:10vw}

}