﻿.listContainer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #131121;
}

.warpTitleAriane {
    max-width: 1440px;
    margin: auto;
    width: 100%;
}

.listTitle {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
    color: var(--blanc);
}

.breadcrumb {
    padding: 20px 0 !important;
}

.titres_conteneur {
    max-width: 1380px;
    margin: auto;
    width: 100%;
    color: var(--blanc);
}

.cbk_pcgamer-list__top-gamer {
    background: linear-gradient(234deg, rgba(44, 88, 175, 0.60) -15.81%, rgba(57, 186, 255, 0.29) 10.74%, rgba(136, 199, 255, 0.33) 25.95%, rgba(40, 113, 192, 0.60) 68.57%) !important;
}

.cbk_pcgamer__top-gamer-cta {
    background: white !important;
}

.cbk_pcgamer-list__top-gamer-title, .cbk_pcgamer-list__top-gamer-description, .cbk_pcgamer-list__promo, .cbk_pcgamer-list__price {
    color: var(--blanc) !important;
}

.cbk_pcgamer__top-gamer-cta span {
    color: var(--noir) !important;
}

.swiper-button-next, .swiper-button-prev {
    font-weight: 900;
    color: var(--blanc) !important;
}

.toolbarContainer {
    display: flex;
    height: 71px;
    justify-content: center;
    align-items: center;
    background: #2A2548;
}

.showFiltersContainer {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1382px;
    justify-content: space-between;
    align-items: center;
}

.mobileToolbarContainer {
    display: none;
}

.showFiltersContent {
    display: flex;
    cursor: pointer;
    border-radius: 60px;
    background: #FFF;
    height: 57px;
    width: 225px;
    justify-content: center;
    gap: 12px;
    align-items: center;
}

.showFiltersTitle {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    color: #2A2548;
}

.sortMobileContent {
    display: none;
    align-items: center;
}

.sortContent {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.sortTitle {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--blanc);
}

.sortDropDown {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 215px;
    border-radius: 60px;
    height: 57px;
    border: 2px solid #FFF;
    cursor: pointer;
    gap: 10px;
}

.sortDropDownTitle {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    color: var(--blanc);
}

.sortOptions {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50px;
    background: #2A2548;
    border: solid 1px #fff;
    width: 100%;
    gap: 10px;
    border-radius: 15px;
    color: var(--blanc);
    padding: 10px;
    z-index: 5;
    margin-top: 10px;
    cursor: pointer;
}

.cbk_pcgamer-list__seo * {
    color: var(--blanc);
}

.cbk_pcgamer-list__seo {
    width: calc(100% - 80px);
    margin: 40px auto 20px;
}

.cbk_pcgamer-list__seo-list {
    width: calc(100% - 80px);
    padding-bottom: var(--val_20);
    margin-left: 40px;
    list-style: decimal;
}

    .cbk_pcgamer-list__seo-list li {
        width: calc(100% - 80px);
        font-size: calc(12px + (14 - 12) * (100vw - 320px) / (5120 - 320));
        line-height: 1.5;
    }

.cbk_pcgamer-list__seo-title {
    padding-bottom: var(--val_10);
    font-size: calc(14px + (20 - 14) * (100vw - 320px) / (5120 - 320));
}

.cbk_pcgamer-list__seo-subtitle {
    padding-bottom: var(--val_10);
    font-size: calc(14px + (20 - 14) * (100vw - 320px) / (5120 - 320));
}

.cbk_pcgamer-list__seo-pc-categorie {
    margin-left: 40px;
}

.cbk_pcgamer-list__seo-text {
    font-size: calc(12px + (14 - 12) * (100vw - 320px) / (5120 - 320));
    line-height: 1.5;
    padding-bottom: var(--val_20);
    margin-left: 5px;
}

.cbk_pcgamer-list__seo-text-list {
    font-size: calc(12px + (14 - 12) * (100vw - 320px) / (5120 - 320));
    line-height: 1.5;
    margin-left: 5px;
}

.cbk_pcgamer-list__seo-list li a,
.cbk_pcgamer-list__seo-text a {
    text-decoration: underline;
}

.popFilters {
    display: none;
}

.fond-pop {
    width: 100%;
    height: 100vh;
    background: #00000033;
    z-index: 9999 !important;
}

.yntd_close {
    width: 30px !important;
    height: 30px !important;
    background: #ffcf00 !important;
    border-radius: 0px !important;
    display: block !important;
    top: 0 !important;
    position: fixed !important;
    right: 0 !important;
    z-index: 99999 !important;
}

.popFilters .cbk_pop-up--container {
    max-width: 440px !important;
    align-items: unset !important;
    padding: 36px 43px 35px !important;
    flex-wrap: unset !important;
    right: 0px !important;
}

.filtersContainer {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.filtersListContainer {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filtersTitle {
    color: var(--blanc);
    font-family: Montserrat;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
}

.filtre-options-tout-effacer {
    display: none;
    font-size: 14px;
    color: var(--blanc);
    font-style: normal;
    font-weight: 300;
    line-height: 15px;
    text-decoration: underline;
    cursor: pointer;
}

.filterContent {
    display: flex;
    flex-direction: column;
}

.filtreOptionChk {
    display: none;
}

.TopVentesSection {

}

.filterTitle {
    display: flex;
    width: 100%;
    height: 40px;
    position: relative;
    border-radius: 4px;
    background: #131121;
    cursor: pointer;
    padding: 12px 16px;
    color: var(--blanc);
    font-size: var(--size_p);
    font-weight: var(--semibold);
    align-items: center;
    justify-content: space-between;
}

.filtreOptionChk:checked + .filterTitle::after {
    content: "|";
    color: #FFC600;
    font-size: 20px;
    right: 15px;
    transform: rotate(90deg);
    overflow: hidden;
}

.filterShowResults {
    display: flex;
    width: 100%;
    min-height: 40px;
    border-radius: 33px;
    background: #FFC600;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 15px;
    cursor: pointer;
}

.filterTitle::after {
    content: "+";
    color: #FFC600;
    transform: rotate(0deg);
    right: 11px;
    position: absolute;
    font-size: 25px;
    display: flex;
    height: var(--val_10);
    overflow: visible;
    align-items: center;
}

.filterChoicesList {
    display: none;
    flex-direction: column;
    padding-left: 35px;
    padding: 10px;
    gap: 10px;
}

.filterChoice {
    color: var(--blanc);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 13px;
    display: flex;
    gap: 5px;
    align-items: center;
}

    .filterChoice input:checked + label {
        font-weight: var(--semibold);
        text-decoration: underline;
    }

    .filterChoice input {
        cursor: pointer;
        accent-color: #FFE470;
    }

    .filterChoice label {
        cursor: pointer;
    }

.promosOption {
    display: flex;
    gap: 5px;
}

    .promosOption input {
        accent-color: #FFE470;
    }

.promosChkTitle {
    color: var(--blanc);
}

.filterSelectedContainer {
    display: flex;
    border-radius: 4px;
    background: #131121;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    padding: 13px 16px;
    gap: 10px;
}

.filterSelected {
    display: flex;
    border-radius: 22px;
    background: #363636;
    min-width: fit-content;
    height: 24px;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 5px 9px;
    color: var(--blanc);
    cursor: pointer;
}

    .filterSelected span {
        display: flex;
        height: 100%;
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 11px;
    }

    .filterSelected p {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 13px;
        color: var(--blanc);
    }

@media screen and (max-width: 1490px) {
    .titres_conteneur {
        padding: 0 20px;
    }

    .showFiltersContainer {
        margin: 0 20px;
    }
}

@media screen and (max-width: 1440px) {
    .warpTitleAriane {
        padding: 0 10px;
    }
}

@media screen and (max-width: 650px) {
    .sortMobileContent {
        display: flex;
        width: 100%;
    }

    .sortTitle {
        width: 35%;
    }

    .sortDropDown {
        width: 100%;
        height: 45px;
    }

    .toolbarContainer {
        display: none;
    }

    .mobileToolbarContainer {
        display: flex;
        width: 100%;
        height: 80px;
        background-color: var(--blanc);
        justify-content: center;
        align-items: center;
        position: fixed;
        bottom: 0;
        z-index: 1000;
    }

        .mobileToolbarContainer a {
            display: flex;
            width: 300px;
            height: 40px;
            justify-content: center;
            align-items: center;
            border-radius: 32px;
            border: 1px solid #000;
            background: #000;
            color: var(--blanc);
            cursor: pointer;
        }

    .popFilters .cbk_pop-up--container {
        padding: 30px 20px !important;
    }
}

@media screen and (max-width: 500px) {
    .titres_conteneur {
        padding: 0 10px;
    }
}
