.decision-tree{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--container-space);
    position: relative;
    height: 110vh;
    & .decision-tree-catchphrase{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        max-width: 850px;
        width: 100%;
    }
    & .decision-tree-description{
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #FFFFFF;
        position: relative;
        width: 100%;
        & .decision-tree-description-desktop{
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        & .decision-tree-description-mobile{
            display: none;
        }
    }

    & .decision-tree-container{
        display: flex;
        width: 100%;
        height: 100vh;
        & .decision-tree-wrapper{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 50%;
            position: relative;
            &:nth-child(1){
                background-color: #E0C5B4;
                & .decision-tree-illustration{
                    display: flex;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    opacity: 0;
                    transition: all 0.6s ease-in-out;
                    & img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }
                    & video{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                    &.active{
                        opacity: 1;
                    }
                    &.dynamique {
                        width: 50%;
                        height: 50%;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        & img{
                            object-fit: contain;
                            animation: float 3s ease-in-out infinite;
                        }
                    }
                }
            }
            &:nth-child(2){
                & .decision-tree-question{
                    display: flex;
                    flex-direction: column;
                    width: fit-content;
                    min-width: 425px;
                    width: 90%;
                    background-color: var(--wp--preset--color--blanc);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, 100%);
                    z-index: 1;
                    opacity: 0;
                    transition: all 0.6s ease-in-out;
                    &.active{
                        opacity: 1;
                        transform: translate(-50%, -50%);
                    }
                    & h2{
                        color: #515151;
                        font-family: Poppins;
                        font-size: 30px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 35px;
                        letter-spacing: 0.1px;
                        margin-bottom: 2rem;
                    }
                    & .endpoint-message{
                        color: var(--wp--preset--color--noir);
                    }
                    & ul{
                        display: flex;
                        flex-direction: column;
                        gap: 1rem;
                        margin: 0;
                        list-style: none;
                        padding: 0;
                        & li{
                            & button{
                                border: 0;
                                align-items: center;
                                border-radius: 0;
                                background: transparent;
                                color: #515151;
                                font-weight: 500;
                                line-height: 1;
                                padding: 1rem;
                                display: flex;
                                justify-content: space-between;
                                border-radius: 6.563px;
                                border: 1px solid #E0C5B4;
                                width: fit-content;
                                font-size: 16px;
                                font-weight: 500;
                                gap: 1rem;
                                min-width: 300px;
                                &.active{
                                    &:before{
                                        background-color: var(--wp--preset--color--noir);
                                    }
                                }
                                &::after{
                                    content: '';
                                    background: url(../../../assets/img/icon/diagnostic-arrow.svg) no-repeat center center;
                                    background-size: contain;
                                    width: 24px;
                                    height: 24px;
                                }
                            }
                            /* Style spécifique pour le li contenant un bouton avec data-next="q1" */
                            &:has(button[data-next="q1"]){
                                display: flex;
                                width: 100%;
                                justify-content: center;
                            }
                        }
                    }
                    & button{
                        cursor: pointer;
                    }
                    & .decision-back-btn{
                        display: flex;
                        background: transparent;
                        color: #515151;
                        border: 0;
                        font-weight: 500;
                        line-height: 1;
                        padding: 1rem;
                        padding-left: 0;
                        gap: 0.5rem;
                        align-items: center;
                        margin-bottom: 1rem;
                        display: flex;
                        width: 100%;
                        font-size: 16px;
                        font-weight: 500;
                        &::before{
                            content: '';
                            background: url(../../../assets/img/icon/diagnostic-arrow-back.svg) no-repeat center center;
                            background-size: contain;
                            width: 24px;
                            height: 24px;
                        }
                    }
                    & .decision-restart-btn{
                        display: flex;
                        padding: 15px 20px;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50px;
                        background: #E0C5B4;
                        color: #FFFFFF;
                        font-size: 17px;
                        font-weight: 500;
                        line-height: 24px;
                        font-family: Poppins;
                        width: fit-content;
                    }
                    &.question-endpoint{
                        & .q-content{
                            margin-top: 4rem;
                        }
                    }
                    & .imc-calculator{
                        display: flex;
                        flex-direction: column;
                        padding: 2rem 0;
                        & .imc-fields{
                            display: flex;
                            flex-direction: column;
                            & input{
                                border: 1px solid #E0C5B4;
                                &::placeholder{
                                    color: var(--wp--preset--color--noir);
                                    opacity: 0.3;
                                }
                            }
                        }
                        & .imc-result-wrapper{
                            display: flex;
                            gap: 1rem;
                            & .imc-result{
                                color: #E0C5B4;
                                font-weight: 700;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media(max-width:1024px){
    .decision-tree{
        & .decision-tree-container{
            flex-direction: column;
            height: auto;
            min-height: 100vh;
            & .decision-tree-wrapper{
                width: 100%;
                &:nth-child(1){
                    height: 40%;
                }
                &:nth-child(2){
                    min-height: 60%;
                    overflow-x: hidden;
                }
            }
        }
    }
}
@media(max-width:576px){
    .decision-tree{
        height: 100vh;
        & .decision-tree-starter-screen{
            & .decision-tree-catchphrase{
                padding: 1rem;
                & p span, h1 span{
                    font-size: 17px!important;
                }
            }
            & .decision-tree-description{
                padding: 0 1rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 55%;
                background: #FFFFFF;
                position: relative;
                width: 100%;
                & p span{
                    font-size: 14px!important;
                }
                & .decision-tree-content{
                    & .decision-tree-description-desktop{
                        display: none;
                    }
                    & .decision-tree-description-mobile{
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                    }
                }
                
            }
        }
        & .decision-tree-container{
            & .decision-tree-wrapper{
                &:nth-child(1){
                    display: none;
                }
                &:nth-child(2){
                    padding: 1rem 0;
                    min-height: 100%;
                    & .decision-tree-question{
                        min-width: 100%;
                        padding: 0 1rem;
                        & h2{
                            font-size: 24px;
                            line-height: 28px;
                        }
                    }
                }
            }
        }
    }
}

@keyframes float {
    0% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(-20px);
    }
}