@media screen and (max-width: 768px) {
    body{
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    header {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        height: 140px;
        width: 100%;
    }

    main{
        padding-left: 0;
        width: 100%;
    }
    nav{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        flex-direction: row;
        align-content: space-around;
        align-items: stretch;
        width: 100%;
        height: 140px;
    }

    #logobooki{
        margin-left: 10px;
    }
    #navigation{
        list-style: none;
        display: flex;
        flex-direction: row;
        height: 30px;
        width: 100%;
        justify-content: space-around;
        padding-bottom: 20px;
        padding-left: 0;
        padding-top: 0;
    }
    #navigation1:hover,#navigation2:hover,li:hover{
        border-bottom: 1px solid #0065FC;
        cursor: pointer;
        border-top: 0;
    }
    
    #infoslieux{
        margin-top: 0;
        margin-bottom: 45px;
    }

    #search{
        padding: 0;
        margin-left: 4%;
    }
    #searchmarseille{
        display: flex;
        justify-content: center;

    }
     #buttonsearch{
        display: none;
    }

    #marseille{
        font-size: large;
        font-weight: bold;
        border-right-color: transparent;
    }

    #iconsearch{
        color: white;
        background-color: #0065FC ;
        display: block;
        width: 47px;
        height: 50px;
        border: #f2f2f2;
        cursor: pointer;
        border-radius: 12px;
        align-items: center;
        display: flex;
        margin-left: 0px;
        flex-direction: row;
        justify-content: space-around;
    }

    #titrefiltres {
        width: 90%;
    }

    #ecobutton,#familialbutton{
        display: flex;
        flex-direction: row;
        margin: 3%;
    }

    #romantiquebutton,#animauxbutton{
        margin: 3%;
        display: flex;
    }

    #iconinfo{
        width: 25px;
    }

    #infologements{
        margin-right: 4%;
    }

    #titrepopulaires{
        width: 92%;
        margin-left: 4%;
        margin-bottom: 25px;
        justify-content: space-between;
        align-items: stretch;
    }

    .iconpopulaires{
        padding-left: 0;
    }

    #populaires {
        width: 100%;
        order: 1;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background-color: #f2f2f2;
    }

    .pluspopulaires{
        width: 87%;
        margin-bottom: 20px;
        display: flex;
        justify-content: flex-start;
    }
    
    .infospopulaires{
        padding-left: 5px;
    }

    .etoilespopulaires{
        margin-bottom: 0;
        margin-top: 0;
    }

    #hebergements{
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap
    }

    #hebergementsmarseille {
        width: 100%;
        display: flex;
        flex-direction: column;
        order: 2;
        background-color: white;
        margin: 0;
        align-content: center;
    }

    #infoshebergements {
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
        margin-top: 0;
        width: auto;
        flex-wrap: wrap;
        align-items: baseline;
        align-content: stretch;
        box-shadow: 5px 5px 5px 1px #f2f2f2;
    }
    .optionshebergements{
        width: 87%;
        display: flex;
        flex-direction: column;
        height: 165px;
    }

    .imghebergements{
        height: 80px;
    }

    .titres, #titreactivites{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 90%;
        font-weight: bold;
        color: black;
        margin-left: 4%;
        margin-top: 35px;
    }
  
    #activites{
        display: flex;
        width: 100%;
        order: 3;
        height: auto;
    }

    #blocactivites1,#blocactivites2,#blocactivites3,#blocactivites4{
        width: 87%;
        height:auto;
        margin-bottom: 8%;
        margin-left: 4%;
    }
    
    #imgactivites1,#imgactivites2,#imgactivites3,#imgactivites4,#imgactivites5,#imgactivites6{
        height: 80px;
        width: 100%;
    }

    
    #blocimgactivites2, #blocimgactivites5{
        margin-bottom: 10%;
    }

    footer{
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .navigofooter{
        width: 90%;
        margin-left: 4%;
    }

    .titrenavigofooter{
        margin-left: 10px;
        margin-top: 20px;
    }

    .navfooter{
        margin-bottom: 8px;
        margin-left: 10px;
    }
}