/* ==================================================
   Réglages rapides : couleurs, espacement, mise en page.
   ==================================================
 */

:root{

  --card-bg: #12181f;     /* fond d'une vignette en cours de chargement */
  --muted: #9aa4af;
  --gap: 12px;            /* espace entre les photos */
  --caption-height: 64px; /* hauteur réservée à la légende en lightbox */
  --cell: 200px;          /* taille d'une case (calculée par le script) */

  /* Taille des pastilles interactives — augmente ou diminue ces valeurs
     pour les rendre plus ou moins visibles. */

  --dot-size: 32px;       /* diamètre du point sur la photo */
  --hotspot-font: 17px;   /* taille du texte du libellé */
  --hotspot-icon: 22px;   /* taille de l'icône dans le libellé */
  --flag-size: 52px;      /* diamètre du repère sur la vignette */
  --flag-icon: 30px;      /* taille de l'icône du repère */
}



*{box-sizing:border-box;}


header{
  padding:0px 0px 0px;
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

header h1{
  margin:0 0 6px;
  font-size:22px;
  font-weight:700;
  letter-spacing:.2px;
}
header p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

/* ==========================================================================
   MISE EN PAGE 1 — MOSAÏQUE (par défaut)
   Grille dynamique : certaines photos occupent 2 colonnes et/ou 2 rangées.
   Les photos sont recadrées pour remplir leur case (comme sur les sites de
   clubs). Le nombre de colonnes et la taille des cases sont pilotés par le
   script, qui règle --cols et --cell.
   ========================================================================== */
.gallery{
  max-width:1400px;
  margin:0 auto;
  padding:var(--gap);
}

.gallery.mosaic{
  display:grid;
  grid-template-columns:repeat(var(--cols, 4), 1fr);
  grid-auto-rows:var(--cell);
  grid-auto-flow:row dense;   /* "dense" comble les trous du motif */
  gap:var(--gap);
}
.gallery.mosaic .tile{ height:100%; }
.gallery.mosaic .tile img{
  width:100%;
  height:100%;
  object-fit:cover;          /* la photo remplit sa case */
}
/* Tailles appliquées par le script selon le motif */
.gallery.mosaic .tile.w2{ grid-column:span 2; }
.gallery.mosaic .tile.h2{ grid-row:span 2; }

/* ==========================================================================
   MISE EN PAGE 2 — COLONNES (CONFIG.layout = 'masonry')
   Chaque photo garde ses proportions d'origine, aucun recadrage.
   ========================================================================== */
.gallery.masonry{
  column-count:2;
  column-gap:var(--gap);
}
@media (min-width:640px){  .gallery.masonry{ column-count:3; } }
@media (min-width:980px){  .gallery.masonry{ column-count:4; } }
@media (min-width:1300px){ .gallery.masonry{ column-count:5; } }

.gallery.masonry .tile{
  break-inside:avoid;
  margin-bottom:var(--gap);
}
.gallery.masonry .tile img{
  width:100%;
  height:auto;
  min-height:80px;
}

/* --------------------------------------------------------------------------
   Vignettes (commun aux deux mises en page)
   -------------------------------------------------------------------------- */
.tile{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  background:var(--card-bg);
  cursor:zoom-in;
  box-shadow:0 1px 3px rgba(0,0,0,0.4);
}
.tile img{
  display:block;
  opacity:0;
  transition:opacity .4s ease, transform .5s ease;
  background:linear-gradient(135deg,#1a222b,#0e1319);
}
.tile img.loaded{ opacity:1; }
.tile img.failed{ opacity:1; }
.tile:hover img{ transform:scale(1.05); }

/* léger voile au survol, pour l'effet "site de club" */
.tile::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0) 45%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.tile:hover::after{ opacity:1; }

.tile .error-msg{
  display:none;
  position:absolute;
  inset:0;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px;
  font-size:12px;
  color:#ff8080;
  background:#1a1215;
}
.tile img.failed + .error-msg{ display:flex; }

/* --------------------------------------------------------------------------
   LIGHTBOX
   -------------------------------------------------------------------------- */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(4,6,9,0.97);
  display:none;
  z-index:1000;
  touch-action:pan-y;
  cursor:zoom-out;   /* indique que cliquer à côté referme */
}
.lightbox.open{ display:block; }

/* Pas de long ruban de N x 100vw : un tel élément dépasse la taille maximale
   de texture que le GPU sait peindre (souvent 8192/16384 px) et les diapos
   au-delà resteraient blanches, sans aucune erreur. Chaque diapo porte donc
   son propre transform : aucune couche ne dépasse la taille de l'écran. */
.lightbox-track{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.lightbox-slide{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  /* espace réservé en bas pour que la photo ne passe pas sous la légende */
  padding:10px 10px calc(var(--caption-height) + 10px);
  backface-visibility:hidden;
}
.lightbox-slide.far{ display:none; }

.lightbox-slide img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;   /* en grand, la photo entière, jamais recadrée */
  user-select:none;
  -webkit-user-drag:none;
  border-radius:4px;
  backface-visibility:hidden;
  cursor:default;
}
.lightbox-slide img.failed{
  min-width:200px;
  min-height:120px;
  background:#1a1215;
  color:#ff8080;
  font-size:14px;
}

/* ==========================================================================
   PASTILLES INTERACTIVES (tags cliquables sur la photo)
   ========================================================================== */

/* Calque superposé exactement à la photo affichée. Ses dimensions sont
   posées par le script : les coordonnées en % suivent donc l'image, pas
   l'écran. */
.hotspot-layer{
  position:absolute;
  pointer-events:none;   /* seules les pastilles captent le clic */
  z-index:1015;
}

.hotspot{
  --dot-color: #d4af37;
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  cursor:pointer;
  /* zone de clic confortable au doigt, même si le point est petit */
  padding:10px;
  margin:-10px;
}

/* Le point pulsant */
.hotspot-dot{
  position:relative;
  flex:0 0 auto;
  width:var(--dot-size);
  height:var(--dot-size);
  border-radius:50%;
  background:var(--dot-color);
  box-shadow:0 0 0 4px rgba(255,255,255,0.92), 0 3px 12px rgba(0,0,0,0.55);
}
.hotspot-dot::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:3px solid var(--dot-color);
  animation:hotspot-pulse 2s ease-out infinite;
}
@keyframes hotspot-pulse{
  0%   { transform:scale(1);   opacity:.9; }
  70%  { transform:scale(2.1); opacity:0; }
  100% { transform:scale(2.1); opacity:0; }
}

/* Le libellé, replié par défaut */
.hotspot-label{
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
  background:rgba(15,18,22,0.92);
  color:#fff;
  font-size:var(--hotspot-font);
  font-weight:600;
  padding:11px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 4px 18px rgba(0,0,0,0.5);
  backdrop-filter:blur(6px);
  /* animation d'ouverture */
  max-width:0;
  padding-left:0;
  padding-right:0;
  opacity:0;
  overflow:hidden;
  transition:max-width .35s cubic-bezier(.22,.61,.36,1),
             opacity .25s ease,
             padding .35s ease;
}
.hotspot-label svg{
  width:var(--hotspot-icon);
  height:var(--hotspot-icon);
  flex:0 0 auto;
  color:var(--dot-color);
}

/* Déploiement au survol, au focus clavier, ou quand le script l'ouvre */
.hotspot:hover .hotspot-label,
.hotspot:focus-visible .hotspot-label,
.hotspot.open .hotspot-label{
  max-width:min(65vw, 380px);
  padding-left:18px;
  padding-right:18px;
  opacity:1;
}

/* Pastille dans la moitié droite : le libellé se déploie vers la gauche */
.hotspot.to-left{ flex-direction:row-reverse; }
/* Pastille près du bas : on la remonte un peu pour rester lisible */
.hotspot.to-top{ align-items:flex-end; }

@media (max-width:640px){
  :root{
    --dot-size: 26px;
    --hotspot-font: 15px;
    --hotspot-icon: 19px;
    --flag-size: 42px;
    --flag-icon: 24px;
  }
}

/* Repère sur la vignette d'une photo contenant des pastilles */
.tile-flag{
  position:absolute;
  top:10px;
  right:10px;
  width:var(--flag-size);
  height:var(--flag-size);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.6);
  color:#e9c766;
  border:2px solid rgba(233,199,102,0.55);
  box-shadow:0 2px 10px rgba(0,0,0,0.45);
  backdrop-filter:blur(3px);
  z-index:2;
  transition:transform .25s ease, background .25s ease;
}
.tile-flag svg{ width:var(--flag-icon); height:var(--flag-icon); }
.tile:hover .tile-flag{
  transform:scale(1.1);
  background:rgba(0,0,0,0.75);
}

/* Mode d'aide au placement : ?tags dans l'URL */
.tag-helper{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.tag-helper span{
  position:absolute;
  transform:translate(-50%,-50%);
  font-size:9px;
  color:rgba(255,255,255,0.85);
  background:rgba(0,0,0,0.55);
  padding:1px 3px;
  border-radius:3px;
  line-height:1.1;
}

/* Légende + compteur, sous la photo */
.lb-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  min-height:var(--caption-height);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 70px;
  text-align:center;
  font-size:14px;
  line-height:1.4;
  color:#e8e8e8;
  background:linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
  z-index:1010;
  cursor:default;
  font-variant-numeric:tabular-nums;
}

.lb-close, .lb-prev, .lb-next{
  position:absolute;
  background:rgba(255,255,255,0.08);
  border:none;
  color:#fff;
  width:44px;
  height:44px;
  border-radius:50%;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:1020;
  transition:background .2s ease;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover{
  background:rgba(255,255,255,0.2);
}
.lb-close{ top:16px; right:16px; }
.lb-prev{ left:16px; top:50%; transform:translateY(-50%); }
.lb-next{ right:16px; top:50%; transform:translateY(-50%); }

@media (max-width:640px){
  :root{ --caption-height:74px; }
  .lb-prev, .lb-next{ width:38px; height:38px; font-size:17px; }
  .lb-close{ width:38px; height:38px; font-size:17px; top:10px; right:10px; }
  .lb-prev{ left:6px; }
  .lb-next{ right:6px; }
  .lb-caption{ padding:12px 16px; font-size:13px; }
}

footer{
  text-align:center;
  color:var(--muted);
  font-size:12px;
  padding:24px 12px 40px;
}