@media (max-width: 800px) {
    .container, .container-mid {
        width: 90%;
    }


    .desktop, .right-cover, .left-banner, .menu-footer {
        display: none;
    }
    .mobile, .sub-menu-header {
        display: block;
    }

    h1 {
        font-family: "Prompt", sans-serif;
        font-weight: 700;
        font-size: 25px;
        line-height: 36px;
    }


    #header-mobile {
        height: 35px;
        background-color: #fff;
        padding: 15px;
        position: relative;
        z-index: 300;
    }

    #header-mobile.fixed {
        position: fixed;
        height: 65px;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 300;
        box-sizing: border-box;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
        transition: 0.5s ease-in-out;
        animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
        from {
            transform: translateY(-100%);
        }
        to {
            transform: translateY(0);
        }
    }

    .logo-header-center {
        width: 100%;
        left: 0;
        text-align: center;
    }
    .logo-header-center img {
        max-height: 37px;
    }

    #header-mobile div.right {
        max-width: 95px;
    }

    .icon-menu {
        display: block;
        width: 30px;
        height: 30px;
        mask-size: 30px 30px;
        mask-repeat: no-repeat;
        mask-position: center center;
        background-color: var(--clr-secondary);
        mask-image: url('../images/svg/menu.svg');
        margin-top: 5px;
    }
    .close-header-mobile {
        display: block;
        width: 40px;
        height: 40px;
        mask-size: 40px 40px;
        mask-repeat: no-repeat;
        mask-position: center center;
        background-color: var(--clr-secondary);
        mask-image: url('../images/svg/close.svg');
        right: 15px;
        top: 40px;
    }

    .langue-switcher {
        width: 90px;
        margin-top: -4px;
        font-size: 0.8rem;
    }

    .menu-mobile {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        z-index: 900;
        background-color: #fff;
        padding: 30px 0;
        box-sizing: border-box;
        left: -900px;
        opacity: 0;
        transform: scale(0.5);
        /*transition: 0.5s ease-in-out;*/
    }

    .box30-left {
        padding-left: 30px;
    }

    .menu-mobile.open {
        left: 0px;
        opacity: 1;
        transform: scale(1);
    }

    .menu-mobile .top30 li+li {
        margin-top: 15px;
    }

    .menu-mobile li > a {
        display: block;
        padding: 5px 30px;
        color: #000;
        font-weight: 700;
        border-left: transparent solid 3px;
    }
    .menu-mobile li > a.active {
        color: var(--clr-primary);
        border-left: var(--clr-primary) solid 3px;
    }

    .sub-menu-header {
        height: auto;
        opacity: 1;
        overflow: auto;
        margin-left: 20px;
        box-shadow: none;
    }

    .sub-menu-header a {
        border-bottom: rgba(0, 0,0, 0.1) solid 1px;
        font-size: 0.9rem;
        display: block;
        padding: 7px 0;
        color: #000;
    }


    #cover-page {
        padding-top: 40px;
        padding-bottom: 30px;
        height: auto;
        margin-bottom: 40px;
    }

    .left-cover, .right-cover, .title-comp h2, .right-banner, .left-banner, .left-section, .right-section, .form-container, .container-little, .left-form, .right-form {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        float: none;
        clear: both;
        box-sizing: border-box;
    }


    .grid-layout-3, .grid-layout-2 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        column-gap: 0px;
    }
    .grid-layout-5 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 10px;
    }

    #banner-about, #section-confiance, section.top60 {
        height: auto;
        margin-top: 20px;
    }
    #section-confiance {
        margin-top: -120px;
    }
    .right-section.grid-layout-2 {
        margin-top: 30px;
    }

    #section-confiance .left-section {
        text-align: center;
    }

    .grid-layout-2.div-p p+p, .contact-item + .contact-item {
        margin-top: 20px;
    }

    #contact-container {
        padding: 15px 0;
    }

    .contact-item li +li {
        width: 75%;
        margin-top: 0px;
    }

    .contact-item h3 {
        font-size: 1.05rem;
    }

    .icon-contact {
        width: 35px;
        height: 35px;
    }
    .icon-contact .svg-icon {
        width: 35px;
        height: 35px;
        mask-size: 20px 20px;
    }

    .right-form {
        margin-top: 40px;
    }

    
    .content-page.mid {
        width: 100%;
        box-sizing: border-box;
    }

    .banner.grid-layout-2 {
        padding-bottom: 30px;
    }

    .service-item .description-preview {
        height: auto;
        margin-top: 0;
    }
    .service-item {
        padding: 20px;
        margin-bottom: 20px;
    }
    .icon-service, .icon-service {
        margin-bottom: 10px;
    }
    .service-item h3 {
        height: auto;
    }

    .prepend-tools .icon-widget{
        margin-right: 0;
    }

    .prepend-tools {
        right: -40px;
        top: 70%;
        overflow: hidden;
        padding-bottom: 20px;
    }
    .icon-widget + li {
        display: none;
    }

    .icon-widget {
        width: 30px;
        height: 30px;
    }

    .whatsapp-widget {
        width: 48px;
        border-radius: 100%;
    }
    .carousel-container {
        width: 100%;
    }

    .prev-carousel, .next-carousel {
        display: none;
    }


    .grid-layout-2 #banner-about {
        height: auto;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    .accordeon-item .accordeon-content {
        height: auto;
    }



}





@media (max-width: 1400px) and (min-width: 790px) {
    .container {
        width: 1000px;
    }
    .barre-header .container > ul > li + li {
        margin-left: 10px;
    }
    .barre-header .container > ul > li.li-btn-barre {
        margin-left: 20px;
    }
    .left-cover {
        width: 500px;
    }
    .right-cover {
        width: 490px;
    }
    #cover-page {
        height: auto;
    }
    .service-item .description-preview {
        height: auto;
        min-height: 180px;
    }
    .right-banner {
        width: 510px;
    }
    .right-section {
        width: 570px;
    }
    .left-banner, .left-section {
        width: 390px;
    }
    .left-form {
        width: 40%;
    }
    .right-form {
        width: 55%;
    }

    .phone-widget, .prepend-widget {
        padding: 5px 28px 5px 5px;
    }
    .icon-widget {
        width: 30px;
        height: 30px;
    }
    .prepend-widget a, .prepend-widget span {
        font-size: 0.7rem;
    }
    .icon-widget + li {
        margin-top: -2px;
    }

    .whatsapp-widget {
        width: 10px;
    }

    
}
/*
complete the header mobile with the menu & icons
*/