/* Street Shakers — Galerie : mosaïque de photos et photo agrandie */
/* ---------- GALERIE ----------
   Mosaïque sur 6 colonnes et 2 rangées : photos verticales sur 1 colonne, photos de groupe sur 2 ou 3.
   Au clic, la photo s'ouvre en grand (attribut HTML « popover » : aucun JavaScript). */
.gallery-grid{
  display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:clamp(150px, 23vh, 250px);
  grid-auto-flow:dense; gap:12px;
}
.gal-tile{
  position:relative; overflow:hidden; border-radius:4px; cursor:zoom-in; padding:0; border:0;
  background:var(--noir); font:inherit; color:inherit;
}
.gal-tile.wide2{ grid-column:span 2; }
.gal-tile.wide3{ grid-column:span 3; }
.gal-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
/* cadrage de chaque photo (visages et instruments visibles) */
.gal-tile:nth-child(1) img{ object-position:50% 30%; }
.gal-tile:nth-child(2) img{ object-position:50% 38%; }
.gal-tile:nth-child(3) img{ object-position:50% 40%; }
.gal-tile:nth-child(4) img{ object-position:50% 36%; }
.gal-tile:nth-child(5) img{ object-position:50% 38%; }
.gal-tile:nth-child(6) img{ object-position:50% 34%; }
.gal-tile:nth-child(7) img{ object-position:50% 45%; }
.gal-tile:nth-child(8) img{ object-position:40% 30%; }
.gal-tile::after{ content:""; position:absolute; inset:0; opacity:0; background:linear-gradient(180deg, transparent 45%, rgba(19,19,18,0.75)); transition:opacity .3s ease; }
.gal-cap{
  position:absolute; left:12px; bottom:10px; z-index:1; font-family:'Outfit',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:0.1em;
  font-size:0.8rem; color:var(--ecru); opacity:0; translate:0 8px; transition:opacity .3s ease, translate .3s ease; text-align:left;
}
.gal-tile:hover img, .gal-tile:focus-visible img{ transform:scale(1.06); }
.gal-tile:hover::after, .gal-tile:focus-visible::after{ opacity:1; }
.gal-tile:hover .gal-cap, .gal-tile:focus-visible .gal-cap{ opacity:1; translate:0 0; }

/* photo agrandie */
.lightbox{
  --c:var(--rouge);
  margin:auto; padding:0; border:3px solid var(--noir); border-radius:14px; background:var(--ecru); color:var(--noir);
  box-shadow:10px 10px 0 var(--c); overflow:visible; max-width:min(92vw, 1100px);
}
.lightbox[data-color="bleu"]{ --c:var(--bleu); }
.lightbox[data-color="jaune"]{ --c:var(--jaune); }
.lightbox img{ display:block; max-width:100%; max-height:78vh; width:auto; height:auto; border-radius:11px 11px 0 0; }
.lightbox-cap{ padding:10px 16px 12px; font-family:'Outfit',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; font-size:0.92rem; }
/* toute la photo agrandie se referme au clic (zone invisible) */
.lightbox-hit{ position:absolute; inset:0; width:100%; height:100%; background:transparent; border:0; cursor:zoom-out; border-radius:11px; }
.lightbox-cap{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.lb-count{ font-size:0.95rem; opacity:0.55; font-variant-numeric:tabular-nums; }
/* flèches pour passer d'une photo à l'autre */
.lb-nav{
  position:absolute; top:calc(50% - 30px); z-index:2; width:48px; height:48px; border-radius:50%; cursor:pointer;
  background:var(--ecru); color:var(--noir); border:3px solid var(--noir); box-shadow:4px 4px 0 var(--c);
  font-family:'Outfit',sans-serif; font-weight:700; font-size:1.8rem; line-height:1; padding-bottom:4px;
  transition:transform .2s ease, background .2s ease;
}
.lb-prev{ left:-24px; }
.lb-next{ right:-24px; }
.lb-nav:hover, .lb-nav:focus-visible{ background:var(--c); transform:scale(1.08); }
.lightbox[data-color="jaune"] .lb-nav:hover{ color:var(--noir); }
.lightbox[data-color="rouge"] .lb-nav:hover, .lightbox[data-color="bleu"] .lb-nav:hover{ color:var(--ecru); }
@media (max-width: 700px){
  .lb-nav{ width:40px; height:40px; font-size:1.7rem; box-shadow:3px 3px 0 var(--c); }
  .lb-prev{ left:8px; } .lb-next{ right:8px; }
}
/* glissement latéral quand on passe d'une photo à l'autre */
.lightbox[data-dir="next"]:popover-open{ animation:lb-from-right .35s cubic-bezier(.2,.8,.3,1); }
.lightbox[data-dir="prev"]:popover-open{ animation:lb-from-left .35s cubic-bezier(.2,.8,.3,1); }
@keyframes lb-from-right{ from{ opacity:0; translate:60px 0; } to{ opacity:1; translate:0 0; } }
@keyframes lb-from-left{ from{ opacity:0; translate:-60px 0; } to{ opacity:1; translate:0 0; } }
.lightbox::backdrop{ background:rgba(19,19,18,0.82); }
.lightbox:popover-open{ animation:lb-in .35s cubic-bezier(.3,1.4,.5,1); }
@keyframes lb-in{ from{ opacity:0; scale:.9; rotate:-2deg; } to{ opacity:1; scale:1; rotate:0deg; } }