body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: black;
            overflow: hidden;
        }

        .slideshow-container {
            position: relative;
            width: 100vw;
            height: 100vh;
        }

        .slide {
            display: none; /* Caché par défaut */
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: contain; /* Respecte le ratio, fond noir si besoin */
        }

        /* Animation de transition simple */
        .fade {
            animation: fadeAnim 1.5s;
        }

        @keyframes fadeAnim {
            from { opacity: .4 } 
            to { opacity: 1 }
        }

        /* Conteneur des contrôles */
.controls {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    gap: 10px;
    opacity: 0.3; /* Discret par défaut */
    transition: opacity 0.3s;
}

.controls:hover {
    opacity: 1; /* S'éclaire au survol */
}

.btn-control {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    font-family: sans-serif;
    backdrop-filter: blur(5px); /* Effet verre dépoli */
}

.btn-control:hover {
    background: rgba(255, 255, 255, 0.4);
}

.btn-quit {
    background: rgba(220, 53, 69, 0.6); /* Rouge pour quitter */
}