/* ==========================================================================
   Kamai Event — Section « Galerie » (#galerie).
   Fond sombre (ink) pour faire ressortir les bornes lumineuses.
   Grille de vignettes + lightbox (clic pour agrandir, navigation ←/→).
   Dépend de css/tokens.css.
   ========================================================================== */
.galerie{
  background:var(--ink); color:var(--ivory);
  padding:7rem 1.8rem;
  border-top:1px solid rgba(197,165,114,.18);
}
.galerie__inner{ max-width:1100px; margin:0 auto; }

/* ---- En-tête ---- */
.galerie__head{ max-width:640px; margin:0 auto 3.4rem; text-align:center; }
.galerie .eyebrow{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem;
}
.galerie h2{
  font-family:var(--serif); font-weight:500; line-height:1.06;
  font-size:clamp(2rem,4vw,3rem); color:var(--ivory); margin:0 0 1rem;
}
.galerie .lead{ color:rgba(250,248,244,.6); font-size:1.02rem; line-height:1.7; }

/* ---- Bande défilante (une seule ligne, défilement continu) ---- */
.galerie__marquee{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.galerie__track{
  list-style:none; margin:0; padding:0;
  display:flex; width:max-content; will-change:transform;
  animation:galerie-defile 42s linear infinite;
}
.galerie__item{ flex:0 0 auto; margin:0 1.1rem 0 0; }
.galerie__btn{
  display:block; padding:0; margin:0; border:0; cursor:pointer;
  background:none; position:relative; overflow:hidden;
  height:clamp(220px,40vh,350px); aspect-ratio:4/5;
}
.galerie__btn img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.97);
  transition:transform .7s cubic-bezier(.2,.6,.2,1), filter .5s ease;
}
.galerie__btn::after{                 /* liseré doré au survol */
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid transparent; transition:border-color .4s ease;
}
.galerie__btn:hover img,
.galerie__btn:focus-visible img{ transform:scale(1.05); filter:saturate(1.06); }
.galerie__btn:hover::after,
.galerie__btn:focus-visible::after{ border-color:rgba(197,165,114,.85); }
.galerie__btn:focus-visible{ outline:none; }

@keyframes galerie-defile{
  from{ transform:translateX(0); }
  to{   transform:translateX(-50%); }   /* -50 % = exactement une série (la 2e est un clone) → boucle sans couture */
}
/* Mouvement réduit : pas de défilement auto, on laisse glisser au doigt/souris */
@media (prefers-reduced-motion: reduce){
  .galerie__track{ animation:none; }
  .galerie__marquee{ overflow-x:auto; }
}

/* ---- Lightbox ---- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,5vw,4rem);
  background:rgba(6,6,6,.94);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__img{
  max-width:100%; max-height:100%; object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:scale(.96); transition:transform .35s ease;
}
.lightbox.is-open .lightbox__img{ transform:scale(1); }

.lightbox__btn{
  position:absolute; background:none; border:0; color:var(--ivory);
  cursor:pointer; opacity:.82; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .25s ease, color .25s ease;
}
.lightbox__btn:hover{ opacity:1; color:var(--gold); }
.lightbox__close{ top:14px; right:18px; width:48px; height:48px; font-size:2rem; }
.lightbox__nav{ top:50%; transform:translateY(-50%); width:56px; height:72px; font-size:2.6rem; }
.lightbox__prev{ left:6px; }
.lightbox__next{ right:6px; }
.lightbox__count{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  font-family:var(--sans); font-size:.72rem; letter-spacing:.24em;
  color:rgba(250,248,244,.6);
}

@media (max-width:860px){
  .galerie{ padding:4.5rem 1.4rem; }
  .galerie__head{ margin-bottom:2.6rem; }
  .galerie__item{ margin-right:.7rem; }
}
@media (max-width:480px){
  .lightbox__nav{ font-size:2rem; width:44px; }
}