/* =====================================================================
   Flèches des carrousels produits ([data-home-carousel]) — accueil,
   /toutes-les-categories, pages promotion.

   Ronds blancs à cheval sur le bord du carrousel, centrés sur la zone
   image. Desktop uniquement (≥992px) : au doigt, on fait glisser et la
   pagination à puces reste affichée. Le décalage vers l'extérieur est
   réglable par --carousel-nav-offset (ex. home-v2.css le cale sur le bord
   de la carte blanche). Câblage : assets/js/home-carousel-nav.js.
   ===================================================================== */

.home-carousel {
    position: relative;
    --carousel-nav-offset: 2.2rem;
}

.home-carousel__nav {
    display: none;
}

@media (min-width: 992px) {
    .home-carousel__nav {
        position: absolute;
        top: 38%;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 4.4rem;
        height: 4.4rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #fff;
        color: #1d2433;
        font-size: 1.6rem;
        box-shadow: 0 .3rem 1rem rgba(23, 32, 64, .12);
        transform: translateY(-50%);
        cursor: pointer;
        transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease, transform .15s ease;
    }

    .home-carousel__nav.is-prev { left: calc(-1 * var(--carousel-nav-offset)); }
    .home-carousel__nav.is-next { right: calc(-1 * var(--carousel-nav-offset)); }

    .home-carousel__nav i {
        font-weight: 700;
        line-height: 1;
    }

    .home-carousel__nav:not(:disabled):hover,
    .home-carousel__nav:not(:disabled):focus-visible {
        background: #F78116;
        color: #fff;
        box-shadow: 0 .3rem 1rem rgba(247, 129, 22, .3);
        outline: none;
    }

    .home-carousel__nav:not(:disabled):active {
        transform: translateY(-50%) scale(.92);
    }

    .home-carousel__nav:disabled {
        opacity: 0;
        pointer-events: none;
    }

    /* Tout tient à l'écran : ni flèches ni puces. */
    .home-carousel.is-locked .home-carousel__nav {
        display: none;
    }

    /* Les flèches remplacent les puces sur desktop. */
    .home-carousel > .swiper-container > .swiper-pagination {
        display: none;
    }
}