/* Responsive Styles */

@media (max-width: 868px) {
    .main-content {
        flex-direction: column;
    }

    .bien-card {
        width: 100%;
        margin: 10px 0;
    }

    .overscroll-container img {
        height: 150px; /* Ajuster la hauteur des images pour les petits écrans */
    }
}


@media (max-width: 1200px) {
    .sidebar {
        display: none; /* Ne pas afficher la sidebar sur petits écrans */
    }
}

@media (max-width: 1000px) {
    .menu-toggle {
        display: flex;
    }

    .nav-links {
        display: none; /* Caché par défaut sur les petits écrans */
        box-sizing: border-box;
        flex-direction: column;
        transition: transform 0.3s ease-out; /* Transition douce */
        transform: translateY(-100%); /* Cache le menu en dehors de l'écran */
        width: 100%;
        position: absolute;
        top: 103px;
        left: 0;
        background-color: rgb(255, 255, 255);
        padding: 0 20px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .nav-links a {
        margin: 0;
        padding: 0;
        line-height: 42px;
        border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    }

    .nav-links.active {
        display: flex;
        transform: translateY(0); /* Affiche le menu avec une transition */
    }
}

/* Forcer l'affichage des flèches sur mobile */
@media only screen and (max-width: 768px) {
    .lb-nav a.lb-prev, 
    .lb-nav a.lb-next {
        opacity: 1 !important;
        display: block !important;
        width: 50px; /* Largeur des flèches */
        height: 50px; /* Hauteur des flèches */
        background-color: rgba(0, 0, 0, 0.5); /* Optionnel : ajouter un fond noir semi-transparent */
        border-radius: 50%; /* Optionnel : rendre les flèches rondes */
    }
    
    .lb-nav a.lb-prev {
        left: 10px; /* Ajustez la position à gauche */
    }
    
    .lb-nav a.lb-next {
        right: 10px; /* Ajustez la position à droite */
    }
}