/* ═══════════════════════════════════════════════════════
   popup-lightbox.css — Maïna Events
   Importer dans <head> après popup-prestation.css :
   <link rel="stylesheet" href="assets/css/popup-lightbox.css">
═══════════════════════════════════════════════════════ */

/* ── Overlay ─────────────────────────────────────── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 300; /* au-dessus de la popup prestation (z:200) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.lightbox-overlay[hidden] { display: none; }
.lightbox-overlay.is-open { display: flex; }

/* ── Backdrop ────────────────────────────────────── */
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 10, 6, .88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: lbBackdropIn .3s ease forwards;
}

@keyframes lbBackdropIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbBackdropOut { to   { opacity: 0; } }

.lightbox-overlay.is-closing .lightbox-backdrop {
  animation: lbBackdropOut .25s ease forwards;
}

/* ── Boîte ───────────────────────────────────────── */
.lightbox-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  width: 100%;
  max-width: 900px;
  animation: lbBoxIn .35s cubic-bezier(.4,0,.2,1) forwards;
  margin: 0; /* reset figure */
}

@keyframes lbBoxIn  { from { opacity:0; transform:scale(.93); } to { opacity:1; transform:none; } }
@keyframes lbBoxOut { to   { opacity:0; transform:scale(.93); } }

.lightbox-overlay.is-closing .lightbox-box {
  animation: lbBoxOut .25s ease forwards;
}

/* ── Bouton fermeture ────────────────────────────── */
.lightbox-close {
  position: fixed;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .25s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lightbox-close:hover {
  background: var(--terra, #C47E5A);
  transform: scale(1.1) rotate(90deg);
}

.lightbox-close:focus-visible {
  outline: 2px solid var(--terra, #C47E5A);
  outline-offset: 3px;
}

/* ── Compteur ────────────────────────────────────── */
.lightbox-counter {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  letter-spacing: .12em;
  color: rgba(255,255,255,.65);
  z-index: 10;
  white-space: nowrap;
}

/* ── Zone image ──────────────────────────────────── */
.lightbox-img-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.lightbox-img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: .75rem;
  object-fit: contain;
  display: block;
  box-shadow: 0 16px 64px rgba(0,0,0,.5);
  transition: opacity .22s ease;
}

.lightbox-img.is-loading { opacity: 0; }

/* ── Spinner ─────────────────────────────────────── */
.lightbox-spinner {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(196,126,90,.35);
  border-top-color: var(--terra, #C47E5A);
  border-radius: 50%;
  animation: lbSpin .7s linear infinite;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

.lightbox-spinner.visible { opacity: 1; }

@keyframes lbSpin { to { transform: rotate(360deg); } }

/* ── Légende ─────────────────────────────────────── */
.lightbox-caption {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: rgba(255,255,255,.75);
  text-align: center;
  max-width: 640px;
  line-height: 1.5;
  min-height: 1.5em;
  padding: 0 3.5rem; /* espace pour les flèches */
  transition: opacity .2s;
}

.lightbox-caption:empty { min-height: 0; }

/* ── Flèches ─────────────────────────────────────── */
.lightbox-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lightbox-arrow:hover {
  background: var(--terra, #C47E5A);
  transform: translateY(-50%) scale(1.08);
}

.lightbox-arrow:focus-visible {
  outline: 2px solid var(--terra, #C47E5A);
  outline-offset: 3px;
}

.lightbox-arrow--prev { left: 1.1rem; }
.lightbox-arrow--next { right: 1.1rem; }

/* Désactiver quand une seule image */
.lightbox-arrow[disabled] {
  opacity: 0;
  pointer-events: none;
}

/* ── Swipe touch — indicateur visuel ────────────── */
@media (pointer: coarse) {
  .lightbox-arrow {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,.18);
  }
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 600px) {
  .lightbox-overlay { padding: .5rem; }
  .lightbox-img     { max-height: 65vh; border-radius: .5rem; }
  .lightbox-caption { font-size: .88rem; padding: 0 3rem; }
  .lightbox-arrow   { width: 38px; height: 38px; }
  .lightbox-arrow--prev { left: .3rem; }
  .lightbox-arrow--next { right: .3rem; }
}

/* ── Animations réduites ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lightbox-box,
  .lightbox-backdrop,
  .lightbox-img,
  .lightbox-spinner,
  .lightbox-caption { animation: none !important; transition: none !important; }
}