@charset "UTF-8";
/* CSS Document */

.vue#vue-liste {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: white;
}


/* navigation */
#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
}

#popup-filtre {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color :black ;
  padding: 20px;
  border-radius: 8px;
  z-index: 10000;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

#popup-filtre button#close-filtre {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

/* pied de page */
footer {
  background: #222;
  font-family: helvetica ;
  color: white;
  text-align: center;
  padding: 1rem;
  height:30px;
}

/* liste des annonces */
	  #liste_biens li {
      padding: 10px;
      margin: 5px 0;
      border: 1px solid #ccc;
      cursor: pointer;
      list-style: none;
    }
    
	/*Style au survol depuis la carte */
       .annonce.highlight {
      border: 2px solid red;
      box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
     }

/* mini annonce */
/* Déjà existant (desktop & tablette) */
#liste_biens {
  padding: 0;
  margin: 0;
}

.annonce.highlight {
border: 2px solid red;
box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}
	
	
#liste_biens li.annonce {
  display: flex;
  align-items: stretch;
  border: 1px solid #ccc;
  margin-bottom: 15px;
  padding: 10px;
  list-style: none;
  background: #fff;
}

	
.annonce .photo {
  width: 200px;      
  height: 130px;     
  flex-shrink: 0;  /* la div ne se réduit pas */
  overflow: hidden;   /* cache ce qui dépasse */
  border-radius: 6px; 
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;	
}

/* aff maj */
 .annonce .photo {
  position: relative; 
}
.annonce .photo .datemaj {
  position: absolute;
  top: 2px;
  left: 2px;
  background: rgba(0,0,0,0.6);
  background: rgba(40, 167, 69, 0.7);  
  color: #fff;
  font-size: 0.60em;
  font-family:Helvetica;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}   
/* fin aff maj */

.annonce .photo img {
  width: 100%;
  height: 100%; 
  object-fit: cover; /*  rogne image pour remplir sans déformer */
}
	  
.annonce .desc {
  flex: 1;
}

.annonce .desc h3 {
  margin: 0 0 5px;
  font-size: 1.1em;
}

.annonce .pictos {
  margin-top: 8px;
}

.annonce .pictos .picto {
  margin-right: 6px;
  font-size: 1.2em;
}

.annonce .droite {
  width: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 15px;
  text-align: center;
}

.annonce .labels {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 10px;
}

.annonce .prix p {
  font-size:14px;
  color: #333;
}
	  

.annonce .desc p {
  margin: 0 0 5px;
  font-weight:200 ;	
}
	
.annonce .desc p#mentionS {
  font-weight:500 ;
  font-size:small ;
  margin-bottom :3px ;
  background : #FFF	 ;
}

.annonce .desc p#mention {
  font-weight:500 ;
  font-size:small ;
  margin-bottom :3px ;
  background : #333	 ;
  background: linear-gradient(90deg, #000, #CCC);
  /*color :#E5C651 ; */
  color :#FFF ;	
  padding-left: 5px ;
  border-radius :5px ;
}

.annonce .desc p#titre {
font-size: 0.9em!important ;
font-weight:400!important ;
color:#237FAB ;
}

.annonce .desc h3 {
font-weight:500 ;	
}


.annonce .desc p#anV {
font-weight:300 ;
margin-bottom:0	;
margin-top:15px;
}

.annonce .desc p#anD {
font-weight:300 ;
margin-top:0 ;
margin-bottom:5px ;
font-size:smaller;	
}

.annonce .desc p#anR {
font-weight:300 ;
margin-top:5px;
font-size:14px;
}
	  	  
.button {
  display: inline-block;
  background: linear-gradient(135deg, #6a5acd, #00bcd4);
  color: white;
  padding: 0.3rem 0.8rem;  /* 0.5rem 1.0rem */
  border: none;
  border-radius: 0.5rem;  /* 1rem */
  font-size: 1rem;
  font-weight: 400; /*600 */
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none; /* utile si c’est un <a> */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #7b68ee, #26c6da);
}

	  
/* Responsive : */
@media (max-width: 899px) {	
		
  #liste_biens li.annonce {
    flex-direction: column;  /* empile les blocs */
    align-items: center;     /* centre le contenu */
    text-align: center;
  }

.annonce .photo .datemaj {
  font-size: 0.65em;
}   
	
	
  .annonce .photo {
    width: 100%;
    height: auto;
    margin: 0 0 10px 0;  /* espace sous la photo */
  }

  .annonce .photo img {
    width: 100%;
    height: auto;
  }
	
  .annonce .desc {
    width: 100%;
    margin-bottom: 10px;
  }

  .annonce .droite {
    width: 100%;
    margin: 0;
    flex-direction: row;  /* labels + prix côte à côte */
    justify-content: space-between;
  }

  .annonce .labels {
    margin-bottom: 0;
    text-align: left;
  }

  .annonce .prix {
    text-align: right;
  }	 
	
  .annonce .desc p#titre {
    color:#237FAB ;
    font-size:1.0em;		  
  }
		

  .annonce .desc p#anV {
    font-size:1.4em;	
  }

  .annonce .desc p#anD {
    font-weight:300 ;
    font-size:1.2em;	
  }

  .annonce .desc p#anR {
   font-weight:300 ;
   font-size:1.0em;	
  }
	
	
}