﻿/* Sliders bannières */
.banners-group {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.thumbnails-container {
    z-index: 1;
    position: absolute !important;
    left: 50%;
    bottom: 5px;
    transform: translate(-50%, 110%);
    transition: transform .3s;
}
.banners-group:hover .thumbnails-container {
    transform: translate(-50%, 0);
}
.thumbnails-container .swiper-slide {
    width: 105px !important;
    height: 72px !important;
    border: 1px solid #fff;
    background-color: #000;
    border-radius: .625rem;
    overflow: hidden;
}
.thumbnails-container .swiper-slide:hover {
    cursor: pointer;
}
.thumbnail-image {
    opacity: 0.5;
    transition: opacity .3s;
}
.thumbnails-container .swiper-slide:hover .thumbnail-image {
    opacity: 1;
}
/* Fin de liders bannières */
/* Sliders produits */
.cbk__home__slider-product__container {
    display: flex;
    flex-direction: column;
}

.cbk__home__slider-product__container__title {
    width: 300px;
    margin: auto;
    background: var(--jaune);
    font-weight: var(--semibold);
    text-align: center;
    line-height: var(--val_35);
    border-radius: 10px 10px 0 0;
}

.cbk_slider__swiper__container {
    max-width: 1600px;
    width: 100%;
    padding: 20px !important;
    background-color: var(--blanc);
    border-radius: 20px;
}

.cbk__home__slider-product__container__title {
    width: 300px;
    margin: 20px auto 0;
    background: var(--jaune);
    font-weight: var(--semibold);
    text-align: center;
    line-height: var(--val_35);
}

    .cbk__home__slider-product__container__title a {
        display: block;
        text-transform: uppercase;
    }
/*************** Slider *****************/


/***************** PUB *******************/
.cbk__home__pub {
    margin: var(--marg_25_0);
    display: flex;
    gap: var(--val_25);
    contain: layout;
}

.cbk__home__pub__container-left {
    width: 44%;
    display: flex;
}

.cbk__home__pub__container-right {
    width: 56%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .cbk__home__pub__container-left img, .cbk__home__pub__container-right img {
        width: 100%;
    }

/******************** Texte SEO *******************/

.cbk__home__seo {
    margin: 25px 0
}

    .cbk__home__seo h1, .cbk__home__seo h2 {
        margin-bottom: var(--val_20);
        font-family: 'Outfit', sans-serif;
        text-transform: uppercase;
        font-weight: var(--medium);
        font-size: var(--size_h3);
        color: var(--gris_200);
    }

    .cbk__home__seo p {
        text-align: justify;
        font-size: var(--size_p);
        line-height: 16px;
    }

/******************** Encarts *******************/

.cbk__home__encarts {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    gap: var(--val_10);
    contain: layout;
}

    .cbk__home__encarts div {
        width: 25%;
        border-radius: 1.25rem;
        overflow: hidden;   
    }

        .cbk__home__encarts div a {
            width: 100%
        }

            .cbk__home__encarts div a img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

/******************** Content Info Bandeau *******************/

.cbk__home__content-info-bandeau {
    width: 100%;
    padding: var(--marg_15_0);
    overflow: hidden;
    background: var(--noir);
    display: block;
}

    .cbk__home__content-info-bandeau div ul {
        display: flex;
        justify-content: space-between;
        gap: var(--val_10);
    }

        .cbk__home__content-info-bandeau div ul li {
            width: 20%;
        }

            .cbk__home__content-info-bandeau div ul li a {
                line-height: 16px;
                color: var(--blanc);
                font-size: var(--size_p);
                font-weight: var(--semibold);
                text-transform: uppercase;
                display: flex;
                gap: var(--val_10);
            }

                .cbk__home__content-info-bandeau div ul li a p {
                    line-height: 16px;
                    color: var(--blanc);
                    font-size: var(--size_p);
                    font-weight: var(--semibold);
                    text-transform: uppercase;
                }

                .cbk__home__content-info-bandeau div ul li a span {
                    display: block;
                    color: var(--jaune);
                    text-transform: uppercase;
                }

                .cbk__home__content-info-bandeau div ul li a img {
                    margin-top: auto;
                    margin-bottom: auto;
                }


/********************  Menu Categorie *******************/

.cbk__home__menu-categorie {
    margin-top: var(--val_10);
    margin-bottom: var(--val_10);
}

    .cbk__home__menu-categorie ul {
        display: flex;
        justify-content: space-between;
        gap: var(--val_10);
    }

        .cbk__home__menu-categorie ul li {
            width: 25%;
            border: 1px solid #c2c2c2;
            overflow: hidden;
            background: var(--blanc);
            border-radius: 1.25rem;
        }

            .cbk__home__menu-categorie ul li a {
                width: 100%;
            }

                .cbk__home__menu-categorie ul li a img {
                    width: 100%;
                    object-fit: cover;
                }

            .cbk__home__menu-categorie ul li div {
                line-height: 22px;
                background: var(--blanc);
                padding-bottom: var(--val_10);
            }

                .cbk__home__menu-categorie ul li div h2:first-child {
                    text-transform: uppercase;
                    font-weight: var(--semibold);
                    margin-top: -35px;
                    text-align: center;
                    background: rgba(0,0,0,0.8);
                    position: relative;
                    line-height: var(--val_35);
                    padding: 0;
                    font-size: 16px;
                    color: var(--jaune);
                }

                .cbk__home__menu-categorie ul li div h3 {
                    width: 100%;
                    text-align: center;
                }

                    .cbk__home__menu-categorie ul li div h3 a {
                        padding: 0 10px;
                        font-size: var(--size_p);
                        font-weight: var(--semibold);
                        text-align: center;
                        color: #545454;
                    }

.cyb-home__revive-banner {
    border-radius: 1.25rem;
    overflow: hidden;
}
.cyb-home__revive-banner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/********************  Warp *******************/
.cbk__home__warp {
    width: 1600px;
    margin: 0 auto;
}

/********************  Background *******************/

.cbk__home__background {
    background: var(--gris_50);
    margin: 0 auto;
    overflow: hidden;
}

.cbk__home__background__w {
    background: #ffffff;
    margin: 0 auto;
    overflow: hidden;
}

/********************  Bandeau *******************/

.cbk__home__content-bandeau-info {
    padding-bottom: var(--val_10);
    padding-top: var(--val_10);
}

    .cbk__home__content-bandeau-info ul {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 15px;
    }

        .cbk__home__content-bandeau-info ul li {
            display: flex;
        }

            .cbk__home__content-bandeau-info ul li p {
                display: flex;
                flex-direction: column;
                font-size: var(--size_p);
                text-transform: uppercase;
                font-weight: var(--semibold);
                justify-content: center;
            }

                .cbk__home__content-bandeau-info ul li p span {
                    font-size: var(--size_p);
                    color: var(--gris_200);
                    text-align: left;
                    display: block;
                }

            .cbk__home__content-bandeau-info ul li svg {
                margin-right: var(--val_10);
            }

.cbk_revive__container {
    width: 100%;
    border-radius: 1.25rem;
    overflow: hidden;
}

    .cbk_revive__container img {
        width: 100%;
        height: auto;
    }
/*********** Responsive **********/
@media screen and (max-width: 1920px) {
    .cbk__home__warp {
        width: 1280px;
    }
}

@media screen and (max-width: 1300px) {
    .cbk__home__warp {
        width: 1000px;
    }

    .cbk__home__content-bandeau-info ul li p {
        font-size: 11.5px;
    }

        .cbk__home__content-bandeau-info ul li p span {
            font-size: var(--size_p);
        }

    .cbk__home__content-info-bandeau div ul li a p {
        font-size: var(--size_h6);
    }

    .cbk__home__content-info-bandeau div ul li a img {
        height: 26px;
    }
}

@media screen and (max-width: 1620px) {
    .cbk_slider__swiper__container {
        padding: 20px 10px !important;
        width: auto;
    }
}

@media screen and (max-width: 1024px) {
    .cbk__home__warp {
        width: 940px;
    }

    .cbk__home__content-info-bandeau div ul li a p {
        font-size: var(--size_p);
    }
}

@media screen and (max-width: 960px) {
    .cbk__home__warp {
        width: 768px;
    }

    .cbk__home__content-bandeau-info ul {
        padding: 0;
    }

    .cbk__home__content-info-bandeau div ul {
        justify-content: center;
        flex-wrap: wrap;
    }

        .cbk__home__content-info-bandeau div ul li {
            width: 25%;
        }
}

@media screen and (max-width: 768px) {
    .cbk__home__warp {
        width: calc(100% - 40px);
    }

    .cbk__home__background__w {
        display: none;
    }

    .cbk__home__menu-categorie ul {
        flex-wrap: wrap;
        gap: 0;
    }

        .cbk__home__menu-categorie ul li {
            width: 49%;
        }



    .cbk__home__pub {
        flex-direction: column;
    }

    .cbk__home__pub__container-left, .cbk__home__pub__container-right {
        width: 100%;
    }

    .cbk__home__pub__container-right {
        gap: var(--val_15);
    }

    .cbk__home__encarts {
        flex-wrap: wrap;
        gap: 0;
    }

        .cbk__home__encarts div {
            width: 49%;
        }

    #button-absolute-faq {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .cbk__home__content-info-bandeau {
        display: none;
    }

    .cbk__home__slider-product {
        display: flex;
        flex-direction: column;
        gap: var(--val_30);
    }

    .cbk__home__warp {
        width: 100%;
    }

    .cbk__home__background {
        padding: var(--marg_0_20);
    }

    .cbk__home__menu-categorie ul {
        gap: var(--val_15);
    }

        .cbk__home__menu-categorie ul li {
            width: 100%;
        }

            .cbk__home__menu-categorie ul li div p a {
                font-size: var(--size_p);
                line-height: 1.9;
            }

    .cbk__home__seo h1, .cbk__home__seo h2 {
        font-size: var(--size_h4);
    }
}
