/* Fichier : gallery-slideshow.css */
/* Les variables sont injectées par PHP en fonction des réglages */

.mga-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 10, var(--mga-bg-opacity, 0.95));
    z-index: var(--mga-z-index, 99999);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.mga-viewer.mga-has-blur { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.mga-viewer.mga-has-texture { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJub2lzZSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuOCIgbnVtT2N0YXZlcz0iNCIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIiBmaWx0ZXI9InVybCgjbm9pc2UpIiBvcGFjaXR5PSIwLjE1Ii8+PC9zdmc+'); }

.mga-echo-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.mga-echo-bg__image { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); filter: blur(25px) brightness(0.6); transition: opacity 0.4s ease-in-out; opacity: 0; }
.mga-echo-bg__image.mga-visible { opacity: 1; }

.mga-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    color: #fff;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
    z-index: 20;
}

.mga-counter { font-size: 16px; font-variant-numeric: tabular-nums; }
.mga-caption-container { flex-grow: 1; text-align: center; padding: 0 20px; overflow: hidden; }
.mga-caption { margin: 0; font-size: 16px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mga-toolbar { display: flex; align-items: center; gap: 10px; }

.mga-toolbar-button { position: relative; background: transparent; border: none; color: var(--mga-accent-color, #fff); cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s ease; }
.mga-toolbar-button:hover { background-color: rgba(255, 255, 255, 0.2); }
.mga-toolbar-button .mga-icon { width: 22px; height: 22px; fill: var(--mga-accent-color, #fff); position: relative; z-index: 1; }

.mga-timer-svg { position: absolute; top: -3px; left: -3px; width: 38px; height: 38px; transform: rotate(-90deg); }
.mga-timer-svg path { fill: none; stroke-width: 2.5; }
.mga-timer-bg { stroke: rgba(255, 255, 255, 0.2); }
.mga-timer-progress { stroke: var(--mga-accent-color, #fff); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.2s linear; }

.mga-main-swiper {
    width: 100%;
    height: 75%;
    max-width: 98vw;
    max-height: calc(100vh - (var(--mga-thumb-size-desktop, 90px) + 80px));
    margin-top: 60px;
}

.mga-main-swiper .swiper-slide { position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; will-change: transform; }
.mga-main-swiper .swiper-zoom-container { width: 100%; height: 100%; }
.mga-main-swiper .swiper-slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; }

.mga-spinner {
    display: none;
    position: absolute;
    z-index: 10;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--mga-accent-color, #fff);
    animation: mga-spin 1s ease-in-out infinite;
}
@keyframes mga-spin { to { transform: rotate(360deg); } }


.mga-main-swiper .swiper-button-next,
.mga-main-swiper .swiper-button-prev { color: var(--mga-accent-color, #fff); --swiper-navigation-size: 30px; background-color: rgba(0, 0, 0, 0.3); border-radius: 50%; width: 50px; height: 50px; transition: background-color 0.2s ease; }
.mga-main-swiper .swiper-button-next:hover,
.mga-main-swiper .swiper-button-prev:hover { background-color: rgba(0, 0, 0, 0.6); }

.mga-thumbs-swiper {
    height: var(--mga-thumb-size-desktop, 90px);
    box-sizing: border-box;
    padding: 10px 0;
    width: 98%;
    max-width: 1200px;
}

.mga-thumbs-swiper .swiper-slide { height: 100%; width: auto; opacity: 0.5; transition: opacity 0.3s ease; cursor: pointer; border: 2px solid transparent; border-radius: 6px; box-sizing: border-box; will-change: opacity; }
.mga-thumbs-swiper .swiper-slide:hover { opacity: 0.8; }
.mga-thumbs-swiper .swiper-slide-thumb-active { opacity: 1; border-color: var(--mga-accent-color, #fff); }
.mga-thumbs-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

/* Masquer les miniatures en mode plein écran */
.mga-viewer:fullscreen .mga-thumbs-swiper {
    display: none;
}
.mga-viewer:fullscreen .mga-main-swiper {
    max-height: calc(100vh - 80px); /* On redonne de la place à l'image principale */
}

/* --- RESPONSIVE --- */

@media (max-width: 768px) {
    /* Mode Portrait */
    .mga-header {
        height: auto;
        padding: 10px 10px;
        flex-wrap: wrap;
    }
    .mga-counter { order: 1; }
    .mga-toolbar { order: 2; }
    .mga-caption-container {
        order: 3;
        width: 100%;
        padding: 8px 0 0 0;
        text-align: center;
    }
    .mga-caption {
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
    }
    .mga-counter { font-size: 14px; }
    .mga-toolbar { gap: 5px; }
    
    .mga-main-swiper {
        margin-top: 95px;
        max-height: calc(100vh - (var(--mga-thumb-size-mobile, 70px) + 115px));
    }
    .mga-thumbs-swiper {
        height: var(--mga-thumb-size-mobile, 70px);
    }
    .mga-main-swiper .swiper-button-next, .mga-main-swiper .swiper-button-prev { display: none; }
}

@media (max-width: 900px) and (orientation: landscape) {
    /* Mode Paysage sur mobile/tablette */
    .mga-header {
        flex-wrap: nowrap; /* On remet les éléments sur une seule ligne */
        height: 60px;
    }
    .mga-counter { order: initial; }
    .mga-toolbar { order: initial; }
    .mga-caption-container {
        order: initial;
        position: absolute; /* On sort la légende du flux */
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px 15px 15px;
        background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    }
    .mga-caption {
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
    }
    .mga-main-swiper {
        margin-top: 60px;
        max-height: calc(100vh - (var(--mga-thumb-size-mobile, 70px) + 80px));
    }
}