/* =====================================================================
   Sliders de bannières (templates/partials/_banner_slider.html.twig) :
   boutique, catalogue (catégorie / vente flash), toutes les catégories,
   encart latéral de la fiche produit. Habillage des puces : voir
   components/swiper-pagination.css.
   ===================================================================== */

.banner-slider.swiper-container {
    overflow: hidden;
    border-radius: .4rem;
}

/* Les bannières gardent leurs dimensions d'origine dans chaque diapositive. */
.banner-slider .swiper-slide > .banner,
.banner-slider .swiper-slide > .shop-default-banner {
    height: 100%;
    margin-bottom: 0;
}

.banner-slider .swiper-wrapper {
    align-items: stretch;
}

/* Bannière avec lien : toute l'image est cliquable, le texte reste lisible
   et ses propres liens / boutons / compte à rebours restent utilisables. */
.banner-slide-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.banner-slide-link ~ .banner-content {
    z-index: 2;
    pointer-events: none;
}

.banner-slide-link ~ .banner-content a,
.banner-slide-link ~ .banner-content button,
.banner-slide-link ~ .banner-content .btn {
    pointer-events: auto;
}

/* Puces centrées en bas de la bannière */
.banner-slider.pg-inner .swiper-pagination {
    bottom: 1.2rem;
    z-index: 3;
}

/* Encart latéral fiche produit : image entière, puces sous l'image */
.product-side-banner.banner-slider .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
}

/* Flèches précédent / suivant : ronds blancs centrés verticalement, discrets,
   pleinement visibles au survol du slider (toujours visibles sur écran tactile). */
.banner-slider .banner-slider-nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.2rem;
    height: 4.2rem;
    margin: 0;
    padding: 0;
    color: #222;
    font-size: 1.8rem;
    background: rgba(255, 255, 255, .9);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 .4rem 1.4rem rgba(0, 0, 0, .18);
    opacity: .75;
    transform: translateY(-50%);
    cursor: pointer;
    transition: opacity .2s, background-color .2s, color .2s, transform .2s;
}

/* Le thème dessine sa propre flèche (::before / ::after) : on garde notre icône. */
.banner-slider .banner-slider-nav::before,
.banner-slider .banner-slider-nav::after {
    content: none;
}

.banner-slider .swiper-button-prev.banner-slider-nav { left: 1.6rem; right: auto; }
.banner-slider .swiper-button-next.banner-slider-nav { right: 1.6rem; left: auto; }

.banner-slider:hover .banner-slider-nav {
    opacity: 1;
}

.banner-slider .banner-slider-nav:hover,
.banner-slider .banner-slider-nav:focus-visible {
    color: #fff;
    background: #F78116;
    transform: translateY(-50%) scale(1.06);
}

.banner-slider .banner-slider-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Petits sliders (encart latéral fiche produit) : flèches plus compactes */
.product-side-banner.banner-slider .banner-slider-nav {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.4rem;
}

.product-side-banner.banner-slider .swiper-button-prev.banner-slider-nav { left: .8rem; }
.product-side-banner.banner-slider .swiper-button-next.banner-slider-nav { right: .8rem; }

@media (hover: none), (max-width: 767px) {
    .banner-slider .banner-slider-nav {
        width: 3.4rem;
        height: 3.4rem;
        font-size: 1.5rem;
        opacity: 1;
    }

    .banner-slider .swiper-button-prev.banner-slider-nav { left: .8rem; }
    .banner-slider .swiper-button-next.banner-slider-nav { right: .8rem; }
}