/* Safi Surf Camp – Galerie | assets/css/galerie.css */
.ssg-block{font-family:'Work Sans',-apple-system,sans-serif;max-width:1100px;margin:0 auto}
.ssg-block *{box-sizing:border-box}

.ssg-filter-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.ssg-ftab{padding:.4rem 1rem;border-radius:2rem;border:1.5px solid #E3D9CB;font-size:.8rem;font-weight:500;cursor:pointer;background:#fff;color:#5A5347;transition:all .2s}
.ssg-ftab.active{background:var(--ssg-cat-color,#C1592D);color:#fff;border-color:var(--ssg-cat-color,#C1592D)}
.ssg-ftab:hover:not(.active){border-color:var(--ssg-cat-color,#E08A5B);color:var(--ssg-cat-color,#C1592D)}

.ssg-grid{display:grid;grid-template-columns:repeat(var(--ssg-cols,3),1fr);gap:.9rem}
@media(max-width:900px){.ssg-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.ssg-grid{grid-template-columns:1fr 1fr}}

.ssg-cell{border-radius:16px;overflow:hidden;aspect-ratio:1/1;cursor:pointer;background:#F3ECE1}
.ssg-cell.ssg-hidden{display:none}
.ssg-cell img{width:100%;height:100%;object-fit:cover;transition:transform .3s,opacity .2s}
.ssg-cell:hover img{transform:scale(1.05)}

/* Lightbox */
.ssg-lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9600;align-items:center;justify-content:center}
.ssg-lightbox.open{display:flex}
.ssg-lightbox img{max-width:88vw;max-height:88vh;border-radius:8px}
.ssg-lightbox-close{position:absolute;top:1.4rem;right:1.4rem;background:rgba(255,255,255,.15);border:none;color:#fff;width:40px;height:40px;border-radius:50%;font-size:1.2rem;cursor:pointer}
.ssg-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:#fff;width:46px;height:46px;border-radius:50%;font-size:1.6rem;cursor:pointer}
.ssg-lightbox-nav:hover{background:rgba(255,255,255,.28)}
.ssg-lb-prev{left:1.4rem}
.ssg-lb-next{right:1.4rem}
@media(max-width:600px){.ssg-lightbox-nav{width:36px;height:36px;font-size:1.3rem}.ssg-lb-prev{left:.6rem}.ssg-lb-next{right:.6rem}}

/* -------------------------------------------------------
   Disposition "Dispersée" — photos éparpillées avec une légère
   rotation, zoom au survol, et aperçu agrandi en maintenant le
   clic (relâcher = la photo revient instantanément à sa place).
   ----------------------------------------------------- */
.ssg-layout-scatter .ssg-grid{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:1.6rem 1.8rem;padding:1.5rem 1rem 2.5rem;
}
.ssg-layout-scatter .ssg-cell{
  aspect-ratio:auto;width:190px;height:190px;flex:0 0 auto;
  border-radius:16px;overflow:visible;background:none;
  transform:translateY(var(--ssg-oy,0)) rotate(var(--ssg-rot,0deg));
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  position:relative;z-index:1;
}
.ssg-layout-scatter .ssg-cell img{
  border-radius:16px;box-shadow:0 6px 16px rgba(35,32,28,.18);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
}
.ssg-layout-scatter .ssg-cell:hover{
  transform:translateY(calc(var(--ssg-oy,0) - 8px)) rotate(0deg) scale(1.1);
  z-index:5;
}
.ssg-layout-scatter .ssg-cell:hover img{box-shadow:0 16px 34px rgba(35,32,28,.3)}
/* Aperçu en maintenant le clic (ou le doigt) : la photo grandit sur
   place sans jamais fermer d'écran ni de fenêtre — au relâché, elle
   retourne directement dans le mur de photos. */
.ssg-layout-scatter .ssg-cell.ssg-peek{transform:translateY(0) rotate(0deg) scale(1);z-index:50}
.ssg-layout-scatter .ssg-cell.ssg-peek img{transform:scale(2.35);box-shadow:0 26px 60px rgba(35,32,28,.4)}
@media(max-width:600px){
  .ssg-layout-scatter .ssg-cell{width:130px;height:130px}
  .ssg-layout-scatter .ssg-cell.ssg-peek img{transform:scale(1.9)}
}

/* -------------------------------------------------------
   Disposition "Défilement (train)" — deux lignes qui défilent en
   continu à l'horizontale (sens opposés), photos de taille uniforme.
   Arrêt au survol, zoom sur place au clic (pas de fenêtre séparée).
   ----------------------------------------------------- */
.ssg-layout-train{display:flex;flex-direction:column;gap:1rem}
.ssg-train-row{overflow:hidden;border-radius:14px}
.ssg-train-row.ssg-has-zoom{overflow:visible}
.ssg-train-track{
  display:flex;gap:.8rem;width:max-content;
  animation:ssg-train-scroll var(--ssg-train-speed,18s) linear infinite;
  animation-direction:var(--ssg-train-dir,normal);
}
.ssg-train-row:hover .ssg-train-track,
.ssg-train-track.ssg-paused{animation-play-state:paused}
.ssg-train-slide{flex:0 0 auto;width:200px;height:150px;border-radius:12px;overflow:hidden;cursor:zoom-in;transition:transform .3s ease,box-shadow .3s ease;position:relative}
.ssg-train-slide img{width:100%;height:100%;object-fit:cover;display:block}
.ssg-train-slide:hover{transform:scale(1.08);z-index:2}
.ssg-train-slide.ssg-zoomed{transform:scale(2.2);z-index:5;cursor:zoom-out;box-shadow:0 24px 55px rgba(35,32,28,.4)}
@media(max-width:600px){
  .ssg-train-slide{width:150px;height:112px}
  .ssg-train-slide.ssg-zoomed{transform:scale(1.8)}
}
@keyframes ssg-train-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .ssg-train-track{animation:none}
}