.bloc-tunnel-question>div {background-color: var(--couleur-bg); border: 1px solid var(--couleur-principale); border-radius: 20px; overflow: hidden; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; flex-direction: column;min-height: 700px;}
.bloc-tunnel-question h2, .bloc-tunnel-question h4, .bloc-tunnel-question h3, .question-section {color: var(--couleur-blanc);}
.question-section {font-size: 14px; padding: 0 15px;}
.bloc-tunnel-question h2 {font-size: 26px; padding-bottom: 20px;}
.bloc-tunnel-question h4 {font-size: 18px; font-weight: 300; margin: 0;}
.bloc-tunnel-question h3 {font-size: 35px; font-weight: 600; padding-bottom: 50px;}
 .bloc-tunnel-question .question-section[data-section="3"] h3{ padding-bottom: 10px;}
.bloc-tunnel-question .bloc-left {padding: 10px 15px;}
.bloc-tunnel-question .bloc-right {background-size: cover; width: 100%; height: auto; position: relative; min-height: 200px;}


.question-section.custom-label input[type="radio"]{ display: none;}
.question-section.custom-label label {position: relative; padding-left: 20px;cursor: pointer;    margin-right: 10px; }
.question-section.custom-label label::before { content: ""; position: absolute;left: 0px; top: 50%;transform: translateY(-50%);width: 10px;height: 10px;background-color: var(--couleur-blanc);border-radius: 50%;transition: background-color 0.3s ease;border: 1px solid var(--couleur-principale);}
.question-section.custom-label input[type="radio"]:checked + label::before { background-color: var(--couleur-principale);}
.question-section.custom-label label:hover{font-weight: bold;}


.bloc-tunnel-question .prev-button, .bloc-tunnel-question .next-button {background: transparent; border: none; color: var(--couleur-blanc); font-size: 16px; font-weight: 600;}
.bloc-tunnel-question .next-button::after {content: ''; display: inline-block; background-image: url(/wp-content/uploads/2023/08/fleche-savoir-plus.svg); width: 40px; height: 40px; border: 1px solid var(--couleur-principale-dark); border-radius: 50%; background-repeat: no-repeat; background-position: center; vertical-align: middle; margin-left: 25px;}
.bloc-tunnel-question .next-button:hover::after {transform: scale(1.08);}
.bloc-tunnel-question .prev-button:hover::before  {transform: scale(1.08) scaleX(-1);}
.bloc-tunnel-question .prev-button::before {content: ''; display: inline-block; background-image: url(/wp-content/uploads/2023/08/fleche-savoir-plus.svg); width: 40px; height: 40px; border: 1px solid var(--couleur-principale-dark); border-radius: 50%; background-repeat: no-repeat; background-position: center; vertical-align: middle; margin-right: 25px; transform: scaleX(-1);}
.bloc-tunnel-question .next-button[disabled], .bloc-tunnel-question .prev-button[disabled] {opacity: 0.5;}

.tunnel-etape {display: none !important; margin-left: auto; margin-top: 20px; margin-right: 20px; list-style: none; padding-right: 25px; padding-left: 25px; background-color: rgba(45, 45, 45, .3); border: 1px solid var(--couleur-principale); border-radius: 25px; max-width: max-content; gap: 15px; align-items: center; height: 50px;background-color: rgba(0,0,0,0.7);}
.tunnel-etape li a {background-color: var(--couleur-blanc); border-radius: 50%; width: 10px; height: 10px; justify-content: center; align-items: center; color: transparent;}
.tunnel-etape li a.active {background-color: var(--couleur-principale); border-color: 1px solid var(--couleur-blanc); border-radius: 50%; width: 25px; height: 25px; justify-content: center; align-items: center; color: var(--couleur-blanc);}

.tunnel-next-previous {margin-top: 50px;}

#liste_projet {flex-wrap: wrap; gap: 0 30px;}

.bloc-tunnel-question .formulaire {background-color: var(--couleur-blanc); border-radius: 20px; padding: 20px;}
.bloc-tunnel-question .formulaire input, .bloc-tunnel-question .formulaire textarea {padding: 14px 32px; color: var(--couleur-principale); transition: all 250ms ease-in-out; font-weight: 500; border: 1px solid var(--couleur-principale); border-radius: 5px; display: inline-block;}

.bloc-tunnel-question .formulaire input:focus-visible, .bloc-tunnel-question .formulaire textarea:focus-visible {outline: 1px solid var(--couleur-principale);}
.bloc-tunnel-question .formulaire input[type="submit"] {border: none; background-color: var(--couleur-principale); color: var(--couleur-blanc); font-weight: 600; text-transform: uppercase;}
.bloc-tunnel-question .formulaire input[type="submit"]:hover {background-color: var(--couleur-principale-light);}
.bloc-tunnel-question .formulaire .gform_fields .gfield:first-of-type {display: none;}
.bloc-tunnel-question .formulaire .gform_fields {display: flex; flex-wrap: wrap; gap: 0 15px;}
#liste_metier {flex-wrap: wrap; gap: 5px;}
#liste_metier .unmetier { font-size: 0.9em; margin-bottom: 10px; display: block; background: var(--couleur-principale); max-width: max-content; padding: 6px 10px; color: var(--couleur-blanc); border-radius: 3px; font-weight: 500;}

.formulaire .gfield--type-textarea {width: 100%;}
.formulaire textarea {max-height: 100px; width: 100%;}
    #liste_projet span {width: 100%;}
#liste_projet span, .question-section>.unchoix {line-height: 22px;text-indent: -20px; display: inline-block; margin-right: 20px;}
.gfield_validation_message,.gform_submission_error{color: red !important; font-size: 16px;} 
.gform_confirmation_message { color: black !important;  }
@media screen and (max-width: 768px) {

   .page1 .unchoix{display: block;line-height: 22px; margin-bottom: 10px; margin-left: 20px;}
   #liste_projet span {line-height: 18px;font-size: 12px; margin-bottom: 10px;}
   .liste_projet {margin-left: 20px;}
   .bloc-tunnel-question .prev-button::before{margin-right: 10px;}
   .bloc-tunnel-question .next-button::after{margin-left: 10px;}
   .bloc-tunnel-question .prev-button, .bloc-tunnel-question .next-button{font-size: 14px;}
   .bloc-tunnel-question .formulaire input, .bloc-tunnel-question .formulaire textarea{padding: 14px; width: 100%; font-size: 13px;}
   .bloc-tunnel-question .formulaire input[type="submit"]{margin-top: 20px;}
   .bloc-tunnel-question .formulaire input::placeholder{font-size: 13px;}
   .gform_submission_error, .gform_confirmation_message, .gfield_validation_message{font-size: 13px;}
   .bloc-tunnel-question h2.title-after::after { margin-left: 50%;}
}
@media screen and (min-width: 768px) {
   .bloc-tunnel-question h2.title-after { text-align: left;}
   .tunnel-etape {display: flex !important;}
   .formulaire textarea {width: calc(100% - 15px);}
   #liste_projet span {line-height: 22px;text-indent: -20px; display: inline-block;}
   .liste_projet {columns: 2; }
   .bloc-tunnel-question .bloc-left{display: flex; flex-direction: column; align-content: center; justify-content: center;}

   h1::before{}
   .bloc-tunnel-question.animate-before .bloc-right::after{ left: -100px;}

    .bloc-tunnel-question .bloc-left, .bloc-tunnel-question .bloc-right {width: 50%;}
    .bloc-tunnel-question>div {flex-direction: row;}
    .bloc-tunnel-question .bloc-left {padding: 40px 60px;background-image: url('/wp-content/uploads/2023/09/fond-tunnel.png');    background-size: cover;background-position: right;}

    .bloc-tunnel-question .formulaire .gform_fields .gfield:nth-child(-n + 5)  {width: calc(50% - 15px)}
    .bloc-tunnel-question .formulaire { width: 480px; padding: 20px;}
    .bloc-tunnel-question .formulaire .gform_fields .gfield:nth-child(-n + 5) input  {width: 100%;}
    .bloc-tunnel-question .bloc-right::after {content: url(/wp-content/uploads/2023/08/picto-chevrons-gauche-1.svg); position: absolute; bottom: 50%; left: -100px;  transform: scaleX(-1) translateY(50%); width: 360px; filter: drop-shadow(3px 5px 8px rgb(0 0 0 / 0.4));transition: left 0.8s ease;left: -100%;}

    .bloc-slider.chevauche-section + .bloc-tunnel-question {position: relative; top: -70px;}

    }