/* ==========================================================================
   Slideshow Viewer — styles for the standalone viewer (SlideEngine)
   ========================================================================== */

/* ── Full-viewport reset ── */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

/* ── Back / close link (fixed top-right) ── */

.slideshow-back-link {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgb(0 0 0 / 50%);
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 100;
    transition: background .2s;
}

.slideshow-back-link:hover {
    background: rgb(0 0 0 / 80%);
}

/* ── Overlay démarrage ── */

.ss-overlay {
    position: fixed; inset: 0;
    background: rgb(0 0 0 / 85%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 100; color: #fff; cursor: pointer;
}
.ss-overlay__title { font-size: 2rem; margin-bottom: 1rem; }

.ss-overlay__play {
    width: 80px; height: 80px; border-radius: 50%;
    background: rgb(255 255 255 / 15%); border: 2px solid #fff;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s;
}
.ss-overlay__play:hover { transform: scale(1.1); }

/* ── Barre de contrôle ── */

.ss-controls {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgb(0 0 0 / 70%));
    padding: 1rem 2rem; display: flex; align-items: center; gap: 1rem;
    z-index: 50; transition: opacity .3s; color: #fff;
}
.ss-controls--hidden { opacity: 0; pointer-events: none; }

.ss-controls__btn {
    background: none; border: none; color: #fff;
    font-size: 1.2rem; cursor: pointer; padding: .25rem;
}

.ss-controls__progress {
    flex: 1; height: 6px; background: rgb(255 255 255 / 25%); border-radius: 3px;
    cursor: pointer; position: relative;
    transition: height .15s;
}
.ss-controls__progress:hover { height: 10px; }

.ss-controls__progress-fill {
    height: 100%; background: #fff; border-radius: 3px;
    transition: width .3s;
    pointer-events: none;
}

.ss-controls__volume {
    width: 80px;
    accent-color: #fff;
    cursor: pointer;
    vertical-align: middle;
}
.ss-controls__counter { font-size: .9rem; white-space: nowrap; }
.ss-controls__timer { font-size: .75rem; opacity: .5; font-variant-numeric: tabular-nums; min-width: 2em; text-align: center; }
.ss-controls__btn--play { font-size: 1.4rem; }