.gallery-section{
  position:relative;
  background:var(--charbon-clair);
  padding:var(--section-pad-y) 0;
  border-top:1px solid rgba(232,228,221,0.08);
}

.gallery-header{margin-bottom:48px;}
.gallery-header .eyebrow{display:block; margin-bottom:16px;}
.gallery-header p{
  color:var(--acier-clair);
  max-width:56ch;
  font-size:15px;
  margin-top:16px;
}

.gallery-filters{
  display:flex;
  gap:10px;
  margin-bottom:36px;
  flex-wrap:wrap;
}
.gallery-filter{
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--acier-clair);
  background:transparent;
  border:1px solid rgba(232,228,221,0.15);
  padding:9px 18px;
  border-radius:2px;
  cursor:pointer;
  transition:all 0.2s ease;
}
.gallery-filter:hover{border-color:rgba(232,228,221,0.4); color:var(--blanc-casse);}
.gallery-filter.active{
  background:var(--blanc-casse);
  color:var(--charbon);
  border-color:var(--blanc-casse);
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:180px;
  gap:8px;
}
.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:2px;
  cursor:pointer;
  border:1px solid rgba(232,228,221,0.08);
}
.gallery-item.tall{grid-row:span 2;}
.gallery-item.wide{grid-column:span 2;}

.gallery-item .item-texture{
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.55;
  mix-blend-mode:overlay;
  transition:transform 0.4s ease;
}
.gallery-item:hover .item-texture{transform:scale(1.06);}

.gallery-item .item-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding:14px;
  background:linear-gradient(180deg, transparent 50%, rgba(10,9,8,0.75) 100%);
  opacity:0;
  transition:opacity 0.25s ease;
}
.gallery-item:hover .item-overlay{opacity:1;}
.item-overlay span{
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--jaune-ind);
}

/* lightbox */
.gallery-modal{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(10,9,8,0.94);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.gallery-modal.open{display:flex;}
.gallery-modal-inner{
  position:relative;
  max-width:900px;
  max-height:80vh;
  width:100%;
  aspect-ratio:4/3;
  background:var(--charbon-clair);
  border-radius:2px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gallery-modal-inner .item-texture{
  position:absolute;
  inset:0;
  opacity:0.5;
  mix-blend-mode:overlay;
}
.gallery-modal-caption{
  position:absolute;
  bottom:16px;
  left:16px;
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--blanc-casse);
}
.gallery-modal-close, .gallery-modal-prev, .gallery-modal-next{
  position:absolute;
  background:rgba(10,9,8,0.55);
  border:1px solid rgba(232,228,221,0.3);
  color:var(--blanc-casse);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  width:40px;
  height:40px;
  transition:background 0.2s ease;
}
.gallery-modal-close:hover, .gallery-modal-prev:hover, .gallery-modal-next:hover{background:var(--rouille);}
.gallery-modal-close{top:-56px; right:0;}
.gallery-modal-prev{left:-56px; top:50%; transform:translateY(-50%);}
.gallery-modal-next{right:-56px; top:50%; transform:translateY(-50%);}
.gallery-modal-close svg, .gallery-modal-prev svg, .gallery-modal-next svg{width:16px; height:16px;}

@media (max-width:900px){
  .gallery-modal-prev{left:8px;}
  .gallery-modal-next{right:8px;}
  .gallery-modal-close{top:8px; right:8px;}
}

@media (max-width:760px){
  .gallery-grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:150px;}
  .gallery-item.wide{grid-column:span 2;}
  .gallery-item.tall{grid-row:span 1;}
}