/*
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: 1750px) {
    #slider-products-houblons {
        & .container-flex {
            & .products {
                .swiper-button-prev {
                    display: inline-block;
                    left: 50px;
                    width: 16px;
                    height: 32px;
                    background: url('../img/svg/arrow-swiper-white-prev.svg') no-repeat center / contain;
                }
                .swiper-button-next {
                    display: inline-block;
                    right: 50px;
                    width: 16px;
                    height: 32px;
                    background: url('../img/svg/arrow-swiper-white-next.svg') no-repeat center / contain;
                }
            }
        }
    }
}

@media screen and (max-width: 1550px) {
    #accueil-cocktails {
        .block-visuel {
            width: 100%;
        }
        .content {
            min-width: 710px;
        }
    }
}

@media screen and (max-width: 1450px) {
    @media screen and (max-width: 1750px) {
        #slider-products-liqueur {
            & .container-flex {
                & .products {
                    .swiper-button-prev {
                        display: inline-block;
                        left: 50px;
                        width: 16px;
                        height: 32px;
                        background: url('../img/svg/arrow-swiper-white-prev.svg') no-repeat center / contain;
                    }
                    .swiper-button-next {
                        display: inline-block;
                        right: 50px;
                        width: 16px;
                        height: 32px;
                        background: url('../img/svg/arrow-swiper-white-next.svg') no-repeat center / contain;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1400px) {
    #home-banner {
        .contenu {
            .logo {
                max-width: 300px;
            }
            h1 {
                font-size: 26px;
                margin: 15px 0 10px
            }
        }
    }

    #slider-products-arranges-filtres {
        .container-flex {
            gap: 40px;
            margin-bottom: 60px;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
    }
}

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

    #slider-products-arranges-filtres {
        padding: 100px 0 30px;
        & .products {
            padding-right: 30px;
            .swiper-slide {
                max-width: none;
            }
        }
        &:after {
            bottom: -58px;
            height: 60px;
            background: url(../img/interface/home-after-arranges.png) no-repeat top center / 1200px auto;
        }
    }

    #accueil-cocktails {
        flex-direction: column;
        margin-top: -30px;
        .content {
            width: 100%;
            padding-top: 0;
            padding-bottom: 0;
        }
    }

    #slider-products-houblons {
        &:before {
            top: -43px;
            height: 45px;
            background: url(../img/interface/home-before-houblons.png) no-repeat bottom center / 1200px auto;
        }
        &:after {
            bottom: -63px;
            height: 64px;
            background: url(../img/interface/home-after-houblons.png) no-repeat bottom center / 1200px auto;
        }
    }

    #slider-products-liqueur {
        &:before {
            top: -60px;
            height: 60px;
            background: url(../img/interface/home-before-liqueur.png) no-repeat bottom center / 1200px auto;
        }
        &:after {
            bottom: -72px;
            height: 74px;
            background: url(../img/interface/home-after-liqueur.png) no-repeat top center / 1200px auto;
        }
    }

    #footer {
        &:before {
            top: -63px;
            height: 65px;
            background: url(../img/interface/home-before-houblons.png) no-repeat bottom center / 1640px 100%;
        }
    }

    #home-banner {
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
        .temp-logo {
            img {
                max-width: 90px;
            }
        }
        .contenu {
            position: relative;
            left: 0;
            top: auto;
            width: calc(100% - 40px);
            max-width: 775px;
            margin: 140px auto 0;
            text-align: center;
            .logo {
                max-width: 230px;
            }
        }
        .visuel {
            width: 100%;
            max-width: 1050px;
        }
    }

    .reassurances {
        justify-content: center;
        gap: 25px 10px;
        padding: 80px 0 30px;
        flex-wrap: wrap;
        .reassurance {
            width: calc(50% - 5px);
            & .picto {
                max-height: 50px;
                img {
                    max-height: 50px;
                }
            }
            .sous-titre {
                line-height: 20px;
                font-size: 14px;
            }
        }
    }
}

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

    #description-accueil {
        padding: 120px 0;
        .content {
            padding: 30px;
            border-radius: 45px;
            .logo-titre {
                gap: 20px;
                flex-direction: column;
                align-items: center;
                text-align: center;
                .logo {
                    max-width: 100px;
                }
                & .titre {
                    .part-1 {
                        font-size: 30px;
                        line-height: 32px;
                    }
                    .part-2 {
                        font-size: 30px;
                        line-height: 34px;
                        margin-top: 10px;
                    }
                }
            }
            .texte {
                margin-top: 10px;
                line-height: 24px;
            }
        }
    }


    #slider-products-houblons {
        padding: 40px 0;
        & .container-flex {
            flex-direction: column;
            .contenu {
                min-width: 0;
                align-items: flex-start;
                h2 {
                    font-size: 32px;
                    &:before {
                        left: -26px;
                        top: -25px;
                        width: 100%;
                        height: 100px;
                    }
                    &:after {
                        right: 28px;
                        top: -20px;
                        width: 21px;
                        height: 36px;
                    }
                }
                .texte {
                    padding-right: 15px;
                    margin: 8px 0;
                    line-height: 24px;
                }
            }
            .products {
                margin-top: 20px;
                width: 100%;
                .swiper-button-prev {
                    left: 75px;
                }
                .swiper-button-next {
                    right: 75px;
                }
            }
        }
    }

    #slider-products-liqueur {
        padding: 40px 0;
        & .container-flex {
            flex-direction: column;
            transform: none;
            .contenu {
                min-width: 0;
                transform: none;
                align-items: flex-start;
                h2 {
                    font-size: 32px;
                    max-width: 300px;
                    &:before {
                        left: -26px;
                        top: -25px;
                        width: 100%;
                        height: 100px;
                    }
                    &:after {
                        right: 28px;
                        top: -20px;
                        width: 21px;
                        height: 36px;
                    }
                }
                .texte {
                    padding-right: 15px;
                    margin: 8px 0;
                    line-height: 24px;
                }
            }
            .products {
                margin-top: 20px;
                width: 100%;
                .swiper-button-prev {
                    left: 75px;
                }
                .swiper-button-next {
                    right: 75px;
                }
            }
        }
    }

    #slider-products-arranges-filtres {
        & .products {
            .swiper-button-prev {
                left: 75px;
            }
            .swiper-button-next {
                right: 75px;
            }
        }
    }

    .product {
        display: flex;
        justify-content: center;
        .miniature-delienn {
            width: 100%;
            max-width: 350px;
            & .block-image {
                & .product-thumbnail {
                    img {
                        max-height: 350px;
                        width: auto;
                    }
                }
                .rond-bouteille {
                    max-width: 230px;
                    height: 230px;
                }
            }
        }
    }
}

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

    #footer {
        margin-top: -20px;
    }

    #slider-products-arranges-filtres {
        & .container-flex {
            & .contenu {
                h2 {
                    font-size: 34px;
                    font-weight: normal;
                }
            }
            .texte {
                line-height: 24px;
            }
            .points-forts {
                min-width: 0;
                flex-wrap: wrap;
                justify-content: center;
                gap: 25px 0;
                .point-fort {
                    width: 50%;
                    padding: 0 8px;
                    border: none !important;
                    .texte {
                        font-size: 14px;
                        line-height: 18px;
                    }
                }
            }
        }
    }

    #accueil-cocktails {
        .content {
            min-width: 0;
            & .inner {
                .titre {
                    font-size: 60px;
                    line-height: 70px;
                    &:after {
                        right: -18px;
                        top: -8px;
                        width: 22px;
                        height: 30px;
                    }
                    & .titre {
                        right: -20px;
                        top: -7px;
                        width: 26px;
                        height: 30px;
                    }
                }
                .texte {
                    line-height: 24px;
                }
                .btns {
                    flex-direction: column;
                    align-items: center;
                }
            }
        }
    }
}