/* * * 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%;
     scroll-behavior: smooth 
}
@media (prefers-reduced-motion: reduce) {  
  html {  
    scroll-behavior: auto;  
  }  
}  
 body {
     font-family: Verdana, Arial, sans-serif;
     font-size: 1.2em;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
     background-color:#eed4f4 
}
 main {
     width: 100%;
     overflow-x: clip;
     padding: 50px 0;
}
 main p {
     font-size: clamp(1rem, 0.76rem + 0.8vw, 1.35rem);
     margin: 1em 0 
}
 .hero {
     display:flex;
     width: 100%;
     align-items: start;
     justify-content: flex-end;
}
 .hero__logo {
     max-width: 200px;
     height: auto;
     flex: 0 0 auto;
     margin-left:auto 
}
 .home .hero{
     background-image:url('img/banner.jpg');
     background-repeat:no-repeat;
     background-size:cover;
     min-height: 710px;
     position:relative;
}
/* Bouton indicateur */
 .scroll {
     position: absolute;
     left: 50%;
     bottom: 50px;
 }     
.scrolldown {
    position: relative;
    width: 40px;
    height: 60px;
    margin-left: 0;
    border: 3px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
    margin-bottom: 16px;
    cursor: pointer;
 
}

.scrolldown::before {
content: "";
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 10px;
    height: 6px;
    margin-left: -5px;
    background-color: #fff;
    border-radius: 100%;
    animation: scrolldown-anim 2s infinite;
    box-sizing: border-box;
    box-shadow: 0px -5px 3px 1px #ffffff66;
}

@keyframes scrolldown-anim {
  0% {
    opacity: 0;
    height: 6px;
  }
  40% {
    opacity: 1;
    height: 10px;
  }
  80% {
    transform: translate(0, 20px);
    height: 10px;
    opacity: 0;
  }
  100% {
    height: 3px;
    opacity: 0;
  }
}

/* ----- chevrons ----- */
.chevrons {
  padding: 6px 0 0 0;
    margin-left: -3px;
    margin-top: 54px;
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chevrondown {
  margin-top: -6px;
  position: relative;
  border: solid #fff;      /* ex-: var(--color) */
  border-width: 0 3px 3px 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}

.chevrondown:nth-child(odd) {
  animation: pulse 500ms ease infinite alternate;
}
.chevrondown:nth-child(even) {
  animation: pulse 500ms ease infinite alternate 250ms;
}

@keyframes pulse {
  from { opacity: 0; }
  to   { opacity: 0.5; }
}




@media (prefers-reduced-motion: reduce){
  .chevrondown,
  .scrolldown { animation: none; }
}

/* Cible de défilement : évite que le bloc passe sous un éventuel header sticky */
 #start {
     scroll-margin-top: 0;
    /* ajuste si tu as un header fixe */
}
 .column{
     flex-direction:column 
}
 .pill__bc{
     position:relative;
     display:inline-block;
     margin: 3em 1em;
     text-align:center 
}
 .pill__copy{
     position:relative;
     padding:20px 40px;
     border-radius:20px;
     display:inline-block;
     background-color:#cb6ce6;
     text-transform:uppercase;
     color:#ffffff;
     font-size: clamp(1.13rem, calc(0.300rem + 2.750vw), 2.50rem);
}
 .pill__copy::after{
     content:'';
     background-image:url('img/question.png');
     pointer-events: none;
     background-size:contain;
     background-repeat:no-repeat;
     position:absolute;
     top: 1.5em;
     left: 6.5em;
     width: 60px;
     height: 91px;
}
 @media (max-width:768px) {
 .pill__copy::after{
left: 8.5em;
    width: 40px;
    height: 60px;
    }
 }
 .question__number_bc{
     display:flex 
}
 .question__number_pill{
     padding:10px 20px;
     background-color:#773e91;
     color:#ffffff;
     border-radius:30px 
}
 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;
}
 .sr-only {
     position: absolute !important;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0 0 0 0);
     white-space: nowrap;
     border: 0;
}
 legend{
     margin: 0 0 1em;
}
 .purple{
     color:#773e91;
     font-weight:bold 
}
/************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;
}
 .home h2 {
     font-size: clamp(1.5625rem, 1.375rem + 0.625vw, 1.875rem);
     text-align: left;
     font-weight: bold;
     text-transform: uppercase;
     color: #ffffff;
}
 @media (max-width:768px) {
     .home h2 {
         margin: 0 
    }
}
/************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;
}
 .feedback.is-good::after {
     content: "";
     width: 40px;
     height: 40px;
     background: url("img/icone.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 .msg.good{
     background: #ecfeff;
     color: #065f46;
}
 .feedback .msg.bad{
     background: #fee2e2;
     color: #7f1d1d;
}
 .explanation{
     background-color: #773e91;
     color:#ffffff;
     padding:20px;
     border-radius:20px;
     font-size: clamp(1rem, 0.6667rem + 1.1111vw, 1.5rem);
}
/************ACCESSIBILITE***************/
 .accessibilite h1, .accessibilite h2{
     color:#000000;
     text-align:left 
}
 .accessibilite h1{
     font-size: clamp(1.00rem, calc(0.818rem + 0.909vw), 1.50rem);
}
 .accessibilite .text-link{
     word-break:break-all 
}
/************SCORE FINAL***************/
 .score main{
     padding: 50px 0 0;
}
 .score .congrats{
     font-size: clamp(2rem, 1.3333rem + 2.2222vw, 3rem);
     color:#000000;
     text-align:center;
     margin:.5em
}
 .score .small{
     margin-top:3em;
     margin-bottom:0
}

.score .pill__copy::after{
content:'';
background-image:none
}
.score .pill__bc{
margin:1em
}
.score .pill__copy{
padding:20px 80px !important}
 .score .btn{
     border-radius:40px !important 
}
 .final-score__bc{
     text-align:center 
}
 .final-score__text{
     grid-column: 2;
     text-align: left;
}
 .final-score__end{
     text-align:center;
     color:#000;
     margin:3em 0;
     font-size: clamp(1rem, 0.6667rem + 1.1111vw, 1.5rem) 
}
 #resultadofinal{
     font-size: clamp(2rem, 1.3333rem + 2.2222vw, 3rem);
}
 .explore{
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 2 colonnes égales */
     gap: 1rem;
     align-items: stretch 
}
 .explore .btn{
     display: inline-flex;
    /* ou flex */
     width: 100%;
    /* occupe 100% de sa colonne */
     justify-content: center;
     align-items: center;
     border-radius:20px 
}
/************QUESTIONS***************/
 .questions_bc{
     margin:2em 0 0;
     border-radius:20px;
     background-color:#ffffff;
     padding:30px;
     text-align:center 
}
 .question{
     display:inline-block;
}

/*************** 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: 25%;
}
 .q-2 .progress-bar {
     width: 50%;
}
 .q-3 .progress-bar {
     width: 75%;
}
 .q-4 .progress-bar {
     width: 100%;
}
/*************** GENERAL ********************/
 .btn__bc {
     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 
}
 .home .btn__bc{
     margin:3em 1em 
}
 .btn {
     color: #ffffff;
     background-color: #773e91;
     padding: 20px 70px;
     border-radius: 20px;
     text-decoration: none 
}
 .btn br{
     display:none 
}
/*************** GENERAL ********************/
 .time__bc{
     text-align:center 
}
 .time {
     vertical-align: middle 
}
 .time img {
     width: 30px;
     height: auto;
     display: inline-block;
     margin-right: 20px 
}
 .small p, .small li, .small {
     font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
}
 .bold {
     font-weight: bold;
}
 .hidden{
     display: none !important;
}
/*************** FOOTER ********************/
 footer {
     background: #773e91;
     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:10px 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 ;
     display:grid;
     grid-auto-flow: column;
     gap: 1rem;
     justify-items: center 
}
.q-4 fieldset{

order: 0;
  display: flex;
  flex-wrap: wrap;      /* retour à la ligne */
  gap: 1rem;
  justify-content: center;  /* centre CHAQUE ligne */
  /* retire toute règle Grid conflictuelle sur fieldset */


}

.q-4 .question {
  flex: 0 1 280px;      
  display:block;
}

/* Le CTA remplit sa “case” */
.q-4 .cta-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;          /* prend toute la largeur de la “case” */
  padding: 20px;
  min-height: 126px;
  font-weight: bold;
  background-color: #773e91;
  color: #fff;
  border-radius: 20px;
  box-sizing: border-box;
}

 .questions_bc img{
     max-width: 100%;
}
 @media (max-width: 768px) {
     fieldset{
         grid-auto-flow: row !important;
        /* on passe en lignes = vertical */
         justify-items: stretch;
        /* facultatif : étendre à la largeur */
    }
     .explore{
         grid-template-columns: 1fr;
    }
}
 .info__bc{
     display:flex;
     justify-content:center 
}
 .cta-radio{
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-weight:bold;
     padding:20px;
     background-color:#773e91;
     color:#ffffff;
     border-radius:20px;
     min-height: 126px;
     
     cursor: pointer;
     user-select: none;
}
 .cta-radio:hover {
     background: #cb6ce6;
}
 .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: #cb6ce6;
}
 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: #475569;
     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;
}
/*************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) {
     .btn br{
         display:block 
    }
     .content__info>div {
         justify-self: end;
    }
}