/* CSS annonces */

.page_int_annonce_ligne {
  display:table;
  width:100%;
  margin-bottom:10px;
}

.page_int_annonce_table {
  display:flex;
  flex-wrap:wrap;
  width:100%;
  margin-bottom:20px;
  background-color:#474747;
}

.page_int_annonce{
	height:auto;
	width:24%;
  margin:0.5%;
  /*
  display:table-cell;
  float:left;
  position:relative;
  */
}
.page_int_annonce:nth-child(4) {
  margin-right:0;  
}

.page_int_annonce a {
  position:relative;
  height:100%;
  width:auto;
  margin:0;
  /*margin-right:2%;*/
  display:block;
  background-color:#222;
}


.page_int_annonce a:hover{
	background-color:#eee;
}
.page_int_annonce a:hover .page_int_annonces_prix, .page_int_annonce a:hover .page_int_annonces_price{
	background-color:#da5d04;
}

.page_int_annonce_image {
	width:100%;
	height:auto;
  min-height:240px;
  position:relative;
}

.page_int_annonce_photo {
  width:100%;
  height:240px;
  background-repeat:no-repeat;
  background-position: top center;
  background-size:100% auto;  
}

._int_annonce_photo {
  width:100%;
  height:auto;  
}

/*
.page_int_annonce_image img{
	width:100%;
	height:auto;
}
*/

.page_int_annonce_content{
	min-height:195px;
  position:relative;
  background-color:#fff;
}

.page_int_annonce_marque {
	padding:10px;
  font-size:20px;
  font-weight:700;
	color:#000000;
}


.page_int_annonce_modele, .page_int_annonce_kilometrage_annee, .page_int_annonce_energie_boite {
  font-size:16px;
	color:#000000;
	padding:0 10px 0 10px;
  font-weight:400;
}
.page_int_annonce_modele {
  margin-bottom:10px;
}

.page_int_annonces:hover .page_int_annonce_titre{
	color:#FFF;
}


.page_int_annonces_prix{
	position:absolute;
  bottom:0;
  left:0;
  width:100%;
	height:auto;
	background-color:#eb6e15;
	color:#FFF;
	font-size:20px;
	font-weight:400;
	padding:10px;
  text-align:center;
  
  background-image:url('../images/puce_lien.png');
  background-repeat:no-repeat;
  background-position:96% center;
}
.page_int_annonces_prix img{
	width:20px;
	height:20px;
	float:right;
	margin-top:4px;
}

.page_int_annonces_footer {
  /*position:absolute;*/
  bottom:0;
  left:0;
  width:100%;
	height:auto;
  background-color:#222;
}

.page_int_annonces_price {	

	background-color:#eb6e15;
	color:#FFF;
	font-size:20px;
	font-weight:400;
	padding:10px;
  text-align:center;
  
  background-image:url('../images/puce_lien.png');
  background-repeat:no-repeat;
  background-position:96% center;
}
.page_int_annonces_prix img{
	width:20px;
	height:20px;
	float:right;
	margin-top:4px;
}

.pia_financement {
  padding:10px;
  text-align:center;
  font-weight:600;
  
}
.pia_financement_infos {
  font-size:12px;  
  font-style:italic;
  font-weight:300;
}

.pia_prix {
  color:#eb6e15;  
}


.annonces_prix_pro {
  float:left;
  margin-right:10px;
}

.annonces_prix_public {
  float:left;
}

.annonces_prix_public_titre, .annonces_prix_pro_titre {
  float:left;
  font-size:12px;
  color:#000; 
}
.annonces_prix_public_prix, .annonces_prix_pro_prix {
  float:left;
  font-size:17px;
  font-weight:400;
  margin-left:5px;
  color:#fff; 
}
.annonces_prix_pro_titre, .annonces_prix_public_titre {
  background-color:#fff;
  border-radius:5px;
  padding:4px;
  color:#000; 
}



#nbre_annonces {
  font-weight:400;
}

.annonce_favori {
  
	width:23px;
	height:22px;  
  background-image:url('../images/puce_selection_ON.png');
  
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  position:absolute;
  top:5px;
  right:5px;
  z-index:99; 
}

.annonce_pics {
  
	width:55px;
	height:24px;  
  background-image:url('../images/photo-camera.png');
  padding:4px 5px 5px 35px;
  background-repeat:no-repeat;
  background-position:5px center;
  background-size:auto 100%;
  position:absolute;
  top:5px;
  right:5px;
  z-index:99; 
  color:#000;
  font-weight:500;
  text-align:right;
  background-color:rgba(255,255,255,0.7);
}

.annonce_vendue {
  
	width:auto;
	height:auto;  
  padding:5px 10px 5px 10px;
  position:absolute;
  bottom:10px;
  left:0px;
  z-index:98; 
  color:#000;
  font-weight:500;
  text-align:right;
  background-color:rgba(235,110,21,0.8);
}
.btn_favori {
  cursor:pointer;
}

.page_int_annonce .btn_favori_on {
  background-image:url('../images/puce_selection_OFF.png')!important;
}

/* form recherche */

#vehicules_champs_recherche {
  width:100%;
  margin-right:10px;
  background-color:#474747;
  padding:10px;
}

#vehicules_champs_recherche select {
    width: 15%;
    height: auto;
    color: #383838;
    text-align: left;
    font-family: 'Lato', sans-serif;
    padding: 10px;
    background-color: #FFF;
    font-size: 14px;
    display: block;
    float: left;
    margin-right: 2%;
    margin-bottom: 20px;
    border: none;
    border-radius: 0px;
}
#vehicules_champs_recherche .vehicules_slider {
    display: block;
    float: left;
    margin-left: 1%;
    margin-right: 2%;
    margin-bottom: 10px;
    width:25%;
}

#vehicules_champs_recherche .vehicules_barre_texte {
    text-align: center;
    color: #FFF;
    font-weight: 300;
    font-size: 14px;
    margin: auto;
    width: 80%;
    margin-bottom: 10px;
    background-color: #474747;
    border: 1;
}

#vehicule_recherche_submit {
    display: block;
    float: right;
    margin-right: 2%;
}

#vehicule_recherche_submit input[type=submit]{
	height:auto;
	width:auto;
	border-radius:10px;
	background-color:#000;
	color:#eb6e15;
	text-align:center;
	font-weight:700;
	display:block;
	text-transform:uppercase;
	font-size:16px;
	padding:10px;
  cursor:pointer;
  border:0;
}
#vehicule_recherche_submit input[type=submit]:hover{
	background-color:#eb6e15;
	color:#000;
}

#vehicule_recherche_reset {
    display: block;
    float: right; 
    margin-right: 2%;  
}
#vehicule_recherche_reset a  {
	height:auto;
	width:auto;
	border-radius:10px;
	background-color:#000;
	color:#eb6e15;
	text-align:center;
	font-weight:700;
	display:block;
	text-transform:uppercase;
	font-size:16px;
	padding:10px;
  cursor:pointer;
  border:0;
}
#vehicule_recherche_reset   a:hover{
	background-color:#eb6e15;
	color:#000;
}

#header_annonces {
  margin:10px 0 10px 0;
  width:100%;
}
#nbre_annonces {
  float:left;
  font-size: 16px;
}
#nbre_annonces_nb {
  color:#eb6e15;
  font-weight:400;
}
#tri_annonces {
  float:right;
}
#tri_annonces select {
    width: auto;
    height: auto;
    background-color: #383838;
    text-align: left;
    font-family: 'Lato', sans-serif;
    padding: 4px;
    color: #FFF;
    font-size: 14px;
    display: block;
}


/*** page detail **/

/*** page reservation **/

#reservation_intro {
  margin-bottom:20px;
}

#reservation_vehicule {
  float:right;
  width:49%;
  margin-left:1%;
  background-color:#181818;
  padding:20px;
  border-radius:15px;
  
  
}
  #reservation_vehicule div {
    font-size:20px;
  }
  #reservation_vehicule img {
    width:100%;
    height:auto;
    margin-bottom:10px;
  }
#reservation_formulaire {
  float:left;
  width:49%;
  margin-right:1%;
  background-color:#181818;
  padding:20px;
  border-radius:15px;
}


/******** détail annonce ****/

#detail_photo_produit{
	width:50%;
	height:auto;
	float:left;
	margin-right:3%;
  position:relative;
	margin-bottom:30px;

}

#detail_photo {
  height:450px;
  width:100%;
	background-repeat:no-repeat;
	/*background-size:100% auto;
	background-position:top center;
  */
  background-size:contain;
  background-position:center;
  transition:1s;
}

#detail_photo_droite, #detail_photo_gauche {
  position:absolute;
  bottom:50%;
  height:32px;
  width:32px;
  border-radius:16px;
  background-color:#eb6e15;

  opacity:0.7;
  cursor:pointer;

  background-size:70%;
  background-repeat:no-repeat;
  background-position:center center;  
}
#detail_photo_droite:hover, #detail_photo_gauche:hover {
  background-color:#fff;
  opacity:0.9;
}
#detail_photo_gauche {
  left:10px;
  z-index:99;
  background-image:url('../images/left-arrow.png');
}
#detail_photo_droite {
  right:10px;
  z-index:98;
  background-image:url('../images/right-arrow.png');
}




#detail_texte_produit{
	width:47%;
	height:auto;
	float:left;
	margin-bottom:30px;
}
#detail_texte_produit_gauche{
	float:left;
}
#detail_texte_produit_droit{
	float:right;
}
.detail_marque{
	margin-bottom: 10px;
	font-size: 42px;
	font-weight: normal;
	color: #eb6e15;
	text-transform: uppercase;
	display:block;
  float:left;
}

.detail_print{
	width:25px;
	height:25px;
	background-image:url(../images/picto_print_OFF.png);
	background-repeat:no-repeat;
	background-position:center right;
  margin-top:10px;
	display:block;
	float:right;
}
.detail_print:hover{
	background-image:url(../images/picto_print_ON.png);
}

.detail_modele{
	margin-bottom: 6px;
	font-size: 30px;
	font-weight:300;
	color:#FFF;
	text-transform: uppercase;	
	display:block;
  float:left;
  width:90%;
}
.detail_prix{
	margin-bottom: 6px;
	font-size: 40px;
	font-weight:700;
	color:#FFF;
	text-transform: uppercase;	
	display:block;
}
.detail_kilometre, .detail_carburant, .detail_boite{
	font-size:24px;
	font-weight:300;
	color:#FFF;
	margin-bottom: 6px;
	display:block;
}
.detail_boite{
	margin-bottom:10px;
}

.detail_garantie{
	width:120px;
	height:86px;
	background-image:url(../images/picto_garantie_OFF.png);
	background-repeat:no-repeat;
	background-position:center;
	margin-bottom:30px;
	display:block;
	float:right;
	clear:both;
}
.detail_garantie:hover{
	background-image:url(../images/picto_garantie_ON.png);
}
.detail_360{
	width:120px;
	height:55px;
	background-image:url(../images/picto_360_OFF.png);
	background-repeat:no-repeat;
	background-position:center;
	display:block;
	float:right;
	clear:both;
}
.detail_360:hover{
	background-image:url(../images/picto_360_ON.png);
}
.detail_selection{
	width:100%;
	height:auto;
	background-color:#575757;
	text-align:center;
	font-size:20px;
	color:#fff;
	margin-bottom:10px;
	text-transform:uppercase;
	display:block;
	padding:10px 10px 10px 50px;
	background-image:url(../images/picto_selection_int_OFF.png);
	background-repeat:no-repeat;
	background-position:10px center;
}
.detail_selection:hover, #detail_texte_produit .btn_favori_on{
	background-color:#FFF;
	color: #eb6e15;
	background-image:url(../images/picto_selection_int_ON.png);
}
.detail_reserver{
	width:100%;
	height:auto;
	background-color:#eb6e15;
	text-align:center;
	font-size:20px;
	color:#FFF;
	margin-bottom:10px;
	text-transform:uppercase;
	display:block;
	padding:10px 10px 10px 50px;
	background-image:url(../images/picto_voiture_int_OFF.png);
	background-repeat:no-repeat;
	background-position:10px center;
}
.detail_reserver:hover{
	background-color:#FFF;
	color: #eb6e15;
	background-image:url(../images/picto_voiture_int_ON.png);
}

.detail_vendu{
	width:100%;
	height:auto;
	background-color:#eb6e15;
	text-align:center;
	font-size:20px;
	color:#FFF;
	margin-bottom:10px;
	text-transform:uppercase;
	display:block;
	padding:10px 10px 10px 50px;
	background-image:url(../images/picto_voiture_int_OFF.png);
	background-repeat:no-repeat;
	background-position:left;
}

.detail_telephone{
	width:100%;
	height:auto;
	background-color:#181818;
	text-align:center;
	font-size:20px;
	color:#eb6e15;
	margin-bottom:10px;
	text-transform:uppercase;
	/*display:block;*/
	padding:10px 10px 10px 50px;
	background-image:url(../images/picto_telephone_OFF.png);
	background-repeat:no-repeat;
	background-position:left;
}
.detail_telephone:hover{
	background-color:#FFF;
	color: #eb6e15;
	background-image:url(../images/picto_telephone_ON.png);
}


.detail_email{
	display:block;
  width:100%;
	height:auto;
	background-color:#181818;
	text-align:center;
	font-size:20px;
	color:#eb6e15;
	margin-bottom:10px;
	text-transform:uppercase;
	/*display:block;*/
	padding:10px 10px 10px 50px;
	background-image:url(../images/picto_email_OFF.png);
	background-repeat:no-repeat;
	background-position:left;
}
.detail_email:hover{
	background-color:#FFF;
	color: #eb6e15;
	background-image:url(../images/picto_email_ON.png);
}





#detail_mini_photo{
	width:39%;
	height:auto;
	margin-right:3%;
	float:left;
}
.detail_mini_photo_bloc{
	width:24%;
	height:100px;
	margin-right:1%;
	float:left;
	background-image:url(../images/54845907_01_hd.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	margin-bottom:1%;
  cursor:pointer;
}
.detail_mini_photo_bloc:hover{
	border:3px solid #eb6e15;
}
.detail_mini_photo_bloc:nth-child(3n){
	/*margin-right:0%;*/
}




#detail_description{
	width:58%;
	height:auto;
	float:left;
}

#detail_description_new {
  height:auto;
}

.detail_description_titre{
	height:auto;
	margin:0px;
	padding:6px 10px;
	background-color:#181818;
	text-align:center;
	font-size:15px;
	text-transform:uppercase;
	color:#FFF;
	float:left;
	display:block;
  cursor:pointer;
  /*border-right:1px solid #fff;*/
  margin-right:5px;
}
.detail_description_titre:nth-last-of-type(3) {
 /*border:0;*/
}
.detail_description_titre:hover{
	color: #eb6e15;
	background-color:#464646;
}
.detail_description_titre_actif{
	background-color:#575757;
	color:#eb6e15;
}
#detail_description_texte{
	height:auto;
	width:100%;
	background-color:#575757;
	color:#FFF;
	font-size:16px;
	padding:25px;
}
.detail_description_texte_colonne{
	width:50%;
	font-weight:700;
	font-size:16px;
	float:left;
}

#detail_description_texte li{
	margin:0px 0px 5px 0px;
	padding:10px;
	list-style:none;
}

#detail_description_texte li:nth-of-type(2n){
  background-color:#464646;
}

#detail_description_texte ul{
	margin:0px;
	padding:0px;
}

.onglet_titre {
  display:none;
}

.onlget {
  display:none;
}

.detail_annonces_prix_pro {
  
}

.detail_annonces_prix_public {

}

.detail_annonces_prix_public_titre, .detail_annonces_prix_pro_titre {
  float:left;
  font-size:16px;
  color:#000; 
  background-color:#fff;
  border-radius:5px;
  padding:4px;
  color:#000;  
  width:70px; 
  text-align:center;
  margin-top:10px;
}
.detail_annonces_prix_public_prix, .detail_annonces_prix_pro_prix {
  float:left;
  font-size:40px;
  font-weight:700;
  margin-left:15px;
  color:#fff; 
}


.lien_vente {
  padding: 5px;
  background-color:#eb6e15;
  color:#fff;
  display:inline-block;
  text-decoration:none;
  font-family: 'Lato', sans-serif;
  float:right;
  margin:5px 0;
  font-size: 14px;
  transition:0.5s all ease-out;
}

.lien_vente:hover {
  background-color:#000;
  text-decoration:none;
  color:#fff;
}

#bloc_financement {
  opacity:1;
  background-color: #000;
  margin-top:5px;
}

  #bloc_financement h3 {
    text-align:center;
    padding:5px;
    border-bottom:1px solid #fff;
    margin:0 30%;
  }
  #bloc_financement_infos {
    padding: 5px;
    text-align:center;
    font-size:18px;
    font-weight:600;
  }

  #bloc_financement_infos_bis {
    padding: 5px;
    text-align:center;
    font-size:14px;
    font-style:italic;
  }  
  
  #btn_simuler_financement {
      width: 100%;
      height: auto;
      background-color: #eb6e15;
      text-align: center;
      font-size: 20px;
      color: #FFF;
      text-transform: uppercase;
      display: block;
      padding: 10px;
      margin-top:10px;
      cursor:pointer;
  }
  
  #btn_simuler_financement:hover{
  	background-color:#FFF;
  	color: #eb6e15;  	
  }
  
  
#financo_footer {
  margin:20px 0;
  background-color:#000;
  padding:20px;
}  
  #financo_footer_title {
    color:#fff;
    font-size:22px;    
  }
  #financo_footer_exemple {
    color:#fff;
    font-size:16px;    
  }


/* pagination */
#pagination {
  display:flex;
  justify-content: center;
  margin:auto;
  width:auto;  
}
#pagination a {
  display:block;
  padding:2px 5px;
  border:1px solid #323535;
  margin:0 5px; 
  width:auto;
  min-width:24px;
  text-align:center;
  background-color:#fff!important;
  color:#323535!important;
  transition:0.2s all ease-in; 
}
#pagination a:hover, #pagination a._pactive {
  background-color:#eb6e15!important;
  color:#fff!important;
}

#pagination a._nop, #pagination a._nop:hover {
  border:0;
  color:#eb6e15!important;
   background-color:#fff!important;
}

  
/******************* small screen *****************/ 

/* nb vignettes / ligne dépend de la largeur */
@media (max-width: 1250px) {
  /* repasse en 3 vignettes par ligne */
  .page_int_annonce{
  	width:32%;
        
  }  
}
@media (max-width: 900px) {
  /* repasse en 2 vignettes par ligne */
  .page_int_annonce{
  	width:49%;
        
  }  
  
  .detail_reserver {
      font-size:22px;
  }
  
 
}
@media (max-width: 640px) {
  /* repasse en 1 vignettes par ligne */
  
  #ariane {
    display:none;
  }
  
  .conteneur {
    width:auto;
  }
  
   #inter .conteneur {
       padding: 0px 10px;
   }  
  
  .page_int_annonce_table {
    display:block;
    background:none;
  }
  
  .page_int_annonce{
  	width:100%;
    float:none;
    margin:5px 0 15px 0; 
    display:block;       
  }  
  
  
  #vehicules_champs_recherche {
    margin:0;    
  }
  
  #vehicules_champs_recherche select {
    float:none;
    width:100%;
  }
  
  #vehicules_champs_recherche .vehicules_slider {
      display: block;
      float: none;
      margin: 10px;
      width:auto;
  }
  
  #vehicules_champs_recherche .vehicules_barre_texte {
  }
  
  
  #vehicule_recherche_submit, #vehicule_recherche_reset {
      display: block;
      float: none;
      margin:10px;
      margin-top:20px;
  }   
  #vehicule_recherche_reset {
    display:none;
  } 
  
  #vehicule_recherche_submit input[type=submit], #vehicule_recherche_reset a {
    width:100%;
  }
  
  .page_int_annonce_image {
    /*height:280px;*/
  }
  .page_int_annonce_photo {
    background-position: center;
    height:280px;  
  }  
  
  .int_annonce_photo {

  }  
  
  
 
  
  

  
}

@media (max-width: 800px) {
 #reservation_vehicule,#reservation_formulaire {
  float: none;
  margin:0 0 10px 0;
  width:auto;
  border-radius:0;
 }
 
  
  /*** detail **/
  #detail_photo_produit {
    float:none;
    width:100%;
  	/*height:300px;*/
    
  	margin:0;
    margin-bottom:10px;
  }
  #detail_texte_produit {
    float:none;
    width:100%;
    height:auto;
    margin:0;
    margin-bottom:10px;
  }
  #detail_photo {
    background-size:contain;
    height:300px;
  }
  
  .detail_print {
    display:none;
  }
  
  .detail_marque {
    float:none;
    width:auto;
  }
  
  #detail_texte_produit_gauche, #detail_texte_produit_droit {
    float:none;
    margin:0;
    margin-bottom:10px;    
    width:auto;
  }
  
  .detail_garantie {
    float:left;
    width:40%;
    margin:0 5% 0 5%;
    height:150px;
    clear:none;
  }
  .detail_360 {
    float:right;
    width:40%;
    margin:0 5% 0 5%;
    height:150px;
    clear:none;
  }  
  

  
  #detail_mini_photo {
    display:none;
  }
  
  #detail_description {
    width: auto;
    height: auto;
    float: none;
  }
  .btn_onlget {
    display:none;
  }
  .onlget {
    display:block!important;
    margin-bottom:20px;  
  }
  .onglet_titre {
    display:block!important;
    color:#fff!important;
  	font-size:20px;
  	text-transform:uppercase;
    border-bottom:1px dotted #fff;
    margin-bottom:5px;
    
        
  }
  .detail_description_texte_colonne {
      width: auto;
      float: none;
  }  
 
 

 
}