/* ═══════════════════════════════════════════════════════════
   Joce Gallery — jgp-style.css
   Inspiré de studio.joceoffice.fr
   Dark · Dense · Typographie minimaliste
   Spider 3D (axe Z) · Fade in/out · Lightbox
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;1,300&family=Syne:wght@300;400;600&display=swap');

/* ── Reset & variables globales ──────────────────────────── */
:root {
  --jgp-gap:        12px;
  --jgp-radius:     0px;
  --jgp-bw:         0px;
  --jgp-bc:         #333;
  --jgp-bg:         #111;
  --jgp-text:       #fff;
  --jgp-ov:         #000;
  --jgp-ov-op:      0.35;
  --jgp-scale:      1.04;
  --jgp-ratio:      3/4;
  --jgp-cols:       3;
  --jgp-cols-tab:   2;
  --jgp-cols-mob:   1;
  --jgp-fi-dur:     700ms;
  --jgp-fi-delay:   60ms;
  --jgp-fi-dist:    50px;
  --jgp-fo-dur:     400ms;
  --jgp-persp:      600px;
  --jgp-spread:     35deg;
  --jgp-ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --jgp-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --jgp-font-h:     'Syne', sans-serif;
  --jgp-font-mono:  'DM Mono', 'Courier New', monospace;
}
*, *::before, *::after { box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════
   WRAPPER & GRILLE
══════════════════════════════════════════════════════════ */
.jgp-wrap { position: relative; width: 100%; }

.jgp-gallery {
  display: grid;
  gap: var(--jgp-gap);
  grid-template-columns: repeat(var(--jgp-cols), 1fr);
  width: 100%;
}

@media (max-width: 1024px) {
  .jgp-gallery { grid-template-columns: repeat(var(--jgp-cols-tab), 1fr); }
}
@media (max-width: 640px) {
  .jgp-gallery { grid-template-columns: repeat(var(--jgp-cols-mob), 1fr); }
}

/* ══════════════════════════════════════════════════════════
   CARTE — base
══════════════════════════════════════════════════════════ */
.jgp-card {
  position: relative;
  background: var(--jgp-bg);
  border-radius: var(--jgp-radius);
  border: var(--jgp-bw) solid var(--jgp-bc);
  overflow: hidden;
  color: var(--jgp-text);
  cursor: pointer;

  /* perspective pour les enfants 3D */
  transform-style: preserve-3d;
  will-change: transform, opacity;

  /* transition par défaut (remplacée en mode spider) */
  transition:
    transform  .55s var(--jgp-ease),
    box-shadow .55s var(--jgp-ease),
    opacity    var(--jgp-fo-dur) var(--jgp-ease);
}

/* Lien */
.jgp-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ── Image wrap ──────────────────────────────────────────── */
.jgp-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--jgp-ratio);
  background: #1c1c1c;
}
.jgp-img-empty { width: 100%; height: 100%; background: #1c1c1c; }

.jgp-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .75s var(--jgp-ease-out);
  will-change: transform;
}
.jgp-card:hover .jgp-img { transform: scale(var(--jgp-scale)); }

/* Overlay */
.jgp-overlay {
  position: absolute;
  inset: 0;
  background: var(--jgp-ov);
  opacity: var(--jgp-ov-op);
  pointer-events: none;
  transition: opacity .5s var(--jgp-ease);
}
.jgp-card:hover .jgp-overlay { opacity: calc(var(--jgp-ov-op) * .55); }

/* ── Corps de carte ─────────────────────────────────────── */
/* Position "below" : texte sous l'image */
.jgp-title--below .jgp-body {
  padding: .7rem .8rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

/* Position "over" : texte superposé sur l'image (défaut joceoffice) */
.jgp-title--over .jgp-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem .9rem .9rem;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.0) 100%);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  transition: background .4s;
}
.jgp-title--over .jgp-card:hover .jgp-body {
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.1) 100%);
}

/* ── Catégorie ──────────────────────────────────────────── */
.jgp-cat {
  font-family: var(--jgp-font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  text-decoration: none;
  font-style: italic;
  display: inline-block;
  transition: color .2s;
}
.jgp-cat:hover { color: rgba(255,255,255,.8); }

/* ── Titre ──────────────────────────────────────────────── */
.jgp-title {
  font-family: var(--jgp-font-h);
  font-size: clamp(.78rem, 1.2vw, 1rem);
  font-weight: 300;
  line-height: 1.3;
  margin: 0;
  color: var(--jgp-text);
  letter-spacing: .01em;
}

/* ── Extrait ────────────────────────────────────────────── */
.jgp-excerpt {
  font-family: var(--jgp-font-mono);
  font-size: .68rem;
  line-height: 1.55;
  color: rgba(255,255,255,.42);
  margin: .15rem 0 0;
}

/* ── Bouton plein écran (trigger=button) ────────────────── */
.jgp-fs-btn {
  position: absolute;
  top: .45rem; right: .45rem;
  z-index: 5;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .25s var(--jgp-ease), transform .25s var(--jgp-ease), background .2s;
}
.jgp-fs-btn svg { width: 13px; height: 13px; stroke: #fff; }
.jgp-card:hover .jgp-fs-btn { opacity: 1; transform: scale(1); }
.jgp-fs-btn:hover { background: rgba(255,255,255,.15); }

/* ══════════════════════════════════════════════════════════
   FONDU ENTRANT — 5 effets
══════════════════════════════════════════════════════════ */
.jgp-has-fadein .jgp-card {
  opacity: 0;
  transition:
    opacity   var(--jgp-fi-dur) var(--jgp-ease-out) var(--jgp-card-delay, 0ms),
    transform var(--jgp-fi-dur) var(--jgp-ease-out) var(--jgp-card-delay, 0ms),
    filter    var(--jgp-fi-dur) var(--jgp-ease-out) var(--jgp-card-delay, 0ms),
    box-shadow .5s var(--jgp-ease);
}

/* Effets initiaux (avant apparition) */
.jgp-fi--rise  { transform: translateY(var(--jgp-fi-dist)); }
.jgp-fi--slide { transform: translateX(calc(-1 * var(--jgp-fi-dist))); }
.jgp-fi--zoom  { transform: scale(.85); }
.jgp-fi--blur  { filter: blur(14px); transform: translateY(calc(var(--jgp-fi-dist) * .4)); }
.jgp-fi--fade  { /* opacité seule */ }

/* État visible — injecté par JS (IntersectionObserver) */
.jgp-has-fadein .jgp-card.jgp-in {
  opacity: 1;
  transform: none !important;
  filter: none !important;
}

/* ══════════════════════════════════════════════════════════
   FONDU SORTANT — disparition hors zone visible
   4 effets : zoom | fade | blur | sink
══════════════════════════════════════════════════════════ */
.jgp-has-fadeout .jgp-card {
  transition:
    opacity   var(--jgp-fo-dur) var(--jgp-ease),
    transform var(--jgp-fo-dur) var(--jgp-ease),
    filter    var(--jgp-fo-dur) var(--jgp-ease);
}

/* Les cartes qui quittent le viewport reçoivent .jgp-out */
.jgp-fo--zoom.jgp-out  { opacity: 0 !important; transform: scale(.9)           !important; }
.jgp-fo--fade.jgp-out  { opacity: 0 !important; }
.jgp-fo--blur.jgp-out  { opacity: 0 !important; filter: blur(10px)             !important; }
.jgp-fo--sink.jgp-out  { opacity: 0 !important; transform: translateY(30px)    !important; }

.jgp-has-fadeout .jgp-card.jgp-out { pointer-events: none; }

/* ══════════════════════════════════════════════════════════
   SPIDER 3D — AXE Z
   Les cartes sont disposées en éventail dans la profondeur.
   Mode scroll : la position dans la page influence l'angle.
   Mode hover : la souris déplace les cartes.
   Mode auto : animation continue en boucle.
══════════════════════════════════════════════════════════ */
.jgp-has-spider {
  perspective: var(--jgp-persp);
  perspective-origin: 50% 40%;
  /* Overflow visible pour que les cartes 3D dépassent */
  overflow: visible;
}

/* Toutes les cartes en mode spider */
.jgp-has-spider .jgp-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform .5s var(--jgp-ease-out),
              opacity .5s var(--jgp-ease-out),
              box-shadow .4s var(--jgp-ease);
}

/* Hover universel : la carte visée avance sur Z */
.jgp-has-spider .jgp-card:hover {
  transform: translateZ(40px) scale(1.03) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.06);
  z-index: 10;
}

/* ── Positions dans la grille (injectées par JS) ─────────
   data-col="left|center|right"
   data-row="top|mid|bottom"
   La combinaison des deux crée l'effet éventail 3D         */

/* Colonnes */
.jgp-has-spider .jgp-card[data-col="left"]  {
  transform: rotateY(calc(var(--jgp-spread) * .5))
             translateZ(calc(var(--jgp-persp) * -.05))
             translateX(-6px);
}
.jgp-has-spider .jgp-card[data-col="right"] {
  transform: rotateY(calc(var(--jgp-spread) * -.5))
             translateZ(calc(var(--jgp-persp) * -.05))
             translateX(6px);
}
.jgp-has-spider .jgp-card[data-col="center"] {
  transform: rotateY(0deg) translateZ(0px);
}

/* Lignes (ajout sur l'axe X) */
.jgp-has-spider .jgp-card[data-row="top"] {
  transform: rotateX(calc(var(--jgp-spread) * .3))
             translateZ(calc(var(--jgp-persp) * -.04));
}
.jgp-has-spider .jgp-card[data-row="bottom"] {
  transform: rotateX(calc(var(--jgp-spread) * -.3))
             translateZ(calc(var(--jgp-persp) * -.04));
}

/* Combined : coin haut gauche */
.jgp-has-spider .jgp-card[data-col="left"][data-row="top"] {
  transform: rotateY(calc(var(--jgp-spread) * .45))
             rotateX(calc(var(--jgp-spread) * .25))
             translateZ(calc(var(--jgp-persp) * -.08));
}
.jgp-has-spider .jgp-card[data-col="right"][data-row="top"] {
  transform: rotateY(calc(var(--jgp-spread) * -.45))
             rotateX(calc(var(--jgp-spread) * .25))
             translateZ(calc(var(--jgp-persp) * -.08));
}
.jgp-has-spider .jgp-card[data-col="left"][data-row="bottom"] {
  transform: rotateY(calc(var(--jgp-spread) * .45))
             rotateX(calc(var(--jgp-spread) * -.25))
             translateZ(calc(var(--jgp-persp) * -.08));
}
.jgp-has-spider .jgp-card[data-col="right"][data-row="bottom"] {
  transform: rotateY(calc(var(--jgp-spread) * -.45))
             rotateX(calc(var(--jgp-spread) * -.25))
             translateZ(calc(var(--jgp-persp) * -.08));
}

/* ── Mode auto : flottement 3D continu ───────────────────── */
.jgp-spider--auto.jgp-has-spider .jgp-card {
  animation: jgp-spider-float 3.5s var(--jgp-ease) infinite alternate;
  animation-delay: calc(var(--jgp-card-idx, 0) * .12s);
}
@keyframes jgp-spider-float {
  0%   { transform: translateZ(0px)   rotateY(0deg)   rotateX(0deg); }
  33%  { transform: translateZ(18px)  rotateY(3deg)   rotateX(-2deg); }
  66%  { transform: translateZ(-8px)  rotateY(-2deg)  rotateX(3deg); }
  100% { transform: translateZ(12px)  rotateY(-3deg)  rotateX(-2deg); }
}

/* ── Mode scroll : géré en JS, applique --jgp-scroll-prog ── */
/* (les cartes JS calculent la valeur et l'appliquent via style inline) */

/* ══════════════════════════════════════════════════════════
   LIGHTBOX PLEIN ÉCRAN
══════════════════════════════════════════════════════════ */
.jgp-lb {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jgp-lb[hidden] { display: none; }

/* Fond */
.jgp-lb-bd {
  position: absolute; inset: 0;
  background: rgba(4,4,4,.97);
  cursor: pointer;
  animation: jgp-bd-in .3s var(--jgp-ease-out) forwards;
}
@keyframes jgp-bd-in { from{opacity:0} to{opacity:1} }

/* Zone centrale */
.jgp-lb-stage {
  position: relative;
  z-index: 2;
  max-width: min(90vw, 1200px);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  animation: jgp-lb-in .35s var(--jgp-ease-out) forwards;
}
@keyframes jgp-lb-in {
  from { opacity:0; transform:scale(.95) }
  to   { opacity:1; transform:scale(1) }
}

.jgp-lb-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: calc(90vh - 80px);
  width: 100%;
}
.jgp-lb-img {
  max-width: 100%;
  max-height: calc(88vh - 80px);
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 40px 120px rgba(0,0,0,.9);
  transition: opacity .2s;
  display: block;
}
.jgp-lb-img.jgp-loading { opacity: .2; }

/* Infos bas */
.jgp-lb-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: 0 .5rem;
}
.jgp-lb-title {
  font-family: var(--jgp-font-h);
  font-size: clamp(.8rem, 1.4vw, 1rem);
  font-weight: 300;
  color: rgba(255,255,255,.8);
  flex: 1;
  margin: 0;
}
.jgp-lb-link {
  font-family: var(--jgp-font-mono);
  font-size: .65rem;
  letter-spacing: .12em;
  color: rgba(255,255,255,.35);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding-bottom: 1px;
  white-space: nowrap;
  font-style: italic;
  transition: color .2s, border-color .2s;
}
.jgp-lb-link:hover { color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.4); }
.jgp-lb-counter {
  font-family: var(--jgp-font-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  color: rgba(255,255,255,.25);
  font-style: italic;
  white-space: nowrap;
}

/* Bouton fermer */
.jgp-lb-close {
  position: absolute; top: .9rem; right: 1rem;
  z-index: 3;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s, transform .3s var(--jgp-ease);
}
.jgp-lb-close svg { width:15px; height:15px; stroke:#fff; }
.jgp-lb-close:hover { background:rgba(255,255,255,.14); transform:rotate(90deg); }

/* Flèches nav */
.jgp-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s, transform .2s var(--jgp-ease);
}
.jgp-lb-nav svg { width: 18px; height: 18px; stroke: #fff; }
.jgp-lb-prev { left: .8rem; }
.jgp-lb-next { right: .8rem; }
.jgp-lb-prev:hover { background:rgba(255,255,255,.14); transform:translateY(-50%) translateX(-3px); }
.jgp-lb-next:hover { background:rgba(255,255,255,.14); transform:translateY(-50%) translateX(3px); }

/* ── Load more ──────────────────────────────────────────── */
.jgp-more-wrap { display:flex; justify-content:center; margin-top:calc(var(--jgp-gap)*2.5); }

.jgp-more {
  display: inline-flex; align-items: center; gap:.5rem;
  font-family: var(--jgp-font-mono);
  font-size: .7rem; letter-spacing: .14em; font-style: italic;
  text-transform: uppercase; cursor: pointer;
  border-radius: var(--jgp-radius);
  transition: gap .3s var(--jgp-ease), background .25s, border-color .25s, color .25s;
}
.jgp-more--border {
  color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  padding: .65em 1.6em;
}
.jgp-more--border:hover { border-color:rgba(255,255,255,.5); color:#fff; gap:.8rem; }
.jgp-more--filled {
  color: #111; background: #fff;
  border: 1px solid transparent;
  padding: .65em 1.6em;
}
.jgp-more--filled:hover { background: rgba(255,255,255,.85); }
.jgp-more--text {
  color: rgba(255,255,255,.5); background:transparent; border:none; padding:.5em 0;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.jgp-more--text:hover { color:#fff; gap:.8rem; }

.jgp-more-icon { width:16px; height:16px; transition:transform .3s var(--jgp-ease); }
.jgp-more:hover .jgp-more-icon { transform:translateY(4px); }
.jgp-more.loading .jgp-more-icon { animation: jgp-spin .7s linear infinite; }
@keyframes jgp-spin { to{transform:rotate(360deg)} }

/* ── Vide / placeholder éditeur ─────────────────────────── */
.jgp-empty {
  padding:3rem; text-align:center; color:rgba(255,255,255,.2);
  font-family:var(--jgp-font-mono); font-size:.75rem; font-style:italic;
}
.jgp-editor-placeholder {
  border: 2px dashed #2a2a2a; border-radius:6px; padding:3rem 2rem;
  text-align:center; background:#111; color:#444; font-family:var(--jgp-font-mono); font-size:.8rem;
}
.jgp-editor-placeholder strong {
  display:block; font-family:var(--jgp-font-h); font-size:1rem;
  font-weight:300; color:#666; margin-bottom:.5rem;
}