/* * * Version: 1.0, * Author: Matthieu Solente/VO2 * */
*, *::before, *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
* {
margin: 0;
}
html {
line-height: 1.5;
/* 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;

 display: flex;
  flex-direction: column;
  min-height: 100vh;

}
header {
padding: 20px;
display: -webkit-box;
display: -ms-flexbox;
background-color:#ffc127 
}
main {
width: 100%;
overflow-x: clip;
flex:1;
padding: 50px 0;
}
main p {
font-size: clamp(1rem, 0.76rem + 0.8vw, 1.35rem);
margin: 1em 0 
}
/************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.039vw + 1.231rem, 2.063rem);
line-height: clamp(2.25rem, 0.797vw + 2.044rem, 2.681rem);
font-family: Verdana, Arial, sans-serif;
font-style: italic;
color: #000000;
margin: 0;
font-weight: bold;
}
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 h2 {
font-size: clamp(1.25rem, 1.155vw + 0.951rem, 1.875rem);
line-height: clamp(1.875rem, 1.039vw + 1.606rem, 2.438rem);
font-family: Verdana, Arial, sans-serif;
text-align: left;
font-weight: bold;
text-transform: uppercase;
color: #ffffff;
margin:0
}
@media (max-width:768px) {
.home h2 {
text-align: center;
margin: 0 
}
}
.bg-black{
padding: 10px;
border-radius:20px;
background-color:#000000;
text-align:center
}
.grid-container {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
padding: 1em;
width: 100%;
display: grid;
row-gap: 20px;
}
.grid-container-fluid h2{
text-align:left 
}
ul li{
font-family: Verdana, Arial, sans-serif;
}
.quiz_intro{
text-align:center
}
.time {
vertical-align: middle 
}
.time img {
width: 30px;
height: auto;
display: inline-block;
margin-right: 20px 
}
/*************** GENERAL ********************/
img{
max-width:100%
}
.apo-img{
width:100%;
max-width:100px
}
.mb-0{
margin-bottom:0
}
.mt-0{
margin-top:0
}
.text_italic{
font-style:italic
}
.text_small {
font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
}
.text_x_small {
font-size:10px;
font-style:italic;
}
.bold {
font-weight: bold;
}
.text_normal{
font-weight:normal !important}
.yellow {
color: #ffc127;
}
.highlight{
color:#e1ab4b;
font-weight:bold;
text-transform:uppercase
}
.mb-2{
margin-bottom:2em 
}
/*************** LINK ********************/
.link{
flex: 1 1 0px;
text-align:center
}
.link a {
display: flex;
align-items: center;
flex: 1 1 0px;
justify-content: center;
}
.link img {
width: 20px;
margin: 0;
margin-left: 1em 
}
/*************** PROGRESS BAR ********************/
.progress {
position: sticky;
top: 0;
height: 5px;
background-color: #ffc127;
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%;
}
/******* QUESTIONS **********************/
.questions_bc{
border-radius:20px;
background-color:#f7f9d5;
padding:30px 30px 10px;
text-align:center 
}
.question__number_bc{
display:flex 
}
.question__number_pill{
padding:10px 20px;
background-color:#ffc127;
color:#000000;
border-radius:30px 
}
/***********INPUTS ****************/
.info__bc{
display:flex;
justify-content:center 
}
fieldset {
border: 0 ;
display:flex;
justify-content: center 
}
.legend{
font-weight:bold}
.cta-radio{
display: inline-flex;
align-items: center;
justify-content: center;
font-weight:bold;
padding:20px;
background-color:#ffc127;
color:#000000;
border-radius:20px;
min-height: 126px;
width:100%;
height:100%;
cursor: pointer;
user-select: none;
font-size:0.9em;
}
.cta-radio:hover {
background: #fbe583;
}
.cta-radio:active {
transform: translateY(1px);
}
.cta-option.is-correct{
background: #0ea5a5 !important;
}
.cta-option.is-wrong{
background: #ef4444 !important;
}
input[type="radio"]:focus-visible + .cta-radio, input[type="checkbox"]:focus-visible + .cta-radio{
outline: 3px solid #60a5fa;
outline-offset: 3px;
box-shadow: 0 0 0 3px #ffffff inset;
}
input[type="radio"]:checked + .cta-radio, input[type="checkbox"]:checked + .cta-radio {
background: #fbe583;
}
input[type="radio"], input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
input[type="radio"]:disabled + .cta-radio, input[type="checkbox"]:disabled + .cta-radio {
background: #cbd5e1;
color: #ffffff;
cursor: not-allowed;
box-shadow: none;
opacity: 0.85;
}
.quiz input:disabled + .cta-option.is-correct, .quiz input:disabled + .cta-option.is-wrong{
color: #fff;
opacity: 1;
}
.quiz .flex-row{
margin:0}


/**************VIDEO ****************/
.video{

text-align:center;
width:100%}
.ressources_content__video{
margin: 0 auto;
max-width:600px}
/************FEEDBACK***************/
.feedback{
font-size: clamp(1rem, 0.6667rem + 1.1111vw, 1.5rem);
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
gap: .5rem;
font-weight:bold;
}
.feedback.is-good::before {
content: "";
width: 40px;
height: 40px;
background: url("img/correct.png") no-repeat center / contain;
/* pour l’alignement vertical du pseudo-élément avec le texte : */
display: inline-block;
}
.feedback.is-bad::before {
content: "";
width: 40px;
height: 40px;
background: url("img/close.png") no-repeat center / contain;
/* pour l’alignement vertical du pseudo-élément avec le texte : */
display: inline-block;
}
.feedback .msg{
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 10px;
padding: 10px 12px;
background: #eef2ff;
}
.feedback.is-good{
color: #065f46;
}
.feedback.is-bad{
color: #dd3838;
}
.hidden{
display: none !important;
}
/*************** JUSTIFICATION BLOC REPONSE ********************/
.justification {
border: 1px solid #c0c0c0;
padding: 10px 30px;
position: relative;
border-radius:20px;
background-color: #cbd5e1;
color: #000000;
}
.justification a{
color:#000000}
.justification img{
vertical-align:middle
}
.justification::before {
content: '';
background: url('img/information.png');
background-size: cover;
width: 50px;
height: 50px;
position: absolute;
top: -25px;
left: -25px 
}
/*************** BOUTON ********************/
.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: #000000;
background-color: #ffc127;
border: 1px solid #ffc127;
padding: 20px 40px;
border-radius: 12px;
text-decoration: none 
}
.btn br{
display:none 
}
/***************PAGE SCORE FINAL*********************************/
.score header{
padding:0;
border-bottom:2px solid #ffc127}
.final-score{
text-align:center 
}
.final-score_text{
vertical-align:middle;
background-color:#fbe583;
padding: 10px;
position: relative;
}
.final-score_text::after{
content: '';
background: url('img/apo.png');
background-size: cover;
width: 100px;
height: 100px;
position: absolute;
top: -48px;
right: 0;
}
/*************** RESULT ********************/
#resultadofinal {
font-size: 4.1875em;
font-weight: 700;
line-height: 1.5;
}
#resultado, #resultadow {
display: none 
}
/**************PAGE ACCESSIBILITE****************************/
.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 ;
margin:0
}
/*************** FOOTER ********************/
footer {
background: #ffc127;
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:#000000;
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:#000000;
text-align:center 
}
/*************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 
}
.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;
margin-bottom: 1em;
}
.flex-container {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
padding: 0 1em;
width: 100%;
}
@media (min-width: 540px) {
.flex-container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.flex-container {
max-width: 768px;
}
}
@media (min-width: 992px) {
.flex-container {
max-width: 100%;
}
}
@media (min-width: 1200px) {
.flex-container {
max-width: 1200px;
}
}
.flex-col-xs-8, .flex-col-sm-8, .flex-col-md-8, .flex-col-lg-8 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
width: 100%;
}
@media (min-width: 375px) {
.flex-col-xs-8 {
max-width: calc(100% * (8 / 12));
width: calc(100% * (8 / 12));
}
}
@media (min-width: 768px) {
.flex-col-sm-8 {
max-width: calc(100% * (8 / 12));
width: calc(100% * (8 / 12));
}
}
@media (min-width: 992px) {
.flex-col-md-8 {
max-width: calc(100% * (8 / 12));
width: calc(100% * (8 / 12));
}
}
@media (min-width: 1200px) {
.flex-col-lg-8 {
max-width: calc(100% * (8 / 12));
width: calc(100% * (8 / 12));
}
}
.flex-col-xs-1, .flex-col-sm-1, .flex-col-md-1, .flex-col-lg-1, .flex-col-xs-2, .flex-col-sm-2, .flex-col-md-2, .flex-col-lg-2, .flex-col-xs-3, .flex-col-sm-3, .flex-col-md-3, .flex-col-lg-3, .flex-col-xs-5, .flex-col-sm-5, .flex-col-md-5, .flex-col-lg-5, .flex-col-xs-7, .flex-col-sm-7, .flex-col-md-7, .flex-col-lg-7, .flex-col-xs-9, .flex-col-sm-9, .flex-col-md-9, .flex-col-lg-9, .flex-col-xs-10, .flex-col-sm-10, .flex-col-md-10, .flex-col-lg-10,.flex-col-xs-12, .flex-col-sm-12, .flex-col-md-12, .flex-col-lg-12 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: .5em;
width: 100%;
}
/* XS — 375px */
@media (min-width: 375px) {
.flex-col-xs-1 {
max-width: calc(100% * (1 / 12));
width: calc(100% * (1 / 12));
}
.flex-col-xs-2 {
max-width: calc(100% * (2 / 12));
width: calc(100% * (2 / 12));
}
.flex-col-xs-3 {
max-width: calc(100% * (3 / 12));
width: calc(100% * (3 / 12));
}
.flex-col-xs-5 {
max-width: calc(100% * (5 / 12));
width: calc(100% * (5 / 12));
}
.flex-col-xs-7 {
max-width: calc(100% * (7 / 12));
width: calc(100% * (7 / 12));
}
.flex-col-xs-9 {
max-width: calc(100% * (9 / 12));
width: calc(100% * (9 / 12));
}
.flex-col-xs-10 {
max-width: calc(100% * (10 / 12));
width: calc(100% * (10 / 12));
}
.flex-col-xs-11 {
max-width: calc(100% * (11 / 12));
width: calc(100% * (11 / 12));
}
.flex-col-xs-12 {
max-width: calc(100% * (12 / 12));
width: calc(100% * (12 / 12));
}
}
/* SM — 768px */
@media (min-width: 768px) {
.flex-col-sm-1 {
max-width: calc(100% * (1 / 12));
width: calc(100% * (1 / 12));
}
.flex-col-sm-2 {
max-width: calc(100% * (2 / 12));
width: calc(100% * (2 / 12));
}
.flex-col-sm-3 {
max-width: calc(100% * (3 / 12));
width: calc(100% * (3 / 12));
}
.flex-col-sm-5 {
max-width: calc(100% * (5 / 12));
width: calc(100% * (5 / 12));
}
.flex-col-sm-7 {
max-width: calc(100% * (7 / 12));
width: calc(100% * (7 / 12));
}
.flex-col-sm-9 {
max-width: calc(100% * (9 / 12));
width: calc(100% * (9 / 12));
}
.flex-col-sm-10 {
max-width: calc(100% * (10 / 12));
width: calc(100% * (10 / 12));
}
.flex-col-sm-11 {
max-width: calc(100% * (11 / 12));
width: calc(100% * (11 / 12));
}
.flex-col-sm-12 {
max-width: calc(100% * (12 / 12));
width: calc(100% * (12 / 12));
}
}
/* MD — 992px */
@media (min-width: 992px) {
.flex-col-md-1 {
max-width: calc(100% * (1 / 12));
width: calc(100% * (1 / 12));
}
.flex-col-md-2 {
max-width: calc(100% * (2 / 12));
width: calc(100% * (2 / 12));
}
.flex-col-md-3 {
max-width: calc(100% * (3 / 12));
width: calc(100% * (3 / 12));
}
.flex-col-md-5 {
max-width: calc(100% * (5 / 12));
width: calc(100% * (5 / 12));
}
.flex-col-md-7 {
max-width: calc(100% * (7 / 12));
width: calc(100% * (7 / 12));
}
.flex-col-md-9 {
max-width: calc(100% * (9 / 12));
width: calc(100% * (9 / 12));
}
.flex-col-md-10 {
max-width: calc(100% * (10 / 12));
width: calc(100% * (10 / 12));
}
.flex-col-md-11 {
max-width: calc(100% * (11 / 12));
width: calc(100% * (11 / 12));
}
.flex-col-md-12 {
max-width: calc(100% * (12 / 12));
width: calc(100% * (12 / 12));
}
}
/* LG — 1200px */
@media (min-width: 1200px) {
.flex-col-lg-1 {
max-width: calc(100% * (1 / 12));
width: calc(100% * (1 / 12));
}
.flex-col-lg-2 {
max-width: calc(100% * (2 / 12));
width: calc(100% * (2 / 12));
}
.flex-col-lg-3 {
max-width: calc(100% * (3 / 12));
width: calc(100% * (3 / 12));
}
.flex-col-lg-5 {
max-width: calc(100% * (5 / 12));
width: calc(100% * (5 / 12));
}
.flex-col-lg-7 {
max-width: calc(100% * (7 / 12));
width: calc(100% * (7 / 12));
}
.flex-col-lg-9 {
max-width: calc(100% * (9 / 12));
width: calc(100% * (9 / 12));
}
.flex-col-lg-10 {
max-width: calc(100% * (10 / 12));
width: calc(100% * (10 / 12));
}
.flex-col-lg-11 {
max-width: calc(100% * (11 / 12));
width: calc(100% * (11 / 12));
}
.flex-col-lg-12 {
max-width: calc(100% * (12 / 12));
width: calc(100% * (12 / 12));
}
}
.flex-col-xs-6, .flex-col-sm-6, .flex-col-md-6, .flex-col-lg-6 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
width: 100%;
}
@media (min-width: 375px) {
.flex-col-xs-6 {
max-width: calc(100% * (6 / 12));
width: calc(100% * (6 / 12));
}
}
@media (min-width: 768px) {
.flex-col-sm-6 {
max-width: calc(100% * (6 / 12));
width: calc(100% * (6 / 12));
}
}
@media (min-width: 992px) {
.flex-col-md-6 {
max-width: calc(100% * (6 / 12));
width: calc(100% * (6 / 12));
}
}
@media (min-width: 1200px) {
.flex-col-lg-6 {
max-width: calc(100% * (6 / 12));
width: calc(100% * (6 / 12));
}
}
.flex-col-xs-4, .flex-col-sm-4, .flex-col-md-4, .flex-col-lg-4 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
width: 100%;
}
@media (min-width: 375px) {
.flex-col-xs-4 {
max-width: calc(100% * (4 / 12));
width: calc(100% * (4 / 12));
}
}
@media (min-width: 768px) {
.flex-col-sm-4 {
max-width: calc(100% * (4 / 12));
width: calc(100% * (4 / 12));
}
}
@media (min-width: 992px) {
.flex-col-md-4 {
max-width: calc(100% * (4 / 12));
width: calc(100% * (4 / 12));
}
}
@media (min-width: 1200px) {
.flex-col-lg-4 {
max-width: calc(100% * (4 / 12));
width: calc(100% * (4 / 12));
}
}
@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;
display:flex;
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) {
.btn br{
display:block 
}
.content_info>div {
justify-self: end;
}
}