/* =============================================================
   Fade Gallery — Styles principaux
   Design : minimaliste, sobre, typographie neutre
   ============================================================= */

/* ── Variables globales ── */
:root {
    --fg-color-bg:      #ffffff;
    --fg-color-overlay: rgba(0, 0, 0, .82);
    --fg-color-caption: #555;
    --fg-color-ctrl:    #fff;
    --fg-radius:        0px;          /* 0 pour un look sobre/flat */
    --fg-easing:        cubic-bezier(.25, .46, .45, .94);

    /* overridables par instance via style="" */
    --fg-cols:      3;
    --fg-gap:       16px;
    --fg-duration:  600ms;
}

/* ── Conteneur galerie ── */
.fg-gallery {
    width: 100%;
    box-sizing: border-box;
}

/* ────────────────────────────────────────────────────────────
   LAYOUT : GRILLE
   ──────────────────────────────────────────────────────────── */
.fg-layout-grid {
    display: grid;
    grid-template-columns: repeat(var(--fg-cols), 1fr);
    gap: var(--fg-gap);
}

.fg-layout-grid .fg-item {
    break-inside: avoid;
}

/* ────────────────────────────────────────────────────────────
   LAYOUT : MASONRY  (natif CSS columns)
   ──────────────────────────────────────────────────────────── */
.fg-layout-masonry {
    column-count: var(--fg-cols);
    column-gap: var(--fg-gap);
}

.fg-layout-masonry .fg-item {
    break-inside: avoid;
    margin-bottom: var(--fg-gap);
    display: block;
}

/* ────────────────────────────────────────────────────────────
   LAYOUT : PINTEREST  (2 colonnes fixes + alternance heights)
   ──────────────────────────────────────────────────────────── */
.fg-layout-pinterest {
    display: grid;
    grid-template-columns: repeat(var(--fg-cols), 1fr);
    gap: var(--fg-gap);
    align-items: start;
}

/* Alternance de ratios via nth-child pour l'effet Pinterest */
.fg-layout-pinterest .fg-item:nth-child(3n+1) .fg-img-wrap { padding-bottom: 125%; }
.fg-layout-pinterest .fg-item:nth-child(3n+2) .fg-img-wrap { padding-bottom: 75%;  }
.fg-layout-pinterest .fg-item:nth-child(3n)   .fg-img-wrap { padding-bottom: 100%; }

.fg-layout-pinterest .fg-img-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.fg-layout-pinterest .fg-img {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* ────────────────────────────────────────────────────────────
   ITEM commun
   ──────────────────────────────────────────────────────────── */
.fg-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--fg-radius);
}

.fg-link {
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.fg-img-wrap {
    display: block;
    width: 100%;
    overflow: hidden;
}

/* Masonry & Grid : image en display block */
.fg-layout-masonry .fg-img-wrap,
.fg-layout-grid .fg-img-wrap {
    position: relative;
}

.fg-img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .55s var(--fg-easing);
    will-change: transform;
}

/* Zoom léger au hover */
.fg-item:hover .fg-img {
    transform: scale(1.04);
}

/* ── Légende ── */
.fg-caption {
    margin: 6px 0 0;
    font-size: .8rem;
    color: var(--fg-color-caption);
    line-height: 1.4;
    font-family: inherit;
}

/* ────────────────────────────────────────────────────────────
   ANIMATIONS D'ENTRÉE AU SCROLL
   ──────────────────────────────────────────────────────────── */

/* -- fade : fondu simple -- */
.fg-anim-fade .fg-item.fg-hidden {
    opacity: 0;
}
.fg-anim-fade .fg-item.fg-visible {
    opacity: 1;
    transition: opacity var(--fg-duration) var(--fg-easing);
}

/* -- fadeUp : fondu + translation verticale -- */
.fg-anim-fadeUp .fg-item.fg-hidden {
    opacity: 0;
    transform: translateY(28px);
}
.fg-anim-fadeUp .fg-item.fg-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity  var(--fg-duration) var(--fg-easing),
        transform var(--fg-duration) var(--fg-easing);
}

/* -- fadeScale : fondu + légère mise à l'échelle -- */
.fg-anim-fadeScale .fg-item.fg-hidden {
    opacity: 0;
    transform: scale(.94);
}
.fg-anim-fadeScale .fg-item.fg-visible {
    opacity: 1;
    transform: scale(1);
    transition:
        opacity  var(--fg-duration) var(--fg-easing),
        transform var(--fg-duration) var(--fg-easing);
}

/* Délai en cascade pour les éléments d'une même rangée */
.fg-item:nth-child(2) { transition-delay: 80ms;  }
.fg-item:nth-child(3) { transition-delay: 160ms; }
.fg-item:nth-child(4) { transition-delay: 240ms; }
.fg-item:nth-child(5) { transition-delay: 320ms; }
.fg-item:nth-child(6) { transition-delay: 400ms; }

/* ────────────────────────────────────────────────────────────
   LIGHTBOX
   ──────────────────────────────────────────────────────────── */
.fg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--fg-color-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.fg-lightbox:not([hidden]) {
    opacity: 1;
}

.fg-lightbox[hidden] {
    display: none;
}

.fg-lb-inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fg-lb-img {
    display: block;
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--fg-radius);
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.fg-lb-caption {
    margin-top: 12px;
    color: rgba(255,255,255,.75);
    font-size: .85rem;
    text-align: center;
}

/* Boutons lightbox */
.fg-lb-close,
.fg-lb-prev,
.fg-lb-next {
    position: fixed;
    background: transparent;
    border: none;
    color: var(--fg-color-ctrl);
    font-size: 2rem;
    cursor: pointer;
    padding: 12px;
    line-height: 1;
    opacity: .7;
    transition: opacity .2s;
    z-index: 100000;
}

.fg-lb-close:hover,
.fg-lb-prev:hover,
.fg-lb-next:hover { opacity: 1; }

.fg-lb-close { top: 16px; right: 20px; font-size: 1.5rem; }
.fg-lb-prev  { left: 16px;  top: 50%; transform: translateY(-50%); font-size: 3rem; }
.fg-lb-next  { right: 16px; top: 50%; transform: translateY(-50%); font-size: 3rem; }

/* ────────────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .fg-layout-grid,
    .fg-layout-pinterest {
        grid-template-columns: repeat(min(var(--fg-cols), 2), 1fr);
    }
    .fg-layout-masonry {
        column-count: min(var(--fg-cols), 2);
    }
}

@media (max-width: 540px) {
    .fg-layout-grid,
    .fg-layout-pinterest {
        grid-template-columns: 1fr;
    }
    .fg-layout-masonry {
        column-count: 1;
    }
    .fg-lb-prev { left: 4px; }
    .fg-lb-next { right: 4px; }
}

/* ── Respect des préférences système ── */
@media (prefers-reduced-motion: reduce) {
    .fg-item,
    .fg-img,
    .fg-lightbox { transition: none !important; }
    .fg-item:hover .fg-img { transform: none !important; }
}