/* =====================================================
           GALERIE
        ===================================================== */

        .gallery-page {
            width: 100%;
            height: 100vh;

            padding:
                105px 4vw
                110px;

            overflow-y: auto;
            overflow-x: hidden;

            background:
                linear-gradient(
                    rgba(1, 6, 15, 0.80),
                    rgba(1, 6, 15, 0.94)
                ),
                var(--bg-image, url("/assets/images/fond.png"));

            background-size: cover;
            background-position: center;
            background-attachment: fixed;

            scrollbar-width: thin;
            scrollbar-color:
                var(--blue)
                rgba(2, 10, 22, 0.8);
        }

        .gallery-page::-webkit-scrollbar {
            width: 7px;
        }

        .gallery-page::-webkit-scrollbar-track {
            background:
                rgba(2, 10, 22, 0.75);
        }

        .gallery-page::-webkit-scrollbar-thumb {
            background: var(--blue);
            border-radius: 10px;
        }


        /* =====================================================
           TITRE
        ===================================================== */

        .gallery-header {
            text-align: center;

            margin:
                0 auto 32px;

            max-width: 900px;
        }

        .gallery-label {
            display: block;

            margin-bottom: 8px;

            font-family: "Rajdhani", sans-serif;

            color: var(--cyan);

            font-size: 13px;
            font-weight: 700;

            letter-spacing: 5px;

            text-shadow:
                0 0 10px rgba(var(--blue-light-rgb), 0.7);
        }

        .gallery-header h1 {
            margin: 0;

            font-family: "Kalam", cursive;

            color: #ffffff;

            font-size:
                clamp(48px, 6vw, 78px);

            line-height: 1;

            text-shadow:
                0 0 15px rgba(var(--blue-rgb), 0.8),
                0 0 35px rgba(var(--blue-rgb), 0.45);
        }

        .gallery-header p {
            max-width: 760px;

            margin:
                12px auto 0;

            font-family: "Rajdhani", sans-serif;

            color:
                rgba(220, 236, 255, 0.72);

            font-size: 15px;

            letter-spacing: 1.5px;

            line-height: 1.4;
        }


        /* =====================================================
           GRILLE
        ===================================================== */

        .gallery-grid {
            width:
                min(1450px, 100%);

            margin:
                0 auto;

            display: grid;

            grid-template-columns:
                repeat(3, minmax(0, 1fr));

            gap: 22px;

            padding-bottom: 20px;
        }


        /* =====================================================
           CARTE
        ===================================================== */

        .gallery-card {
            position: relative;

            overflow: hidden;

            border-radius: 9px;

            border:
                1px solid
                rgba(var(--cyan-rgb), 0.28);

            background:
                rgba(2, 10, 22, 0.94);

            box-shadow:
                0 0 12px
                rgba(var(--blue-rgb), 0.13),

                inset 0 0 25px
                rgba(var(--blue-rgb), 0.04);

            cursor: pointer;

            transition:
                transform 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
        }

        .gallery-card:hover {
    transform:
        translateY(-6px)
        scale(1.04);

    z-index: 20;

    border-color:
        rgba(var(--cyan-rgb), 0.90);

    box-shadow:
        0 0 22px
        rgba(var(--blue-rgb), 0.50),

        0 0 50px
        rgba(var(--blue-rgb), 0.22);
}


        /* =====================================================
           IMAGE
        ===================================================== */

        .gallery-media {
            width: 100%;

            aspect-ratio: 16 / 9;

            display: flex;
            align-items: center;
            justify-content: center;

            overflow: hidden;

            background:
                #02050a;
        }

        .gallery-image {
            width: 100%;
            height: 100%;

            display: block;

            object-fit: contain;

            background:
                #02050a;

            transition:
                transform 0.4s ease,
                filter 0.4s ease;
        }

        .gallery-card:hover .gallery-image {
            transform:
                scale(1.10);

            filter:
                brightness(1.08)
                saturate(1.08);
        }


        /* =====================================================
           INFOS
        ===================================================== */

        .gallery-info {
            min-height: 72px;

            padding:
                12px 16px 14px;
        }

        .gallery-category {
            display: block;

            margin-bottom: 3px;

            font-family: "Rajdhani", sans-serif;

            color: var(--cyan);

            font-size: 9px;
            font-weight: 700;

            letter-spacing: 3px;
        }

        .gallery-title {
            display: block;

            font-family: "Kalam", cursive;

            color: #ffffff;

            font-size: 21px;

            line-height: 1.1;

            text-shadow:
                0 0 10px
                rgba(var(--blue-rgb), 0.45);
        }


        /* =====================================================
           LIGHTBOX
        ===================================================== */

        .lightbox {
            position: fixed;

            inset: 0;

            z-index: 3000;

            display: none;

            align-items: center;
            justify-content: center;

            padding: 30px;

            background:
                rgba(0, 0, 0, 0.93);

            backdrop-filter:
                blur(12px);
        }

        .lightbox.active {
            display: flex;
        }

        .lightbox img {
            display: block;

            max-width: 94vw;
            max-height: 88vh;

            width: auto;
            height: auto;

            object-fit: contain;

            border-radius: 8px;

            border:
                1px solid
                rgba(var(--cyan-rgb), 0.50);

            box-shadow:
                0 0 25px
                rgba(var(--blue-rgb), 0.45),

                0 0 70px
                rgba(var(--blue-rgb), 0.20);
        }

        .lightbox-close {
            position: absolute;

            top: 22px;
            right: 28px;

            width: 44px;
            height: 44px;

            display: flex;
            align-items: center;
            justify-content: center;

            border:
                1px solid
                rgba(var(--cyan-rgb), 0.55);

            border-radius: 50%;

            background:
                rgba(2, 10, 22, 0.90);

            color: #ffffff;

            font-size: 22px;

            cursor: pointer;

            box-shadow:
                0 0 15px
                rgba(var(--blue-rgb), 0.25);

            transition:
                0.25s ease;
        }

        .lightbox-close:hover {
            color: var(--cyan);

            border-color:
                var(--cyan);

            box-shadow:
                0 0 25px
                rgba(var(--blue-light-rgb), 0.55);
        }


        /* =====================================================
           RESPONSIVE
        ===================================================== */

        @media (max-width: 1050px) {

            .gallery-grid {
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
            }
        }


        @media (max-width: 700px) {

            .gallery-page {
                padding:
                    95px 15px
                    95px;
            }

            .gallery-grid {
                grid-template-columns:
                    1fr;

                gap: 18px;
            }

            .gallery-header {
                margin-bottom: 25px;
            }

            .gallery-header p {
                font-size: 13px;
            }

            .gallery-title {
                font-size: 19px;
            }
        }