@charset "utf-8";
/* CSS Document */

:root{
    --bg:#0f1720;
    --card:#0b1220;
    --muted:#9aa6b2;
    --accent:#06b6d4;
}

*{
    box-sizing:border-box;
}

html, body{
    height:100%;
    margin:0;
    font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
    background:linear-gradient(180deg,#1d4ba3 0%, #0b1220 100%);
    color:#e6eef6;
}

/* Bouton accueil */

.home-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#06b6d4;
    color:yellow;
    text-decoration:none;
    padding:5px 12px;
    border-radius:50px;
    font-size:14px;
    margin-bottom:15px;
    transition:all 0.3s ease;
    font-weight:600;
}

/* Application */

.app{
    max-width:980px;
    margin:32px auto;
    padding:18px;
    border-radius:14px;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,0.02),
        rgba(255,255,255,0.02)
    );
    box-shadow:0 8px 30px rgba(2,6,23,0.6);
}

/* Header */

header{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
}

header h1{
    font-size:18px;
    margin:0;
}

/* Contrôles */

.controls{
    display:flex;
    gap:8px;
    align-items:center;
}

button,
.toggle{
    background:none;
    border:1px solid rgba(255,255,255,0.06);
    color:inherit;
    padding:8px 10px;
    border-radius:8px;
    cursor:pointer;
}

button:active{
    transform:translateY(1px);
}

/* Viewer */

.viewer{
    position:relative;
    margin-top:18px;
    background:#071428;
    border-radius:12px;
    overflow:hidden;
}

/* Slide */

.slide{
    display:none;
    align-items:center;
    justify-content:center;
    height:520px;
}

.slide.active{
    display:flex;
}

img,
video{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    border-radius:6px;
}

/* Texte */

.caption{
    position:absolute;
    left:18px;
    bottom:18px;
    background:linear-gradient(
        90deg,
        rgba(0,0,0,0.4),
        rgba(0,0,0,0.2)
    );
    padding:8px 10px;
    border-radius:8px;
    font-size:14px;
    color:var(--muted);
}

/* Navigation */

.nav{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
}

.nav button{
    background:rgba(0,0,0,0.35);
    border:0;
    color:white;
    padding:12px;
    border-radius:50%;
}

/* Miniatures */

.thumbnails{
    display:flex;
    gap:8px;
    margin-top:12px;
    overflow:auto;
    padding-bottom:6px;
}

.thumb{
    width:90px;
    height:60px;
    flex:0 0 auto;
    border-radius:6px;
    overflow:hidden;
    cursor:pointer;
    opacity:0.7;
    border:2px solid transparent;
}

.thumb.active{
    opacity:1;
    border-color:var(--accent);
}

.thumb img,
.thumb video{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Barre de progression */

.progress{
    height:6px;
    background:rgba(255,255,255,0.04);
    border-radius:6px;
    margin-top:12px;
    overflow:hidden;
}

.progress > i{
    display:block;
    height:100%;
    width:0%;
    background:linear-gradient(90deg,var(--accent),#7c3aed);
}

/* Footer */

footer{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    margin-top:12px;
    color:var(--muted);
    font-size:13px;
}

/* Responsive */

@media (max-width:700px){

    .slide{
        height:360px;
    }

    .thumb{
        width:72px;
        height:48px;
    }

}