/**********************************************************************************************************************/
/*                                                 [GLOBAL SETTING]                                                   */
/**********************************************************************************************************************/
#catalogMenu {
    background: var(--bg-catalog-menu);
}
/* ==[ BUTTON GENERIC ]== */
.btn-generic {
    color: var(--btn-generic-text) !important;
    border: 1px solid var(--btn-generic-border) !important;
    background-color: var(--btn-generic-bg) !important;
}
.btn-generic:hover {
    color: var(--btn-generic-text-hover) !important;
    border: 1px solid var(--btn-generic-border-hover) !important;
    background-color: var(--btn-generic-bg-hover) !important;
}
/* BUTTON OUTLINE GENERIC */
.btn-outline-generic {
    color: var(--btn-outline-generic-text) !important;
    border: 1px solid var(--btn-outline-generic-border) !important;
    background-color: var(--btn-outline-generic-bg) !important;
}
.btn-outline-generic:hover {
    color: var(--btn-outline-generic-text-hover) !important;
    border: 1px solid var(--btn-outline-generic-border-hover) !important;
    background-color: var(--btn-outline-generic-bg-hover) !important;
}
/**********************************************************************************************************************/
/*                                                  [BUTTON CATALOG]                                                  */
/**********************************************************************************************************************/
/* ==[ BUTTON NEWS ]== */
.btn-news {
    position: relative;
    color: var(--btn-news-text) !important;
    border: 1px solid var(--btn-news-border) !important;
    background-color: var(--btn-news-bg) !important;
}
.btn-news .fa-news-text {
    color: var(--btn-news-icon) !important;
}
.btn-news:hover {
    color: var(--btn-news-text-hover) !important;
    border: 1px solid var(--btn-news-border-hover) !important;
    background-color: var(--btn-news-bg-hover) !important;
}
.btn-news:hover .fa-news-text {
    color: var(--btn-news-icon-hover) !important;
}

/* ==[ BUTTON PROMO ]== */
.btn-promo {
    position: relative;
    color: var(--btn-promo-text) !important;
    border: 1px solid var(--btn-promo-border) !important;
    background-color: var(--btn-promo-bg) !important;
}
.btn-promo .fa-percent {
    color: var(--btn-promo-icon) !important;
}
.btn-promo:hover {
    color: var(--btn-promo-text-hover) !important;
    border: 1px solid var(--btn-promo-border-hover) !important;
    background-color: var(--btn-promo-bg-hover) !important;
}
.btn-promo:hover .fa-percent {
    color: var(--btn-promo-icon-hover) !important;
}
/* ==[ BUTTON HEART ]== */
.btn-heart {
    position: relative;
    color: var(--btn-heart-text) !important;
    border: 1px solid var(--btn-heart-border) !important;
    background-color: var(--btn-heart-bg) !important;
}
.btn-heart .fa-heart {
    color: var(--btn-heart-icon) !important;
}
.btn-heart:hover {
    color: var(--btn-heart-text-hover) !important;
    border: 1px solid var(--btn-heart-border-hover) !important;
    background-color: var(--btn-heart-bg-hover) !important;
}
.btn-heart:hover .fa-heart {
    color: var(--btn-heart-icon-hover) !important;
}
/* ==[ BUTTON TIP OF THE DAY ]== */
.btn-day-tip {
    position: relative;
    color: var(--btn-day-tip-text) !important;
    border: 1px solid var(--btn-day-tip-border) !important;
    background-color: var(--btn-day-tip-bg) !important;
}
.btn-day-tip:hover {
    color: var(--btn-day-tip-text-hover) !important;
    border: 1px solid var(--btn-day-tip-border-hover) !important;
    background-color: var(--btn-day-tip-bg-hover) !important;
}
/**********************************************************************************************************************/
/*                                                  [BUTTON ARROW]                                                    */
/**********************************************************************************************************************/
.btn-arrow-right span.my-auto,
.btn-arrow-left span.my-auto,
button.btn-arrow-right,
button.btn-arrow-left  {
    font-size: 14px;
    line-height: 13px;
    border-radius: 0;
}
.btn-arrow-right,
.btn-arrow-left {
    height: 36px !important;
    position: relative;
    padding-left: 18px;
    padding-right: 18px;
    transform: translateX(-11px);
}
.btn-arrow-right {
    padding-left: 48px;
}
.btn-arrow-left {
    padding-right: 36px;
}
.btn-arrow-right:before,
.btn-arrow-right:after,
.btn-arrow-left:before,
.btn-arrow-left:after { /* make two squares (before and after), looking similar to the button */
    content:"";
    position: absolute;
    top: 4px; /* move it down because of rounded corners */
    width: 26px; /* same as height */
    height: 26px; /* button_outer_height / sqrt(2) */
    background: inherit; /* use parent background */
    border: inherit; /* use parent border */
    border-left-color: transparent; /* hide left border */
    border-bottom-color: transparent; /* hide bottom border */
    border-radius: 0 4px 0 0; /* round arrow corner, the shorthand property doesn't accept "inherit" so it is set to 4px */
    -webkit-border-radius: 0 4px 0 0;
    -moz-border-radius: 0 4px 0 0;
}
.btn-arrow-right:before,
.btn-arrow-right:after {
    transform: rotate(45deg); /* rotate right arrow squares 45 deg to point right */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
.btn-arrow-left:before,
.btn-arrow-left:after {
    transform: rotate(225deg); /* rotate left arrow squares 225 deg to point left */
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
}
.btn-arrow-right:before,
.btn-arrow-left:before { /* align the "before" square to the left */
    left: -13px;
}
.btn-arrow-right:after,
.btn-arrow-left:after { /* align the "after" square to the right */
    right: -12px;
}
.btn-arrow-right:after,
.btn-arrow-left:before { /* bring arrow pointers to front */
    z-index: 1 !important;
}
.btn-arrow-right:before,
.btn-arrow-left:after { /* hide arrow tails background */
    background-color: var(--bs-light);
}
@media screen and (min-width: 768px) {
    .btn-arrow-right,
    .btn-arrow-left {
        transform: unset !important;
    }
}

/** NEW VERSION */
.btn-triangle {height:36px;font-size:14px;font-family:Arial,sans-serif;font-weight:bold;color:var(--bs-light);text-decoration:none;transition:background-color 0.21s linear,color 0.24s linear;}

.triangle-right-before,.triangle-right-after{width:0;height:0;border-style:solid;border-color:var(--bs-light);transition:border-color 0.21s linear;}

.triangle-right-before{position:absolute;left:0;border-width:17px 0 17px 15px;border-color:transparent transparent transparent var(--bs-light);}
.triangle-right-after{position:absolute;right:-15px;border-width:17px 0 17px 15px;}

.main-catalog{color:var(--color-main-light)!important;background-color:var(--color-main)!important;border-color:var(--bs-light)!important;}
.main-catalog .triangle-right-after{border-color:transparent transparent transparent var(--color-main)!important;}
.main-catalog:hover .triangle-right-after,.triangle-right-after:hover{border-color:transparent transparent transparent #fff!important;}
.main-catalog:hover{color:var(--color-main)!important;background-color:var(--color-main-light)!important;border-color:var(--color-main-light);}

.wishlist{color:var(--btn-wishlist-text)!important;background-color:var(--btn-wishlist-bg)!important;border-color:var(--bs-light)!important;}
.wishlist .triangle-right-after{border-color:transparent transparent transparent var(--btn-wishlist-border-hover)!important;}
.wishlist:hover .triangle-right-after,.triangle-right-after:hover{border-color:transparent transparent transparent #fff!important;}
.wishlist:hover{color:var(--btn-wishlist-text-hover)!important;background-color:var(--btn-wishlist-bg-hover)!important;border-color:var(--btn-wishlist-border-hover);}

.news{color:var(--btn-news-text);background-color:var(--btn-news-bg)!important;border-color:var(--bs-light)!important;}
.news .triangle-right-after{border-color:transparent transparent transparent var(--btn-news-border-hover);}
.news:hover .triangle-right-after,.triangle-right-after:hover{border-color:transparent transparent transparent #fff!important;}
.news:hover{color:var(--btn-news-bg);background-color:var(--btn-news-bg-hover)!important;border-color:var(--btn-news-border-hover);}

.heart{color:var(--btn-heart-text);background-color:var(--btn-heart-bg);border-color:var(--bs-light);}
.heart .fa-inverse{color:var(--btn-heart-bg);}
.heart:hover .fa-inverse{color:var(--btn-heart-text);}
.heart .triangle-right-after{border-color:transparent transparent transparent var(--btn-heart-border-hover);}
.heart:hover .triangle-right-after,.triangle-right-after:hover{border-color:transparent transparent transparent #fff!important;}
.heart:hover{color:var(--btn-heart-bg);background-color:var(--btn-heart-bg-hover);border-color:var(--bs-light)!important;}

.promo{color:var(--btn-promo-text);background-color:var(--btn-promo-bg);border-color:var(--bs-light);}
.promo .triangle-right-after{border-color:transparent transparent transparent var(--btn-promo-border-hover);}
.promo:hover .triangle-right-after,.triangle-right-after:hover{border-color:transparent transparent transparent #fff!important;}
.promo:hover{color:var(--btn-promo-bg);background-color:var(--btn-promo-bg-hover);border-color:var(--btn-promo-border-hover);}

.day-tip{color:var(--btn-day-tip-text);background-color:var(--btn-day-tip-bg);border-color:var(--bs-light);}
.day-tip .triangle-right-after{border-color:transparent transparent transparent var(--btn-day-tip-border-hover);}
.day-tip:hover .triangle-right-after,.triangle-right-after:hover{border-color:transparent transparent transparent #fff!important;}
.day-tip:hover{color:var(--btn-day-tip-bg);background-color:var(--btn-day-tip-bg-hover);border-color:var(--btn-day-tip-border-hover);}
/********/
/* ===== MENU CATALOGUE HAUT ========*/

.flecheSelectionPart1{width:100%;height:100%;background-color: #FFF;float:left;margin-left:-22px;text-align: center;padding-top: 6px;}
.flecheStart,.flecheSelectionPart2{width: 0;height: 0; border-style: solid; border-width: 18px 0px 18px 18px; float: left; margin-top: 0;border-color: transparent transparent transparent white;z-index: 5;position: relative;margin-right: -31px;}
.mrflecheSelection{margin-right: -24px;}
/* ===== ONGLET CADEAU ==========*/
.ongletSelection{z-index: 100;}
.onglet-plie{ position: absolute; left:-6px;}
.onglet-plie .surImage{position:absolute;right: 5px;bottom:-2px;}

.pucedetails{ position: relative; left:5px;}
.pucedetails .surImage{position:absolute;left: 10px;top: 10px;}
/*
/**********************************************************************************************************************/
/*                                                [CARD ITEM SETTING]                                                 */
/**********************************************************************************************************************/
#catalogMenu .card {
    width: 100%;
    height: 230px !important;
    border: 1px solid var(--border-catalog-card) !important;
}
#cadeaux .card {
    min-height: 400px;
    height: 100%;
}
#cadeaux .card-body {
    min-height: 400px;
    height: 100%;
    margin-top: unset !important;
}
#catalogMenu .card-body,
#cadeaux .card-body {
    max-height: max-content !important;
    display: block;
    flex: unset !important;
    margin-top: auto;
    background-color: var(--bg-catalog-card) !important;
}
#catalogMenu .card-body a,
#cadeaux .card-body a {
    height: max-content !important;
    font-size: 13px;
    font-weight: 500 !important;
    line-height: 1rem;
    text-decoration: none;
    color: var(--color-catalog-menu-link) !important;
    margin: 2px auto;
}
#catalogMenu .card-body a:hover,
#cadeaux .card-body a:hover {
    color: var(--color-catalog-menu-link-hover) !important;
}
#catalogMenu .card-subtitle,
#cadeaux .card-subtitle {
    font-size: 14px;
}
#blocCadeaux .teasercontainer .produitRes {
    min-height: 350px;
    padding: 1rem;
    display: block;
    flex: unset;
}
#blocCadeaux .teasercontainer .produitRes .plink a {
    color: var(--color-catalog-menu-link) !important;
    text-decoration: none;
}

/**********************************************************************************************************************/
/*                                                  [MENU BACKGROUND]                                                 */
/**********************************************************************************************************************/
.multimedia, .espace_techno, .high_tech, .mon_espace_techno {
    background: var(--img-url-multimedia);
    background-size: cover;
}
.maison, .ma_maison {
    background: var(--img-url-home);
    background-size: cover;
}
.loisirs_et_sports, .loisirs, .mes_loisirs {
    background: var(--img-url-sports);
    background-size: cover;
}
.accessoires, .mode_et_accessoires, .mode, .ma_mode, .accessoires___bagages {
    background: var(--img-url-accessories);
    background-size: cover;
}
.gastronomie, .ma_gastronomie, .vins_et_gastronomie {
    background: var(--img-url-gastronomy);
    background-size: cover;
}
.enfants, .ma_petite_famille, .petite_famille {
    background: var(--img-url-child);
    background-size: cover;
}
.bien_etre, .forme, .ma_forme {
    background: var(--img-url-comfort);
    background-size: cover;
}
.escapades___voyages___sorties {
    background: var(--img-url-travel);
    background-size: cover;
}
.cheques_cadeaux {
    background: var(--img-url-gift);
    background-size: cover;
}
.all_catalogue {
    background: var(--img-url-all-catalog);
    background-size: cover;
}
.produits_pro {
    background: var(--img-url-pro-products);
    background-size: cover;
}
/**********************************************************************************************************************/
/*                                                 [PAGE CATALOG]                                                     */
/**********************************************************************************************************************/
#blocCadeaux {
    padding: 1rem 0;
}
/**********************************************************************************************************************/
/*                                           [SHADOW AND ANIMATION CARD]                                              */
/**********************************************************************************************************************/
#catalogMenu .card:hover,
#cadeaux .card:hover {
    transform: translateY(-10px) !important;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-property: transform;
    -webkit-transform: translateY(-5px);
}
#catalogMenu .card:hover .card-body,
#cadeaux .card:hover .card-body {
    background-color: var(--bg-catalog-card-hover) !important;
}
#catalogMenu .card:hover .card-subtitle,
#cadeaux .card:hover .card-subtitle {
    display: flex !important;
    flex-direction: column;
    font-size: 12px !important;
}
#catalogMenu .colCard:hover::after,
#cadeaux .colCard:hover::after {
    opacity: 1;
    transition-duration: 0.3s;
}
#catalogMenu .colCard::after,
#cadeaux .colCard::after {
    width: 90% !important;
    height: 10px !important;
    display: block;
    margin: 0 auto;
    z-index: -1;
    opacity: 0;
    content: "";
    position: static;
    top: 10px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 80%) !important;
}
/**********************************************************************************************************************/
/*                                                     [PAGE ITEM]                                                    */
/**********************************************************************************************************************/
.sp-wrap {
    width: 100% !important;
}
.sp-lightbox {
    z-index: var(--z-index-1100) !important;
}
.sp-large img {
    width: 100% !important;
}
.sp-large img:hover {
    width: initial !important;
}
#descriptifFiche ul {
    list-style: none !important;
}
.pointsValuesColor {
    color: var(--color-blue-dark) !important;
}
.bg-generic {
    background-color: var(--bg-generic) !important;
}
.bg-nouveautes, .btn-nouveautes{
    background-color: var(--color-green) !important;
}
.bg-promo{
    background-color: var(--color-yellow) !important;
}
.bg-coupdecoeur{
    background-color: var(--color-orange) !important;
}
.bg-recommande {
    background-color: var(--color-red) !important;
}
/**********************************************************************************************************************/
/*                                        [PAGE CART, ORDER & ACCOUNT]                                                */
/**********************************************************************************************************************/
#myCart thead tr,
#orderform thead tr,
#orderDetails thead tr {
    color: var(--text-table-cart-head) !important;
    background-color: var(--bg-table-cart-head) !important;
}
#myCart tbody a {
    color: var(--link-table-cart) !important;
}
#myCart tbody a:hover {
    color: var(--link-table-cart-hover) !important;
}
#orderDetails tbody {
    background-color: var(--color-blue-10);
}
#myCart #quantityCheck td a:first-child {
    width: max-content !important;
    display: inline !important;
}
#myCart #quantityCheck td a:last-child {
    width: max-content !important;
}
/* ==[ ORDER RECAP ]== */
#accordionAddress .accordion-button:not(.collapsed) {
    color: var(--bs-success) !important;
    background-color: var(--color-success);
}
#accordionAddress .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23198754FF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

:is(#saveOrderForm .form-control.is-valid) #accordionAddress .accordion-button:not(.collapsed),
:is(#saveOrderForm .was-validated .form-control:valid) #accordionAddress .accordion-button:not(.collapsed) {
    color: var(--bs-success) !important;
    background-color: var(--color-success) !important;
}
:is(.form-control.is-invalid) #accordionAddress .accordion-button:not(.collapsed)::after,
:is(.was-validated) #accordionAddress .accordion-button:not(.collapsed)::after,
:is(.form-control:invalid) #accordionAddress .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c9042c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
:is(.form-control.is-invalid) #accordionAddress .accordion-button:not(.collapsed),
:is(.was-validated) #accordionAddress .accordion-button:not(.collapsed),
:is(.form-control:invalid) #accordionAddress .accordion-button:not(.collapsed) {
    color: var(--bs-danger) !important;
    background-color: var(--color-danger) !important;
}
/**********************************************************************************************************************/
/*                                                 [NO UI SLIDER]                                                     */
/**********************************************************************************************************************/
/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-select: none;
    -ms-touch-action: none;
    touch-action: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.noUi-target {
    position: relative;
}
.noUi-base,
.noUi-connects {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
/* Wrapper for all connect elements.
 */
.noUi-connects {
    overflow: hidden;
    z-index: 0;
}
.noUi-connect,
.noUi-origin {
    will-change: transform;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
    transform-origin: 0 0;
    transform-style: flat;
}
/* Give origins 0 height/width so they don't interfere with clicking the
 * connect elements.
 */
.noUi-horizontal .noUi-origin {
    height: 0;
}
.noUi-handle {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
}
/*
 * Slider size and handle placement;
 */
.noUi-horizontal {
    height: 18px;
}
.noUi-horizontal .noUi-handle {
    width: 34px;
    height: 28px;
    right: -17px;
    top: -6px;
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
    left: -17px;
    right: auto;
}
/*
 * Giving the connect element a border radius causes issues with using transform: scale
 */
.noUi-target {
    background: #FAFAFA;
    border-radius: 4px;
    border: 1px solid #D3D3D3;
    box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.noUi-connect {
    background: var(--noui-bg) !important;
}
/*
 * Handles and cursors;
 */
.noUi-draggable {
    cursor: ew-resize;
}
/* TOOLTIP */
.noUi-tooltip {
    display: block;
    position: absolute;
    border: 1px solid #D9D9D9;
    border-radius: 3px;
    background: #fff;
    color: #000;
    padding: 5px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}
.noUi-horizontal .noUi-tooltip {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    bottom: -5px;
}
.noUi-horizontal .noUi-origin > .noUi-tooltip {
    -webkit-transform: translate(50%, 0);
    transform: translate(50%, 0);
    left: auto;
    bottom: 10px;
}
.cartes_cadeaux{background:url("/catalogue_images.php?id_article=30943&havingImages=1&maxsize=350") no-repeat center center;}