/* BODY */
    /*
    body{
        background:url("<?= $ground ?>") center/cover no-repeat fixed;
    }
        */

/* plein écran */
:fullscreen img{
    height:100vh;
}
html, body {
    height:100%;
    margin:0;
}



/* HAUT de page  HEADER */
    .header-bar{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:6px 10px;
        gap:10px;
    }

    .header-left,
    .header-center,
    .header-right{
        flex:1;
        display:flex;
        align-items:center;
    }

    .header-left{
        justify-content:flex-start;
    }

    .header-center{
        justify-content:center;
    }

    .header-right{
        justify-content:flex-end;
    }

    .gallery-title{
        margin:0;
        font-size:1.4rem;
        background:rgba(0,0,0,0.5);
        color:white;
        white-space:nowrap;
    }

    .audio-player{
        max-width:180px;
    }

    /* header audio pour modile */
    @media(max-width:600px){
    .gallery-title{font-size:1.1rem;}
    .audio-player{max-width:120px;}
    }


/* ++++++++++++ carousel  ++++++++++++++++ */
            /*.carousel-caption{
                background:rgba(0,0,0,.5);
            }*/

    .carousel-caption{
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        width:auto;
        max-width:100%;
        display:inline-block;
        padding:6px 12px;
        background:rgba(0,0,0,0.5);
        border-radius:6px;
    }
    /* effet plus doux */
    .carousel-caption{
        backdrop-filter: blur(6px);
    }

            /* rendu cinéma */
            /*.carousel-item{
                background:black;
                display:flex;
                align-items:center;
                justify-content:center;
                text-align:center;
            }*/

    /* carousel */
    .carousel,
    .carousel-inner,
    .carousel-item{
        height:100%;
    }

    .carousel-item img{
        max-height:80vh;
        max-width:100%;
        object-fit:contain;
    }

    /* CSS MODE NORMAL*/
    .carousel,
    .carousel-inner,
    .carousel-item{
        height:100%;
    }

    .carousel-item img{
        max-height:80vh;
        max-width:100%;
        object-fit:contain;
    }

    /* ajout possible fondu encore plus cinéma proposé par GPT */
    .carousel-fade .carousel-item {
        transition: opacity .8s ease-in-out;
    }


    /*   ajout pour utiliser la page sans dépasser */
    .page-diapo{
        height:100vh;
        display:flex;
        flex-direction:column;
        overflow:hidden;
    }
    .header-diapo{
        flex:0 0 auto;
    }
    .viewer-diapo{
        flex:1 1 auto;
        overflow:hidden;
    }

/* ++++++++++++ TITRE de la galerie  ++++++++++++++++ */
    /* CSS FINAL POUR .img-title (une seule ligne) */
    .img-title{
        position:absolute;
        bottom:10px;
        left:50%;
        transform:translateX(-50%);

        padding:6px 12px;
        background:rgba(0,0,0,0.55);
        color:white;
        font-size:1rem;
        border-radius:6px;

        white-space:nowrap;
        max-width:90vw;

        width:fit-content;
        min-width:fit-content;

        text-align:center;
    }
    
/* ++++++++++++ images  ++++++++++++++++ */
        /*   ajout pour utiliser la page sans dépasser */
    .img-wrap{
        position:relative;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        max-width:100%;
        max-height:100%;
    }

    .img-wrap img{
        max-width:100%;
        max-height:100%;
        object-fit:contain;
    }


/* ++++++++++++ vignetets thumb  ++++++++++++++++ */
    .thumb{
        width:90px;height:90px;object-fit:cover;cursor:pointer;
    }

        /*.thumbs-diapo{
            flex:0 0 auto;
            max-height:18vh;
            overflow-x:auto;
        }*/

    .thumbs-diapo img{
        width:80px;
        height:80px;
        object-fit:cover;
        aspect-ratio:1/1;
        flex-shrink:0;
    }

    :fullscreen .thumbs-diapo img{
        width:80px;
        height:80px;
    }

    .thumbs-diapo{
        max-height:90px;
        overflow-x:auto;
        overflow-y:hidden;
        align-items:center;
    }
    .thumbs-zone{
        display:flex;
        align-items:center;
        gap:10px;
    }

    .thumbs-strip{
        display:flex;
        gap:6px;
        max-width:70vw;
        overflow-x:auto;
        overflow-y:hidden;
        scroll-behavior:smooth;
        scrollbar-width:none;
    }
    .thumbs-strip::-webkit-scrollbar{
        display:none;
    }

    .thumb{
        width:80px;
        height:80px;
        object-fit:cover;
        aspect-ratio:1/1;
        cursor:pointer;
        border:2px solid transparent;
        border-radius:6px;
        flex-shrink:0;
    }

    .thumb.active{
        border-color:#0d6efd;
        box-shadow:0 0 6px rgba(13,110,253,.9);
    }

    .thumb-btn{
        background:#0d6efd;
        border:none;
        color:white;
        font-size:18px;
        padding:6px 10px;
        border-radius:6px;
        cursor:pointer;
        flex-shrink:0;
    }

    /* pour controle 
    .thumbs-zone{border:2px solid red;}
    .thumbs-inner{border:1px solid blue;} */


/*CSS MODE IMMERSIF*/
/* Masque l’interface */
/* plein écran immersif */
    body.immersive .header-bar{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        z-index:9999;
        background:rgba(0,0,0,0.65);
        backdrop-filter: blur(6px);
        opacity:0;
        pointer-events:none;
        transition:opacity .4s ease;
    }

    body.immersive .header-bar.visible{
        opacity:1;
        pointer-events:auto;
    }

    body.immersive .video-title::before{
        content:"▶";
    }

    body.immersive .header-diapo,
    body.immersive .thumbs-zone,
    body.immersive audio,
    body.immersive .img-title{
        display:none !important;
    }
    /* ajout immersif header */
    body.immersive .viewer-diapo{
        height:100vh;
    }

    /* L’image devient plein écran */
    body.immersive .carousel-item img{
        max-height:100vh;
        max-width:100vw;
        object-fit:contain;
    }

    /* Empêche toute contrainte du layout */
    body.immersive .carousel{
        height:100vh;
    }

/* ++++++++++++ vignetets thumb  ++++++++++++++++ */
/* Popup élégante */
    .video-overlay{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,0.8);
        display:none;
        justify-content:center;
        align-items:center;
        z-index:10000;
    }

    .video-overlay video{
        max-width:90vw;
        max-height:90vh;
        border-radius:12px;
        background:black;
    }

    .video-overlay.show{
        display:flex;
    }

    /* affichage pour lancer la vidéo */
    /* Titre vidéo bleu cliquable (inchangé) */
    .video-title{
        color:#4da3ff;
        font-weight:600;
        cursor:pointer;
    }

    .video-title::before{
        content:"▶ ";
        /*font-size:1.2em;*/
        font-size:3em;
    }

/* titre image apparition au survol*/
/* Titre normal (hover) */
    .hover-title{
        position:absolute;
        bottom:10px;
        left:50%;
        transform:translateX(-50%);
        padding:6px 12px;
        background:rgba(0,0,0,0.55);
        color:white;
        font-size:1rem;
        border-radius:6px;
        white-space:nowrap;
        max-width:90vw;
        width:fit-content;
        opacity:0;
        transition:opacity .4s ease;
        pointer-events:none; /* pour que le hover passe sur l’image */
    }

    /* Si hover sur le carousel-item, on peut afficher immédiatement */
    .carousel-item:hover .hover-title{
        opacity:1;
    }