@media (prefers-reduced-motion: reduce) {}

/* ===========================================================
   GALLERY — Load more : cache les batches > 0 dès le départ
   =========================================================== */

/* Batch 0 toujours visible, les autres cachés jusqu'au clic */
.gallery-item[data-batch]:not([data-batch="0"]) {
    display: none;
}

/* Quand le JS les révèle : réapparaissent avec la même transition que is-in */
.gallery-item[data-batch].is-revealed {
    display: block;
}

/* Bouton "Voir plus" */
.btn-load-more {
    margin-top: var(--s5);
    /* Hérite des styles .btn et .btn--center */
}

/* Disparaît quand toutes les photos sont affichées */
.btn-load-more[hidden] {
    display: none;
}


/* ===========================================================
   GALLERY — Hero
   =========================================================== */

.gallery-hero {
    padding: var(--s5) 0 var(--s6);
    text-align: center;
}

.gallery-hero-card {
    /* Apple-ish glass, sobre */
    --glassRadius: 34px;
    --glassBlur: 18px;
    --glassAlpha: 0.035;
    --glassSat: 1.12;

    --glassCaustics:
        radial-gradient(60% 55% at 18% 22%, rgb(255 255 255 / 0.070) 0%, transparent 72%),
        radial-gradient(60% 55% at 82% 30%, rgb(255 255 255 / 0.045) 0%, transparent 74%);

    --glassBorder: rgb(255 255 255 / 0.16);
    --glassShadow:
        0 28px 80px rgb(0 0 0 / 0.14),
        inset 0 1px 0 rgb(255 255 255 / 0.16),
        inset 0 -1px 0 rgb(0 0 0 / 0.10),
        inset 0 0 0 1px rgb(255 255 255 / 0.06);

    width: 100%;
    margin-inline: auto;
    padding: clamp(18px, 3vw, 44px);
}

.gallery-title {
    font-family: var(--fontAccent);
    letter-spacing: 0.03em;
    color: rgb(var(--textColor));
    font-size: clamp(3.2rem, 10vw, 6.2rem);
    line-height: 0.95;
    text-wrap: balance;
    text-transform: uppercase;

    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

/* "Galerie photo" — intro discret */
.gallery-title__prefix {
    display: block;
    font-family: var(--fontTitle);
    font-weight: 900;
    font-size: clamp(0.85rem, 2.4vw, 1.25rem);
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: rgb(var(--textColor) / 0.40);
}

/* "PORTRAIT" / "CORPORATE" — mot fort, taille pleine */
.gallery-title__strong {
    display: block;
    font-size: 1em;
    line-height: 0.95;
}

/* "à Lorient" — identique à prefix */
.gallery-title__suffix {
    display: block;
    font-family: var(--fontTitle);
    font-weight: 900;
    font-size: clamp(0.85rem, 2.4vw, 1.25rem);
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: rgb(var(--textColor) / 0.40);
}

.gallery-divider {
    height: 2px;
    width: 100%;
    margin: var(--s4) auto;
    border-radius: var(--radius-cut);
    background: rgb(var(--accentColor) / 0.22);
}

/* ===========================================================
   GALLERY — Lead (Apple-ish, cohérent avec le site)
   =========================================================== */

.gallery-intro {
    max-width: 86ch;
    margin: var(--s4) auto 0;

    font-family: var(--fontText);
    line-height: 1.75;
    font-size: clamp(1.02rem, 1.05vw, 1.12rem);
    color: rgb(var(--textColor) / 0.80);

    text-wrap: pretty;
    hyphens: auto;
    text-align: left;
}

.gallery-intro h2 {
    font-family: var(--fontTitle);
    font-size: clamp(1.1rem, 2.2vw, 1.6rem);
    letter-spacing: .05em;
    line-height: 1.1;
    color: rgb(var(--textColor) / .65);
    margin: 0 0 var(--s4);
    text-align: center;
    text-transform: uppercase;
    hyphens: none;
}

.gallery-intro p {
    margin: 0 0 var(--s3);
}

.gallery-intro p:last-child {
    margin-bottom: 0;
}


/* ===========================================================
   GALLERY — Grid
   =========================================================== */

.gallery {
    padding-bottom: var(--s8);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s1);
    padding-bottom: var(--s3);
}

.gallery-item[data-span="2"] {
    grid-column: span 2;
}

/* ===========================================================
   GALLERY — Items (Apple-ish only)
   =========================================================== */

.gallery-item {
    --ar: 3/4;

    padding: 0;
    cursor: pointer;

    display: block;
    width: 100%;
    aspect-ratio: var(--ar);
    max-height: min(66svh, 528px);

    position: relative;
    overflow: hidden;
    isolation: isolate;

    border: 1px solid rgb(255 255 255 / 0.16);
    border-radius: 14px;

    background: rgb(255 255 255 / 0.03);

    box-shadow:
        0 10px 24px rgb(0 0 0 / 0.18),
        inset 0 1px 0 rgb(255 255 255 / 0.10);

    transition: border-color 0.18s ease;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transform: scale(1.001);
}

/* Shine overlay (hover only) */
.gallery-item::after {
    content: "";
    position: absolute;
    inset: -60%;
    pointer-events: none;
    z-index: 1;

    background: linear-gradient(120deg,
            transparent 35%,
            rgb(var(--accentColor) / 0.26) 50%,
            transparent 65%);

    transform: translateX(-70%) rotate(12deg);
    opacity: 0;

    mix-blend-mode: overlay;

    transition: transform 0.55s ease, opacity 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
    .gallery-item:hover::after {
        opacity: 1;
        transform: translateX(70%) rotate(12deg);
    }
}

.gallery-item:focus-visible {
    outline: none;
    border-color: rgb(var(--accentColor));

    box-shadow:
        0 0 0 3px rgb(var(--accentColor) / 0.35),
        0 10px 24px rgb(0 0 0 / 0.20),
        inset 0 1px 0 rgb(255 255 255 / 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .gallery-item::after {
        transition: none;
        opacity: 0;
        transform: none;
    }
}

/* ===========================================================
   GALLERY — CTA button
   =========================================================== */

.btn.btn-gallery {
    height: 52px;
    padding-inline: var(--s5);
    font-size: 1rem;
}

/* ===========================================================
   GALLERY — Breakpoints
   =========================================================== */

@media (min-width: 377px) {
    .btn.btn-gallery {
        font-size: 1.2rem;
    }
}

@media (min-width: 768px) {
    .gallery-hero {
        padding: var(--s6) 0 var(--s8);
    }

    .gallery-grid {
        gap: var(--s2);
    }

    .btn.btn-gallery {
        height: 60px;
        padding-inline: var(--s7);
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .gallery-hero {
        padding: var(--s7) 0 var(--s9);
    }

    .gallery-grid {
        gap: var(--s4);
    }
}