*, body, p {
	/* font-size:11px; line-height:1.2rem; */
}
body, html { width:100%; height:100%; margin:0; padding:0; overflow: hidden; text-align: center; }
main { padding-top:0; }
/*
rose #ED1848
bleu #20BEC6
*/

#valu-login { text-align:center; display:block; }
#valu-login .container { display:inline-block; width:90%; max-width:400px; margin-top:5rem; }
#value-login-header { position: static; max-height:150px; height:30vh; }
#value-login-header h1 { height:100%; padding:2vh; }
#value-login-header img { height:100%; }

#valu-app a { text-decoration: underline; }

#valu-app .debug { position: fixed; left:1rem; top:1rem; 
	z-index:1000; padding:1rem; color:#999; }

#valu-app nav { }
#valu-app nav p { display:none; position: fixed; z-index:1000; left:1rem; bottom:5vh; 
	padding:4vh; cursor:pointer; -webkit-transition-duration: .3s; transition-duration: .3s;
	background-image:url('../wsys/img/fleche-blue-left.svg');
	background-repeat: no-repeat; background-position: center; }
#valu-app nav p.next { right:1rem; left:auto; background-image:url('../wsys/img/fleche-red.svg'); }
#valu-app nav p:hover { -webkit-transform:scale(1.2); transform:scale(1.2); }

#valu-app header { position: relative; z-index:1; top:0: left; width:100%; height:17vh; }

#valu-app footer { position: absolute; z-index:3; bottom:0; left:0; width:100%; 
	height:3vh; min-height:20px; padding-bottom:0; }

#valu-app header { text-align: center; top:0; /* background:#fff; */ }
#valu-app header img.logo { max-width:150px; margin-top:1rem; }
#valu-app header h1 { font-size:20px; font-weight:bold; }
#valu-app header .disconnect { position: absolute; right:1rem; top:1rem; }

#valu-app footer {}
#valu-app footer .barre { /* background-color: #e0e0e0; */ width:100%; height:100%; }
#valu-app footer .barre .progress{ /* background-color: #ED1848; */ width:0; height:100%; }

#valu-app main { 
	position: absolute; z-index:2; top:20vh; height:70vh; left:0; 
	width:100%; max-width:none; /* max-height:630px; */ overflow:visible; background:#fff; }
#valu-app main .defilant { position: relative; width:1000%; height:100%; }
#valu-app main .slide { position: relative; width:10%; height:100%; overflow:auto; 
	float:left; }
#valu-app .slide { width:100%; height:100%; }
#valu-app .slide .limiter { width:80%; max-width:540px; margin-top:5rem; margin:3vh auto; }
#valu-app .slide .limiter { font-size:1.2rem; }

#valu-app button { padding:1rem 3rem; background:#20BEC6; border:none; cursor:pointer;
	border-radius: 1rem; display:block; margin:1rem auto 0 auto; font-size:1.2rem; 
	-webkit-transition-duration: .3s; 
	        transition-duration: .3s; }
#valu-app button:hover { background:#ED1848; color:white; }

/* #valu-app .questions { display:block; position: relative; margin-bottom:2rem; }
#valu-app .questions .container { 
	background:url('../wsys/img/fleche-bleue.svg') no-repeat; 
	background-size:8vw; min-height:8vw;
	padding-left:11vw;
} */
#valu-app .questions {  }
#valu-app .questions .texte { margin:0; font-size:1.2rem; padding:1rem 3rem 0.65rem; /* color:white; */ }
#valu-app .questions .answer { height:2rem; padding:0 3rem; cursor:pointer; }

#valu-app .question { background:#20BEC6; min-height:6rem; border-radius: 2rem;
	width:90%; max-width:600px; margin:0 auto 2vh auto; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; }
#valu-app .question.answered { background:#e0e0e0; /*#20BEC6;*/ }

#valu-app .question .star { width:2rem; height:2rem; /* background:black; */ display:inline-block; 
	margin:0 0.4rem; -webkit-transition-duration: .3s; transition-duration: .3s; }

/* le fond */
#valu-app .question .star svg .st0 { fill:#fff; -webkit-transition-duration: .3s; transition-duration: .3s; }
#valu-app .question .star:hover svg .st0, #valu-app .question .star.active svg .st0 { fill:#FFCD00; }
/* la bordure */
#valu-app .question .star svg .st1 { fill:#fff; -webkit-transition-duration: .3s; transition-duration: .3s; }
#valu-app .question .star:hover svg .st1, #valu-app .question .star.active svg .st1 { fill:#3D143E; }

#valu-app .question .star.active {}
#valu-app .question .star.zero { width:auto; height:2rem; background:none; display:inline-block; 
	vertical-align:top; padding:0.4rem 1rem 0 1rem; border-radius: 1rem; color:white;
	/* position: relative; top:0.3rem; */ -webkit-transition-duration: .3s; transition-duration: .3s; }
#valu-app .question .star.zero.active, #valu-app .question .star.zero:hover { 
	/* text-decoration: underline; */ color:red; background:white; 
	color:white; background:#ED1848; }
#valu-app .question.next { /* border:solid 1px black; */ -webkit-transform:translateX(3vw); transform:translateX(3vw); }
#valu-app .question {}

#valu-app .prez {}
#valu-app .prez img { width:50%; max-width:350px; margin-bottom:2rem; }
#valu-app .textes .prez .titre { margin:0 0 1rem 0; }
#valu-app .prez {}


#valu-app #correction { display:none; position: fixed; z-index:4; bottom:3rem; text-align: center; 
	width:50%; left:25%; padding:1rem 2rem; border-radius: 1.7rem; background:#20BEC6; }
#valu-app #correction p { color:#fff; text-align: center; margin:0; padding:0; }

#valu-app .submit {}
#valu-app .submit p { background:#f00; padding:1rem 3rem; display:inline-block; cursor:pointer; }

@media screen and (max-height: 660px){
    #valu-app .prez img { display:none; }
    #valu-app main { height:75vh; }
}
@media screen and (max-height: 600px){
	#valu-app .questions .texte { font-size:1.15rem; padding:0.6rem 3rem 0; height:3.4rem; }
}