/* ==========================================================================
   Puces (bullets) des carrousels Swiper — habillage global
   S'inspire des visuels de reference : puces regroupees dans une "capsule"
   arrondie, puce active allongee facon pilule.
   Chargee apres swiper-bundle.min.css / style.min.css / demo14.min.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Disposition commune : puces centrees, espacees regulierement.
   -------------------------------------------------------------------------- */
.swiper-theme .swiper-pagination,
.swiper-container.swiper-theme .swiper-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 0;
}

/* --------------------------------------------------------------------------
   2. Puces : petits disques homogenes + transition douce.
   -------------------------------------------------------------------------- */
.swiper-theme .swiper-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin-left: 3px;
    border: 0;
    border-radius: 999px;
    background-color: transparent;
    border: 1px solid #182337;
    opacity: 1;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.25s ease,
                transform 0.2s ease;
}

.swiper-theme .swiper-pagination .swiper-pagination-bullet:hover {
    background-color: rgba(0, 0, 0, 0.4);
    transform: scale(1.15);
}

/* Puce active : pilule allongee aux couleurs de la marque. */
.swiper-theme .swiper-pagination .swiper-pagination-bullet-active,
.swiper-theme > .swiper-pagination .swiper-pagination-bullet-active {
    width: 24px;
    height: 7px;
    border-radius: 999px;
    /* background-color: #F78116; */
    background-color: #182337;
    /* background-image: linear-gradient(90deg, #F78116 0%, #ff9d3f 100%);
    box-shadow: 0 2px 6px rgba(247, 129, 22, 0.45); */
    transform: none;
}

/* --------------------------------------------------------------------------
   3. Contextes "en surimpression" (sur une image) : capsule floutee sombre,
      puces claires. Cible les carrousels du bloc intro et tout carrousel
      dont la pagination est posee sur le visuel (.pg-inner).
   -------------------------------------------------------------------------- */
.pg-inner .swiper-pagination,
.intro-wrapper .pg-inner .swiper-pagination,
.intro-wrapper .swiper-pagination {
    /* max-content + nowrap : centrée par left: 50% + translateX(-50%), la
       capsule ne disposait que de la moitié de la largeur du slider et la
       puce active passait à la ligne dès ~6 diapositives. */
    width: max-content;
    max-width: calc(100% - 24px);
    flex-wrap: nowrap;
    padding: 6px 10px;
    border-radius: 999px;
    /* background-color: rgba(15, 15, 18, 0.34); */
    background-color: rgba(255,255,255,0.2);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22),
                inset 0 0 0 1px rgba(255, 255, 255, 0.12); */
}

/* Le thème ajoute 5px de marge au-dessus et au-dessous de chaque puce : la
   capsule montait à 29px de haut (6 + 5 + 7 + 5 + 6). Sans cette marge
   verticale, seul le padding de la capsule entoure les puces (19px). */
.pg-inner .swiper-pagination .swiper-pagination-bullet,
.intro-wrapper .swiper-pagination .swiper-pagination-bullet {
    margin-top: 0;
    margin-bottom: 0;
    background-color: rgba(255, 255, 255, 0.55);
}

.pg-inner .swiper-pagination .swiper-pagination-bullet:hover,
.intro-wrapper .swiper-pagination .swiper-pagination-bullet:hover {
    background-color: rgba(255, 255, 255, 0.85);
}

.pg-inner .swiper-pagination .swiper-pagination-bullet-active,
.intro-wrapper .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #182337;
    background-image: none;
    /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); */
}

/* --------------------------------------------------------------------------
   4. Carrousels produits / categories : pagination sous le contenu, sur fond
      clair — pas de capsule, juste des puces nettes (regle 2) avec un peu
      d'air au-dessus.
   -------------------------------------------------------------------------- */
.swiper-theme:not(.pg-inner):not(.pg-right) > .swiper-pagination {
    margin-top: 1.6rem;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. Repli si le flou backdrop n'est pas supporte : capsule plus opaque.
   -------------------------------------------------------------------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .pg-inner .swiper-pagination,
    .intro-wrapper .swiper-pagination {
        background-color: rgba(15, 15, 18, 0.55);
    }
}