@charset "utf-8";
/* CSS Document */
html, body { -webkit-text-size-adjust: 100%;text-size-adjust: 100%; font-size:16px;}
body { font-family: "Exo", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";  text-align: center; font-weight: 300; margin:4em 3em 6em 3em; color: #333; background: #F8FAFC;}


.wrap { margin: 2.5rem;}

a { cursor: pointer;}



#loader { background: #FFF no-repeat center center url(../images/loader.gif); background-color: rgba(255,255,255,0.6); opacity: 0;  position: fixed; top: 0; left: 0; width: 100%; height:100%; z-index: 600;}

#quizz { display: none; text-align: left;   -moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none; }


.question { overflow: hidden; height: 0; transition: opacity 0.8s; opacity: 0; margin: 0; font-size: 110%; position: relative;}
.question.open  {  height: auto; opacity: 1;}

p.back { font-weight: 600; font-size: 80%; position: relative; }
p.back a {  opacity: 0; transition: opacity 0.4s; transition-delay: 0.1s; pointer-events: none; }
p.back.show a { opacity:1; pointer-events: fill; }
p.back img { right: 0; position: absolute; height: 2.5em;}

p.back a  { display: inline-block; padding: 0.5em 0.5em 0.5em 1em; color:#242628; color: #24262899; position: relative;}
p.back a span { font-size: 120%; position: absolute; left: 0.3em; margin: -0.1em 0; transition: margin 0.15s;}
p.back a:hover span { margin-left: -0.3em;}

.question hr { border: none; border-top: 1px solid #EAECEE; margin: 1.5rem -3rem;}
.question h2 { font-size:160%; font-weight: 700; margin:0; line-height: 120%; }
.question h3 { font-size:90%; font-weight: 600; color:#027c6c66; margin:0; }
.question .reponse { margin: 0.5rem 0;}
.question .reponse a { display: inline-block; border-radius: 0.6em; background: #FAFCFE; position: relative; padding: 0.5em; padding-left: 2.2em;  line-height: 1.2em;}
.question .reponse a span { position: relative; }
.question .reponse a strong { position: absolute; padding: 0.4em 0.2em; left: 0; text-align: center; transition: all 0.2s; width: 1.4em; margin: -0.4em 0; border-radius: 0.3em;  background: #FFF8; box-shadow: 1px 1px 0.1em rgba(0,0,0,0.1); }
.question .reponse a.actif strong {  background: #00927F; color:#FFF}
.question .reponse a.actif { color:#000;}

.question .reponse a:before { position: absolute; top: 0; opacity: 0; height: 100%; left: 0; width: 0%; transition: all 0.25s; content:""; border-radius: 0.6em;  background:#F4F6F8;}
.question .reponse a:hover:before , .question .reponse a.actif:before { width:100%; opacity: 1;}


.question .timer { position: absolute; bottom: 0; width: 0; left: 0; height: 4px; background: #24262866;}


.question figure { padding: 0; margin: 2rem 0;}
.question figure img { max-height: 20rem; max-height: 26vh; max-width: 100%; display: block;  box-shadow: 0 0 0 1px #ECEEF0; }
.question figure span { position: relative; display: inline-block;  max-width: 100%; box-sizing: border-box; border: 0.9rem solid #FFF; box-shadow: 0 0 0.8rem rgba(0,0,0,0.1); cursor: pointer;}
.question figure span:before { position: absolute;  width: 2rem; height: 2rem; content: ""; background: no-repeat center center url(../images/zoom.svg); background-size: contain;  opacity: 0.4; right: 0.8rem; bottom: 1rem; transition: opacity 0.2s;}
.question figure span:hover:before { opacity: 1;} 

figure.zoom { padding:0 2rem; cursor: pointer; box-sizing: border-box; line-height: 100vh; margin:0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; position: fixed; z-index: 5000; text-align: center; background: #000; background: rgba(0,0,0,0.85);}
figure.zoom img { max-height: 90vh; max-height: calc(100vh - 4rem); vertical-align: middle; max-width: 100%;   box-shadow: 0 0 0 1px #ECEEF0; }
figure.zoom span { position: relative; display: block; text-align: center; line-height: 100vh;}
figure.zoom span:before { position: absolute;  width: 2.4rem; line-height: 2.4rem; text-align: center; height: 2.4rem; border-radius: 0.3rem; content: "×"; font-size: 280%; font-weight: 300; color: #FFF; background: #000; background-color: rgba(0,0,0,0.3);  top: 2rem; right: 0; opacity: 0.8; }





label.check { font-size: 90%;}

.content { margin:auto; width: 100%; max-width: 900px;}


#content { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 2rem; box-sizing: border-box;}
.content p.logo { margin:2em 0;}
.content p { margin:1.5em 0;}


.content p.logo img { height:3em;}


.content p.desc { font-size: 75%; margin:2em auto; max-width: 34rem; font-weight: 400; font-style: italic; color:#222; color:#0009}

form { margin: 0 auto; max-width: 30rem;}


.content p + p.buttons { margin-top:2em;}
h2  + p.buttons { margin-top:2em;}
.buttons a { display: inline-block; text-decoration: none; transition: background-color 0.2s , color 0.2s; text-align: center; min-width: 3em; font-weight: 600; color: #FFF; background: #00927F no-repeat right center; padding:0.9em 1.5em 0.8em 1.5em; border-radius: 3em; text-transform: uppercase; font-size: 90%; background-size:auto 1.8em;}
.buttons a.grey { background-color: #EEE; color:#222; }
.buttons a:hover { background-color: #333; color: #FFF;}

.buttons a.arrow { background-image: url("../images/right-arrow.svg"); padding-right: 2.8em;}



.buttons a.arrow.disable { pointer-events: none; background-color: #E0E2E4;}


input.invisible { position:absolute; font-size:0; padding:0; left:-1000px;}



.champ:focus { outline: none !important; box-shadow: none !important; border-color: #999;}
.content .form-line label { position:absolute; left: 0; text-align: end; width:9em; line-height: 2.5em; top: 1px;  font-weight:400; font-size:80%; color:#333;}

.content .padder { padding: 1px; background: #FFF; border-radius: 0.8rem; margin:0 auto; box-shadow: 0 0.5rem 1.5rem 1px rgba(0,0,0,0.06); }


h2 { background: -webkit-linear-gradient(-45deg,#027c6c, #024139);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; }
h1 {font-weight:600; font-size:220%;}
h2 {font-weight:600; font-size:200%;	 }
h3 {font-weight:600; font-size:160%; }


.bar { height: 0.66em; width: 50%;  margin-top: -1rem; background: #F8FAFC; background: rgba(0,0,0,0.03); box-shadow: 0 0 0.25em rgba(0,0,0,0.08) inset; border-radius: 0.2em; position: relative;}

.bar div { position: absolute; height: 100%; width: 0;  border-radius: 0.2em; background: #00927F; }

h3 + .bar {  width: 100%; font-size:150%;  margin-top: -1.2rem; }





.hidden { display:	none;}

.form-group {
	position: relative;
	margin:0.75em 0;
   }
   
   
   form .columns .form-group {
	   margin:1em 0 0 0;	
   }
   
   .form-label {
	position: absolute;
	left: .9em;
	top: 1.2em;
	line-height:90%;
	color: #999;
	z-index: 10;
	font-weight:400;
	transition:top 0.1s, font-size 0.1s, color 0.1s, left 0.1s; transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);
	cursor:text;
   }
   
   .form-label em {
	   background:#FFF;font-style: normal; font-size: 70%; left:0; position: absolute; top: 100%; white-space: nowrap; padding: 0.3em 0.4em; margin:0.75em -0.4em; color:#C2C4C6; transition: all 0.2s;
   }
   
   .focused .form-label em {
	   opacity:0; 
	   font-size: 90%;
	   top:200%;
   }
   
   .focused .form-label , .readonly .form-label {
	font-size: 70%;
	top:0.9em;
	left: 1.4em;
	font-weight:400;
	color: #AFACA8;
	
   }
   
   .form-input , .champ {
	position: relative;
	padding: 1.2em .9em 0.5em .9em;
	width: 100%;
	outline: 0;
	border: 0;
	border:1px solid #AFACA8;
	border-radius:0.4em;
	background: #FFF no-repeat center right;
	background-size: contain;
	border-color:rgba(0,0,0,0.1);
	transition: border-color .2s ease-out; transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);
	font-size:100%; line-height:100%;
	box-sizing:border-box;
	font-family:'Exo', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
   }
   
   .form-input.error , .champ.error {
		border-color:#E026;
		background-color:#EE002202;
   }

.error_form { font-weight: bold; color: #E02; margin: 0 0 1em 0 !important;}
select.champ { display: block; padding: 0 0.7em; height: 3.2em; -moz-appearance: none; -webkit-appearance: none;
	appearance: none; background-image: url(../images/down-arrow.svg); }



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

}

@media screen and (max-width: 600px) {
	body , html { font-size:14px;   }
	.wrap { margin: 2rem;}

}