.hero{
    height: 35.5vw;
    margin-top: 5vh;
    width: 99vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    p{
        font-size: 0.9vw!important;
        margin: 0!important;
    }
    h1{
        margin: 0;
        font-size: 3vw;
    }
}

.container {
    width: 90vw;
    height: inherit;
    border-radius: 20px;
    padding: 2vw;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    transform: translateX(120%); /* Initialement à droite */
    display: flex;
    opacity: 0; /* Initialement invisible */
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
}

.container.visible {
    transform: translateX(0);
    opacity: 1; /* Visible */
}

.container.hiding {
    transform: translateX(-120%);
    opacity: 0; /* Invisible */
}



.reseaux{
    width: 100%;
    display: flex;
    gap: 1vw;
    margin-top: 1vh;
    img{
        width: 2.5vw;
        height: 2.5vw;
    }
}

#piscine{
    background-image: url(medias/piscine.png);
}

#fenetre{
    background-image: url(medias/fenetre.png);
}

#terasse{
    background-image: url(medias/terasse.png);
}

#parquet{
    background-image: url(medias/parquet.png);
}

#facade{
    background-image: url(medias/facade.png);
}

#cuisine{
    background-image: url(medias/cuisine.png);
}

.infos{
    height: 32vw;
    width: 50%;
    background-color: white;
    border: solid 1.5vw white;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.transparent{
    position: relative;
    height: 32vw;
    width: 50%;
    border: solid 1.5vw white;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 40%);
}

.detail_image{
    display: flex;
    flex-direction: column;
    gap: 2vh;
    width: 11vw;
    padding: 1vw;
    background-color: white;
    border-radius: 20px;
    position: absolute;
    top: 7vh;
    right: 3vw;
    align-items: flex-end;
    p{
        margin: 0vw;
        width: 100%;
        font-weight: bold;
    }
    img{
        width: 1vw;
    }
}

.fleche{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 2vw;
    height: 2vw;
    background-color: #2B2B2B;
}

.hero nav{
    position: absolute;
    bottom: -13%;
    width: 100%;
}

.hero ul{
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding: 0;
}

.hero li{
    all: unset;
}

.hero li img{
    width: 4.5vw;
    border-radius: 50%;
    border: solid 2px white;
    cursor: pointer;
}


.btn{
    display: flex;
    flex-direction: column;
    gap: 2vh;
    font-size: 1vw;
    margin: 0!important;
    padding: 0;
    align-items: flex-start;
    font-family: 'kallisto';
    
}

.btn1, .btn2{
    height: 2.5vw!important;
    transition: ease-in-out 0.2s;
    background-color: #FE9A02;
    border-radius: 15px;
}

.btn1{
    background-color: #2B2B2B!important;
    color: white;
    border: solid 2px #2B2B2B;
    width: 45%!important;
    &:hover{
        background-color: white!important;
        color: #2B2B2B!important;
    }
}

.btn2{
    width: 65%!important;
    color: #2B2B2B;
    border: solid 2px #FE9A02;
    color: white;
    &:hover{
        background-color: white!important;
        color: #2B2B2B!important;
    }
}


@media screen and (max-width: 650px) {
    .hero{
        height: 85vh;
        margin-top: 5vh;
        width: 99vw;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        p{
            font-size: 3.5vw!important;
            margin: 0!important;
        }
        h1{
            margin: 0;
            font-size: 6vw;
        }
    }
    
    .container {
        width: 95vw;
        height: inherit;
        border-radius: 20px;
        padding: 8vw;
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        transform: translateX(120%); /* Initialement à droite */
        display: flex;
        opacity: 0; /* Initialement invisible */
        transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
    }
    
    .container.visible {
        transform: translateX(0);
        opacity: 1; /* Visible */
    }
    
    .container.hiding {
        transform: translateX(-120%);
        opacity: 0; /* Invisible */
    }
    
    
    
    .reseaux{
        width: 100%;
        display: flex;
        justify-content: space-between;
        img{
            width: 10vw;
            height: 10vw;
        }
    }
    
    #piscine{
        background-image: url(medias/piscine.png);
        background-size: auto 100%; /* hauteur à 100%, largeur auto */
        background-position: center center; /* centre horizontalement */
        background-repeat: no-repeat;
        overflow: hidden;
    }
    
    #fenetre{
        display: none;

    }
    
    #terasse{
        display: none;
    }
    
    #parquet{
        display: none;
    }
    
    #facade{
        display: none;
    }
    
    #cuisine{
        display: none;
    }
    
    .infos{
        height: 100%;
        width: 100%;
        padding: 5vw;
        background-color: white;
        border: solid 1.5vw white;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .transparent{
        display: none;
        position: relative;
        height: 32vw;
        width: 50%;
        border: solid 1.5vw white;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 40%);
    }
    
    .detail_image{
        display: flex;
        flex-direction: column;
        gap: 2vh;
        width: 11vw;
        padding: 1vw;
        background-color: white;
        border-radius: 20px;
        position: absolute;
        top: 7vh;
        right: 3vw;
        align-items: flex-end;
        p{
            margin: 0vw;
            width: 100%;
            font-weight: bold;
        }
        img{
            width: 1vw;
        }
    }
    
    .fleche{
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        width: 2vw;
        height: 2vw;
        background-color: #2B2B2B;
    }
    
    .hero nav{
        display: none;
        bottom: -13%;
        width: 100%;
    }
    
    .hero ul{
        display: none;
        width: 100%;
        justify-content: space-around;
        padding: 0;
    }
    
    .hero li{
        display: none;
    }
    
    .hero li img{
        display: none;
        width: 4.5vw;
        border-radius: 50%;
        border: solid 2px white;
        cursor: pointer;
    }
    
    
    .btn{
        display: flex;
        flex-direction: column;
        gap: 2vh;
        font-size: 1vw;
        margin: 0!important;
        padding: 0;
        align-items: flex-start;
        font-family: 'kallisto';
        
    }
    
    .btn1, .btn2{
        height: 4vh!important;
        transition: ease-in-out 0.2s;
        background-color: #FE9A02;
        border-radius: 15px;
        font-size: 3vw;
    }
    
    .btn1{
        background-color: #2B2B2B!important;
        color: white;
        border: solid 2px #2B2B2B;
        width: 100%!important;
        &:hover{
            background-color: white!important;
            color: #2B2B2B!important;
        }
    }
    
    .btn2{
        width: 100%!important;
        color: #2B2B2B;
        border: solid 2px #FE9A02;
        color: white;
        &:hover{
            background-color: white!important;
            color: #2B2B2B!important;
        }
    }
}