/*****************************************************************************************************************************/
/* Reset - Redefinitions des balises HTML */
/*****************************************************************************************************************************/
*{margin:0; padding:0;}
*, *:after, *::before{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, select, textarea, blockquote{font-family:'Raleway', sans-serif; font-size:14px; color:#000; font-weight:400;}

fieldset, img{border:0}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal;}

a{text-decoration:none; outline:none; -webkit-transition:all .3s ease 0s; -moz-transition:all .3s ease 0s; -o-transition:all .3s ease 0s; transition:all 0.3s ease 0s;}
a:hover{text-decoration:none;}

input:focus, a:focus, textarea:focus, select:focus, button:focus{outline:none;}

select option{padding:0 3px;}

ul li{list-style:none;}

table{border-collapse:collapse; border-spacing:0;}

iframe{border:none;}

hr{display:none;}

textarea{resize:vertical;}

img{vertical-align:middle;}

*::-webkit-input-placeholder {color: #657c89;}
*:-moz-placeholder {color: #657c89; opacity: 1;}
*::-moz-placeholder {color: #657c89; opacity: 1;}
*:-ms-input-placeholder {color: #657c89;}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* CLASS génériques */
/*****************************************************************************************************************************/
	strong{font-weight:bold;}
	em{font-style:italic;}

	.clearfix:before,
	.clearfix:after{content:" "; display:table;}

	.clearfix:after{clear:both;}

	.clearfix{*zoom:1;}

	.img-responsive{max-width:100%; height:auto;}

	.text-center{text-align:center;}
	.text-right{text-align:right;}

	.hidetext{font-size:0px; text-indent:-9999px; display:block;}

	.hide-resp{display:block;}
	.hide-desk{display:none;}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Structure generale */
/*****************************************************************************************************************************/
	body {
		text-align: center;
		background: #fff;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	header,
	#middle,
    .page {
		position: relative;
		width: 100%;
		margin: 0 auto;
	}

    .page {
        width: 98%;
        max-width: 415px;
    }



	/* -------------- header -------------- */
	header, 
    footer {
		display: flex;
        align-items: center;
        height: 7.8vh;
        background: #ffd23f;
	}


		/* logo */
		.logo {
			
		}


        /* bouton menu */
        .btn-menu {
            position: absolute;
            top: 50%;
            right: 5.5%;
            margin-top: -12px;
            cursor: pointer;
        }

            .btn-menu span {
                width: 6px;
                height: 6px;
                background-color: #fff;
                border-radius: 6px;
                display: block;
            }

                .btn-menu span + span {
                    margin-top: 5px;
                }


        /* menu */
        .menu {
            position: absolute;
            top: 7.8vh;
            right: 0;
            width: 100%;
            height: 4.8vh;
            padding-right: 7.2%;
            background: #ffd23f;
            border: 1px solid #fff;
            text-align: right;
            z-index: 100;
            display: none;
        }

            .menu a {
                font-size: 12px;
                color: #fff;
                font-weight: bold;
                line-height: 4.8vh;
                display: inline-block;
            }



	/* -------------- middle -------------- */
	#middle {
		min-height: 84.4vh;
        padding-bottom: 30px;
	}



    /* -------------- header -------------- */
    footer .lk-bas {
        padding: 0 5.5% 0 0;
        text-align: right;
    }

        footer .lk-bas a {
            color: #fff;
            font-weight: 300;
        }



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Bloc css de la page quiz.html */
/*****************************************************************************************************************************/
/* titre h1 */
h1 {
    padding: 3.3vh 12.6% 2.4vh;
    font-size: 18px;
    font-weight: bold;
}

     h1 span {
        color: #2ab7ca;
    }


/* titre h2 */
h2 {
    padding: 0 5% 2.6vh;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
}


/* barre progression */
.progress {
    padding: 1vh 5% 0;
}

    .count-prog {
        padding-bottom: 3px;
        font-size: 10px;
        color: #b0aba3;
        font-weight: 300;
        text-align: right;
    }

        .count-prog span {
            color: #30e2af;
        }

    .barre-prog, 
    .barre-prog .pc-prog {
        height: 6px;
        background: #e6e6e6;
        border-radius: 6px;
    }

        .barre-prog .pc-prog {
            background: #30e2af;
        }


/* blocs reponses */
.liste-rep {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

    .liste-rep .item-rep {
        width: 42.2%;
        margin: 1.2% 2.4% 2.4%;
        text-align: left;
        cursor: pointer;
    }

        .liste-rep .item-rep p {
            padding-top: 6px;
            line-height: 17px;
        }

        .liste-rep .item-rep .visuel {
           width: 100%;
           height: auto;
           border: 1px solid #ccc;
           border-radius: 9px;
        }

.scale-in-center {
	-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-2-14 16:31:9
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}


.scale-out-top {
	-webkit-animation: scale-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: scale-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-2-14 16:34:58
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-out-top
 * ----------------------------------------
 */
@-webkit-keyframes scale-out-top {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 1;
  }
}
@keyframes scale-out-top {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 1;
  }
}


.bounce-top {
  -webkit-animation: bounce-top 0.9s both;
          animation: bounce-top 0.9s both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-2-17 14:44:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Bloc css de la page index.html */
/*****************************************************************************************************************************/
/* picto metier */
.img-job {
    width: 57%;
    height: auto;
    margin: 38px 0 0;
}


/* textes */
.intro, 
.note {
    padding: 0 6%;
    text-align: left;
}

.intro {
    font-size: 12px;
}

.note {
    padding-top: 30px;
    font-size: 10px;
}


/* bouton */
.btn {
    margin-top: 30px;
    padding: 0 30px;
    background: #6369d1;
    border-radius: 18px;
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    line-height: 45px;
    display: inline-block;
    cursor: pointer;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all 0.3s ease 0s;
}

.btn-filet {
    background: #fff;
    border: 1px solid #6369d1;
    font-size: 14px;
    color: #6369d1;
}

    .btn:hover {
        -webkit-transform: scale(1.12);
        -ms-transform: scale(1.12);
        transform: scale(1.12);
    }



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Bloc css de la page inscription.html */
/*****************************************************************************************************************************/
/* titre */
.pg-inscrip h1 {
    padding-left: 6%;
    padding-right: 6%;
    font-size: 16px;
    font-weight: 600;
}


/* formulaire */
.form-line {
    position: relative;
    height: 40px;
    margin-top: 25px;
    border-bottom: 1px solid #b8b8b8;
    text-align: left;
}

    .form-line label {
        position: absolute;
        top: 22px;
        left: 0;
        width: 100%;
        font-size: 12px;
        color: #b8b8b8;
        transition: 0.3s all;
        cursor: text;
    }

    .form-line input {
        margin-top: 20px;
    }


    .form-line input[type=text],
    .form-line input[type=password],
    .form-line input[type=email] {
        width: 100%;
        height: 17px;
        background: none;
        border: none;
        border-bottom: 1px solid #fff;
        outline: 0;
        font-size: 12px;
        line-height: 100%;
    }

    input[type=text].error,
    input[type=password].error,
    input[type=email].error {
        border-color: #f33;
    }

        .form-line input[type=text]:focus~label,
        .form-line input[type=text]:required:valid~label,
        .form-line input[type=text].has-content~label,
        .form-line input[type=password]:focus~label,
        .form-line input[type=password]:required:valid~label,
        .form-line input[type=password].has-content~label,
        .form-line input[type=email]:focus~label,
        .form-line input[type=email]:required:valid~label,
        .form-line input[type=email].has-content~label {
            top: 0;
            font-size: 12px;
        }

.lk-right {
    margin-top: 40px;
    font-size: 12px;
    color: #6369d1;
    text-align: right;
}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Bloc css de la page reponse.html */
/*****************************************************************************************************************************/
/* titre */
.pg-reponse h1 {
    padding-left: 6%;
    padding-right: 6%;
}


/* details */
.h2-rep {
    padding-bottom: 3px;
    font-family: 'Biryani';
    color: #fff;
}

.btn + .h2-rep {
    margin-top: 40px;
}

    .h2-rep span {
        padding: 4px 4px 0 2px;
        display: inline-block;
    }

    .tt-profil span {
        background-color: #ffd23f;
    }

    .tt-fort span {
        background-color: #2db8ca;
    }

    .tt-faible span {
        background-color: #e03264;
    }

    .tt-autres span {
        background-color: #6469d1;
    }

.txt-rep {
    padding: 0 5% 12px;
    font-size: 12px;
    text-align: left;
    line-height: 14px;
}