/* Bannières et cartes de carrousels — mêmes classes et ids conservés */

#publicForm{
  display:flex;flex-direction:column;gap:15px;max-width:620px;margin:36px auto 0;padding:24px;
  background:rgba(255,250,244,.96);border-radius:22px;box-shadow:0 18px 32px rgba(57,27,8,.12);border:1px solid rgba(122,77,41,.12)
}
#publicForm input,#publicForm textarea{
  padding:14px 16px;border-radius:12px;border:1px solid rgba(122,77,41,.18);font-size:1rem;width:100%;transition:border-color .3s, box-shadow .3s;font-family:inherit;background:#fff
}
#publicForm input:focus,#publicForm textarea:focus{border-color:#d97706;box-shadow:0 0 0 4px rgba(217,119,6,.12);outline:none}
#publicForm textarea{resize:vertical;min-height:120px;font-size:.95rem}
#publicForm button{padding:14px;border:none;border-radius:12px;background:linear-gradient(180deg,#f59e0b,#d97706);color:#fff;font-size:1rem;font-weight:800;cursor:pointer;transition:filter .3s, transform .2s}
#publicForm button:hover{filter:brightness(.98);transform:translateY(-1px)}

.banner-carousel{
  position:relative;width:100%;height:244px;overflow:hidden;
  border-radius:24px;background:radial-gradient(circle at center,#243497 0,#000000 60%,#080f0d 100%);
  box-shadow:0 18px 28px rgba(57,27,8,.2)
}
.banner-carousel .carousel-track{
  display:flex;align-items:stretch;gap:20px;width:max-content;height:100%;padding:18px;animation:bannerScroll 25s linear infinite
}
.banner-carousel img{width:min(900px,68vw);height:100%;object-fit:cover;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
@keyframes bannerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.banner-carousel2{
  position:relative;width:100%;overflow:hidden;padding:16px 58px;
  background:radial-gradient(circle at center,#2e4771 0,#030603 45%,#000000 100%);
  border-radius:24px;box-shadow:0 18px 28px rgba(31, 55, 20, 0.18);min-height:280px
}
.carousel-track2{
  display:flex;align-items:stretch;gap:18px;width:max-content;min-height:248px
}

/* Style très robuste pour les cartes créées par JS, sans dépendre d'un nom de classe précis */
.banner-carousel2 .carousel-track2 > *,
.products-carousel > *{
  flex:0 0 170px;min-width:170px;max-width:170px;
  background:rgba(255,248,240,.98);border-radius:18px;overflow:hidden;
  box-shadow:0 12px 24px rgba(57,27,8,.16);border:1px solid rgba(122,77,41,.12)
}

.banner-carousel2 .carousel-track2 > a,
.banner-carousel2 .carousel-track2 > div,
.banner-carousel2 .carousel-track2 > article,
.products-carousel > a,
.products-carousel > div,
.products-carousel > article{
  display:flex;flex-direction:column;justify-content:flex-start;color:#2b180c;text-decoration:none
}

.banner-carousel2 img,
.products-carousel img{
  display:block;width:100%;height:140px;object-fit:cover;background:#f3efe9;
  border-radius:0;border-bottom:1px solid rgba(122,77,41,.08);box-shadow:none
}

.banner-carousel2 .carousel-track2 > * > :not(img),
.products-carousel > * > :not(img){padding-left:12px;padding-right:12px}

.banner-carousel2 .carousel-track2 a[href],
.products-carousel a[href]{color:inherit;text-decoration:none}

.banner-carousel2 .carousel-track2 h3,
.banner-carousel2 .carousel-track2 h4,
.products-carousel h3,
.products-carousel h4{
  margin:12px 12px 6px;font-size:17px;font-weight:900;line-height:1.25;color:#2b180c;
  min-height:42px;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}

.banner-carousel2 .carousel-track2 p,
.banner-carousel2 .carousel-track2 span,
.products-carousel p,
.products-carousel span{
  font-size:14px;line-height:1.35;word-break:break-word
}

.banner-carousel2 .carousel-track2 .old-price,
.products-carousel .old-price{display:block;margin:8px 0 2px;text-align:center}

.banner-carousel2 .carousel-track2 .promo-price,
.products-carousel .promo-price,
.banner-carousel2 .carousel-track2 .price,
.products-carousel .price{
  display:block;text-align:center;margin:0 0 6px;font-size:15px;font-weight:900;color:#cf431d
}

.banner-carousel2 .carousel-track2 .sale-info,
.products-carousel .sale-info{padding:0 12px 8px;text-align:center}

.banner-carousel2 .carousel-track2 .flash-countdown{
  margin:10px auto 8px
}

.flash-badge{
  position:absolute;top:8px;left:8px;background:#e11d48;color:#fff;font-size:10px;font-weight:900;padding:4px 7px;border-radius:999px;text-transform:uppercase;z-index:5
}
.flash-badge::after{content:"⚡";margin-left:4px}

.skeleton-wrapper{display:flex;gap:18px}
.skeleton-wrapper .skeleton-card{
  flex:0 0 170px;min-width:170px;height:248px;border-radius:18px;
  background:linear-gradient(90deg,#f2ece3 25%,#e7dfd5 37%,#f2ece3 63%);background-size:400% 100%;animation:skeletonLoading 1.4s ease infinite
}

@media (max-width:1024px){
  .banner-carousel{height:220px}
  .banner-carousel img{width:100%}
}
@media (max-width:768px){
  .banner-carousel{height:180px}
  .banner-carousel .carousel-track{animation-duration:35s}
  .banner-carousel2{padding:16px 52px;min-height:250px}
  .banner-carousel2 .carousel-track2 > *, .products-carousel > *{flex-basis:156px;min-width:156px;max-width:156px}
  .banner-carousel2 img, .products-carousel img{height:126px}
}
@media (max-width:480px){
  #publicForm{padding:16px}
  .banner-carousel{height:150px}
  .banner-carousel2{padding:14px 48px;min-height:234px}
  .banner-carousel2 .carousel-track2 > *, .products-carousel > *{flex-basis:148px;min-width:148px;max-width:148px}
  .banner-carousel2 img, .products-carousel img{height:118px}
}