@media (max-width: 1520px) {
    #menu .categorie {
        width: 100%;
    }
    #menu {
        padding: 50px 10px;
    }
    .block_plats{
        justify-content: center;
        width: 100%;
    }
    /*Page d'accueil*/
    .accueil .block1,
    .accueil .block2{
        width: 95%;
    }


}

@media (max-width: 1320px) {

    .accueil .parallax{
        background-attachment: scroll;
    }
    .accueil .parallax1{
        background-attachment: scroll;
    }


}

@media (max-width:1100px) {
    :root{
        font-size: 13px;
    }
    /************Page Accueil*****************/
    /***Section notre mission****/

    #block_notre_mission{
        margin-bottom: 80px;
        display: flex;
        flex-direction: column;
        width: 100%;
        /* opacity: 1;
        transform: translateX(50%); */
    }
    .notre_mission_image{
        margin: auto;
        width: 90%;
        overflow: hidden;
    }
    .notre_mission_content{
        text-align: justify;
        margin: auto;
        line-height: 25px;
        padding: 30px 60px;
        width: 90%;
    }

    /*Page plats*/
    .card-plat{
        width: 80%;
    }


    /*Page d'accueil*/

    .accueil .block1{
        flex-direction: column;
        height: auto;
    }
    .accueil .block1 .contenu_description{
        width: 100%;
        padding: 20px 50px !important;
    }
    .accueil .block1 .contenu_images .image{
        width: 47%;
        height: 300px;
    }
    .accueil .block1 .contenu_images{
        width: 100%;
        margin-bottom: 10px;
    }

}



@media(max-width: 992px){
    /******Header TOP******/
    .header-top-social a,
    .header-top-contact a{
        margin-right: 50px;
    }
    .container{
        padding: 0 10px;
    }
    .contact .coordonnes{
        margin-right: 20px;
    }
    .contact .message{
        margin-left: 20px;
    }

    .accueil .block2{
        flex-direction: column;
        height: auto;
    }
    .accueil .block2 .contenu_description{
        width: 100%;
        padding: 20px 50px !important;
    }
    .accueil .block2 .contenu_images .image{
        margin: auto;
        width: 80%;
        height: 100%;
    }
    .accueil .block2 .contenu_images{
        width: 100%;
        margin-bottom: 10px;
    }
}

@media(max-width: 768px){
    :root{
        font-size: 14px;
    }

    /*********Bar de navigation**********/
    nav{
        padding: 0 0 0 10px;
        justify-content: space-between;
    }
    nav .connexion{
        width: 60px;
    }
    nav .lien{
        display: none;
    }
    nav .icon_menu_mobile{
        width: 50px;
        display: block;
        font-size: 1.8rem;
        color: var(--color-text-white);
    }
    .contact{
        flex-direction: column;
        align-items: center;
    }
    .contact .message{
        width: 75%;
        margin-left: 0;
    }
    .contact .coordonnes{
        text-align: center;
        margin-right: 0;
        margin-bottom: 20px;
    }

    /*****Page reservation*******/

    .reservation .logo_phone{
        width: 100%;
    }


    /*Page Plats*/
    #menu .categorie .categorie-elem div  {
        width: 120px;
        height: 120px;
    }

    .swiper .swiper-slide .description .elem1{
        font-size: 3rem;
    }
    .swiper .swiper-slide .description .elem2{
        font-size: 6rem;
    }

    /*Footer*/
    .footer_middle_menu{
        display: none;
    }
    .footer_left_social {
        margin-bottom: 10px;
    }
}
@media (max-width: 670px){
    /***slider*******/
    .swiper{
        width: 100%;
        height: 500px;
        margin-bottom: 100px;
    }


    .decouvrir_elements{
        flex-direction: column;
        width: 90%;
        margin: auto;
    }
    .decouvrir_element{
        width: 100%;
    }

    #decouvrir{
        opacity: 1;
        transform: translateX(-100%);
    }
    #decouvrir.element-show{
        opacity: 1;
        transition: all 1s;
        transform: translateX(0%);
    }
}




@media (max-width: 620px){
    .reservation .form{
        padding: 20px 40px;
        width: 100%;
    }
    .reservation .form .row_form{
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }
    .reservation .form .row_form input {
        width: 100% !important;
    }
    .reservation .form input#couverture {
        width: 40px !important;
    }

    .reservation #calendar{
        width: 280px;
        margin-bottom: 20px;
    }
    .reservation .heures_reservation{
        width: 320px;
    }

    /*Page d'accueil*/

    .accueil .block1 .contenu_images{
        display: flex;
        flex-direction: column;
        padding: 0;
        width: 100%;
    }
    .accueil .block1 .contenu_images .image,
    .accueil .block2 .contenu_images .image{
        width: 100%;
        margin-bottom: 10px;
    }
    .accueil .block1 .contenu_description div,
    .accueil .block2 .contenu_description div{
        margin-bottom: 40px;
    }
    .accueil .block1 .contenu_description,
    .accueil .block2 .contenu_description{
        width: 100%;
        padding: 0 30px !important;
    }
}





@media(max-width: 576px){
    :root{
        font-size: 12px;
    }
    /******Header TOP******/
    .header-top-social{
        display: none;
    }
    .header-top-social a,
    .header-top-contact a{
        margin-right: 10px;
    }

    /*Page plats*/


    .card-content{
        flex-direction: column;
        height: auto;
        padding: 20px 0;
    }
    .card-plat{
        min-width: 0;
        width: 90%;
    }
    .card-description{
        width: 90%;
    }
    .card-img {
        width: 250px;
        height: 250px;
        margin-bottom: 20px;
    }
    #menu .categorie{
        width: 90%;
        flex-wrap: wrap;
    }
    #menu .categorie .categorie-elem{
        width: 40%;
    }
    .card-boisson-item {
        width: 96%;
    }

        /*Footer  */

    .footer_right_contacts{
       width: 135px;
        margin: auto;
    }

    .footer{
        padding: 40px 60px;
    }

    .footer_left_logo i{
        font-size: 2rem;
    }
    .footer_right_contacts {
        margin-bottom: 30px;
    }
    .footer_right_contacts i{
        font-size: 1.2rem;
    }
    .footer_right_contacts p{
        margin-bottom: 40px;
        font-size: 1.4rem;
    }
    .footer_right_contacts .elem{
        margin-bottom: 40px;
    }
    .footer_right_contacts .elem p{
        font-size: 1.2rem;
    }
    .footer .principal{
        display: block;
    }
    .footer_left_logo{
        margin-bottom: 50px;
    }
    .footer .legal{
        width: 135px;
        margin: auto;
        display: block;
    }
    .footer .legal a{

        display: block;
        margin:0 0 20px 0;
        font-size: 0.7rem;
    }

}