/* ============================= */
/*        GRILLE PRINCIPALE      */
/* ============================= */


.grille-encart {

    display: grid;

    grid-template-columns: repeat(8, 1fr);

    gap: 20px;

    box-sizing: border-box;

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 10px;

}



/* ============================= */
/*           ENCARTS             */
/* ============================= */


.encart1 {

    grid-column: 1 / -1;

    grid-row: 1;

}



/* ============================= */
/*      STYLE GENERAL ENCART     */
/* ============================= */


.encart {

    background-color: #fff;

    border-radius: 16px;

    padding: 20px;

    box-shadow:
        0 4px 10px rgba(0,0,0,.07);

    box-sizing: border-box;

}



.encart h2 {

    margin-top: 0;

    margin-bottom: 8px;

}



h2 {

    margin-bottom:10px;

    font-size:
        clamp(1rem,2.5vw,1.3rem);

    color:#7dc8e5;

    text-align:left;

}



h3 {

    font-size:
        clamp(.8rem,1.2vw,.9rem);

}



/* ============================= */
/*        ALBUM MASONRY          */
/* ============================= */


.album-photos {

    column-count:6;

    column-gap:18px;

    width:100%;

    margin-top:35px;

}



/* ============================= */
/*        PHOTO ITEM             */
/* ============================= */


.photo-item {

    display:inline-block;

    width:100%;

    margin:0 0 18px;

    break-inside:avoid;

    overflow:hidden;

    border-radius:14px;

    background:#f5f5f5;

    cursor:pointer;

    box-shadow:
        0 4px 14px rgba(0,0,0,.10);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}



/* Survol */

.photo-item:hover {

    transform:translateY(-3px);

    box-shadow:
        0 8px 22px rgba(0,0,0,.18);

}



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


.photo-item img {

    display:block;

    width:100%;

    height:auto;

    border-radius:14px;

    user-select:none;

    -webkit-user-drag:none;

    transition:
        filter .25s ease,
        transform .25s ease;

}



.photo-item:hover img {

    filter:brightness(1.04);

    transform:scale(1.02);

}



/* ============================= */
/*          LIGHTBOX             */
/* ============================= */


.lightbox {

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.85);

    justify-content:center;

    align-items:center;

    z-index:9999;

    overflow:hidden;

    touch-action:pan-y;

    -webkit-user-select:none;

    user-select:none;

}



/* Ouverture */

.lightbox.active {

    display:flex;

}



/* Image */

.lightbox-image {

    max-width:80vw;

    max-height:80vh;

    border-radius:8px;

    object-fit:contain;

}



/* Boutons */

.lightbox button {

    position:absolute;

    background:none;

    border:none;

    color:white;

    font-size:2rem;

    cursor:pointer;

}



/* Fermeture */

.lightbox-close {

    top:20px;

    right:20px;

}



/* Précédente */

.lightbox-prev {

    left:20px;

    top:50%;

    transform:translateY(-50%);

}



/* Suivante */

.lightbox-next {

    right:20px;

    top:50%;

    transform:translateY(-50%);

}



/* Compteur */

.lightbox-counter {

    position:absolute;

    bottom:20px;

    color:white;

    font-size:1rem;

}

/* Bloque le défilement sans supprimer la barre */
body.lightbox-open {

    overflow: hidden;

    padding-right: var(--scrollbar-width);

}

/* ============================= */
/*          TABLETTE             */
/* ============================= */


@media(max-width:1200px){


    .album-photos {

        column-count:5;

    }


}





@media(max-width:992px){


    .grille-encart {

        display:flex;

        flex-direction:column;

        gap:20px;

        padding:0 10px;

    }



    .encart1 {

        order:1;

    }



    .album-photos {

        column-count:4;

        column-gap:14px;

    }


}



/* ============================= */
/*            MOBILE             */
/* ============================= */


@media(max-width:750px){


    .album-photos {

        column-count:3;

        column-gap:12px;

    }


}





@media(max-width:500px){


    .album-photos {

        column-count:2;

        column-gap:10px;

    }



    .photo-item,
    .photo-item img {

        border-radius:10px;

    }



    .lightbox-image {

        max-width:90vw;

        max-height:75vh;

    }



    .lightbox button {

        font-size:1.7rem;

    }



    .lightbox-prev {

        left:10px;

    }



    .lightbox-next {

        right:10px;

    }


}





@media(max-width:350px){


    .album-photos {

        column-count:1;

    }


}

/* ============================= */
/*      APPAREILS TACTILES       */
/* ============================= */

@media (hover:none), (pointer:coarse) {

    .lightbox-prev,
    .lightbox-next {

        display:none;

    }

}