.page-works {
    padding-top: clamp(3.5rem, calc(35px + (60 - 35) * var(--vw-desktop-range)), 6rem);
    padding-bottom: clamp(7rem, calc(70px + (125 - 70) * var(--vw-desktop-range)), 12.5rem);
}

.page-works .cats {
    display: flex;
    gap: 2.1rem;
    width: 100%;
}

.page-works .cat {
    font-weight: 700;
    font-size: clamp(1.8rem, calc(18px + (24 - 18) * var(--vw-desktop-range)), 2.4rem);
    line-height: clamp(1.8rem, calc(18px + (30 - 18) * var(--vw-desktop-range)), 3rem);
    letter-spacing: 0px;
    text-align: center;
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #252621;
    background: var(--white);
    width: 100%;
    transition: .3s;
    cursor: pointer;
    border: none;
}

.page-works .cat:hover {
    background: var(--blue);
    color: var(--white);
}

.page-works .cat.active {
    background: var(--blue);
    color: var(--white);
}

.page-works .masonry {
    max-width: none;
    margin-top: clamp(3.5rem, calc(35px + (60 - 35) * var(--vw-desktop-range)), 6rem);
}

.page-works .masonry .item01 {
    grid-column: auto;
    grid-row: auto;
}

.page-works .masonry .item04 {
    grid-column: auto;
    grid-row: auto;
}

.page-works .masonry .item:first-of-type {
    grid-column: span 2;
    grid-row: span 2;
}

.page-works .masonry .item:nth-of-type(10) {
    grid-column: 3 / span 2;
    grid-row: 3 / span 2;
}

.page-works .works-btn {
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--black);
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: clamp(0.1rem, calc(1px + (2 - 1) * var(--vw-desktop-range)), 0.2rem) solid var(--black);
    background: var(--white);
    transition: .3s;
    height: var(--btn-height);
    width: var(--btn-width);
    max-width: 100%;
    font-size: var(--fs-body-md);
    letter-spacing: 0;
    padding-inline: clamp(1.2rem, calc(12px + (20 - 12) * var(--vw-desktop-range)), 2rem);
    position: relative;
    margin: var(--space-40-80) auto 0;
    font-weight: 700;
    cursor: pointer;
}

.page-works .works-btn:hover {
    background: var(--lightblue);
    border-color: var(--lightblue);
    color: var(--black);
}

.page-works .works-btn img {
    position: absolute;
    right: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
}

.post-type-archive-works h3.has-to-move {
    font-weight: 700;
    font-size: clamp(2.4rem, calc(24px + (36 - 24) * var(--vw-desktop-range)), 3.6rem);
    line-height: clamp(2.6rem, calc(26px + (50 - 26) * var(--vw-desktop-range)), 5rem);
    letter-spacing: 0px;
    text-align: center;
    margin-top: 2rem;
}

.breadcumb-ctn {
    background: var(--lightgray);
}

.breadcumb-ctn .breadcrumb {
    background: var(--lightgray);
}

.page-works.single-works {
    padding-top: clamp(5rem, calc(50px + (100 - 50) * var(--vw-desktop-range)), 10rem);
    padding-bottom: clamp(10rem, calc(100px + (200 - 100) * var(--vw-desktop-range)), 20rem);
    background: var(--white);
}

.single-works .container {
    max-width: 148rem;
}

.single-works .top {
    display: flex;
    gap: clamp(6.5rem, calc(65px + (100 - 65) * var(--vw-desktop-range)), 10rem);
}

.single-works .top .left,
.single-works .top .right {
    width: 100%;
}

.single-works .top .left {
    flex: 1 1 auto;
    min-width: 0;
}

.single-works .top .right img {
    width: 100%;
    /* height: auto; */
}

.single-works .top .right {
    /* position: relative;
    flex: 0 0 clamp(40rem, 50vw, 73rem); 
    width: clamp(40rem, 50vw, 73rem);
    max-width: 100%;
    /* height: 57.5rem; */
    /*overflow: hidden;   */
    position: relative;
    flex: 0 0 clamp(28rem, 35vw, 51.1rem);
    width: clamp(28rem, 35vw, 51.1rem);
    max-width: 100%;
    overflow: hidden;
    margin-right: 7rem;
}

.single-works .up {
    display: flex;
    gap: clamp(2rem, calc(40px + (40 - 20) * var(--vw-desktop-range)), 4rem);
    align-items: center;
}

.single-works .up .cat {
    background: var(--blue);
    color: var(--white);
    font-weight: 700;
    font-size: clamp(1.6rem, calc(18 * 100vw / 370), 2rem);
    letter-spacing: 0.01em;
    line-height: clamp(2rem, calc(40px + (40 - 20) * var(--vw-desktop-range)), 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem clamp(1rem, calc(10 * 100vw / 370), 3rem);
    width: auto;
    height: auto;
}

.single-works .up .time {
    font-weight: 400;
    line-height: clamp(2.6rem, calc(26px + (50 - 26) * var(--vw-desktop-range)), 5rem);
    font-size: clamp(1.65rem, calc((15px + (24 - 15) * var(--vw-desktop-range)) * 1.1), 2.64rem);
    letter-spacing: 0.01em;
}

.single-works h3 {
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    font-weight: 500;
    line-height: clamp(2.6rem, calc(26px + (50 - 26) * var(--vw-desktop-range)), 5rem);
    font-size: clamp(1.65rem, calc((15px + (24 - 15) * var(--vw-desktop-range)) * 1.1), 2.64rem);
    letter-spacing: 0px;
    padding-left: clamp(2rem, calc(40px + (40 - 20) * var(--vw-desktop-range)), 4rem);
    position: relative;
    text-align: left;
}

.single-works h3::before {
    content: "";
    inset: 1.5rem auto auto 0;
    background: var(--blue);
    width: 2rem;
    height: 0.8rem;
    position: absolute;
}

.single-works .place {
    margin-bottom: clamp(2rem, calc(40px + (40 - 20) * var(--vw-desktop-range)), 4rem);
    margin-left: clamp(2rem, calc(40px + (40 - 20) * var(--vw-desktop-range)), 4rem);
    border: 1px solid #000;
    color: var(--black);
    padding: 1rem 3rem;
    font-weight: 500;
    line-height: clamp(2.6rem, calc(26px + (50 - 26) * var(--vw-desktop-range)), 5rem);
    font-size: clamp(1.65rem, calc((15px + (24 - 15) * var(--vw-desktop-range)) * 1.1), 2.64rem);
    letter-spacing: 0px;
    text-align: center;
    display: inline-block;
}

.single-works .content p {
    text-align: left;
}

.single-works .right {
    position: relative;
}

.single-works .right::before {
    /* content: "BEFORE";
    background: #868282;
    color: var(--white);
    border-bottom-right-radius: 1rem;
    font-weight: 700;
    line-height: clamp(2.6rem, calc(26px + (50 - 26) * var(--vw-desktop-range)), 5rem);
    font-size: clamp(1.65rem,calc((15px + (24 - 15) * var(--vw-desktop-range)) * 1.1),2.64rem);
    letter-spacing: 0.01em;
    text-align: center;
    inset: 0 auto auto 0;
    position: absolute;
    padding: 1rem clamp(6.5rem, calc(65px + (100 - 65) * var(--vw-desktop-range)), 10rem);
    z-index: 15; */
    content: "BEFORE";
    background: #868282;
    color: var(--white);
    border-bottom-right-radius: 0.7rem;
    /* 1rem × 0.7 */
    font-weight: 700;
    line-height: clamp(1.82rem,
            calc(18.2px + (35 - 18.2) * var(--vw-desktop-range)),
            3.5rem);
    font-size: clamp(1.155rem,
            calc((10.5px + (16.8 - 10.5) * var(--vw-desktop-range)) * 1.1),
            1.848rem);
    letter-spacing: 0.007em;
    /* 0.01 × 0.7 */
    text-align: center;
    inset: 0 auto auto 0;
    position: absolute;
    padding: 0.7rem clamp(4.55rem,
            calc(45.5px + (70 - 45.5) * var(--vw-desktop-range)),
            7rem);
    z-index: 15;
}

.single-works .single-swiper .single-swiper__main--before .swiper-slide {
    position: relative;
}


.single-works .single-swiper__main--before {
    position: relative;
    margin-bottom: 2rem;
    max-width: 144rem;
}

.single-works .single-swiper__main--before .swiper-slide {
    text-align: center;
    background-color: var(--white);
}

.single-works .single-swiper__thumbs--before .swiper-slide {
    background-color: var(--white);
    max-height: clamp(16rem, calc(220px + (220 - 160) * var(--vw-desktop-range)), 22rem);
}

.single-works .single-swiper__main--before img {
    /* width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 57.5rem;
    height: calc(575 * 100vw / 1920);
    max-width: 73rem; */
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 40.25rem;
    height: calc(402.5 * 100vw / 1920);
    max-width: 51.1rem;
}

.single-works .single-swiper--before {
    margin: 0 auto;
    height: 100%;
}

.single-works .single-swiper__main--before {
    position: relative;
    width: 100%;
    height: 100%;
}

.single-works .single-swiper__main--before .swiper-wrapper {
    width: 100%;
    height: 100%;
}

.single-works .single-swiper__main--before .swiper-slide {
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: var(--white);
}


/* BOTTOM */
.single-works .bottom {
    margin: clamp(6.5rem, calc(65px + (100 - 65) * var(--vw-desktop-range)), 10rem) auto 0;
    max-width: 160.8rem;
    width: 100%;
    padding: 0 2rem;
}

.single-works .single-swiper .single-swiper__main .swiper-slide {
    position: relative;
    opacity: 0 !important;
}

.single-works .single-swiper .single-swiper__main .swiper-slide.swiper-slide-active {
    opacity: 1 !important;
}

.single-works .single-swiper .single-swiper__main .swiper-slide .relative::before {
    content: "AFTER";
    background: var(--blue);
    color: var(--white);
    border-bottom-right-radius: 1rem;
    font-weight: 700;
    line-height: clamp(2.6rem, calc(26px + (50 - 26) * var(--vw-desktop-range)), 5rem);
    font-size: clamp(1.65rem, calc((15px + (24 - 15) * var(--vw-desktop-range)) * 1.1), 2.64rem);

    letter-spacing: 0.01em;
    text-align: center;
    inset: 0 auto auto 0;
    position: absolute;
    padding: 1rem clamp(6.5rem, calc(65px + (100 - 65) * var(--vw-desktop-range)), 10rem);
}

.single-works .single-swiper__button--prev,
.single-works .single-swiper__button--next,
.single-works .single-swiper__button--before--prev,
.single-works .single-swiper__button--before--next {
    height: clamp(4rem, calc(80px + (80 - 40) * var(--vw-desktop-range)), 8rem);
    width: clamp(2rem, calc(40px + (40 - 20) * var(--vw-desktop-range)), 4rem);
}



.single-works .single-swiper {
    /* max-width: 900px; */
    margin: 0 auto;
}

.single-works .single-swiper__main {
    position: relative;
    margin-bottom: 2rem;
    max-width: 144rem;
}

.single-works .single-swiper__main .swiper-slide {
    text-align: center;
    background-color: var(--white);
    position: relative;
    display: flex;
    justify-content: center;
}

.single-works .single-swiper__thumbs .swiper-slide {
    background-color: var(--white);
    max-height: clamp(16rem, calc(220px + (220 - 160) * var(--vw-desktop-range)), 22rem);
}

.single-works .single-swiper__main figure {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    max-height: 72.6rem;
}

.single-works .single-swiper__main img {
    /* width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 92rem; */
    display: block;
    height: auto;
    width: auto;
    max-height: 72.6rem;
    max-width: 115.2rem;
    object-fit: contain;
    aspect-ratio: auto;
}

/* Boutons */
.single-works .single-swiper__thumbs {
    margin: 0 clamp(4rem, calc(60px + (60 - 40) * var(--vw-desktop-range)), 6rem);
    z-index: 1850;
    position: relative;
    /* max-width: 110rem; */
    margin: auto;
    max-width: 90rem;
}

.single-works .single-swiper__button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(0, 0, 0, .4);
    border: none;
    color: #fff;
    width: clamp(2.4rem, calc(36px + (36 - 24) * var(--vw-desktop-range)), 3.6rem);
    height: clamp(2.4rem, calc(36px + (36 - 24) * var(--vw-desktop-range)), 3.6rem);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

.single-works .single-swiper__button--prev,
.single-works .single-swiper__button--before--prev {
    left: 1rem;
}

.single-works .single-swiper__button--next,
.single-works .single-swiper__button--before--next {
    right: 1rem;
}

.single-works .single-swiper__button--before--prev,
.single-works .single-swiper__button--before--next {
    width: clamp(1.68rem,
            calc(25.2px + (25.2 - 16.8) * var(--vw-desktop-range)),
            2.52rem);
    height: clamp(1.68rem,
            calc(25.2px + (25.2 - 16.8) * var(--vw-desktop-range)),
            2.52rem);
}

/* Thumbs */
.single-works .single-swiper__thumbs .swiper-slide {
    cursor: pointer;
    opacity: 0.5;
}

.single-works .single-swiper__thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

.single-works .single-swiper__thumbs img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 1/1;
}

.single-works .single-swiper__thumbs .relative-thumb {
    /* width: 80%; */
}

.single-works .swiper-wrapper__thumbs {
    /* justify-content: center; */
    max-width: 110rem;
    margin: auto;
}

.single-works .single-swiper__button--next,
.single-works .single-swiper__button--before--next {
    right: 0;
}

.single-works .single-swiper__button--prev,
.single-works .single-swiper__button--before--prev {
    /* left: 0; */
    left: -8px;
}

.single-works .single-swiper__button--before--prev {
    left: 0;
}

.single-works .swipe-btn-container {
    position: relative;
    max-width: 160.8rem;
    width: 100%;
    padding: 0 2rem;
    height: clamp(16rem, calc(220px + (220 - 160) * var(--vw-desktop-range)), 22rem);
    margin-top: -20rem;
    margin-inline: auto;
    max-width: 100rem;
    /* max-width: 119.8rem; */
    /* z-index: 1850;
    position: relative; */
}

.single-works .swipe-btn-container:has(.single-swiper__button--before--prev) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    margin-top: 0;
    height: auto;
}

.single-works .sep {
    background: var(--black);
    height: 1px;
    max-width: 144rem;
    width: 100%;
    margin: clamp(5rem, calc(100px + (100 - 50) * var(--vw-desktop-range)), 10rem) auto clamp(2.5rem, calc(50px + (50 - 25) * var(--vw-desktop-range)), 5rem);
}

.single-works .single-works-pagination {
    max-width: 144rem;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    gap: clamp(6.5rem, calc(65px + (100 - 65) * var(--vw-desktop-range)), 10rem);
}

.single-works .single-works-pagination .back-to a {
    text-decoration: underline;
}

.masonry .item a strong.masonry-cat {
    color: #fff;
    background: var(--blue);
    padding: 1rem;
    font-size: clamp(1.5rem, calc(15px + (22 - 15) * var(--vw-desktop-range)), 2rem);
}

.masonry .item a strong {
    font-size: clamp(1.5rem, calc(15px + (22 - 15) * var(--vw-desktop-range)), 2rem);
    line-height: 1.5;
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 1025px) {
    .single-works .single-swiper__main--before img {
        height: auto;
        max-width: none;
    }

    .single-works .swipe-btn-container {
        display: none;
    }

    .single-works .top {
        flex-direction: column;
    }

    .page-works .masonry .item:first-of-type {
        grid-column: span 2;
        grid-row: 1;
    }

    .page-works .masonry .item:nth-of-type(10) {
        grid-column: 1 / span 2;
        grid-row: 4;
    }

    .masonry .item:not(:nth-of-type(1), :nth-of-type(10)) span {
        font-size: 1.5rem;
    }

    .post-type-archive-works h3.has-to-move {
        padding: 0 2rem;
        margin-top: 1rem;
    }

    .page-works .cats {
        gap: 1rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-bottom: 1.5rem;
    }

    .page-works .cats a {
        padding: 0.5rem;
        height: 5.5rem;
        font-size: 1.6rem;
    }

    .page-works .cats a {
        grid-column: span 2;
    }

    .page-works .masonry {
        margin-top: 1.5rem;
    }

    .single-works .top .right {
        height: calc(240 * 100vw / 390);
    }

    .single-works h3::before {
        inset: 1rem auto auto 0;
    }

    .single-works .top {
        gap: clamp(2.5rem, calc(25 * 100vw / 390), 10rem);
    }

    .single-works .bottom {
        margin: clamp(2.5rem, calc(25 * 100vw / 390), 10rem) auto 0;
    }

    .single-works .top .right {
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
    }

    .single-works .single-swiper .single-swiper__main .swiper-slide {
        height: auto;
    }

    .single-works .single-works-pagination {
        padding-inline: 2rem;
        gap: 3rem;
    }

    .single-works .single-swiper__thumbs .swiper-wrapper {
        align-items: center;
    }

    .single-works .single-swiper__thumbs .swiper-slide {
        height: auto;
    }

    /* Le slide a une hauteur fixe (cadre) */
    .single-works .single-swiper__main .swiper-slide {
        height: min(60vh, 70vw);
        /* ajuste: 55vh/60vh selon ton design */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Le figure prend toute la hauteur du cadre */
    .single-works .single-swiper__main figure {
        width: fit-content;
        height: auto;
        margin: 0 auto;
        display: block;
        /* pas inline-block ici */
        position: relative;
    }

    /* L'image remplit le cadre sans crop (entière visible) */
    .single-works .single-swiper__main img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        max-width: none;
        max-height: none;
    }

    .single-works .single-swiper .single-swiper__main .swiper-slide .relative::before {
        font-size: clamp(1rem, 3.5vw, 1.3rem);
        line-height: 1.4;
        padding: 0.6rem clamp(1.6rem, 5vw, 2.4rem);
    }

    /* .single-works .single-swiper__main {
        max-height: 60vh;
    }
    .single-works .single-swiper__main img {
        max-height: 60vh;
        width: auto;
        height: auto;
        object-fit: contain;
  } */
}

@media screen and (max-width: 390px) {
    .single-works .single-works-pagination {
        gap: 2rem;
    }
}