/*
#page-question {
	background-image:url("../tmp/ecran-question-1440x2560.png");
	background-size:100% auto;
}
*/
@font-face {
    font-family: "hn";
    src: url("../fonts/HelveticaNeueLTStd-Roman.ttf") format('truetype');
}

@font-face {
    font-family: "hn";
    src: url("../fonts/helveticabold-webfont.ttf") format('truetype');
    font-weight: bold;
}
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    /* end cordova rules */
    background-repeat: no-repeat;
    background-size: 100% auto;
    color: #6974a1;
    margin: 0;
    padding: 0;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}
body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    height:100vh;
    margin:0px;
    padding:0px;
    /* Padding to avoid the "unsafe" areas behind notches in the screen */
    /*padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);*/
    width:100%;
    /* end cordova rules */
	font-family:"hn";
	background-color: #f1f1f1;
}
.conteneur {
    height: 1280px;
	position: relative;
    width: 720px;
}
.defaut {
    position: absolute;
    width: 100%;
}
.page {
    min-height: 100%;
    position: relative;
    display:none;
    opacity:0;
    -webkit-transition: opacity 0.5s;
}
.bandeau {
    background-image: url("../img/bandeau.jpg");
    border-bottom: 22px solid #e1836c;
    height: 285px;
    position: relative;
    border-top: env(safe-area-inset-top, 0px) solid #e1836c;
}
.nom-app {
    background-image: url("../img/nom-app.png");
    background-position: center 100px;
    background-size: 102px auto;
    color: white;
    font-size: 45px;
    font-weight: bold;
    letter-spacing: 1.5px;
    padding-top: 211px;
    text-align: center;
}
.bouton-legende {
    background-image: url("../img/bouton-legende.png");
    height: 57px;
    position: absolute;
    right: 24px;
    top: 130px;
    width: 58px;
}
.bouton-commentaire {
    background-image: url("../img/bouton-commentaire.png");
	background-position: center center;
    background-size: auto 42px;
	background-repeat: no-repeat;
    height: 100%;
    width: 42px;
	position: absolute;
	top: 0;
	left: calc(50% + 270px);
}
.centre {
}
.titre {
    font-size: 32px;
    font-weight: bold;
    padding-bottom: 29px;
    padding-top: 25px;
    text-align: center;
}
#themes {
    height: 535px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
#themes.min-theme {
	margin-left: auto;
	margin-right: auto;
	width: 536px;
}
.theme {
	background-color: #ffffff;
    border: 3px solid #ffffff;
    border-radius: 5px;
    display: inline-block;
    height: 234px;
    margin: 0 9px 15px;
	position: relative;
    vertical-align: top;
    width: 234px;
}
.theme.col0 {
    margin-left: 111px;
}
.min-theme .theme.col0 {
	/*margin-left: 153px;*/
	margin-left: 9px;
}
.theme.last-col {
	margin-right: 111px;
}
.min-theme .theme.last-col {
	margin-right: 9px;
}

.theme .non-teste {
}
.theme .reussi {
	background-image: url("../img/reussi.png");
    height: 80px;
    left: 0;
    position: absolute;
    top: 0;
    width: 80px;
}
.theme .non-reussi {
	background-image: url("../img/non-reussi.png");
    height: 80px;
    left: 0;
    position: absolute;
    top: 0;
    width: 80px;
}
.theme .reussi div, .theme .non-reussi div {
    color: white;
    font-size: 27px;
    padding-top:10px;
    text-align: center;
    width: 48px;
}
.illustration {
    background-position: center center;
    background-size: auto 100%;
    margin-top: 17px;
    padding: 11px 0;
    text-align: center;
}
.illustration--1 {
	background-image:url("../img/score-0.png");
}
.illustration-0 {
	background-image:url("../img/score-0.png");
}
.illustration-1 {
	background-image:url("../img/score-1.png");
}
.illustration-2 {
	background-image:url("../img/score-2.png");
}
.illustration-3 {
	background-image:url("../img/score-3.png");
}
.illustration-4 {
	background-image:url("../img/score-4.png");
}
.illustration-5 {
	background-image:url("../img/score-5.png");
}
.illustration-6 {
	background-image:url("../img/score-6.png");
}
.illustration-7 {
	background-image:url("../img/score-7.png");
}
.illustration-8 {
	background-image:url("../img/score-8.png");
}
.illustration-9 {
	background-image:url("../img/score-9.png");
}
.illustration-10 {
	background-image:url("../img/score-10.png");
}
.illustration-11 {
	background-image:url("../img/score-11.png");
}
.illustration-12 {
	background-image:url("../img/score-12.png");
}
.illustration-13 {
	background-image:url("../img/score-13.png");
}
.illustration-14 {
	background-image:url("../img/score-14.png");
}
.illustration-15 {
	background-image:url("../img/score-15.png");
}
.illustration-16 {
	background-image:url("../img/score-16.png");
}
.illustration-17 {
	background-image:url("../img/score-17.png");
}
.illustration-18 {
	background-image:url("../img/score-18.png");
}
.illustration-19 {
	background-image:url("../img/score-19.png");
}
.illustration-20 {
	background-image:url("../img/score-20.png");
}
.img {
    border-radius: 60px;
    display: inline-block;
    height: 120px;
    vertical-align: top;
    width: 120px;
}
.nom {
    font-size: 26px;
    padding: 5px 20px 0;
    text-align: center;
    white-space: normal;
}

#puces {
    padding-top: 25px;
    text-align: center;
}
.puce {
    border: 3px solid #6974a1;
    border-radius: 19px;
    display: inline-block;
    height: 32px;
    margin: 0 4px;
    vertical-align: top;
    width: 32px;
}
.puce.on {
	background-color:#ffffff;
}
#theme_info {
	padding-top: 25px;
    text-align: center;
    font-size: 30px;
}
.pied {
    bottom: 0;
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}
.partenaires {
	height: 65px;
	position: relative;
	background-image: url("../img/lien-mentions.png");
    background-position: center center;
    background-size: 173px auto;
}
.esr {
	position: absolute;
	top: 0;
	right: 0;
	padding-right: 120px;
	background-image: url("../img/esr.png");
	background-position: center right 39px;
	background-size: 65px auto;
	font-size: 25px;
	height: 65px;
	line-height: 65px;
}
.lien-mentions {
    font-size: 30px;
    padding-bottom: 30px;
    /*padding-top: 160px;*/
    padding-top: 95px;
	display:none;
}
.lien-mentions div {
}
.barre-statut {
    background-color: #e1836c;
    height: 47px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.retour {
    background-color: #e1836c;
    background-image: url("../img/retour.png");
    background-position: 26px 47px;
    background-size: auto auto;
    color: white;
    font-size: 31px;
    height: 47px;
    left: 0;
    line-height: 47px;
    padding-top: 40px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}
#question-bandeau {
    height: 530px;
    position: relative;
    /*background-size: cover;
    background-position: center bottom;*/
    border-top: env(safe-area-inset-top, 0px) solid #e1836c;
}
#bandeau-image {
	background-size: cover;
	background-position: center center;
	height: 443px;
	width: 100%;
	position: absolute;
	top: 87px;
	left: 0;
}
#nom-theme {
    color: white;
    font-size: 30px;
    /*font-weight: bold;*/
    left: 0;
    position: absolute;
    text-align: center;
    /*top: 95px;*/
	bottom: 0px;
    width: 100%;
	/*padding: 15px;*/
	height: 65px;
	line-height: 65px;
	background-color: rgba(225,131,108,0.4);
}
.num-question {
    /*border: 3px solid #ece8e5;
    border-radius: 8px;*/
    color: #ece8e5;
    /*height: 106px;
    width: 106px;*/
    height: 55px;
    width: 57px;
    left: 22px;
    position: absolute;
    /*top: 164px;*/
    bottom: 5px;
    /*background-image: url("../img/num-question.png");*/ 
}
#num-question-sup {
    background-image: url("../img/num-question.png");
    font-size: 22px;
    /*height: 99px;
    width: 90px;*/
    height: 100%;
    width: 100%;
}
#num-question-sup.ok {
	background-image: url("../img/num-question-ok.png");
	/*color:white;*/
}
#num-question-sup.nok {
	background-image: url("../img/num-question-nok.png");
	/*color:white;*/
}
#num-question-sup-inner {
	padding-left: 7px;
    padding-top: 7px;
}
#num-question-sup.ok #num-question-sup-inner,
#num-question-sup.nok #num-question-sup-inner {
	color: white;
}
#num-question-inf {
    color: #ece8e5;
    font-size: 20px;
    /*left: 58px;*/
    right: 2px;
    position: absolute;
    /*top: 60px;*/
    bottom: 0px;
}
.choix-question {
	position: absolute;
	left: 110px;
	bottom: 13px;
	width: 52px;
	height: 40px;
	background-position: center center;
	background-repeat: no-repeat;
}
.choix-question.unique {
	background-image: url("../img/choix-unique.png");
}
.choix-question.multiple {
	background-image: url("../img/choix-multiple.png");
}
/*#panneau {
    background-position: center top;
    background-size: auto 100%;
    height: 333px;
    left: 0;
    position: absolute;
    top: 154px;
    width: 100%;
    -webkit-transition: opacity 0.5s;
}*/

#titre {
    font-size: 32px;
    font-weight: bold;
    padding-bottom: 29px;
    text-align: center;
    height: 124px;
    letter-spacing: 1.3px;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 54px;
    -webkit-transition: opacity 0.5s;
}

.proposition {
    border: 3px solid #ffffff;
    border-radius: 6px;
    height: 83px;
    margin-bottom: 13px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 500px;
    -webkit-transition: opacity 0.5s;
	position: relative;
}
.proposition div.contenu {
    display: table-cell;
    font-size: 27px;
    height: 83px;
    padding-left: 22px;
    padding-right: 22px;
    vertical-align: middle;
    width: 500px;
}
.proposition.on {
	background-color: white;
}
.proposition.ok {
	background-color: #8dec8e;
}
.proposition.ok div {
	color:white;
}
.proposition.nok {
	background-color:#6974A1;
	color:white;
}
.proposition.nok div {
	color:white;
}
.bouton {
    background-color: white;
    border-radius: 6px;
	font-size: 28px;
    height: 84px;
    /*margin-bottom: 160px;*/
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    -webkit-transition: opacity 0.5s;
}
.bouton div {
	display:table-cell;
    height: 84px;
    width: 500px;
	vertical-align: middle;
}
#score-final {
    background-color: white;
    border: 3px solid white;
    border-radius: 8px;
    color: #ece8e5;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100px;
}
.score-final-sup {
    background-image: url("../img/score-fin.png");
    color: white;
    font-size: 36px;
    height: 90px;
    padding-left: 15px;
    padding-top: 9px;
    width: 85px;
}
.score-final-inf {
    font-size: 33px;
    left: 58px;
    position: absolute;
    top: 60px;
}
#complement {
    font-size: 27px;
    padding-top: 14px;
    text-align: center;
}
.sous-menu {
    left: 0;
    position: absolute;
    text-align: center;
    top: 745px;
    width: 100%;
}
.point {
	background-color: #ffffff;
    background-image: url("../img/point.png");
    background-position: center 18px;
    background-size: auto 141px;
    border: 3px solid #ffffff;
    border-radius: 5px;
    display: inline-block;
    font-size: 26px;
    height: 69px;
    /*margin-right: 9px;*/
    padding-top: 165px;
    text-align: center;
    vertical-align: top;
    width: 234px;
}
.partage {
	background-color: #ffffff;
    background-image: url("../img/social.png");
    background-position: center 18px;
    background-size: auto 141px;
    border: 3px solid #ffffff;
    border-radius: 5px;
    display:none;
    font-size: 26px;
    height: 69px;
    margin-left: 9px;
    padding-top: 165px;
    text-align: center;
    vertical-align: top;
    width: 234px;
}
.masque-popup {
    background-color: rgba(0, 0, 0, 0.25);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.popup-inner {
	background-color: white;
	border-radius: 8px;
	border: 3px solid #ffffff;
	padding: 14px 30px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 584px;
}
#masque-commentaire-inner {
	height: 552px;
}
#masque-selection-vide-inner {
	height: 252px;
}
#masque-option-unique-inner, #masque-option-multiple-inner {
	height: 140px;
}
.legende {
    background-color: white;
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 138px;
    padding: 0 14px 4px;
    width: 622px;
}
.popup-titre {
	font-size: 45px;
	font-weight: bold;
	text-align: center;
    padding-bottom: 19px;
    padding-top: 13px;
	background-image: url("../img/croix.png");
	background-position: center right 20px;
	background-repeat: no-repeat;
	background-size: auto 35px;
}
.popup-inner .popup-titre {
	font-size: 35px;
	padding: 0;
	margin-top: 13px;
	margin-bottom: 45px;
}
.popup-contenu {
	font-size: 33px;
}
.center{text-align: center;}

.cartouche {
    background-position: 4px 4px;
    background-size: 104px auto;
    border: 3px solid #ffffff;
    border-radius: 6px;
    margin-bottom: 10px;
    position: relative;
}
.cartouche.non-teste {
	background-image: url("../img/non-teste.png");
}
.cartouche.reussi {
    background-image: url("../img/reussi.png");
}
.cartouche.non-reussi {
	background-image: url("../img/non-reussi.png");
}
.cartouche .meilleur {
    color: white;
    display: block;
    font-size: 38px;
    font-weight: bold;
    left: 12px;
    position: absolute;
    text-align: center;
    top: 12px;
    width: 45px;
}
.cartouche .desc {
    display: table-cell;
    font-size: 37px;
    height: 115px;
    text-align: center;
    vertical-align: middle;
    width: 616px;
}
#debuginfo {
position:fixed;
top:0;
left:0;
}
#page-mentions .texte {
font-size:28px;
padding:20px;
height:800px;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
}
#page-mentions .texte .entete-section {
	font-weight: bold;
	font-size: 35px;
}
#debug {
	position: absolute;
	color: white;
	z-index: 1;
	font-size: 25px;
	top: 60px;
}
#filler {
	background-color: #e1836c;
}