/* Forme — vignettes Réalisations : blur-up, zoom au survol, apparition au scroll, responsive mobile.
   N'affecte pas le calcul de la masonry Webflow sur desktop (sauf override mobile assumé). */

/* --- zoom léger au survol (appareils avec hover) --- */
/* translateZ(0) force une couche de compositing qui CLIPPE l'image (position:absolute +
   transition:transform = couche GPU) au border-radius du conteneur. Sans ca, Safari/iOS/WebKit
   ne clippe pas l'enfant composite -> coins carres (radius "disparait") sur mobile. */
.masonry-grid-v3 .fm-tile-media{overflow:hidden;transform:translateZ(0)}
.masonry-grid-v3 .masonry-img{transition:filter .6s ease,transform .5s cubic-bezier(.2,.6,.2,1)}
@media (hover:hover){
  .masonry-grid-v3 .fm-tile-media:hover .masonry-img{transform:scale(1.04)}
}

/* --- blur-up au chargement --- */
.masonry-grid-v3 .masonry-img.fm-loading{filter:blur(12px)}
.masonry-grid-v3 .masonry-img.fm-loaded{filter:none}

/* --- apparition au scroll (activée par JS via .fm-reveal ; sans JS tout reste visible) --- */
.masonry-grid-v3.fm-reveal .masonry-item-v3{opacity:0;transform:translateY(22px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.6,.2,1)}
.masonry-grid-v3.fm-reveal .masonry-item-v3.fm-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .masonry-grid-v3.fm-reveal .masonry-item-v3{opacity:1;transform:none;transition:none}
}

/* --- responsive mobile : la masonry JS Webflow déborde sous 768px ; on reprend la main
   en pavage colonnes CSS (2 colonnes, 1 sur petit écran), sans débordement horizontal. --- */
@media (max-width:767px){
  .masonry-grid-v3{position:static!important;height:auto!important;display:block!important;
    column-count:2;column-gap:8px}
  .masonry-item-v3{position:static!important;top:auto!important;left:auto!important;
    width:100%!important;display:inline-block;break-inside:avoid;margin:0 0 8px}
  .masonry-item-v3 .masonry-img{width:100%;height:100%}
}
@media (max-width:479px){
  .masonry-grid-v3{column-count:1}
}