/* * * Version: 1.0, * Author: Matthieu Solente/VO2 * */
 *, *::before, *::after {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
 * {
     margin: 0;
}
 html {
     line-height: 1.15;
    /* 1 */
     -webkit-text-size-adjust: 100%;
    /* 2 */
     height: 100%;
}
 body {
     font-family: Verdana, Arial, sans-serif;
     font-size: 1.2em;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
}
 main {
     width: 100%;
     overflow-x: clip;
     padding: 50px 0;
}
 main p {
     font-size: clamp(1rem, 0.8333rem + 0.5556vw, 1.25rem);
     margin: 1em 0 
}
 header {
     padding: 20px;
     display: -webkit-box;
     display: -ms-flexbox;
     background-image:url('img/banner.jpg');
    background-repeat:no-repeat;
    background-size:cover 
}
 body:not(.home) header div{
     display: grid;
     grid-template-columns: 1fr;
}
 ul li{
     font-family: Verdana, Arial, sans-serif;
     font-size: clamp(1rem, 0.8333rem + 0.5556vw, 1.25rem);
     line-height: 1.5;
}
/************TITLE***************/
 h1, h2 {
     overflow-wrap: break-word;
     text-wrap: balance;
     font-weight: normal;
     margin: 1em 0;
     font-weight: normal;
}
 h1 {
     font-size: clamp(1.5rem, 1.1667rem + 1.1111vw, 2rem);
     line-height: 1.2;
     color:#ffffff 
}
 h2 {
     font-size: clamp(1.125rem, 0.9rem + 0.75vw, 1.5rem);
     text-align: center;
     color: #ffffff;
     align-content: end;
     font-style:italic;
     font-family:Georgia, serif 
}
 .home h1{
     font-size: clamp(1.875rem, 0.1875rem + 5.625vw, 4.6875rem);
     font-family:Georgia, serif;
     font-style:italic;
}
 .main_title__small{
     font-size:1em 
}
 .main_title__big{
    font-size: clamp(2.5rem, 0.8333rem + 5.5556vw, 5rem);
     font-family:Georgia,serif;
     font-style:italic 
}
 .home h2 {
     font-size: clamp(1.5625rem, 1.375rem + 0.625vw, 1.875rem);
     text-align: left;
     font-weight: bold;
     text-transform: uppercase;
     color: #ffffff;
}
.grid-container-fluid h2{
text-align:left }
 .accessibilite h1{
     font-size: clamp(1.00rem, calc(0.818rem + 0.909vw), 1.50rem);
}
 .accessibilite h2{
     text-align:left 
}
 .score h2{
     font-size: clamp(2rem, 1.3333rem + 2.2222vw, 3rem);
     color:#000000
}
.final-score{
text-align:center
}
 @media (max-width:768px) {
     .home h2 {
         margin: 0 
    }
}
 .fiche{
     display: grid;
     grid-template-columns: 1fr;
}
 .q-5 .fiche{
     grid-template-columns: 1fr;
}
 .fiche_img{
     display: grid;
     align-content: space-around;
     justify-content: center;
     align-items: center;
}
 .fiche_content{
     display: grid;
     align-content: center;
     justify-content: start;
     justify-items: flex-start;
}
 .question{
     font-weight:bold 
}
 .score .btn{
     border-radius:40px !important
}
 .pad{
     padding:24px 31px !important
}
/*************** PROGRESS BAR ********************/
 .progress {
     position: sticky;
     top: 0;
     height: 5px;
     background-color: #FEC3D9;
     overflow: hidden;
}
 .progress ul {
     list-style: none;
     display: flex 
}
 .progress-bar {
     background-color: #7A00E6;
     width: 0;
     height: 100%;
     transition: width 0.4s ease-in-out;
}
 .q-1 .progress-bar {
     width: 20%;
}
 .q-2 .progress-bar {
     width: 40%;
}
 .q-3 .progress-bar {
     width: 60%;
}
 .q-4 .progress-bar {
     width: 80%;
}
 .q-5 .progress-bar {
     width: 100%;
}
/*************** GENERAL ********************/
 .link a {
     display: flex;
     align-items: center;
}
 .link img {
     width: 20px;
     margin: 0;
     margin-left: 1em 
}
 .justification {
     border: 1px solid #7A00E6;
     padding: 10px;
     position: relative;
}
 .justification::before {
     content: '';
     background: url('img/information.png');
     background-size: cover;
     width: 50px;
     height: 50px;
     position: absolute;
     top: -25px;
     left: -25px 
}
 .time {
     vertical-align: middle 
}
 .time img {
     width: 30px;
     height: auto;
     display: inline-block;
     margin-right: 20px 
}
 .purple {
     color: #7A00E6 
}
 .small {
     font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
}
 .bold {
     font-weight: bold;
}
 .reference {
     font-size: clamp(0.625rem, 0.5125rem + 0.375vw, 0.8125rem);
}
 .btn_next {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     margin: 1em 
}
 .btn {
     color: #7A00E6;
     background-color: #ffffff;
     border: 1px solid #7A00E6;
     padding: 10px 31px;
     border-radius: 31px;
     text-decoration: none 
}
    .btn br{
        display:none
    }
/*************** RESULT ********************/
 .result_box {
     text-align: center 
}
 .text_success {
     font-size: clamp(1rem, 0.4rem + 2vw, 2rem);
     color: #91c461;
     font-weight: 700;
}
 .text_wrong {
     font-size: clamp(1rem, 0.4rem + 2vw, 2rem);
     color: #fc0047;
     font-weight: 700;
}
 .text_wrong img {
     width: 30px;
     display: inline-block;
     margin-right: 1em 
}
 #resultadofinal {
     font-size: 4.1875em;
     font-weight: 700;
     line-height: 1.5;
}
 #resultado, #resultadow {
     display: none 
}
/*************** FOOTER ********************/
 footer {
     background: #23004C;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(33.33%, 1fr));
     align-items: center;
}
 @media (max-width:992px) {
     body{
         height:auto !important
    }
     footer {
         display: block 
    }
     footer div {
         display: block 
    }
     .content_info {
         grid-template-columns: 1fr !important;
         text-align: center !important;
         align-items:center;
    }
     .content_info a, .content_info img {
         justify-self: center !important;
    }
}
 .content_info{
     display:grid;
     grid-template-columns: 1fr 1fr;
     align-items:center;
     padding:0 20px 
}
 .content_info a {
     justify-self: start;
     color:#ffffff;
     font-size:14px 
}
 .content_info img {
     width: 150px;
     height: auto;
     justify-self: end;
}
 .content_info>div {
     justify-self: center;
}
 .content_info-code {
     font-size: 10px;
     color:#ffffff;
     text-align:center
 }
/***********INPUTS ****************/
 fieldset {
     border: 0 
}
 fieldset p:not(.result_box) {
     display: flex;
     align-items: center;
}
 input[type="checkbox"]:before {
     content: "";
     width: 40px;
     height: 40px;
     float: left;
     margin: 0;
     border: 1px solid #7d99ff;
     background: white;
     border-radius: 10px;
     margin-left: -10px !important;
     margin-top: -15px !important;
}
 input[type="checkbox"]:checked:before {
     border-color: #7d99ff;
     background: #7d99ff;
     border-radius: 10px;
}
 input[type="checkbox"]:checked:after {
     content: "";
     width: 12px;
     height: 6px;
     border: 4px solid #7d99ff;
     float: left;
     margin-left: -2.95em;
     border-right: 0;
     border-top: 0;
     margin-top: 1em;
     -webkit-transform: rotate(-55deg);
     -ms-transform: rotate(-55deg);
     transform: rotate(-55deg);
}
 input[type="checkbox"] {
     font-weight: bold;
     line-height: 3em;
     color: #ccc;
     cursor: pointer;
     margin-right: 20px;
}
 input[type="checkbox"]:checked {
     color: #7d99ff;
}
 input[type="checkbox"]:checked:disabled:before {
     border-color: #91c461;
     background: #91c461;
     border-radius: 10px;
}
 input[type="checkbox"]:checked:disabled:after {
     content: "";
     width: 12px;
     height: 6px;
     border: 4px solid #91c461;
     float: left;
     margin-left: -2.95em;
     border-right: 0;
     border-top: 0;
     margin-top: 1em;
     -webkit-transform: rotate(-55deg);
     -ms-transform: rotate(-55deg);
     transform: rotate(-55deg);
}
 input[type="checkbox"]:disabled {
     font-weight: bold;
     line-height: 3em;
     color: #ccc;
     cursor: default;
}
 input[type="checkbox"]:checked:disabled {
     color: #91c461;
}
 label {
     margin-left: 10px;
}
 input[type="radio"]:before {
     content: "";
     width: 30px;
     height: 30px;
     float: left;
     margin: 0;
     border: 1px solid #7d99ff;
     background: white;
     border-radius: 10px;
     margin-left: -10px !important;
     margin-top: -9px !important;
     border-radius: 100%;
}
 input[type="radio"]:checked:before {
     border-color: #7d99ff;
     background: #7d99ff;
     border-radius: 100%;
}
 input[type="radio"]:checked:after {
     content: "";
     width: 12px;
     height: 6px;
     border: 4px solid #7d99ff;
     float: left;
     margin-left: -2.95em;
     border-right: 0;
     border-top: 0;
     margin-top: 1em;
     -webkit-transform: rotate(-55deg);
     -ms-transform: rotate(-55deg);
     transform: rotate(-55deg);
     border-radius: 100%;
     display: none;
}
 input[type="radio"] {
     font-weight: bold;
     line-height: 3em;
     color: #ccc;
     cursor: pointer;
     margin-right: 20px;
}
 input[type="radio"]:checked {
     color: #7d99ff;
     border-radius: 100%;
}
 input[type="radio"]:checked:disabled:before {
     border-color: #91c461;
     background: #91c461;
     border-radius: 100%;
}
 input[type="radio"]:checked:disabled:after {
     content: "";
     width: 12px;
     height: 6px;
     border: 4px solid #91c461;
     float: left;
     margin-left: -2.95em;
     border-right: 0;
     border-top: 0;
     margin-top: 1em;
     -webkit-transform: rotate(-55deg);
     -ms-transform: rotate(-55deg);
     transform: rotate(-55deg);
     border-radius: 100%;
     display: none;
}
 input[type="radio"]:disabled {
     font-weight: bold;
     line-height: 3em;
     color: #ccc;
     cursor: default;
     border-radius: 100%;
}
 input[type="radio"]:checked:disabled {
     color: #91c461;
     border-radius: 100%;
}
/*************FLEX GRID**********************/
 .flex-row {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
}
 .justify-content-center{
     justify-content:center 
}
 .mb-2{
     margin-bottom:2em 
}
 .grid-container {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     margin: 0 auto;
     padding: 1em;
     width: 100%;
     display: grid;
     row-gap: 30px;
}
 @media (min-width: 540px) {
     .grid-container {
         max-width: 540px;
    }
}
 @media (min-width: 768px) {
     .grid-container {
         max-width: 768px;
    }
}
 @media (min-width: 992px) {
     .grid-container {
         max-width: 100%;
    }
}
 @media (min-width: 1200px) {
     .grid-container {
         max-width: 1200px;
    }
}
 .grid-container-fluid {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     margin: 0 auto;
     padding: 0 1em;
     width: 100%;
}
 @media (min-width: 540px) {
     .grid-container-fluid {
         max-width: 100%;
    }
}
 @media (min-width: 1200px) {
     .grid-container-fluid {
         max-width: 1400px;
    }
}
 
 @media (min-width: 768px) {
    body:not(.home) header div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .fiche {
        display: grid;
        grid-template-columns: 1fr 4fr;
    }
    .btn br{
        display:block
    }
    .content_info>div {
    justify-self: end;
    }
 }