@media screen and (max-width: 1500px) {
    :root {
        --mdspace: 70px;

    }

    .first-section h1 * {
        font-size: 58px;
        line-height: 74px;
        margin-bottom: 0;
    }

    .first-section h1 {
        margin-bottom: 0;
    }

    .first-section h1 a::after {
        top: calc(100% - 5px);
    }

    h1, h1 *,
    h2, .h2 {
        font-size: 50px;
        line-height: 53px;
        margin: 0 0 30px 0;
    }

    .home-teutonne {
        top: calc(100% - 300px);
        height: 450px;
    }

    .menu a {
        font-size: 19px;
        margin-right: 15px;
    }

    .product .img-prod {
        height: 420px;
    }

    .alert-message {
        font-size: 18px;
    }

    #branding svg {
        width: 208px;
        height: 60px;
    }

    .grid-hom-txt {
        grid-gap: 80px;
    }

    p, .p, a, li {
        font-size: 20px;
        line-height: 29px;
    }

    #footer p, #footer li, #footer a {
        font-size: 18px;
        line-height: 26px;
    }

    .btn_base {
        font-size: 18px;
    }

    .product-categories li, .show-filter {
        font-size: 16px;

    }

    .custom-optgroup {
        font-size: 16px;
    }

    .custom-optgroup::after {
        height: 18px;
        width: 18px;
        -webkit-mask-size: 11px;
    }
}

@media screen and (max-width: 1330px) {
    .product {
        margin: 0 30px 25px 30px;
    }

    .grid-prod {
        width: 100%;
    }

    body .illu-prod {
        right: unset;
        left: -80px;
    }

    .la-taverne .illu {
        height: 279px;
        width: 187px;
    }

    .terrasse .illu {
        top: calc(100% - 100px);
        height: 310px;
    }

    .grid-services-bar {
        grid-gap: 80px;
        grid-template-columns: 350px 1fr;
    }

    .liste-services-bar {
        display: block;
    }

    .liste-services-bar .service-item {
        margin-bottom: 20px;
    }

    .origine .illu {
        height: 630px;
        width: 40vw;
    }

    .grid-bar-txt {
        grid-gap: 80px;
    }

    .sec-contact .illu {
        height: 711px;
        width: 41vw;
    }

    .cart-grid {
        grid-template-columns: 1fr 400px;
        grid-gap: 60px;
    }

    .fond-svg-footer {
        width: 150vw;
        left: -6vw;
    }
}

@media screen and (max-width: 1200px) {
    /**********
    MENU
     */
    #main-menu-container {
        position: fixed;
        height: 100vh;
        width: 100%;
        background: white;
        left: 0;
        top: 0px;
        z-index: 1000;
        padding: 170px calc(var(--mdside));
        clip-path: circle(0% at 100% 0);
        transition: 0.4s ease-in-out all;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
    }

    #main-menu-container .bg-full {
        opacity: 1;
        background-color: var(--jaune);
        top: calc(var(--minside) / 2);
    }

    .toggled #main-menu-container {
        clip-path: circle(141.2% at 100% 0);
    }
    #menu{
        display: flex;
        justify-content: flex-end;

    }
    #menu > .menu-toggle {
        display: flex;
        /*margin-left: auto;*/
        position: relative;
        /*top: 44px;*/
        /*right: calc(var(--mdside));*/
        z-index: 10001;
        margin-left: 20px;
    }

    #close-bar1, #close-bar2, #close-bar3 {
        height: 1px;
        background: var(--noir);
        transition: 0.5s ease-in-out all;
    }

    .toggled #close-bar1, .toggled #close-bar2, .toggled #close-bar3 {
        /*.home #close-bar1, .home #close-bar2, .home #close-bar3 {*/
        background: var(--noir);
    }

    .menu-menu-1-container .menu {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 60px;
    }

    .menu a {
        font-size: 46px;
        line-height: 41px;;
        margin-bottom: 30px;
        display: block;
        color: var(--noir);
        font-family: 'baboonregular';
        top: 108%;
    }

    #logo path {
        transition: 0.5s ease-in-out all;
    }

    .menu-toggled #logo path {
        fill: white;
    }

    .menu-toggled #logo path:nth-of-type(16),
    .menu-toggled #logo path:nth-of-type(15) {
        fill: var(--rouge);
    }

    #menu>.cart{
        display: block;
    }
    .liste-services {
        display: block;
    }

    .liste-services .service-item {
        margin-bottom: 20px;
    }

    #branding {
        position: relative;
        z-index: 10000;
    }

    #main-menu-container .container-illu {
        display: block;
        position: absolute;
        bottom: -40px;
        right: 0;
        height: 47vw;
        width: 55vw;
    }

    #main-menu-container .flex-social {
        display: flex;
    }

    .nom-icone {
        display: block;
        margin-right: 10px;
    }

    #main-menu-container > a.icon-menu {
        display: flex;
        align-items: center;
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    #header {
        padding-top: 65px;
    }

    .list-filter {
        margin-left: 0;
        margin-top: 20px;
    }

    .la-taverne, .head-prod, .content-page {
        padding-top: 180px;
    }

    .terrasse {
        top: 0;
    }

}

@media screen and (max-width: 900px) {
    :root {
        --minside: 20px;
        --gap: 30px;
        --mdspace: 40px;

    }

    h1, h1 *, h2, .h2 {
        font-size: 36px;
        line-height: 40px;
        margin: 0 0 20px 0;
    }

    p, .p, a, li {
        font-size: 18px;
        line-height: 25px;
    }
    p, ul{
        margin-bottom: 15px;
    }
    .lt-p p, .lt-p div, .lt-p .p, .lt-p a, .lt-p li {
        font-size: 17px;
        line-height: 24px;
    }
    .small-h1 {
        margin-bottom: 20px;
    }

    #branding > a {
        display: block;
        line-height: 0;
    }
    #header.header-scroll #branding svg,
    #header.up-scroll #branding svg,
    #branding svg {
        width: 135px;
        height: 43px;
    }

    #header {
        align-items: center;
        padding-top: 40px;
    }

    .first-section {
        padding: 115px var(--mdside) ;
        align-items: flex-start;
        height: 100svh;
    }

    /*.first-section h1 * {*/
    /*    font-size: 27px;*/
    /*    line-height: 34px;*/
    /*}*/
    .first-section h1 * {
        font-size: 33px;
        line-height: 40px;
    }
    .first-section h1 br {
        display: none;
    }

    .home-teutonne {
        height: 380px;
    }

    .container-txt-home {
        padding: 40px 0 80px 0;
    }

    .grid-hom-txt {
        display: flex;
        flex-direction: column;
        grid-gap: 0;
    }

    .grid-hom-txt .txt-img {
        height: 102vw;
        padding-left: calc(var(--mdside) / 2);
        padding-right: 0;
        margin-top: -30px;
    }

    .grid-hom-txt img {
        top: 0;
        height: 100%;
    }

    .grid-hom-txt > div:first-of-type {
        padding-right: var(--mdside);
    }

    .section-2-home.grid-hom-txt {
        display: flex;
        flex-direction: column-reverse;
    }

    .section-2-home .container-txt-home {
        padding-left: var(--mdside);
    }

    .section-2-home.grid-hom-txt > div:first-of-type {
        padding-right: 0;
    }

    .section-2-home.grid-hom-txt > div:first-of-type img {
        /*width: 100%;*/
    }

    .btn_base.cross, .btn_base.arrow {
        padding: 13px 55px 12px 26px;
    }

    .btn_base, .button, .woocommerce-Button, .woocommerce-button{
        font-size: 16px;
        line-height: 17px;

        padding: 13px 26px 12px 26px;
    }

    .btn_base.arrow::after {
        -webkit-mask-size: 12px;
        top: 12px;
    }

    .social {
        padding: 40px 0;
    }

    .fond-svg-footer {
        width: 212vw;
        left: -11vw;
    }

    .grid-ft {
        display: block;
    }

    .grid-ft > div {
        margin-bottom: 20px;
    }

    .hide-desc {
        display: inline-block;
    }

    .copyright {
        margin-top: 30px;
    }

    .flex-social a {
        display: block;
    }

    .flex-social > p {
        margin-right: 5px;
    }

    .flex-social svg {
        width: 25px;
        height: 25px;
    }

    .hide-mob {
        display: none;
    }

    .logo-pix {
        width: 42px;
        transform: translate(0px, -3px);
    }

    .logo-pom {
        width: 53px;
        transform: translate(0px, -1px);
    }

    #footer p, #footer li, #footer a {
        font-size: 16px;
        line-height: 24px;
    }

    #main-menu-container {
        padding-top: 115px;
        padding-bottom: 60px;
    }

    .menu a {
        font-size: 28px;
        line-height: 28px;
        margin-bottom: 15px;
    }

    .menu-menu-1-container .menu {
        margin-bottom: 20px;
    }

    #main-menu-container .container-illu {
        height: 65vw;
        width: 61vw;
    }

    .txt-before-prod {
        width: 100%;
        margin-right: 0;
    }

    .container-filter {
        position: fixed;
        left: 0;
        top: 150px;
        width: calc(100% - var(--mdside));
        background: #ffffff;
        display: block;
        padding: 40px 40px 40px var(--mdside);
        clip-path: polygon(0 calc(0% + 1.5px), 10% 0, 20% calc(0% + 1.5px), 30% 0, 40% calc(0% + 1.5px), 50% 0, 60% calc(0% + 1.5px), 70% 0, 80% calc(0% + 1.5px), 90% 0, 100% calc(0% + 1.5px), 100% calc(100% - 1.5px), 90% 100%, 80% calc(100% - 1.5px), 70% 100%, 60% calc(100% - 1.5px), 50% 100%, 40% calc(100% - 1.5px), 30% 100%, 20% calc(100% - 1.5px), 10% 100%, 0 calc(100% - 1.5px));
        border-radius: 27px;
        transform: translateX(-100%);
        transition: 0.5s ease-in-out all;
    }
    .container-filter.active{
        transform: translateX(0%);

    }
    .product-categories {
        display: block;
    }

    .product-categories li::after {
        display: none;
    }
    .bg-full {
        clip-path: polygon(0 calc(0% + 1.5px), 10% 0, 20% calc(0% + 1.5px), 30% 0, 40% calc(0% + 1.5px), 50% 0, 60% calc(0% + 1.5px), 70% 0, 80% calc(0% + 1.5px), 90% 0, 100% calc(0% + 1.5px), 100% calc(100% - 1.5px), 90% 100%, 80% calc(100% - 1.5px), 70% 100%, 60% calc(100% - 1.5px), 50% 100%, 40% calc(100% - 1.5px), 30% 100%, 20% calc(100% - 1.5px), 10% 100%, 0 calc(100% - 1.5px));
        border-radius: 27px;
    }
    body #header.up-scroll, #header {
        padding-top: 34px;
    }
    #header{
        grid-template-columns: 150px 1fr;
    }
    .list-filter {
        display: block;
    }
    .custom-options {
        position: static;
    }
    .container-select {
        margin-bottom: 20px;
        max-width: 300px;
    }
    .container-select:first-of-type {
        margin-right: 0;
    }
    .container-filter .h2{
        margin-bottom: 20px;
    }
    .container-filter .close{
        filter: invert(1);
        width: 20px;
        height: 20px;
    }
    .la-taverne, .head-prod, .content-page {
        padding-top: 115px;
    }
    .product{
        width: calc(50% - 30px);
        margin: 0 15px 25px 15px;
    }
    .product .img-prod{
        height: 280px;
    }
    .lt-h2{
        font-size: 16px;
    }
    .product h2{
        text-align: center;
    }
    .openfiltre{
        width: 100%;
        display: block;
        margin-bottom: 40px;
        color: var(--noir);
    }
    .grid-prod{
        display: block;
    }

    .ariane{
        padding-left: 0;
    }
    .ariane a, .ariane p {
        font-size: 12px;
    }
    body .first-img-prod{
        height: 370px;
    }
    .single-product h1{
        margin-top: 40px;
    }
    .dispofut {
        font-size: 16px;
    }
    .info-prod p{
        margin-right: 6px;
        font-size: 16px;
    }
    .info-prod p::after{
        height: 14px;
    }
    .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button{
        padding: 6px;
    }
    body .illu-prod{
        object-fit: contain;
        object-position: right;
        width: 100%;
        height: auto;
        position: relative;
        left: unset;
        right: calc(-1 * var(--mdside));
        margin-top: 40px;
    }
    .head-prod{
        padding-bottom: 40px;
    }
    .la-taverne{
        padding-bottom: 60px;
    }
    .grid-bar-txt{
        display: flex;
        flex-direction: column;
        grid-gap: 0;
    }
    .grid-bar-txt img{
        height: 86vw;
        margin-top: 40px;
        width: calc(100% + var(--mdside));
    }
    .la-taverne .bg-full{
        height: calc(100% - var(--minside) - 86vw);
    }
    .la-taverne .illu{
        height: 222px;
        bottom: -31px;
    }
    .grid-terasse-txt{
        display: flex;
        flex-direction: column-reverse;
        grid-gap: 0;
    }
    .terrasse{
        padding-left: var(--mdside);
        padding-right: var(--mdside);
    }
    .terrasse .grid-terasse-txt > div:last-of-type{
        padding-right: 0;
    }
    .terrasse .container-txt-home .bg-full{
        left: calc(var(--minside) / 2 - var(--mdside));
        width: calc(100% + var(--mdside) * 2 - var(--minside));
    }
    .terrasse .grid-terasse-txt img{
        height: 86vw;
    }
    .terrasse .container-illu{
        display: none;
    }
    .terrasse .grid-terasse-txt>div:first-of-type{
        width: calc(100% + var(--mdside));
        margin-right: calc(-1 * var(--mdside));
        margin-top: -40px;
    }
    .services{
        margin-top: 40px;
    }
    .grid-services-bar{
        display: block;
    }
    .services .container-illu{
        display: none;
    }
    .liste-services-bar{
        margin-top: 20px;
    }
    .service-item{
        padding: 30px;
    }
    .page-template-template-about .grid-bar-txt{
        display: flex;
        flex-direction: column-reverse;
    }
    .origine .container-txt-home{
        padding-bottom: 0;
    }
    .grid-contact-txt{
        display: flex;
        flex-direction: column;
        grid-gap: 0;
    }
    .container-map{
        height: 86vw;
        width: calc(100% + var(--mdside));
        margin-right: calc(-1 * var(--mdside));
        margin-top: 40px;
    }
    .flex-revente img{
        object-fit: contain;
        width: 30px;
    }
    .sec-contact .container-illu{
        display: none;
    }
    form>.grid-contact>div:first-of-type{
        width: 100%;
        margin-bottom: 0;
    }
    .grid-contact>div:nth-of-type(even){
        margin-right: 15px;

    }
    .grid-contact>div {
        width: calc(50% - 7.5px);
        margin-bottom: 14px;
    }
    .grid-contact .grid-contact>div:nth-of-type(odd){
        margin-right: 15px;
    }
    .wpcf7 input{
        padding: 7px 0;
    }
    .woocommerce-page input::placeholder,
    .wpcf7-select,
    .wpcf7 input::placeholder,
    .wpcf7 textarea::placeholder{
        font-size: 14px;
    }
    .wpcf7 .btn_base input{
        font-size: 16px;
    }
    .first-section h1 a::after{
        transform: rotate(1deg);
    }
    .more-info{
        display: none;
    }
    .cart-grid{
        display: flex;
        flex-direction: column;
        grid-gap: 0;
    }
    .billing-section h2, .shipping-section h2 {
        font-size: 28px;
        line-height: 34px;
    }
    .woocommerce form .form-row-last,
    .woocommerce-page form .form-row-last,
    .address-field,
    .woocommerce form .form-row-first,
    .woocommerce-page form .form-row-first{
        float: unset;
        width: 100%;
    }
    .forgot-password-link, .toggle-checkout-login, .woocommerce-account .addresses .title .edit{
        font-size: 12px;
    }
    #ship-to-different-address{
        font-size: 16px;
        line-height: 20px;
    }
    #ship-to-different-address label input{
        margin-top: 3px;
    }
    #ship-to-different-address label{
        align-items: flex-start;
    }
    .cart-grid>div:nth-of-type(2){
        margin-top: 60px;
    }
    #shipping_method{
        width: calc(100vw - var(--mdside) * 2);
        position: absolute;
    }
    .shop_table .shipping{
        padding-bottom: 50px;
    }
    .woocommerce-terms-and-conditions-wrapper{
        margin-bottom: 20px;
    }
    .grid-account{
        display: flex;
        grid-gap: 0;
        flex-direction: column;
    }
    .grid-account>svg{
        display: none;
    }
    .custom-register-form{
        margin-top: 60px;
    }
    .mon-compte-custom .container-illu{
        top: 20px;
    }
}