:root {
    /*Basics*/
    --whiteColor: #ffffff;
    --BGgrey: #F9F9F9;

    /*Text Color*/
    --mainTextColor: #828282;
    --darkTextColor: #282828;

    /*Sections Colors*/
    --sec0-mainColor-AA: #E56300;
    --sec0-mainColor-illus: #F98240;

    --sec1-mainColor-AA: #DC3867;
    --sec1-mainColor-illus: #F06392;

    --sec2-mainColor-AA: #3CA468;
    --sec2-mainColor-illus: #6FCF97;

    --sec3-mainColor-AA: #C32EAC;
    --sec3-mainColor-illus: #E153CB;

    --sec4-mainColor-AA: #288CBD;
    --sec4-mainColor-illus: #51B5EE;

    --sec5-mainColor-AA: #9101CC;
    --sec5-mainColor-illus: #992EC5;

}

.mp_body {
    padding: 0;
    overflow: hidden;
    height: 100vh;
    height: -webkit-fill-available;
}

/*html {
    height: -apple-fill-available;
  }*/
h2 {
    margin-top: 0;
    color: var(--darkTextColor);
    font-weight: 600;
}

h4 {
    color: var(--darkTextColor);
}
ul {
    padding: 0 0 0 13px;
  }
/*%%%%%%%%%%%%% BACKGROUND %%%%%%%%%%%%%*/

.bg {
    position: fixed;
    width: 100%;
    height: 100%;
    transition: all 1.25s;
}

.bg_bottom {
    position: absolute;
    width: 83px;
    height: 208px;
    bottom: 0;
    left: 0;
}

.bg_top {
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    height: 144px;
}

.bg_theme-0 .bg_bottom,
.bg_theme-0 .bg_top {
    fill: url(#gradient_ID-0);
}

.bg_theme-0 .bg_bottom,
.bg_theme-0 .bg_top {
    fill: url(#gradient_ID-0);
}

.bg_theme-1 .bg_bottom,
.bg_theme-1 .bg_top {
    fill: url(#gradient_ID-1);
}

.bg_theme-1 .bg_bottom,
.bg_theme-1 .bg_top {
    fill: url(#gradient_ID-1);
}

.bg_theme-2 .bg_bottom,
.bg_theme-2 .bg_top {
    fill: url(#gradient_ID-2);
}

.bg_theme-2 .bg_bottom,
.bg_theme-2 .bg_top {
    fill: url(#gradient_ID-2);
}

.bg_theme-3 .bg_bottom,
.bg_theme-3 .bg_top {
    fill: url(#gradient_ID-3);
}

.bg_theme-3 .bg_bottom,
.bg_theme-3 .bg_top {
    fill: url(#gradient_ID-3);
}

.bg_theme-4 .bg_bottom,
.bg_theme-4 .bg_top {
    fill: url(#gradient_ID-4);
}

.bg_theme-4 .bg_bottom,
.bg_theme-4 .bg_top {
    fill: url(#gradient_ID-4);
}

.bg_theme-5 .bg_bottom,
.bg_theme-5 .bg_top {
    fill: url(#gradient_ID-5);
}

.bg_theme-5 .bg_bottom,
.bg_theme-5 .bg_top {
    fill: url(#gradient_ID-5);
}

.bg_theme-0 {
    z-index: -1;
}

.bg_theme-1 {
    z-index: -2;
}

.bg_theme-2 {
    z-index: -3;
}

.bg_theme-3 {
    z-index: -4;
}

.bg_theme-4 {
    z-index: -5;
}

.bg_theme-5 {
    z-index: -6;
}

/*%%%%%%%%%%%%% NAVIGATION SMALL %%%%%%%%%%%%%*/
#nav {
    background-color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    height: 40px;
    align-items: flex-start;
    position: absolute;
    width: 100vw;
    top: -100px;
    z-index: 200;
}

.tabs_list {
    display: flex;
    height: 100%;
    width: 100%;
}

.tab {
    height: 100%;
    color: var(--darkTextColor);
    font-size: 1.125em;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    align-items: center;
    border-bottom: solid 2px;
    opacity: 0.6;
    padding: 0 8px;
    box-sizing: border-box;
    transition: all 0.25s;
    flex-grow: 1;
}

.tab_Active {
    opacity: 1;
    border-bottom: solid 4px;
}

.tab_Prev {
    border-bottom: var(--mainTextColor) solid 4px;
    color: var(--mainTextColor);
    mix-blend-mode: multiply;
    opacity: 1;
}

.tab_Active-1,
.tab_Prev-1 {
    opacity: 1;
    color: var(--sec1-mainColor-AA);
    border-color: var(--sec1-mainColor-illus);
}

.tab_Active-2,
.tab_Prev-2 {
    opacity: 1;
    color: var(--sec2-mainColor-AA);
    border-color: var(--sec2-mainColor-illus);
}

.tab_Active-3,
.tab_Prev-3 {
    opacity: 1;
    color: var(--sec3-mainColor-AA);
    border-color: var(--sec3-mainColor-AA);
}

.tab_Active-4,
.tab_Prev-4 {
    opacity: 1;
    color: var(--sec4-mainColor-AA);
    border-color: var(--sec4-mainColor-AA);
}

.tab_Active-5,
.tab_Prev-5 {
    opacity: 1;
    color: var(--sec5-mainColor-AA);
    border-color: var(--sec5-mainColor-AA);
}

#tab-1.tab_Prev {
    color: var(--sec1-mainColor-AA);
}

#tab-2.tab_Prev {
    color: var(--sec2-mainColor-AA);
}

#tab-3.tab_Prev {
    color: var(--sec3-mainColor-AA);
}

#tab-4.tab_Prev {
    color: var(--sec4-mainColor-AA);
}

#tab-5.tab_Prev {
    color: var(--sec5-mainColor-AA);
}

.tab_Number {
    font-size: 1.25em;
    font-weight: 400;
    line-height: 37px;

}

.tab_Name {
    line-height: 1em;
    margin-left: 8px;
    display: none;
    font-size: 12px;
}

.tab_Active .tab_Name {
    opacity: 1;
    font-size: 0.96em;
}

/*%%%%%%%%%%%%% CONTENT SMALL %%%%%%%%%%%%%%*/
.main_Container {
    width: 100vw;
    height: 100%;
    transition: all 0.4s;
    position: relative;
    top: 0px;
    display: block;
}

.quizzStarted {
    height: calc(100% - 90px);
    height: -apple-fill-available;
    top: 60px;
    box-sizing: border-box;
}

.main_Content {
    height: 100%;
    display: flex;
    position: relative;
    height: -apple-fill-available;
}

.main_Content_infos {
    overflow-y: scroll;
    display: flex;
    justify-content: center;
}

.vue {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    overflow-y: scroll;
    padding: 8px 0px 30px;
    box-sizing: border-box;

}

.block_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100vw - 50px);
    margin-bottom: 30px;
}

/* Intro */
.vue_Section-intro {
    position: relative;
    justify-content: center;
    height: -apple-fill-available;
}

.vue_Question {
    justify-content: space-between;
    position: relative;
    padding: 8px;
}

.logo {
    position: relative;
    width: 236px;
    margin-top: 30px;
}

.logo img {
    width: 100%;
}

/*.baseline {
    position: absolute;
    top: 60px;
    left: 100px;
    color: #515151;
    font-weight: 400;
    font-size: 20px;
    width: 386px;
  }
  .baseline{
    top: 60px;
    left: 100px;
    font-size: 20px;
  }*/
.promesse {
    font-size: 0.875em;
    line-height: 150%;
    width: 90vw;
    max-width: 1120px;
    text-align: center;
    color: var(--darkTextColor);
}

.etapes {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    padding: 30px;
    margin: 55px 0;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.etape {
    display: flex;
    align-items: center;
    width: 100%;
}

.etape-Number {
    width: 40px;
    border: solid 2px var(--whiteColor);
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    border: solid 2px #666;
}

/*===== Themes Intro ======*/
.section_Title {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    align-items: center;
}


.section_Number {
    font-size: 50px;
    margin-right: 8px;
}

.section_Name {
    font-size: 1.125em;
    text-transform: uppercase;
}

.section_Description {
    margin-bottom: 30px;
    margin-top: 16px;
    width: 100%;
}

.intro-line {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width:100%;
}

/*.intro-line .question_Description_Container {
   flex-grow: 2;
}*/

.intro-line .question_Name.question_Name_sec-0 {
    font-size: 1.5em;
    font-weight: 400;
    margin-bottom: 30px;
    text-align: center;
    color: var(--mainTextColor);
}

.question_Name_sec-0 span {
    font-weight: 600;
    color: var(--sec0-mainColor-AA);
  }

/********** QUESTIONS ********/
.question_Card {
    position: relative;
    box-sizing: border-box;
    width: 90%;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    align-items: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 5px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    color: var(--mainTextColor);
    font-size: 14px;
    line-height: 125%;
    text-align: center;
}

.question_Number {
    position: absolute;
    font-size: 1.125em;
    top: 20px;
    font-weight: 600;
}

.question_Name {
    width: 100%;
    font-size: 1em;
    margin-bottom: 16px;
    line-height: 1.15em;
    margin-top: 10px;
}

.question_Name_sec-Intro {
    color: var(--sec0-mainColor-AA);
}

.vue_1 .block_container .section_Title,
.question_Name_sec-1,
.qn-1 {
    color: var(--sec1-mainColor-AA);
}

.vue_2 .block_container .section_Title,
.question_Name_sec-2,
.qn-2 {
    color: var(--sec2-mainColor-AA);
}

.vue_3 .block_container .section_Title,
.question_Name_sec-3,
.qn-3 {
    color: var(--sec3-mainColor-AA);
}

.vue_4 .block_container .section_Title,
.question_Name_sec-4,
.qn-4 {
    color: var(--sec4-mainColor-AA);
}

.vue_5 .block_container .section_Title,
.question_Name_sec-5,
.qn-5 {
    color: var(--sec5-mainColor-AA);
}

.question_Description {
    width: 100%;
    margin: 0;
    line-height: 150%;
    background-color: #EFEFEF;
    border-radius: 3px;
    padding: 10px;
    box-sizing: border-box;
    text-align: left;
    font-size: 0.8125em;
    color: #4F4F4F;
}

.response_type {
    width: 100%;
    margin-bottom: 14px;
}

input[type="text"],
input[type="email"] {
    width: 100%;
    height: 32px;
    margin-bottom: 30px;
    border: solid 1px #DADADA;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 20px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

textarea {
    width: 100%;
    height: 150px;
    border: solid 1px #ddd;
    border-radius: 5px;
    margin-bottom: 16px;
}

/*.question_Type {
    width: 100%;
    font-size:0.875em;
    margin: 10px 0;
}*/

.answers {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-top: 24px;
}

.answer {
    position: relative;
    border: solid 1px #EDEDED;
    border-radius: 3px;
    width: 48%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    background: var(--whiteColor);
    color: #4F4F4F;
    transition: all 0.25s;
    overflow: hidden;
    text-align: center;
    font-size: 0.875em;
    margin-bottom: 8px;

}

.answer input {
    display: none;
}

.answer_BG {
    width: 100%;
    height: 100%;
    transition: all 250ms;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: var(--whiteColor);
    box-sizing: border-box;
    padding: 20px 10px;
    text-align: left;
}

.answer_Sec-0 {
    width: 100%;
    height: 50px;
    text-align: left;
}

.answer_Sec-0:hover {
    box-shadow: 0px 2px 7px rgba(236, 153, 75, 0.15);
}

.answer_Sec-1:hover {
    box-shadow: 0px 2px 7px rgba(240, 99, 146, 0.15);
}

.answer_Sec-2:hover {
    box-shadow: 0px 2px 7px rgba(173, 227, 114, 0.3);
}

.answer_Sec-3:hover {
    box-shadow: 0px 2px 7px rgba(146, 108, 255, 0.15);
}

.answer_Sec-4:hover {
    box-shadow: 0px 2px 7px rgba(45, 156, 219, 0.15);
}

.answer_Sec-5:hover {
    box-shadow: 0px 2px 7px rgba(133, 0, 185, 0.15);
}

.answer_Sec-0 input:checked~.answer_BG {
    background: var(--sec0-mainColor-AA);
    color: var(--whiteColor);
}

.answer_Sec-1 input:checked~.answer_BG {
    background: var(--sec1-mainColor-AA);
    color: var(--whiteColor);
}

.answer_Sec-2 input:checked~.answer_BG {
    background: var(--sec2-mainColor-AA);
    color: var(--whiteColor);
}

.answer_Sec-3 input:checked~.answer_BG {
    background: var(--sec3-mainColor-AA);
    color: var(--whiteColor);
}

.answer_Sec-4 input:checked~.answer_BG {
    background: var(--sec4-mainColor-AA);
    color: var(--whiteColor);
}

.answer_Sec-5 input:checked~.answer_BG {
    background: var(--sec5-mainColor-AA);
    color: var(--whiteColor);
}

/* Answers Icons */
.checkboxIcon,
.radioIcon {
    display: none;
}

/**/
.actions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-around;
}

.Button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 8px;
    border-radius: 3px;
    text-decoration: none;
    margin-top: 16px;
    transition: all 0.25s;
    font-weight: 400;
    cursor: pointer;

}

.actions .Button {
    width: 49%;
    margin: 0;
    box-sizing: border-box;
    text-align: center;
}

.back_Button {
    top: 0;
    color: #4F4F4F;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: none;
    align-self: flex-start;
    margin-top: 0;
}

.next_Active {
    cursor: pointer;
}

.next_Button,
.send_Button {
    color: #dddddd;
    border: solid 1px #dddddd;
}

.next_Button-0.next_Active,
.next_Button-0.send_Button.next_Active, .get_Details_results{
    color: var(--sec0-mainColor-AA);
    background-color: var(--whiteColor);
    border: solid 1px var(--sec0-mainColor-AA);
}

.next_Button-1.next_Active,
.next_Button-1.send_Button.next_Active {
    color: var(--sec1-mainColor-AA);
    background-color: var(--whiteColor );
    border: solid 1px var(--sec1-mainColor-AA);
}

.next_Button-2.next_Active,
.next_Button-2.send_Button.next_Active {
    color: var(--sec2-mainColor-AA);
    background-color: var(--whiteColor );
    border: solid 1px var(--sec2-mainColor-AA);
}

.next_Button-3.next_Active,
.next_Button-3.send_Button.next_Active {
    color: var(--sec3-mainColor-AA);
    background-color: var(--whiteColor );
    border: solid 1px var(--sec3-mainColor-AA);
}

.next_Button-4.next_Active,
.next_Button-4.send_Button.next_Active {
    color: var(--sec4-mainColor-AA);
    background-color: var(--whiteColor );
    border: solid 1px var(--sec4-mainColor-AA);
}

.next_Button-5.next_Active,
.next_Button-5.send_Button.next_Active {
    color: var(--sec5-mainColor-AA);
    background-color: var(--whiteColor );
    border: solid 1px var(--sec5-mainColor-AA);
}

.spacer {
    width: 100%;
    border-bottom: solid 1px #dfdfdf;
    margin: 20px 0;
}

.send_Button {
    width: 100% !important;
}

/*--------------------------- Intro -----------------------*/
/*---------------------------------------------------------*/

/*%%%%%%%%%%%%% HOMEPAGE %%%%%%%%%%%%%%%%*/

.main_Title {
    font-size: 43px;
    text-transform: uppercase;
}

.intro_Description {
    font-size: 22px;
    width: 100%;
    font-weight: 200;
    margin-bottom: 16px;
}

.question_Card-Intro {
    flex-grow: 0;
    height: auto;
    justify-content: center;
    max-width: 568px;
}

.start_Quizz {
    padding: 10px 40px;
    margin-top: 24px;
}

/* Quizz end */
.svg-loader {
    display: flex;
    position: relative;
    align-content: space-around;
    justify-content: center;
}

.loader-svg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    fill: none;
    stroke-linecap: round;
    stroke: rgba(255, 255, 255, 1);
}

.loader-svg.bg {
    stroke-width: 16px;
    stroke: rgba(248, 113, 108, 0.8);
}

.loader-svg.animate {
    stroke-width: 3px;
    stroke-dasharray: 242.6;
    animation: fill-animation 1s cubic-bezier(1, 1, 1, 1) 0s infinite;
}

.loader-svg.animate.blur {
    filter: blur(4px);
}

@keyframes fill-animation {
    0% {
        stroke-dasharray: 40 242.6;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 141.3;
        stroke-dashoffset: 141.3;
    }

    100% {
        stroke-dasharray: 40 242.6;
        stroke-dashoffset: 282.6;
    }
}

/*--------------------------- Results -----------------------*/
/*-----------------------------------------------------------*/
/* Header */
.head_mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    height: 55px;
    background-color: var(--whiteColor);
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    z-index: 500;
}

.results_logo {
    width: 108px;
    margin-top: 8px;
}

.get_Details_results {
    font-size: 10px;
    padding: 6px 12px;
    margin: 0;
}

.head_desktop {
    display: none;
}

.resultsContent {
    position: relative;
    left: 0px;
    display: flex;
    flex-direction: column;
    width: 100vw;
    min-height: 100vh;
    top: 55px;
}

.resultsContent_col-left_notes {
    display: none;
}

.results_section {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 30px);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}

 
.results_section-0 b, 
.results_section-6 b {
    color: var(--sec0-mainColor-AA);
}

.results_section-1 .results_Title,
.results_section-1 .section_note,
.results_section-1 h2, 
.results_section-1 b {
    color: var(--sec1-mainColor-AA);
}

.results_section-2 .results_Title,
.results_section-2 .section_note,
.results_section-2 h2,
.results_section-2 b {
    color: var(--sec2-mainColor-AA);
}

.results_section-3 .results_Title,
.results_section-3 .section_note,
.results_section-3 h2,
.results_section-3 b {
    color: var(--sec3-mainColor-AA);
}

.results_section-4 .results_Title,
.results_section-4 .section_note,
.results_section-4 h2,
.results_section-4 b {
    color: var(--sec4-mainColor-AA);
}

.results_section-5 .results_Title,
.results_section-5 .section_note,
.results_section-5 h2, 
.results_section-1 b {
    color: var(--sec5-mainColor-AA);
}

.global_results_section {
    flex-direction: column;
    min-height: 100vh;
    height: auto;
}

.results_Container {
    height: calc(100% - 30px);
    /*overflow-y: scroll;*/
    display: flex;
    flex-direction: column;
}

.rc_desktop {
    display: none;
}

.rc_mobile {
    height: auto;
    box-sizing: border-box;
}

.content_Pannel {
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    align-items: center;
}

.rc_mobile .content_Pannel {
    padding-bottom: 30px;
}

.resultsContent_col-left_global-score {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.results_Title {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 30px;
    text-align: center;
    font-size: 1.875em;
    justify-content: flex-start;
    font-weight: 300;
    line-height: 120%;
    padding-left:20px;
}
.results_CatName {
    width: auto;
    text-align: left;
    line-height: 2.55rem;
  }
  .results_CatNumber {
    font-size: 3.5em;
    line-height: 0.95em;
  }
.results_Subtitle {
    font-weight: 600;
    width: 100%;
}

.results_synthese {
    font-weight: 400;
    font-size: 0.875em;
    width: 100%;
    color: var(--mainTextColor);
    height: auto;
    display: block;
    padding: 0 20px;
    box-sizing: border-box;
    max-width: 900px;
    margin: 0 auto;
}

/* Data visualization */
.dataviz {
    width: 244px;
    height: 244px;
    position: relative;
}

.note {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    font-size: 32px;
    color: var(--sec0-mainColor-AA);
}
.noteTitle {
    font-size: 0.5em;
  }

.userNote_Diagram {
    width: 244px;
    height: 244px;
    transform: rotate(-90deg);
}

.data_Repere_Container {
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    box-sizing: border-box;
    width: 1px;
}

.data_Repere_Cont-2 {
    transform: rotate(72deg);
}

.data_Repere_Cont-3 {
    transform: rotate(144deg);
}

.data_Repere_Cont-4 {
    transform: rotate(216deg);
}

.data_Repere_Cont-5 {
    transform: rotate(288deg);
}

.data_Repere {
    border: none;
    border-right: 1px dashed #FB8A5D;
    position: relative;
    height: 50px;
    width: 1px;
    top: calc(21.5% - 35px);
}

.circle {
    /*transition:all 800ms;*/
    opacity: 0;
}

#userNote {
    box-shadow: 0px 3.56338px 6.61771px rgba(255, 255, 255, 0.5);
}

#userNote_Glow {
    filter: blur(5px);
}

.resultsContent_col-left_global_reco {
    color: var(--mainTextColor);
    display: flex;
    justify-content: flex-start;
    flex-grow: 0;
    align-items: center;
}

.section_note {
    min-height: 110px;
    background-color: #F9F9F9;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20px;
    margin: 30px 0;
    gap: 20px;
    width: 100%;
}

.section_note_list_item_name {
    width: 260px;
    flex-shrink: 0;
}

.section_note_list_item_note {
    width: auto;
    font-weight: 600;
}

.section_note_list_item_jauge {
    height: 45px;
    width: 100%;
    max-width: 740px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#score_jauge-0 {
    --jaugeColor: var(--sec0-mainColor-illus);
}

#score_jauge-1 {
    --jaugeColor: var(--sec1-mainColor-illus);
}

#score_jauge-2 {
    --jaugeColor: var(--sec2-mainColor-illus);
}

#score_jauge-3 {
    --jaugeColor: var(--sec3-mainColor-illus);
}

#score_jauge-4 {
    --jaugeColor: var(--sec4-mainColor-illus);
}

#score_jauge-5 {
    --jaugeColor: var(--sec5-mainColor-illus);
}

.jauge_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    opacity: 0.1;
    background-color: var(--jaugeColor);
}

.jauge_mid-bg {
    position: absolute;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    border-radius: 50px;
    opacity: 0.2;
    background-color: var(--jaugeColor);
}

.jauge {
    position: absolute;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    border-radius: 50px 0 0 50px;
    background-color: var(--jaugeColor);
    z-index: 2;
    display: flex;
    align-self: flex-start;
    left: 16px;
}

.jauge_1 {
    width: calc(20% - 16px);
}

.jauge_2 {
    width: calc(40% - 16px);
}

.jauge_3 {
    width: calc(60% - 16px);
}

.jauge_4 {
    width: calc(80% - 16px);
}

.jauge_5 {
    width: 100%;
    border-radius: 50px;
}

.separators {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
}

.separator {
    border-right: dashed 2px #fff;
    z-index: 1;
}

.resultsContent_col-right {
    display: flex;
    justify-content: center;
    color: var(--mainTextColor);
    padding-top: 50px;
}

.resultsContent_col-right_global-reco .results_synthese {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0px;
}

.results_synthese li {
    margin-bottom: 30px;
}

.results_synthese_getDetails {
    margin-bottom: 30px;
}

.results_synthese_getDetails::before {
    content: "";
    width: 100%;
    display: block;
    height: 1px;
    background: linear-gradient(to right, rgba(214, 214, 214, 0) 10%, #D4D4D4 50%, rgba(214, 214, 214, 0) 90%);
    margin-bottom: 40px;
}

/* Informations personnelles */
.userInfos_form{
    display: flex;
    justify-content: center;
    margin: 60px 0;
    flex-direction: column;
    align-items: center;
}
.vue_Infos,
.vue_Question-Infos {
    top: 0;
    justify-content: flex-start;
}

.question_Card-Infos {
    margin-top: 30px;

}

.question_Card-Infos .answers {
    padding-top: 0;
}

/* Remerciements */
.vue_End {
    justify-content: center;
}

.thx {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*----------------- Footer & Mentions ---------------*/
/*----------------------------------------*/
footer {
    position: fixed;
    top: calc(100% - 30px);
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    color: var(--whiteColor);
    height: 30px;
    align-items: center;
    font-size: 12px;
    background: var(--darkTextColor);
    z-index: 200;
}

.mentions_btn {
    cursor: pointer;
    border-bottom: solid 1px;
}
.copyright {
    display: flex;
    gap: 5px;
  }

.copyright a {
    text-decoration: none;
    color: var(--whiteColor);
    display:flex;
}

#logoMG{
    width: 80px;
}

.modale_Container {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    display: none;
    opacity: 0;
    justify-content: center;
    align-items: center;
    transition: all 0.25s;
    z-index: 999;
}

.modale_Container._show {
    display: flex;
    opacity: 1;
}

.modale {
    display: flex;
    flex-direction: column;
    width: 95%;
    max-width: 900px;
    background: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    box-sizing: border-box;
    padding: 30px 15px 15px;
    color: var(--mainTextColor);
    position: relative;
    height: 95%;
    font-weight: 200;
    z-index: 900;
}

.close_Modale {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-weight: 300;
    transform: rotate(45deg);
    position: absolute;
    top: 0px;
    right: 0px;
}

.mentions_Title {
    border-bottom: solid 1px var(--sec0-mainColor-AA);
    margin-bottom: 8px;
    height: 40px;
    font-size: 32px;
    font-weight: 200;
    color: var(--sec0-mainColor-AA);
}

.mentions {
    overflow: scroll;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

/*==============================================================================================================================*/
/*===================================================== LARGE DEVICE ===========================================================*/
/*==============================================================================================================================*/
@media only screen and (min-width: 1024px) {
    .mp_body {
        height: 100vh;
    }

    .bg_bottom {
        width: 274px;
        height: 682px;
    }

    .bg_top {
        width: 139px;
        height: 337px;
    }

    /*%%%%%%%%%%%%% NAVIGATION LARGE %%%%%%%%%%%%%*/
    #nav {
        height: 60px;
    }

    .tab_Active {
        flex-grow: 1;
    }

    .tab_Name {
        display: block;
        font-size: 1em;
    }

    /*%%%%%%%%%%%%% CONTENT LARGE %%%%%%%%%%%%%*/
    /*.vue {
        justify-content: center;
    }*/
    .quizzStarted {
        height: calc(100% - 90px);
    }

    .main_Content {
        height: 100%;
    }

    .section_Title {
        width: 900px;
    }

    .section_Number {
        font-size: 9.6875em;
        line-height: 150px;
        font-weight: 300;
    }

    .section_Name {
        font-size: 3.68em;
        line-height: 1.1em;
        font-weight: 300;
    }

    .section_Description {
        width: 900px;
    }

    .start_Theme:hover {
        background: var(--whiteColor) !important;
    }

    .start_Theme_0:hover {
        color: var(--sec0-mainColor-AA) !important;
    }

    .start_Theme_1:hover {
        color: var(--sec1-mainColor-AA) !important;
    }

    .start_Theme_2:hover {
        color: var(--sec2-mainColor-AA) !important;
    }

    .start_Theme_3:hover {
        color: var(--sec3-mainColor-AA) !important;
    }

    .start_Theme_4:hover {
        color: var(--sec4-mainColor-AA) !important;
    }

    .start_Theme_5:hover {
        color: var(--sec5-mainColor-AA) !important;
    }

    .answer {
        margin-bottom: 16px;
    }

    .answer_BG {
        padding: 16px 8px 16px 50px;
    }

    .answer_Sec-1:hover {
        background: var(--whiteColor);
        color: var(--sec1-mainColor-AA);
        border:solid 1px var(--sec1-mainColor-AA);
    }

    .answer_Sec-2:hover {
        background: var(--whiteColor);
        color: var(--sec2-mainColor-AA);
        border:solid 1px var(--sec2-mainColor-AA);
    }

    .answer_Sec-3:hover {
        background: var(--whiteColor);
        color: var(--sec3-mainColor-AA);
        border:solid 1px var(--sec3-mainColor-AA);
    }

    .answer_Sec-4:hover {
        background: var(--whiteColor);
        color: var(--sec4-mainColor-AA);
        border:solid 1px var(--sec4-mainColor-AA);
    }

    .answer_Sec-5:hover {
        background: var(--whiteColor);
        color: var(--sec5-mainColor-AA);
        border:solid 1px var(--sec5-mainColor-AA);
    }

    /* Answers Icons */
    /* checkbox */
    .checkboxIcon,
    .radioIcon {
        display: block;
        position: absolute;
        left: 0;
        margin-left: 10px;
    }

    .ckeckboxIcon_box {
        stroke-dasharray: 66 0;
        stroke-dashoffset: 49;
        stroke: #ddd;
        stroke-width: 1;
        stroke-linecap: round;
        transition: all 0.5s;
    }

    .ckeckboxIcon_check {
        stroke: var(--whiteColor);
        stroke-dasharray: 23 23;
        stroke-dashoffset: 23;
        stroke-width: 2;
        stroke-linecap: round;
        transition: all 0.5s;
    }

    .box_Active {
        stroke-dasharray: 63 12;
        stroke-dashoffset: 49;
        stroke: var(--whiteColor);
    }

    .check_Active {
        stroke-dashoffset: 0;
    }

    /* radio */
    .radioIcon_box {
        stroke-dasharray: 66 0;
        stroke-dashoffset: 49;
        stroke: #ddd;
        stroke-width: 1;
        stroke-linecap: round;
        transition: all 0.5s;
    }

    @keyframes showRadio {
        from {
            r: 0%;
        }

        to {
            r: 30%;
        }
    }

    @keyframes hideRadio {
        from {
            r: 30%;
        }

        to {
            r: 0%;
        }
    }

    .radioIcon_fill {
        fill: var(--whiteColor);
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-name: hideRadio;
    }

    .radioBox_Active {
        stroke: var(--whiteColor);
    }

    .radioFill_Active {
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-name: showRadio;
    }

    /********** QUESTIONS ********/
    .vue_Question {
        height: 100%;
    }

    .question_Card {
        width: 800px;
        padding: 40px 70px;
        font-size: 16px;
        flex-grow: 0;
    }

    .question_Number {
        top: 45px;
    }

    .intro-line {
        flex-direction: row;
    }

    .intro-line .question_Card {
        width: 45%;
        height: 335px;
    }

    .answer {
        width: 49%;
    }

    .actions {
        flex-direction: row;
        width: 100%;
        justify-content: center;
    }

    .Button {
        padding: 16px;
    }

    .get_Details_results {
        font-size: inherit;
        margin-top: 16px;
    }
    
    .back_Button:hover {
        background-color: #efefef;
    }

    .Button:hover.next_Button-0.next_Active, .get_Details_results:hover {
        background: var(--sec0-mainColor-AA);
        color: var(--whiteColor);
    }

    .Button:hover.next_Button-1.next_Active {
        background: var(--sec1-mainColor-AA);
        color: var(--whiteColor);
    }

    .Button:hover.next_Button-2.next_Active {
        background: var(--sec2-mainColor-AA);
        color: var(--whiteColor);
    }

    .Button:hover.next_Button-3.next_Active {
        background: var(--sec3-mainColor-AA);
        color: var(--whiteColor);
    }

    .Button:hover.next_Button-4.next_Active {
        background: var(--sec4-mainColor-AA);
        color: var(--whiteColor);
    }

    .Button:hover.next_Button-5.next_Active {
        background: var(--sec5-mainColor-AA);
        color: var(--whiteColor);
    }

    /* Mentions */
    .modale {
        padding: 30px
    }

    /*--------------------------- Intro -----------------------*/
    /*---------------------------------------------------------*/
    /*%%%%%%%%%%%%% HOME %%%%%%%%%%%%%%%%%%*/
    .logo {
        width: 332px;
    }

    .promesse {
        font-size: 1em;
    }

    .etapes {
        flex-direction: row;
    }

    .etape {
        width: 30%;
    }

    /*%%%%%%%%%%%%% INTRO TITLE %%%%%%%%%%%%%%%%*/

    .main_Title {
        font-size: 56px;
    }

    .intro_Description {
        text-align: center;
    }

    /* Mentions */
    .modale {
        height: auto;
    }

    /*------------------------- RESULTS -----------------------*/
    /*---------------------------------------------------------*/
    .results_Container {
        height: calc(100% - 30px);
        overflow: hidden;
        flex-direction: row;
    }

    .head_mobile {
        display: none;
    }

    .head_desktop {
        display: flex;
        flex-direction: row;
        background: var(--whiteColor);
        width: 250px;
        height: calc(100vh - 30px);
        position: fixed;
    }

    .head_desktop::after {
        width: 1px;
        height: 100vh;
        background: linear-gradient(to bottom, rgba(214, 214, 214, 0) 10%, #D4D4D4 50%, rgba(214, 214, 214, 0) 90%);
        content: "";
    }

    .results_head_bg {
        width: 30px;
        height: 100%;
        z-index: -1;
        transition: all 0.25s;
    }

    .results_head_bg-0,
    #results_theme-0:hover:after,
    #results_theme-0.results_theme_active:after,
    .results_head_bg-6,
    #results_theme-6:hover:after,
    #results_theme-6.results_theme_active:after {
        background-color: var(--sec0-mainColor-illus);
    }

    .results_head_bg-1,
    #results_theme-1:hover:after,
    #results_theme-1.results_theme_active:after {
        background-color: var(--sec1-mainColor-illus);
    }

    .results_head_bg-2,
    #results_theme-2:hover:after,
    #results_theme-2.results_theme_active:after {
        background-color: var(--sec2-mainColor-illus);
    }

    .results_head_bg-3,
    #results_theme-3:hover:after,
    #results_theme-3.results_theme_active:after {
        background-color: var(--sec3-mainColor-illus);
    }

    .results_head_bg-4,
    #results_theme-4:hover:after,
    #results_theme-4.results_theme_active:after {
        background-color: var(--sec4-mainColor-illus);
    }

    .results_head_bg-5,
    #results_theme-5:hover:after,
    #results_theme-5.results_theme_active:after {
        background-color: var(--sec5-mainColor-illus);
    }

    .head_desktop_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-grow: 2;
        padding-top: 35px;
    }

    .results_logo {
        width: 164px;
    }

    .results_themes_list {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .results_theme {
        padding: 0 20px;
        position: relative;
        height: 50px;
        display: flex;
        align-items: center;
        color: var(--mainTextColor);
        transition: all 0.25s;
        cursor: pointer;
    }

    .results_theme::after {
        content: "";
        background: var(--whiteColor);
        width: 35px;
        height: 35px;
        display: block;
        border-radius: 50%;
        border: solid var(--whiteColor) 15px;
        box-sizing: border-box;
        position: absolute;
        left: 0px;
        top: 7px;
        transition: all 0.25s;
        z-index: -1;
    }

    #results_theme-0:hover,
    #results_theme-0.results_theme_active,
    #results_theme-6:hover,
    #results_theme-6.results_theme_active
     {
        color: var(--sec0-mainColor-AA);
    }

    #results_theme-1:hover,
    #results_theme-1.results_theme_active {
        color: var(--sec1-mainColor-AA);
    }

    #results_theme-2:hover,
    #results_theme-2.results_theme_active {
        color: var(--sec2-mainColor-AA);
    }

    #results_theme-3:hover,
    #results_theme-3.results_theme_active {
        color: var(--sec3-mainColor-AA);
    }

    #results_theme-4:hover,
    #results_theme-4.results_theme_active {
        color: var(--sec4-mainColor-AA);
    }

    #results_theme-5:hover,
    #results_theme-5.results_theme_active {
        color: var(--sec5-mainColor-AA);

    }

    .results_theme_active {
        font-weight: 600;
    }

    .results_theme:hover:after,
    .results_theme_active:after {
        border-width: 8px;
        left: -18px;
    }

    .resultsContent {
        left: 250px;
        top: 0;
        width: calc(100vw - 250px);
        padding-bottom: 30px;
    }
    
    .results_synthese b {
        font-weight: 600;
    }

    .synthese0 b {
        color: var(--sec0-mainColor-AA);

    }

    .global_results_section {
        flex-direction: row;
        padding: 0px;
    }

    .resultsContent_col-left,
    .resultsContent_col-right {
        width: 50%;
    }

    .resultsContent_col-left_global-score {
        display: flex;
        margin-bottom: 50px;
    }

    .resultsContent_col-left_global-results_wrap {
        filter: drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.1));
    }

    .resultsContent_col-left_global-results {
        display: flex;
        flex-direction: column;
        clip-path: polygon(0% 0%, 0% 90%, 50% 100%, 100% 90%, 100% 0%);
        background: var(--whiteColor);
        padding: 0 40px 30px;
        box-sizing: border-box;
    }

    .results_Title {
        width: 100%;
        font-size: 3.125em;
        font-weight: 300;
        text-align: center;
        line-height: 1em;
        padding-top: 10px;
        padding-left:0;
        margin-bottom: 20px;
        justify-content: center;
    }
    .results_CatNumber {
        font-size: 9rem;
        line-height: 7.3rem;
      }
    .note {
        font-size: 1.75em;
        font-weight: 600;
        color: var(--sec0-mainColor-AA);
    }

    .noteTitle {
        font-size: 0.66em;
        font-weight: 300;
    }

    .dataviz {
        width: 244px;
        height: 244px;
        flex-shrink: 0;
    }

    .userNote_Diagram {
        width: 100%;
        height: 100%;
    }

    .resultsContent_col-left_notes {
        display: block;
    }

    .section_note_list {
        margin-top: 55px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 20px;
        color: var(--mainTextColor);
    }

    .section_note_list_item {
        display: flex;
        align-items: center;
        height: 45px;
        gap: 20px;
    }

    .resultsContent_col-right {
        padding: 80px 60px 0;
        box-sizing: border-box;
        position: relative;
        align-items: center;
    }

    .resultsContent_col-right::before {
        width: 1px;
        height: calc(100vh - 30px);
        background: linear-gradient(to bottom, rgba(214, 214, 214, 0) 10%, #D4D4D4 50%, rgba(214, 214, 214, 0) 90%);
        content: "";
        position: absolute;
        left: 0;
    }

    .section_note {
        flex-direction: row;
        width: 100%;
    }
    .section_resultsContent h2 {
        text-align: center;
    }
    /*------------------------- INFOS USER -----------------------*/
    /*------------------------------------------------------------*/
    .vue_Question-Infos {
        justify-content: flex-start;
        padding-top: 30px;
    }
}