/* ── Carousel plugin — frontend styles ── */

.carousel-plugin {
    width: 100%;
    max-width: 100%;
}

/* Force le ratio 1:1 sur chaque slide */
.carousel-plugin .splide__slide {
    overflow: hidden;
}

.carousel-plugin .carousel-figure {
    margin: 0;
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.carousel-plugin .carousel-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Évite le flash de chargement lazy */
    background-color: #f0f0f0;
}

/* Légende */
.carousel-caption {
    text-align: center;
    font-size: 0.85em;
    color: #555;
    padding: 6px 12px;
    margin: 0;
    background: rgba(255, 255, 255, 0.85);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* ── Flèches style Bootstrap ── */
.carousel-plugin .splide__arrow {
    width: 3rem;
    height: 3rem;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 1;
    top: 50%;
    transform: translateY(-50%);
    transition: background 0.15s;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.carousel-plugin .splide__arrow:focus,
.carousel-plugin .splide__arrow:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.carousel-plugin .splide__arrow:hover {
    background: rgba(0, 0, 0, 0.7);
}

.carousel-plugin .splide__arrow--prev { left: 0; }
.carousel-plugin .splide__arrow--next { right: 0; }

/* Remplace l'icône SVG Splide par un chevron CSS pur */
.carousel-plugin .splide__arrow svg {
    display: none;
}

.carousel-plugin .splide__arrow::after {
    content: '';
    display: block;
    width: 0.7rem;
    height: 0.7rem;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
}

.carousel-plugin .splide__arrow--prev::after {
    transform: rotate(-135deg) translate(-2px, 2px);
}

.carousel-plugin .splide__arrow--next::after {
    transform: rotate(45deg) translate(-2px, 2px);
}