/* viewer_CSS.css ---pour Version_8 -- modifications pour agarndir la zone IMAGE */
/*
        mediaHTML = `
            <img src="${item.url}" 
                 style="max-width:90vw; max-height:90vh;
                        position:absolute;
                        top:50%; left:50%;
                        transform:translate(-50%,-50%);
                        box-shadow:0 0 30px white;">
        `;

👉 pour garder un code lisible :
1️⃣ #viewerContent (le conteneur)
2️⃣ #viewerContent img/video (le contenu)
3️⃣ .viewer-btn (UI)

block → comportement classique
flex  → active justify-content + align-items

backdrop-filter:blur(5px);    // 🔥 effet blur  SI ON VEUT 
border:5px solid green;
*/




body{
    position:relative;
    z-index:0;
}



/* =========================
   OVERLAY
   ========================= */

#viewer{
    position:fixed;
    inset:0;

    display:none;              /* caché par défaut */

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,0.7);
    backdrop-filter:blur(2px);    /* 🔥 effet blur  SI ON VEUT -flou sur vignettes */
    z-index:9999;
}

/* =========================
   IMAGE / VIDEO
   ========================= */

#viewerContent{
    position:relative;
    height:100vh;

    max-width:100vw;
    max-height:95vh; /* au lieu de 95vh */
    /*top: 20px;*/

    display:flex;
    justify-content:center;
    align-items:center;
        /*border:10px solid red;*/
}

/* ajout */
#viewerContent img,
#viewerContent video{
    max-width:100%;
    max-height:100vh;   /* 🔥 réduit pour laisser place aux controls */ /* 🔥 IMPORTANT remplace max-height:95vh;*/
    object-fit:contain;
        /*border:5px solid yellow;*/
}

/* LAISSER L’IMAGE PRENDRE LA PLACE */
.viewer-media{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

/* =========================
   CAPTION
   ========================= */

#viewerCaption{
    position:absolute;
    bottom:5px;              /* 🔥 au plus bas */
    left:50%;
    transform:translateX(-50%);
    padding:4px 10px;        /* 🔥 compact */
    font-size:14px;          /* 🔥 légèrement réduit */
    background:rgba(0,0,0,0.5);
    color:white;
    border-radius:6px;
    white-space:nowrap;      /* 🔥 évite hauteur double ligne */
}
        /* pour éviter débordement SI BESOIN

        #viewerCaption{
            max-width:90vw;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        ✔ reste sur une ligne
        ✔ coupe proprement si trop long
        */

.caption-title{
    /*font-weight:normal;*/
    font-weight:500;
}

.caption-count{
    font-size:0.85em;
    opacity:0.6;
    margin-left:8px;
}


/* =========================
   NAVIGATION (flèches)
   ========================= */

    .nav-left,
    .nav-right{
        position:absolute;
        top:0;
        height:100%;
        width:10%;
        display:flex;
        align-items:center;
        z-index:5;
    }

    .nav-left{
        left:0;
        justify-content:flex-start;
        padding-left:10px;
    }

    .nav-right{
        right:0;
        justify-content:flex-end;
        padding-right:10px;
    }

    .nav-left:hover,
    .nav-right:hover{
        color:#0d6efd;
    }

/* bandes latérales cliquables */


    /* gauche / droite */
    .nav-left{ left:0; }
    .nav-right{ right:0; }

    /* flèches */
    .nav-arrow{
        font-size:40px;
        color:white;
        pointer-events:none; /* 🔥 important */
    }

    /* effet visuel léger */
    .nav-left:hover{
        background:linear-gradient(to right, rgba(0,0,0,0.4), transparent);
    }

    .nav-right:hover{
        background:linear-gradient(to left, rgba(0,0,0,0.4), transparent);
    }

    .nav-left span,
    .nav-right span{
        font-size:40px;
        color:white;
        background:rgba(0,0,0,0.5);
        padding:10px 15px;
        border-radius:50%;
    }



/* =========================
   STYLE COMMUN BOUTONS
   ========================= */

/* ==============================================================
   BOUTONS (play / close)--APPLICATION AUX BOUTONS EXISTANTS
   ============================================================== */
/* =========================
   BOUTONS VIEWER (GLOBAL)
   ========================= */

.viewer-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;

    font-size:18px;
    color:white;

    background:rgba(0,0,0,0.5);
    border-radius:50%;

    cursor:pointer;
    transition:all 0.2s ease;

    user-select:none;
    opacity:0.7;

    backdrop-filter: blur(4px);
}

/* hover desktop */
.viewer-btn:hover{
    background:#d76629;
    color:white;
    opacity:1;
    transform:scale(1.1);
}


/* =========================
   POSITION DES BOUTONS
   ========================= */

.viewer-play,
.viewer-close,
.viewer-prev,
.viewer-next{
    position:absolute;
    z-index:20;   /* 🔥 au-dessus image */
}

/* positions desktop */
.viewer-play{
    bottom:10px;
    right:40px; /* au lieu de 80 */
}

.viewer-close{
    top:5px;
    right:10px;
}

.viewer-prev{
    left:10px;
    top:50%;
    transform:translateY(-50%);
}

.viewer-next{
    right:10px;
    top:50%;
    transform:translateY(-50%);
}


/* =========================
   MOBILE (IMPORTANT)
   ========================= */

@media (max-width:768px){
    .viewer-btn{
        width:50px;
        height:50px;

        font-size:30px;
    }


    .viewer-btn{
        width:50px;           /* 🔥 zone tactile confortable */
        height:50px;

        font-size:24px;

        opacity:0.9;
        background:rgba(0,0,0,0.6);
    }

    /* flèches plus visibles */
    .viewer-prev,
    .viewer-next{
        font-size:26px;
    }

    /* repositionnement léger */
    .viewer-play{
        bottom:20px;
        right:20px;
    }

    .viewer-close{
        top:10px;
        right:10px;
    }

    .viewer-prev{
        left:5px;
    }

    .viewer-next{
        right:5px;
    }
}


/* =========================
   OPTION CONFORT MOBILE
   ========================= */

@media (max-width:768px){

    .viewer-btn{
        padding:8px;   /* 🔥 augmente zone tactile invisible */
    }
}










/* =========================
   THUMBS LAYOUT (COLONNES)
   ========================= */

/* =========================
   THUMBS GRID PROPRE -- affichage en ligne- gestion pas géniale des vignettes
   ========================= */

/* =========================
THUMBS MASONRY (COMME AVANT)
========================= */
        /*
        largeur totale ≈ (nb colonnes × largeur) + (nb gaps × gap)
        largeur totale= (N × 180) + ((N - 1) × 10)
        pour 5 colonnes :
        = (5 × 180) + (4 × 10)
        = 900 + 40
        = 940 px
        pour 8 colonnes :
        = (8 × 180) + (7 × 10)
        = 1440 + 70
        = 1510px

        */

    #thumbsContainer1{
        column-width:180px;
        column-gap:10px;
        padding:10px;
        /*margin-top:60px;*/   /* décale la zone des vignettes de la ligne pagination 1 -ajuste selon ton header */
        /* ajout pour centrer la zone des vignettes */
        max-width: 1510px;   /* 🔥 ajuste selon ton nb de colonnes--- 1510 pour 8 col */
        margin: 0 auto;      /* 🔥 centre le bloc */
    }

    #thumbsContainer{
        column-width:180px;
        column-gap:10px;
        padding:10px;

        max-width: 1600px;   /* limite haute */
        width: 100%;
        margin: 0 auto;
    }

    /* bloc vignette */
    .videoBox{
        display:inline-block;        /* 🔥 CRUCIAL */
        width:100%;
        margin-bottom:10px;
        break-inside:avoid;
        position:relative;
        z-index:auto;   /* 🔥 supprime tout z-index parasite */
    }

    /* image */
    .thumb{
        width:100%;
        height:auto;
        display:block;
        border-radius:6px;
    }

    /*@media (max-width: 600px) {
    #thumbsContainer{
        column-width:140px;
    }
}*/

/*#thumbsContainer{
    column-count: 8;
    column-gap: 10px;
    max-width: 1500px;
    margin: auto;
}*/

@media (max-width: 1200px){
    #thumbsContainer{ column-count: 6; }
}

@media (max-width: 900px){
    #thumbsContainer{ column-count: 4; }
}

@media (max-width: 600px){
    #thumbsContainer{ column-count: 2; }
}

@media (max-width: 400px){
    #thumbsContainer{ column-count: 1; }
}










/* =========================
   PAGINATION
   ========================= */
/* =========================
   PAGINATION
   ========================= */

   /*CONTENEUR PAGINATION*/
    #paginationTop,
    #paginationBottom{
        display:flex;
        flex-wrap:wrap;              /* 🔥 permet multi-lignes */
        justify-content:center;      /* 🔥 centré */
        gap:6px;                     /* 🔥 espace propre entre boutons */

        margin-top:50px;             /* ton décalage header */
        padding:10px 0;
        /*border:5px solid red;*/
    }
    /* BOUTONS PAGE */
        .page-btn{
        cursor:pointer;

        padding:5px 10px;

        background:#333;
        color:white;
        border-radius:6px;

        font-size:13px;

        transition:all 0.2s ease;
    }

    .page-btn:hover{
        background:#0d6efd;
        color:white;
        transform:scale(1.05);   /* 🔥 léger effet */
    }

    .page-btn.active{
        background:#0d6efd;
        color:white;
        font-weight:bold;

        transform:scale(1.1);
    }

    /*
    ----------- OPTIONS -------------------------------
    limiter largeur pour éviter lignes trop longues :
    #paginationTop,
    #paginationBottom{
        max-width:900px;
        margin-left:auto;
        margin-right:auto;
    }

    si tu as 50+ pages :
        .page-btn{
        min-width:32px;
        text-align:center;
    }
    ----------- OPTIONS -------------------------------
    */


/* =========================
   pour icone sur video
   ========================= */
.play{
    position:absolute;       /* 🔥 overlay */
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);

    font-size:30px;
    color:white;

    background:rgba(0,0,0,0.5);
    border-radius:50%;

    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    pointer-events:none;   /* 🔥 important (clic passe à l'image) */
}

.videoBox:hover .play{
    transform:translate(-50%, -50%) scale(1.4);
    background:rgba(0,0,0,0.7);
}

.videoBox.is-video::after{
    content:"▶";

    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);

    font-size:30px;
    color:white;

    background:rgba(0,0,0,0.5);
    border-radius:50%;

    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    pointer-events:none;

    transition:all 0.2s ease;   /* 🔥 animation fluide */
    opacity:0.85;
}


.videoBox.is-video:hover::after{
    transform:translate(-50%, -50%) scale(1.4);  /* 🔥 zoom */
    background:rgba(0,0,0,0.7);                 /* 🔥 contraste */
    opacity:1;
}




/* test */
/*
#thumbsContainer{
    border:5px solid red;
}
.videoBox{
    border:5px solid blue;
}
*/