/* ============================================================
   DRAGON BOXING — galerie premium (masonry + lightbox + filtres)
   Couleurs héritées du design system (--bg/--red/--gold/--paper)
   ============================================================ */

.db-gallery{--g-gap:16px}

/* ---------- filtres ---------- */
.db-g-filters{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:0 0 36px;
}
.db-g-filter{
  font-family:var(--display);font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:999px;
  padding:11px 22px;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s,transform .15s;
}
.db-g-filter:hover{color:var(--paper);border-color:var(--red);transform:translateY(-1px)}
.db-g-filter.active{color:#fff;background:var(--red);border-color:var(--red)}

/* ---------- grille masonry ---------- */
.db-g-grid{
  columns:3 300px;column-gap:var(--g-gap);
}
.db-g-item{
  position:relative;display:block;margin:0 0 var(--g-gap);
  break-inside:avoid;overflow:hidden;
  border:1px solid var(--line);border-radius:2px;
  opacity:0;transform:translateY(24px);
  transition:opacity .55s cubic-bezier(.2,.6,.2,1),transform .55s cubic-bezier(.2,.6,.2,1);
}
.db-g-item.is-visible{opacity:1;transform:none}
.db-g-item.is-hidden{display:none}
.db-g-item img{
  width:100%;display:block;transform:scale(1.03);
  transition:transform .7s cubic-bezier(.2,.6,.2,1),filter .4s ease;
}
.db-g-item:hover img{transform:scale(1.09);filter:brightness(.5) saturate(1.1)}
.db-g-item:hover{border-color:var(--red)}

/* ---------- overlay hover ---------- */
.db-g-ov{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:4px;padding:20px;opacity:0;
  background:linear-gradient(180deg,rgba(10,10,11,0) 30%,rgba(10,10,11,.9) 100%);
  transition:opacity .35s ease;
}
.db-g-item:hover .db-g-ov{opacity:1}
.db-g-cat{
  font-family:var(--display);font-size:.66rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.db-g-title{
  font-family:var(--display);font-size:1.05rem;font-weight:600;
  text-transform:uppercase;color:var(--paper);line-height:1.2;
}

/* ---------- lightbox (GLightbox) : aligner sur la marque ---------- */
.glightbox-clean .gslide-title{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:1.05rem;color:var(--paper);
}
.glightbox-clean .gslide-desc{color:var(--gold);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.glightbox-clean .gclose, .glightbox-clean .gnext, .glightbox-clean .gprev{
  background:rgba(10,10,11,.7)!important;color:var(--paper)!important;
  border:1px solid var(--line)!important;
}
.glightbox-clean .gnext:hover, .glightbox-clean .gprev:hover,
.glightbox-clean .gclose:hover{background:var(--red)!important;color:#fff!important}

/* ---------- TikTok (cartes vidéo, sans JS) ---------- */
.db-tiktok-row{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:stretch;
  margin-top:8px;
}
.db-tt-card{
  flex:1 1 300px;min-width:260px;max-width:340px;
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:2px;overflow:hidden;
  background:var(--surface);
  transition:border-color .2s,transform .2s;
}
.db-tt-card:hover{border-color:var(--red);transform:translateY(-3px)}
.db-tt-thumb{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:var(--surface-2)}
.db-tt-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.6,.2,1),filter .4s}
.db-tt-card:hover .db-tt-thumb img{transform:scale(1.06);filter:brightness(.6)}
.db-tt-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;background:rgba(10,10,11,.15);transition:background .3s;
}
.db-tt-play svg{
  width:58px;height:58px;padding:16px;border-radius:50%;
  background:var(--red);box-shadow:0 8px 30px rgba(225,6,0,.45);
  transition:transform .2s;
}
.db-tt-card:hover .db-tt-play svg{transform:scale(1.1)}
.db-tt-title{
  font-family:var(--display);font-weight:600;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--paper);
  padding:14px 16px;
}

/* ---------- Instagram (grille figée, sans API) ---------- */
.db-ig{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:780px;margin:0 auto;
}
.db-ig-card{
  position:relative;display:block;overflow:hidden;padding-top:100%;  /* carré de taille fixe */
  border:1px solid var(--line);border-radius:2px;background:var(--surface-2);
}
.db-ig-card img{
  position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.6,.2,1),filter .3s;
}
.db-ig-card:hover img{transform:scale(1.06);filter:brightness(.55)}
.db-ig-ov{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;opacity:0;transition:opacity .3s;
}
.db-ig-card:hover .db-ig-ov{opacity:1}
.db-ig-ov svg{width:38px;height:38px}
@media (max-width:768px){.db-ig{grid-template-columns:repeat(2,1fr);gap:8px}}

/* ---------- responsive ---------- */
@media (max-width:768px){
  .db-g-grid{columns:2 160px}
  .db-g-ov{opacity:1;padding:12px}
  .db-g-title{font-size:.86rem}
}