:root {
    --bm-accent: #013e75;
    --bm-ink: #0e0f11;
    --bm-muted: #333a42;

    --bm-maxw: 1200px;
    --bm-pad-mobile: 24px;
    --bm-pad-desktop: 120px;

    --bm-gap: clamp(10px, 1.4vw, 14px);
    --bm-radius: 14px;

    /* Mosaic row height (aspect ratio preserved) */
    --bm-row-h: clamp(150px, 16vw, 230px);
}

/* =========================================================
   PAGE WRAPPER
========================================================= */

.projets-page {
    background: #ffffff;
    color: var(--bm-ink);
    padding-block: clamp(20px, 4vw, 40px);
}

/* Space between project sections */
.projets-section+.projets-section {
    margin-top: clamp(46px, 7vw, 90px);
}

/* Keep everything aligned */
.projets-section {
    max-width: var(--bm-maxw);
    margin-inline: auto;
    padding-inline: clamp(var(--bm-pad-mobile), 4vw, var(--bm-pad-desktop));
}

/*INTRO*/
/* Section wrapper and inner container*/
.projets-intro {
    position: relative;
    padding-block: clamp(24px, 6vw, 35px);
    padding-bottom: 0;
}

.projets-intro-inner {
    width: 100%;
}

/* BLUE BANNER */
.projets-intro-badge {
    position: relative;
    display: inline-block;
    background: var(--bm-accent);
    color: #fff;
    padding-block: 12px;
}

.projets-intro-badge-text {
    display: inline-block;
    padding-left: 0;
    padding-right: 10px;
    font-weight: 600;
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.4;
    letter-spacing: .02em;
}

/* Paragraph block */
.projets-intro-text {
    margin-top: clamp(16px, 3vw, 24px);
    padding-left: 0;
    padding-right: 0;
    margin-inline: auto;
    color: var(--bm-muted);
    font-size: clamp(14px, 1.5vw, 17px);
    line-height: 1.7;
}

.projets-intro-badge.reveal {
    opacity: 0;
    transform: translateX(-28px);
    transition: transform 520ms cubic-bezier(.2, .9, .2, 1), opacity 520ms ease;
    will-change: transform, opacity;
}

/* When revealed */
.projets-intro-badge.reveal.is-in {
    opacity: 1;
    transform: translateX(0);
}

/* Keep the paragraph using the original Y reveal */
.projets-intro-text.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .45s ease, transform .45s ease;
}

.projets-intro-text.reveal:not(.is-in) {
    opacity: 0;
    transform: translateY(8px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .projets-intro-badge.reveal,
    .projets-intro-badge.reveal.is-in {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* =========================================
   CLEAN CREATIVE 3-COLUMN GALLERY
========================================= */

.projets-gallery {
    margin-bottom: clamp(30px, 5vw, 60px);

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(30px, 4vw, 60px);

    align-items: start;
}

.projets-thumb.is-landscape {
    grid-column: span 2;
}

/* Remove button styling completely */
.projets-thumb {
    appearance: none;
    border: none;
    outline: none;
    background: none;
    padding: 0;
    margin: 0;

    display: flex;
    justify-content: center;

    cursor: zoom-in;
}

/* Remove weird frame on click */
.projets-thumb:focus {
    outline: none;
}

/* Optional accessible focus style */
.projets-thumb:focus-visible {
    outline: 2px solid rgba(1, 62, 117, 0.6);
    outline-offset: 4px;
    border-radius: var(--bm-radius);
}

/* Image styling */
.projets-img {
    width: 100%;
    /* prevents oversized look */
    height: auto;
    display: block;

    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

/* Tablet */
@media (max-width: 1100px) {
    .projets-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 680px) {
    .projets-gallery {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .projets-thumb.is-landscape {
        grid-column: span 1;
    }
}




/* =========================================================
   REVEAL
========================================================= */

.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.reveal:not(.is-in) {
    opacity: 0;
    transform: translateY(8px);
}

/* Badge slide-in (left → right) */
.projets-page .projets-intro-badge.reveal {
    opacity: 0;
    transform: translateX(-28px);
    transition: transform 520ms cubic-bezier(.2, .9, .2, 1), opacity 520ms ease;
    will-change: transform, opacity;
}

.projets-page .projets-intro-badge.reveal.is-in {
    opacity: 1;
    transform: translateX(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .reveal,
    .projets-page .projets-intro-badge.reveal {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

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

.projets-lightbox[aria-hidden="true"] {
    display: none;
}

.projets-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;

    height: 100vh;
    height: 100svh;
    height: 100dvh;

    overflow: hidden;
    overscroll-behavior: contain;
}

/* -----------------------------
   Backdrop
----------------------------- */

.projets-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 16, 0.9);
}

/* -----------------------------
   Shell
----------------------------- */

.projets-shell {
    position: absolute;
    inset: 0;

    padding: 40px 20px;

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

/* -----------------------------
   Stage (Image container)
----------------------------- */

.projets-stage {
    width: 100%;
    height: 100%;

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

    max-width: 95vw;
    margin: 0 auto;
}

/* -----------------------------
   Image
----------------------------- */

.projets-stage img,
.projets-lightbox-img {
    max-width: 95vw;
    max-height: 85dvh;
    /* leaves space for footer */

    width: auto;
    height: auto;
    object-fit: contain;

    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
}

/* -----------------------------
   Footer
----------------------------- */

.projets-footer {
    position: absolute;
    bottom: 10px;
    /* ← You requested 5–10px */
    left: 0;
    right: 0;

    display: flex;
    justify-content: center;
    gap: 18px;

    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    letter-spacing: 0.02em;
    text-align: center;
}

.projets-footer span:first-child {
    font-weight: 600;
}

.projets-footer span:last-child {
    opacity: 0.85;
}

/* -----------------------------
   Controls
----------------------------- */

.projets-close,
.projets-nav {
    position: absolute;

    width: 54px;
    height: 54px;
    border-radius: 999px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(12, 16, 20, 0.45);
    color: #fff;

    cursor: pointer;
    font-size: 30px;

    display: grid;
    place-items: center;

    backdrop-filter: blur(12px);
    transition: background 0.2s ease, transform 0.2s ease;
}

.projets-close:hover {
    background: rgba(12, 16, 20, 0.65);
    transform: scale(1.05);
}

.projets-close {
    top: 30px;
    right: 30px;
}

.projets-prev {
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
}

.projets-next {
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
}

/* -----------------------------
   Mobile Adjustments
----------------------------- */

@media (max-width: 768px) {

    .projets-shell {
        padding: 30px 16px;
    }

    .projets-stage img {
        max-height: 80dvh;
        /* slightly smaller for safety */
    }

    .projets-nav {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }

    .projets-prev {
        left: 12px;
    }

    .projets-next {
        right: 12px;
    }

    .projets-close {
        top: 16px;
        right: 16px;
    }

    .projets-footer {
        bottom: 8px;
    }
}