/****** General ***********/
* {
    font-family: 'Raleway', sans-serif
}

:root {
    --main-color: #0065FC;
    --main-bg-color: #F2F2F2;
    --filter-bg-color: #DEEBFF;
    --border-filter: #D9D9D9;
    --BoutGeol: #000;
    --card-bg: #FFF;
    --btn-shadow: #00000040;
    --card-shadow: #0000001a
}

img {
    object-fit: cover
}

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

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

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

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

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

.card {
    background-color: #fff;
    border-radius: 20px;
    padding: 5px;
    filter: drop-shadow(0px 3px 15px var(--card-shadow))
}

.card img {
    object-fit: cover
}

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

.euro {
    font-weight: 700
}

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

main {
    display: flex;
    flex-direction: column;
    gap: 35px
}

/* Header / NavBar */
nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.logo {
    display: flex;
    padding: 30px 50px 30px 0;
    flex-direction: column;
    align-items: flex-end;
    width: 61.09px;
    height: 19px
}

.nav-bar {
    display: flex;
    flex-direction: row;
    gap: 68px;
    list-style: none
}

.nav-bar a {
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    border-top: 2px solid transparent;
    padding-top: 14px
}

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

/* Main H1+barre+filtres */
/* main-title */
.main-content {
    display: flex;
    flex-direction: column;
    gap: 35px
}

.main-title {
    display: flex;
    flex-direction: column;
    gap: 8px
}

H1,
.main-title p {
    margin: 0
}

H1 {
    font-size: 22px;
    font-weight: 700
}

.main-title p {
    font-size: 16px;
    font-weight: 400
}

/* Recherche */
.search-bar {
    display: flex;
    flex-direction: row;
    gap: 0;
    height: 50px
}

.search-bar i {
    color: var(--BoutGeol);
    font-size: 1.3em
}

#localisation-btn,
#search-btn {
    display: flex;
    justify-content: center;
    align-items: center
}

#localisation-btn {
    background-color: var(--main-bg-color);
    border: solid 1px var(--main-bg-color);
    border-radius: 15px 0 0 15px;
    width: 50px;
    height: 50px
}

#search-field {
    outline: none;
    border: solid 1px var(--main-bg-color);
    border-left: none;
    border-right: none;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    width: 189px
}

#search-btn {
    background-color: var(--main-color);
    border: solid 1px var(--main-color);
    border-radius: 0 15px 15px 0;
    padding: 15px 16px;
    color: #fff;
    font-size: 18px;
    font-weight: 700
}

#search-btn i {
    display: none
}

/* Filtres */
.filtres-main {
    display: flex;
    flex-direction: row;
    gap: 15px
}

.filtres-main p {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
    margin-top: 13px
}

.filtres-main a {
    font-size: 17px;
    font-weight: 700;
    display: flex;
    height: 46px;
    padding: 0 19px;
    align-items: center;
    gap: 10px;
    border-radius: 25px;
    border: 2px solid var(--border-filter)
}

.filter-btn {
    display: flex;
    gap: 15px
}

.fa-fire,
.fa-heart,
.fa-person {
    font-size: 22px
}

.fa-money-bill-wave {
    font-size: 19px
}

.fa-person {
    margin-right: 3px
}

.filtres-main a:hover {
    background-color: var(--filter-bg-color)
}


/* info  */
.info {
    font-size: 16px;
    font-weight: 400;
    display: flex;
    align-items: center;
    margin: 0
}

.info i {
    border: solid 1px var(--border-filter);
    border-radius: 22px;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .7em
}

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

.hebergements-and-populaires section {
    background-color: var(--main-bg-color);
    border-radius: 20px;
    padding: 30px 30px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 65%
}

.hebergements-and-populaires h2 {
    font-size: 22px;
    margin: 0
}

.hebergements-and-populaires .populaires {
    padding-bottom: 30px;
    width: 35%
}

/****** Hebergements ***********/
.hebergements {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, 1fr)
}

.hebergements .card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: #fff;
    border-radius: 20px;
    padding: 5px;
    filter: drop-shadow(0px 3px 15px var(--card-shadow));
    height: 197px
}

.hebergements .card img {
    border-radius: 20px 20px 0 0;
    width: 100%;
    height: 115px
}

.show-more {
    font-weight: 700;
    font-size: 18px;
    margin-top: 0
}

.hebergements .card-content {
    display: flex;
    padding: 0 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch
}

.hebergements .card-title {
    font-size: clamp(13px, 1.11vw, 16px);
}

.hebergements .card-title,
.hebergements .card-subtitle {
    margin: 0
}

.hebergements .card-subtitle {
    font-size: clamp(12px, 1.11vw, 14px);
}

.hebergements .card-rating {
    font-size: 17px;
    display: flex;
    flex-direction: row;
    gap: 2.38px;
    justify-content: center
}

.hebergements .fa-xs {
    line-height: 1.1em
}

/****** Populaires ***********/
.populaires {
    width: 32%
}

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

.populaires-cards {
    display: flex;
    flex-direction: column;
    gap: 30px
}

.populaires-title .fa-chart-line {
    font-size: 18px;
    margin-top: 0;
    line-height: 1.4em
}

.populaires-cards .card {
    display: flex
}

.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: 5px
}

.populaires-cards .card-subtitle {
    margin: 0;
    font-size: 14px
}

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

.populaires-cards .card-rating {
    display: flex;
    flex-direction: row;
    gap: 2px;
    font-size: 16px
}

.populaires-cards .fa-xs {
    line-height: 1em;
    letter-spacing: -2px
}

/* Activité */
.section-activite-container {
    padding-left: 30px
}

.section-activite-container h2 {
    font-size: 22px;
    margin-bottom: 34px;
    margin-top: 29px
}

.activite-container {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(4, 1fr)
        /* flex-wrap: wrap; */
}

.card-activite-container {
    box-shadow: 0 3px 15px 0 var(--card-shadow);
    border-radius: 20px;
    width: 100%
}

.card-activite-container img {
    height: 380px;
    width: 100%;
    border-radius: 20px 20px 0 0
}

.card-activite-container h3 {
    padding-left: 19px;
    font-weight: 700;
    font-size: clamp(12px, 1.11vw, 16px);
    /* font-size: 1.11vw; */
    margin-top: 18px;
    padding-bottom: 20px
}

/* Footer */
footer {
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
    margin-top: 17px;
    background-color: var(--main-bg-color)
}

footer .footer-link {
    display: flex;
    flex-direction: column;
    padding: 20px;
    height: 143px;
    width: 100%
}

footer .footer-link h3 {
    margin: 0;
    font-size: 18px
}

.footer-ul {
    list-style: none;
    padding: 0
}

.footer-li {
    margin-bottom: 15px;
    font-size: 16px
}

footer div {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 0
}

/* Le code ci-dessous correspond à la version responsive uniquement */
/****** Media queries ***********/
/* Medium devices (tablets, less/equal than 1024px) */
@media (max-width: 1024px) {
    .hebergements-and-populaires {
        flex-direction: column
    }

    .hebergements-and-populaires section {
        width: 100%
    }

    .hebergements {
        width: 100%
    }

    .hebergements .card {
        width: auto;
        height: 197px
    }

    .hebergements .card img {
        width: 100%;
        height: 124px
    }

    .show-more {
        margin-bottom: 30px
    }

    .populaires {
        width: 100%
    }

    .hebergements-and-populaires .populaires {
        width: 100%
    }

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

    .card-activite-container {
        height: 270px;
        width: 100%
    }

    .card-activite-container img {
        height: 200px;
        width: 100%
    }

    .card-activite-container h3 {
        font-size: 16px;
    }

    .filtres-main {
        display: block
    }

    .filtres-main p {
        margin-bottom: 20px;
        margin-top: 0
    }

    footer .footer-link {
        width: 100%
    }

    footer div {
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: row;
        gap: 30px
    }
}

/* Small devices (phones, less than 768px) */
@media (max-width: 767.98px) {
    .main-container {
        padding: 0
    }

    /* Header */
    header {
        height: 113px
    }

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

    .logo {
        padding: 30px
    }

    .nav-bar {
        gap: 0;
        padding: 0;
        justify-content: space-around;
        align-items: flex-start;
        width: 100%;
        margin: 0 0 4px
    }

    .nav-bar a:hover {
        border-top: 2px solid transparent
    }

    .mobile-nav-bar {
        width: 100%;
        height: 36px;
        text-align: center;
        border-top: 0 solid transparent;
        border-bottom: 2px solid transparent
    }

    .mobile-nav-bar:hover {
        color: var(--main-color);
        border-top: 0 solid transparent;
        border-bottom: 2px solid var(--main-color)
    }

    .main-content {
        padding: 2px 20px 0
    }

    .info i {
        border-radius: 24px;
        height: 24px;
        width: 31px
    }

    /* Barre Recherche */
    #search-field {
        width: 100%
    }

    #search-btn {
        border-radius: 15px;
        box-shadow: 0 4px 4px 0 var(--btn-shadow)
    }

    .mobile-search-btn {
        display: none
    }

    #search-btn i {
        display: block;
        color: #fff;
        font-size: 17px
    }

    #localisation-btn {
        font-size: 14px;
        padding: 0 20px
    }

    /* Filtres */
    .filtres-main {
        display: flex;
        flex-direction: column;
        gap: 20px
    }

    .filtres-main p {
        margin: 0
    }

    .filtres-main a {
        padding: 0
    }

    .filter-btn {
        display: grid;
        grid-template-columns: auto auto;
        gap: 10px;
        row-gap: 20px
    }

    .filter-btn a {
        /*  width: 50%; */
        font-size: 14px;
        justify-content: center
    }

    /* Populaires */
    .hebergements-and-populaires {
        gap: 15px
    }

    .hebergements-and-populaires .populaires {
        padding: 30px 20px;
        background-color: var(--main-bg-color);
        gap: 15px
    }

    .populaires-cards {
        flex-direction: column;
        gap: 15px
    }

    .populaires-cards a {
        width: 100%
    }

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

    /* Hebergement */
    .hebergements {
        display: flex;
        flex-direction: column;
        gap: 15px
    }

    .mobile-hebergements {
        order: 2
    }

    .hebergements-and-populaires section {
        border-radius: 0;
        padding: 20px 20px 0;
        background-color: #fff;
        gap: 15px
    }

    .show-more {
        margin-bottom: 20px
    }

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

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

    .hebergements .card img {
        width: 100%;
        height: 114px
    }

    /* Activité */
    .activite-container {
        gap: 15px;
        grid-template-columns: repeat(1, 1fr)
    }

    .section-activite-container {
        padding: 30px 30px 35px
    }

    .section-activite-container h2 {
        margin: 0 0 33px
    }

    .card-activite-container {
        height: 200px;
        width: 100%
    }

    .card-activite-container img {
        height: 141px
    }

    /* Footer */
    footer {
        background-color: var(--main-bg-color);
        margin-top: 0
    }

    footer div {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 30px;
        gap: 50px
    }

    footer .footer-link {
        padding: 0;
        height: auto;
        width: auto;
        gap: 15px;
    }

    footer ul {
        display: flex;
        flex-direction: column;
        gap: 15px
    }

    .footer-li {
        margin-bottom: 0;
        font-size: 16px
    }

    .footer-ul {
        margin-bottom: 0
    }
}