@font-face
    {
	font-family: 'Raleway-Bold';
		src: url('./Raleway/static/Raleway-Bold.ttf') format('truetype');
    }
@font-face
    {
    font-family: 'Raleway-ExtraBold';
		src: url('./Raleway/static/Raleway-ExtraBold.ttf') format('truetype');
    }
@font-face
    {
    font-family: 'Raleway-Light';
		src: url('./Raleway/static/Raleway-Light.ttf') format('truetype');
    }
@font-face
    {
    font-family: 'Raleway-Regular';
		src: url('./Raleway/static/Raleway-Regular.ttf') format('truetype');
    }
@font-face
    {
    font-family: 'Raleway-SemiBold';
		src: url('./Raleway/static/Raleway-SemiBold.ttf') format('truetype');
    }

.a_nav
    {
        font-family: 'Raleway-Regular', arial;
    }

h3, h4
    {
        font-family: 'Raleway-Bold', arial;
    }

.p_filtres1, .p_hebergements, .aNavBold
    {
        font-family: 'Raleway-Bold', arial!important;
    }
p, .p_filtres2
    {
        font-family: 'Raleway-Light', arial!important;
    }
.boutton_filtre, .aNavBold, .boutton_recherche, .span_€
    {
        font-family: 'Raleway-SemiBold', arial!important;
    }

/*                     ---                     */

body
    {
        margin: 0;
    }

h2
    {
        margin: 0;
        font-family: 'Raleway-Bold', arial;
    }

h3
    {
        font-size: 1.1em;
    }

h4
    {
        margin: 0;
    }
.navHeader
    {
        display: flex;
    }
.imgNav
    {
        height: 60px;
        margin-right: 40%;
        padding-top: 20px;
        margin-left: 3%;
    }
.a_nav2, .a_nav3
    {
        width: 15%;
        text-align: center;
        padding-top: 43px;
    }
.a_nav1
    {
        width: 15%;
        text-align: center;
        padding-top: 43px;
    }
.a-nav, .aNavBold
    {
        text-decoration: none;
    }

.aNavBold
    {
        color: #0065FC;
    }

.liNav
    {
        width: 33%;
        text-align: center;
        padding-top: 8%;
        border-top: 2.5px solid white;
        font-size: 0.9em;
    }

.liNav1
    {
        width: 33%;
        text-align: center;
        padding-top: 8%;
        font-size: 0.9em;
    }

.aNav2, .a_nav1
    {
        color: black;
    }

.sousHeader
    {
        margin-top: 50px;
        padding-left: 3%;
        padding-right: 3%;
    }

.titre_sousheader
    {
        margin-bottom: 2.5%;
    }

.form_recherche
    {
        width: 400px;
        height: 50px;
        margin-bottom: 2.5%;
    }

.icon_recherche
    {
        background: #F2F2F2;
        border-radius: 10px 0 0 10px;
        width: 11%;
        text-align: center;
        padding-top: 4%;
        padding-bottom: 4.1%;
    }
.ville_recherche
    {
        padding-left: 4%;
        font-size: 1.1em;
        border: 1px solid #F2F2F2;
        height: 90%;
        width: 52%;
        margin-left: -1%;
    }

.boutton_recherche
    {
        background: #0059FC;
        font-size: 1.1em;
        border: 2px solid rgb(0 89 252);
        border-radius: 0 10px 10px 0;
        margin-left: -2%;
        width: 31%;
        height: 98%;
        color: white;
    }

.boutton_recherche2
    {
        display: none;
        background: #0059FC;
        font-size: 1.1em;
        border: 2px solid rgb(0 89 252);
        border-radius: 10px 10px 10px 10px;
        margin-left: -2%;
        width: 12%;
        height: 98%;
        color: white;
    }

.icon_recherche2
{
    background: rgb(0 89 252);
}

.ville_recherche::placeholder
    {
        color: black;
        font-family: 'Raleway-SemiBold', arial;
    }

/* ---------- Filtres ---------- */

.div_pack_filtres
    {
        display: flex;
        width: -webkit-fill-available;
    }

.filtres
    {
        display: flex;
    }

.div_filtres
    {
        margin-right: 1%;
        margin-bottom: 2%;
        display: flex;
        border: 2px solid #F2F2F2;
        border-radius: 50px;
    }

.div_filtres:hover
{
    transform: scale(1.1);
}
.p_filtres1
    {
        display: flex;
        margin-right: 2%;
        font-family: 'Raleway-ExtraLight', arial;
    }

.p_filtres2
    {
        margin-bottom: 2%;
        display: flex;
        align-items: center;
        font-family: 'Raleway-ExtraLightItalic', arial;
    }

.icon_filtres
    {
        color: #0059fc;
    }

.span_filtre1, .span_filtre2, .span_filtre3, .span_filtre4
    {
        display: flex;
        background-color: #c3dcfb;
        width: 3em;
        height: 3em;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        transform: scale(1.08);
    }

.boutton_filtre1, .boutton_filtre2, .boutton_filtre3, .boutton_filtre4
    {
        border: none;
        background-color: #ffffff00;
        font-size: 1.2em;
        margin-right: 10px;
        margin-left: 5px;
    }

.icon_p_filtres
    {
        display: flex!important;
        justify-content: center;
        align-items: center;
        margin-right: 2%;
        border: 1px solid #F2F2F2;
        border-radius: 100%;
        width: 1.5em;
        height: 1.5em;
        color: #0059fc;
    }

/* ---------- Hébergements ---------- */

.a_block_href
    {
        list-style-type: none;
        text-decoration: none;
        color: black;
    }

.a_block_href_Heb
    {
        width: 28.90%;
    }

.a_block_href_Heb1, .a_block_href_Heb2, .a_block_href_Heb4, .a_block_href_Heb5
    {
        margin-right: 6%;
        margin-bottom: 6%;
    }

.divHebergements
    {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 4%;
    }

.Hebergements
    {
        width: auto;
        background-color: white;
        padding: 5px;
        border-radius: 1.25em;
        height: 12em;
        box-shadow: 1px 1px 10px rgb(208, 208, 208);
    }

.img_heb
    {
        width: 100%;
        height: 7em;
        border-radius: 1em 1em 0 0;
        object-fit: cover;
    }

#sectionHebergements
    {
        margin-left: 3%;
        margin-right: 3%;
        display: flex;
    }

.allHebergements
    {
        width: 67%;
        background-color: #F2F2F2;
        border-radius: 20px;
    }

.Heb3, .Heb6
    {
        margin-bottom: 6%;
    }

.titleHebergements
    {
        margin-left: 4%;
        margin-top: 5%;
    }

.p_hebergements
    {
        width: 50%;
        font-weight: bold;
        font-family: 'Raleway-ExtraLight', arial;
    }

.p_div_desc
    {
        font-size: 0.9em;
    }

.divStarHeb
    {
        margin-top: 5px!important;
    }

/* ---------- Hébergements Populaires ---------- */

.allPopulaire
    {
        width: 30%;
        background: #F2F2F2;
        border-radius: 20px;
        margin-left: 3%;
    }

.titre_Populaire
    {
        display: flex;
        margin: 8%;
        margin-top: 12%;
        justify-content: space-between;
    }

.fa-chart-line
    {
        margin-top: auto;
        margin-bottom: auto;
    }

.Heb_populaire
    {
        display: flex;
        background-color: white;
        padding: 5px;
        border-radius: 1.25em;
        margin-bottom: 8%;
        height: 9em;
        box-shadow: 1px 1px 10px rgb(208, 208, 208);
    }

.div_img_pop
    {
        width: 40%;
    }

.div_img_pop_2
    {
        width: 60%;
    }

.img_pop
    {
        border-radius: 1em 0em 0em 1em;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.div_descriptif
    {
        margin-left: 6%;
        margin-right: 6%;
        display: flex;
        flex-direction: column;
    }

.div_descriptif h3
    {
        margin-top: 3%;
        font-size: 0.9em;
        margin-bottom: 0;
    }

.div_descriptif p
    {
        margin-top: 3%;
        margin-bottom: 5%;
    }

.divStar_pop
    {
        margin-top: 36%;
    }

.div_hebergements
    {
        margin: 8%;
    }

.divStar
    {
        font-size: 0.55em;
        margin-top: auto;
        margin-bottom: 10px;
    }

/* ---------- 3 Etoiles ----------- */

.star4_1, .star4_2, .star4_3
    {
        color: #0065FC;
    }

/* ---------- 4 Etoiles ----------- */

.star1_1, .star1_2, .star1_3, .star1_4
    {
        color: #0065FC;
    }
.star3_1, .star3_2, .star3_3, .star3_4
    {
        color: #0065FC;
    }
.star5_1, .star5_2, .star5_3, .star5_4
    {
        color: #0065FC;
    }
.star8_1, .star8_2, .star8_3, .star8_4
    {
        color: #0065FC;
    }
.star9_1, .star9_2, .star9_3, .star9_4
    {
        color: #0065FC;
    }

/* ---------- 5 Etoiles ----------- */

.star2_1, .star2_2, .star2_3, .star2_4, .star2_5
    {
        color: #0065FC;
    }
.star6_1, .star6_2, .star6_3, .star6_4, .star6_5
    {
        color: #0065FC;
    }
.star7_1, .star7_2, .star7_3, .star7_4, .star7_5
    {
        color: #0065FC;
    }

/* ---------- Etoiles vides ----------- */

.star1_5, .star3_5, .star4_4, .star4_5, .star5_5, .star8_5, .star9_5
    {
        color:#8080803d;
    }

/* ---------- Activités ----------- */

#section_activités
    {
        margin: 5% 3% 5% 3%;
    }

.acti_h2
    {
        margin-bottom: 3%;
    }

.allActivités
    {
        display: flex;
        height: 28em;
    }

.Activités
    {
        background-color: white;
        border-radius: 20px;
    }

.div_titre_act
    {
        margin-top: 7%;
        margin-left: 7.5%;
    }

.a_block_href_act1, .a_block_href_act4, .db_acti1, .db_acti2
    {
        width: 22.75%;
        margin-right: 3%;
    }

.acti_1, .acti_4
    {
        width: auto;
    }

.db_acti2
    {
        margin: 0;
    }

.db_acti1, .db_acti2, .acti_1, .acti_4
    {
        height: 450px;
    }

.div_img_act1, .div_img_act4
    {
        height: 87%;
    }


.div_img_act5, .div_img_act6
    {
        height: 72.5%;
    }

.img_act1, .img_act2, .img_act3, .img_act4, .img_act5, .img_act6
    {
        height: 100%;
        object-fit: cover;
    }

.acti_1, .acti_2, .acti_3, .acti_4, .acti_5, .acti_6
    {
        box-shadow: 1px 1px 10px rgb(208, 208, 208);
    }

.acti_2
    {
        height: 15.50em;
        margin-bottom: 2em;
    }

.div_img_act2
    {
        height: 79%;
    }

.acti_3
    {
        height: 10.50em;
    }

.div_img_act3
    {
        height: 65%;
    }

.acti_5
    {
        height: 13em;
        margin-bottom: 2em;
    }

.acti_6
    {
        height: 13em;
    }

.img_act
    {
        width: 100%;
        border-radius: 1em 1em 0 0;
    }

/* ---------- FOOTER ---------- */

footer
    {
        display: flex;
        background-color: #F2F2F2;
        width: 100%;
    }

.div_footer
    {
        width: 33%;
        margin-bottom: 4%;
        margin-top: 1.5%;
    }

.div_footer1
    {
        margin-left: 3%;
    }

.h3_footer
    {
        font-size: 1em;
    }

.p_footer
    {
        font-size: 0.9em;
        margin-bottom: 5%;
        font-family: 'Raleway-ExtraLight', arial;
    }

@media screen and (max-width: 420px)
{
    .imgNav
    {
        width: 100px;
        margin-right: auto;
        height: 60px;
        order: -2;
        margin-left: 4%;
        margin-top: 20px;
    }
    .form_recherche
    {
        width: auto;
    }
    .white_space
    {
        white-space: nowrap;
    }
}
@media screen and (min-width: 0px) and (max-width: 768px)
{
    .filtres
    {
        display: block;
    }
    .div_pack_filtres
    {
        display: flex;
        flex-wrap: wrap;
    }
    .titre_Populaire
    {
        margin-top: 9%;
    }
    #sectionHebergements
    {
        flex-direction: column-reverse;
        margin: 0;
    }
    .allPopulaire
    {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }
    .div_img_pop_2, .div_img_pop
    {
        width: 60%;
    }
    .allHebergements
    {
        width: 100%;
        border-radius: 0;
        background: none;
    }
    .divHebergements
    {
        flex-direction: column;
    }
    .a_block_href_Heb
    {
        width: 100%;
    }
    .Heb_populaire
    {
        height: 150px;
    }
    .Hebergements
    {
        width: auto;
    }
    .Heb1, .Heb2, .Heb3, .Heb4, .Heb5, .Heb6
    {
        margin-right: 0;
        height: 200px;
    }
    .img_heb
    {
        height: 130px;
    }
    .div_descriptif
    {
        width: 88%;
        display: flex;
        flex-direction: column;
    }
    .div_descriptif h3
    {
        font-size: 1em;
        margin-top: 5px;
    }
    .div_descriptif p
    {
        margin-top: 5px;
        margin-bottom: 0;
    }
    .allActivités
    {
        height: 100%;
        flex-direction: column;
    }
    .a_block_href_act1, .a_block_href_act4, .db_acti1, .db_acti2
    {
        width: 100%;
    }
    .acti_1, .db_acti1, .acti_4, .db_acti2
    {
        width: 100%;
        margin-right: 0;
    }
    .acti_1, .acti_2, .acti_3, .acti_4, .acti_5, .acti_6
    {
        margin-bottom: 4%;
        height: 200px;
    }
    .db_acti1
    {
        height: auto;
    }
    .div_img_act
    {
        height: 75%;
    }
    .div_titre_act
    {
        margin-top: 15px;
    }
    footer
    {
        flex-direction: column;
    }
    .div_footer
    {
        width: auto;
        margin: 0 4% 0 4%;
    }
    .liNav_none
    {
        display: none;
    }
    .liNav2_none
    {
        width: 50%;
        text-align: center;
        border-bottom: 4px solid #0065FC;
        padding: 10px;
    }
    .liNav3_none
    {
        width: 50%;
        text-align: center;
        border-bottom: 4px solid #F2F2F2;
        padding: 10px;
    }
    .a_Nav2, .a_Nav
    {
        text-decoration: none;
        color: #0065FC;
        font-family: 'Raleway-Regular', arial!important;
    }
    .form_recherche
    {
        display: flex;
    }
    .boutton_recherche
    {
        display: none;
    }
    .boutton_recherche2
    {
        display: block;
    }
    #section_activités
    {
        margin: 15% 3% 5% 3%;
    }

    /*  NAV */

    .navHeader
    {
        display: flex;
        flex-grow: 1;
        flex-wrap: wrap;
    }
    .imgNav
    {
        margin-right: auto;
        height: 60px;
        order: -2;
        margin-left: 4%;
        margin-top: 20px;
    }
    .a_nav
    {
        width: 50%;
    }
    .a_nav1
    {
        text-align: center;
        padding-bottom: 10px;
        border-bottom: 3px solid #F2F2F2;
        border-top: none;
    }
    .a_nav2
    {
        text-align: center;
        padding-bottom: 10px;
        border-bottom: 3px solid #F2F2F2;
    }
    .a_nav3
    {
        order: -1;
        text-align: end;
        margin-right: 4%;
        margin-top: 30px;
    }
    .a-nav:hover
    {
        border-bottom: 3px solid #0065FC;
        color: #0065FC;
    }
}

@media screen and (min-width: 769px) and (max-width: 992px)
{
    .filtres
    {
        display: block;
    }
    .div_pack_filtres
    {
        display: flex;
        flex-wrap: wrap;
    }
    .a_block_href_Heb
    {
        width: 47.5%;
    }
    .a_block_href_Heb1, .a_block_href_Heb3, .a_block_href_Heb5
    {
        margin-right: 5%;
        margin-bottom: 4%;
    }
    .Hebergements
    {
        width: auto;
    }
    .a_block_href_Heb2, .a_block_href_Heb4
    {
        margin-right: 0;
    }
    .a_block_href_act1, .a_block_href_act4, .db_acti1, .db_acti2
    {
        width: 100%;
    }
    .h3_div1_desc
    {
        font-size: 0.89em!important;
    }
    .Heb_populaire
    {
        height: 11.5em;
    }
    .div_img_pop
    {
        width: 60%;
    }
    .div_img_pop_2
    {
        width: 90%;
    }
}

@media screen and (min-width: 993px) and (max-width: 1282px)
{
    .margin1
    {
        margin-bottom: 1%!important;
    }
}

@media screen and (min-width: 769px)
{
    .a-nav:hover
    {
        box-shadow: 0 2px 0 inset;
        color: #0065FC;
    }
}

@media screen and (min-width: 1600px)
{
    body
    {
        margin: auto;
        width: 60%;
    }
}