/*
 To change this license header, choose License Headers in Project Properties.
 To change this template file, choose Tools | Templates
 and open the template in the editor.
*/
/* 
 Created on : 19 oct. 2021, 17:55:43
 Author     : Charles
*/
@media screen and (max-width: 1600px) {
    #accueil-slogan-carte:after {
        content: "";
        width: 400px;
        height: 400px;
        background: url('../img/svg/map-bretagne-mat-eco.svg') no-repeat right center / contain;
    }

    #carousel-accueil .swiper-slide .contenu {
        max-width: 550px;
        right: 5%;
    }
}

@media screen and (max-width: 1500px) {
    #header-mateco .part-bottom .container-left #search_widget {
        max-width: 350px;
    }
}

@media screen and (max-width: 1430px) {
    /*Panier*/
    #cart .cart-grid .cart-grid-right, #checkout #content .cart-grid-right {
        width: 100%;
        max-width: 350px;
        margin-left: 20px;
    }
}

@media screen and (max-width: 1400px) {
    .accueil-materieux-ecolos .contenu h2 {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 15px;
    }

    #category #wrapper #content-wrapper .products {
        gap: 20px;
    }

    #category #wrapper #content-wrapper .products .product {
        width: calc(50% - 10px);
    }

    .page-header:not(.page-header-category):after {
        right: 0;
    }
}

@media screen and (max-width: 1350px) {
    #product .container-actions .part-right .product-variants > .product-variants-item {
        width: 100%;
    }
}

@media screen and (max-width: 1300px) {
    #carousel-accueil .swiper-slide .contenu {
        position: relative;
        top: 0;
        transform: none;
        right: 0;
        background: #f2f2f2;
        max-width: none;
        padding: 30px;
    }

    #accueil-slogan-carte {
        min-height: 320px;
    }

    #accueil-slogan-carte:after {
        width: 250px;
        height: 300px;
        top: auto;
        bottom: 0;
        transform: none;
    }

    #accueil-slogan-carte .container-large .inner {
        width: calc(100% - 250px);
    }
}

@media screen and (max-width: 1280px) {
    /*Panier*/
    #cart .cart-grid, body#checkout section#content {
        margin: 35px auto 70px;
        flex-direction: column;
        align-items: center;
    }
    #checkout #content .cart-grid-body {
        width: 100%;
    }
    #cart .cart-grid .cart-grid-right, #checkout #content .cart-grid-right {
        margin-left: 0;
    }
}

@media screen and (max-width: 1200px) {

    .toggle-search-mobile {
        display: block;
        width: 24px;
        height: 24px;
        background: url('../img/svg/header-search.svg') no-repeat center / contain;
    }
    
    .toggle-search-mobile.active {
        background: url('../img/svg/close-popup-black.svg') no-repeat center / contain;
    }
    
    .page-header h1 {
        padding-right: 0;
    }

    body main {
        padding-top: 60px;
    }

    #header-mateco .part-bottom {
        gap: 0;
    }

    #header-mateco .part-bottom .container-left .lien-espace-pro,
    #header-mateco .part-top .container-right .menus .menu-secondaire,
    #header-mateco .part-top .container-right .contacts .horaires,
    #header-mateco .part-bottom .container-left .menu-principal,
    #header-mateco .part-top .container-right .contacts .phone-header-btn span,
    #header-mateco .part-bottom .container-right a .text,
    #header-mateco .part-top .container-right .menus .menu-socials {
        display: none;
    }

    #header-mateco .part-bottom .container-left #search_widget {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        max-width: none;
    }

    #custom-menu-mobile {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 450px;
        background: #fff;
        padding: 70px 30px;
        overflow: auto;
        transform: translateX(100%);
        transition: all 300ms ease-in-out;
    }

    #custom-menu-mobile .bloc-categorie {
        padding-top: 15px;
        margin-top: 15px;
    }

    #custom-menu-mobile .bloc-categorie:not(.first) {
        border-top: solid 1px rgba(0, 0, 0, .2);
    }

    #custom-menu-mobile .bloc-categorie .entete-categorie {
        color: #020203;
        font-size: 18px;
        transition: none;
        font-family: "Anton", sans-serif;
        background: url(../img/svg/plus-facet-noir.svg) no-repeat center right / 15px;
    }

    #custom-menu-mobile .bloc-categorie .entete-categorie.active {
        background: url(../img/svg/moins-facet-noir.svg) no-repeat center right / 15px;
    }

    #custom-menu-mobile .bloc-categorie .sous-categories {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 10px 10px;
    }

    #custom-menu-mobile .bloc-categorie .sous-categories a {
        line-height: 20px;
        color: #000;
    }

    #custom-menu-mobile .bloc-categorie .sous-categories .bloc-sous-categorie {
        margin-top: 8px;
    }

    #custom-menu-mobile .bloc-categorie .sous-categories a.all {
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 20px;
        padding: 2px 18px;
        background: #739500;
        color: #fff;
    }

    #custom-menu-mobile .lien-espace-pro {
        height: 42px;
        font-size: 20px;
        font-family: "Anton", sans-serif;
        padding: 8px 30px 7px;
        line-height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        gap: 15px;
        background: #739500;
        border: solid 1px #739500;
        color: #fff;
        text-transform: uppercase;
        margin: 35px 0 15px;
    }

    #custom-menu-mobile .menu-secondaire {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #custom-menu-mobile .menu-secondaire a {
        color: #000;
        margin-bottom: 10px;
    }

    #custom-menu-mobile .menu-socials {
        display: flex;
        justify-content: center;
        gap: 10px;
    }
    #custom-menu-mobile .menu-socials a {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #custom-menu-mobile .menu-socials a.facebook {
        background: #1877F2;
    }
    #custom-menu-mobile .menu-socials a.instagram {
        background: #E4405F;
    }
    #custom-menu-mobile .menu-socials a.linkedin {
        background: #0A66C2;
    }

    #custom-menu-mobile.active {
        transform: translateX(0);
    }

    #header-mateco {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        padding: 0 25px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
    }

    #header-mateco .part-top {
        width: auto;
        margin: 0;
        gap: 20px;
        padding-top: 0;
        position: static;
    }

    #header-mateco .part-top .logo {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        max-width: 120px;
    }

    #header-mateco .part-bottom {
        padding: 0;
        width: auto;
        margin: 0;
    }

    #header-mateco .part-top .container-right {
        flex-direction: row;
        align-items: center;
    }

    #header-mateco .part-top .container-right .contacts {
        margin-top: 0;
        gap: 10px;
    }

    #header-mateco .part-top .container-right .contacts .phone-header-btn {
        height: 34px;
        width: 34px;
        padding: 0;
        margin-left: 10px;
        background: #fff;
    }

    #header-mateco .part-top .container-right .contacts .phone-header-btn svg {
        width: 23px;
        height: auto;
    }

    #header-mateco .part-top .container-right .contacts .phone-header-btn path {
        fill: #000;
    }

    #header-mateco .part-bottom .container-right {
        gap: 20px;
        margin: 0 0 0 20px;
    }

    #header-mateco .part-bottom .container-right a img {
        width: 24px;
    }

    #header-mateco #open-menu-mobile {
        width: 36px;
        height: 30px;
        padding: 4px 0;
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #header-mateco #open-menu-mobile span {
        width: 100%;
        height: 2px;
        background: #000;
    }

    .accueil-presentation {
        display: flex;
        gap: 20px;
        margin-bottom: 50px;
        flex-direction: column;
        align-items: center;
    }

    .accueil-presentation .contenu {
        width: 100%;
        max-width: 600px;
        padding-top: 20px;
    }

    #reviews-home {
        padding: 40px 30px;
        min-height: 0;
        background: url(../img/interface/bg-reviews-mobile.jpg) no-repeat right bottom / cover;
    }

    #reviews-home .content .slider-reviews {
        padding-left: 0;
    }

    #reviews-home .content .slider-reviews .swiper-button-prev {
        left: 0;
    }

    #reviews-home .content .google-intro {
        margin: 10px 0 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    #reviews-home .content .google-intro .google-notation {
        max-width: none;
        margin-right: 0;
        padding-right: 0;
        border-right: none;
    }

    #reviews-home .content .slider-reviews .swiper-button-prev, #reviews-home .content .slider-reviews .swiper-button-next {
        top: 50%;
        width: 26px;
    }

    #reviews-home .content .slider-reviews .swiper-slide .review {
        padding: 25px 40px;
    }
}

@media screen and (max-width: 1100px) {

    /*CONTACT*/
    .contact-form-container {
        margin: 30px auto;
        gap: 30px;
        flex-direction: column;
        align-items: center;
    }

    .contact-form-container .colonne-gauche {
        width: 100%;
        max-width: none;
        padding: 16px 16px 20px;
    }

    /*FICHE PRODUIT*/
    #product .product-container {
        gap: 25px;
        padding-top: 20px;
        margin-bottom: 60px;
        flex-direction: column;
        align-items: center;
    }

    /*ACCUEIL*/
    .accueil-categories .categorie {
        width: calc(50% - 12px);
    }

    .accueil-materieux-ecolos {
        min-height: 0;
        padding-bottom: 40px;
        background: none;
    }

    .accueil-materieux-ecolos .contenu {
        width: 100%;
        max-width: none;
    }

    #index #liste-articles .article:nth-child(3) {
        display: none;
    }

    .page-header {
        padding: 30px 0;
        margin-bottom: 30px;
    }

    .page-header h1 {
        font-size: 32px;
        line-height: 38px;
    }
    .page-header .breadcrumb {
        display: none;
    }


    #category #wrapper .content-wrapper {
        margin: 0px auto;
        flex-direction: column;
        align-items: center;
    }

    #category #wrapper .content-wrapper #left-column {
        margin-right: 0;
    }
}

@media screen and (max-width: 1000px) {
    #accueil-slogan-carte .container-large .inner {
        width: 100%;
        padding-bottom: 200px;
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    #accueil-slogan-carte .container-large .inner .hermine {
        max-width: 40px;
    }

    #accueil-slogan-carte .container-large .inner h2 {
        font-size: 32px;
        line-height: 36px;
    }

    #accueil-slogan-carte .container-large .inner h2 .small {
        font-size: 24px;
        line-height: 32px;
    }

    #footer .container-footer, body#checkout main #footer .container-footer {
        gap: 30px;
        padding: 0 0 30px;
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (max-width: 800px) {

    #category #wrapper .content-wrapper #left-column {
        display: none;
    }
    #cms .elementor-section.elementor-section-boxed > .elementor-container, #module-prestablog-actualites .elementor-section.elementor-section-boxed > .elementor-container {
        width: 100%;
    }

    #cms .elementor-section.elementor-section-boxed > .elementor-container h2, #module-prestablog-actualites .elementor-section.elementor-section-boxed > .elementor-container h2 {
        font-size: 22px;
        line-height: 32px;
    }

    #cms .elementor-section-wrap, #module-prestablog-actualites .elementor-section-wrap {
        margin-top: 0;
    }

    #cms #content {
        padding-bottom: 50px;
    }

    /*FICHE PRODUIT*/
    #product .container-actions {
        flex-direction: column;
    }

    #product .container-actions .part-left {
        width: 100%;
        padding-right: 0;
        border-right: none;
        padding-bottom: 30px;
        margin-bottom: 30px;
        border-bottom: solid 1px #E4E4E4;
    }

    #product .container-actions .part-right {
        width: 100%;
        padding-left: 0;
    }

    #carousel-accueil .swiper-slide .contenu {
        padding: 15px 30px;
    }

    #carousel-accueil .swiper-slide .contenu .titre {
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 5px;
    }

    #carousel-accueil .swiper-button-prev {
        top: 50%;
        left: 20px;
    }

    #carousel-accueil .swiper-button-next {
        top: 50%;
        right: 20px;
    }

    .featured-products {
        padding: 0 0 50px;
    }

    .featured-products .entete-nouveautes p {
        margin-bottom: 0;
    }

    .accueil-categories {
        gap: 10px;
    }

    .accueil-categories .categorie {
        width: calc(50% - 5px);
    }

    .accueil-categories .categorie .inner {
        font-size: 18px;
        line-height: 26px;
        right: 10px;
        bottom: 10px;
        left: 10px;
        height: 75%;
        padding: 5px;
    }

    .accueil-categories .categorie:hover .inner {
        padding-bottom: 20px;
    }

    .accueil-a-propos-materiaux {
        margin: 40px 0 60px;
        gap: 20px;
        flex-direction: column;
        align-items: center;
    }

    .accueil-presentation .contenu h2 {
        font-size: 22px;
        line-height: 28px;
        margin-bottom: 10px;
    }

    .bloc-reassurance {
        background: #F3F3F3;
        padding: 40px 0;
    }

    .bloc-reassurance .liste-items {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
    }

    .bloc-reassurance .liste-items .item {
        width: calc(50% - 10px);
    }

    .bloc-reassurance .liste-items .item .titre {
        font-size: 15px;
    }

    .bloghometitle {
        margin: 40px 0 15px;
    }

    .bloghometitle h2 {
        font-size: 24px;
        line-height: 32px;
    }

    #liste-articles .article .block_bottom .blog_desc {
        font-size: 15px;
        line-height: 18px;
        min-height: 54px;
        max-height: 54px;
        -webkit-line-clamp: 3;
    }

    #liste-articles .article .block_bottom h3 a {
        font-size: 18px;
        line-height: 22px;
    }

    #liste-articles .article .block_bottom {
        padding: 20px 30px 20px;
    }

    #footer .container-footer .part-left .menu-principal, body#checkout main #footer .container-footer .part-left .menu-principal {
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    #footer .container-footer .part-left .menu-principal a, body#checkout main #footer .container-footer .part-left .menu-principal a {
        font-size: 18px;
        line-height: 20px;
        color: #fff;
        font-family: 'Anton';
        width: calc(50% - 5px);
    }

    #reviews-home .content .h2 {
        font-size: 28px;
        line-height: 38px;
    }

    /*Popup Add To Cart*/
    #blockcart-modal .modal-dialog {
        width: calc(100% - 60px);
        left: 50%;
        transform: translateX(-50%);
        margin: 50px 0;
    }
    #blockcart-modal .modal-body .left-part .image img {
        width: 100%;
        height: auto;
        object-fit: initial;
    }
    #blockcart-modal .modal-body {
        padding: 20px;
        flex-direction: column;
        align-items: center;
    }
    body #blockcart-modal .modal-header .modal-title {
        font-size: 18px;
        line-height: 22px;
        padding: 8px 35px 8px 0;
    }
    #blockcart-modal .modal-body .left-part {
        padding-right: 0;
        margin-right: 0;
        border-right: none;
        border-bottom: solid 1px #DEDDD7;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }
    #blockcart-modal .modal-body .right-part .cart-content-btn {
        flex-direction: column;
    }

    #cart .cart-grid-body .cart-overview .cart-item .product-line-grid {
        flex-direction: column;
    }
    #cart .cart-grid-body .cart-overview .cart-item .product-line-grid .bottom-mobile {
        flex-direction: column;
        text-align: center;
    }
    #cart .cart-grid-body .cart-overview .cart-item .product-line-grid .product-line-grid-body {
        margin: 15px 0;
    }
    #cart .cart-grid-body .cart-overview .cart-item .product-line-grid .product-line-info.product-price {
        justify-content: center;
        /*Finaliser la commande*/
    }
    body#checkout section.checkout-step {
        padding: 15px;
    }
    body#checkout section.checkout-step .step-title {
        font-size: 18px;
        padding: 0 10px;
    }
    body#checkout section.checkout-step .content {
        padding: 0 10px;
    }
    #checkout-personal-information-step .nav-inline .nav-item a {
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body#checkout main section.checkout-step {
        padding: 20px 0;
    }

    #checkout-personal-information-step .nav-inline .nav-item:nth-child(2) {
        width: 10%;
    }

    #checkout main #content .cart-grid-right {
        margin-left: 0;
    }
}

@media screen and (max-width: 700px) {
    #category #wrapper #content-wrapper .products .product {
        width: 100%;
    }

    .contact-form-container form .form-fields .form-group.small {
        width: 100%;
    }

    #module-everpsblog-post .post-header, #prestablogfront .post-header {
        min-height: 250px;
        margin-bottom: 20px;
    }

    #module-everpsblog-post #wrapper:before, #prestablogfront:before {
        height: 100px;
    }

    #module-everpsblog-post .postcontent h1, #prestablogfront .article-header h1 {
        font-size: 28px;
        line-height: 36px;
    }
}