html {
    font-size: 14px;
    background: #d9d8de;
}

@media (min-width: 568px) {
    html {
        font-size: 16px;
    }

    #navbarimmo li {
        display: inline-block;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    background: #d9d8de;
}


#header {
    position: relative;
    background: #d9d8de;
    padding: 3em 0 0 0;
    text-align: center;
}

    #header h1 {
        color: #252122;
        font-weight: 900;
        font-size: 2.5em;
        letter-spacing: -0.035em;
        line-height: 1;
    }

#header_logo {
    width: 20em;
    border-radius: 10px;
}
/* navbarimmo */
#navbarimmo {
    margin: 2.5em 0 0 0;
    background: #110a3d;
    padding: 1em 1.5em; /* Padding de base */
    border: 0;
}

    #navbarimmo button {
        border-width: thin;
        border-color: #e4dacb;
    }

    #navbarimmo ul {
        display: flex;
        justify-content: center; /* Centrer les éléments */
        flex-wrap: wrap; /* Permettre le retour à la ligne si nécessaire */
        width: 100%;
        padding-left: 0; /* Supprimer le padding par défaut des ul */
    }

    #navbarimmo li {
        margin: 0.5em;
        list-style: none; /* Supprimer les puces */
    }

    #navbarimmo a {
        border-radius: 5px;
        color: #e4dacb;
        text-decoration: none;
        padding: 0.8em 1.2em; /* Ajuster le padding en fonction de la taille de la police */
        font-size: 1.2rem; /* Taille de police de base pour les grands écrans */
        font-weight: bold; /* Texte en gras */
        transition: background-color .25s ease-in-out, color .25s ease-in-out, transform .25s ease-in-out;
        outline: 0;
    }

        #navbarimmo a:hover {
            background-color: rgba(255, 255, 255, 0.1); /* Couleur de fond au survol (plus transparente) */
            color: #e4dacb; /* Couleur du texte au survol */
        }

/* Media queries pour ajuster les tailles de police en fonction de la taille de l'écran */
@media (max-width: 1213px) { /* Taille large d'ordinateur de bureau */
    #navbarimmo a {
        font-size: 1rem; /* Réduire la taille de la police pour les grands écrans */
        padding: 0.7em 1em; /* Ajuster le padding pour les grands écrans */
    }
}

@media (max-width: 1039px) { /* Taille de tablette */
    #navbarimmo a {
        font-size: 0.8rem; /* Taille de la police adaptée aux tablettes */
        padding: 0.6em 0.8em; /* Ajuster le padding pour les tablettes */
    }
}

@media (max-width: 768px) { /* Taille de téléphone */
    #navbarimmo a {
        font-size: 0.8rem; /* Taille de la police adaptée aux téléphones */
        padding: 0.5em 0.6em; /* Ajuster le padding pour les téléphones */
    }
}
@media (max-width: 375px) {
    #header #header_logo,
    #footer #header_logo {
        width: 80%; /* Redimensionne l'image à 80% de la largeur disponible */
        max-width: 200px; /* Limite la largeur maximale de l'image */
        height: auto; /* Assure que la hauteur s'ajuste automatiquement */
    }
      #footer img {
            width: 80%; /* Redimensionne l'image à 80% de la largeur disponible */
            max-width: 200px; /* Limite la largeur maximale de l'image */
            height: auto; /* Assure que la hauteur s'ajuste automatiquement */
        }

    
}
@media (max-width: 768px) {
    #footer #header_logo {
        margin-bottom: 20px; /* Ajoutez le margin-bottom désiré ici */
    }
}
    #footer {
        margin-top: 4em;
        padding: 30px;
        padding-top: 4em;
        padding-bottom: 4em;
        background: #a5a2b4;
        text-align: center;
    }

        #footer img {
            height: 10em;
            border-radius: 10px;
        }

        #footer div {
            align-content: center;
        }

    .row {
        --bs-gutter-x: 0 !important;
    }


    /*filtre */

    .filtre {
        -webkit-box-shadow: 0px 21px 41px -13px rgba(0, 0, 0, 0.18);
        -moz-box-shadow: 0px 21px 41px -13px rgba(0, 0, 0, 0.18);
        box-shadow: 0px 21px 41px -13px rgba(0, 0, 0, 0.18);
        margin: 2em;
        border-radius: 10px;
        background-color: #a5a2b4;
    }

    .col-filtre {
        padding: 1em;
    }

.filtre h1 {
    font-size: 1.5em;
    text-align: center;
    margin-top: 10px;
}


    .col-submit {
        display: flex !important;
        flex-direction: row-reverse;
    }

    .filtre select {
        border-radius: 5px;
        border: 1px solid #ccc; /* Ajoute une bordure personnalisée */
        padding: 10px; /* Ajuste le padding intérieur */
        font-size: 16px; /* Ajuste la taille de la police */
        box-sizing: border-box; /* Assure que le padding est inclus dans la largeur totale */
        -webkit-appearance: none; /* Supprime l'apparence par défaut sur iOS */
        -moz-appearance: none; /* Supprime l'apparence par défaut sur Firefox */
        appearance: none; /* Supprime l'apparence par défaut */
        width: 100%; /* Ajuste la largeur à 100% du conteneur parent */
        max-width: 100%; /* Empêche le débordement */
        height: auto; /* Assure que la hauteur s'ajuste au contenu */
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><polygon points="0,0 10,0 5,5" fill="%23666"/></svg>') no-repeat right 10px center;
        background-size: 10px;
        padding-right: 30px; /* Espace pour l'icône personnalisée */
    }

    @media (max-width: 768px) {
        .filtre select {
            font-size: 14px; /* Réduit la taille de la police sur les petits écrans */
            padding: 8px; /* Réduit le padding intérieur sur les petits écrans */
        }
    }

    /* Réinitialisation des styles spécifiques pour iOS */
    @supports (-webkit-touch-callout: none) {
        .filtre select {
            height: auto !important; /* Force la hauteur à s'ajuster au contenu */
            width: 100% !important; /* Assure que la largeur est à 100% */
        }
    }
    /* Styles pour les labels */
    .filtre label {
        display: inline-flex;
        align-items: center;
        margin-right: 1em;
    }

    /* Styles pour les checkboxes */
    .filtre input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        margin-right: 5px;
        border: 1px solid #ccc;
        border-radius: 3px;
        position: relative; /* Position relative pour le pseudo-élément */
    }

        /* Pseudo-élément pour la coche blanche */
        .filtre input[type="checkbox"]::before {
            content: ""; /* Contenu vide */
            display: block; /* Affiche en tant que bloc */
            width: 12px; /* Largeur de la coche */
            height: 12px; /* Hauteur de la coche */
            background-color: #fff; /* Couleur de fond blanche */
            position: absolute; /* Position absolue */
            top: 50%; /* Déplace la coche au centre verticalement */
            left: 50%; /* Déplace la coche au centre horizontalement */
            transform: translate(-50%, -50%); /* Centre la coche */
            border: 1px solid #ccc; /* Bordure */
            border-radius: 2px; /* Rayon de bordure */
            opacity: 0; /* Par défaut, la coche est invisible */
        }

        /* Styling when checkbox is checked */
        .filtre input[type="checkbox"]:checked::before {
            opacity: 1; /* Montre la coche lorsque la checkbox est cochée */
        }
.submitbtn {
    padding: 10px 15px; /* Ajuster le padding selon vos préférences */
    font-size: 16px; /* Taille de police */
    border-radius: 10px; /* Bord arrondi */
    border: none; /* Supprimer la bordure */
    cursor: pointer; /* Curseur au survol */
    background-color: #110a3d !important; /* Couleur de fond */
    color: #e4dacb; /* Couleur du texte */
    transition: background-color .25s ease-in-out, color .25s ease-in-out, transform .25s ease-in-out;
}

    .submitbtn:hover {
        background-color: rgba(255, 255, 255, 0.1); /* Couleur de fond au survol */
        color: #e4dacb; /* Couleur du texte au survol */
    }
@media (max-width: 768px) {
    .col-submit {
        display: flex;
        justify-content: center; /* Centrer horizontalement */
        align-items: center; /* Centrer verticalement */
        padding-top: 10px; /* Ajouter un padding pour l'espace */
    }

    .submitbtn {
        width: 100%; /* Le bouton prend toute la largeur de la colonne */
        max-width: 290px;
    }
}
.checkbox {
    display: flex;
    align-items: center; /* Centrer verticalement */
}

    .checkbox input[type="checkbox"] {
        margin-right: 5px; /* Espacement entre la checkbox et le texte */
    }
    /*Biens et location */
    .wrapper {
        -webkit-box-shadow: 0px 21px 41px -13px rgba(0, 0, 0, 0.18);
        -moz-box-shadow: 0px 21px 41px -13px rgba(0, 0, 0, 0.18);
        box-shadow: 0px 21px 41px -13px rgba(0, 0, 0, 0.18);
        margin: 2em;
        border-radius: 10px;
        background-color: #110a3d;
    }

    .content-container {
        max-width: 960px;
    }

    .detail-wrap {
        background: #a5a2b4;
        border-bottom-right-radius: 10px;
        height: 70%;
    }

    .detail-wrap-flip {
        border-bottom-right-radius: unset;
        border-bottom-left-radius: 10px;
    }


    .detail-wrap h3 {
        font-size: 1em;
        text-align: center;
        margin-top: 0.5em;
        font-weight: bold;
    }

    .detail-wrap p {
        font-size: 1em;
        margin-top: 0px;
        margin-left: 1em;
        margin-right: 1em;
        justify-content: flex-end;
        text-align: justify;
    }


    .photo-wrap {
        color: rgba(255, 255, 255, 0.8);
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background-position: top center;
        background-size: cover;
        background-repeat: no-repeat;
        text-align: center;
        position: relative;
    }

    .photo-wrap-flip {
        border-top-left-radius: unset;
        border-bottom-left-radius: unset;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }




    .photo-annonce-selection {
        color: rgba(255, 255, 255, 0.8);
        border-radius: 10px 10px 0px 0px;
        background-position: top center;
        background-size: cover;
        background-repeat: no-repeat;
        text-align: center;
        position: relative;
    }

    .bg-primary {
        background: #110a3d !important;
    }

    .bloc-annonce {
        padding: 0px;
        cursor: pointer;
    }

    .bloc-photo {
        height: 20em;
    }

    .bloc-photo-selection {
        height: 15em;
    }

    .row-header-annonce {
        /*margin: 4px;*/
        height: 30%;
    }

    .bloc-header-annonce {
        /*margin: 4px;*/
        color: #eae2d7;
        font-size: 1em;
        padding: 0.5em;
        display: inline-flex;
    }

        .bloc-header-annonce h2 {
            font-size: 1.5em;
            margin: 0px;
        }

        .bloc-header-annonce h3 {
            font-size: 1em;
            margin: 0px;
        }

        .bloc-header-annonce i {
            margin-right: 0.5em;
            font-size: 20px;
        }

    .bloc-localisation {
        justify-content: left;
    }


    .bloc-prix {
        justify-content: right;
    }

    .bloc-titre {
        justify-content: center;
    }


    @media (max-width: 768px) {
        .bloc-text {
            order: 2; /* Place le bloc de texte en second sur les petits écrans */
        }

        .bloc-photo {
            order: 1; /* Place le bloc de photo en premier sur les petits écrans */
        }

        .detail-wrap {
            border-radius: 0px 0px 10px 10px;
        }

        .photo-wrap {
            border-radius: 10px 10px 0px 0px;
        }

        .row-header-annonce {
            height: 40%;
        }
    }
/* Largeur de l'ascenseur */
::-webkit-scrollbar {
    width: 5px; /* Largeur de l'ascenseur */
}

/* Fond de l'ascenseur */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* Couleur de fond de l'ascenseur */
}

/* Poignée de l'ascenseur (barre de défilement elle-même) */
::-webkit-scrollbar-thumb {
    background-color: #888; /* Couleur de la poignée de l'ascenseur */
    border-radius: 5px; /* Coins arrondis de la poignée */
}

    /* Poignée de l'ascenseur au survol */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #555; /* Couleur de la poignée au survol */
    }
    
    /* Styles pour les champs invalides */
.input-validation-error {
    border-bottom: 2px solid red !important; /* Bordure rouge en dessous */
    background-color: #fef0f0 !important; /* Fond légèrement teinté en rouge */
}

/* Styles pour les messages d'erreur */
.field-validation-error {
    color: red !important; /* Couleur du texte d'erreur en rouge */
    font-size: 12px !important; /* Taille de police des messages d'erreur */
}

/* Styles pour le résumé de validation */
.validation-summary-errors {
    color: red !important; /* Couleur du texte du résumé d'erreurs en rouge */
    font-size: 12px !important; /* Taille de police du résumé d'erreurs */
    margin-bottom: 10px !important; /* Marge en bas du résumé d'erreurs */
}

/* Optionnel : Cacher le résumé de validation si pas d'erreurs */
.validation-summary-valid {
    display: none !important;
}