/* ==========================================================================
   Réalisations — galerie
   ========================================================================== */

.gallery-section { padding-top: clamp(2.5rem, 5vw, 4rem); }

.gallery {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3rem) clamp(1rem, 2vw, 1.5rem);
    list-style: none;
}

/* Composition éditoriale : 5 photos sur 3 rangées */
.gallery__item--1 { grid-column: 1 / span 5; }
.gallery__item--2 { grid-column: 6 / span 7; }
.gallery__item--3 { grid-column: 1 / span 4; }
.gallery__item--4 { grid-column: 5 / span 8; align-self: end; }
.gallery__item--5 { grid-column: 3 / span 8; }

.gallery__item--1 .gallery__frame { aspect-ratio: 4 / 5; }
.gallery__item--2 .gallery__frame { aspect-ratio: 7 / 6; }
.gallery__item--3 .gallery__frame { aspect-ratio: 3 / 4; }
.gallery__item--4 .gallery__frame { aspect-ratio: 16 / 9; }
.gallery__item--5 .gallery__frame { aspect-ratio: 16 / 9; }

.gallery__link { display: block; color: inherit; text-decoration: none; }
.gallery__link:focus-visible { outline-offset: 6px; }

.gallery__frame {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    background: #e4e4df;
}
.gallery__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.gallery__link:hover .gallery__frame img { transform: scale(1.02); }

.gallery__zoom {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.gallery__zoom .icon { width: 18px; height: 18px; }
.gallery__link:hover .gallery__zoom,
.gallery__link:focus-visible .gallery__zoom { opacity: 1; transform: none; }

.gallery__caption {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: .75rem;
    margin-top: .875rem;
    padding-top: .875rem;
    border-top: 1px solid var(--line);
}
.gallery__index { font-size: .8125rem; color: var(--ink-3); line-height: 1.6; }
.gallery__title { display: block; font-weight: 500; line-height: 1.4; }
.gallery__detail { display: block; font-size: .9375rem; color: var(--ink-3); }

@media (hover: none) {
    .gallery__zoom { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
    .gallery__item--1 { grid-column: 1 / span 6; }
    .gallery__item--2 { grid-column: 7 / span 6; }
    .gallery__item--3 { grid-column: 1 / span 6; }
    .gallery__item--4 { grid-column: 7 / span 6; align-self: start; }
    .gallery__item--5 { grid-column: 1 / -1; }
    .gallery__item--2 .gallery__frame { aspect-ratio: 4 / 5; }
    .gallery__item--3 .gallery__frame,
    .gallery__item--4 .gallery__frame { aspect-ratio: 4 / 5; }
}

@media (max-width: 560px) {
    .gallery__item { grid-column: 1 / -1 !important; }
    .gallery__item .gallery__frame { aspect-ratio: 4 / 3 !important; }
    .gallery__item--1 .gallery__frame,
    .gallery__item--3 .gallery__frame { aspect-ratio: 4 / 5 !important; }
}

/* Visionneuse
   ========================================================================== */

html.lightbox-open { overflow: hidden; }

.lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: #0a0f15;
    color: var(--night-ink);
}
.lightbox[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    animation: lightbox-in .2s var(--ease);
}
.lightbox::backdrop { background: #0a0f15; }

@keyframes lightbox-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem var(--gutter);
}
.lightbox__counter { font-size: .875rem; color: var(--night-mute); }

.lightbox__stage {
    position: relative;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    min-height: 0;
    padding: 0 clamp(1rem, 7vw, 6rem);
}
.lightbox__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .25s var(--ease);
}
.lightbox__img.is-loaded { opacity: 1; }

.lightbox__btn {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--night-line);
    border-radius: 50%;
    background: rgba(13, 20, 29, .7);
    color: #fff;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}
.lightbox__btn:hover { border-color: #fff; background: rgba(13, 20, 29, .95); }
.lightbox__btn .icon { width: 20px; height: 20px; }
.lightbox__btn:focus-visible { outline-color: #fff; }

.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: var(--gutter); }
.lightbox__nav--next { right: var(--gutter); }

.lightbox__caption {
    padding: 1rem var(--gutter) 1.5rem;
    text-align: center;
}
.lightbox__title { margin: 0; font-weight: 500; }
.lightbox__detail { margin: .15rem 0 0; font-size: .9375rem; color: var(--night-mute); }

@media (max-width: 640px) {
    .lightbox__stage { padding: 0; }
    .lightbox__nav { top: auto; bottom: -3.75rem; transform: none; }
    .lightbox__caption { padding-inline: 4.5rem; }
}