/****** General ***********/
* {
    font-family: 'Raleway', sans-serif;
    text-decoration: none;
    list-style: none;
    
}

:root {
    --main-color: #0065FC;
    --main-bg-color: #F2F2F2;
    --filter-bg-color: #DEEBFF;
}

.fa-solid {
    color: var(--main-color);
}

body {
    display: flex;
    justify-content: center;
    margin: 0px;
    
}

.main-container {
    width: 100%;
    max-width: 1440px;
    padding: 0 50px;
    box-sizing: border-box;
    gap:30px;
}

a {
    color: inherit;
    text-decoration: none;
}

.section-title {
    margin: 0;
    font-size: 22px;
}

.card {
    background-color: white;
    border-radius: 20px;
    padding: 5px;
    filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
}

.card img {
    object-fit: cover;
}

.card-title {
    font-size: 16px;
}

.euro {
    font-weight: 700;
}

.neutral-star {
    color: var(--main-bg-color)
}

.flexccenter{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.flexcaround{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.flexcbetween{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}


/****** Header ***********/
.header{
    display:inline-block;
    justify-content: space-between;
    align-items: center;
}
.logo {
   width: 61px;
   height: 19px;
   padding: 30px 50px;
}
.nav{ display:flex;
    justify-content: space-between;
    align-items: flex-start;

}
.navlik {
  display: flex;
  padding: 0 25px;
 }

.nav .navlik a {
margin: 0 25px;
float: right;
padding-top: 16px;
 }


 .nav .navlik a:hover {
    color:#0065FC;
    border-top:solid 2px #0065FC;
    padding-top: 14px;
    
 }


/****** Main ***********/
.num1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 35px;
    align-self: stretch;
    padding-bottom:35px;
}
/****** bar de recherche ***********/
.iconlocation{
    height: 50px;
    width: 49px; 
    background-color:rgba(242,242,242,1) ;
    border-radius:15px 0px 0px 15px;

}
.iconlocation i{
    color: #000;

}
.center{
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 15px; 
}

.inpu1{
    height:50px ;
    width:230px;
    font-size: 18px;
    font-weight: bold;
}
.input1 ::placeholder{
    color:black;
    font-size: 18px;
    font-weight:700;
}
.input2{
    height:50px;
    width:195px;
    padding-left:20px;
    border:1px solid rgba(242,242,242,1);
    text-align: center;
}


.bar{
    display:flex;
    justify-content:left;
    align-items:center; 

}
.bouton-r{
    width:132px;
    height:49px;
    border-radius:0px 15px 15px 0px; ;
    background-color: #0065FC;
    align-items: center;
    cursor: pointer;
}
.bouton-r i{
    color: white;
}
.bouton-r a {
    display: flex;
    color:white;
    font-size:18px;
    font-weight: 700;
    margin: 13px;
    text-align: center;
}
.bar p{
    padding-left: 5px;
    text-align: center;
    padding-bottom: 2px;
}

/****** filtre ***********/
.filtreActivite{
    display: flex;
    justify-content: right;
    align-items: center;
    margin-top:30px;
}
.filtre{
    display: flex;
    justify-content: right;
    align-items: center;  
}

.filtre1{
    display: flex;
    justify-content: right;
    align-items: center;
}
.filtre15{
    display: flex;
    justify-content: right;
    align-items: center;
}
.filtre16{
    display: flex;
    justify-content: right;
    align-items: center;
}


.filtre2 {
    display: flex;
    align-items: center;
    border-radius: 25px;
    border:2px solid #d9D9d9;
    height: 40px;
    padding: 4px 19px;
    margin-right: 15px;
    font-size:17px;
    font-weight: 700;
    cursor: pointer;
}
.filtre2:hover {
    background-color:rgba(222, 235, 255, 1) ;
    }
.filtre44{
    padding: 0px 50px;
}
    
.filtre4{
    display: flex;
    justify-content:flex-start;
    align-items: center;
    padding-top:35px;
    flex-direction:row; 
}

.margin-right{
    margin-right: 15px;
}
.icon{
    display: flex;
    width:22px ;
    height:22px ;
    padding-right:10px;
    align-items: center;
}

/****** Hebergements And Populaires ***********/
.hebergements-and-populaires {
    display: flex;
    justify-content: space-between;
}

.hebergements-and-populaires section {
    background-color: var(--main-bg-color);
    border-radius: 20px;
    padding: 30px;
    box-sizing: border-box;
}

/****** Hebergements ***********/
.hebergements {
    width: 65%;
}
.cardHebergement{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around; 
}

.hebergements-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hebergements-cards{
    display: flex;
    flex-direction: row;
    width: auto;  
}
.hebergements-cards a{
width: 33.33%;
}

.hebergements-cards .card {
    margin-top: 33px;
}
.hebergements-cards img {
    width: 100%;
    height: 124px;
    border-radius: 20px 20px 0px 0px ;
    object-fit:fill;
   
}
.hebergements-cards .card-content {
    width: 100%;
    padding-left:15px;
    display: flex;
    flex-direction:column;
    box-sizing: border-box;
}

.hebergements-cards .card-title {
    margin-top: 10px;
    margin-bottom:4px;
}

.hebergements-cards .card-subtitle {
    margin: 0;
}

.henergements-cards .card-rating {
    margin-bottom: 5px;
}
.div22{
    padding-top: 30px;
    font-weight: bold;
}
/****** Populaires ***********/
.populaires {
    width: 32%;
}

.populaires-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.populaires-cards .card {
    display: flex;
    margin-top: 33px;
}

.populaires-cards img {
    width: 33%;
    height: 136px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    
}

.populaires-cards .card-content {
    width: 67%;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.populaires-cards .card-title {
    margin-top: 10px;
    margin-bottom: 4px;
}

.populaires-cards .card-subtitle {
    margin: 0;
}

.populaires-cards .card-rating {
    margin-bottom: 5px;
}
/****** Activié à Marseille ***********/

.activite{
    padding:30px;
    margin-top: 35px;
}
.activiteIm{
    object-fit:fill;
    height:380px;
    width:100%;
    border-radius: 20px 20px 0px 0px;
}
.activiteImg{
    object-fit:cover;
    height: 380px;
    width:100%;
    border-radius: 20px 20px 0px 0px;
}

.border1{
    margin-left:30px;
}
.border11{
    padding-left:19px;
}


.dimcards{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items:normal;
    flex: 1 0 0;
    border-radius: 20px;
    /* Shadow/Card */
    box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.10);
}

.footer{
    display: flex;
    justify-content:start;
    flex-direction: column;
    padding: 20px;
    height:163px;
    width:100%;
    background-color:rgba(242,242,242,1);
}

.foopad {
 padding-top: 15px;
}

.hide2{
    display: none;
   }


/* Le code ci-dessous correspond à la version responsive uniquement */

/****** Media queries ***********/

/* Medium devices (tablets, less/equal than 1183px)*/
@media (max-width: 1183px) {
    .hebergements-cards .card-content {
        width: 100%;
        padding-left: 10px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    .hebergements-cards .card-title {
        font-size:13px;
    }
    .hebergements-cards .card-subtitle {
        font-size:12px;
    }

   .hide2{
    display: none;
   }
}

/* Medium devices (tablets, less/equal than 1024px) */
@media (max-width: 1024px) {
    .hebergements-and-populaires {
        flex-direction: column;
    }

    .hebergements {
        width: 100%;
    }

    .populaires {
        width: 100%;
        margin-top: 50px;
    }

    .populaires-cards {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .populaires-cards a {
        width: 30%;
    }

    .populaires-cards .card-title {
        font-size: 14px;
    }

    .populaires-cards .card-subtitle {
        font-size: 13px;
    }

    .activiteImg {
        height: 200px;
    }
    .activite{
        padding:0px 30px;
    }

    .activiteIm {
        height: 200px;
    }
    .hebergements-cards .card-content {
        width: 100%;
        padding-left: 10px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    .hebergements-cards .card-title {
        font-size:16px;
    }
    .hebergements-cards .card-subtitle {
        font-size:16px;
    }

    .filtre15{
        display: block;    
    }

    .border11{
        padding-left: 9px;
    }

    .card-title{
        font-size: 13px;
    }

    .hide2{
        display: none;
    }
    


}
/* Small devices (phones, less than 767.98px)*/
@media (max-width: 767.98px) {
    .filtre16{
        display:flex;
        justify-content: space-between;
        height: 65px;
    }
   
    .filtre1{
        display:block;
        justify-content: right;
    }

    .filtre2{
        width: 150px;
        margin-right: 15px;
    }

    .logo{
        display: flex;
        justify-content: center;
       }

    .bouton-r{
        width: 50px;
        border-radius: 15px;
       }

    .hide1{
        display: none;
       }

    .hide2{
        display: flex;
       }
}   

/* Small devices (phones, less than 768px) */
@media (max-width: 768px) {
   .footer{
    box-sizing: border-box;
   }

   .input2{
    width: 247px;
    text-align: start;
   }

   .filtre1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
   } 

   .filtre2{
    width: 130px;
    justify-content:flex-start;
    font-size: 14px;
   }

   .filtre4{
    flex-direction: column;
   }

   .filtre15{
    display: block;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
   }

   .filtre16{
    justify-content: space-between;
    width: 344px;
   }

   .filtre44{
    padding: 0px;
   }

   .mobfil{
    padding-left: 20px;
   }

   .mobfil1{
    margin-top: 0px;
   }

   .mobfil2{
    margin-right: 0px;
   }

   .activite{
    padding: 30px;
   }

   .num1{
    width: 100%;
    align-items: center;
    padding-bottom: 0px;
   }

   .main-container{
    padding: 0px;
   }

   .hebergements-cards{
    flex-direction: column;
   }

   .hebergements-cards a {
    width:100%
   }

   .populaires-cards{
    flex-direction: column;
   }

   .populaires-cards a {
    width: 100%;
   }
   
   .card .margin-right {
    margin-right: 0px;
   }

    .hebergements-and-populaires .hebergements{
    background-color: white;
   }

   .filtreActivite {
    flex-direction: column;
    align-items: normal;
    padding: 0px;
   }

   .dimcards{
    margin-top: 15px;
   }

   .filtreActivite .border1{
    margin-left: 0px;
   }

   .hebergements-and-populaires{
    flex-direction: column-reverse;
   }
    
   .hebergements-and-populaires section {
    border-radius: 0px;   
    padding: 20px;
   }

   .nav .logo{
    display: flex;
    justify-content: center;
   }

   .bouton-r{
    width: 50px;
    border-radius: 15px;
   }

   .hide1{
    display: none;
   }

   .hide2{
    display: flex;
   }

   html,
   body {
    margin: 0;
    padding: 0;
   }

   .div22{
    padding-top: 15px;
   }

   .nav {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;;
   }

   .d1 h2  {
    width: 345px;
    display: flex;
    justify-content: center;
    font-size: 22px;
    padding-left: 20px;
    padding-right: 20px;
   }

   .d1 p {
    padding-left: 20px;
    padding-right: 20px;
   }

   .bar p{
    width: 335px;
    text-align: left;
   }

   .bar1{
    width: 345px;
   }

   .margin-right {
    margin-right: 0px; 
   }
   
   .nav .navlik a {
    margin: 0px 0px;
    padding-top: 0px;
   }

   .nav .navlik a:hover {
    border-bottom:solid 2px #0065FC;
    border-top:solid 0px #0065FC;
    padding-top:0px;
    margin: 0px 0px;
    }

    .navlik {
    display: flex;
    justify-content: center;
    padding: 0px;
    }

    .barsinfo{
    display: flex;
    justify-content: center;
    align-items: center;
    }

   .barsleft{
    width:196px;
    height:35px;
    display: flex;
    justify-content: center;
    border-bottom:solid 2px #F2F2F2;
    }

    .barsleft:hover{
    width:196px;
    height:35px;
    border-bottom:solid 2px #0065fc;
    }
 
    .barsright{
    width:196px;
    height:35px;
    display: flex;
    justify-content: center;
    border-bottom:solid 2px #F2F2F2;
    }

    .barsright:hover{
    width:196px;
    height:35px;
    border-bottom: solid;
    border-bottom:solid 2px #0065fc
    }
}