/********** Pagination slider splide js ***********/
/* Pagination au centre */
section.builder .wrapper_slider.place_center .splide__arrows .splide__arrow--next {
    right: -40px;
}

section.builder .wrapper_slider.place_center .splide__arrows .splide__arrow--prev {
    left: -40px;
}

section.builder .wrapper_slider:not(.place_center) .splide__arrows .splide__arrow--next {
    right: 0px;
}

section.builder .wrapper_slider:not(.place_center) .splide__arrows .splide__arrow--prev {
    left: 0px;
}

/* Pagination en bas */
section.builder .wrapper_slider.place_bottom .splide__arrows {
    width: 100%;
    position: absolute;
    bottom: 20px;

    /* @media (max-width: 992px) {
        justify-content: center !important;
    } */
}

section.builder .wrapper_slider.place_bottom {
    padding-bottom: 70px;
}

/* Pagination en haut  */
section.builder .wrapper_slider.place_up .splide__arrows {
    position: relative;
    top: -50px;
}

section.builder .wrapper_slider.place_up {
    padding-top: 70px;
}

section.builder .wrapper_slider.align_right .splide__arrows,
section.builder .wrapper_slider.align_left .splide__arrows {
    display: flex;
    gap: 10px;
    bottom: 0px;

    .splide__arrow {
        position: relative;
        margin: 0;
    }
}

section.builder .wrapper_slider.align_right .splide__arrows {
    justify-content: end;

    @media (min-width: 1400px) {
        padding-right: 90px;
    }
}

section.builder .wrapper_slider.align_left .splide__arrows {
    justify-content: start;

    @media (min-width: 1200px) {
        padding-right: 40px;
    }

    @media (min-width: 1400px) {
        padding-left: 125px;
    }
}

section.builder .wrapper_slider .splide__arrows .splide__arrow svg {
    display: none;
}

section.builder .wrapper_slider .splide__arrows .splide__arrow--prev,
section.builder .wrapper_slider .splide__arrows .splide__arrow--next {
    background: transparent;
    width: fit-content;
    border: 1px solid var(--color-primary);
    border-radius: 100px;
    transition: var(--transition);
    transform: unset !important;
    height: 40px;
    padding: 0px 15px;

    &:hover {
        background: var(--color-primary);

        &::before,
        &::after {
            color: var(--white);
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(275deg) brightness(105%) contrast(101%);
        }
    }
}

section.builder .wrapper_slider .splide__arrows .splide__arrow--prev::before {
    margin-right: 10px;
}

section.builder .wrapper_slider .splide__arrows .splide__arrow--next::after {
    margin-left: 10px;
    transform: rotate(180deg);
}

section.builder .wrapper_slider .splide__arrows .splide__arrow--prev::before,
section.builder .wrapper_slider .splide__arrows .splide__arrow--next::after {
    content: url('../../img/arrow_slider.svg');
    display: inline-block;
}

section.builder .wrapper_slider .splide__arrows .splide__arrow--prev::after,
section.builder .wrapper_slider .splide__arrows .splide__arrow--next::before {
    font-size: 14px;
    color: var(--color-primary);
    display: inline-block;
}

section.builder .wrapper_slider .splide__arrows .splide__arrow--prev::after {
    content: "Précédent";
}

section.builder .wrapper_slider .splide__arrows .splide__arrow--next::before {
    content: "Suivant";
}

/********** Pagination CPT (WP-PageNavi, cf. cpt_list() dans inc/modules.php :
   "if (function_exists('wp_pagenavi'))" -- plugin actif et prioritaire sur
   the_posts_pagination() sur ce site, vérifié sur le rendu réel de la page
   Ressources : markup <div class="wp-pagenavi"><span class="current">…
   <a class="page">…<a class="nextpostslink">…). Boutons ronds numérotés,
   calqués sur lovable/src/components/ressources/RessourcesCards.tsx
   (nav de pagination : size-11 rounded-full border, actif = fond/texte apricot).
   Règles génériques .pagination/.nav-links/.page-numbers conservées en repli
   pour le cas où the_posts_pagination() serait utilisée (wp_pagenavi inactif). */
.wp-pagenavi,
.pagination.navigation .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.wp-pagenavi a,
.wp-pagenavi span,
.pagination.navigation .nav-links .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: var(--border-radius-full);
    color: var(--color-secondary);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    transition: var(--transition);
}

.wp-pagenavi a:hover,
.wp-pagenavi span.current,
.pagination.navigation .nav-links .page-numbers.current,
.pagination.navigation .nav-links .page-numbers:hover {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--white);
}

/* "Page X sur Y" (span.pages) et points de suspension (span.extend) : texte
   informatif, pas un bouton -- neutralisé (pas de pastille, pas de survol). */
.wp-pagenavi span.pages,
.wp-pagenavi span.extend {
    border-color: transparent;
    min-width: auto;
}

.wp-pagenavi span.extend:hover {
    background: transparent;
    color: var(--color-secondary);
}

.wp-pagenavi a.previouspostslink,
.wp-pagenavi a.nextpostslink,
.wp-pagenavi a.first,
.wp-pagenavi a.last,
.pagination.navigation .nav-links .prev.page-numbers,
.pagination.navigation .nav-links .next.page-numbers {
    width: auto;
    padding: 0 20px;
}