/* Galerie mosaïque + lightbox — Pyja Van */

.van-mosaic{
  --mosaic-gap:10px;
  display:grid;
  gap:var(--mosaic-gap);
  grid-template-columns:repeat(2,1fr);
  margin:20px 0 12px;
}
@media(min-width:720px){
  .van-mosaic{
    grid-template-columns:repeat(4,1fr);
  }
  .van-mosaic__item:nth-child(1){
    grid-column:span 2;
    grid-row:span 2;
  }
}

.van-mosaic__item{
  position:relative;
  display:block;
  margin:0;
  padding:0;
  border:0;
  background:var(--ink,#012F37);
  cursor:pointer;
  overflow:hidden;
  /* 4/3 = ratio natif des JPG ; évite le rognage vertical */
  aspect-ratio:4/3;
  width:100%;
  line-height:0;
  opacity:1;
  transform:none;
  transition:opacity .45s ease,transform .45s ease;
}
.van-mosaic__item.is-in{
  opacity:1;
  transform:none;
}
.van-mosaic__item:nth-child(1){transition-delay:.02s}
.van-mosaic__item:nth-child(2){transition-delay:.06s}
.van-mosaic__item:nth-child(3){transition-delay:.1s}
.van-mosaic__item:nth-child(4){transition-delay:.14s}
.van-mosaic__item:nth-child(5){transition-delay:.18s}
.van-mosaic__item:nth-child(6){transition-delay:.22s}
.van-mosaic__item:nth-child(7){transition-delay:.26s}
.van-mosaic__item:nth-child(8){transition-delay:.3s}
.van-mosaic__item:nth-child(9){transition-delay:.34s}

.van-mosaic__item img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
  transition:transform .55s ease;
}
.van-mosaic__item picture{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}
.van-mosaic__item:hover img,
.van-mosaic__item:focus-visible img{
  transform:scale(1.03);
}

.van-mosaic__item:focus-visible{
  outline:3px solid var(--gold,#C69A33);
  outline-offset:3px;
}

.van-mosaic__more{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  background:rgba(1,47,55,.62);
  color:var(--cream,#F7F1E9);
  font-family:var(--display,'Archivo',sans-serif);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
  text-align:center;
  padding:12px;
  pointer-events:none;
}
.van-mosaic__more b{
  display:block;
  font-size:1.15rem;
  letter-spacing:.04em;
  color:var(--gold,#C69A33);
}

/* Lightbox */
.van-lightbox{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  padding-top:max(16px,env(safe-area-inset-top));
  padding-bottom:max(16px,env(safe-area-inset-bottom));
  background:#012F37;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
  box-sizing:border-box;
}
.van-lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.van-lightbox__dialog{
  --lb-meta:52px;
  --lb-gap:12px;
  position:relative;
  width:min(100%,1120px);
  max-height:100%;
  display:flex;
  flex-direction:column;
  gap:var(--lb-gap);
  min-height:0;
  box-sizing:border-box;
}

.van-lightbox__stage{
  position:relative;
  flex:0 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#012F37;
  max-height:calc(100% - var(--lb-meta) - var(--lb-gap));
  overflow:visible;
}

.van-lightbox__stage img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  /* Photo entière, jamais rognée : bornée seulement par l’espace dispo */
  max-height:min(
    calc(100dvh - 32px - var(--lb-meta) - var(--lb-gap)),
    calc(100vh - 32px - var(--lb-meta) - var(--lb-gap))
  );
  object-fit:contain;
  object-position:center center;
  background:transparent;
  opacity:0;
  transition:opacity .22s ease;
}
.van-lightbox__stage img.is-ready{opacity:1}

.van-lightbox__meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  color:var(--cream,#F7F1E9);
  flex-wrap:wrap;
  flex:none;
  min-height:calc(var(--lb-meta) - 16px);
}
.van-lightbox__title{
  margin:0;
  font-family:var(--display,'Archivo',sans-serif);
  font-weight:700;
  font-size:clamp(.95rem,2.5vw,1.15rem);
  letter-spacing:.02em;
}
.van-lightbox__count{
  font-family:var(--display,'Archivo',sans-serif);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.75;
  flex:none;
}

.van-lightbox__btn{
  position:absolute;
  z-index:2;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--ink,#012F37);
  cursor:pointer;
  transition:transform .15s ease,background .15s ease;
}
.van-lightbox__btn:hover{background:#fff;transform:scale(1.05)}
.van-lightbox__btn:disabled{opacity:.35;cursor:default;transform:none}
.van-lightbox__btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}

.van-lightbox__close{top:10px;right:10px}
.van-lightbox__prev{left:10px;top:50%;transform:translateY(-50%)}
.van-lightbox__next{right:10px;top:50%;transform:translateY(-50%)}
.van-lightbox__prev:hover,
.van-lightbox__next:hover{transform:translateY(-50%) scale(1.05)}

html.van-lightbox-open{overflow:hidden}

@media(max-width:560px){
  .van-lightbox{padding:10px}
  .van-lightbox__dialog{--lb-meta:48px}
  .van-lightbox__stage img{
    max-height:min(
      calc(100dvh - 20px - var(--lb-meta) - var(--lb-gap)),
      calc(100vh - 20px - var(--lb-meta) - var(--lb-gap))
    );
  }
  .van-lightbox__prev,
  .van-lightbox__next{width:40px;height:40px}
}