@media all and (min-width:768px) and (max-width:991px)
{
    
    header{
        
        padding-left: 30px;
    }
    
    nav li{
        margin: 10px;
        padding-right: 10px;
    }
    
    h2{
        font-size: 20px;
        padding-left: 30px;
    }
    h2+ p{
        padding-left: 30px;
    }
    #formulaire{
        padding-left: 30px;
    }
    .element2 input  {
        width: 180px;
        border: 0.1px solid rgb(223, 207, 207);
        padding-left: 20px;
    }
    #filtre {
        width: 750px;
        padding-left: 30px;
    }
    .touslesfiltres{
        width: 650px;
        padding: 5px;
    }
    
    #i500logement{
        padding-left: 30px;
 }
    #hebergement{
        
        padding-left: 10px;
    }
    .touslescards{
        height: 400px;
        width: auto;
        padding-right: 10px;
        margin-left: 10px;
    }
    
     .les_populaires{
        margin-right: 15px;
        margin-left: 0px;
    }
    
    .card_image_les_populaires{
        width: 100px;
        height: 110px;
    }
    .card_image_les_populaires img{
        width: 100px;
        height: 100%;
        border-radius: 10px 0px 0px 10px;
    }
    .card_body_les_populaires{
        padding-left: 20px;
        margin-right: 20px;
        font-size: 10px;
        box-sizing: border-box;
        height: auto;
    }

    .touslesactivites{
        height: 450px;
        width: 100%;
        padding: 10px;
        margin-bottom: 0px;
    }
    #les_activites h2{
        padding-left: 10px;
        text-align: left;
    }
    .card_vieux_port{
        width: 290px;
        overflow:hidden;
        border-radius: 10px/10px;
        box-shadow: 5px 10px 20px #F2F2F2;
        margin-bottom: 20px;
    }
    .card_image_vieuxport{
        height: 140px;
    
    }
    .card_image_vieuxport img{
        height: 100%;
        width: 290px;
    }
    .card_vieux_port a:hover{
        color: cornflowerblue;
        filter: grayscale(1);
    }

    .card_pomegues{
        width: 290px;
        overflow: hidden;
        border-radius: 10px/10px;
        box-shadow: 5px 10px 20px #F2F2F2;
        margin-right: 12px;
    }
    .card_image_pomegues{
        height: 140px;
    }
    .card_image_pomegues img{
        height: 100%;
        width: 290px;
    }
    .card_pomegues a:hover{
        color: cornflowerblue;
        filter: grayscale(1);
    }
    .card_frioul{
        width:290px;
        height: 180px;
        overflow:hidden;
        border-radius: 10px/10px;
        box-shadow: 5px 10px 20px #F2F2F2;
        margin-bottom: 20px;
    }
    .card_image_frioul{
        height: 140px;
    }
    .card_image_frioul img{
        height: 100%;
        width: 290px;
    }
    .card_frioul a:hover{
        color: cornflowerblue;
        filter: grayscale(1);
    }
    .card_calanques{
        width: 290px;
        overflow: hidden;
        font-size: 10px;
        border-radius: 10px/10px;
        box-shadow: 5px 10px 20px #F2F2F2;
        margin-right: 12px;
    }
    .card_image_calanques{
        height: 140px;
    }
    .card_image_calanques img{
        height: 100%;
        width: 290px;
    }
    .card_calanquesa:hover{
        color: cornflowerblue;
        filter: grayscale(1);
    }
    .card_notre_dame{
        width:290px;
        overflow:hidden;
        border-radius: 10px/10px;
        box-shadow: 5px 10px 20px #F2F2F2;
        margin-bottom: 20px;
    }
    .card_image_notre_dame{
        height: 140px;
    }
    .card_image_notre_dame img{
        height: 100%;
        width: 290px;
    }
    .card_notre_dame a:hover{
        color: cornflowerblue;
        filter: grayscale(1);
    }
    .card_longchamp{
        width: 290px;
        height: 175px;
        overflow: hidden;
        border-radius: 10px/10px;
        box-shadow: 5px 10px 20px #F2F2F2;
    }
    .card_image_longchamp{
        height: 140px;
    }
    .card_image_longchamp img{
        height: 100%;
        width: 290px;
    }
    .card_longchamp a:hover{
        color: cornflowerblue;
        filter: grayscale(1);
    }
    
    .piedpage{
        padding-left:20px;
        width: 100%;
        margin:auto;
        background-color: #F2F2F2;
    }
    .apropos{
        margin-right:150px;
        margin-left: 0px;

    }
    .nos_hebergement{
        margin-right:150px;
    }
    .assistance{
        margin-right:0;
    }
    footer a{
        font-size: 12px;
        text-decoration: none;
    }
    .piedpage p{
        padding-right: 10px;
        padding-left: 10px;
    }
    footer a:hover{
        color: cornflowerblue;
    }
    .apropos h2{
        padding-left: 10px;
        text-align: left;
    }
    .assistance h2{
        padding-left: 10px;
    }
    .nos_hebergement h2{
        padding-left: 10px;
    }
}
    
@media screen and (max-device-width:767px) 
{
    #blockpage{
       width: 100%;
       margin: auto;
    }
    header{
        display: flex;
        flex-direction: column; 
        width: 100%;
    }
    
    nav{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 0; 
    }
    nav ul
    {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items:center;
        margin-left:0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }
    nav li {
        margin-left:0 ;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        border-bottom: 1px solid gray;
        padding-bottom: 15px;
        width:100%; 
        margin: auto;
    }
    li {
    text-decoration: none;
    font-size: 40px;
    display:block;
    margin:0;
    width: 100%;
    text-align:center;
    }
    nav a {
        text-decoration: none;
        font-size: 40px;
    }
    nav a:hover{
        padding-top:0;
        border-top: 0px solid cornflowerblue;
        padding-bottom: 0;
        border-bottom: 0px solid cornflowerblue;
    }
    
    .bordure_bleu {
        border-bottom: solid blue;
        color: blue;
        padding-bottom: 15px;
    }
    .bordure_bleu a {
        color: blue;
    }
    nav li:hover{
        border-bottom: 1px solid blue ;
        border-bottom: solid blue;
        color: blue;
        padding-bottom: 15px;
    }
    .logo{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        }
   
    .logo img{
        height: 200px;
        width: 290px;
        margin-left: 80px
    }
    h2{
        font-size: 75px;
        padding-left: 10px;
        text-align: left;
        width: auto;
        margin-left: 10px;
    }
    h2+ p{
        color: grey;
        font-size: 55px;
        text-align: left;
        padding-left: 10px;
        margin-left: 10px;
    }
    #formulaire{
        
        align-items:center;
        width:auto;
        margin-left: 10px;
        padding-left: 10px;
    }
    .element1  i{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 45px;
        padding-right: 45px;
        padding-bottom: 45px;
        padding-top: 45px;
        border: 1px solid black;
        background-color: #f2f2f2f2;
        border-radius: 50px 0px 0px 50px;
        height: 100px;
        width: 90px;
        border: none;
        font-size: 60px;
    }
    .element2 input{
        height: 175px;
        width: 530px;
        border: 0px;
        border: 0.1px solid rgb(223, 207, 207);
        padding-left: 25px;
        font-size: 60px;
    }
   
    .element3 i{
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-left: 45px;
        padding-right: 45px;
        padding-top: 45px;
        padding-bottom: 45px;
        height: 100px;
        width: 100px;
        background-color:#0065FC;
        color: white;
        border: 0px;
        border-radius: 50px/50px;
        font-size: 60px;
     }
    .element3 input{
        display: none;
    }
    #filtre {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: 15px;
        width: auto;
    }
    .touslesfiltres{
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        align-content: space-between;
        height: 550px;
        width: auto;
        margin-left: 0px;
        border-radius: 0px;
        background-color: white;
    }
    .economique{
        border-radius: 80px/80px;
        height: 150px;
        width: 500px;
        padding-right: 10px;
    }
    .famille{
     border-radius: 80px/80px;
     height: 150px;
    width: 370px;
     padding-right: 10px;
    }
    .romantique{
     border-radius: 80px/80px;
     height: 150px;
     width: 480px;
     padding-right: 10px;
    }
    .animaux{
     border-radius: 80px/80px;
     height: 170px;
     width: 620px;
     padding-right: 10px;
 
    }
    #filtre i {
        padding: 50px;
        color: rgb(2, 85, 240);
        background-color: rgb(204, 230, 255);
        border: 0px solid rgb(187, 186, 199);
        border-radius: 80px/80px;
        margin-right: 20px;
        overflow: hidden;
        font-size: 60px;
    }
    .touslesfiltres p{
        font-size: 50px;
    }
    .titrefiltre{
        font-size: 70px;
    }
    #i500logement{
        font-size: 50px;
        width: auto;
        margin-left: 10px;
    }
    #i500logement i {
        margin-right: 20px;
        color:rgb(187, 186, 199);
        padding-right: 25px;
        padding-left: 25px;
        padding-bottom: 15px;
        padding-top: 15px;
        border-radius: 70px/70px;
        font-size: 40px;
     }
    #hebergement{
       
        flex-direction: column-reverse;
        width: 100%;
        margin-left: 0px;
    }
    .touslescard_populaires{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 1300px;
        padding: 0px;
        background-color: #F2F2F2;
    }
    .les_elements{
        display: flex;
        align-items: flex-start;
        padding-right: 50px;
        height: 350px;
        width: 100%; 
    }
    #card_les_populaires{
        border-radius: 0px/0px;
        width: 100%;
        margin:0px;
        padding-left: 36px;
        
    }
    .card_body_les_populaires h3{
        font-size: 45px;
    }
    .icon_euro{
        font-size: 40px;
    }
    .card_les_populaires{
       width:90%;
       height: auto;
       background-color: white;
       box-shadow: 5px 5px 20px #999;
       border-radius: 40px/40px;
   }
   .card_les_populaires a{
    color: black;
    text-decoration: none;      
}
.card_les_populaires a :hover{
    color: cornflowerblue;
    filter: grayscale(1);
}
.card_image_les_populaires {
    width: 400px;
    height: 350px;
}
.card_image_les_populaires img{
    width: 400px;
    height: 100%;
    border-radius: 40px 0px 0px 40px;
}
.card_body_les_populaires{
    padding-left: 40px;
    margin-right: 20px;
    font-size: 40px;
    box-sizing: border-box;
    height: 350px;
    padding-bottom: 10px;
}
   .les_populaires{
    display: flex;
    justify-content: space-around;
    align-items: baseline;
    width: auto;
    }
   .les_populaires i{
       font-size: 80px;
       margin-left: 190px;
       padding-right: 30px;
   }
   .les_populaires h2{
       font-size: 70px;
   }

   #card_hebergement{
    background-color: white;
    border-radius: 0px/0px;
    width: 100%;
    margin: auto;
}
.touslescards{
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    height: 3500px;
}
.afficherplus{
    margin: auto;
    padding-left: 35px;
    padding-top: 20px;
    font-size: 40px;
    
}
.afficherplus a{
    text-decoration: none;
    color: black;
}
.card_hebergement{
    width: 90%;
    margin: auto;
    height: 550px;
    background-color: white;
    box-shadow: 10px 10px 30px #999;
    border-radius: 40px/40px;
    margin-left: 40px;
}

.card_hebergement a{
    color: black;
    text-decoration: none;
}
.card_hebergement :hover{
    color: cornflowerblue;
    filter: grayscale(1);

}
.card_image_hebergement {
    height: 320px;
    position:relative;
    
}
.card_image_hebergement img{
    width: 98%;
    height: 100%;
    border-radius: 40px 40px 0px 0px;
    position: absolute;
    padding: 8px;
}
.card_body_hebergement{
    padding-left: 30px;
    line-height:0px;
    font-size: 40px;
}
.card_body_hebergement i{
    font-size: 25px;
}
#card_hebergement h2 {
    font-size: 55px;
} 
.touslesactivites{
    display: flex;
    flex-direction: column;
    width:100%;
    height:auto;
    padding-bottom: 30px;
}
#les_activites h2{
    padding-left: 55px;
    font-size: 50px;
}
#les_activites h3{
    font-size: 40px;
}
.card_vieux_port{
    width: 90%;
    margin: auto;
    height: 500px;
    overflow:hidden;
    border-radius: 40px/40px;
    box-shadow: 10px 15px 40px #F2F2F2;
    margin-left: 50px;
    margin-bottom: 50px;
}
.card_image_vieuxport{
    height: 350px;
    
}
.card_image_vieuxport img{
    height: 100%;
    width: 100%;
}
.card_pomegues{
    width: 90%;
    height: 500px;
    margin: auto;
    overflow: hidden;
    border-radius: 40px/40px;
    box-shadow: 10px 15px 40px #F2F2F2;
    margin-left: 50px;
    padding-bottom: 30px;
    margin-bottom: 50px;
}
.card_image_pomegues{
    height: 350px;
}
.card_image_pomegues img{
    height: 100%;
    width: 100%;
}
.card_pomegues a:hover{
    color: cornflowerblue;
    filter: grayscale(1);
}
.card_frioul{
    width: 90%;
    height: 500px;
    margin: auto;
    padding-bottom: 30px;
    overflow:hidden;
    border-radius: 40px/40px;
    box-shadow: 10px 15px 40px #F2F2F2;
    margin-left: 50px;
    margin-bottom: 50px;
}
.card_image_frioul{
    height: 350px;
}
.card_image_frioul img{
    height: 100%;
    width: 100%;
}
.card_frioul a:hover{
    color: cornflowerblue;
    filter: grayscale(1);
}
.card_calanques{
    width: 90%;
    height: 500px;
    margin: auto;
    overflow: hidden;
    border-radius: 40px/40px;
    box-shadow: 10px 15px 40px #F2F2F2;
    margin-left: 50px;
    padding-bottom: 30px;
    margin-bottom: 50px;
}
.card_image_calanques{
    height: 350px;
}
.card_image_calanques img{
    height: 100%;
    width: 100%;
}
.card_calanquesa:hover{
    color: cornflowerblue;
    filter: grayscale(1);
}
.card_notre_dame{
    width: 90%;
    height: 500px;
    margin: auto;
    overflow: hidden;
    border-radius: 40px/40px;
    box-shadow: 10px 15px 40px #F2F2F2;
    margin-left: 50px;
    padding-bottom: 30px;
    margin-bottom: 50px;
}
.card_image_notre_dame{
    height: 350px;
}
.card_image_notre_dame img{
    height: 100%;
    width: 100%;
}
.card_notre_dame a:hover{
    color: cornflowerblue;
    filter: grayscale(1);
}
.card_longchamp{
    width: 90%;
    height: 500px;
    margin: auto;
    overflow: hidden;
    border-radius: 40px/40px;
    box-shadow: 10px 15px 40px #F2F2F2;
    margin-left: 50px;
    padding-bottom: 30px;
    margin-bottom: 50px;
}
.card_image_longchamp{
    height: 350px;
}
.card_image_longchamp img{
    height: 100%;
    width: 100%;
}
.card_longchamp a:hover{
    color: cornflowerblue;
    filter: grayscale(1);
}
footer {
   
    width: 100%;
    margin-right: 0px;
    padding-right: 0px;
    margin-top: 50px;
    height: auto;
}
.piedpage{
    background-color: #F2F2F2;
    display: flex;
    flex-direction: column;
    align-content:space-between;
    align-items: flex-start;
    padding-left: 50px;
    height: auto; 
    width: 100%;
    margin-right: 0;
    padding-right: 0;
}
.piedpage p {
    line-height: 80px;
    margin:0;
}
footer h2{
    font-size: 50px;
}

footer a{
    text-decoration: none;
    font-size: 35px;
}
footer a:hover{
    color: cornflowerblue;
}
footer ul li{
    padding: 0;
    padding-top: 35px;
}

}