:root {
    --primary-red: #C91D1D;
    --primary-gray: #6C6B6B;
    --primary-green: #00BB55;
}

.content {
    background: var(--blanc);
}

.cbk_pc-config__global-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 30px;
    justify-content: space-evenly;
}

.cbk_pc-config__title {
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 700px;
    font-size: var(--size_h1);
    font-weight: var(--semibold);
    margin: 0 auto;
}

.cbk_pc-config__products,
.cbk_pc-config__product-list {
    width: 100%;
}

.cbk_pc-config__products {
    padding: var(--marg_30_0);
}

.cbk_pc-config__product-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--val_20);
}

.container-filtre {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.filtre-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--val_15);
}

.container-filtre select {
    background: #ffffff00;
    padding: 5px 10px;
    border: #ffcf00 solid 1px;
    cursor: pointer;
}

    .container-filtre select:active {
        border: #ffcf00 solid 1px;
        background: #ffffff00;
        color: var(--blanc);
        padding: 5px 10px;
    }

.filtre_title_container {
    display: none;
    padding: 5px 10px;
    border: solid 1px var(--jaune);
    cursor: pointer;
}

.aucun_resultat_text {
    width: 100%;
    max-width: 900px;
}

#gpu {
    width: 150px;
}

.container-filtre input {
    display: none;
}

.container-filtre option {
    width: 150px;
    color: var(--noir);
    font-family: 'Montserrat';
    font-size: var(--size_p);
    background-color: var(--blanc);
}

select[name="filtre-gamme"] option:active {
    background-color: var(--rouge);
    font-weight: var(--semibold);
}

#aucun-resultat p {
    color: var(--jaune);
    font-size: 28px;
    font-weight: var(--semibold);
    padding-top: var(--val_40);
}

.cbk_pcgamer__filter-title {
    padding-bottom: 20px;
    font-size: var(--val_20);
    color: var(--primary-text-white);
}

#reinitialiser-filtres--duplicat,
#reinitialiser-filtres, #promo {
    background-color: var(--jaune);
    padding: 5px 10px;
    color: var(--noir);
    font-weight: var(--semibold);
    font-size: var(--size_p);
    border: var(--noir);
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
}

    label[for="filtre-promo"]:hover,
    #reinitialiser-filtres:hover,
    #reinitialiser-filtres--duplicat:hover,
    #promo:hover {
        background-color: #ffe783;
    }

.container-filtre input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

label[for="filtre-promo"] {
    background-color: var(--jaune);
    padding: 5px 10px;
    color: var(--noir);
    font-weight: var(--semibold);
    font-size: var(--size_p);
    cursor: pointer;
    z-index: 1;
}

.open {
    display: flex !important;
}

.filtre-wrapper .open > .filtre_title_container {
    border: none;
}

.filtre_title_container.rotate-arrow:after {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.filtre_title_container.rotate-arrow {
    border: none;
}

select:first-of-type {
    font-weight: var(--semibold);
}

/* style de <li> produits */
.cbk_pc-config__product-list-item {
    width: 30%;
    height: 360px;
    border: 1px solid var(--noir);
}

/* style de <a> produits */
.cbk_pc-config__product-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* style de conteneur <img> produits */
.cbk_pc-config__img-container {
    width: 350px;
    height: 350px;
}

/* style de <img> produits */
.cbk_pc-config__product-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* style de liste caractère pc */
.cbk_pc-config__carac-list {
    min-height: 180px;
}

.cbk_pc-config__product-carac {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 180px;
    width: 100%;
    height: 100%;
}

.cbk_pc-config__product-title,
.cbk_pc-config__product-subtitle {
    text-transform: uppercase;
}

.cbk_pc-config__product-subtitle {
    font-size: var(--size_p);
}

.cbk_pc-config__product-title {
    font-size: var(--val_20);
    font-weight: var(--semibold);
}

.cbk_pc-config__carac {
    display: flex;
    align-items: center;
    column-gap: var(--val_15);
    min-height: var(--val_30);
    font-size: var(--size_p);
    color: var(--primary-gray);
}

/* icones de carac */
.cbk_pc-config__icon {
    max-width: var(--val_20);
    max-height: var(--val_20);
}
/* prix */
.cbk_pc-config__price-info {
    min-width: 160px;
}

.cbk_pc-config__price {
    font-size: var(--val_30);
    font-weight: var(--semibold);
    color: var(--noir);
}

    .cbk_pc-config__price sup {
        font-size: var(--val_20);
    }

.cbk_pc-config__prix-barre ~ .cbk_pc-config__price {
    color: var(--primary-red);
}

.cbk_pc-config__prix-barre {
    position: relative;
    max-width: 130px;
    font-size: 16px;
    font-weight: var(--semibold);
    color: var(--primary-gray);
    overflow: hidden;
    width: fit-content;
}

    .cbk_pc-config__prix-barre:after {
        content: '';
        position: absolute;
        top: 50%;
        left: -10px;
        height: 2px;
        width: 100%;
        background-color: var(--primary-red);
        transform: rotate(-7deg);
    }

.cbk_pc-config__stock {
    font-size: var(--size_p);
    font-weight: var(--semibold);
    color: var(--primary-green);
    text-transform: uppercase;
}

.cbk_pc-config__seo {
    padding: 0 60px 0 60px;
}

    .cbk_pc-config__seo p {
        line-height: 1.2;
    }

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


    .cbk_pc-config__seo {
        padding: 0 var(--marg_10_20);
    }
}

.warp_pc-bureautique {
    width: 100%;
    max-width: 1920px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.cbk_pc-config__img-container-a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding: var(--val_20);
}

@media screen and (max-width: 1024px) {
    .filte_title {
        color: var(--blanc);
    }

    .filtre-wrapper {
        display: none;
        flex-direction: column !important;
        width: 80%;
    }

        .filtre-wrapper div {
            width: 100%;
        }

    #gpu {
        width: 100% !important;
    }

    .container-filtre {
        height: auto !important;
        justify-content: space-between !important;
    }

        .container-filtre select {
            width: 100%;
        }

    label[for="filtre-promo"], #reinitialiser-filtres, #reinitialiser-filtres--duplicat, #promo {
        display: block;
        width: 100%;
        text-align: center;
    }

    .cbk_pcgamer__filter-title {
        display: none;
    }

    .filtre_title_container {
        display: flex;
        padding-bottom: 10px !important;
        padding-top: 10px !important;
        align-items: center;
        width: 100px;
        justify-content: space-around;
    }

        /*filtre menu fermer en responsive*/
        .filtre_title_container:before {
            content: "Filtres";
            font-weight: var(--semibold);
        }

        .filtre_title_container:after {
            content: url(/images/arrow-fiche-prod.svg);
            font-weight: var(--semibold);
            font-size: var(--size_p);
            transition: all .3s;
            display: inline-block;
            filter: brightness(0) saturate(100%) invert(0%) sepia(99%) saturate(4%) hue-rotate(5deg) brightness(98%) contrast(104%);
        }
}

@media screen and (max-width: 1280px) {
    .cbk_pc-config__product-list-item {
        height: unset;
        width: 40%;
    }

    .cbk_pc-config__img-container-a {
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    .cbk_pc-config__product-list-item {
        width: 60%;
    }
}

@media screen and (max-width: 500px) {
    .cbk_pc-config__product-list-item {
        width: calc(100% - 80px);
    }
}

@media screen and (max-width: 400px) {
    .cbk_pc-config__product-list-item {
        height: unset;
    }
}