.bloc-tunnel-question h1 {margin-bottom: 35px; color: var(--couleur-blanc);}
.bloc-tunnel-question {border-bottom: 2px solid var(--couleur-blanc); background-color: var(--couleur-secondaire); padding-top: 45px; padding-bottom: 70px; }
.bloc-tunnel-question.motif-right-bg {background-image: url(/wp-content/uploads/2023/08/hero-qui-sommes-nous.svg); background-repeat: no-repeat; background-size: contain; background-position: right bottom;}

.bloc-tunnel-question>div {gap: 20px; flex-direction: column;}
.bloc-tunnel-question .bloc-left, .bloc-tunnel-question .bloc-right {width: 100%;}


.bloc-question-section {background-color: var(--couleur-blanc); border-radius: 20px; padding: 15px; box-shadow: rgba(6, 26, 72, 0.35) 0px 5px 15px; flex-direction: column;}
.question-section  h4, .question-section  h3 {font-family: 'roboto', sans-serif; font-weight: 400;}
.question-section  h4 {font-size: 16px; color: var(--couleur-secondaire); margin-bottom: 15px;}
.question-section  h3 {color: var(--couleur-principale); font-size: 24px; margin-bottom: 40px; }

.tunnel-next-previous {margin-top: 40px; justify-content: space-between;}
.tunnel-next-previous .next-button, .tunnel-next-previous .prev-button {background-color: var(--couleur-focus); color: var(--couleur-blanc); border: none; border-radius: 15px; padding: 16px 25px; text-transform: uppercase; font-size: 14px; font-weight: 600; transition: all 200ms ease-in-out;}
.tunnel-next-previous .next-button:hover, .tunnel-next-previous .prev-button:hover {transform: scale(1.03);}

.question-section fieldset {border: none;}
.question-section fieldset.flex-container {flex-direction: column; gap: 15px;}
.question-section fieldset label {color: var(--couleur-principale); font-size: 14px;}
.question-section input[type="radio"] {accent-color: var(--couleur-focus); outline: none; margin-right: 20px; width: 20px; height: 20px; vertical-align: middle;}
.question-section input[type="radio"]:checked {border: none !important;}
.question-section input[type="number"] {outline: none; border: none; border-bottom: 2px solid #ffb62b99; width: 80px;}
.question-section input[type="number"]:focus-visible {outline: none; border-bottom: 2px solid var(--couleur-focus);}
.question-section input[type="number"]::-webkit-inner-spin-button { opacity: .6; }

.bloc-tunnel-question .bloc-right {align-items: flex-end; justify-content: center;}
.tunnel-etape {display: inline-flex; flex-direction: row; background-color: var(--couleur-principale); border-radius: 50px; max-width: max-content; list-style: none;  box-shadow: rgba(6, 26, 72, 0.35) 0px 5px 15px;}
.tunnel-etape li {border-radius: 50%; overflow: hidden;}
.tunnel-etape a {font-size: 14px; color: var(--couleur-blanc); opacity: .4; width: 40px; height: 40px; text-align: center; justify-content: center; align-items: center;}
.tunnel-etape a.active {background-color: var(--couleur-focus); color: var(--couleur-blanc); opacity: 1;}


.bloc-tunnel-question #resultats-tunnel {display: flex; flex-wrap: wrap; justify-content: center;}
.bloc-tunnel-question #resultats-tunnel .filtre-stage-item{width: 250px;}
.bloc-tunnel-question #resultats-tunnel .bloc-contenu div {font-family: 'roboto', sans-serif;}
.bloc-tunnel-question #resultats-tunnel .bloc-contenu div:not(.tag-activite) {font-size: 14px; color: var(--couleur-principale); margin-left: auto;}




@media screen and (min-width: 768px) {
    .motif-right-bg.appear { animation: appear 1s forwards; }
    .bloc-tunnel-question.motif-right-bg {background-image: url(/wp-content/uploads/2023/08/hero-qui-sommes-nous.svg); background-repeat: no-repeat; background-size: contain; background-position:right bottom;}
    .bloc-tunnel-question .bloc-left, .bloc-tunnel-question .bloc-right {width: 50%;}
    .bloc-question-section {padding: 50px 50px 35px; min-height: 550px; justify-content: space-between;}
    .tunnel-etape {flex-direction:  column;}
    .bloc-tunnel-question>div {flex-direction: row;}
    .bloc-tunnel-question .bloc-right {justify-content: flex-start; padding-bottom: 40px;}
    .tunnel-next-previous .next-button, .tunnel-next-previous .prev-button { padding: 20px 50px; }
    .tunnel-img{position: absolute; bottom: -70px; width: 120%;}

}
@media screen and (max-width: 768px) {
  .tunnel-img{display: none;}
}


.bloc-tunnel-question input[type="radio"] {
  display: none;
}
.bloc-tunnel-question input[type="radio"] + label {
  position: relative;
  padding-left: 1.3rem;
}
.bloc-tunnel-question input[type="radio"] + label::before,
.bloc-tunnel-question input[type="radio"] + label::after {
  display: block;
  position: absolute;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  content:'';
  width: 1rem;
  height: 1rem; 
  border-radius: 1rem;
}
.bloc-tunnel-question input[type="radio"] + label::before {
  border: 1px solid  var(--couleur-focus);
  background-color: white;
}
.bloc-tunnel-question input[type="radio"]:checked + label::after {
  background-color:  var(--couleur-focus);
}