/* ============================================================
   JET ATLAS — ht-galerie (filterable masonry gallery + lightbox)
   White / ink / lime. Distinct from ht-gallery (home marquee).
   ============================================================ */
.ht-galerie { background: var(--ht-paper, #fff); color: var(--ht-ink); padding: clamp(64px,8vw,120px) 0; overflow-x: clip; }

.ht-galerie__head { text-align: center; max-width: 780px; margin-inline: auto; }
.ht-galerie__intro { margin-top: 18px; color: var(--ht-mut); font-size: clamp(15px,1.4vw,18px); line-height: 1.7; }

/* ---- filter pills ---- */
.ht-galerie__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: clamp(28px,3.5vw,44px) auto clamp(34px,4vw,52px); }
.ht-galerie__pill { font-family: var(--ht-ui); font-size: 13px; font-weight: 600; letter-spacing: .03em; padding: 13px 20px; border-radius: 999px; border: 1px solid var(--ht-line); background: transparent; color: var(--ht-ink); cursor: pointer; transition: background .3s var(--ht-ease), color .3s, border-color .3s; }
.ht-galerie__pill span { font-family: var(--ht-data); font-size: 11px; margin-left: 5px; opacity: .72; }
.ht-galerie__pill:hover { border-color: var(--ht-ink); }
.ht-galerie__pill.is-active { background: var(--ht-lime); border-color: var(--ht-lime); color: var(--ht-ink); }
.ht-galerie__pill.is-active span { opacity: .65; }

/* ---- masonry grid — MOBILE-FIRST & fluid via `columns: <min-width> <max-count>`.
   The browser fits as many ≥170px columns as the CONTAINER allows, capped at 3:
   ~1 col on tiny phones, 2 on normal phones, 3 on tablet/desktop — with NO media
   query to mis-match (the earlier max-width breakpoints weren't applying on device).
   margin-bottom carries the vertical gutter; !important beats Elementor's
   `figure { margin: 0 }` reset (which would glue the rows together). ---- */
.ht-galerie__grid { columns: 170px 3; column-gap: 14px; width: min(100% - 2 * clamp(16px,5vw,44px), 100vw - 32px, 1280px); margin-inline: auto; }
.ht-galerie__item { break-inside: avoid; margin: 0 0 14px !important; position: relative; display: block; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: var(--ht-paper2); outline: none; }
.ht-galerie__item img { width: 100%; display: block; transition: transform .8s var(--ht-ease); }
.ht-galerie__item:hover img { transform: scale(1.05); }
.ht-galerie__item::after { /* lime focus ring */ content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: 14px; transition: border-color .3s; pointer-events: none; }
.ht-galerie__item:focus-visible::after { border-color: var(--ht-lime); }
.ht-galerie__item figcaption { position: absolute; inset: auto 0 0 0; padding: 44px 16px 15px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(to top, rgba(10,10,10,.85), rgba(10,10,10,.0)); color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ht-ease), transform .4s var(--ht-ease); }
.ht-galerie__item:hover figcaption, .ht-galerie__item:focus-visible figcaption { opacity: 1; transform: none; }
.ht-galerie__tag { font-family: var(--ht-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ht-lime); }
.ht-galerie__cap { font-family: var(--ht-serif); font-size: 18px; line-height: 1.18; }
.ht-galerie__item.is-hidden { display: none; }

/* ---- lightbox ---- */
.ht-galerie__lb { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(8,8,8,.94); padding: clamp(16px,4vw,56px); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ht-galerie__lb.is-open { display: flex; }
.ht-galerie__lb-stage { margin: 0; max-width: min(1100px, 92vw); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ht-galerie__lb-stage img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.ht-galerie__lb-stage figcaption { font-family: var(--ht-serif); font-size: clamp(16px,2vw,20px); color: #fff; text-align: center; }
.ht-galerie__lb-close { position: absolute; top: 18px; right: 22px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.ht-galerie__lb-close:hover { background: var(--ht-lime); color: var(--ht-ink); border-color: var(--ht-lime); }
.ht-galerie__lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.3); color: #fff; font-size: 32px; line-height: 1; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.ht-galerie__lb-nav:hover { background: var(--ht-lime); color: var(--ht-ink); border-color: var(--ht-lime); }
.ht-galerie__lb-prev { left: clamp(8px,2vw,28px); }
.ht-galerie__lb-next { right: clamp(8px,2vw,28px); }
.ht-galerie__lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-family: var(--ht-data); font-size: 13px; letter-spacing: .08em; color: rgba(255,255,255,.7); }

/* slightly wider gutters once there's room (≥ ~2 columns). */
@media (min-width: 640px) { .ht-galerie__grid { column-gap: 20px; } .ht-galerie__item { margin-bottom: 20px !important; } }
/* touch devices have no hover → always show the caption. */
@media (hover: none) { .ht-galerie__item figcaption { opacity: 1; transform: none; padding-top: 30px; } }
/* phones: one image per row (was 2 narrow columns).
   `!important` is required because the widget's « Colonnes (bureau) » Elementor
   control emits `column-count:3` on `{{WRAPPER}} .ht-galerie__grid` (specificity
   0,2,0), which out-ranks this media query (0,1,0) and would otherwise keep 2–3
   narrow columns on mobile. */
@media (max-width: 600px) { .ht-galerie__grid { column-count: 1 !important; column-gap: 0; } .ht-galerie__item { margin-bottom: 14px !important; } }
@media (max-width: 600px) { .ht-galerie__lb-nav { width: 44px; height: 44px; font-size: 26px; } }
@media (prefers-reduced-motion: reduce) {
  .ht-galerie__item img { transition: none; }
  .ht-galerie__item:hover img { transform: none; }
}