html, body { margin: 0; padding: 0; }
html { overflow-x: clip; /* évite le scroll horizontal proprement */ }

.gallery-grid{
  display: grid;
  gap: 0;

  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

  grid-auto-rows: 300px;

  grid-auto-flow: dense;
  margin: 0; padding: 0;

  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: calc(50% - 50vw);
}

.gallery-item{
  position: relative;
  margin: 0; padding: 0;
  overflow: hidden;
}

.gallery-item > img{
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;

}

.gallery-item.big{
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-item.is-hidden{ display: none !important; }


.gallery-link{
  position:absolute; inset:0; z-index:3;
  display:block; text-decoration:none;
}


.gallery-item figcaption{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; 
  background: rgba(255,255,255,0);            
  transition: background .25s ease;
  pointer-events:none;                         
  color:#000;
  text-align:center;
  padding: 12px;
}


.gallery-item figcaption h3,
.gallery-item figcaption p{
  margin:0;
  opacity:0;
  transform: translateY(18px);
  transition: opacity .28s ease, transform .36s ease;
  will-change: transform, opacity;
}


.gallery-item figcaption h3{
  font-weight:700;
  line-height:1.15;
  margin-bottom:8px;
  font-size: 1.25rem;
}
.gallery-item figcaption p{
  font-size: 1rem;
  letter-spacing:.01em;
}


.gallery-item:hover figcaption,
.gallery-item:focus-within figcaption{
  background: rgba(255,255,255,.8);
}
.gallery-item:hover figcaption h3,
.gallery-item:focus-within figcaption h3{
  opacity:1; transform: translateY(0);
  transition-delay: .06s;
}
.gallery-item:hover figcaption p,
.gallery-item:focus-within figcaption p{
  opacity:1; transform: translateY(0);
  transition-delay: .12s;
}


@media (prefers-reduced-motion: reduce){
  .gallery-item figcaption,
  .gallery-item figcaption h3,
  .gallery-item figcaption p{ transition:none !important; }
}


@media (max-width: 768px){
  .gallery-grid{
    grid-template-columns: 1fr;
    grid-auto-rows: 100vw; /* carré plein écran */
  }
  .gallery-item.big{
    grid-column: span 1; grid-row: span 1;
  }
  .gallery-item figcaption h3{ font-size: 1.15rem; }
  .gallery-item figcaption p{ font-size: .95rem; }
}

main{ margin:0; padding:0; } 

.gallery-item{
  --edge-fade: 1px;         
  --edge-fade-color: #fff;  
}

.gallery-item::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;           
  pointer-events: none; 
  background:
  /* haut */    linear-gradient(to bottom, var(--edge-fade-color) 0, transparent 100%) top/100% var(--edge-fade) no-repeat,
    /* droite */  linear-gradient(to left,   var(--edge-fade-color) 0, transparent 100%) right/var(--edge-fade) 100% no-repeat,
    /* bas */     linear-gradient(to top,    var(--edge-fade-color) 0, transparent 100%) bottom/100% var(--edge-fade) no-repeat,
    /* gauche */  linear-gradient(to right,  var(--edge-fade-color) 0, transparent 100%) left/var(--edge-fade) 100% no-repeat;
}