/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --gold:        #E8B84B;
  --gold-light:  #F5D07A;
  --gold-dark:   #C9952A;
  --ink:         #0D0D0D;
  --surface:     #F8F6F1;
  --muted:       #6B6558;
  --border:      #EDEAE3;
  --trans:       .42s cubic-bezier(.4,0,.2,1);
  --trans-fast:  .22s ease;
}
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=DM+Sans:wght@300;400;500;600&display=swap');
 
/* ── SECTION ─────────────────────────────────────────────────── */
.gallery-section {
  padding: 88px 0 96px;
  position: relative;
  overflow: hidden;
}
.gallery-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 35% at 10% 0%, rgba(232,184,75,.07) 0%, transparent 60%),
    radial-gradient(ellipse 45% 45% at 90% 100%, rgba(232,184,75,.05) 0%, transparent 55%);
  pointer-events: none;
}
 
/* ── HEADER ──────────────────────────────────────────────────── */
.gallery-header { text-align: center; margin-bottom: 56px; }
.gallery-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.gallery-eyebrow::before,
.gallery-eyebrow::after {
  content: '';
  display: block;
  width: 26px; height: 1px;
  background: var(--gold);
  opacity: .45;
}
.gallery-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  color: #C9952A;
  line-height: 1.15;
  margin-bottom: 14px;
}
.gallery-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: .92rem;
  font-weight: 300;
  color: rgba(255,255,255,.42);
  max-width: 440px;
  margin: 0 auto;
}
 
/* Count chip */
.gallery-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50px;
  padding: 5px 14px;
  font-size: .72rem;
  color: rgba(255,255,255,.5);
  margin-top: 16px;
}
.gallery-count-chip strong { color: var(--gold); }
 
/* ── MASONRY-STYLE GRID ──────────────────────────────────────── */
.gallery-grid {
  columns: 3;
  column-gap: 18px;
}
@media (max-width: 991px) { .gallery-grid { columns: 2; } }
@media (max-width: 575px) { .gallery-grid { columns: 1; } }
 
.gallery-item {
  break-inside: avoid;
  margin-bottom: 18px;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  /* Entry animation */
  opacity: 0;
  transform: translateY(24px);
  animation: galleryFadeUp .6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes galleryFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
/* Alternate heights for "masonry feel" in same-height images */
.gallery-item:nth-child(3n+1) .gallery-img { aspect-ratio: 4/5; }
.gallery-item:nth-child(3n+2) .gallery-img { aspect-ratio: 4/3; }
.gallery-item:nth-child(3n+3) .gallery-img { aspect-ratio: 1/1; }
@media (max-width: 575px) {
  .gallery-item .gallery-img { aspect-ratio: 4/3 !important; }
}
 
/* Focus dimming — sibling cards dim when one is hovered */
.gallery-grid:has(.gallery-item:hover) .gallery-item:not(:hover) {
  filter: brightness(.55) saturate(.7);
}
 
/* Image */
.gallery-img {
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.4,0,.2,1), filter var(--trans);
}
.gallery-item:hover .gallery-img {
  transform: scale(1.07);
}
 
/* Base overlay (always present, subtle) */
.gallery-overlay-base {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13,13,13,.08) 0%,
    rgba(13,13,13,.45) 60%,
    rgba(13,13,13,.88) 100%
  );
  transition: opacity var(--trans);
}
 
/* Hover overlay (gold tint) */
.gallery-overlay-hover {
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(232,184,75,.12) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--trans);
}
.gallery-item:hover .gallery-overlay-hover { opacity: 1; }
 
/* Content (hidden → visible on hover) */
.gallery-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 18px 18px;
  z-index: 3;
  transform: translateY(8px);
  transition: transform var(--trans);
}
.gallery-item:hover .gallery-content { transform: translateY(0); }
 
/* Title */
.gallery-item-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--trans), transform var(--trans);
  transition-delay: .04s;
}
.gallery-item:hover .gallery-item-title { opacity: 1; transform: translateY(0); }
 
/* Sep */
.gallery-sep {
  width: 0;
  height: 1.5px;
  background: linear-gradient(to right, var(--gold), transparent);
  border-radius: 2px;
  margin: 8px 0;
  transition: width .45s ease .06s;
}
.gallery-item:hover .gallery-sep { width: 36px; }
 
/* Description */
.gallery-item-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: .75rem;
  color: rgba(255,255,255,.52);
  line-height: 1.6;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--trans), transform var(--trans);
  transition-delay: .08s;
}
.gallery-item:hover .gallery-item-desc { opacity: 1; transform: translateY(0); }
 
/* CTA Button */
.gallery-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(232,184,75,.9);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 7px 16px;
  border-radius: 50px;
  border: none;
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px) scale(.95);
  transition: opacity var(--trans), transform var(--trans), background var(--trans-fast);
  transition-delay: .12s;
  backdrop-filter: blur(6px);
}
.gallery-item:hover .gallery-btn { opacity: 1; transform: translateY(0) scale(1); }
.gallery-btn:hover { background: var(--gold); color: var(--ink); }
 
/* Corner icon (camera / film) */
.gallery-corner-icon {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(13,13,13,.55);
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--trans);
}
.gallery-item:hover .gallery-corner-icon { opacity: 1; }
 
/* ── EMPTY STATE ─────────────────────────────────────────────── */
.gallery-empty {
  text-align: center;
  padding: 72px 0;
}
.gallery-empty-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(232,184,75,.1);
  border: 1.5px solid rgba(232,184,75,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.8rem;
  color: var(--gold);
}
.gallery-empty h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 8px;
}
.gallery-empty p { color: rgba(255,255,255,.35); font-size: .88rem; }
 
/* ── PAGINATION ──────────────────────────────────────────────── */
.gallery-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 56px 0 0;
}
.gallery-pagination .page-item .page-link {
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.55);
  font-family: 'DM Sans', sans-serif;
  font-size: .84rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s ease;
  backdrop-filter: blur(6px);
}
.gallery-pagination .page-item .page-link:hover {
  border-color: rgba(232,184,75,.4);
  background: rgba(232,184,75,.1);
  color: var(--gold-light);
}
.gallery-pagination .page-item.active .page-link {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(232,184,75,.35);
}
.gallery-pagination .page-item.disabled .page-link {
  opacity: .2;
  pointer-events: none;
}












/* ── HEADER ──────────────────────────────────────────────────── */
.gallery-header { text-align: center; margin-bottom: 56px; }
.gallery-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.gallery-eyebrow::before,
.gallery-eyebrow::after {
  content: '';
  display: block;
  width: 26px; height: 1px;
  background: var(--gold);
  opacity: .45;
}
/* Focus-dimming via :has() */
.gallery-grid:has(.gallery-item:hover) .gallery-item:not(:hover) {
  filter: brightness(.5) saturate(.6);
}
 
@keyframes galleryFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
.gallery-item:nth-child(1) { animation-delay: .04s; }
.gallery-item:nth-child(2) { animation-delay: .10s; }
.gallery-item:nth-child(3) { animation-delay: .16s; }
.gallery-item:nth-child(4) { animation-delay: .22s; }
.gallery-item:nth-child(5) { animation-delay: .28s; }
.gallery-item:nth-child(6) { animation-delay: .34s; }
.gallery-item:nth-child(7) { animation-delay: .40s; }
.gallery-item:nth-child(8) { animation-delay: .46s; }
.gallery-item:nth-child(9) { animation-delay: .52s; }
 
/* Alternate aspect ratios for masonry feel */
.gallery-item:nth-child(3n+1) .gallery-media { aspect-ratio: 4/5; }
.gallery-item:nth-child(3n+2) .gallery-media { aspect-ratio: 4/3; }
.gallery-item:nth-child(3n+3) .gallery-media { aspect-ratio: 1/1; }
@media (max-width: 575px) {
  .gallery-item .gallery-media { aspect-ratio: 4/3 !important; }
}
 
/* ── MEDIA (img) ─────────────────────────────────────────────── */
.gallery-media {
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.4,0,.2,1);
}
.gallery-item:hover .gallery-media { transform: scale(1.07); }
 
/* ── OVERLAYS ────────────────────────────────────────────────── */
.gallery-overlay-base {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13,13,13,.06) 0%,
    rgba(13,13,13,.42) 55%,
    rgba(13,13,13,.90) 100%
  );
  transition: opacity var(--trans);
}

/* ── CONTENT (bottom, animated) ─────────────────────────────── */
.gallery-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 18px 18px;
  z-index: 3;
  transform: translateY(8px);
  transition: transform var(--trans);
}
.gallery-item:hover .gallery-content { transform: translateY(0); }
 
.gallery-item-title {
  font-family: 'Playfair Display', serif;
  font-size: .98rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--trans), transform var(--trans);
  transition-delay: .04s;
}
.gallery-item:hover .gallery-item-title { opacity: 1; transform: translateY(0); }
 
.gallery-sep {
  width: 0;
  height: 1.5px;
  background: linear-gradient(to right, var(--gold), transparent);
  border-radius: 2px;
  margin: 8px 0;
  transition: width .45s ease .06s;
}
.gallery-item:hover .gallery-sep { width: 36px; }
 
.gallery-item-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: .75rem;
  color: rgba(255,255,255,.50);
  line-height: 1.6;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--trans), transform var(--trans);
  transition-delay: .08s;
}
.gallery-item:hover .gallery-item-desc { opacity: 1; transform: translateY(0); }
 
/* ── TYPE BADGE (Photo / Vidéo) ─────────────────────────────── */
.gallery-type-badge {
  position: absolute;
  top: 13px; left: 13px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Sans', sans-serif;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 50px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(13,13,13,.55);
  color: rgba(255,255,255,.7);
}
.gallery-type-badge.is-video {
  background: rgba(13,13,13,.55);
  border-color: rgba(255,255,255,.7);
  color: rgba(255,255,255,.7);
}
.gallery-type-badge i { font-size: .75rem; }
 
/* ── PLAY BUTTON (vidéo) ─────────────────────────────────────── */
.gallery-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(.9);
  z-index: 4;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(232,184,75,.9);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--trans), background var(--trans), box-shadow var(--trans);
  box-shadow: 0 4px 20px rgba(232,184,75,.35);
}
.gallery-play-btn i {
  font-size: 1.3rem;
  color: var(--ink);
  margin-left: 3px; /* optical centering for play icon */
}
.gallery-item:hover .gallery-play-btn {
  transform: translate(-50%,-50%) scale(1);
  background: var(--gold);
  box-shadow: 0 8px 30px rgba(232,184,75,.6);
}
 
/* Pulse ring */
.gallery-play-btn::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(232,184,75,.35);
  animation: play-pulse 2s infinite;
}
@keyframes play-pulse {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
 
/* ── VIDEO MODAL ─────────────────────────────────────────────── */
.modal-video .modal-content {
  background: var(--ink);
  border: 1px solid rgba(232,184,75,.15);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
}
.modal-video .modal-header {
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 18px 24px;
}
.modal-video .modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: #fff;
}
.modal-video .btn-close { filter: invert(1); opacity: .45; }
.modal-video .btn-close:hover { opacity: 1; }
.modal-video .modal-body { padding: 0; background: #000; }
.modal-video video { display: block; width: 100%; max-height: 70vh; }