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

.masonry{
    position:relative;

    width:100%;
    padding:20px;
}


.masonry-item{
    position:absolute;

    display:block;

    overflow:hidden;
}


.masonry-item img{
    display:block;

    width:100%;
    height:auto;

    transition:
        transform .3s cubic-bezier(.22,1,.36,1);
}


.masonry-item:hover img{
    transform:scale(1.03);
}



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

@media(min-width:600px){

    .masonry{
        padding:20px;
    }

}



/* ==================================================
   DESKTOP
================================================== */

@media(min-width:1040px){

    .masonry{
        max-width:1400px;

        margin:0 auto;
        padding:40px;
    }

}
/* Apparition douce une fois les positions calculées */
.masonry.masonry-ready .masonry-item {
    animation: galleryReveal .38s ease both;
    animation-delay: var(--gallery-delay, 0ms);
}

@keyframes galleryReveal {
    from { opacity:0; transform:translateY(12px); }
    to { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) {
    .masonry.masonry-ready .masonry-item { animation:none; }
}

/* Avant JavaScript : grille normale, sans superposition. */
.masonry:not(.gallery-measuring):not(.masonry-ready){
    display:grid;
    grid-template-columns:1fr;
    gap:15px;
    height:auto !important;
}
.masonry:not(.gallery-measuring):not(.masonry-ready) .masonry-item{
    position:relative;
    width:auto !important;
    left:auto !important;
    top:auto !important;
}
@media(min-width:600px){
    .masonry:not(.gallery-measuring):not(.masonry-ready){grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(min-width:1040px){
    .masonry:not(.gallery-measuring):not(.masonry-ready){grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
}
/* Le calcul se fait hors écran, puis la galerie devient visible. */
.masonry.gallery-measuring .masonry-item{visibility:hidden;}