/* Pagination cachée sur desktop et tablette */
.lu-carousel-encadre .swiper-pagination {
    display: none !important;
}

/* ── Carousel Elementor Swiper — cadre crème + flèches extérieures ──────── */
.lu-carousel-encadre {
    position: relative !important;
}

.lu-carousel-encadre::after {
    content: '' !important;
    position: absolute !important;
    top: -35px !important;
    right: -20px !important;
    bottom: -2px !important;
    left: -20px !important;
    border: 4px solid #E9E4DC !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

/* position:static → le swiper n'est plus le containing block des boutons.
   Les boutons position:absolute se rattachent au widget Elementor (position:relative).
   overflow:hidden reste actif → les slides sont toujours clippées. */
.lu-carousel-encadre .elementor-image-carousel-wrapper {
    position: static !important;
}

/* Flèches positionnées par rapport au widget, à l'extérieur du cadre */
.lu-carousel-encadre .elementor-swiper-button-prev,
.lu-carousel-encadre .elementor-swiper-button-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.lu-carousel-encadre .elementor-swiper-button-prev {
    left: -70px !important;
}

.lu-carousel-encadre .elementor-swiper-button-next {
    right: -70px !important;
}

/* Cacher les SVG Elementor d'origine */
.lu-carousel-encadre .elementor-swiper-button-prev svg,
.lu-carousel-encadre .elementor-swiper-button-next svg {
    display: none !important;
}

/* Flèche custom via mask-image — fond crème, forme du SVG */
.lu-carousel-encadre .elementor-swiper-button-prev,
.lu-carousel-encadre .elementor-swiper-button-next {
    width: 40px !important;
    height: 40px !important;
    background-color: #E9E4DC !important;
    -webkit-mask-image: url('/wp-content/uploads/2026/05/fleche-droite.svg') !important;
    mask-image: url('/wp-content/uploads/2026/05/fleche-droite.svg') !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}

/* Flèche gauche = droite miroir */
.lu-carousel-encadre .elementor-swiper-button-prev {
    transform: translateY(-50%) scaleX(-1) !important;
}

/* ── Page Reliques — grille 3 items ─────────────────────────────────────── */
.lu-reliques-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 60px;
    text-align: center;
}

/* Sur la page Reliques, les cartes restent dans les mêmes bords que l’atlas. */
@media (min-width: 1025px) {
    .page-id-424 .lu-reliques-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 48px;
        width: 100%;
    }
    .page-id-424 .lu-relique-item {
        min-width: 0;
    }
    .page-id-424 .lu-relique-img-link {
        width: 100%;
    }
    .page-id-424 .lu-relique-img-wrap {
        width: calc(100% - 30px);
        max-width: 370px;
        height: auto;
        aspect-ratio: 1;
    }
    .page-id-424 .lu-relique-img-inner {
        position: absolute;
        inset: 0;
    }
    .page-id-424 .lu-relique-title {
        width: 100%;
        min-width: 0;
    }
    .page-id-424 .lu-relique-title a span {
        padding-inline: 20px;
    }
}

.lu-relique-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Lien autour de l'image */
.lu-relique-img-link {
    display: block;
}

/* Image circulaire avec cadre portfolio-pattern */
.lu-relique-img-wrap {
    position: relative;
    width: 370px;
    height: 370px;
    margin: 0 auto 28px;
}

/* Cercle interne — background-image pour éviter les conflits height:auto du thème */
.lu-relique-img-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

/* Cadre vintage circulaire (même principe que lu-img-frame mais en rond) */
.lu-relique-img-wrap::before {
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    right: -15px;
    bottom: -15px;
    border-radius: 50%;
    background-image: url('/wp-content/themes/vintwood/img/patterns/portfolio-pattern.png');
    background-size: cover;
    background-position: center;
    z-index: 0;
    pointer-events: none;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Tablette (≤ 1024px) : 3 colonnes mais cercles réduits */
@media screen and (max-width: 1024px) {
    .lu-reliques-grid {
        gap: 32px 20px;
    }
    .lu-relique-img-wrap {
        width: 200px;
        height: 200px;
    }
    .lu-relique-title a span {
        font-size: 22px;
        padding: 10px 20px;
    }
    .lu-carousel-encadre .elementor-swiper-button-prev {
        left: -50px !important;
    }
    .lu-carousel-encadre .elementor-swiper-button-next {
        right: -50px !important;
    }
}

/* Mobile (≤ 767px) : 1 colonne */
@media screen and (max-width: 767px) {
    .lu-reliques-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .lu-relique-img-wrap {
        width: 260px;
        height: 260px;
    }
    .lu-relique-title a span {
        font-size: 24px;
        padding: 12px 24px;
    }
    /* Pagination visible uniquement en mobile */
    .lu-carousel-encadre .swiper-pagination {
        display: block !important;
    }

    /* Carousel mobile : pas de cadre qui déborde, pas de flèches */
    .lu-carousel-encadre::after {
        display: none !important;
    }
    .lu-carousel-encadre .elementor-swiper-button-prev,
    .lu-carousel-encadre .elementor-swiper-button-next {
        display: none !important;
    }

    /* Pagination en étoiles 5 branches crème */
    .lu-carousel-encadre .swiper-pagination-bullet {
        width: 18px !important;
        height: 18px !important;
        border-radius: 0 !important;
        background-color: #E9E4DC !important;
        opacity: 0.4 !important;
        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%) !important;
        transition: opacity 0.2s ease, transform 0.2s ease !important;
    }
    .lu-carousel-encadre .swiper-pagination-bullet-active {
        opacity: 1 !important;
        transform: scale(1.3) !important;
    }
}

/* Titre surligné vert — même style que lu-icon-rouge .elementor-icon-box-title */
.lu-relique-title {
    margin: 0;
    text-align: center;
    line-height: 1.8;
}

.lu-relique-title a {
    text-decoration: none;
}

.lu-relique-title a:hover span {
    background-color: #e53e26;
    transition: background-color 0.25s ease;
}

.lu-relique-title a span {
    display: block;
    background-color: #517d71;
    background-image: url('/wp-content/themes/vintwood/img/patterns/shape_pattern.png');
    color: #e9e4dc;
    padding: 14px 32px;
    font-size: 30px;
    font-weight: 700;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-transform: uppercase;
    transition: background-color 0.25s ease;
}