/****** General ***********/
* {
    font-family: 'Raleway', sans-serif;
}
a:-webkit-any-link{
        text-decoration:none ;
        color:currentColor}
       
:root {
    --main-color: #0065FC;
    --main-bg-color: #F2F2F2;
    --filter-bg-color: #DEEBFF;
}

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

.fa-black{
    color:black;
}

.fa-white{
    color:white;
}

body {
    width: 100%;
    display: flex;
    justify-content: center;
    margin:0px;
    overflow-x: hidden;
}

.main-container {
    width: 100%;
    max-width: 1440px;
    padding: 0 20px;
    box-sizing: border-box;
    margin:0px;
}

.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)
}

a:link{
    text-decoration: none;
}

 a:visited{
    color: var(--main-color);
}

/****** Header *******/

header{
    width: 95%;
    height: 79px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2px 20px 30px 20px;
    gap: 10px;  
    margin-top: 0px;
}

.logo{
    padding-top: 30px;
    width: 50%;
}

nav{
    list-style-type: none;
    display: flex;
    flex-direction: row;
    gap: 68px;
    margin-top:0px;
}

.liens{
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    border-top: 2px solid white;
}
    

.liens:hover{
    color:var(--main-color);
    border-top: 2px solid var(--main-color);
}

/****** Information ******/
.info{
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 35px;
    margin-top: 35px;
    margin-bottom: 35px;
}

.search-bar{
    display: flex;
    flex-direction: row;
    align-items:flex-start;
    padding: 0px;
    max-width: 320px;
    height: 49px;
    background: #FFFFFF;
    border: 1px solid var(--main-bg-color);
    border-radius: 20px;
}

.location{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 49px;
    background-color: var(--main-bg-color);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

form{
    display: flex;
    flex-direction: row;
}

.search{
    padding-left: 10px;
    width: 162px;
    height: 47px;
    font-size: 18px;
    line-height: 21px;
    text-align: center;
    color: black;
    border:none;
    font-weight: 700;
 
}

.submit{
    padding: 15px;
    padding-left: 0;
    gap: 10px;
    height: 49px;   
    background: #0065FC;
    border: 1px solid #0065FC;
    border-radius: 0px 15px 15px 0px;
    font-weight: 700;
    font-size: 18px;
    line-height: 21px;
    text-align: center;
    color: #FFFFFF;
    display: flex;
    flex-direction: row;
}

.fa-magnifying-glass{
    visibility: hidden;
}

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

/*filtre*/
.filtre{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:10px;
}

.filtre-buttons{
    display:flex;
    flex-direction:row;
    align-items: center;
    padding: 0px;
    gap: 15px;
    height: 50px;
}

button{
    box-sizing: border-box;
    background-color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    display:inline-block; 
    padding: 10px 19px;
    gap: 10px; 
    border: 2px solid #D9D9D9;
    border-radius: 25px;
    font-weight: 700;
    font-size: 17px;
    line-height: 20px;
}

button:hover{
    background-color: var(--filter-bg-color);
}

.info-bubble{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.fa-border{
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    border:1px;
    border-radius: 20px;
    border-color:lightgrey;
    border-style: solid;
}

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

.card-link{
    text-decoration: none;
}
.card-link:visited{
    color: #000000;
}
/****** Hebergements ***********/
.hebergements {
    width: 65%;
    display:flex;
    flex-direction: column;
    justify-content:flex-start ;
    background-color: var(--main-bg-color);
    border-radius: 20px;
    padding: 30px;
    box-sizing: border-box;
}

.hebergements-title{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.hebergements-cards{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.hebergements-cards .card{
    width: 30%;
    min-width: 180px;
    height:207px ;
    display: flex;
    flex-direction: column;
    margin-top: 25px;
}

.hebergements-cards img{
    width: 100%;
    height: 124px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    object-fit: cover;
}
.hebergements-cards .card-content{
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: flex-start;
    padding-left: 15px;
}
.hebergements-cards .card-title{
    margin-bottom: 5px;
}

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

.herbergementt-cards .card-rating{
    margin-bottom: 5px;
}

.hebergements-footer{
    margin-left: 15px;
    margin-top: 25px;
    width: 65%;
    height: 21px;
    font-weight: 700;
    font-size: 18px;
    line-height: 21px;   
    color: #000000;
}
.hebergements-footer:visited{
    color: #000000;
}
/****** Populaires ***********/
.populaires {
    width: 32%;
    background-color: var(--main-bg-color);
    border-radius: 20px;
    padding: 30px;
    box-sizing: border-box;
}

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

.card-link-populaires{
    text-decoration: none;
    display: flex;
    flex-direction:row;
    width:100%;
}

.card-link-populaires:visited{
    color: #000000;
}

.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;
    box-sizing: border-box;
    justify-content: space-between;
}

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

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

.populaires-cards .card-rating {
    margin-bottom: 5px;
}

/****** Activités ***********/
.activities{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
    gap: 30px;
    width: 95%;
}

.card-link-activities{
    text-decoration: none;
    width: 22%;
}

.activities-cards{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    width: 100%;
}

.activities-cards .card{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding:0px;
    filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
    border-radius: 20px;
}

.activities-cards img{
    height: 380px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    object-fit: cover;
}

.activities-cards .card-content{
    padding: 20px;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
}
/****** Footer ***********/
footer{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 98%;
    height: 163px;
    background: #F2F2F2;

}
footer a:visited{
    color: #000000;
}

footer h2{
    font-weight: 700;
    font-size: 18px;
    line-height: 21px;}

footer section{
    width: 446.67px;
    height: 163px;
}

ul.no-style {
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
}

li{
    padding-top: 0px;
    padding-bottom:10px;
}

  li a{
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #000000 ;
   
}

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

/****** Media queries ***********/
/* Medium devices (tablets, less/equal than 1024px) */
@media (max-width: 1024px) {    
    .main-container{
        max-width: 1024px;
        padding-left: 25px;
    }

    nav{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: flex-end;
        padding: 0px;
        margin-right: 50px;
        gap: 68px
    }

    .filtre{
        flex-direction: column;
        align-items: flex-start;
    }

    .hebergements-and-populaires {
        width: 100%;
        flex-direction: column;
        gap:35px;
    }

    .hebergements{
        width: 100%;
    }

    .populaires{
        width: 100%;
    }

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

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

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

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

    .activities-cards .card{
    height: 270px;
    }

    .activities-cards img{
        height: 200px;
    }

    .activities-cards .card-content{
        display: block;
        position: absolute;
        left: 20px;
        top: 235px;
        padding: 0;
        transform: translate(0%, -50%);
    }
}

/* Small devices (phones, less than 768px) */
@media (max-width: 767.98px) {
    .main-container{
       max-width:767px ;
        display:flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 0px;
        padding-right: 0px;
    }

    header{
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
    }

    .logo{
        padding-left:30px;
    }

    nav{
        width:100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        padding: 0px;
        gap:0px;
    }

    .liens{
        width:50%;
        display: flex;
        justify-content: center;
    }

    .liens:hover{
        color:var(--main-color);
     border-top:none;
     border-bottom: 2px solid var(--main-color);
    }

    section{
        width:100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    h2{
        margin-left: 35px;
    }

    p{
        margin-left: 35px;
    }

    .search-bar{
        width: 100%;
        margin-left: -10px;
    }

    .search{
        width:80%;
        padding-left:0px;
    }

    .submit{
        width: 20%;
        max-width: 50px;
        border-radius: 20px;
    }

    .fa-magnifying-glass{
        visibility: visible;
        margin-left: 15px;
        margin-right: 15px;
    }

    button span{
        visibility: hidden;
    }

    .info{
        margin-left: 35px;
    }

    .filtre-buttons{
        display: flex;
        flex-wrap: wrap;
        margin-left:-15px;
    }

    .filtre-buttons button{
        font-size: revert;
        min-width: 139px;
        text-align: left;
    }

    .info-bubble{
        margin-top: 20px;
    }
    .hebergements-and-populaires{
        flex-direction: column-reverse;
    }
  
    .populaires{
        background-color: var(--main-bg-color);
        border-radius: 0px;
    }

    .populaires-cards{
        width:95%;
        display: flex;
        flex-direction: column;
    }

    .populaires-cards .card{
        width:100%;
    }

    .hebergements{
        width: 100%;
        background-color: white;
    }
    
    .hebergements-cards .card{
        width: 95%;
        align-self: center;
    }

    .activities-cards{
        flex-direction: column;
    }
    .card-link-activities{
        width:90%
    }
    .activities-cards .card{ 
        margin: 10px;
        margin-left:-20px;
        align-self: center;
    }

    footer {
        width: 100%;
        height:fit-content;
    }

    footer section{
        width:75%;
        align-self: center;
    }
}