/**
 * Galerie — deux styles :
 *  - Masonry : colonnes CSS, photos à leur hauteur naturelle (aspect-ratio réel
 *    imposé en inline, height auto !important pour battre le thème).
 *  - Mosaïque : grille bento, le widget impose grandes/petites cases, photos
 *    recadrées (object-fit cover) → variété même avec des photos identiques,
 *    zéro trou (grid-auto-flow: dense).
 * L'espace (--bejoy-gallery-gap) agit horizontalement ET verticalement.
 */

.bejoy-gallery__item {
  margin: 0;
  border-radius: var(--bejoy-gallery-radius, 8px);
  overflow: hidden;
}
.bejoy-gallery__item img {
  display: block;
  width: 100% !important;
  max-width: 100%;
}

/* ---------- Masonry ---------- */
.bejoy-gallery--masonry {
  column-count: var(--bejoy-gallery-cols, 3);
  column-gap: var(--bejoy-gallery-gap, 10px);
}
.bejoy-gallery--masonry .bejoy-gallery__item {
  margin-bottom: var(--bejoy-gallery-gap, 10px);
  break-inside: avoid;
}
.bejoy-gallery--masonry .bejoy-gallery__item img {
  height: auto !important;
}

/* ---------- Mosaïque (bento) ---------- */
.bejoy-gallery--mosaic {
  display: grid;
  grid-template-columns: repeat(var(--bejoy-gallery-cols, 3), 1fr);
  grid-auto-rows: var(--bejoy-gallery-rowh, 220px);
  grid-auto-flow: dense;
  gap: var(--bejoy-gallery-gap, 10px);
}
.bejoy-gallery--mosaic .bejoy-gallery__item img {
  height: 100% !important;
  object-fit: cover;
}
/* Variété propre à TOUTES les tailles : une grande case 2×2 tous les 5 éléments,
   le reste en petites cases 1×1. Une case 2×2 + des 1×1 pavent SANS TROU quel
   que soit le nombre de colonnes (3 → grande + petites autour ; 2 → grande pleine
   largeur puis petites ; 1 → simple pile). On évite les demi-spans « haute » et
   « large » qui laissaient des trous dès qu'il y a moins de 3 colonnes. */
.bejoy-gallery--mosaic .bejoy-gallery__item:nth-child(5n + 1) {
  grid-column: span 2;
  grid-row: span 2;
}
/* À 1 colonne (mobile) : pas de grande case, simple pile propre. */
@media (max-width: 767px) {
  .bejoy-gallery--mosaic .bejoy-gallery__item:nth-child(5n + 1) {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ---------- Lightbox au clic ---------- */
/* Le lien enveloppe l'image sans changer la mise en page : en masonry l'image
   garde sa hauteur naturelle ; seul le mode mosaïque impose height:100%. */
.bejoy-gallery__link {
  display: block;
  cursor: zoom-in;
}
.bejoy-gallery--mosaic .bejoy-gallery__link,
.bejoy-gallery--mosaic .bejoy-gallery__link img {
  height: 100%;
}

.bejoy-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  /* Flou d'arrière-plan « premium » (frosted). Teinte légère → pas trop blanc.
     Le fond n'est PAS animé en opacité (il apparaît d'un coup ; seule l'image
     fait le fondu/zoom). NB : le fond noir du tout premier clic venait de la
     visionneuse d'Elementor qui s'ouvrait dessous — cf. gallery.js. */
  background: var(--bejoy-lightbox-bg, rgba(20, 20, 24, 0.28));
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.4s;
}
.bejoy-lightbox.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}
/* Repli : navigateur sans flou d'arrière-plan → fond crème franc plutôt qu'une
   teinte sombre translucide qui, sans flou, donnerait un voile grisâtre. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bejoy-lightbox {
    background: var(--bejoy-lightbox-bg-fallback, rgba(232, 225, 216, 0.94));
  }
}

.bejoy-lightbox__stage {
  position: relative;
  max-width: min(1200px, 100%);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Pas de liseré de focus bleu (défaut navigateur/Elementor) sur l'image/scène. */
.bejoy-lightbox,
.bejoy-lightbox__stage,
.bejoy-lightbox__img,
.bejoy-lightbox__link {
  outline: none !important;
}
.bejoy-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  background: transparent;
  transform: scale(0.97);
  opacity: 0;
  transition: transform var(--bj-t-base, 0.55s) var(--bj-ease-out, ease), opacity var(--bj-t-base, 0.55s) var(--bj-ease-out, ease);
}
.bejoy-lightbox.is-open .bejoy-lightbox__img {
  transform: scale(1);
  opacity: 1;
}

/* Barre du bas : titre + télécharger */
.bejoy-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-top: 14px;
  color: #f2f0ea;
  font-size: 13px;
  letter-spacing: 0.04em;
}
/* Titre (global ou nom d'image) — la typographie/couleur sont réglables
   dans le widget (onglet Style → « Titre de la lightbox »). */
.bejoy-lightbox__title { color: #f2f0ea; }
.bejoy-lightbox__download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #f2f0ea;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.bejoy-lightbox__download:hover { background: rgba(255, 255, 255, 0.12); }

/* Boutons (fermer / précédent / suivant) — fins, sans fond parasite */
.bejoy-lightbox__btn {
  position: absolute;
  z-index: 2;
  width: 46px;
  height: 46px;
  border: none;
  background: none !important;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
  -webkit-tap-highlight-color: transparent;
}
.bejoy-lightbox__btn:hover { opacity: 1; }
.bejoy-lightbox__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* --- Fond CLAIR : icônes/titre en NOIR pur (classe posée en JS selon la
   luminosité du fond → lisible quelle que soit la couleur choisie). --- */
.bejoy-lightbox--light .bejoy-lightbox__btn {
  color: #141414;
  filter: none;
}
.bejoy-lightbox--light .bejoy-lightbox__title,
.bejoy-lightbox--light .bejoy-lightbox__bar { color: #141414; }
.bejoy-lightbox--light .bejoy-lightbox__download {
  color: #141414;
  border-color: rgba(0, 0, 0, 0.25);
}
.bejoy-lightbox--light .bejoy-lightbox__download:hover { background: rgba(0, 0, 0, 0.08); }

/* Croix de fermeture — deux traits fins, sans fond (identique au popup vidéo) */
.bejoy-lightbox__close { top: 3vmin; right: 3vmin; }
.bejoy-lightbox__close::before,
.bejoy-lightbox__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1.5px;
  background: currentColor;
}
.bejoy-lightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.bejoy-lightbox__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Flèches — icônes Bejoy choisies dans le widget (police), ou SVG, ou chevron. */
.bejoy-lightbox__prev { left: 2vmin; top: 50%; transform: translateY(-50%); font-size: 26px; }
.bejoy-lightbox__next { right: 2vmin; top: 50%; transform: translateY(-50%); font-size: 26px; }
.bejoy-lightbox__prev i,
.bejoy-lightbox__next i { font-size: inherit; line-height: 1; }
.bejoy-lightbox__prev svg,
.bejoy-lightbox__next svg { width: 26px; height: 26px; fill: currentColor; }
.bejoy-lightbox__chev {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-style: solid;
  border-width: 1.5px 1.5px 0 0;
  border-color: currentColor;
}
.bejoy-lightbox__prev .bejoy-lightbox__chev { transform: rotate(-135deg); margin-left: 4px; }
.bejoy-lightbox__next .bejoy-lightbox__chev { transform: rotate(45deg); margin-right: 4px; }

@media (prefers-reduced-motion: reduce) {
  .bejoy-lightbox, .bejoy-lightbox__img, .bejoy-lightbox__btn { transition: none; }
}