/* =====================================================================
   Ruquet Memory Club — Visionneuse des sorties (v2)
   ===================================================================== */

/* L'ancienne visionneuse plein écran n'est plus utilisée */
#lightbox.lightbox { display: none !important; }

/* Retouches demandées */
.sortie-bloc .gal-note { display: none; }                         /* « X photos » : déjà affiché sur l'image */
.sortie-bloc .sortie-titre { line-height: 1.05; }                  /* titres sur plusieurs lignes plus serrés */
.annee-hero-band div:has(> a[href="/sorties"]) { display: none; }  /* fil d'Ariane (au cas où) */

/* La section des galeries ne s'anime plus d'un bloc : chaque sortie a sa propre entrée */
.g2-section-ok { opacity: 1 !important; transform: none !important; }

/* ---------- Entrée des sorties au scroll ---------- */
.g2-bloc { --g2-delay: 0ms; }
.g2-bloc.g2-wait { opacity: 0; }
.g2-bloc.g2-wait.g2-fx-up     { transform: translateY(48px); }
.g2-bloc.g2-wait.g2-fx-left   { transform: translateX(-56px); }
.g2-bloc.g2-wait.g2-fx-right  { transform: translateX(56px); }
.g2-bloc.g2-wait.g2-fx-zoom   { transform: scale(.92); }
.g2-bloc.g2-wait.g2-fx-tilt   { transform: perspective(900px) rotateX(10deg) translateY(36px); transform-origin: 50% 100%; }
.g2-bloc.g2-wait.g2-fx-blur   { transform: translateY(24px); filter: blur(10px); }
.g2-bloc.g2-in {
  opacity: 1; transform: none; filter: none;
  transition: opacity .8s cubic-bezier(.22,.61,.36,1) var(--g2-delay),
              transform .9s cubic-bezier(.22,.61,.36,1) var(--g2-delay),
              filter .8s ease var(--g2-delay);
}
/* le titre puis la galerie puis les vignettes, en cascade */
.g2-bloc .sortie-titre::after { transform-origin: left center; }
.g2-bloc.g2-wait .sortie-titre::after { transform: scaleX(0); }
.g2-bloc.g2-in .sortie-titre::after { transform: scaleX(1); transition: transform .9s cubic-bezier(.22,.61,.36,1) calc(var(--g2-delay) + .35s); }
.g2-bloc.g2-wait .gal-thumbs { opacity: 0; transform: translateY(12px); }
.g2-bloc.g2-in .gal-thumbs { opacity: 1; transform: none; transition: opacity .6s ease calc(var(--g2-delay) + .45s), transform .6s ease calc(var(--g2-delay) + .45s); }

/* ---------- Galerie ---------- */
.gal-wrap.g2 { position: relative; margin-bottom: 10px; }
.g2-stage {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--vert-olive, #1E2818); cursor: zoom-in;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
/* fond « squelette » animé tant que la première photo charge */
.g2-stage::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.07) 50%, rgba(255,255,255,0) 70%);
  background-size: 250% 100%; animation: g2-shimmer 1.4s linear infinite;
  transition: opacity .4s ease;
}
.g2-stage.g2-ready::before { opacity: 0; animation: none; }
@keyframes g2-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.g2-layer {
  position: absolute; inset: 0; background: center / cover no-repeat;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.1s cubic-bezier(.4,0,.2,1), transform 6s ease-out;
  will-change: opacity, transform;
}
.g2-layer.g2-on { opacity: 1; transform: scale(1); }
.g2-layer.g2-from-left  { transform: translateX(-4%) scale(1.02); }
.g2-layer.g2-from-right { transform: translateX(4%) scale(1.02); }
.g2-layer.g2-fast { transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.22,.61,.36,1); }

/* dégradé discret pour la lisibilité des commandes */
.g2-stage::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(to top, rgba(10,12,8,.55), rgba(10,12,8,0));
  pointer-events: none; z-index: 1;
}

/* sortie sans photos */
.g2-stage.g2-vide { cursor: default; display: grid; place-items: center; background: var(--vert-moyen, #2E3B22); }
.g2-stage.g2-vide::before, .g2-stage.g2-vide::after { display: none; }
.g2-stage.g2-vide span { font-family: var(--font-texte, 'Oswald', sans-serif); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--vert-tres-pale, #C4CFB2); }

/* indicateur de chargement */
.g2-loader {
  position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border-radius: 50%; border: 3px solid rgba(255,255,255,.22); border-top-color: #fff;
  background: rgba(18,22,14,.35); box-shadow: 0 0 0 6px rgba(18,22,14,.25);
  animation: g2-spin .8s linear infinite; z-index: 3;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.g2-loading .g2-loader, .g2-lb.g2-loading .g2-loader { opacity: 1; }
@keyframes g2-spin { to { transform: rotate(360deg); } }

/* boutons */
.g2-btn {
  position: absolute; z-index: 2; top: 50%;
  width: 46px; height: 46px; margin-top: -23px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(247,247,245,.92); color: var(--vert-fonce, #12160E);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  cursor: pointer; transition: transform .2s ease, background .2s ease, opacity .25s ease;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.g2-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.g2-btn:hover { background: #fff; transform: scale(1.08); }
.g2-btn:active { transform: scale(.95); }
.g2-btn:focus-visible { outline: 3px solid var(--brun, #7A4426); outline-offset: 3px; }
.g2-prev { left: 14px; }
.g2-next { right: 14px; }
@media (hover: hover) {
  .g2-stage .g2-btn { opacity: 0; }
  .g2-stage:hover .g2-btn, .g2-stage:focus-within .g2-btn { opacity: 1; }
}

.g2-count {
  position: absolute; z-index: 2; left: 14px; bottom: 14px;
  font-family: var(--font-texte, 'Oswald', sans-serif); font-size: 13px; letter-spacing: 1px;
  color: #fff; background: rgba(18,22,14,.55); padding: 4px 10px; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.g2-expand {
  position: absolute; z-index: 2; right: 14px; bottom: 12px; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(18,22,14,.55); color: #fff; transition: background .2s ease, transform .2s ease;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.g2-expand svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g2-expand:hover { background: var(--brun, #7A4426); transform: scale(1.08); }

/* barre de progression du défilement automatique */
.g2-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: rgba(255,255,255,.15); }
.g2-progress i { display: block; height: 100%; width: 0; background: var(--brun, #7A4426); }
.g2-progress i.g2-run { width: 100%; transition: width var(--g2-duree, 5s) linear; }

/* vignettes */
.gal-thumbs.g2-thumbs { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; padding: 2px 2px 6px; scrollbar-width: thin; cursor: grab; }
.gal-thumbs.g2-thumbs.g2-drag { cursor: grabbing; scroll-behavior: auto; }
.g2-thumb {
  flex: 0 0 62px; height: 62px; padding: 0; border: 0; cursor: pointer; position: relative;
  background: var(--sable, #D9D9D1); overflow: hidden; opacity: .6;
  transition: opacity .25s ease, transform .25s ease;
}
.g2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.g2-thumb img.g2-ok { opacity: 1; }
.g2-thumb::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; transition: border-color .25s ease; }
.g2-thumb:hover { opacity: .9; }
.g2-thumb.g2-actif { opacity: 1; }
.g2-thumb.g2-actif::after { border-color: var(--brun, #7A4426); }
.g2-thumb:focus-visible { outline: 2px solid var(--brun, #7A4426); outline-offset: 2px; }

/* ---------- Plein écran ---------- */
.g2-lb {
  position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column;
  background: rgba(10,12,8,.94); color: #fff;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.g2-lb.g2-open { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.g2-lb-top { display: flex; align-items: center; gap: 16px; padding: 14px 18px; font-family: var(--font-texte, 'Oswald', sans-serif); }
.g2-lb-title { flex: 1; min-width: 0; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.g2-lb-count { font-size: 14px; letter-spacing: 1px; opacity: .8; }
.g2-lb-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 84px 40px; }
.g2-lb-img {
  /* photo toujours entière, quel que soit son format, à taille confortable */
  width: auto; height: auto; max-width: min(1100px, 76vw); max-height: min(760px, 74vh);
  object-fit: contain; display: block;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  opacity: 0; transform: scale(.98); transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
  user-select: none; -webkit-user-drag: none;
}
.g2-lb-img.g2-ok { opacity: 1; transform: none; }
.g2-lb .g2-loader { position: absolute; }
.g2-lb-btn {
  width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12);
  transition: background .2s ease, transform .2s ease;
}
.g2-lb-btn svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.g2-lb-btn:hover { background: rgba(255,255,255,.24); transform: scale(1.06); }
.g2-lb-btn:focus-visible { outline: 3px solid var(--sable, #D9D9D1); outline-offset: 3px; }
.g2-lb-close { width: 44px; height: 44px; }
.g2-lb-prev, .g2-lb-next { position: absolute; top: 50%; margin-top: -39px; }
.g2-lb-prev { left: 18px; }
.g2-lb-next { right: 18px; }
html.g2-noscroll, html.g2-noscroll body { overflow: hidden; }

@media (max-width: 700px) {
  .g2-btn { width: 40px; height: 40px; margin-top: -20px; }
  .g2-prev { left: 10px; } .g2-next { right: 10px; }
  .g2-lb-stage { padding: 0 12px 96px; }
  .g2-lb-img { max-width: calc(100vw - 24px); max-height: 62vh; }
  .g2-lb-prev, .g2-lb-next { top: auto; bottom: 18px; margin-top: 0; }
  .g2-lb-prev { left: calc(50% - 66px); } .g2-lb-next { right: calc(50% - 66px); }
  .g2-thumb { flex-basis: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .g2-bloc.g2-wait { opacity: 1; transform: none !important; filter: none !important; }
  .g2-bloc .gal-thumbs, .g2-bloc .sortie-titre::after { opacity: 1 !important; transform: none !important; }
  .g2-layer, .g2-layer.g2-on { transform: none !important; transition: opacity .3s ease; }
  .g2-stage::before { animation: none; }
}