.brandsFilter {
    position: relative
}

.brandsFilter article {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 40%;
    margin: 20px 24.8% 0 10%;
    padding: 0 0 3px 3px
}

@media (max-width: 1300px) {
    .brandsFilter article {
        margin: 20px 5%
    }
}

@media (max-width: 500px) {
    .brandsFilter article {
        margin: 20px 2%
    }
}

.brandsFilter article a {
    font-size: .64rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    display: inline-block;
    background-color: #014389;
    margin: 3px 3px 0 0;
    padding: 5px 6px 6px;
    transition: .4s
}

.brandsFilter article a:hover {
    background-color: #fde900;
    color: #014389
}

.brandsFilter article .active {
    background-color: #fde900;
    color: #014389
}

.AvArFilter {
    position: absolute;
    right: 25%;
    top: 0;
    font-size: .8rem
}

.brandsFilter .AvArFilter a {
    font-size: .64rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    display: inline-block;
    background-color: #6a6f75;
    margin: 3px 0 0;
    padding: 5px 6px 6px;
    transition: .4s
}

.brandsFilter .AvArFilter a:hover {
    background-color: #fde900;
    color: #014389
}

.brandsFilter .AvArFilter .active {
    background-color: #fde900;
    color: #014389
}

@media (max-width: 1400px) {
    .AvArFilter {
        right: 26%
    }
    .brandsFilter article {
        margin: 20px 24.8% 0 5%
    }
}

@media (max-width: 1300px) {
    .AvArFilter {
        right: 5%
    }
}

@media (max-width: 970px) {
    .brandsFilter article {
        width: 54%
    }
}

@media (max-width: 860px) {
    .brandsFilter article {
        width: 90%
    }
    .AvArFilter {
        margin-top: -30px;
        left: 5%;
        right: auto
    }
}

.ListSeparator {
    background-color: #161615;
    margin: 0 5% 10px;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .2vw;
    font-size: .84rem;
    text-shadow: 1px 1px red;
    border-left: 4px solid #ef5e18;
    cursor: pointer
}

.ListSeparator .fas {
    color: var(--color-1)
}

.listItems {
    display: flex;
    margin: 8px 5%;
    min-height: 200px
}

.listItems article {
    border: 1px var(--color-1) solid;
    flex: 7;
    display: flex
}

.LI_imgBox {
    width: 25%;
    display: flex;
    position: relative
}

.listItems article a {
    color: #000
}

.LI_imgBox .marque {
    padding: 2rem 0;
    object-fit: contain;
    width: 30%
}

.LI_imgBox .prod {
    width: 66%
}

.LI_imgBox img {
    max-height: 200px;
    object-fit: contain;
    padding: 1%
}

.LI_content {
    display: flex;
    flex-direction: column;
    width: 75%;
    padding: 1% 2% .5%;
    border-left: 1px dashed var(--color-1)
}

.LI_content div {
    display: flex;
    align-items: center
}

.LI_head {
    justify-content: space-between
}

.priceBox {
    display: flex;
    align-items: flex-end;
    width: 100%;
    flex: 1;
    justify-content: space-between;
    align-self: flex-start
}

.priceBox span {
    margin-left: 8px
}

.LI_head h2 {
    font-size: 1.18rem;
    font-weight: 600;
    margin: 0;
    margin-right: 1rem;
    line-height: 1.2;
    padding-bottom: 8px;
    text-transform: uppercase
}

.LI_head p {
    margin: 0;
    margin-left: 1rem;
    white-space: nowrap
}

.LI_content .promo {
    background: #ffd700;
    font-size: .9rem;
    font-weight: 600;
    padding: 4px 1em;
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
    margin: 5px 2px
}

.LI_content .price {
    font-weight: 700;
    font-size: 1.8rem;
    white-space: nowrap
}

.normalPrice {
    white-space: nowrap;
    margin-left: auto!important
}

.conditionsPrice {
    display: none;
    white-space: nowrap;
    margin-left: auto!important
}

.LI_content .priceConditions {
    font-weight: 500;
    font-size: .9rem;
    color: #696969;
    white-space: nowrap;
    margin-left: auto;
    border-radius: 3px;
    margin-right: 2vw;
    display: inline-block
}

.LI_content .priceConditions sup {
    font-weight: 700;
    font-size: .6em
}

.LI_content .price_ttc_cndt {
    display: inline-block;
    font-size: 3rem;
    font-weight: 700;
    color: #000;
    border-radius: 4px;
    margin-top: 5px;
    margin-left: auto;
    white-space: nowrap;
    margin-right: 12px
}

.LI_content .price_ttc_cndt sup {
    font-weight: 700;
    font-size: .6em
}

.LI_content .price sup {
    font-size: .9rem
}

.LI_content .initialPrice {
    color: #9d9d9d;
    font-size: .9em;
    font-weight: 400;
    width: 100%;
    text-align: right
}

.LI_body {
    justify-content: space-between
}

.LI_body>p {
    font-weight: 300;
    margin: 0;
    max-width: 70%
}

.LI_body p {
    margin: 0;
    font-size: .7rem;
    font-weight: 600
}

.LI_body>h3 {
    font-weight: 300;
    margin: 0;
    max-width: 70%
}

.LI_body h3 {
    margin: 0;
    font-size: .7rem;
    font-weight: 600
}

.LI_body .stock,
.LI_body .outOfStock,
.LI_body .lastItems {
    font-size: .64rem;
    font-weight: 600;
    padding: 4px 0;
    border-radius: 200px
}

.LI_body .stock {
    color: #4aad12;
    text-transform: uppercase;
    font-size: 1.2em;
    padding-top: 5px
}

.LI_body .outOfStock {
    color: #cc3f26;
    text-transform: uppercase;
    font-size: 1em;
    text-align: right
}

.LI_body .lastItems {
    color: orange;
    text-transform: uppercase;
    font-size: 1em
}

.stock p {
    margin: 0
}

.outOfStock i,
.lastItems i {
    margin-right: .5rem
}

.stock i {
    background-color: #4aad12;
    color: #000;
    border-radius: 50%;
    margin-right: .5rem
}

.LI_bottom {
    margin-top: auto;
    align-items: flex-end!important
}

.LI_bottom .cart {
    flex: 1
}

.LI_bottom .pConn {
    font-size: .8em;
    font-weight: 500;
    color: #6a95c3;
    line-height: 1.2em;
    padding-bottom: 4px;
    display: none;
    flex: 3
}

.LI_bottom .pConn .fas {
    font-size: 1.1em;
    margin: 0 3px 3px 0;
    color: #777
}

.LI_bottom .pConn a {
    font-weight: 600;
    text-decoration: underline;
    padding-left: 1em
}

.LI_bottom .pConn a:hover {
    text-decoration: none;
    color: #555
}

.LI_bottom .pConn span {
    color: var(--color-1)
}

.expert,
.kit {
    position: relative
}

.kit {
    font-size: .74rem;
    color: #014389;
    flex: none;
    position: relative;
    display: block;
    cursor: pointer
}

.kit,
.kit a,
.kit a:hover {
    color: var(--color-2)
}

.kit a {
    display: block;
    width: 100%;
    color: #062f5a!important;
    font-weight: 600!important;
    font-size: 1em;
    padding: 4px;
    border-radius: 200px;
    text-decoration-line: underline;
    text-decoration-style: dashed
}

.kit .k-content {
    font-size: .6rem;
    font-weight: 700;
    float: left;
    position: relative;
    min-width: 340px;
    max-width: 80%;
    display: none;
    visibility: hidden;
    margin: 10px 0;
    padding: 7px 10px;
    border: 1px solid #c7c7c7;
    position: absolute;
    bottom: -5px;
    left: 10px;
    background-color: #f4f8fb;
    line-height: 1.5em;
    border-radius: 5px;
    cursor: pointer;
    -webkit-box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2)
}

.kit .k-content p {
    margin: 0
}

.kit:hover .k-content {
    display: block;
    visibility: visible
}

.expertMsg {
    position: absolute;
    background-color: #fff;
    bottom: 100%;
    left: 10%;
    border: 2px var(--color-2) solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    width: fit-content
}

.expertMsg q {
    font-size: 1rem
}

.counter {
    justify-content: center;
    margin-left: auto;
    align-self: end;
    margin-bottom: .5em
}

.counter>div {
    border: 1px #999 solid;
    background: #eee;
    padding: .3rem .5rem;
    justify-content: space-between!important
}

.counter i {
    font-size: 1.8em;
    margin: 0 .3rem;
    cursor: pointer
}

.counter input {
    font-weight: 700;
    font-size: 1.2em;
    line-height: 1.5em;
    border: none;
    padding: 0;
    outline: none;
    width: 4.2rem;
    text-align: center;
    margin-left: 1rem;
    background: #eee
}

.LI_bottom .cart {
    justify-content: flex-end
}

.LI_bottom .cart a {
    display: flex
}

.LI_bottom img {
    height: 40px
}

.LI_aside {
    flex: 2;
    margin-left: 1%;
    border: 1px #000 solid;
    padding: 4px 0 4px 4px;
    position: relative;
    opacity: 0;
    transition: .3s ease
}

.listItems aside p {
    margin: 0;
    font-size: 10px
}

.listItems aside h6 {
    margin: 0;
    font-size: 11px;
    color: orange;
    margin-bottom: 8px
}

.listItems aside i {
    position: absolute;
    top: 8px;
    right: 8px
}

.cataList {
    padding: 1% 5%;
    background: #fff;
    border-bottom: 3px var(--color-1) solid;
    box-shadow: 0 10px 7px #ddd;
    background: var(--grey-theme)
}

.cataList aside {
    padding: 8px
}

.cataList aside>div {
    display: flex;
    align-items: center;
    border: 1px #000 solid;
    margin: 4px 0;
    cursor: pointer;
    transition: .3s all ease;
    width: 350px;
    height: 45px;
    overflow: hidden;
    background: #fff
}

.cataList aside>div.actCat {
    background: var(--color-1)
}

.cataList aside>div:hover {
    background: var(--color-1);
    border: 1px #000 dashed
}

.cataList img {
    height: 26px;
    margin-left: 12px
}

.cataList aside h4 {
    margin: 0;
    margin-left: .5rem;
    line-height: 1.3em;
    font-size: .92rem
}

.cataList .refFinder {
    width: 700px;
    max-width: 90vw;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px var(--color-2) solid;
    margin: auto;
    margin-bottom: 1rem
}

.cataList .refFinder:hover {
    background: #fff
}

.cataList .refFinder .blueBtn {
    font-size: 1em
}

.cataList .refFinder input {
    width: auto;
    flex: 1;
    margin-left: 8px;
    font-size: .8rem
}

.LI_content .legendBox div p {
    border-bottom: 1px dashed #c7c7c7;
    padding: 4px
}

.LI_content .legendBox div p:hover {
    background-color: rgba(0, 0, 0, 0.04)
}

.LI_content .legendBox div p span:first-child {
    font-weight: 400
}

.listItems.mxh-none {
    max-height: none!important
}

.section_more_ref {
    text-align: center;
    width: 100%
}

.more_refs {
    background-color: #fff;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 39%, rgba(240, 240, 240, 0.3113620448179272) 100%);
    max-height: none
}

.more_refs article {
    border: 1px dashed #3184dc;
    text-align: left
}

.more_refs h3 {
    color: #014389
}

.more_refs_title {
    text-align: center;
    background-color: #014389;
    color: #fff;
    padding: 20px;
    font-size: 1.2rem;
    margin-top: 30px
}

.more_refs_title span {
    font-size: .8rem
}

.more_ref_error_msg {
    margin: 40px;
    color: #888;
    border: 1px dashed #888;
    padding: 10px
}

.btn_more_refs {
    display: inline-block;
    border: 1px solid var(--color-2);
    padding: 14px 24px;
    background-color: var(--color-2);
    color: #fff;
    width: 500px;
    max-width: 100vw;
    margin: 45px 0;
    cursor: pointer;
    -webkit-box-shadow: 0 0 9px -4px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0 0 9px -4px rgba(0, 0, 0, 0.75);
    box-shadow: 0 0 9px -4px rgba(0, 0, 0, 0.75);
    transition: .5s ease
}

.btn_more_refs:hover {
    background-color: #fff;
    color: var(--color-1)
}

.section_more_ref .brandsFilter .more_ref_bf {
    width: 80%
}

.section_more_ref .legendBox {
    max-height: 90px;
    overflow: hidden
}

.bxMsg {
    width: 95.8%;
    margin: 5px 0 10px 1%;
    line-height: 1.2em;
    padding: 10px 8px;
    font-size: .8rem;
    font-family: "Encode Sans Expanded", "Segoe UI", Arial, sans-serif;
    font-weight: 400;
    border: 1px dashed #8c8c8c
}

.listingAndFilter {
    display: flex;
    align-items: flex-start;
    margin-top: 1rem
}

.listingAndFilter .listItems:first-child {
    margin-top: 0
}

/*.listingAndFilter a, */
/*.listingAndFilter .pieceTitle {*/
/*    display: none;*/
/*}*/

.filterAside {
    display: flex;
    flex: 2;
    background: #ebebeb;
    margin-left: 3%;
    padding: 1.5rem 2rem;
    max-height: calc(95vh - 100px);
    position: sticky;
    top: 5vh;
    margin-bottom: 1.5rem;
    color: #333;
    overflow: auto;
    border-radius: 5px
}

.filterAside h4 {
    text-transform: uppercase;
    margin: 0 0 8px;
    text-align: center
}

.filterAside p {
    margin: 0;
    margin-bottom: .5rem;
    color: #000;
    padding: 3px 5px;
    font-size: 1em;
    font-weight: 600;
    color: var(--color-1);
    font-weight: 700
}

.filterAside input[type="submit" i] {
    border: 1px solid var(--color-2);
    background-color: var(--color-2);
    color: #fff;
    padding: 4px 20px;
    border-radius: 3px;
    font-size: .9em;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 7px
}

.filterAside input[type="submit" i]:hover {
    border: 1px solid #444;
    background-color: #444
}

.filterAside div {
    display: flex;
    flex-direction: column;
    font-weight: 500
}

.filterAside .lesmarques {
    border-bottom: 1px dotted #999;
    padding-bottom: 1rem
}

.filterAside .lesmarques span {
    color: #999;
    cursor: pointer;
    font-size: .9em
}

.filterAside .lesmarques span:hover {
    color: #000
}

.filterAside label {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: .92em
}

.filterAside a {
    margin: 0 4px 0 0;
    padding: 2px 7px;
    color: var(--color-2);
    border-bottom: 0;
    font-size: .83em
}

.filterAside a .fas {
    opacity: .6
}

.filterAside a:hover {
    background-color: var(--color-2);
    color: #fff
}

.filterAside input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 10px
}

.filterAside .lesmarques input[type="checkbox"] {
    float: left
}

.filterAside .lesmarques label {
    display: inline-block;
    align-items: center;
    font-weight: 500;
    margin-top: 3px;
    min-height: 20px;
    padding: 0;
    float: left;
    font-size: .9em;
    font-weight: 500
}

.filterAside .lesmarques .fas {
    font-size: .9em
}

.ArianeProAdvice {
    display: flex
}

.ArianeProAdvice .filArianne {
    flex: 1
}

.filArianne h1 {
    padding: 0;
    margin: -2px 0 0;
    font-size: 1em;
    font-weight: 500
}

.filArianne h2 {
    padding: 0 6px 0 0;
    margin: -2px 0 0;
    font-size: 1em;
    font-weight: 500
}

.conseil_pro {
    margin-left: auto;
    margin-right: 5%;
    background: var(--color-1);
    border: 2px var(--color-1) solid;
    height: 43px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    text-transform: uppercase;
    transition: .5s ease;
    cursor: pointer;
    font-weight: 600
}

.conseil_pro:hover {
    background: #fff;
    color: var(--color-2);
    border: 2px var(--color-2) solid
}

.conseil_pro img {
    margin-right: 4px;
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%
}

@media all and (max-width: 1700px) {
    .LI_content .price_ttc_cndt {
        font-size: 2.2rem
    }
}

@media all and (max-width: 1500px) {
    .LI_head h3 {
        font-size: 1.5rem;
        margin-right: .5rem
    }
    .LI_head p {
        margin: 0;
        margin-left: .5rem
    }
    .LI_content .promo {
        font-size: 1.1rem
    }
    .LI_content .price {
        font-size: 1.5rem
    }
    .LI_content .price sup {
        font-size: .7rem
    }
}

@media all and (max-width: 1400px) {
    .listItems {
        margin: 1% 5%
    }
    .LI_head p {
        margin-left: .5rem;
        font-size: .9rem
    }
    .LI_content .promo {
        font-size: 1.1rem
    }
    .LI_content .price {
        font-size: 1.8rem
    }
    .LI_content .price sup {
        font-size: .8rem
    }
    .LI_content .initialPrice {
        font-size: .9rem
    }
    .LI_content {
        padding: 1% .5% .5%
    }
}

@media all and (max-width: 1300px) {
    .listItems {
        flex-direction: column;
        height: unset;
        min-height: unset;
        max-height: unset
    }
    .listItems article {
        height: unset;
        flex: unset
    }
    .listItems aside {
        display: none;
        flex: unset
    }
    .LI_head h3 {
        font-size: 1.3rem;
        margin-right: .5rem
    }
    .LI_content .flexstart {
        margin: 8px 0;
        flex-wrap: wrap
    }
    .filterAside {
        padding: 1rem;
        flex: 3
    }
}

@media all and (max-width: 1200px) {
    .cataList {
        padding: 0 1% 1%
    }
    .listItems {
        margin: 1% 2%
    }
}

@media all and (max-width: 1100px) {
    .filterBar .refFinder input {
        font-size: .8rem
    }
    .filterBar {
        flex-wrap: wrap
    }
}

@media all and (max-width: 968px) {
    .listItems p {
        margin: 0
    }
    .LI_head {
        flex-wrap: wrap
    }
    .LI_head>div {
        width: 100%;
        order: 1
    }
    .LI_bottom {
        flex-wrap: wrap
    }
    .LI_bottom>* {
        flex: unset
    }
    .LI_bottom .expert {
        width: 100%
    }
    .LI_bottom .kit {
        width: 100%
    }
    .listItems article {
        height: auto
    }
    .expert,
    .outOfStock {
        font-size: .9em
    }
    .filterBar .refFinder {
        width: 100%;
        margin-top: .5rem
    }
    .cata {
        flex-direction: column
    }
    .cata aside {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }
    .cata aside>div {
        width: 32.5%
    }
}

@media all and (min-width: 850px) {
    .filterAside .closeFilters {
        display: none
    }
    .btnShowFilter {
        display: none
    }
    .bgFiltersPanel {
        display: none
    }
}

@media all and (max-width: 850px) {
    .listingAndFilter {
        flex-direction: column
    }
    
    .listingAndFilter a {
        display: block;
    }
    
    .bgFiltersPanel {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
        cursor: pointer;
        z-index: 7
    }
    .filterAside {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 50%;
        height: 100vh;
        margin: 0!important;
        z-index: 8;
        border-right: 4px solid var(--color-2);
        max-height: unset
    }
    .filterAside .closeFilters {
        position: absolute;
        top: 1rem;
        right: 1rem;
        cursor: pointer;
        font-size: 1.7rem
    }
    .btnShowFilter {
        padding: .5rem 1rem;
        border: 1px solid var(--color-2);
        color: var(--color-2);
        font-weight: 700;
        cursor: pointer;
        text-align: center;
        margin: auto;
        margin-bottom: 1rem
    }
}

@media all and (max-width: 768px) {
    .priceBox {
        flex-wrap: wrap
    }
    .cata aside>div {
        width: 49%
    }
    .counter {
        margin-bottom: 0
    }
    .legendBox {
        min-width: 100%
    }
    .counter {
        margin: auto
    }
    .flex10.theListing {
        width: 100%
    }
}

@media all and (max-width: 500px) {
    .LI_imgBox .prod {
        height: 150px
    }
    .LI_imgBox .marque {
        position: absolute;
        bottom: 0;
        right: 0;
        max-width: 50%;
        padding: 0
    }
    .LI_content {
        width: 100%;
        justify-content: space-evenly
    }
    .LI_content .price {
        font-size: 1.4rem
    }
    .LI_head h3 {
        font-size: 1.3rem
    }
    .LI_bottom .counter p {
        margin: 0 .7rem
    }
    .LI_bottom {
        margin-top: 0
    }
    .counter>div {
        border: 0;
        padding: 0
    }
    .counter i,
    .counter p {
        font-size: 1.5em
    }
    .LI_content .initialPrice {
        font-size: .7rem
    }
    .filterBar>p {
        order: 2;
        margin: .2rem
    }
    .filterBar .refFinder {
        margin-top: 1rem
    }
    .filterBar .refFinder i {
        margin: 0 .5rem;
        font-size: 1.5em
    }
    .filterBar .refFinder div {
        width: 98%;
        margin: 0 1%
    }
    .listItems {
        margin: 2%
    }
    .catalogueNav p {
        display: none
    }
    .LI_article {
        flex-direction: column;
        height: 400px
    }
    .LI_imgBox {
        width: 100%
    }
    .LI_content {
        padding: 1em 8px;
        width: calc(100% - 16px)
    }
}

@media all and (max-width: 400px) {
    .filterBar {
        padding: 10px 4px
    }
    .listItems article {
        height: auto
    }
    .LI_imgBox .marque {
        max-width: none
    }
    .cata aside>div {
        width: 98%
    }
    .cataList aside>div {
        margin: 0
    }
}

.view_selector {
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.view_selector div {
    padding: 4px 8px;
    background: #fff;
    cursor: pointer;
    border: 1px solid var(--color-1);
    color: var(--color-1);
    font-size: 1.1em
}

.view_selector div.activestyle {
    background: var(--color-1);
    color: #fff
}

.GRID_item {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1em;
    grid-auto-rows: 310px;
    padding-bottom: 1rem;
    margin: 0 1em
}

.GRID_item .LI_article {
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    flex-wrap: wrap;
    align-items: flex-start
}

.GRID_item .listItems {
    grid-row: span 2
}

.GRID_item .listItems.open_for_grid {
    grid-row: span 3
}

.GRID_item .LI_article .titleProd {
    font-size: 1.1rem;
    line-height: 1rem
}

.GRID_item .LI_article {
    margin-bottom: 0;
    padding: 8px
}

.GRID_item .LI_article .prodImgLI {
    width: 70%;
    height: 100px
}

.GRID_item .LI_article .prodLogoLI {
    width: 30%;
    height: 100px
}

.prodLogoLI img {
    max-width: unset;
    object-position: bottom
}

.GRID_item .LI_article .titleLI {
    width: 100%
}

.GRID_item .LI_article>div {
    height: auto
}

.GRID_item .LI_article .buyLI {
    flex-direction: row;
    width: 100%;
    justify-content: space-between
}

.GRID_item .prodImgLI,
.GRID_item .priceLI {
    width: 100%
}

.GRID_item .stockBtn {
    margin: 0
}

.GRID_item .reference {
    font-size: .9rem;
    color: var(--color-1)
}

.GRID_item .LI_article.showmore {
    grid-row: span 2;
    box-shadow: 0 0 0 2px #000c
}

.LI_article.showmore .detailsLI {
    position: unset
}

.GRID_item .LI_article.showmore .prodImgLI {
    width: 70%;
    height: 150px
}

.GRID_item .LI_article.showmore .voirPlus {
    position: absolute
}

.GRID_item .details {
    max-height: 100px
}

.GRID_item .showmore .details {
    max-height: 300px;
    overflow: auto
}

.GRID_item .priceLI {
    flex-direction: column-reverse
}

.GRID_item .LI_article .titleProd {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: unset;
    overflow: unset
}

.GRID_item .LI_imgBox {
    width: 100%
}

.GRID_item .listItems {
    width: 100%;
    height: 100%;
    margin: 0
}

.GRID_item .LI_content {
    width: 96%;
    border-left: 0;
    border-top: 1px dashed var(--color-1)
}

.GRID_item .LI_content div {
    flex-wrap: wrap
}

.GRID_item .LI_bottom {
    flex-direction: column
}

.GRID_item .counter {
    width: 100%;
    margin: 1em 0
}

@media all and (max-width: 768px) {
    .GRID_item {
        grid-auto-rows: auto;
        margin: 0 4px
    }
    .GRID_item .LI_article {
        height: auto
    }
}

@media all and (max-width: 400px) {
    .GRID_item {
        grid-template-columns: 1fr
    }
}