/* ==========================================================================
   Carrousel mobile des formules (photo & film)
   Transforme .pricing-cards-container en carrousel horizontal à défilement
   naturel sous 768px. Activé par pricing-carousel.js (classe .is-carousel).
   ========================================================================== */

@media (max-width: 768px) {

    .pricing-cards-container.is-carousel {
        display: block;
        padding: 0;
        margin: 30px 0;
        overflow: visible;
    }

    .pricing-cards-container.is-carousel .wedding-single-service-heading {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* --- La piste de défilement ------------------------------------------ */
    .pricing-carousel__viewport {
        position: relative;
    }

    .pricing-carousel__track {
        display: flex;
        /* Hauteur naturelle : les cartes n'ont pas toutes le même nombre de
           livrables. Les étirer à la hauteur de la plus longue vidait les
           cartes courtes, `justify-content: space-between` répartissant le
           surplus entre chaque bloc (titre décollé de son sous-titre, etc.).
           Dans un carrousel on ne voit qu'une carte à la fois : la différence
           de hauteur ne se perçoit pas, et elle signale le contenu en plus. */
        align-items: flex-start;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: 16px;
        scroll-padding-right: 16px;
        /* marge verticale pour ne pas rogner les ombres des cartes */
        padding: 14px 16px 20px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .pricing-carousel__track::-webkit-scrollbar {
        display: none;
    }

    /* --- Les cartes ------------------------------------------------------- */
    .pricing-cards-container.is-carousel .pricing-card {
        flex: 0 0 84%;
        min-width: 84%;
        max-width: 84%;
        margin: 0;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        transform: none;
        transition: box-shadow .3s ease;
    }

    .pricing-cards-container.is-carousel .pricing-card:hover,
    .pricing-cards-container.is-carousel .pricing-card.popular {
        transform: none;
    }

    /* --- Dégradés latéraux : l'indice le plus discret qu'il y a une suite -- */
    .pricing-carousel__viewport::before,
    .pricing-carousel__viewport::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 26px;
        pointer-events: none;
        z-index: 4;
        opacity: 0;
        transition: opacity .25s ease;
    }

    .pricing-carousel__viewport::before {
        left: 0;
        background: linear-gradient(to right, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0));
    }

    .pricing-carousel__viewport::after {
        right: 0;
        background: linear-gradient(to left, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0));
    }

    .pricing-carousel__viewport[data-at-start="false"]::before,
    .pricing-carousel__viewport[data-at-end="false"]::after {
        opacity: 1;
    }

    /* --- Flèches latérales : présentes, jamais envahissantes -------------- */
    .pricing-carousel__arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .55);
        color: #1b1b1b;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: .38;
        transition: opacity .3s ease, transform .2s ease;
    }

    .pricing-carousel__arrow svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .pricing-carousel__arrow--prev { left: 4px; }
    .pricing-carousel__arrow--next { right: 4px; }

    .pricing-carousel__arrow:active {
        opacity: .75;
        transform: translateY(-50%) scale(.92);
    }

    /* invisible dès qu'il n'y a plus rien de ce côté, ou quand la personne
       a compris toute seule qu'on peut faire glisser */
    .pricing-carousel__viewport[data-at-start="true"] .pricing-carousel__arrow--prev,
    .pricing-carousel__viewport[data-at-end="true"] .pricing-carousel__arrow--next,
    .pricing-carousel__viewport[data-swiped="true"] .pricing-carousel__arrow {
        opacity: 0;
        pointer-events: none;
    }

    /* --- Pagination ------------------------------------------------------- */
    .pricing-carousel__dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 7px;
        margin: 2px 0 6px;
    }

    .pricing-carousel__dot {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: #fff;
        opacity: .3;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
        cursor: pointer;
        transition: width .25s ease, opacity .25s ease;
    }

    .pricing-carousel__dot.is-active {
        width: 20px;
        opacity: .9;
    }

    .pricing-carousel__hint {
        display: block;
        text-align: center;
        font-size: 12px;
        letter-spacing: .04em;
        color: #fff;
        opacity: .5;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
        margin-bottom: 10px;
        transition: opacity .3s ease;
    }

    .pricing-carousel__viewport[data-swiped="true"] ~ .pricing-carousel__hint,
    .pricing-carousel__hint.is-hidden {
        opacity: 0;
    }

    .pricing-carousel__sr {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .pricing-cards-container.is-carousel .pricing-card {
        flex-basis: 86%;
        min-width: 86%;
        max-width: 86%;
    }
}

/* Une seule carte visible en entier sur les très petits écrans, mais on garde
   le débord pour que le geste reste évident. */
@media (max-width: 360px) {
    .pricing-cards-container.is-carousel .pricing-card {
        flex-basis: 88%;
        min-width: 88%;
        max-width: 88%;
    }

    .pricing-carousel__track {
        gap: 12px;
        padding-left: 12px;
        padding-right: 12px;
        scroll-padding-left: 12px;
        scroll-padding-right: 12px;
    }
}