html {
    height: 100%;
}
body {
    height: 100%;
    font-family: var(--main_font_police);
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    background-color: var(--body_bg_color);
}

img{
    max-width: 100%;
}
#wrapper {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

#main_header{
    img {
        max-width: 220px;
    }
}

#language_switch{
    a{
        margin:0 5px;
        text-decoration:none;
        &:hover,
        &:hover{
            color:var(--secondary_color);
        }
    }
}

#banniere{
    background-image:url("../images/ban_relyens-5c926c352b021d94075f82fd1942f539.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    min-height:300px;
    color: #696867;
    border-top:2px solid #eee;
    border-bottom:2px solid #eee;

    #introduction{
        font-size:1.4rem;
        /*text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);*/
        padding-top:3rem;
        padding-bottom:3rem;
        h1{
            font-size:1.5rem;
            font-weight:bold;
        }
    }
}

h2{
    font-weight:800;
    text-align:center;
    color: var(--secondary_color);
}

#questionnaire_form {
    legend {
        text-align: center;
        font-weight:700;
        font-size:1.3rem;
        margin-bottom:1rem;
        color: #696867;
    }

    .questionnaire_fieldset{
        background: var(--primary_color_gradient);
        border:1px solid #ccc;
        margin-bottom: 3rem;
        box-shadow:0 0 15px rgba(0,0,0,.15);
        padding:2rem;
        border-radius:2rem;

        & > div {
            text-align: center;
        }

        .help-text{
            font-size:1rem;
            margin-top:1rem;
        }
    }
    .form-check{
        display: inline-block;

        input[type=radio]{
            display:none;
        }
        input+label{
            display:block;
            padding:0.8rem 3rem;
            background-color: #696867;
            border-radius:1rem;
            color:#fff;
            cursor: pointer;
            font-weight:700;
            &:hover{
                background-color: #333;
            }
        }
        .choice_yes:checked+label{
            background-color: var(--oui_color);
        }
        .choice_no:checked+label{
            background-color: var(--non_color);
        }
        .choice_na:checked+label{
            background-color: var(--na_color);
        }
        .choice_yes+label,
        .choice_no+label{
            &::before{
                margin-left:-1rem;
                margin-right:0.5rem;
                font: var(--fa-font-solid);
                content: '\f058';
            }
        }
        .choice_no+label{
            &::before{
                content: '\f057';
            }
        }
    }

    /*#questionnaire_fieldset_q5,
    #questionnaire_fieldset_q6,
    #questionnaire_fieldset_q8,
    #questionnaire_fieldset_q10,
    #questionnaire_fieldset_q11{
        background: var(--secondary_color_gradient);
        display: none;
    }*/
    #questionnaire_form_submit{
        background-image:radial-gradient(circle at bottom left, #038286, #89c272);
        background-color:#038286 !important;
        color:#fff;
        padding:1rem;
        border-radius:2rem;
        font-size:1.2rem;
        width:100%;
        font-weight:600;
        border:none;
        &:hover,
        &:focus{
            background-image:radial-gradient(circle at bottom left, #89c272, #038286);
        }
        &::after{
            font: var(--fa-font-solid);
            margin-left:0.5rem;
            content: '\e20a';
        }
    }

    .invalid-feedback{
        background-color:var(--bs-danger);
        color:#fff;
        margin-top:1rem;
        padding:0.5rem;
        border-radius:0.5rem;
    }
}

#questionnaire_second_step_form_container{
    background: var(--primary_color_gradient);
    color:var(--main_color);
    border-radius:2rem;
    border:1px solid #ddd;
    box-shadow:0 0 15px rgba(0,0,0,.15);

    label{
        font-weight:600;
    }
    input,select,textarea{
        border:1px solid #ddd;
    }

    .invalid-feedback{
        background-color:var(--bs-danger);
        color:#fff;
        margin-top:1rem;
        padding:0.5rem;
        border-radius:0.5rem;
    }
    #questionnaire_second_step_form_submit{
        background-image:radial-gradient(circle at bottom left, #038286, #89c272);
        background-color:#038286 !important;
        color:#fff;
        padding:1rem;
        border-radius:2rem;
        font-size:1.2rem;
        width:100%;
        font-weight:600;
        border:none;
        &:hover,
        &:active,
        &:focus{
            background-image:radial-gradient(circle at bottom left, #89c272, #038286);
        }
        &::after{
            font: var(--fa-font-solid);
            margin-left:0.5rem;
            content: '\e20a';
        }
    }
}

.recommandation_container{
    border:1px solid #eee;
    box-shadow:0 0 15px rgba(0,0,0,.15);
    padding:2rem 1rem;
    border-radius:1rem;
    text-align:justify;
    strong{
    }
    h3{
        font-size:1.5rem;
        font-weight:800;
        color:var(--main_color);
    }
}

.score_inner_container{
    background:var(--primary_color_gradient);
    color: var(--secondary_color);
    font-size:2rem;
    aspect-ratio: 1;
    max-width:275px;
    padding:2rem;
    border-radius:2rem;
    box-shadow:0 0 15px rgba(0,0,0,.15);
    font-weight:900;
    strong{
        font-size:1.4rem;
        display:block;
        color:var(--main_color);
        font-weight:800;
    }
    &.bad{
        color:#fff;
        background:var(--bad_color);
        strong{
            color:#fff;
        }
    }
    &.mid{
        color:#fff;
        background:var(--na_color);
        strong{
            color:#fff;
        }
    }
    &.good{
        color:#fff;
        background:var(--good_color);
        strong{
            color:#fff;
        }
    }
}

.cta_container{
    padding:3rem 0;
    a{
        background-image:radial-gradient(circle at bottom left, #038286, #89c272);
        background-color:#038286 !important;
        color:#fff;
        padding:1rem;
        border-radius:2rem;
        font-size:1.2rem;
        width:100%;
        max-width:600px;
        font-weight:600;
        border:none;
        &:hover,
        &:active,
        &:focus{
            background-image:radial-gradient(circle at bottom left, #89c272, #038286);
        }
        &::after{
            font: var(--fa-font-solid);
            margin-left:0.5rem;
            content: '\e20a';
        }
        /*animation-name: color;
        animation-duration: 1.2s;
        animation-iteration-count: infinite;
        animation-direction: alternate-reverse;
        animation-timing-function: ease;*/

        &.btn-cta-secondary{
            animation-name:none;
        }
    }
}

.grecaptcha-badge{
    display:none !important;
}

@keyframes color {
    to {
        background: var(--secondary_color);
    }
}

footer{
    img{
        width:100%;
        max-width:200px;
    }
    font-size:0.75rem;
}

a{
    color:var(--main_color);
}
.btn-primary{
    background-color: var(--button-color);
    border:none;
    &:hover,
    &:active,
    &:focus{
        background-color:  var(--button-color-active);
    }
}

@media only screen and (max-width: 600px) {
    #questionnaire_form {
        legend{
            margin:0;
        }

        .questionnaire_fieldset{
            padding:1rem;
        }
        .form-check{
            margin:0 1%;
            width:100%;
            padding:0.4rem 0;
        }
    }
    .score_inner_container{
        width:100%;
    }
}