/* NJANSANG — styles propres à la page Galerie. Chargé après styles.css (même ordre de couches). */
@layer pages {
  .galerie { padding-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); }
  .page-head + .galerie { margin-block-start: 0; }
  .gal-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1rem; }
  .galerie .chip { background: transparent; color: var(--color-creme); border-color: rgb(248 241 227 / .35); }
  .galerie .chip:hover { border-color: var(--color-creme); }
  .galerie .chip[aria-pressed="true"] { background: var(--color-ocre); border-color: var(--color-ocre); color: var(--color-encre); }
  .gal { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 11rem; grid-auto-flow: dense; }
  .gal__item { position: relative; border-radius: var(--radius-s); overflow: hidden; background: var(--color-nuit-2); }
  .gal__item--0, .gal__item--4 { grid-column: span 2; grid-row: span 2; }
  .gal__link { display: block; height: 100%; color: var(--color-creme); text-decoration: none; }
  .gal__link img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out), filter var(--dur-4); }
  .gal__link:hover img { transform: scale(1.04); }
  .gal__cap { position: absolute; inset-inline: 0; inset-block-end: 0; display: grid; gap: .1rem; padding: 3rem .85rem .75rem; font-size: .85rem; line-height: 1.35; background: linear-gradient(180deg, rgb(28 17 12 / 0), rgb(28 17 12 / .62) 38%, rgb(28 17 12 / .94)); text-shadow: 0 1px 2px rgb(18 11 8 / .6); }
  .gal__cat { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--color-ocre); }
  .gal__link:focus-visible { outline: 3px solid var(--color-ocre); outline-offset: 2px; }
  @media (min-width: 48em) {
    .gal { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 14.5rem; gap: 1rem; }
    .gal__item--0 { grid-column: span 2; grid-row: span 2; }
    .gal__item--4 { grid-column: span 2; grid-row: span 1; }
    .gal__item--2 { grid-row: span 2; }
    .gal__cap { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-3), transform var(--dur-3) var(--ease-out); }
    .gal__link:hover .gal__cap, .gal__link:focus-visible .gal__cap { opacity: 1; transform: none; }
  }
  @media (hover: none) { .gal__cap { opacity: 1 !important; transform: none !important; } }
  .lightbox { width: 100%; height: 100%; max-width: none; max-height: none; background: rgb(18 11 8 / .96); color: var(--color-creme); }
  .lightbox[open] { display: grid; place-items: center; }
  .lightbox__fig { display: grid; gap: .75rem; justify-items: center; width: min(100% - 2rem, 70rem); touch-action: pan-y; }
  .lightbox__img { max-height: calc(100svh - 9rem); width: auto; max-width: 100%; object-fit: contain; border-radius: var(--radius-s); user-select: none; -webkit-user-drag: none; }
  .lightbox__cap { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1rem; text-align: center; font-size: .95rem; color: var(--color-lin); }
  .lightbox__count { color: var(--color-ocre); font-weight: 650; font-variant-numeric: tabular-nums; }
  .lightbox__btn, .lightbox__close { position: fixed; display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; background: rgb(248 241 227 / .12); color: var(--color-creme); transition: background-color var(--dur-2); }
  .lightbox__btn:hover, .lightbox__close:hover { background: rgb(248 241 227 / .25); }
  .lightbox__btn--prev { inset-inline-start: .75rem; inset-block-start: 50%; translate: 0 -50%; }
  .lightbox__btn--next { inset-inline-end: .75rem; inset-block-start: 50%; translate: 0 -50%; }
  .lightbox__close { inset-inline-end: .75rem; inset-block-start: .75rem; }
  .lightbox :focus-visible { outline-color: var(--color-ocre); }
  @media (max-width: 47.99em) { .lightbox__btn { inset-block-start: auto; inset-block-end: 1rem; translate: none; } }
}