@charset "utf-8";
/* CSS Document */
html, body {
    height: 100%;
    margin: 0;
}
.accueil {
    position:fixed ;
    display:flex ;
	align-items: center; /* Centre verticalement */
	justify-content: center; /* Centre horizontalement */
    width:500px ;
    height: 27px ;
    line-height: 27px ;
    background-color:#00537a ;
    text-align: center ;
    color: white ;
    font-size: 16px;
    font-weight: bold;
    box-shadow:5px 5px 5px grey ;
    margin-bottom: 35px ;
    z-index: 100;
}
.accueil:hover {
    background-color:#00405c ;
    cursor: pointer;
}
#conteneur {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}
#bloc_gauche {
    box-sizing: border-box;
    width: 560px;
    height: 100vh;
    overflow-y: auto; /* ou hidden si tu veux juste masquer */
    background: white ;
    scrollbar-gutter: stable; /* reserve un espace pour la scrollbar */
    padding-left: 20px;
    padding-top:10px ;
    padding-bottom:22px ;
}
#bloc_droit {
    flex: 1; /* Prend tout l’espace restant */
    height: 100vh;
}
#map {
    width: 100%;
    height: 100%;
    filter: saturate(2);
    color: rgb(2, 115, 181);
    cursor: default !important;
}

#bloc_gauche::-webkit-scrollbar {
  width: 15px;
}

#bloc_gauche::-webkit-scrollbar-track {
  background: #f0f0f0; /* Couleur du fond de la barre */
}

#bloc_gauche::-webkit-scrollbar-thumb {
  background-color: #c5c4c4; /* Couleur du curseur */
  border-radius: 10px;
  border: 2px solid #f0f0f0; /* Pour créer un petit espace autour du curseur */
}

#bloc_gauche::-webkit-scrollbar-thumb:hover {
  background-color: #666;
  cursor: pointer;
}

.affichage_annonce {
    display: inline-flex;
    flex-direction: column; /* Place l'image au-dessus du texte */
    align-items: center ;
    justify-content: center ;
    border: solid rgb(69, 69, 69) 0px ;
    min-width:210px ;
    min-height: 300px ;
    background-color: rgb(241, 241, 241) ;
    padding:5px ;
    padding-top:10px ;
    border-radius: 5px ;
}
.affichage_annonce img {
    width:200px ;
    height: 210px ;
    object-fit: cover; /* Évite la déformation de l'image */
}
.description {
    font-weight: bold ;
    font-size:14px ;
}
.prix {
    font-weight: bold ;
    font-size: 18px ;
}

.no-icons {
    pointer-events: none; /* Empêche les interactions directes */
    user-select: none; /* Désactive la sélection */
}
#tableau_carte {
    width:455px ;
    border:solid red 0px ;
    background-color: rgb(229, 228, 228);
    padding-top: 0px;
    margin-left: 20px ;
    margin-bottom: 10px ;
}
ul#principale_carte {
    width:200px ;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: white ;
}

#choix_carte {
    width: 200px;
    height: 35px ;
    line-height: 35px ;
    background: #ffffff;
    box-shadow:5px 5px 10px grey ;
    text-align: center ;
}
ul#principale_carte:hover {
    cursor: pointer ;
}
ul#principale_carte:hover li.carte #carte_depliant{
    display: block;
}
li.carte {
    position: relative;
}
ul#carte_depliant {
    display:none ;
    margin: 0;
    padding: 0;
    position: absolute;/* Pour ne pas pousser les elements en dessous au depliage */
    top: 100%; /* Juste en dessous du bouton */
    left: 0;
    z-index: 10; /* S'assure qu'il passe au-dessus des autres éléments */
}
#carte_depliant li {
    width: 200px;
    height: 30px ;
    line-height: 30px ;
    text-align: center ;
    list-style-type: none;
    border:solid rgb(195, 195, 195) 1px ;
    background-color: white ;
}

a.bulleinfo_onglet {  
    position: relative;  
    }
  a.bulleinfo_onglet .info_onglet{  
    display: none;
    width: 160px;
  }

  a.bulleinfo_onglet:hover .info_onglet{  
    position: absolute;
    width: 190px; 
    height:50px;
    left:0px ;
    bottom:50px ;
    display: block; 
    border: solid black 1px ;
    color: #000000;   
    text-align: justify;  
    font-size:14px ;
    font-weight:normal ;
    padding:20px ;
    background: white;
   }
.nouvel_onglet {
	margin-right: 7px; /* Espacement entre le texte et le curseur */
	font-size: 14px ;
	font-style: italic;
}
#bloc_curseur {
    margin-left: auto ;
}
#bloc_frontier {
    margin-left: -10px ;
}
.curseur {
	display: inline-flex;
	align-items: center; /* Aligne verticalement le texte et le curseur */
	justify-content: center ;
	width:185px ;
	box-shadow:3px 3px 5px grey ;
	background:rgb(244, 244, 244) ;
	padding:7px ;
}

.curseur_frontier {
	display: inline-flex;
	align-items: center; /* Aligne verticalement le texte et le curseur */
	justify-content: center ;
	width:185px ;
	background:white ;
	padding:7px ;
    background-color: rgb(222, 222, 222) ;
}
.fond_curseur {
    display: flex;
    align-items: center;
    width: 70px; /* Largeur totale */
    height: 22px; /* Hauteur du rectangle */
	border-radius: 100px ;
	background:rgb(55, 55, 55) ;
	
}
.fond_curseur:hover {
	cursor: pointer;
}
.noFrontier {
    display: flex;
    align-items: center;
    width: 70px; /* Largeur totale */
    height: 22px; /* Hauteur du rectangle */
	border-radius: 100px ;
	background:rgb(55, 55, 55) ;
	
}
.noFrontier:hover {
	cursor: pointer;
}
.demi_cercle_gauche {
    width: 22px; /* Diamètre des demi-cercles */
    height: 22px;
    border-radius: 100px 0 0 100px; /* Demi-cercle à gauche */
}
.demi_cercle_droit {
    width: 22px;
    height: 22px;
    border-radius: 0 100px 100px 0;
}
.rectangle {
	flex:1 ;/* l'élément peut grandir pour remplir l'espace disponible */
    height: 22px;
}
.rond {
    border: double rgb(67, 67, 67) 4px;
    width: 18px;
    height: 18px;
    background-color: white;
    border-radius: 50%;
}
.conteneur_rond {
    width: 25px;  /* Taille plus grande que le rond */
    height: 25px;
    background: transparent ;
    display: flex;
    justify-content: center;
    align-items: center;
}
.selection {
    width:210px ;
    height:25px ;
    line-height:25px ;
    text-align: center ;
    background-color: rgb(26, 97, 154);
    color:white ;
}
.selection:hover {
    cursor: pointer;
    background-color: rgb(37, 169, 19);
}
#bloc_carte_curseur {
    display: flex;
    padding:0px ;
    border:solid 0px green ;
}
#bloc_liste {
    display: flex;
    align-items: center; /* aligner verticalement les enfants */
    width:455px ;
    border:solid red 0px ;
    margin-top:10px ;
    
}
#affiche_liste   {
    display:flex ;
    justify-content: center; /* Centre horizontalement */
    width: 200px;
    height: 35px;
    line-height:35px ;
    background: #ffffff;
    box-shadow:3px 3px 5px grey ;
    transition: transform 0.1s ease;
    cursor: pointer ;
}

#affiche_liste:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #d2d2d2;
}

#affiche_liste:hover {
    cursor: pointer;
    background-color: rgb(218, 218, 218);
}
#reinitialise_liste {
    width: 200px;
    height: 35px;
    line-height:35px ;
    margin-left: auto ;
    text-align: center ;
    background: #ffffff;
    box-shadow:3px 3px 5px grey ;
    transition: transform 0.1s ease;
    cursor: pointer ;
}
#reinitialise_liste:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #d2d2d2;
}
#reinitialise_liste:hover {
    cursor: pointer;
    background-color: rgb(218, 218, 218);
}

.fond_curseur2 {
    display: flex;
    align-items: center;
    width: 70px; /* Largeur totale */
    height: 22px; /* Hauteur du rectangle */
	border-radius: 100px ;
	background:rgb(55, 55, 55) ;
	margin-left: 10px;
	
}
.fond_curseur2:hover {
	cursor: pointer;
}
.conteneur_rond2,.conteneur_rond3 {
    width: 25px;  /* Taille plus grande que le rond */
    height: 25px;
    background: transparent ;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rond2 {
    border: double rgb(67, 67, 67) 4px;
    width: 18px;
    height: 18px;
    background-color: white;
    border-radius: 50%;
}
.demi_cercle_gauche2 {
    width: 27px; /* Diamètre des demi-cercles */
    height: 27px;
    border-radius: 100px 0 0 100px; /* Demi-cercle à gauche */
}
.demi_cercle_droit2 {
    width: 27px;
    height: 27px;
    border-radius: 0 100px 100px 0;
}
.rectangle2 {
	flex:1 ;/* l'élément peut grandir pour remplir l'espace disponible */
    height: 27px;
}
#bouton_vente,#bouton_location,#bouton_colocation,#bouton_temporaire {
    display:inline-block ;
    margin-right:20px ;
    width:100px ;
    height: 30px ;
    line-height: 30px ;
    text-align: center ;
    background-color: rgb(188, 79, 1);
    border: solid grey 1px ;
    color: white ;
    box-shadow: 4px 4px 12px black;
}

#bouton_vente:hover,#bouton_location:hover,#bouton_colocation:hover,#bouton_temporaire:hover {
    background-color: green;
    cursor: pointer;
}
#bloc_categorie {
    margin-left: 10px ;
    margin-top:50px ;
    margin-bottom:40px ;
}