/* Photos des pages — commun à Trek Népal et Visit Népal (copié dans dist/assets/css/photos.css, chargé par les pages qui ont des photos).
   Utilise les variables de couleur du style.css de chaque site (--blue-deep, --ink-2, --ink-3, --sand-2, --radius-s). */
/* ---------- photos (photos.json + assets/photos/, générés par photos-nepal/process.py) ---------- */
/* bandeau sous l'en-tête : largeur bornée pour que le recadrage « cover » ne coupe jamais la mention © en bas à droite */
.photohero { margin: 0; background: var(--blue-deep); }
.photohero picture { display: block; max-width: 1600px; margin-inline: auto; }
.photohero img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; }
.photohero__cap { width: min(1120px, 100% - 32px); margin: 10px auto 0; font-size: .82rem; color: var(--ink-3); }
@media (max-width: 640px) { .photohero img { aspect-ratio: 3 / 2; } }
/* galerie : vignettes 4:3, agrandissement dans une boîte de dialogue */
.pgal { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.pgal__fig { margin: 0; }
.pgal__item { display: block; border-radius: var(--radius-s); overflow: hidden; background: var(--sand-2); }
.pgal__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s ease; }
.pgal__item:hover img, .pgal__item:focus-visible img { transform: scale(1.04); }
.pgal__fig figcaption { margin-top: 6px; font-size: .82rem; line-height: 1.35; color: var(--ink-2); }
.lbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lbox::backdrop { background: rgba(8, 10, 12, .9); }
.lbox[open] { display: flex; align-items: center; justify-content: center; }
.lbox__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: calc(100vw - 32px); }
.lbox__fig img { display: block; max-width: calc(100vw - 32px); max-height: calc(100vh - 110px); width: auto; height: auto; border-radius: 6px; }
.lbox__fig figcaption { color: #EDE8DF; font-size: .92rem; text-align: center; }
.lbox__btn { position: fixed; border: 0; border-radius: 999px; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.lbox__btn:hover, .lbox__btn:focus-visible { background: rgba(255, 255, 255, .28); }
.lbox__close { top: 14px; right: 14px; }
.lbox__prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lbox__next { right: 14px; top: 50%; transform: translateY(-50%); }
.lbox__btn[hidden] { display: none; }