.modal {display: none;position: fixed;z-index: 2001!important;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);}
  .close-modal-login {border: none;background: none;}
  .close-modal-login:hover, .close-modal-login:focus {color: black;text-decoration: none;cursor: pointer;}
  body.no-scroll {overflow: hidden;}
  .fa-eye, .fa-eye-slash {right: 9px!important;top: unset!important;}
  .password_container {display: flex; align-items: center;}
  .modal-login-header{display: flex;justify-content: flex-end;padding: 24px 32px;}
  .form-modal-login {padding: 32px 64px;}
  @media (min-width:0px) and (max-width:991px){
    .modal-login-header {position: relative;display: flex;align-items: center;justify-content: flex-end;padding: 12px 16px;height: 44px;}
    .modal-login-header > a > img {position: absolute;left: 50%;transform: translateX(-50%);}
    .modal-login-header .close-modal-login {cursor: pointer;}
    .form-modal-login {padding: 32px 16px 64px 16px;}
  }


  .heart-h{float:left; height:24px; width:24px; background-image:url(/_themes/puzzlethemes/fr/images/heart.svg); position:absolute;margin-top:10px}
.heart2{color:#ffffff;background-color:#FF780F; border-radius:20px;font-size: 8px;font-style: normal;font-weight: 700;line-height: normal;position: absolute;top: 8px;right: 4px;width: 16px;height: 16px;display: flex;align-items: center;justify-content: center;}
.nbPanier {color:#ffffff;background-color:#FF780F; border-radius:20px;font-size: 8px;font-style: normal;font-weight: 700;line-height: normal;position: absolute;top: 10px;right: 4px;width: 16px;height: 16px;display: flex;align-items: center;justify-content: center;}
.nbWishList, .nbPanier {display: none;}
.nbWishList.flex, .nbPanier.flex {display: flex;}
.ref-site {font-size:16px!important; margin-top: 1px!important;}
.typo-nbr {background-color: #359AA5!important; width:7px!important; font-size:16px!important}


body {font-family: Inter, Arial, Helvetica, sans-serif;font-size: 14px;line-height: 1.42857143;color: #292929;margin: 0;background-position: center top;font-weight: 400;background-color: #FAFAFA;}



.typo-nbr {
  background-color: #359AA5!important;width:7px!important; font-size:14px!important; height:18px!important}
  .ref-site {font-size:14px!important; margin-top: 1px!important;margin-left: 8px!important;}



   .text-menu-mobile {color: black; font-size: 14px;font-weight: 600; word-wrap: break-word}
        .menu_solde > .text-menu-mobile, .menu_solde {font-weight: bold;color: #FF780F!important;}
        .menu_solde:hover, .menu_solde.active {text-decoration-line: underline;}



        .txt-aff{padding-left: 24px; padding-right: 24px; padding-top: 16px; padding-bottom: 16px; background: rgba(41, 41, 41, 0.33); border-top-left-radius: 12px; border-top-right-radius: 12px; border: 1px rgba(255, 255, 255, 0.70) solid; backdrop-filter: blur(24px); justify-content: center; align-items: center; gap: 10px; display: inline-flex}
@media screen and (max-width: 500px) {
    .image-desktop {
        display: none!important;
    }
}
@media screen and (min-width: 501px) {
    .mobile-image {
        display: none!important;
    }
}  
.slider-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 280px;
}

.slide {
  position: absolute;
  top: 0;
  left: 0; 
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.content-btn-slider {
    display: flex;
    max-width: 1120px;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; 
}

.content-btn-slider .prev, .content-btn-slider .next {width: 32px; height: 32px; position: relative;transform-origin: 0 0; background: rgba(41, 41, 41, 0.33); box-shadow: 0px 5.142857074737549px 7.714285850524902px rgba(0, 0, 0, 0.08); border-radius: 6px; border: 1px rgba(255, 255, 255, 0.70) solid; backdrop-filter: blur(15.43px);cursor:pointer;pointer-events: auto;
}

@media (min-width:0px) and (max-width:991px){
.content-btn-slider .prev, .content-btn-slider .next{width: 24px; height: 24px; margin-right:16px; margin-left: 16px}

}  
.content-btn-slider .prev > img, .content-btn-slider .next > img {width: 100%;}
.content-btn-slider .prev > img {rotate: 180deg;}
.dot-container {
    max-width: 1120px;width: 100%;justify-content: flex-end; align-items: flex-start; gap: 10px; display: inline-flex;position: absolute;bottom: 8px;left: 50%;transform: translate(-50%, -50%); z-index: 2;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 12px;
    border: 1px solid var(--White, #FFF);
}

.dot.active {
background: var(--Orange, #FF780F);border-radius: 12px;
border: 1px solid var(--White, #FFF );width: 10px;
height: 10px; 
}

.slider-home {
    padding-top: 119px;
    position: relative;
}

.banner-section {
    width: 100%;
    background: linear-gradient(0deg, rgba(22, 46, 54, 0.80) 0%, rgba(22, 46, 54, 0.80) 100%);
    padding-top: 108px;
}

.banner-section.default {background: none;}

.banner-section > .container {
    max-width: 1120px;
    margin: auto;
    padding: 24px 0;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    display: flex;
}

.banner-content {
    flex: 1 1 0;
    align-self: stretch;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    display: flex;
    height: 72px;
}

.banner-title {
    color: white;
    font-size: 24px;
    font-family: Inter;
    font-weight: 900;
    word-wrap: break-word;
    line-height: normal;
}

.banner-description {
    color: white;
    font-size: 14px;
    font-family: Inter;
    font-weight: 500;
    word-wrap: break-word;
    line-height: normal;
}
.cube-prod > div > a > img {
    border-radius: 12px;
    width: 100%;
}

.fil-ariane-content-produit > span {font-size: 12px;}

@media (min-width:0px) and (max-width:991px){
    .dot-container {
        justify-content: center;
        left: inherit;
        transform: none;
        gap: 4px;
    }
    .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    border: 1px solid var(--White, #FFF);
    }

    .dot.active {
        width: 12px;
        height: 4px;
        border-radius: 4px;
        border: 1px solid var(--White, #FFF);
        background: var(--White, #FFF);
        backdrop-filter: blur(6px);
    }

    .slider-home{
        padding-top: 0;margin-left: -16px;margin-right: -16px;
    }
    .banner-section {
        padding-top: 0;
    }

    .banner-section > .container {
        padding: 24px 16px 32px 16px;
        gap:0;
    }
    #fil_ariane{
        padding:8px 0 0 0 ;
        margin-bottom: 15px!important;
        font-size: 10px;
    }
    #fil_ariane a {
        font-size: 12px;
    }
    .fil-ariane-content-produit {color: white;padding: 8px 16px 0px 16px!important;}
    .fil-ariane-content-produit a{color: white;}
    body[data-route="app_search_product"] .fil-ariane-content-produit a {color: #262626;font-weight: 400;font-size: 12px;}
    .cube-produits-web-tablette{
        width: 100%;
    }
    .cube-prod {
        width: 100%;
        height: 174px;
        flex-direction: row;
    }
    .cube-prod > div > a > img {
        height: 174px;
        width: 152px;
        border-radius: 12px;
    }
    .banner-content{flex-direction: column; gap: 8px;align-items:flex-start;}
    .banner-title{font-size: 20px;}
}



.slick-dots > li > button::before {content: none;}
.slick-dots > .slick-active {width: 12px;height: 4px;border-radius: 4px;background: #C84406;}
.slick-dots > li {width: 4px;height: 4px;border-radius: 4px;background: #FFD9A7;}
.slick-dots{margin-top:-15px}
@media (min-width:0px) and (max-width:500px){
  .content-btn-slick {display: none;}
}



@media (min-width: 0px) and (max-width: 991px) {
.txt-aff{max-width:250px; text-align:center}
    .border-news-mobile {
        gap: 24px;
    }
    .slider-new > .slick-dots {
        bottom: 0;
        position: relative;
    }
    .slider-new {display: flex;flex-direction: column;gap: 24px;}
    .slider-new > .slick-list {padding: 0px 0px 8px 0;}
    .button-add-cart {padding: 0;width: 38px;height: 38px;display: flex;align-items: center;justify-content: center;}
}



body.modal-open {
    overflow: hidden;
}

#modal-panier {
    display: none;
    position: fixed;
    justify-content: flex-end; /* Center horizontally */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2000 !important;
}

.modal-content-panier {
    background-color: #fefefe;
    width: 419px;
    max-height: 100%; /* Maximum height relative to the viewport height */
    display: flex;
    flex-direction: column;
}

.header-modal-panier {
    padding: 18px 32px;
    display: flex;
    justify-content: space-between;
    background: #2B6673;
    align-items: flex-start;
}

.title-modal-panier span:first-child {
    font-size: 14px;
    color: #FFF;
    font-weight: 600;
}

.title-modal-panier span:last-child {
    color: #FFF;
    font-size: 12px;
    font-weight: 300;
}



.modal-footer {
    background: var(--Fountain-Blue-200, #B9E5E8);
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* Ensure footer doesn't shrink */
}


  .modal-content-panier {
  overflow-y: scroll;
  scrollbar-color: #FF780F #F9F9F9;
  scrollbar-width: thin;
  }
.modal-content-panier::-webkit-scrollbar {
  width: 6px;
}

.modal-content-panier::-webkit-scrollbar-track {
  background: #F9F9F9;
}

.modal-content-panier::-webkit-scrollbar-thumb {
  background-color: #FF780F;
  border-radius: 0px;
  border: 2px solid #F9F9F9;
}



  #prix-filter-mobile, #nb-pieces-filter-mobile, #ages-filter-mobile, #marques-filter-mobile, #artiste-filter-mobile, #format-puzzle-filter-mobile, #format-pieces-filter-mobile,#matiere-filter-mobile{display: none;}
  #content-filter-navigation, #content-tri-menu {
    position: fixed;
    background-color: white;
    z-index: 3;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    visibility: hidden;
  }

  #content-filter-navigation.active, #content-tri-menu.active {
    transform: translateY(0);
    visibility: visible;
  }

  .no-scroll {
    overflow: hidden;
  }



   .cube-prod.three-first-cube {
    display: none;
  }

  .three-first-cube {
    width: 31.9%;
    height: 275px;
  }


  @media (min-width:0px) and (max-width:1200px) {
    .cube-produits-web-tablette.three-first-cube {
      width: 30%;
      height: 275px;
    }

    #fil_ariane .category span {
      color: #ffffff
    }
  }

.responsive_bandeau_web, .responsive_bandeau_mobile {
    width: 100%;
    max-width: 865px;
    margin-bottom: 18px;
    
}
.responsive_bandeau_web > div >.slick-track, .responsive_bandeau_mobile > div >.slick-track {
  margin-left: 0;
}
.responsive_bandeau_web, .responsive_bandeau_mobile {
    visibility: hidden;
}

.responsive_bandeau_web.loaded, .responsive_bandeau_mobile.loaded {
    visibility: visible;
}
.responsive_bandeau_mobile .slick-slide {
  margin-right: 0;
}
.responsive_bandeau_mobile > .slick-list {
  padding: 0;
  position: relative;
}


.blc-marques.slider {position: relative;}
@media (max-width: 991px) {
  .blc-marques.slider {display: flex;overflow: hidden;flex-direction: column;gap: 24px;margin-top: 0;padding: 16px 0px;width : calc(100% + 16px)}
  .blc-marques > .slick-dots {margin: 0;text-align: center;position: relative;bottom: 0;}
  .blc-new-marques {flex: 0 0 calc(100% - 8px);margin-bottom: 0;}
  .slick-slide {margin-right: 8px;}
  .slick-list {padding-right: 23px;}
}


@media (min-width:0px) and (max-width:991px){
.cube-personnalise-blog{height:232px}
.cube-personnalise-bleu{height:232px}}
.three-first-cube-mobile{display: none;}



.blc-marques.slider {position: relative;}
@media (max-width: 991px) {
  .blc-marques.slider {display: flex;overflow: hidden;flex-direction: column;gap: 24px;margin-top: 0;padding: 16px 0px;width : calc(100% + 16px)}
  .blc-marques > .slick-dots {margin: 0;text-align: center;position: relative;bottom: 0;}
  .blc-new-marques {flex: 0 0 calc(100% - 8px);margin-bottom: 0;}
  .slick-slide {margin-right: 8px;}
  .slick-list {padding-right: 23px;}
}


.bandeau-nouveaute {height: 120px;background: linear-gradient(0deg, rgba(22, 46, 54, 0.80) 0%, rgba(22, 46, 54, 0.80) 100%),url() left,url() center,url() right;background-size: cover, 33.33%, 33.33%, 33.33%;background-repeat: no-repeat;}
.bandeau-nouveaute > span {color: white;max-width: 1120px;margin: auto;display: flex;width: 100%;height: 100%;padding: 24px 0;align-items: center;box-sizing: border-box;gap:24px;}
@media (max-width: 991px) {
.bandeau-nouveaute {background-size: 200%, 40%, 40%, 40%;}
.bandeau-nouveaute {height:144px;background: linear-gradient(0deg, rgba(22, 46, 54, 0.80) 0%, rgba(22, 46, 54, 0.80) 100%),url();background-size: cover, 100%;background-repeat:no-repeat;background-position: center;}
.bandeau-nouveaute > span {font-size: 20px;display: flex;flex-direction: column;align-items: flex-start;gap: 8px;height: fit-content;}
}


@media (min-width:0px) and (max-width:991px){
.pourmob-mar{margin-right:15px!important}}


.bandeau-promotion {
  height: 120px;
  background: linear-gradient(0deg, rgba(22, 46, 54, 0.80) 0%, rgba(22, 46, 54, 0.80) 100%),url() left,url() center,url() right;
  background-size: cover, 33.33%, 33.33%, 33.33%;
  background-repeat: no-repeat;
}

.bandeau-top {
  height: 120px;
  background: linear-gradient(0deg, rgba(22, 46, 54, 0.80) 0%, rgba(22, 46, 54, 0.80) 100%),url() left,url() center,url() right;
  background-size: cover, 33.33%, 33.33%, 33.33%;
  background-repeat: no-repeat;
}

.image-loader-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.image-loader-container img {
    width: 100%;
    display: block;
    transition: opacity 0.3s ease;
}

.image-loader-container.loading {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-loader-container.loading img {
    opacity: 0;
}

.image-loader-container.loading::before {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid #e0e0e0;
    border-top: 3px solid #359AA5;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
    z-index: 1;
}

.image-loader-container.loaded img {
    opacity: 1;
}

/* Pour les images avec des dimensions spécifiques dans le HTML */
.image-loader-container img[width][height] {
    width: auto;
    max-width: 100%;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}