/* ============================================================
   HOME HERO
============================================================ */

.home-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #0b0d0b;
}


.home-hero-carousel {
    position: relative;
}


.home-hero .carousel-inner,
.home-hero .carousel-item {
    min-height: 620px;
}


.home-hero-slide {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* ============================================================
   OVERLAYS
============================================================ */

.home-hero-slide::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background:
        linear-gradient(
            90deg,
            rgba(5, 7, 5, 0.80) 0%,
            rgba(5, 7, 5, 0.67) 35%,
            rgba(5, 7, 5, 0.34) 64%,
            rgba(5, 7, 5, 0.12) 100%
        );
}


.home-hero-slide::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.06) 0%,
            rgba(0, 0, 0, 0.00) 58%,
            rgba(0, 0, 0, 0.27) 100%
        );
}


/* ============================================================
   CONTENT
============================================================ */

.home-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 620px;
    padding: 45px 0 70px;
}


.home-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.home-hero-kicker::before {
    width: 28px;
    height: 2px;
    content: "";
    background: var(--btf-green);
}


.home-hero h2 {
    max-width: 560px;
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
}


.home-hero-text {
    max-width: 520px;
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.35;
}


/* ============================================================
   BUTTON
============================================================ */

.home-hero-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 48px;
    padding: 0 20px;
    overflow: hidden;
    color: #ffffff;
    background: var(--btf-green);
    border: 1px solid var(--btf-green);
    font-size: 11px;
    font-weight: 800;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}


.home-hero-btn::before {
    position: absolute;
    inset: 0;
    content: "";
    background: #ffffff;
    transform: translateX(-102%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


.home-hero-btn span,
.home-hero-btn i {
    position: relative;
    z-index: 2;
}


.home-hero-btn i {
    transition: transform 0.3s ease;
}


.home-hero-btn:hover {
    color: #111311;
    border-color: #ffffff;
    transform: translateY(-2px);
}


.home-hero-btn:hover::before {
    transform: translateX(0);
}


.home-hero-btn:hover i {
    transform: translateX(4px);
}


/* ============================================================
   BOTTOM UI
============================================================ */

.home-hero-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    pointer-events: none;
}


.home-hero-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 76px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}


/* ============================================================
   INDICATORS
============================================================ */

.home-hero-indicators {
    position: static;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0;
    pointer-events: auto;
}


.home-hero-indicators [data-bs-target] {
    position: relative;
    width: 54px;
    height: 3px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.22);
    border: 0;
    opacity: 1;
}


.home-hero-indicators [data-bs-target]::after {
    position: absolute;
    inset: 0;
    content: "";
    background: var(--btf-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}


.home-hero-indicators [data-bs-target].active::after {
    transform: scaleX(1);
}


/* ============================================================
   COUNTER
============================================================ */

.home-hero-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
}


.home-hero-counter-line {
    width: 34px;
    height: 1px;
    background: rgba(255, 255, 255, 0.28);
}


.home-hero-current {
    color: #ffffff;
}


/* ============================================================
   CONTROLS
============================================================ */

.home-hero-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}


.home-hero-control {
    position: static;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(8, 10, 8, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 1;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.home-hero-control:hover {
    background: var(--btf-green);
    border-color: var(--btf-green);
    transform: translateY(-2px);
}


.home-hero-control i {
    font-size: 14px;
}


/* ============================================================
   SLIDE ANIMATION
============================================================ */

.home-hero .carousel-item .home-hero-kicker,
.home-hero .carousel-item h2,
.home-hero .carousel-item .home-hero-text,
.home-hero .carousel-item .home-hero-btn {
    opacity: 0;
    transform: translateY(18px);
}


.home-hero .carousel-item.active .home-hero-kicker {
    animation: homeHeroFadeUp 0.55s ease forwards 0.10s;
}


.home-hero .carousel-item.active h2 {
    animation: homeHeroFadeUp 0.60s ease forwards 0.18s;
}


.home-hero .carousel-item.active .home-hero-text {
    animation: homeHeroFadeUp 0.60s ease forwards 0.27s;
}


.home-hero .carousel-item.active .home-hero-btn {
    animation: homeHeroFadeUp 0.60s ease forwards 0.36s;
}


@keyframes homeHeroFadeUp {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

@media (max-width: 1199.98px) {

    .home-hero .carousel-inner,
    .home-hero .carousel-item,
    .home-hero-slide {
        min-height: 570px;
    }


    .home-hero h2 {
        font-size: 32px;
    }

}


@media (max-width: 991.98px) {

    .home-hero .carousel-inner,
    .home-hero .carousel-item,
    .home-hero-slide {
        min-height: 520px;
    }


    .home-hero-slide::before {
        background:
            linear-gradient(
                90deg,
                rgba(5, 7, 5, 0.82) 0%,
                rgba(5, 7, 5, 0.66) 52%,
                rgba(5, 7, 5, 0.30) 100%
            );
    }


    .home-hero-content {
        max-width: 560px;
        padding: 40px 0 85px;
    }


    .home-hero h2 {
        font-size: 29px;
    }


    .home-hero-text {
        font-size: 14.5px;
    }

}


@media (max-width: 767.98px) {

    .home-hero .carousel-inner,
    .home-hero .carousel-item,
    .home-hero-slide {
        min-height: 490px;
    }


    .home-hero-slide {
        background-position: center center;
    }


    .home-hero-slide::before {
        background:
            linear-gradient(
                90deg,
                rgba(5, 7, 5, 0.84) 0%,
                rgba(5, 7, 5, 0.72) 58%,
                rgba(5, 7, 5, 0.42) 100%
            );
    }


    .home-hero-content {
        max-width: 500px;
        padding: 38px 0 95px;
    }


    .home-hero h2 {
        max-width: 480px;
        font-size: 27px;
    }


    .home-hero-text {
        max-width: 450px;
        font-size: 14px;
    }


    .home-hero-bottom-inner {
        min-height: 68px;
    }


    .home-hero-indicators [data-bs-target] {
        width: 42px;
    }

}


@media (max-width: 575.98px) {

    .home-hero .carousel-inner,
    .home-hero .carousel-item,
    .home-hero-slide {
        min-height: 460px;
    }


    .home-hero-slide::before {
        background:
            linear-gradient(
                180deg,
                rgba(5, 7, 5, 0.52) 0%,
                rgba(5, 7, 5, 0.69) 44%,
                rgba(5, 7, 5, 0.86) 100%
            );
    }


    .home-hero-content {
        max-width: none;
        padding: 120px 0 100px;
    }


    .home-hero-kicker {
        font-size: 9px;
    }


    .home-hero h2 {
        max-width: 390px;
        font-size: 24px;
        line-height: 1.08;
    }


    .home-hero-text {
        max-width: 390px;
        font-size: 13.5px;
    }


    .home-hero-btn {
        min-height: 45px;
        padding: 0 17px;
        font-size: 10.5px;
    }


    .home-hero-bottom-inner {
        min-height: 62px;
    }


    .home-hero-indicators {
        gap: 6px;
    }


    .home-hero-indicators [data-bs-target] {
        width: 31px;
    }


    .home-hero-counter {
        display: none;
    }


    .home-hero-control {
        width: 37px;
        height: 37px;
    }

}


@media (max-width: 399.98px) {

    .home-hero .carousel-inner,
    .home-hero .carousel-item,
    .home-hero-slide {
        min-height: 440px;
    }


    .home-hero-content {
        padding-top: 105px;
    }


    .home-hero h2 {
        font-size: 22px;
    }


    .home-hero-text {
        font-size: 13px;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

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

    .home-hero .carousel-item .home-hero-kicker,
    .home-hero .carousel-item h2,
    .home-hero .carousel-item .home-hero-text,
    .home-hero .carousel-item .home-hero-btn {
        opacity: 1;
        transform: none;
        animation: none;
    }


    .home-hero-btn,
    .home-hero-btn::before,
    .home-hero-btn i,
    .home-hero-control {
        transition: none;
    }

}




/* ============================================================
   HOME
============================================================ */

.home-page {
    overflow: hidden;
}


.home-page p {
    margin: 0 0 10px;
    line-height: 1.2;
    text-align: justify;
}


.home-page h1,
.home-page h2 {
    margin: 0 0 18px;
    color: var(--btf-black);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}


.home-page h3 {
    margin: 0;
    color: var(--btf-black);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
}


/* ============================================================
   GENERAL
============================================================ */

.home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
    color: var(--btf-green-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}


.home-eyebrow::before {
    width: 23px;
    height: 2px;
    content: "";
    background: var(--btf-green);
}


.home-eyebrow-light {
    color: rgba(255, 255, 255, 0.62);
}


.home-text {
    color: #525652;
    font-size: 15px;
}


.home-text a {
    color: var(--btf-green-dark);
    font-weight: 700;
}


.home-lead {
    position: relative;
    margin-bottom: 22px !important;
    padding-left: 15px;
    color: #252825;
    font-size: 16px;
    font-weight: 700;
}


.home-lead::before {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 3px;
    content: "";
    background: var(--btf-green);
}


.home-section-heading {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}


.home-section-heading p {
    color: #666b66;
    font-size: 14px;
    text-align: center;
}


/* ============================================================
   BUTTONS
============================================================ */

.home-actions {
    margin-top: 26px;
}


.home-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 21px;
    overflow: hidden;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 800;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.home-btn span,
.home-btn i {
    position: relative;
    z-index: 2;
}


.home-btn i {
    transition: transform 0.3s ease;
}


.home-btn:hover i {
    transform: translateX(4px);
}


.home-btn-primary {
    color: #ffffff;
    background: #111311;
    border-color: #111311;
}


.home-btn-primary::before {
    position: absolute;
    inset: 0;
    content: "";
    background: var(--btf-green);
    transform: translateX(-102%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


.home-btn-primary:hover {
    color: #ffffff;
    border-color: var(--btf-green);
    transform: translateY(-2px);
}


.home-btn-primary:hover::before {
    transform: translateX(0);
}


.home-btn-green {
    color: #ffffff;
    background: var(--btf-green);
    border-color: var(--btf-green);
}


.home-btn-green:hover {
    color: #ffffff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.40);
    transform: translateY(-2px);
}


/* ============================================================
   ABOUT
============================================================ */

.home-about {
    padding: 90px 0 105px;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7f8f7
        );
}


.home-about-visual {
    position: relative;
    min-height: 560px;
}


.home-about-image {
    position: absolute;
    overflow: hidden;
    background: #ffffff;
    border: 7px solid #ffffff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}


.home-about-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.7s ease;
}


.home-about-image:hover img {
    transform: scale(1.04);
}


.home-about-image-main {
    top: 0;
    left: 0;
    width: 78%;
    height: 390px;
}


.home-about-image-secondary {
    right: 0;
    bottom: 15px;
    width: 58%;
    height: 300px;
}


.home-about-image-third {
    bottom: 42px;
    left: 20px;
    width: 37%;
    height: 185px;
}


.home-about-experience {
    position: absolute;
    top: 325px;
    right: 10px;
    z-index: 4;
    min-width: 190px;
    padding: 15px 18px;
    color: #ffffff;
    background: #111311;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.20);
}


.home-about-experience strong,
.home-about-experience span {
    display: block;
}


.home-about-experience strong {
    margin-bottom: 4px;
    font-size: 17px;
}


.home-about-experience span {
    color: rgba(255, 255, 255, 0.53);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}


.home-about-content {
    padding-left: 15px;
}


.home-about-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}


.home-about-point {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    color: #4a4e4a;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 10.5px;
    font-weight: 700;
}


.home-about-point i {
    color: var(--btf-green);
}


/* ============================================================
   SERVICES
============================================================ */

.home-services {
    padding: 90px 0;
    background: #ffffff;
}


.home-service-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 13px 35px rgba(0, 0, 0, 0.06);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.home-service-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    content: "";
    background: var(--btf-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}


.home-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.10);
}


.home-service-card:hover::after {
    transform: scaleX(1);
}


.home-service-image {
    display: block;
    height: 205px;
    overflow: hidden;
}


.home-service-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.55s ease;
}


.home-service-card:hover .home-service-image img {
    transform: scale(1.055);
}


.home-service-content {
    position: relative;
    padding: 36px 20px 21px;
}


.home-service-icon {
    position: absolute;
    top: -24px;
    left: 20px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--btf-green);
    border: 5px solid #ffffff;
    border-radius: 50%;
}


.home-service-content h3 {
    margin-bottom: 10px;
}


.home-service-content p {
    min-height: 65px;
    color: #6d716d;
    font-size: 12px;
    text-align: left;
}


.home-service-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    color: var(--btf-green-dark);
    font-size: 10.5px;
    font-weight: 800;
}


.home-service-link:hover {
    color: var(--btf-green-dark);
}


.home-service-link i {
    transition: transform 0.3s ease;
}


.home-service-link:hover i {
    transform: translateX(4px);
}


/* ============================================================
   TRUST
============================================================ */

.home-trust {
    padding: 72px 0;
    background:
        linear-gradient(
            135deg,
            #171917,
            #090a09
        );
}


.home-trust-inner {
    display: grid;
    grid-template-columns: 0.9fr 1.6fr;
    align-items: center;
    gap: 55px;
}


.home-trust-heading h2 {
    color: #ffffff;
}


.home-trust-heading p {
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
}


.home-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}


.home-trust-item {
    min-height: 130px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}


.home-trust-item > span {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: var(--btf-green);
    background: rgba(32, 173, 54, 0.09);
    border-radius: 50%;
}


.home-trust-item strong,
.home-trust-item small {
    display: block;
}


.home-trust-item strong {
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 18px;
}


.home-trust-item small {
    color: rgb(255 255 255 / 64%);
    font-size: 15px;
}


/* ============================================================
   REVIEWS
============================================================ */

.home-reviews {
    padding: 90px 0;
    background: #f7f8f7;
}


.home-reviews-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
    margin-bottom: 36px;
}


.home-section-heading-reviews {
    max-width: 660px;
    margin: 0;
    text-align: left;
}


.home-section-heading-reviews p {
    text-align: left;
}


.home-reviews-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 16px;
    color: #353935;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.09);
    font-size: 10.5px;
    font-weight: 800;
    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.home-reviews-all .bi-google {
    color: var(--btf-green);
}


.home-reviews-all:hover {
    color: var(--btf-green-dark);
    border-color: rgba(32, 173, 54, 0.40);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
}


.home-reviews-carousel {
    width: 100%;
}


.home-review-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


.home-review-card {
    display: flex;
    flex-direction: column;
    min-height: 355px;
    padding: 30px 30px 27px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.055);
}


.home-review-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 17px;
}


.home-review-stars {
    display: flex;
    gap: 3px;
    color: #e0aa18;
    font-size: 12px;
}


.home-review-quote {
    color: rgba(32, 173, 54, 0.12);
    font-size: 38px;
}


.home-review-card blockquote {
    flex: 1;
    margin: 0;
    color: #4a4e4a;
    font-size: 13.5px;
    font-style: italic;
    line-height: 1.45;
}


.home-review-author {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 25px;
    padding-top: 17px;
    border-top: 1px solid rgba(0, 0, 0, 0.055);
}


.home-review-avatar {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    background: #111311;
    border-radius: 50%;
    font-size: 9.5px;
    font-weight: 800;
}


.home-review-author strong,
.home-review-author small {
    display: block;
}


.home-review-author strong {
    margin-bottom: 2px;
    color: #303330;
    font-size: 11.5px;
}


.home-review-author small {
    color: #929692;
    font-size: 9.5px;
}


.home-reviews-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 25px;
}


.home-review-control {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #333633;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}


.home-review-control:hover {
    color: #ffffff;
    background: var(--btf-green);
    border-color: var(--btf-green);
}


.home-review-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7b7e7b;
    font-size: 9px;
    font-weight: 800;
}


.home-review-line {
    width: 55px;
    height: 1px;
    background: #d4d6d4;
}


/* ============================================================
   LOCATION / GOOGLE MAP
============================================================ */

.home-location {
    padding: 90px 0;
    background: #ffffff;
}


.home-location-wrapper {
    display: grid;
    grid-template-columns: 1.55fr 0.85fr;
    min-height: 525px;
    overflow: hidden;
    background: #111311;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.13);
}


.home-map {
    position: relative;
    min-height: 525px;
    background: #e8e9e8;
}


.home-map iframe {
    width: 100%;
    height: 100%;
    min-height: 525px;
    display: block;
    border: 0;
    filter: grayscale(0.28) contrast(1.02);
}


.home-map-overlay {
    position: absolute;
    right: 20px;
    bottom: 20px;
}


.home-map-overlay a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    color: #ffffff;
    background: rgba(10, 12, 10, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


.home-map-overlay a:hover {
    color: #ffffff;
    background: var(--btf-green);
}


.home-location-panel {
    position: relative;
    padding: 45px 36px;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            #171917,
            #090a09
        );
}


.home-location-panel::before {
    position: absolute;
    top: 45px;
    bottom: 45px;
    left: 0;
    width: 3px;
    content: "";
    background: var(--btf-green);
}


.home-location-panel h2 {
    color: #ffffff;
}


.home-location-panel > p {
    color: rgba(255, 255, 255, 0.57);
    font-size: 13px;
    text-align: left;
}


.home-contact-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 27px;
}


.home-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


a.home-contact-item {
    transition: padding-left 0.3s ease;
}


a.home-contact-item:hover {
    padding-left: 5px;
    color: #ffffff;
}


.home-contact-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--btf-green);
    background: rgba(32, 173, 54, 0.08);
    border-radius: 50%;
}


.home-contact-item small,
.home-contact-item strong {
    display: block;
}


.home-contact-item small {
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 8.5px;
    font-weight: 800;
    text-transform: uppercase;
}


.home-contact-item strong {
    color: #ffffff;
    font-size: 11px;
    line-height: 1.3;
}


.home-location-actions {
    margin-top: 25px;
}


.home-location-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
}


.home-location-link:hover {
    color: var(--btf-green);
}


.home-location-link i {
    transition: transform 0.3s ease;
}


.home-location-link:hover i {
    transform: translateX(4px);
}


/* ============================================================
   FINAL CTA
============================================================ */

.home-final-cta {
    padding: 65px 0;
    background:
        linear-gradient(
            135deg,
            #151715,
            #070807
        );
}


.home-final-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
}


.home-final-content {
    max-width: 700px;
}


.home-final-content h2 {
    color: #ffffff;
}


.home-final-content h2 a,
.home-final-content h2 a:visited,
.home-final-content h2 a:hover,
.home-final-content h2 a:focus,
.home-final-content h2 a:active {
    color: #ffffff;
}


.home-final-content p {
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
}


.home-final-actions {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}


.home-phone-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 7px 14px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.16);
}


.home-phone-btn:hover {
    color: #ffffff;
    border-color: rgba(32, 173, 54, 0.55);
}


.home-phone-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    background: var(--btf-green);
    border-radius: 50%;
}


.home-phone-btn small,
.home-phone-btn strong {
    display: block;
}


.home-phone-btn small {
    color: rgba(255, 255, 255, 0.42);
    font-size: 8.5px;
    font-weight: 800;
    text-transform: uppercase;
}


.home-phone-btn strong {
    color: #ffffff;
    font-size: 12px;
}


/* ============================================================
   LIENS CTA
============================================================ */

[class*="-final-cta"] a,
[class*="-final-cta"] a:visited {
    color: #ffffff;
}


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

@media (max-width: 1199.98px) {

    .home-about-visual {
        min-height: 520px;
    }


    .home-final-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 991.98px) {

    .home-about,
    .home-services,
    .home-reviews,
    .home-location {
        padding: 65px 0;
    }


    .home-about-content {
        padding-left: 0;
    }


    .home-trust-inner {
        grid-template-columns: 1fr;
        gap: 35px;
    }


    .home-reviews-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }


    .home-review-card {
        min-height: 390px;
        padding: 26px 24px;
    }


    .home-location-wrapper {
        grid-template-columns: 1fr;
    }


    .home-map,
    .home-map iframe {
        min-height: 420px;
    }


    .home-location-panel::before {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
        height: 3px;
    }

}


@media (max-width: 767.98px) {

    .home-page h1,
    .home-page h2 {
        font-size: 26px;
    }


    .home-about-visual {
        min-height: 475px;
    }


    .home-about-image-main {
        width: 82%;
        height: 330px;
    }


    .home-about-image-secondary {
        width: 58%;
        height: 245px;
    }


    .home-about-image-third {
        width: 38%;
        height: 160px;
    }


    .home-about-experience {
        top: 275px;
    }


    .home-trust-grid {
        grid-template-columns: 1fr;
    }


    .home-review-pair {
        grid-template-columns: 1fr;
    }


    .home-review-card {
        min-height: auto;
    }


    /*
     * Sur mobile, on masque le deuxième témoignage de chaque
     * groupe afin de conserver un carrousel compact.
     */

    .home-review-pair .home-review-card:nth-child(2) {
        display: none;
    }


    .home-final-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }


    .home-final-actions .home-btn,
    .home-phone-btn {
        width: 100%;
    }

}


@media (max-width: 500px) {

    .home-page p {
        text-align: left;
    }


    .home-page h1,
    .home-page h2 {
        font-size: 24px;
    }


    .home-about,
    .home-services,
    .home-reviews,
    .home-location {
        padding: 50px 0;
    }


    .home-about-visual {
        min-height: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }


    .home-about-image {
        position: relative;
        inset: auto;
        width: auto;
        height: auto;
        border-width: 4px;
    }


    .home-about-image-main {
        grid-column: 1 / -1;
        height: 280px;
    }


    .home-about-image-secondary,
    .home-about-image-third {
        height: 160px;
    }


    .home-about-experience {
        position: relative;
        top: auto;
        right: auto;
        grid-column: 1 / -1;
    }


    .home-about-points {
        flex-direction: column;
    }


    .home-about-point {
        width: 100%;
    }


    .home-service-image {
        height: 220px;
    }


    .home-reviews-all {
        width: 100%;
    }


    .home-review-card blockquote {
        font-size: 13px;
    }


    .home-location-panel {
        padding: 35px 23px;
    }


    .home-map,
    .home-map iframe {
        min-height: 350px;
    }


    .home-map-overlay {
        right: 12px;
        bottom: 12px;
    }


    .home-map-overlay a {
        min-height: 39px;
        padding: 0 11px;
        font-size: 9px;
    }


    .home-final-cta {
        padding: 55px 0;
    }

}









/* ============================================================
   LIENS DANS LES CTA
============================================================ */

[class*="-final-cta"] a,
[class*="-final-cta"] a:visited,
[class*="-final-cta"] a:hover,
[class*="-final-cta"] a:focus,
[class*="-final-cta"] a:active {
    color: #ffffff;
}
section.saintconstant-final-cta a {
    color: #fff!important;
}
/* ============================================================
   LIENS BLANCS DANS LES BLOCS SOMBRES / CTA
============================================================ */

[class*="-final-cta"] a,
[class*="-dark-content"] a,
[class*="-final-cta"] a:visited,
[class*="-dark-content"] a:visited {
    color: #ffffff;
}

/* ============================================================
   PAGE SAINT-JEAN-SUR-RICHELIEU
============================================================ */

.saintjean-page {
    overflow: hidden;
}


.saintjean-page p {
    margin: 0 0 10px;
    line-height: 1.2;
    text-align: justify;
}


.saintjean-page h1,
.saintjean-page h2 {
    margin: 0 0 18px;
    color: var(--btf-black);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}


/* ============================================================
   EYEBROW
============================================================ */

.saintjean-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
    color: var(--btf-green-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}


.saintjean-eyebrow::before {
    width: 23px;
    height: 2px;
    content: "";
    background: var(--btf-green);
}


.saintjean-eyebrow-light {
    color: rgba(255, 255, 255, 0.68);
}


/* ============================================================
   TEXTE
============================================================ */

.saintjean-text {
    color: #525652;
    font-size: 15px;
}


.saintjean-text a {
    position: relative;
    color: var(--btf-green-dark);
    font-weight: 700;
}


.saintjean-text a::after {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 1px;
    content: "";
    background: var(--btf-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}


.saintjean-text a:hover::after {
    transform: scaleX(1);
}


.saintjean-text-light {
    color: rgba(255, 255, 255, 0.68);
}


.saintjean-text-light a {
    color: #ffffff;
}


.saintjean-lead {
    position: relative;
    margin-bottom: 22px !important;
    padding-left: 15px;
    color: #252825;
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
}


.saintjean-lead::before {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 3px;
    content: "";
    background: var(--btf-green);
}


/* ============================================================
   BOUTONS
============================================================ */

.saintjean-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}


.saintjean-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 48px;
    padding: 0 20px;
    overflow: hidden;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 800;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.saintjean-btn span,
.saintjean-btn i {
    position: relative;
    z-index: 2;
}


.saintjean-btn i {
    transition: transform 0.3s ease;
}


.saintjean-btn:hover i {
    transform: translateX(4px);
}


.saintjean-btn-primary {
    color: #ffffff;
    background: #111311;
    border-color: #111311;
}


.saintjean-btn-primary::before {
    position: absolute;
    inset: 0;
    content: "";
    background: var(--btf-green);
    transform: translateX(-102%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


.saintjean-btn-primary:hover {
    color: #ffffff;
    border-color: var(--btf-green);
    transform: translateY(-2px);
}


.saintjean-btn-primary:hover::before {
    transform: translateX(0);
}


.saintjean-btn-green {
    color: #ffffff;
    background: var(--btf-green);
    border-color: var(--btf-green);
}


.saintjean-btn-green:hover {
    color: #ffffff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.42);
    transform: translateY(-2px);
}


/* ============================================================
   INTRODUCTION
============================================================ */

.saintjean-intro {
    padding: 85px 0 90px;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7f8f7
        );
}


.saintjean-intro-content {
    padding-right: 20px;
}


.saintjean-main-visual {
    position: relative;
    padding: 9px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.10);
}


.saintjean-main-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}


.saintjean-main-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.7s ease;
}


.saintjean-main-visual:hover
.saintjean-main-image img {
    transform: scale(1.035);
}


.saintjean-main-floating {
    position: absolute;
    left: -16px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 17px;
    color: #ffffff;
    background: #111311;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22);
}


.saintjean-main-floating-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--btf-green);
    border-radius: 50%;
}


.saintjean-main-floating small,
.saintjean-main-floating strong {
    display: block;
}


.saintjean-main-floating small {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    text-transform: uppercase;
}


.saintjean-main-floating strong {
    font-size: 13px;
}


/* ============================================================
   PRODUITS
============================================================ */

.saintjean-products {
    padding: 90px 0;
    background: #ffffff;
}


.saintjean-products-image {
    position: relative;
    height: 470px;
    padding: 8px;
    background: #f5f6f5;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}


.saintjean-products-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.saintjean-products-accent {
    position: absolute;
    top: 30px;
    left: -1px;
    width: 3px;
    height: 105px;
    background: var(--btf-green);
}


.saintjean-products-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
}


.saintjean-product-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 12px;
    color: #414441;
    background: #f7f8f7;
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 11.5px;
    font-weight: 700;
}


.saintjean-product-item i {
    color: var(--btf-green);
}


/* ============================================================
   FIBRE DE VERRE
============================================================ */

.saintjean-fiberglass {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #171917,
            #090a09
        );
}


.saintjean-fiberglass h2 {
    color: #ffffff;
}


.saintjean-dark-content {
    padding-right: 20px;
}


.saintjean-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 22px;
}


.saintjean-benefit-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    font-weight: 700;
}


.saintjean-benefit-item i {
    color: var(--btf-green);
}


.saintjean-dark-image {
    position: relative;
    height: 500px;
    padding: 9px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.30);
}


.saintjean-dark-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.saintjean-dark-line {
    position: absolute;
    right: -1px;
    bottom: 40px;
    width: 3px;
    height: 110px;
    background: var(--btf-green);
}


/* ============================================================
   AUTRES SERVICES
============================================================ */

.saintjean-services {
    padding: 90px 0;
    background:
        linear-gradient(
            180deg,
            #f7f8f7,
            #ffffff
        );
}


.saintjean-services-image {
    position: relative;
    height: 470px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.09);
}


.saintjean-services-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.saintjean-services-label {
    position: absolute;
    right: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    color: #ffffff;
    background: rgba(10, 12, 10, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.13);
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.saintjean-services-label i {
    color: var(--btf-green);
}


/* ============================================================
   SERVICES LIST
============================================================ */

.saintjean-service-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 23px;
}


.saintjean-service-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    background: #f7f8f7;
    border: 1px solid rgba(0, 0, 0, 0.05);
}


.saintjean-service-row > span {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--btf-green);
    background: rgba(32, 173, 54, 0.08);
    border-radius: 50%;
}


.saintjean-service-row strong,
.saintjean-service-row small {
    display: block;
}


.saintjean-service-row strong {
    margin-bottom: 2px;
    color: #363936;
    font-size: 11.5px;
}


.saintjean-service-row small {
    color: #777b77;
    font-size: 10px;
}


/* ============================================================
   CTA FINAL
============================================================ */

.saintjean-final-cta {
    padding: 65px 0;
    background:
        linear-gradient(
            135deg,
            #131513,
            #080a08
        );
}


.saintjean-final-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}


.saintjean-final-content {
    max-width: 720px;
}


.saintjean-final-content h2 {
    margin-bottom: 12px;
    color: #ffffff;
}


.saintjean-final-content p {
    color: rgba(255, 255, 255, 0.64);
    font-size: 14px;
}


.saintjean-final-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}


/* ============================================================
   TÉLÉPHONE
============================================================ */

.saintjean-phone-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 50px;
    padding: 8px 14px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}


.saintjean-phone-btn:hover {
    color: #ffffff;
    border-color: rgba(32, 173, 54, 0.50);
}


.saintjean-phone-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--btf-green);
    border-radius: 50%;
}


.saintjean-phone-btn small {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}


.saintjean-phone-btn strong {
    color: #ffffff;
    font-size: 13px;
}


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

@media (max-width: 1199.98px) {

    .saintjean-final-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 991.98px) {

    .saintjean-intro,
    .saintjean-products,
    .saintjean-fiberglass,
    .saintjean-services {
        padding: 65px 0;
    }

    .saintjean-intro-content,
    .saintjean-dark-content {
        padding-right: 0;
    }

    .saintjean-products-image,
    .saintjean-dark-image,
    .saintjean-services-image {
        height: 420px;
    }

}


@media (max-width: 767.98px) {

    .saintjean-page h1,
    .saintjean-page h2 {
        font-size: 26px;
    }

    .saintjean-products-grid,
    .saintjean-benefits-grid {
        grid-template-columns: 1fr;
    }

    .saintjean-final-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .saintjean-phone-btn,
    .saintjean-final-actions .saintjean-btn {
        width: 100%;
    }

}


@media (max-width: 500px) {

    .saintjean-page p {
        text-align: left;
    }

    .saintjean-page h1,
    .saintjean-page h2 {
        font-size: 24px;
    }

    .saintjean-intro,
    .saintjean-products,
    .saintjean-fiberglass,
    .saintjean-services {
        padding: 50px 0;
    }

    .saintjean-main-floating {
        position: relative;
        left: auto;
        bottom: auto;
        margin-top: 8px;
    }

    .saintjean-products-image,
    .saintjean-dark-image,
    .saintjean-services-image {
        height: 330px;
    }

    .saintjean-final-cta {
        padding: 55px 0;
    }

}


/* ============================================================
   PAGE SAINT-CONSTANT
============================================================ */

.saintconstant-page {
    overflow: hidden;
}


.saintconstant-page p {
    margin: 0 0 10px;
    line-height: 1.2;
    text-align: justify;
}


.saintconstant-page h1,
.saintconstant-page h2 {
    margin: 0 0 18px;
    color: var(--btf-black);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}


/* ============================================================
   EYEBROW
============================================================ */

.saintconstant-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
    color: var(--btf-green-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}


.saintconstant-eyebrow::before {
    width: 23px;
    height: 2px;
    content: "";
    background: var(--btf-green);
}


.saintconstant-eyebrow-light {
    color: rgba(255, 255, 255, 0.68);
}


/* ============================================================
   TEXTE
============================================================ */

.saintconstant-text {
    color: #525652;
    font-size: 15px;
}


.saintconstant-text a {
    position: relative;
    color: var(--btf-green-dark);
    font-weight: 700;
}


.saintconstant-text a::after {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 1px;
    content: "";
    background: var(--btf-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}


.saintconstant-text a:hover::after {
    transform: scaleX(1);
}


.saintconstant-text-light {
    color: rgba(255, 255, 255, 0.68);
}


.saintconstant-text-light a {
    color: #ffffff;
}


.saintconstant-lead {
    position: relative;
    margin-bottom: 22px !important;
    padding-left: 15px;
    color: #252825;
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
}


.saintconstant-lead::before {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 3px;
    content: "";
    background: var(--btf-green);
}


/* ============================================================
   BOUTONS
============================================================ */

.saintconstant-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}


.saintconstant-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 48px;
    padding: 0 20px;
    overflow: hidden;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 800;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.saintconstant-btn span,
.saintconstant-btn i {
    position: relative;
    z-index: 2;
}


.saintconstant-btn i {
    transition: transform 0.3s ease;
}


.saintconstant-btn:hover i {
    transform: translateX(4px);
}


.saintconstant-btn-primary {
    color: #ffffff;
    background: #111311;
    border-color: #111311;
}


.saintconstant-btn-primary::before {
    position: absolute;
    inset: 0;
    content: "";
    background: var(--btf-green);
    transform: translateX(-102%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


.saintconstant-btn-primary:hover {
    color: #ffffff;
    border-color: var(--btf-green);
    transform: translateY(-2px);
}


.saintconstant-btn-primary:hover::before {
    transform: translateX(0);
}


.saintconstant-btn-green {
    color: #ffffff;
    background: var(--btf-green);
    border-color: var(--btf-green);
}


.saintconstant-btn-green:hover {
    color: #ffffff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.42);
    transform: translateY(-2px);
}


/* ============================================================
   INTRO
============================================================ */

.saintconstant-intro {
    padding: 85px 0 90px;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7f8f7
        );
}


.saintconstant-intro-content {
    padding-right: 20px;
}


.saintconstant-main-visual {
    position: relative;
    padding: 9px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.10);
}


.saintconstant-main-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}


.saintconstant-main-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.7s ease;
}


.saintconstant-main-visual:hover
.saintconstant-main-image img {
    transform: scale(1.035);
}


.saintconstant-main-panel {
    position: absolute;
    right: 20px;
    bottom: -24px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 310px;
    padding: 15px 17px;
    color: #ffffff;
    background: #111311;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22);
}


.saintconstant-main-panel-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    background: var(--btf-green);
    border-radius: 50%;
}


.saintconstant-main-panel small,
.saintconstant-main-panel strong {
    display: block;
}


.saintconstant-main-panel small {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}


.saintconstant-main-panel strong {
    font-size: 12px;
    line-height: 1.2;
}


/* ============================================================
   DURABILITÉ
============================================================ */

.saintconstant-durability {
    padding: 100px 0 90px;
    background: #ffffff;
}


.saintconstant-framed-image {
    position: relative;
    height: 470px;
    padding: 8px;
    background: #f5f6f5;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}


.saintconstant-framed-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.saintconstant-frame-accent {
    position: absolute;
    top: 30px;
    left: -1px;
    width: 3px;
    height: 105px;
    background: var(--btf-green);
}


.saintconstant-value-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
}


.saintconstant-value-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 12px;
    color: #414441;
    background: #f7f8f7;
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 11.5px;
    font-weight: 700;
}


.saintconstant-value-item i {
    color: var(--btf-green);
}


/* ============================================================
   MODÈLES
============================================================ */

.saintconstant-models {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #171917,
            #090a09
        );
}


.saintconstant-models h2 {
    color: #ffffff;
}


.saintconstant-dark-content {
    padding-right: 20px;
}


.saintconstant-model-options {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 24px;
}


.saintconstant-model-option {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}


.saintconstant-model-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--btf-green);
    background: rgba(32, 173, 54, 0.10);
    border-radius: 50%;
}


.saintconstant-model-option strong,
.saintconstant-model-option small {
    display: block;
}


.saintconstant-model-option strong {
    margin-bottom: 2px;
    font-size: 11.5px;
}


.saintconstant-model-option small {
    color: rgba(255, 255, 255, 0.48);
    font-size: 10px;
}


.saintconstant-dark-image {
    position: relative;
    height: 500px;
    padding: 9px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.30);
}


.saintconstant-dark-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.saintconstant-dark-accent {
    position: absolute;
    right: -1px;
    bottom: 40px;
    width: 3px;
    height: 110px;
    background: var(--btf-green);
}


/* ============================================================
   PROPRIÉTÉS
============================================================ */

.saintconstant-properties {
    padding: 90px 0;
    background:
        linear-gradient(
            180deg,
            #f7f8f7,
            #ffffff
        );
}


.saintconstant-properties-image {
    position: relative;
    height: 470px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.09);
}


.saintconstant-properties-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.saintconstant-properties-label {
    position: absolute;
    right: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    color: #ffffff;
    background: rgba(10, 12, 10, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.13);
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.saintconstant-properties-label i {
    color: var(--btf-green);
}


.saintconstant-property-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 23px;
}


.saintconstant-property-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    color: #414441;
    background: #f7f8f7;
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 11.5px;
    font-weight: 700;
}


.saintconstant-property-item i {
    color: var(--btf-green);
}


/* ============================================================
   CTA FINAL
============================================================ */

.saintconstant-final-cta {
    padding: 65px 0;
    background:
        linear-gradient(
            135deg,
            #131513,
            #080a08
        );
}


.saintconstant-final-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}


.saintconstant-final-content {
    max-width: 720px;
}


.saintconstant-final-content h2 {
    margin-bottom: 12px;
    color: #ffffff;
}


.saintconstant-final-content p {
    color: rgba(255, 255, 255, 0.64);
    font-size: 14px;
}


.saintconstant-final-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}


/* ============================================================
   TÉLÉPHONE
============================================================ */

.saintconstant-phone-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 50px;
    padding: 8px 14px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}


.saintconstant-phone-btn:hover {
    color: #ffffff;
    border-color: rgba(32, 173, 54, 0.50);
}


.saintconstant-phone-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--btf-green);
    border-radius: 50%;
}


.saintconstant-phone-btn small {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}


.saintconstant-phone-btn strong {
    color: #ffffff;
    font-size: 13px;
}


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

@media (max-width: 1199.98px) {

    .saintconstant-final-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 991.98px) {

    .saintconstant-intro,
    .saintconstant-durability,
    .saintconstant-models,
    .saintconstant-properties {
        padding: 65px 0;
    }

    .saintconstant-intro-content,
    .saintconstant-dark-content {
        padding-right: 0;
    }

    .saintconstant-framed-image,
    .saintconstant-dark-image,
    .saintconstant-properties-image {
        height: 420px;
    }

}


@media (max-width: 767.98px) {

    .saintconstant-page h1,
    .saintconstant-page h2 {
        font-size: 26px;
    }

    .saintconstant-value-grid,
    .saintconstant-property-list {
        grid-template-columns: 1fr;
    }

    .saintconstant-final-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .saintconstant-phone-btn,
    .saintconstant-final-actions .saintconstant-btn {
        width: 100%;
    }

}


@media (max-width: 500px) {

    .saintconstant-page p {
        text-align: left;
    }

    .saintconstant-page h1,
    .saintconstant-page h2 {
        font-size: 24px;
    }

    .saintconstant-intro,
    .saintconstant-durability,
    .saintconstant-models,
    .saintconstant-properties {
        padding: 50px 0;
    }

    .saintconstant-main-panel {
        position: relative;
        right: auto;
        bottom: auto;
        max-width: none;
        margin-top: 8px;
    }

    .saintconstant-framed-image,
    .saintconstant-dark-image,
    .saintconstant-properties-image {
        height: 330px;
    }

    .saintconstant-final-cta {
        padding: 55px 0;
    }

}

/* ============================================================
   PAGE SAINTE-CATHERINE
============================================================ */

.saintecatherine-page {
    overflow: hidden;
}


.saintecatherine-page p {
    margin: 0 0 10px;
    line-height: 1.2;
    text-align: justify;
}


.saintecatherine-page h1,
.saintecatherine-page h2 {
    margin: 0 0 18px;
    color: var(--btf-black);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}


/* ============================================================
   EYEBROW
============================================================ */

.saintecatherine-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
    color: var(--btf-green-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}


.saintecatherine-eyebrow::before {
    width: 23px;
    height: 2px;
    content: "";
    background: var(--btf-green);
}


.saintecatherine-eyebrow-light {
    color: rgba(255, 255, 255, 0.68);
}


/* ============================================================
   TEXTE
============================================================ */

.saintecatherine-text {
    color: #525652;
    font-size: 15px;
    line-height: 1.2;
}


.saintecatherine-text a {
    position: relative;
    color: var(--btf-green-dark);
    font-weight: 700;
}


.saintecatherine-text a::after {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 1px;
    content: "";
    background: var(--btf-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}


.saintecatherine-text a:hover::after {
    transform: scaleX(1);
}


.saintecatherine-text-light {
    color: rgba(255, 255, 255, 0.68);
}


.saintecatherine-text-light a {
    color: #ffffff;
}


.saintecatherine-lead {
    position: relative;
    margin-bottom: 22px !important;
    padding-left: 15px;
    color: #252825;
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
}


.saintecatherine-lead::before {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 3px;
    content: "";
    background: var(--btf-green);
}


/* ============================================================
   BOUTONS
============================================================ */

.saintecatherine-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}


.saintecatherine-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 48px;
    padding: 0 20px;
    overflow: hidden;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 800;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.saintecatherine-btn span,
.saintecatherine-btn i {
    position: relative;
    z-index: 2;
}


.saintecatherine-btn i {
    transition: transform 0.3s ease;
}


.saintecatherine-btn:hover i {
    transform: translateX(4px);
}


.saintecatherine-btn-primary {
    color: #ffffff;
    background: #111311;
    border-color: #111311;
}


.saintecatherine-btn-primary::before {
    position: absolute;
    inset: 0;
    content: "";
    background: var(--btf-green);
    transform: translateX(-102%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


.saintecatherine-btn-primary:hover {
    color: #ffffff;
    border-color: var(--btf-green);
    transform: translateY(-2px);
}


.saintecatherine-btn-primary:hover::before {
    transform: translateX(0);
}


.saintecatherine-btn-green {
    color: #ffffff;
    background: var(--btf-green);
    border-color: var(--btf-green);
}


.saintecatherine-btn-green:hover {
    color: #ffffff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.42);
    transform: translateY(-2px);
}


/* ============================================================
   INTRODUCTION
============================================================ */

.saintecatherine-intro {
    padding: 85px 0 90px;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7f8f7
        );
}


.saintecatherine-intro-content {
    padding-right: 20px;
}


.saintecatherine-main-visual {
    position: relative;
    padding: 9px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.10);
}


.saintecatherine-main-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}


.saintecatherine-main-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.7s ease;
}


.saintecatherine-main-visual:hover
.saintecatherine-main-image img {
    transform: scale(1.035);
}


.saintecatherine-main-badge {
    position: absolute;
    right: -18px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: 285px;
    padding: 14px 17px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #171917,
            #090a09
        );
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22);
}


.saintecatherine-main-badge-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    background: var(--btf-green);
    border-radius: 50%;
}


.saintecatherine-main-badge small {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}


.saintecatherine-main-badge strong {
    display: block;
    font-size: 12px;
    line-height: 1.2;
}


/* ============================================================
   FIBRE DE VERRE
============================================================ */

.saintecatherine-fiberglass {
    padding: 90px 0;
    background: #ffffff;
}


.saintecatherine-framed-image {
    position: relative;
    height: 460px;
    padding: 8px;
    background: #f5f6f5;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}


.saintecatherine-framed-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.saintecatherine-frame-line {
    position: absolute;
    top: 30px;
    left: -1px;
    width: 3px;
    height: 105px;
    background: var(--btf-green);
}


/* ============================================================
   FEATURES
============================================================ */

.saintecatherine-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
}


.saintecatherine-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 12px;
    color: #414441;
    background: #f7f8f7;
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 11.5px;
    font-weight: 700;
}


.saintecatherine-feature-item i {
    color: var(--btf-green);
}


/* ============================================================
   MATÉRIAUX
============================================================ */

.saintecatherine-materials {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #171917,
            #090a09
        );
}


.saintecatherine-materials h2 {
    color: #ffffff;
}


.saintecatherine-dark-content {
    padding-right: 20px;
}


.saintecatherine-material-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 22px;
}


.saintecatherine-material-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    font-weight: 700;
}


.saintecatherine-material-item i {
    color: var(--btf-green);
}


.saintecatherine-dark-image {
    position: relative;
    height: 500px;
    padding: 9px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.30);
}


.saintecatherine-dark-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.saintecatherine-dark-accent {
    position: absolute;
    right: -1px;
    bottom: 40px;
    width: 3px;
    height: 110px;
    background: var(--btf-green);
}


/* ============================================================
   NORMES
============================================================ */

.saintecatherine-standards {
    padding: 90px 0;
    background:
        linear-gradient(
            180deg,
            #f7f8f7,
            #ffffff
        );
}


.saintecatherine-standards-image {
    position: relative;
    height: 470px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.09);
}


.saintecatherine-standards-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.saintecatherine-standards-badge {
    position: absolute;
    right: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    color: #ffffff;
    background: rgba(10, 12, 10, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.13);
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.saintecatherine-standards-badge i {
    color: var(--btf-green);
}


/* ============================================================
   LISTE NORMES
============================================================ */

.saintecatherine-standards-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 23px;
}


.saintecatherine-standard-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    background: #f7f8f7;
    border: 1px solid rgba(0, 0, 0, 0.05);
}


.saintecatherine-standard-item > span {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--btf-green);
    background: rgba(32, 173, 54, 0.08);
    border-radius: 50%;
}


.saintecatherine-standard-item strong,
.saintecatherine-standard-item small {
    display: block;
}


.saintecatherine-standard-item strong {
    margin-bottom: 2px;
    color: #363936;
    font-size: 11.5px;
}


.saintecatherine-standard-item small {
    color: #777b77;
    font-size: 10px;
}


/* ============================================================
   CTA FINAL
============================================================ */

.saintecatherine-final-cta {
    position: relative;
    padding: 65px 0;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #131513,
            #080a08
        );
}


.saintecatherine-final-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}


.saintecatherine-final-content {
    max-width: 720px;
}


.saintecatherine-final-content h2 {
    color: #ffffff;
    margin-bottom: 12px;
}


.saintecatherine-final-content p {
    color: rgba(255, 255, 255, 0.64);
    font-size: 14px;
}


.saintecatherine-final-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}


/* ============================================================
   TÉLÉPHONE
============================================================ */

.saintecatherine-phone-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 50px;
    padding: 8px 14px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}


.saintecatherine-phone-btn:hover {
    color: #ffffff;
    border-color: rgba(32, 173, 54, 0.50);
}


.saintecatherine-phone-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--btf-green);
    border-radius: 50%;
}


.saintecatherine-phone-btn small {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}


.saintecatherine-phone-btn strong {
    color: #ffffff;
    font-size: 13px;
}


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

@media (max-width: 1199.98px) {

    .saintecatherine-final-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 991.98px) {

    .saintecatherine-intro,
    .saintecatherine-fiberglass,
    .saintecatherine-materials,
    .saintecatherine-standards {
        padding: 65px 0;
    }

    .saintecatherine-intro-content,
    .saintecatherine-dark-content {
        padding-right: 0;
    }

    .saintecatherine-main-badge {
        right: 15px;
    }

    .saintecatherine-framed-image,
    .saintecatherine-dark-image,
    .saintecatherine-standards-image {
        height: 420px;
    }

}


@media (max-width: 767.98px) {

    .saintecatherine-page h1,
    .saintecatherine-page h2 {
        font-size: 26px;
    }

    .saintecatherine-feature-grid,
    .saintecatherine-material-grid {
        grid-template-columns: 1fr;
    }

    .saintecatherine-final-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .saintecatherine-phone-btn,
    .saintecatherine-final-actions .saintecatherine-btn {
        width: 100%;
    }

}


@media (max-width: 500px) {

    .saintecatherine-page p {
        text-align: left;
    }

    .saintecatherine-page h1,
    .saintecatherine-page h2 {
        font-size: 24px;
    }

    .saintecatherine-intro,
    .saintecatherine-fiberglass,
    .saintecatherine-materials,
    .saintecatherine-standards {
        padding: 50px 0;
    }

    .saintecatherine-main-badge {
        position: relative;
        right: auto;
        bottom: auto;
        max-width: none;
        margin-top: 7px;
    }

    .saintecatherine-framed-image,
    .saintecatherine-dark-image,
    .saintecatherine-standards-image {
        height: 330px;
    }

    .saintecatherine-final-cta {
        padding: 55px 0;
    }

}


/* ============================================================
   PAGE CHAMBLY
============================================================ */

.chambly-page {
    overflow: hidden;
}


.chambly-page p {
    margin: 0 0 10px;
    line-height: 1.2;
    text-align: justify;
}


.chambly-page h1,
.chambly-page h2 {
    margin: 0 0 18px;
    color: var(--btf-black);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}


.chambly-page h3 {
    margin: 0 0 10px;
    color: var(--btf-black);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
}


/* ============================================================
   EYEBROW
============================================================ */

.chambly-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
    color: var(--btf-green-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}


.chambly-eyebrow::before {
    width: 23px;
    height: 2px;
    content: "";
    background: var(--btf-green);
}


.chambly-eyebrow-light {
    color: rgba(255, 255, 255, 0.68);
}


/* ============================================================
   TEXT
============================================================ */

.chambly-text {
    color: #525652;
    font-size: 15px;
    line-height: 1.2;
}


.chambly-text a,
.chambly-services-text a {
    position: relative;
    color: var(--btf-green-dark);
    font-weight: 700;
}


.chambly-text a::after,
.chambly-services-text a::after {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 1px;
    content: "";
    background: var(--btf-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}


.chambly-text a:hover::after,
.chambly-services-text a:hover::after {
    transform: scaleX(1);
}


.chambly-text-light {
    color: rgba(255, 255, 255, 0.68);
}


.chambly-text-light a {
    color: #ffffff;
}


.chambly-lead {
    position: relative;
    margin-bottom: 22px !important;
    padding-left: 15px;
    color: #252825;
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
}


.chambly-lead::before {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 3px;
    content: "";
    background: var(--btf-green);
}


/* ============================================================
   BUTTONS
============================================================ */

.chambly-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}


.chambly-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 48px;
    padding: 0 20px;
    overflow: hidden;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 800;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.chambly-btn span,
.chambly-btn i {
    position: relative;
    z-index: 2;
}


.chambly-btn i {
    transition: transform 0.3s ease;
}


.chambly-btn:hover i {
    transform: translateX(4px);
}


.chambly-btn-primary {
    color: #ffffff;
    background: #111311;
    border-color: #111311;
}


.chambly-btn-primary::before {
    position: absolute;
    inset: 0;
    content: "";
    background: var(--btf-green);
    transform: translateX(-102%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


.chambly-btn-primary:hover {
    color: #ffffff;
    border-color: var(--btf-green);
    transform: translateY(-2px);
}


.chambly-btn-primary:hover::before {
    transform: translateX(0);
}


.chambly-btn-green {
    color: #ffffff;
    background: var(--btf-green);
    border-color: var(--btf-green);
}


.chambly-btn-green:hover {
    color: #ffffff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.42);
    transform: translateY(-2px);
}


/* ============================================================
   INTRO
============================================================ */

.chambly-intro {
    padding: 85px 0 95px;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7f8f7
        );
}


.chambly-intro-content {
    padding-right: 20px;
}


/* ============================================================
   INTRO VISUAL
============================================================ */

.chambly-intro-visual {
    position: relative;
    min-height: 500px;
}


.chambly-intro-image-main,
.chambly-intro-image-secondary {
    position: absolute;
    overflow: hidden;
    background: #ffffff;
    border: 7px solid #ffffff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.11);
}


.chambly-intro-image-main {
    top: 0;
    right: 0;
    width: 84%;
    height: 385px;
}


.chambly-intro-image-secondary {
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 47%;
    height: 220px;
}


.chambly-intro-image-main img,
.chambly-intro-image-secondary img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.7s ease;
}


.chambly-intro-image-main:hover img,
.chambly-intro-image-secondary:hover img {
    transform: scale(1.04);
}


.chambly-intro-badge {
    position: absolute;
    right: 18px;
    bottom: 28px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    color: #ffffff;
    background: #111311;
    box-shadow: 0 13px 30px rgba(0, 0, 0, 0.20);
    font-size: 11px;
    font-weight: 700;
}


.chambly-intro-badge i {
    color: var(--btf-green);
}


/* ============================================================
   SERVICES
============================================================ */

.chambly-services {
    padding: 90px 0;
    background: #ffffff;
}


.chambly-section-heading {
    max-width: 700px;
    margin-bottom: 30px;
}


.chambly-service-card {
    position: relative;
    height: 100%;
    padding: 25px 22px;
    background: #f7f8f7;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.chambly-service-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    content: "";
    background:
        linear-gradient(
            90deg,
            var(--btf-green),
            transparent
        );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}


.chambly-service-card:hover {
    background: #ffffff;
    border-color: rgba(32, 173, 54, 0.18);
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.08);
}


.chambly-service-card:hover::after {
    transform: scaleX(1);
}


.chambly-service-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    color: #ffffff;
    background: var(--btf-green);
    border-radius: 50%;
    font-size: 17px;
}


.chambly-service-card p {
    color: #5c5f5c;
    font-size: 12.5px;
}


.chambly-services-text {
    max-width: 960px;
    margin-top: 35px;
    color: #525652;
    font-size: 14px;
}


/* ============================================================
   BENEFITS
============================================================ */

.chambly-benefits {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #171917,
            #090a09
        );
}


.chambly-benefits h2 {
    color: #ffffff;
}


.chambly-dark-content {
    padding-right: 20px;
}


.chambly-benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 22px;
}


.chambly-benefit-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    font-weight: 700;
}


.chambly-benefit-item i {
    color: var(--btf-green);
}


.chambly-dark-image {
    position: relative;
    height: 505px;
    padding: 9px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.30);
}


.chambly-dark-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.chambly-dark-accent {
    position: absolute;
    right: -1px;
    bottom: 40px;
    width: 3px;
    height: 110px;
    background: var(--btf-green);
}


/* ============================================================
   CONSTRUCTION
============================================================ */

.chambly-construction {
    padding: 90px 0;
    background:
        linear-gradient(
            180deg,
            #f7f8f7,
            #ffffff
        );
}


.chambly-construction-image {
    position: relative;
    height: 470px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.09);
}


.chambly-construction-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.chambly-construction-badge {
    position: absolute;
    right: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    color: #ffffff;
    background: rgba(10, 12, 10, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.13);
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.chambly-construction-badge i {
    color: var(--btf-green);
}


/* ============================================================
   CONSTRUCTION POINTS
============================================================ */

.chambly-construction-points {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 23px;
}


.chambly-construction-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    background: #f7f8f7;
    border: 1px solid rgba(0, 0, 0, 0.05);
}


.chambly-construction-item > span {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--btf-green);
    background: rgba(32, 173, 54, 0.08);
    border-radius: 50%;
}


.chambly-construction-item strong,
.chambly-construction-item small {
    display: block;
}


.chambly-construction-item strong {
    margin-bottom: 2px;
    color: #363936;
    font-size: 11.5px;
}


.chambly-construction-item small {
    color: #777b77;
    font-size: 10px;
}


/* ============================================================
   FINAL CTA
============================================================ */

.chambly-final-cta {
    position: relative;
    padding: 65px 0;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #131513,
            #080a08
        );
}


.chambly-final-cta::after {
    position: absolute;
    top: -140px;
    right: -90px;
    width: 390px;
    height: 390px;
    content: "";
    border: 1px solid rgba(32, 173, 54, 0.13);
    border-radius: 50%;
}


.chambly-final-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}


.chambly-final-content {
    max-width: 720px;
}


.chambly-final-content h2 {
    color: #ffffff;
    margin-bottom: 12px;
}


.chambly-final-content p {
    color: rgba(255, 255, 255, 0.64);
    font-size: 14px;
}


.chambly-final-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}


/* ============================================================
   PHONE
============================================================ */

.chambly-phone-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 50px;
    padding: 8px 14px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.chambly-phone-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(32, 173, 54, 0.50);
    transform: translateY(-2px);
}


.chambly-phone-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--btf-green);
    border-radius: 50%;
}


.chambly-phone-btn small {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}


.chambly-phone-btn strong {
    color: #ffffff;
    font-size: 13px;
}


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

@media (max-width: 1199.98px) {

    .chambly-final-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 991.98px) {

    .chambly-intro,
    .chambly-services,
    .chambly-benefits,
    .chambly-construction {
        padding: 65px 0;
    }

    .chambly-intro-content,
    .chambly-dark-content {
        padding-right: 0;
    }

    .chambly-intro-visual {
        min-height: 500px;
    }

    .chambly-dark-image,
    .chambly-construction-image {
        height: 420px;
    }

}


@media (max-width: 767.98px) {

    .chambly-page h1,
    .chambly-page h2 {
        font-size: 26px;
    }

    .chambly-benefit-grid {
        grid-template-columns: 1fr;
    }

    .chambly-final-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .chambly-phone-btn,
    .chambly-final-actions .chambly-btn {
        width: 100%;
    }

}


@media (max-width: 500px) {

    .chambly-page p {
        text-align: left;
    }

    .chambly-page h1,
    .chambly-page h2 {
        font-size: 24px;
    }

    .chambly-intro,
    .chambly-services,
    .chambly-benefits,
    .chambly-construction {
        padding: 50px 0;
    }

    .chambly-intro-visual {
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .chambly-intro-image-main,
    .chambly-intro-image-secondary {
        position: relative;
        inset: auto;
        width: 100%;
        height: 280px;
    }

    .chambly-intro-image-secondary {
        height: 205px;
    }

    .chambly-intro-badge {
        position: relative;
        right: auto;
        bottom: auto;
    }

    .chambly-dark-image,
    .chambly-construction-image {
        height: 330px;
    }

    .chambly-final-cta {
        padding: 55px 0;
    }

}




/* ============================================================
   PAGE CANDIAC
============================================================ */

.candiac-page {
    overflow: hidden;
}


.candiac-page p {
    margin: 0 0 10px;
    line-height: 1.2;
    text-align: justify;
}


.candiac-page h1,
.candiac-page h2 {
    margin: 0 0 18px;
    color: var(--btf-black);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}


/* ============================================================
   EYEBROW
============================================================ */

.candiac-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
    color: var(--btf-green-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}


.candiac-eyebrow::before {
    width: 23px;
    height: 2px;
    content: "";
    background: var(--btf-green);
}


.candiac-eyebrow-light {
    color: rgba(255, 255, 255, 0.68);
}


/* ============================================================
   TEXTE
============================================================ */

.candiac-text {
    color: #525652;
    font-size: 15px;
    line-height: 1.2;
}


.candiac-text a {
    position: relative;
    color: var(--btf-green-dark);
    font-weight: 700;
}


.candiac-text a::after {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 1px;
    content: "";
    background: var(--btf-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}


.candiac-text a:hover::after {
    transform: scaleX(1);
}


.candiac-text-light {
    color: rgba(255, 255, 255, 0.68);
}


.candiac-text-light a {
    color: #ffffff;
}


.candiac-lead {
    position: relative;
    margin-bottom: 22px !important;
    padding-left: 15px;
    color: #252825;
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
}


.candiac-lead::before {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 3px;
    content: "";
    background: var(--btf-green);
}


/* ============================================================
   BOUTONS
============================================================ */

.candiac-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}


.candiac-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 48px;
    padding: 0 20px;
    overflow: hidden;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 800;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.candiac-btn span,
.candiac-btn i {
    position: relative;
    z-index: 2;
}


.candiac-btn i {
    transition: transform 0.3s ease;
}


.candiac-btn:hover i {
    transform: translateX(4px);
}


.candiac-btn-primary {
    color: #ffffff;
    background: #111311;
    border-color: #111311;
}


.candiac-btn-primary::before {
    position: absolute;
    inset: 0;
    content: "";
    background: var(--btf-green);
    transform: translateX(-102%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


.candiac-btn-primary:hover {
    color: #ffffff;
    border-color: var(--btf-green);
    transform: translateY(-2px);
}


.candiac-btn-primary:hover::before {
    transform: translateX(0);
}


.candiac-btn-green {
    color: #ffffff;
    background: var(--btf-green);
    border-color: var(--btf-green);
}


.candiac-btn-green:hover {
    color: #ffffff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.42);
    transform: translateY(-2px);
}


/* ============================================================
   INTRO
============================================================ */

.candiac-intro {
    padding: 85px 0 70px;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7f8f7
        );
}


.candiac-intro-content {
    padding-right: 20px;
}


.candiac-main-visual {
    position: relative;
    padding: 9px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.10);
}


.candiac-main-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}


.candiac-main-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.7s ease;
}


.candiac-main-visual:hover .candiac-main-image img {
    transform: scale(1.035);
}


.candiac-main-card {
    position: absolute;
    right: -18px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 17px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #171917,
            #090a09
        );
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22);
}


.candiac-main-card-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    background: var(--btf-green);
    border-radius: 50%;
}


.candiac-main-card small {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}


.candiac-main-card strong {
    display: block;
    font-size: 12px;
}


/* ============================================================
   RÉASSURANCE
============================================================ */

.candiac-trust-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: 55px;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
}


.candiac-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 65px;
    padding: 12px;
    color: #424542;
    background: #ffffff;
    font-size: 11px;
    font-weight: 700;
}


.candiac-trust-item i {
    color: var(--btf-green);
    font-size: 16px;
}


/* ============================================================
   INSTALLATION
============================================================ */

.candiac-installation {
    padding: 90px 0;
    background: #ffffff;
}


.candiac-framed-image {
    position: relative;
    height: 455px;
    padding: 8px;
    background: #f5f6f5;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}


.candiac-framed-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.candiac-frame-line {
    position: absolute;
    top: 30px;
    left: -1px;
    width: 3px;
    height: 105px;
    background: var(--btf-green);
}


.candiac-installation-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
}


.candiac-installation-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 11px 13px;
    background: #f7f8f7;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #414441;
    font-size: 11.5px;
    font-weight: 700;
}


.candiac-installation-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--btf-green);
    background: rgba(32, 173, 54, 0.08);
    border-radius: 50%;
}


/* ============================================================
   MATÉRIAUX
============================================================ */

.candiac-materials {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #171917,
            #090a09
        );
}


.candiac-materials::before {
    position: absolute;
    top: -170px;
    left: -150px;
    width: 420px;
    height: 420px;
    content: "";
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(32, 173, 54, 0.14),
            transparent 68%
        );
}


.candiac-materials h2 {
    color: #ffffff;
}


.candiac-dark-content {
    position: relative;
    z-index: 2;
    padding-right: 20px;
}


.candiac-material-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 22px;
}


.candiac-material-benefit {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    font-weight: 700;
}


.candiac-material-benefit i {
    color: var(--btf-green);
}


.candiac-dark-image {
    position: relative;
    height: 500px;
    padding: 9px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.30);
}


.candiac-dark-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.candiac-dark-accent {
    position: absolute;
    right: -1px;
    bottom: 40px;
    width: 3px;
    height: 110px;
    background: var(--btf-green);
}


/* ============================================================
   MODÈLES
============================================================ */

.candiac-models {
    padding: 90px 0;
    background:
        linear-gradient(
            180deg,
            #f7f8f7,
            #ffffff
        );
}


.candiac-models-image {
    position: relative;
    height: 480px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.09);
}


.candiac-models-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.candiac-models-image-label {
    position: absolute;
    right: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    color: #ffffff;
    background: rgba(10, 12, 10, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.13);
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.candiac-models-image-label i {
    color: var(--btf-green);
}


/* ============================================================
   LIENS MODÈLES
============================================================ */

.candiac-model-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 23px;
}


.candiac-model-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 49px;
    padding: 8px 12px;
    color: #3e413e;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 11.5px;
    font-weight: 700;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.candiac-model-link:hover {
    color: #242624;
    border-color: rgba(32, 173, 54, 0.25);
    transform: translateX(4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}


.candiac-model-link-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--btf-green);
    background: rgba(32, 173, 54, 0.08);
    border-radius: 50%;
}


.candiac-model-link > i:last-child {
    margin-left: auto;
    color: var(--btf-green);
    font-size: 10px;
}


/* ============================================================
   CTA FINAL
============================================================ */

.candiac-final-cta {
    position: relative;
    padding: 65px 0;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #131513,
            #080a08
        );
}


.candiac-final-cta::after {
    position: absolute;
    top: -140px;
    right: -90px;
    width: 390px;
    height: 390px;
    content: "";
    border: 1px solid rgba(32, 173, 54, 0.13);
    border-radius: 50%;
}


.candiac-final-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}


.candiac-final-content {
    max-width: 720px;
}


.candiac-final-content h2 {
    margin-bottom: 12px;
    color: #ffffff;
}


.candiac-final-content p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 14px;
}


.candiac-final-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}


/* ============================================================
   TÉLÉPHONE
============================================================ */

.candiac-phone-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 50px;
    padding: 8px 14px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.candiac-phone-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(32, 173, 54, 0.50);
    transform: translateY(-2px);
}


.candiac-phone-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--btf-green);
    border-radius: 50%;
}


.candiac-phone-btn small {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}


.candiac-phone-btn strong {
    color: #ffffff;
    font-size: 13px;
}


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

@media (max-width: 1199.98px) {

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

    .candiac-final-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 991.98px) {

    .candiac-intro,
    .candiac-installation,
    .candiac-materials,
    .candiac-models {
        padding: 65px 0;
    }

    .candiac-intro-content,
    .candiac-dark-content {
        padding-right: 0;
    }

    .candiac-main-card {
        right: 15px;
    }

    .candiac-framed-image,
    .candiac-dark-image,
    .candiac-models-image {
        height: 420px;
    }

}


@media (max-width: 767.98px) {

    .candiac-page h1,
    .candiac-page h2 {
        font-size: 26px;
    }

    .candiac-installation-points,
    .candiac-material-benefits {
        grid-template-columns: 1fr;
    }

    .candiac-final-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .candiac-phone-btn,
    .candiac-final-actions .candiac-btn {
        width: 100%;
    }

}


@media (max-width: 500px) {

    .candiac-page p {
        text-align: left;
    }

    .candiac-page h1,
    .candiac-page h2 {
        font-size: 24px;
    }

    .candiac-intro,
    .candiac-installation,
    .candiac-materials,
    .candiac-models {
        padding: 50px 0;
    }

    .candiac-main-card {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 7px;
    }

    .candiac-trust-row {
        grid-template-columns: 1fr;
        margin-top: 35px;
    }

    .candiac-framed-image,
    .candiac-dark-image,
    .candiac-models-image {
        height: 330px;
    }

    .candiac-final-cta {
        padding: 55px 0;
    }

}





/* ============================================================
   PAGE BALCONS RIVE-SUD
============================================================ */

.southshore-page {
    overflow: hidden;
}


.southshore-page p {
    margin: 0 0 10px;
    line-height: 1.2;
    text-align: justify;
}


.southshore-page h1,
.southshore-page h2 {
    margin: 0 0 18px;
    color: var(--btf-black);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}


/* ============================================================
   EYEBROW
============================================================ */

.southshore-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
    color: var(--btf-green-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}


.southshore-eyebrow::before {
    width: 23px;
    height: 2px;
    content: "";
    background: var(--btf-green);
}


.southshore-eyebrow-light {
    color: rgba(255, 255, 255, 0.68);
}


/* ============================================================
   TEXTE
============================================================ */

.southshore-text {
    color: #525652;
    font-size: 15px;
    line-height: 1.2;
}


.southshore-text-light {
    color: rgba(255, 255, 255, 0.68);
}


.southshore-lead {
    position: relative;
    margin-bottom: 22px !important;
    padding-left: 15px;
    color: #252825;
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
}


.southshore-lead::before {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 3px;
    content: "";
    background: var(--btf-green);
}


/* ============================================================
   BOUTONS
============================================================ */

.southshore-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}


.southshore-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 48px;
    padding: 0 20px;
    overflow: hidden;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 800;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.southshore-btn span,
.southshore-btn i {
    position: relative;
    z-index: 2;
}


.southshore-btn i {
    transition: transform 0.3s ease;
}


.southshore-btn:hover i {
    transform: translateX(4px);
}


.southshore-btn-primary {
    color: #ffffff;
    background: #111311;
    border-color: #111311;
}


.southshore-btn-primary::before {
    position: absolute;
    inset: 0;
    content: "";
    background: var(--btf-green);
    transform: translateX(-102%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


.southshore-btn-primary:hover {
    color: #ffffff;
    border-color: var(--btf-green);
    transform: translateY(-2px);
}


.southshore-btn-primary:hover::before {
    transform: translateX(0);
}


.southshore-btn-green {
    color: #ffffff;
    background: var(--btf-green);
    border-color: var(--btf-green);
}


.southshore-btn-green:hover {
    color: #ffffff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.42);
    transform: translateY(-2px);
}


/* ============================================================
   INTRODUCTION
============================================================ */

.southshore-intro {
    padding: 85px 0 90px;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7f8f7
        );
}


.southshore-intro-content {
    padding-right: 20px;
}


.southshore-main-visual {
    position: relative;
    padding: 9px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.10);
}


.southshore-main-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}


.southshore-main-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.7s ease;
}


.southshore-main-visual:hover .southshore-main-image img {
    transform: scale(1.035);
}


.southshore-main-card {
    position: absolute;
    right: -18px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: 260px;
    padding: 14px 17px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #161816,
            #090a09
        );
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22);
}


.southshore-main-card-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    background: var(--btf-green);
    border-radius: 50%;
}


.southshore-main-card small {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}


.southshore-main-card strong {
    display: block;
    font-size: 12px;
    line-height: 1.2;
}


/* ============================================================
   DURABILITÉ
============================================================ */

.southshore-durability {
    padding: 90px 0;
    background: #ffffff;
}


.southshore-framed-image {
    position: relative;
    height: 460px;
    padding: 8px;
    background: #f5f6f5;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}


.southshore-framed-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.southshore-image-line {
    position: absolute;
    top: 30px;
    left: -1px;
    width: 3px;
    height: 105px;
    background: var(--btf-green);
}


/* ============================================================
   AVANTAGES
============================================================ */

.southshore-benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
}


.southshore-benefit-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 11px 13px;
    background: #f7f8f7;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #414441;
    font-size: 11.5px;
    font-weight: 700;
}


.southshore-benefit-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--btf-green);
    background: rgba(32, 173, 54, 0.08);
    border-radius: 50%;
}


/* ============================================================
   MODÈLES
============================================================ */

.southshore-models {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #171917,
            #090a09
        );
}


.southshore-models::before {
    position: absolute;
    top: -170px;
    left: -150px;
    width: 420px;
    height: 420px;
    content: "";
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(32, 173, 54, 0.14),
            transparent 68%
        );
}


.southshore-models h2 {
    color: #ffffff;
}


.southshore-dark-content {
    position: relative;
    z-index: 2;
    padding-right: 20px;
}


.southshore-text-light a {
    position: relative;
    color: #ffffff;
    font-weight: 700;
}


.southshore-text-light a::after {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 1px;
    content: "";
    background: var(--btf-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}


.southshore-text-light a:hover::after {
    transform: scaleX(1);
}


.southshore-dark-image {
    position: relative;
    height: 500px;
    padding: 9px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.30);
}


.southshore-dark-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.southshore-dark-accent {
    position: absolute;
    right: -1px;
    bottom: 40px;
    width: 3px;
    height: 110px;
    background: var(--btf-green);
}


/* ============================================================
   LIENS SERVICES
============================================================ */

.southshore-service-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 23px;
}


.southshore-service-link {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    font-weight: 700;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.southshore-service-link > i:first-child {
    color: var(--btf-green);
}


.southshore-service-link > i:last-child {
    margin-left: auto;
    font-size: 10px;
    transition: transform 0.3s ease;
}


.southshore-service-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(32, 173, 54, 0.34);
    transform: translateY(-2px);
}


.southshore-service-link:hover > i:last-child {
    transform: translate(2px, -2px);
}


/* ============================================================
   INSTALLATION
============================================================ */

.southshore-installation {
    padding: 90px 0;
    background: #ffffff;
}


.southshore-installation-image {
    position: relative;
    height: 470px;
    padding: 8px;
    background: #f5f6f5;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.09);
}


.southshore-installation-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.southshore-installation-badge {
    position: absolute;
    right: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    color: #ffffff;
    background: rgba(10, 12, 10, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.13);
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.southshore-installation-badge i {
    color: var(--btf-green);
}


/* ============================================================
   POINTS QUALITÉ
============================================================ */

.southshore-quality-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}


.southshore-quality-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    color: #363936;
    background: #f5f7f5;
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 11px;
    font-weight: 700;
}


.southshore-quality-item i {
    color: var(--btf-green);
}


/* ============================================================
   CTA FINAL
============================================================ */

.southshore-final-cta {
    position: relative;
    padding: 65px 0;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #131513,
            #080a08
        );
}


.southshore-final-cta::after {
    position: absolute;
    top: -140px;
    right: -90px;
    width: 390px;
    height: 390px;
    content: "";
    border: 1px solid rgba(32, 173, 54, 0.13);
    border-radius: 50%;
}


.southshore-final-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}


.southshore-final-content {
    max-width: 720px;
}


.southshore-final-content h2 {
    margin-bottom: 12px;
    color: #ffffff;
}


.southshore-final-content p {
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 14px;
}


.southshore-final-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}


/* ============================================================
   TÉLÉPHONE
============================================================ */

.southshore-phone-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 50px;
    padding: 8px 14px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.southshore-phone-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(32, 173, 54, 0.50);
    transform: translateY(-2px);
}


.southshore-phone-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--btf-green);
    border-radius: 50%;
}


.southshore-phone-btn small {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}


.southshore-phone-btn strong {
    color: #ffffff;
    font-size: 13px;
}


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

@media (max-width: 1199.98px) {

    .southshore-final-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 991.98px) {

    .southshore-intro,
    .southshore-durability,
    .southshore-models,
    .southshore-installation {
        padding: 65px 0;
    }

    .southshore-intro-content,
    .southshore-dark-content {
        padding-right: 0;
    }

    .southshore-main-card {
        right: 15px;
    }

    .southshore-framed-image,
    .southshore-dark-image,
    .southshore-installation-image {
        height: 420px;
    }

}


@media (max-width: 767.98px) {

    .southshore-page h1,
    .southshore-page h2 {
        font-size: 26px;
    }

    .southshore-benefit-grid,
    .southshore-service-links {
        grid-template-columns: 1fr;
    }

    .southshore-final-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .southshore-phone-btn,
    .southshore-final-actions .southshore-btn {
        width: 100%;
    }

}


@media (max-width: 500px) {

    .southshore-page p {
        text-align: left;
    }

    .southshore-page h1,
    .southshore-page h2 {
        font-size: 24px;
    }

    .southshore-intro,
    .southshore-durability,
    .southshore-models,
    .southshore-installation {
        padding: 50px 0;
    }

    .southshore-main-card {
        position: relative;
        right: auto;
        bottom: auto;
        max-width: none;
        margin-top: 7px;
    }

    .southshore-framed-image,
    .southshore-dark-image,
    .southshore-installation-image {
        height: 330px;
    }

    .southshore-quality-points {
        align-items: stretch;
        flex-direction: column;
    }

    .southshore-quality-item {
        width: 100%;
    }

    .southshore-final-cta {
        padding: 55px 0;
    }

}


/* ============================================================
   PAGE ESCALIERS
============================================================ */

.stairs-page {
    overflow: hidden;
}


.stairs-page p {
    margin: 0 0 10px;
    line-height: 1.2;
    text-align: justify;
}


.stairs-page h1,
.stairs-page h2 {
    margin: 0 0 18px;
    color: var(--btf-black);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}


.stairs-page h3 {
    margin: 0;
    color: var(--btf-black);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
}


/* ============================================================
   EYEBROW
============================================================ */

.stairs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
    color: var(--btf-green-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}


.stairs-eyebrow::before {
    width: 23px;
    height: 2px;
    content: "";
    background: var(--btf-green);
}


.stairs-eyebrow-light {
    color: rgba(255, 255, 255, 0.68);
}


/* ============================================================
   TEXTE
============================================================ */

.stairs-text {
    color: #525652;
    font-size: 15px;
    line-height: 1.2;
}


.stairs-text-light {
    color: rgba(255, 255, 255, 0.68);
}


/* ============================================================
   BOUTONS
============================================================ */

.stairs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}


.stairs-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 48px;
    padding: 0 20px;
    overflow: hidden;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 800;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.stairs-btn span,
.stairs-btn i {
    position: relative;
    z-index: 2;
}


.stairs-btn i {
    transition: transform 0.3s ease;
}


.stairs-btn:hover i {
    transform: translateX(4px);
}


.stairs-btn-primary {
    color: #ffffff;
    background: #111311;
    border-color: #111311;
}


.stairs-btn-primary::before {
    position: absolute;
    inset: 0;
    content: "";
    background: var(--btf-green);
    transform: translateX(-102%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


.stairs-btn-primary:hover {
    color: #ffffff;
    border-color: var(--btf-green);
    transform: translateY(-2px);
}


.stairs-btn-primary:hover::before {
    transform: translateX(0);
}


.stairs-btn-green {
    color: #ffffff;
    background: var(--btf-green);
    border-color: var(--btf-green);
}


.stairs-btn-green:hover {
    color: #ffffff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.42);
    transform: translateY(-2px);
}


/* ============================================================
   INTRO
============================================================ */

.stairs-intro {
    padding: 85px 0 90px;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f8f7 100%
        );
}


.stairs-intro-content {
    padding-right: 20px;
}


.stairs-main-visual {
    position: relative;
    padding: 9px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.10);
}


.stairs-main-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}


.stairs-main-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.7s ease;
}


.stairs-main-visual:hover .stairs-main-image img {
    transform: scale(1.035);
}


.stairs-main-badge {
    position: absolute;
    right: -16px;
    bottom: 28px;
    max-width: 240px;
    padding: 14px 17px;
    color: #ffffff;
    background: #111311;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22);
}


.stairs-main-badge span {
    display: block;
    margin-bottom: 4px;
    color: var(--btf-green);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}


.stairs-main-badge strong {
    font-size: 12px;
    line-height: 1.2;
}


/* ============================================================
   MODÈLES
============================================================ */

.stairs-models {
    padding: 90px 0;
    background: #ffffff;
}


.stairs-framed-image {
    position: relative;
    height: 450px;
    padding: 8px;
    background: #f5f6f5;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}


.stairs-framed-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.stairs-frame-accent {
    position: absolute;
    top: 28px;
    left: -1px;
    width: 3px;
    height: 95px;
    background: var(--btf-green);
}


.stairs-finishes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 24px;
}


.stairs-finish-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    background: #f6f8f6;
    border: 1px solid rgba(0, 0, 0, 0.05);
}


.stairs-finish-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--btf-green);
    background: rgba(32, 173, 54, 0.08);
    border-radius: 50%;
}


.stairs-finish-item strong,
.stairs-finish-item span {
    display: block;
}


.stairs-finish-item strong {
    margin-bottom: 3px;
    font-size: 12px;
}


.stairs-finish-item div > span {
    color: #6a6d6a;
    font-size: 10.5px;
}


/* ============================================================
   AVANTAGES
============================================================ */

.stairs-benefits {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #171917,
            #090a09
        );
}


.stairs-benefits h2 {
    color: #ffffff;
}


.stairs-dark-content {
    padding-right: 20px;
}


.stairs-benefit-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 22px;
}


.stairs-benefit-point {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    font-weight: 700;
}


.stairs-benefit-point i {
    color: var(--btf-green);
}


.stairs-dark-image {
    position: relative;
    height: 470px;
    padding: 9px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
}


.stairs-dark-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.stairs-dark-line {
    position: absolute;
    right: -1px;
    bottom: 40px;
    width: 3px;
    height: 105px;
    background: var(--btf-green);
}


/* ============================================================
   SERVICES
============================================================ */

.stairs-services {
    padding: 90px 0;
    background: #ffffff;
}


.stairs-services-image {
    position: relative;
    height: 460px;
    padding: 8px;
    background: #f5f6f5;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}


.stairs-services-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.stairs-services-corner {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 70px;
    height: 70px;
    border-top: 3px solid var(--btf-green);
    border-right: 3px solid var(--btf-green);
}


.stairs-services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 23px;
}


.stairs-service-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-height: 77px;
    padding: 13px;
    background: #f7f8f7;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #444744;
    font-size: 12px;
    line-height: 1.2;
}


.stairs-service-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--btf-green);
    background: rgba(32, 173, 54, 0.08);
    border-radius: 50%;
}


/* ============================================================
   CARROUSEL RÉALISATIONS
============================================================ */

.stairs-projects {
    padding: 85px 0 90px;
    background:
        linear-gradient(
            180deg,
            #f7f8f7,
            #ffffff
        );
}


.stairs-projects-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}


.stairs-projects-heading > div:first-child {
    max-width: 680px;
}


.stairs-projects-heading p {
    margin: 0;
    color: #555955;
    font-size: 14px;
}


.stairs-projects-navigation {
    display: flex;
    gap: 8px;
}


.stairs-projects-arrow {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--btf-black);
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}


.stairs-projects-arrow:hover {
    color: #ffffff;
    background: var(--btf-green);
    border-color: var(--btf-green);
    transform: translateY(-2px);
}


.stairs-projects-slider {
    width: 100%;
    overflow: hidden;
}


.stairs-projects-track {
    display: flex;
    gap: 16px;
    width: max-content;
    transform: translateX(0);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}


.stairs-project-card {
    position: relative;
    flex: 0 0 calc((min(1320px, 100vw - 30px) - 48px) / 4);
    aspect-ratio: 4 / 3;
    padding: 7px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


.stairs-project-card::after {
    position: absolute;
    right: 7px;
    bottom: 0;
    left: 7px;
    height: 3px;
    content: "";
    background:
        linear-gradient(
            90deg,
            var(--btf-green),
            transparent
        );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}


.stairs-project-card:hover {
    transform: translateY(-5px);
    border-color: rgba(32, 173, 54, 0.22);
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.11);
}


.stairs-project-card:hover::after {
    transform: scaleX(1);
}


.stairs-project-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.35s ease;
}


.stairs-project-card:hover img {
    transform: scale(1.065);
    filter: brightness(0.84);
}


.stairs-project-overlay {
    position: absolute;
    inset: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 9, 7, 0.18);
    opacity: 0;
    transition: opacity 0.3s ease;
}


.stairs-project-card:hover .stairs-project-overlay {
    opacity: 1;
}


.stairs-project-zoom {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(10, 12, 10, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 50%;
    transform: scale(0.75);
    transition: transform 0.3s ease;
}


.stairs-project-card:hover .stairs-project-zoom {
    transform: scale(1);
}


/* ============================================================
   PROGRESSION
============================================================ */

.stairs-projects-progress {
    width: 100%;
    height: 2px;
    margin-top: 28px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.07);
}


.stairs-projects-progress-bar {
    display: block;
    width: 33%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            var(--btf-green),
            rgba(32, 173, 54, 0.35)
        );
    transition: width 0.45s ease;
}


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

.stairs-projects-lightbox {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.stairs-projects-lightbox.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}


.stairs-projects-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 6, 5, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.stairs-projects-lightbox-content {
    position: relative;
    z-index: 2;
    width: min(88vw, 1400px);
    height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}


.stairs-projects-lightbox-content img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.40);
}


.stairs-projects-lightbox-close,
.stairs-projects-lightbox-nav {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    cursor: pointer;
    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}


.stairs-projects-lightbox-close {
    top: 24px;
    right: 28px;
    width: 46px;
    height: 46px;
}


.stairs-projects-lightbox-close:hover,
.stairs-projects-lightbox-nav:hover {
    background: var(--btf-green);
    border-color: var(--btf-green);
}


.stairs-projects-lightbox-nav {
    top: 50%;
    width: 52px;
    height: 52px;
    transform: translateY(-50%);
}


.stairs-projects-lightbox-prev {
    left: 28px;
}


.stairs-projects-lightbox-next {
    right: 28px;
}


body.stairs-projects-lightbox-open {
    overflow: hidden;
}


/* ============================================================
   CTA FINAL
============================================================ */

.stairs-final-cta {
    padding: 65px 0;
    background:
        linear-gradient(
            135deg,
            #131513,
            #080a08
        );
}


.stairs-final-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}


.stairs-final-content {
    max-width: 700px;
}


.stairs-final-content h2 {
    color: #ffffff;
    margin-bottom: 12px;
}


.stairs-final-content p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 14px;
}


.stairs-final-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}


.stairs-phone-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 50px;
    padding: 8px 14px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}


.stairs-phone-btn:hover {
    color: #ffffff;
    border-color: rgba(32, 173, 54, 0.50);
}


.stairs-phone-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--btf-green);
    border-radius: 50%;
}


.stairs-phone-btn small {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    text-transform: uppercase;
}


.stairs-phone-btn strong {
    color: #ffffff;
    font-size: 13px;
}


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

@media (max-width: 1199.98px) {

    .stairs-project-card {
        flex-basis: calc((100vw - 96px) / 3);
    }

    .stairs-final-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 991.98px) {

    .stairs-intro,
    .stairs-models,
    .stairs-benefits,
    .stairs-services,
    .stairs-projects {
        padding: 65px 0;
    }

    .stairs-intro-content,
    .stairs-dark-content {
        padding-right: 0;
    }

}


@media (max-width: 767.98px) {

    .stairs-page h1,
    .stairs-page h2 {
        font-size: 26px;
    }

    .stairs-finishes,
    .stairs-services-grid {
        grid-template-columns: 1fr;
    }

    .stairs-projects-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .stairs-project-card {
        flex-basis: calc((100vw - 58px) / 2);
    }

    .stairs-projects-lightbox-content {
        width: 100vw;
        height: 80vh;
        padding: 55px 15px 70px;
    }

    .stairs-projects-lightbox-nav {
        top: auto;
        bottom: 18px;
        width: 44px;
        height: 44px;
        transform: none;
    }

    .stairs-projects-lightbox-prev {
        left: 18px;
    }

    .stairs-projects-lightbox-next {
        right: 18px;
    }

    .stairs-final-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .stairs-phone-btn,
    .stairs-final-actions .stairs-btn {
        width: 100%;
    }

}


@media (max-width: 500px) {

    .stairs-page p {
        text-align: left;
    }

    .stairs-page h1,
    .stairs-page h2 {
        font-size: 24px;
    }

    .stairs-intro,
    .stairs-models,
    .stairs-benefits,
    .stairs-services,
    .stairs-projects {
        padding: 50px 0;
    }

    .stairs-framed-image,
    .stairs-dark-image,
    .stairs-services-image {
        height: 330px;
    }

    .stairs-benefit-points {
        grid-template-columns: 1fr;
    }

    .stairs-project-card {
        flex-basis: calc(100vw - 58px);
    }

}



/* ============================================================
   PAGE BALCONS EN ALUMINIUM
============================================================ */

.aluminum-page {

    overflow: hidden;

}


.aluminum-page p {

    margin:
        0
        0
        10px;

    line-height: 1.2;

    text-align: justify;

}


.aluminum-page h1,
.aluminum-page h2 {

    margin:
        0
        0
        18px;

    color: var(--btf-black);

    font-size: 30px;

    font-weight: 700;

    line-height: 1.1;

}


.aluminum-page h3 {

    margin:
        0
        0
        12px;

    color: var(--btf-black);

    font-size: 18px;

    font-weight: 700;

    line-height: 1.1;

}


/* ============================================================
   EYEBROW
============================================================ */

.aluminum-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 11px;

    color: var(--btf-green-dark);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.10em;

    text-transform: uppercase;

}


.aluminum-eyebrow::before {

    width: 23px;
    height: 2px;

    content: "";

    background: var(--btf-green);

}


.aluminum-eyebrow-light {

    color:
        rgba(255, 255, 255, 0.68);

}


/* ============================================================
   TEXTE
============================================================ */

.aluminum-text {

    color: #525652;

    font-size: 15px;

    line-height: 1.2;

}


.aluminum-text-light {

    color:
        rgba(255, 255, 255, 0.68);

}


/* ============================================================
   BOUTONS
============================================================ */

.aluminum-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 25px;

}


.aluminum-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 48px;

    padding:
        0
        20px;

    overflow: hidden;

    border:
        1px solid transparent;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.025em;

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

}


.aluminum-btn span,
.aluminum-btn i {

    position: relative;

    z-index: 2;

}


.aluminum-btn i {

    transition:
        transform 0.3s ease;

}


.aluminum-btn:hover i {

    transform:
        translateX(4px);

}


.aluminum-btn-primary {

    color: #ffffff;

    background: #111311;

    border-color: #111311;

}


.aluminum-btn-primary::before {

    position: absolute;

    inset: 0;

    content: "";

    background: var(--btf-green);

    transform:
        translateX(-102%);

    transition:
        transform 0.4s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.aluminum-btn-primary:hover {

    color: #ffffff;

    border-color: var(--btf-green);

    transform:
        translateY(-2px);

}


.aluminum-btn-primary:hover::before {

    transform:
        translateX(0);

}


.aluminum-btn-green {

    color: #ffffff;

    background: var(--btf-green);

    border-color: var(--btf-green);

}


.aluminum-btn-green:hover {

    color: #ffffff;

    background: transparent;

    border-color:
        rgba(255, 255, 255, 0.42);

    transform:
        translateY(-2px);

}


/* ============================================================
   INTRODUCTION
============================================================ */

.aluminum-intro {

    position: relative;

    padding:
        85px
        0
        95px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7f8f7
        );

}


.aluminum-intro-content {

    padding-right: 20px;

}


/* ============================================================
   VISUEL INTRO
============================================================ */

.aluminum-intro-visual {

    position: relative;

    min-height: 510px;

}


.aluminum-intro-image {

    position: absolute;

    overflow: hidden;

    background: #ffffff;

    border:
        8px solid
        #ffffff;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.12);

}


.aluminum-intro-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.7s ease;

}


.aluminum-intro-image:hover img {

    transform:
        scale(1.04);

}


.aluminum-intro-image-main {

    top: 0;
    right: 0;

    width: 82%;
    height: 390px;

}


.aluminum-intro-image-small {

    bottom: 0;
    left: 0;

    z-index: 2;

    width: 47%;
    height: 230px;

}


.aluminum-intro-badge {

    position: absolute;

    right: 18px;
    bottom: 24px;

    z-index: 3;

    max-width: 260px;

    padding:
        14px
        17px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #171917,
            #090a09
        );

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.23);

}


.aluminum-intro-badge span {

    display: block;

    margin-bottom: 4px;

    color: var(--btf-green);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.aluminum-intro-badge strong {

    display: block;

    font-size: 12px;

    line-height: 1.2;

}


/* ============================================================
   FOURNISSEURS
============================================================ */

.aluminum-suppliers {

    padding:
        90px
        0;

    background: #ffffff;

}


.aluminum-framed-image {

    position: relative;

    height: 460px;

    padding: 8px;

    background: #f5f6f5;

    border:
        1px solid
        rgba(0, 0, 0, 0.06);

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

}


.aluminum-framed-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


.aluminum-framed-line {

    position: absolute;

    top: 30px;
    left: -1px;

    width: 3px;
    height: 105px;

    background: var(--btf-green);

}


/* ============================================================
   MINI FEATURES
============================================================ */

.aluminum-mini-features {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 24px;

}


.aluminum-mini-feature {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px
        12px;

    color: #363936;

    background: #f5f7f5;

    border:
        1px solid
        rgba(0, 0, 0, 0.05);

    font-size: 11px;

    font-weight: 700;

}


.aluminum-mini-feature i {

    color: var(--btf-green);

}


/* ============================================================
   DURABILITÉ
============================================================ */

.aluminum-durability {

    position: relative;

    padding:
        90px
        0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #171917,
            #090a09
        );

}


.aluminum-durability::before {

    position: absolute;

    top: -180px;
    left: -160px;

    width: 430px;
    height: 430px;

    content: "";

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(32, 173, 54, 0.14),
            transparent 68%
        );

}


.aluminum-dark-content {

    position: relative;

    z-index: 2;

    padding-right: 20px;

}


.aluminum-durability h2 {

    color: #ffffff;

}


.aluminum-dark-image {

    position: relative;

    height: 500px;

    padding: 9px;

    background:
        rgba(255, 255, 255, 0.04);

    border:
        1px solid
        rgba(255, 255, 255, 0.11);

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.30);

}


.aluminum-dark-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


.aluminum-dark-accent {

    position: absolute;

    right: -1px;
    bottom: 40px;

    width: 3px;
    height: 110px;

    background: var(--btf-green);

}


/* ============================================================
   DESIGN / PERSONNALISATION
============================================================ */

.aluminum-design {

    padding:
        90px
        0;

    background:
        #f7f8f7;

}


.aluminum-section-heading {

    max-width: 720px;

    margin-bottom: 30px;

}


.aluminum-design-image {

    position: relative;

    height: 100%;

    min-height: 430px;

    padding: 8px;

    background: #ffffff;

    border:
        1px solid
        rgba(0, 0, 0, 0.06);

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

}


.aluminum-design-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


.aluminum-design-caption {

    position: absolute;

    right: 22px;
    bottom: 22px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        11px
        14px;

    color: #ffffff;

    background:
        rgba(10, 12, 10, 0.84);

    border:
        1px solid
        rgba(255, 255, 255, 0.13);

    font-size: 11px;

    font-weight: 700;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

}


.aluminum-design-caption i {

    color: var(--btf-green);

}


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

.aluminum-design-card {

    height: 100%;

    padding:
        32px;

    background: #ffffff;

    border:
        1px solid
        rgba(0, 0, 0, 0.06);

    box-shadow:
        0 15px 38px
        rgba(0, 0, 0, 0.06);

}


.aluminum-design-card-icon {

    width: 48px;
    height: 48px;

    display: flex;

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

    margin-bottom: 19px;

    color: #ffffff;

    background: var(--btf-green);

    border-radius: 50%;

    font-size: 17px;

}


/* ============================================================
   OPTIONS
============================================================ */

.aluminum-design-options {

    display: grid;

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

    gap: 9px;

    margin-top: 23px;

}


.aluminum-design-options span {

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        10px
        11px;

    color: #424542;

    background: #f5f7f5;

    font-size: 11px;

    font-weight: 700;

}


.aluminum-design-options i {

    color: var(--btf-green);

}


/* ============================================================
   AVANTAGES
============================================================ */

.aluminum-advantages {

    padding:
        90px
        0;

    background: #ffffff;

}


.aluminum-advantage-grid {

    display: grid;

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

    gap: 11px;

    margin-top: 24px;

}


.aluminum-advantage-item {

    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 58px;

    padding:
        11px
        13px;

    background: #f7f8f7;

    border:
        1px solid
        rgba(0, 0, 0, 0.05);

    color: #414441;

    font-size: 11.5px;

    font-weight: 700;

}


.aluminum-advantage-icon {

    width: 34px;
    height: 34px;

    display: flex;

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

    flex-shrink: 0;

    color: var(--btf-green);

    background:
        rgba(32, 173, 54, 0.08);

    border-radius: 50%;

}


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

.aluminum-final-image {

    position: relative;

    height: 480px;

    padding: 8px;

    background: #f5f6f5;

    border:
        1px solid
        rgba(0, 0, 0, 0.06);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.09);

}


.aluminum-final-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


.aluminum-final-image-corner {

    position: absolute;

    top: -1px;
    right: -1px;

    width: 75px;
    height: 75px;

    border-top:
        3px solid
        var(--btf-green);

    border-right:
        3px solid
        var(--btf-green);

}


/* ============================================================
   CTA FINAL
============================================================ */

.aluminum-final-cta {

    position: relative;

    padding:
        65px
        0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #131513,
            #080a08
        );

}


.aluminum-final-cta::after {

    position: absolute;

    top: -140px;
    right: -90px;

    width: 390px;
    height: 390px;

    content: "";

    border:
        1px solid
        rgba(32, 173, 54, 0.13);

    border-radius: 50%;

}


.aluminum-final-inner {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

}


.aluminum-final-content {

    max-width: 720px;

}


.aluminum-final-content h2 {

    margin-bottom: 12px;

    color: #ffffff;

}


.aluminum-final-content p {

    margin-bottom: 10px;

    color:
        rgba(255, 255, 255, 0.64);

    font-size: 14px;

}


.aluminum-final-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}


/* ============================================================
   TÉLÉPHONE
============================================================ */

.aluminum-phone-btn {

    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 50px;

    padding:
        8px
        14px;

    color: #ffffff;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;

}


.aluminum-phone-btn:hover {

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.06);

    border-color:
        rgba(32, 173, 54, 0.50);

    transform:
        translateY(-2px);

}


.aluminum-phone-icon {

    width: 34px;
    height: 34px;

    display: flex;

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

    color: #ffffff;

    background: var(--btf-green);

    border-radius: 50%;

}


.aluminum-phone-btn small {

    display: block;

    margin-bottom: 2px;

    color:
        rgba(255, 255, 255, 0.45);

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

}


.aluminum-phone-btn strong {

    color: #ffffff;

    font-size: 13px;

}


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

@media (max-width: 1199.98px) {

    .aluminum-final-inner {

        align-items: flex-start;

        flex-direction: column;

    }

}


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

@media (max-width: 991.98px) {

    .aluminum-intro,
    .aluminum-suppliers,
    .aluminum-durability,
    .aluminum-design,
    .aluminum-advantages {

        padding:
            65px
            0;

    }


    .aluminum-intro-content,
    .aluminum-dark-content {

        padding-right: 0;

    }


    .aluminum-intro-visual {

        min-height: 520px;

    }


    .aluminum-framed-image,
    .aluminum-dark-image,
    .aluminum-final-image {

        height: 430px;

    }


    .aluminum-final-actions {

        flex-wrap: wrap;

    }

}


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

@media (max-width: 767.98px) {

    .aluminum-page h1,
    .aluminum-page h2 {

        font-size: 26px;

    }


    .aluminum-intro-visual {

        min-height: 480px;

    }


    .aluminum-intro-image-main {

        width: 88%;
        height: 350px;

    }


    .aluminum-intro-image-small {

        width: 52%;
        height: 205px;

    }


    .aluminum-design-options,
    .aluminum-advantage-grid {

        grid-template-columns: 1fr;

    }


    .aluminum-final-actions {

        width: 100%;

        align-items: stretch;

        flex-direction: column;

    }


    .aluminum-phone-btn,
    .aluminum-final-actions
    .aluminum-btn {

        width: 100%;

    }

}


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

@media (max-width: 500px) {

    .aluminum-page p {

        text-align: left;

    }


    .aluminum-page h1,
    .aluminum-page h2 {

        font-size: 24px;

    }


    .aluminum-intro,
    .aluminum-suppliers,
    .aluminum-durability,
    .aluminum-design,
    .aluminum-advantages {

        padding:
            50px
            0;

    }


    .aluminum-intro-visual {

        min-height: 0;

        display: flex;

        flex-direction: column;

        gap: 8px;

    }


    .aluminum-intro-image {

        position: relative;

        inset: auto;

        width: 100%;
        height: 280px;

    }


    .aluminum-intro-image-small {

        height: 200px;

    }


    .aluminum-intro-badge {

        position: relative;

        right: auto;
        bottom: auto;

        max-width: none;

    }


    .aluminum-framed-image,
    .aluminum-dark-image,
    .aluminum-final-image {

        height: 340px;

    }


    .aluminum-mini-features {

        align-items: stretch;

        flex-direction: column;

    }


    .aluminum-mini-feature {

        width: 100%;

    }


    .aluminum-design-image {

        min-height: 330px;

    }


    .aluminum-design-card {

        padding:
            24px
            21px;

    }


    .aluminum-final-cta {

        padding:
            55px
            0;

    }

}


/* ============================================================
   ACCESSIBILITÉ
============================================================ */

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

    .aluminum-page *,
    .aluminum-page *::before,
    .aluminum-page *::after {

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

    }

}







/* ============================================================
   MODÈLES DE RAMPES D'ALUMINIUM
============================================================ */

.railings-models {

    position: relative;

    padding:
        85px
        0
        90px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f7f8f7 0%,
            #ffffff 100%
        );

}


.railings-models::before {

    position: absolute;

    top: -180px;
    right: -160px;

    width: 420px;
    height: 420px;

    content: "";

    border:
        1px solid
        rgba(32, 173, 54, 0.08);

    border-radius: 50%;

    pointer-events: none;

}


/* ============================================================
   EN-TÊTE
============================================================ */

.railings-models-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;

}


.railings-models-heading > div:first-child {

    max-width: 650px;

}


.railings-models-heading h2 {

    margin-bottom: 12px;

}


.railings-models-heading p {

    margin: 0;

    color: #555955;

    font-size: 14px;

    line-height: 1.2;

    text-align: justify;

}


/* ============================================================
   NAVIGATION
============================================================ */

.railings-models-navigation {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

}


.railings-models-arrow {

    width: 44px;
    height: 44px;

    display: flex;

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

    padding: 0;

    color: var(--btf-black);

    background: #ffffff;

    border:
        1px solid
        rgba(0, 0, 0, 0.09);

    border-radius: 50%;

    cursor: pointer;

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, 0.06);

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;

}


.railings-models-arrow:hover {

    color: #ffffff;

    background: var(--btf-green);

    border-color: var(--btf-green);

    transform:
        translateY(-2px);

}


/* ============================================================
   SLIDER
============================================================ */

.railings-models-slider {

    width: 100%;

    overflow: hidden;

}


.railings-models-track {

    display: flex;

    gap: 16px;

    width: max-content;

    transform:
        translateX(0);

    transition:
        transform 0.55s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* ============================================================
   CARTE MODÈLE
============================================================ */

.railings-model-card {

    position: relative;

    flex:
        0
        0
        calc(
            (min(1320px, 100vw - 30px) - 48px)
            / 4
        );

    min-width: 0;

    padding: 8px;

    overflow: hidden;

    color: var(--btf-black);

    background: #ffffff;

    border:
        1px solid
        rgba(0, 0, 0, 0.07);

    cursor: pointer;

    box-shadow:
        0 12px 32px
        rgba(0, 0, 0, 0.07);

    transition:
        transform 0.35s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        border-color 0.35s ease,
        box-shadow 0.35s ease;

}


.railings-model-card::after {

    position: absolute;

    right: 8px;
    bottom: 0;
    left: 8px;

    height: 3px;

    content: "";

    background:
        linear-gradient(
            90deg,
            var(--btf-green),
            transparent
        );

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform 0.35s ease;

}


.railings-model-card:hover {

    color: var(--btf-black);

    border-color:
        rgba(32, 173, 54, 0.22);

    transform:
        translateY(-5px);

    box-shadow:
        0 22px 45px
        rgba(0, 0, 0, 0.11);

}


.railings-model-card:hover::after {

    transform:
        scaleX(1);

}


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

.railings-model-image {

    position: relative;

    display: block;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #eceeec;

}


.railings-model-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.6s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.railings-model-card:hover
.railings-model-image img {

    transform:
        scale(1.07);

}


/* ============================================================
   OVERLAY
============================================================ */

.railings-model-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(9, 11, 9, 0.30);

    opacity: 0;

    transition:
        opacity 0.3s ease;

}


.railings-model-card:hover
.railings-model-overlay {

    opacity: 1;

}


/* ============================================================
   ZOOM
============================================================ */

.railings-model-zoom {

    width: 46px;
    height: 46px;

    display: flex;

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

    color: #ffffff;

    background:
        rgba(10, 12, 10, 0.70);

    border:
        1px solid
        rgba(255, 255, 255, 0.30);

    border-radius: 50%;

    transform:
        scale(0.75);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        transform 0.3s ease,
        background 0.3s ease;

}


.railings-model-card:hover
.railings-model-zoom {

    transform:
        scale(1);

}


/* ============================================================
   NOM
============================================================ */

.railings-model-name {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding:
        13px
        7px
        9px;

    color: #353835;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.15;

    text-align: center;

}


/* ============================================================
   PROGRESSION
============================================================ */

.railings-models-progress {

    width: 100%;

    height: 2px;

    margin-top: 28px;

    overflow: hidden;

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

}


.railings-models-progress-bar {

    display: block;

    width: 50%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--btf-green),
            rgba(32, 173, 54, 0.35)
        );

    transition:
        width 0.45s ease;

}


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

.railings-models-lightbox {

    position: fixed;

    inset: 0;

    z-index: 6000;

    display: flex;

    align-items: center;

    justify-content: center;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;

}


.railings-models-lightbox.is-open {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

}


.railings-models-lightbox-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(5, 6, 5, 0.75);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

}


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

.railings-models-lightbox-content {

    position: relative;

    z-index: 2;

    width:
        min(620px, 75vw);

    text-align: center;

}


.railings-models-lightbox-image {

    padding: 10px;

    background:
        rgba(255, 255, 255, 0.07);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.42);

}


.railings-models-lightbox-image img {

    width: 100%;

    max-height: 68vh;

    display: block;

    object-fit: contain;

}


.railings-models-lightbox-name {

    margin-top: 16px;

    color:
        rgba(255, 255, 255, 0.86);

    font-size: 13px;

    font-weight: 700;

}


/* ============================================================
   FERMER
============================================================ */

.railings-models-lightbox-close {

    position: absolute;

    top: 24px;
    right: 28px;

    z-index: 5;

    width: 46px;
    height: 46px;

    display: flex;

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

    padding: 0;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 50%;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;

}


.railings-models-lightbox-close:hover {

    background: var(--btf-green);

    border-color: var(--btf-green);

    transform:
        rotate(90deg);

}


/* ============================================================
   FLÈCHES LIGHTBOX
============================================================ */

.railings-models-lightbox-nav {

    position: absolute;

    top: 50%;

    z-index: 5;

    width: 52px;
    height: 52px;

    display: flex;

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

    padding: 0;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 50%;

    cursor: pointer;

    transform:
        translateY(-50%);

    transition:
        background 0.25s ease,
        border-color 0.25s ease;

}


.railings-models-lightbox-prev {

    left: 28px;

}


.railings-models-lightbox-next {

    right: 28px;

}


.railings-models-lightbox-nav:hover {

    background: var(--btf-green);

    border-color: var(--btf-green);

}


body.railings-models-lightbox-open {

    overflow: hidden;

}


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

@media (max-width: 1199.98px) {

    .railings-model-card {

        flex-basis:
            calc(
                (100vw - 96px)
                / 3
            );

    }

}


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

@media (max-width: 767.98px) {

    .railings-models {

        padding:
            60px
            0
            65px;

    }


    .railings-models-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

    }


    .railings-model-card {

        flex-basis:
            calc(
                (100vw - 58px)
                / 2
            );

    }


    .railings-models-lightbox-content {

        width: 75vw;

    }


    .railings-models-lightbox-nav {

        top: auto;
        bottom: 20px;

        width: 44px;
        height: 44px;

        transform: none;

    }


    .railings-models-lightbox-prev {

        left: 18px;

    }


    .railings-models-lightbox-next {

        right: 18px;

    }

}


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

@media (max-width: 500px) {

    .railings-models {

        padding:
            50px
            0
            55px;

    }


    .railings-models-heading p {

        text-align: left;

    }


    .railings-model-card {

        flex-basis:
            calc(
                100vw - 58px
            );

    }


    .railings-models-navigation {

        width: 100%;

        justify-content: flex-end;

    }


    .railings-models-lightbox-content {

        width: 82vw;

    }


    .railings-models-lightbox-close {

        top: 15px;
        right: 15px;

        width: 42px;
        height: 42px;

    }

}






/* ============================================================
   COULEURS OFFERTES
============================================================ */

.fiberglass-colors {

    position: relative;

    padding:
        85px
        0
        90px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f7f8f7 0%,
            #ffffff 100%
        );

}


.fiberglass-colors::before {

    position: absolute;

    top: -180px;
    right: -160px;

    width: 420px;
    height: 420px;

    content: "";

    border:
        1px solid
        rgba(32, 173, 54, 0.08);

    border-radius: 50%;

    pointer-events: none;

}


/* ============================================================
   EN-TÊTE
============================================================ */

.fiberglass-colors-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;

}


.fiberglass-colors-heading > div:first-child {

    max-width: 650px;

}


.fiberglass-colors-heading h2 {

    margin-bottom: 12px;

}


.fiberglass-colors-heading p {

    margin: 0;

    color: #555955;

    font-size: 14px;

    line-height: 1.2;

    text-align: justify;

}


/* ============================================================
   NAVIGATION
============================================================ */

.fiberglass-colors-navigation {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

}


.fiberglass-colors-arrow {

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    color: var(--btf-black);

    background: #ffffff;

    border:
        1px solid
        rgba(0, 0, 0, 0.09);

    border-radius: 50%;

    cursor: pointer;

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, 0.06);

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;

}


.fiberglass-colors-arrow:hover {

    color: #ffffff;

    background: var(--btf-green);

    border-color: var(--btf-green);

    transform:
        translateY(-2px);

}


/* ============================================================
   SLIDER
============================================================ */

.fiberglass-colors-slider {

    width: 100%;

    overflow: hidden;

}


.fiberglass-colors-track {

    display: flex;

    gap: 16px;

    width: max-content;

    transform:
        translateX(0);

    transition:
        transform 0.55s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


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

.fiberglass-color-card {

    position: relative;

    flex:
        0
        0
        calc(
            (min(1320px, 100vw - 30px) - 48px)
            / 4
        );

    min-width: 0;

    padding: 8px;

    overflow: hidden;

    color: var(--btf-black);

    background: #ffffff;

    border:
        1px solid
        rgba(0, 0, 0, 0.07);

    cursor: pointer;

    box-shadow:
        0 12px 32px
        rgba(0, 0, 0, 0.07);

    transition:
        transform 0.35s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        border-color 0.35s ease,
        box-shadow 0.35s ease;

}


.fiberglass-color-card::after {

    position: absolute;

    right: 8px;
    bottom: 0;
    left: 8px;

    height: 3px;

    content: "";

    background:
        linear-gradient(
            90deg,
            var(--btf-green),
            transparent
        );

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform 0.35s ease;

}


.fiberglass-color-card:hover {

    color: var(--btf-black);

    border-color:
        rgba(32, 173, 54, 0.22);

    transform:
        translateY(-5px);

    box-shadow:
        0 22px 45px
        rgba(0, 0, 0, 0.11);

}


.fiberglass-color-card:hover::after {

    transform:
        scaleX(1);

}


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

.fiberglass-color-image {

    position: relative;

    display: block;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #eeeeee;

}


.fiberglass-color-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.6s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.fiberglass-color-card:hover
.fiberglass-color-image img {

    transform:
        scale(1.07);

}


/* ============================================================
   OVERLAY
============================================================ */

.fiberglass-color-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(9, 11, 9, 0.28);

    opacity: 0;

    transition:
        opacity 0.3s ease;

}


.fiberglass-color-card:hover
.fiberglass-color-overlay {

    opacity: 1;

}


/* ============================================================
   ICÔNE ZOOM
============================================================ */

.fiberglass-color-zoom {

    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background:
        rgba(10, 12, 10, 0.70);

    border:
        1px solid
        rgba(255, 255, 255, 0.30);

    border-radius: 50%;

    transform:
        scale(0.75);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        transform 0.3s ease,
        background 0.3s ease;

}


.fiberglass-color-card:hover
.fiberglass-color-zoom {

    transform:
        scale(1);

}


/* ============================================================
   NOM COULEUR
============================================================ */

.fiberglass-color-name {

    display: block;

    min-height: 48px;

    padding:
        13px
        7px
        9px;

    color: #353835;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.15;

    text-align: center;

}


/* ============================================================
   PROGRESSION
============================================================ */

.fiberglass-colors-progress {

    position: relative;

    width: 100%;

    height: 2px;

    margin-top: 28px;

    overflow: hidden;

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

}


.fiberglass-colors-progress-bar {

    display: block;

    width: 25%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--btf-green),
            rgba(32, 173, 54, 0.35)
        );

    transform-origin: left;

    transition:
        width 0.45s ease,
        transform 0.45s ease;

}


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

.fiberglass-colors-lightbox {

    position: fixed;

    inset: 0;

    z-index: 6000;

    display: flex;

    align-items: center;

    justify-content: center;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;

}


.fiberglass-colors-lightbox.is-open {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

}


.fiberglass-colors-lightbox-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(5, 6, 5, 0.74);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

}


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

.fiberglass-colors-lightbox-content {

    position: relative;

    z-index: 2;

    width:
        min(620px, 75vw);

    text-align: center;

}


.fiberglass-colors-lightbox-image {

    padding: 10px;

    background:
        rgba(255, 255, 255, 0.07);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.42);

}


.fiberglass-colors-lightbox-image img {

    width: 100%;

    max-height: 68vh;

    display: block;

    object-fit: contain;

}


.fiberglass-colors-lightbox-name {

    margin-top: 16px;

    color:
        rgba(255, 255, 255, 0.86);

    font-size: 13px;

    font-weight: 700;

}


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

.fiberglass-colors-lightbox-close {

    position: absolute;

    top: 24px;
    right: 28px;

    z-index: 5;

    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 50%;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;

}


.fiberglass-colors-lightbox-close:hover {

    background: var(--btf-green);

    border-color: var(--btf-green);

    transform:
        rotate(90deg);

}


/* ============================================================
   LIGHTBOX FLÈCHES
============================================================ */

.fiberglass-colors-lightbox-nav {

    position: absolute;

    top: 50%;

    z-index: 5;

    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 50%;

    cursor: pointer;

    transform:
        translateY(-50%);

    transition:
        background 0.25s ease,
        border-color 0.25s ease;

}


.fiberglass-colors-lightbox-prev {

    left: 28px;

}


.fiberglass-colors-lightbox-next {

    right: 28px;

}


.fiberglass-colors-lightbox-nav:hover {

    background: var(--btf-green);

    border-color: var(--btf-green);

}


body.fiberglass-colors-lightbox-open {

    overflow: hidden;

}


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

@media (max-width: 1199.98px) {

    .fiberglass-color-card {

        flex-basis:
            calc(
                (100vw - 96px)
                / 3
            );

    }

}


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

@media (max-width: 767.98px) {

    .fiberglass-colors {

        padding:
            60px
            0
            65px;

    }


    .fiberglass-colors-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

    }


    .fiberglass-color-card {

        flex-basis:
            calc(
                (100vw - 58px)
                / 2
            );

    }


    .fiberglass-colors-lightbox-content {

        width: 75vw;

    }


    .fiberglass-colors-lightbox-nav {

        top: auto;
        bottom: 20px;

        width: 44px;
        height: 44px;

        transform: none;

    }


    .fiberglass-colors-lightbox-prev {

        left: 18px;

    }


    .fiberglass-colors-lightbox-next {

        right: 18px;

    }

}


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

@media (max-width: 500px) {

    .fiberglass-colors {

        padding:
            50px
            0
            55px;

    }


    .fiberglass-colors-heading p {

        text-align: left;

    }


    .fiberglass-color-card {

        flex-basis:
            calc(
                100vw - 58px
            );

    }


    .fiberglass-colors-navigation {

        width: 100%;

        justify-content: flex-end;

    }


    .fiberglass-color-name {

        min-height: 44px;

    }


    .fiberglass-colors-lightbox-content {

        width: 82vw;

    }


    .fiberglass-colors-lightbox-close {

        top: 15px;
        right: 15px;

        width: 42px;
        height: 42px;

    }

}






/* ============================================================
   PAGE BALCON EN FIBRE DE VERRE
============================================================ */

.fiberglass-page {

    overflow: hidden;

}


.fiberglass-page p {

    margin:
        0
        0
        10px;

    line-height: 1.2;

    text-align: justify;

}


.fiberglass-page h1,
.fiberglass-page h2 {

    margin:
        0
        0
        18px;

    color: var(--btf-black);

    font-size: 30px;

    font-weight: 700;

    line-height: 1.1;

}


.fiberglass-page h3 {

    margin:
        0
        0
        10px;

    color: var(--btf-black);

    font-size: 18px;

    font-weight: 700;

    line-height: 1.1;

}


/* ============================================================
   EYEBROW
============================================================ */

.fiberglass-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 11px;

    color: var(--btf-green-dark);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.10em;

    text-transform: uppercase;

}


.fiberglass-eyebrow::before {

    width: 23px;
    height: 2px;

    content: "";

    background: var(--btf-green);

}


.fiberglass-eyebrow-light {

    color:
        rgba(255, 255, 255, 0.68);

}


/* ============================================================
   TEXTE
============================================================ */

.fiberglass-text {

    color: #525652;

    font-size: 15px;

    line-height: 1.2;

}


.fiberglass-text-light {

    color:
        rgba(255, 255, 255, 0.68);

}


/* ============================================================
   BOUTONS
============================================================ */

.fiberglass-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 25px;

}


.fiberglass-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 48px;

    padding:
        0
        20px;

    overflow: hidden;

    border:
        1px solid transparent;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.025em;

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

}


.fiberglass-btn span,
.fiberglass-btn i {

    position: relative;

    z-index: 2;

}


.fiberglass-btn i {

    transition:
        transform 0.3s ease;

}


.fiberglass-btn:hover i {

    transform:
        translateX(4px);

}


.fiberglass-btn-primary {

    color: #ffffff;

    background: #111311;

    border-color: #111311;

}


.fiberglass-btn-primary::before {

    position: absolute;

    inset: 0;

    content: "";

    background: var(--btf-green);

    transform:
        translateX(-102%);

    transition:
        transform 0.4s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.fiberglass-btn-primary:hover {

    color: #ffffff;

    border-color: var(--btf-green);

    transform:
        translateY(-2px);

}


.fiberglass-btn-primary:hover::before {

    transform:
        translateX(0);

}


.fiberglass-btn-green {

    color: #ffffff;

    background: var(--btf-green);

    border-color: var(--btf-green);

}


.fiberglass-btn-green:hover {

    color: #ffffff;

    background: transparent;

    border-color:
        rgba(255, 255, 255, 0.42);

    transform:
        translateY(-2px);

}


/* ============================================================
   INTRODUCTION
============================================================ */

.fiberglass-intro {

    position: relative;

    padding:
        85px
        0
        90px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7f8f7
        );

}


.fiberglass-intro-content {

    padding-right: 20px;

}


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

.fiberglass-main-visual {

    position: relative;

    padding:
        10px;

    background: #ffffff;

    border:
        1px solid
        rgba(0, 0, 0, 0.07);

    box-shadow:
        0 22px 55px
        rgba(0, 0, 0, 0.10);

}


.fiberglass-main-image {

    position: relative;

    aspect-ratio: 4 / 3;

    overflow: hidden;

}


.fiberglass-main-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.fiberglass-main-visual:hover
.fiberglass-main-image img {

    transform:
        scale(1.035);

}


.fiberglass-main-detail {

    position: absolute;

    right: -18px;
    bottom: 28px;

    max-width: 250px;

    padding:
        14px
        17px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #171917,
            #090a09
        );

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.22);

}


.fiberglass-main-detail span {

    display: block;

    margin-bottom: 4px;

    color: var(--btf-green);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.fiberglass-main-detail strong {

    display: block;

    font-size: 12px;

    line-height: 1.2;

}


/* ============================================================
   QUALITÉ
============================================================ */

.fiberglass-quality {

    padding:
        90px
        0;

    background: #ffffff;

}


.fiberglass-framed-image {

    position: relative;

    height: 440px;

    padding:
        8px;

    background: #f5f6f5;

    border:
        1px solid
        rgba(0, 0, 0, 0.06);

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

}


.fiberglass-framed-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


.fiberglass-frame-line {

    position: absolute;

    top: 25px;
    left: -1px;

    width: 3px;
    height: 90px;

    background: var(--btf-green);

}


/* ============================================================
   POINTS QUALITÉ
============================================================ */

.fiberglass-quality-points {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 24px;

}


.fiberglass-quality-item {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        10px
        12px;

    color: #3d403d;

    background: #f5f7f5;

    border:
        1px solid
        rgba(0, 0, 0, 0.05);

    font-size: 11px;

    font-weight: 700;

}


.fiberglass-quality-icon {

    width: 28px;
    height: 28px;

    display: flex;

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

    flex-shrink: 0;

    color: var(--btf-green);

    background:
        rgba(32, 173, 54, 0.08);

    border-radius: 50%;

}


/* ============================================================
   FOURNISSEURS
============================================================ */

.fiberglass-suppliers {

    position: relative;

    padding:
        90px
        0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #171917,
            #090a09
        );

}


.fiberglass-suppliers::before {

    position: absolute;

    top: -170px;
    left: -150px;

    width: 420px;
    height: 420px;

    content: "";

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(32, 173, 54, 0.14),
            transparent 68%
        );

}


.fiberglass-dark-content {

    position: relative;

    z-index: 2;

}


.fiberglass-suppliers h2 {

    color: #ffffff;

}


.fiberglass-dark-image {

    position: relative;

    height: 440px;

    padding: 9px;

    background:
        rgba(255, 255, 255, 0.04);

    border:
        1px solid
        rgba(255, 255, 255, 0.11);

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.30);

}


.fiberglass-dark-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


.fiberglass-dark-image-accent {

    position: absolute;

    right: -1px;
    bottom: 35px;

    width: 3px;
    height: 100px;

    background: var(--btf-green);

}


/* ============================================================
   AVANTAGES
============================================================ */

.fiberglass-benefits {

    padding:
        90px
        0;

    background:
        #f7f8f7;

}


.fiberglass-section-heading {

    max-width: 720px;

    margin-bottom: 32px;

}


.fiberglass-section-heading p {

    color: #555955;

    font-size: 14px;

}


/* ============================================================
   CARTES AVANTAGES
============================================================ */

.fiberglass-benefit-card {

    position: relative;

    height: 100%;

    padding:
        28px
        25px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        rgba(0, 0, 0, 0.06);

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.06);

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

}


.fiberglass-benefit-card::after {

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    content: "";

    background:
        linear-gradient(
            90deg,
            var(--btf-green),
            transparent
        );

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform 0.35s ease;

}


.fiberglass-benefit-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(32, 173, 54, 0.18);

    box-shadow:
        0 22px 45px
        rgba(0, 0, 0, 0.10);

}


.fiberglass-benefit-card:hover::after {

    transform:
        scaleX(1);

}


.fiberglass-benefit-icon {

    width: 48px;
    height: 48px;

    display: flex;

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

    margin-bottom: 18px;

    color: #ffffff;

    background: var(--btf-green);

    border-radius: 50%;

    font-size: 18px;

}


.fiberglass-benefit-card p {

    color: #595c59;

    font-size: 13px;

}


/* ============================================================
   INSTALLATION
============================================================ */

.fiberglass-installation {

    padding:
        90px
        0;

    background: #ffffff;

}


.fiberglass-installation-image {

    position: relative;

    height: 470px;

    padding: 8px;

    background: #f5f6f5;

    border:
        1px solid
        rgba(0, 0, 0, 0.06);

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

}


.fiberglass-installation-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


.fiberglass-installation-label {

    position: absolute;

    right: 25px;
    bottom: 25px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        12px
        15px;

    color: #ffffff;

    background:
        rgba(10, 12, 10, 0.84);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    font-size: 11px;

    font-weight: 700;

}


.fiberglass-installation-label i {

    color: var(--btf-green);

}


/* ============================================================
   MINI FEATURES
============================================================ */

.fiberglass-mini-features {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 24px;

}


.fiberglass-mini-feature {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px
        12px;

    color: #363936;

    background: #f5f7f5;

    border:
        1px solid
        rgba(0, 0, 0, 0.05);

    font-size: 11px;

    font-weight: 700;

}


.fiberglass-mini-feature i {

    color: var(--btf-green);

}


/* ============================================================
   CTA FINAL
============================================================ */

.fiberglass-final-cta {

    position: relative;

    padding:
        65px
        0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #131513,
            #080a08
        );

}


.fiberglass-final-cta::after {

    position: absolute;

    top: -140px;
    right: -90px;

    width: 390px;
    height: 390px;

    content: "";

    border:
        1px solid
        rgba(32, 173, 54, 0.13);

    border-radius: 50%;

}


.fiberglass-final-inner {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

}


.fiberglass-final-content {

    max-width: 700px;

}


.fiberglass-final-content h2 {

    margin-bottom: 12px;

    color: #ffffff;

}


.fiberglass-final-content p {

    margin-bottom: 0;

    color:
        rgba(255, 255, 255, 0.64);

    font-size: 14px;

}


.fiberglass-final-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}


/* ============================================================
   TÉLÉPHONE
============================================================ */

.fiberglass-phone-btn {

    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 50px;

    padding:
        8px
        14px;

    color: #ffffff;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;

}


.fiberglass-phone-btn:hover {

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.06);

    border-color:
        rgba(32, 173, 54, 0.50);

    transform:
        translateY(-2px);

}


.fiberglass-phone-icon {

    width: 34px;
    height: 34px;

    display: flex;

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

    color: #ffffff;

    background: var(--btf-green);

    border-radius: 50%;

}


.fiberglass-phone-btn small {

    display: block;

    margin-bottom: 2px;

    color:
        rgba(255, 255, 255, 0.45);

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

}


.fiberglass-phone-btn strong {

    color: #ffffff;

    font-size: 13px;

}


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

@media (max-width: 1199.98px) {

    .fiberglass-final-inner {

        align-items: flex-start;

        flex-direction: column;

    }

}


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

@media (max-width: 991.98px) {

    .fiberglass-intro,
    .fiberglass-quality,
    .fiberglass-suppliers,
    .fiberglass-benefits,
    .fiberglass-installation {

        padding:

            65px
            0;

    }


    .fiberglass-intro-content {

        padding-right: 0;

    }


    .fiberglass-main-detail {

        right: 15px;

    }


    .fiberglass-framed-image,
    .fiberglass-dark-image,
    .fiberglass-installation-image {

        height: 420px;

    }


    .fiberglass-final-actions {

        flex-wrap: wrap;

    }

}


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

@media (max-width: 767.98px) {

    .fiberglass-page h1,
    .fiberglass-page h2 {

        font-size: 26px;

    }


    .fiberglass-main-detail {

        position: relative;

        right: auto;
        bottom: auto;

        max-width: none;

        margin-top: 7px;

    }


    .fiberglass-final-actions {

        width: 100%;

        align-items: stretch;

        flex-direction: column;

    }


    .fiberglass-phone-btn,
    .fiberglass-final-actions
    .fiberglass-btn {

        width: 100%;

    }

}


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

@media (max-width: 500px) {

    .fiberglass-page p {

        text-align: left;

    }


    .fiberglass-page h1,
    .fiberglass-page h2 {

        font-size: 24px;

    }


    .fiberglass-intro,
    .fiberglass-quality,
    .fiberglass-suppliers,
    .fiberglass-benefits,
    .fiberglass-installation {

        padding:
            50px
            0;

    }


    .fiberglass-main-visual {

        padding: 6px;

    }


    .fiberglass-framed-image,
    .fiberglass-dark-image,
    .fiberglass-installation-image {

        height: 330px;

    }


    .fiberglass-quality-points,
    .fiberglass-mini-features {

        align-items: stretch;

        flex-direction: column;

    }


    .fiberglass-quality-item,
    .fiberglass-mini-feature {

        width: 100%;

    }


    .fiberglass-benefit-card {

        padding:
            23px
            21px;

    }


    .fiberglass-installation-label {

        right: 14px;
        bottom: 14px;

    }


    .fiberglass-final-cta {

        padding:
            55px
            0;

    }

}


/* ============================================================
   ACCESSIBILITÉ
============================================================ */

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

    .fiberglass-page *,
    .fiberglass-page *::before,
    .fiberglass-page *::after {

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

    }

}





/* ============================================================
   PAGE RAMPES
============================================================ */

.railings-page {

    overflow: hidden;

}


.railings-page p {

    margin:
        0
        0
        10px;

    line-height: 1.2;

    text-align: justify;

}


.railings-page h1,
.railings-page h2 {

    margin:
        0
        0
        18px;

    color: var(--btf-black);

    font-size: 30px;

    font-weight: 700;

    line-height: 1.1;

}


.railings-page h3 {

    margin: 0;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.1;

}


/* ============================================================
   EYEBROW
============================================================ */

.railings-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 11px;

    color: var(--btf-green-dark);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.10em;

    text-transform: uppercase;

}


.railings-eyebrow::before {

    width: 23px;
    height: 2px;

    content: "";

    background: var(--btf-green);

}


.railings-eyebrow-light {

    color:
        rgba(255, 255, 255, 0.68);

}


/* ============================================================
   TEXTE
============================================================ */

.railings-text {

    color: #525652;

    font-size: 15px;

    line-height: 1.2;

}


.railings-text-light {

    color:
        rgba(255, 255, 255, 0.69);

}


/* ============================================================
   BOUTONS
============================================================ */

.railings-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 26px;

}


.railings-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 48px;

    padding:
        0
        20px;

    overflow: hidden;

    border: 1px solid transparent;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.025em;

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

}


.railings-btn i {

    position: relative;

    z-index: 2;

    font-size: 14px;

    transition:
        transform 0.3s ease;

}


.railings-btn span {

    position: relative;

    z-index: 2;

}


.railings-btn:hover i {

    transform:
        translateX(4px);

}


.railings-btn-primary {

    color: #ffffff;

    background: #111311;

    border-color: #111311;

}


.railings-btn-primary::before {

    position: absolute;

    inset: 0;

    content: "";

    background: var(--btf-green);

    transform:
        translateX(-102%);

    transition:
        transform 0.4s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.railings-btn-primary:hover {

    color: #ffffff;

    border-color: var(--btf-green);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 25px
        rgba(0, 0, 0, 0.13);

}


.railings-btn-primary:hover::before {

    transform:
        translateX(0);

}


.railings-btn-green {

    color: #ffffff;

    background: var(--btf-green);

    border-color: var(--btf-green);

}


.railings-btn-green:hover {

    color: #ffffff;

    background: transparent;

    border-color:
        rgba(255, 255, 255, 0.45);

    transform:
        translateY(-2px);

}


/* ============================================================
   INTRODUCTION
============================================================ */

.railings-intro {

    position: relative;

    padding:
        85px
        0
        90px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f8f7 100%
        );

}


.railings-intro-content {

    padding-right: 20px;

}


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

.railings-image-card {

    position: relative;

    padding:
        10px;

    background: #ffffff;

    border:
        1px solid
        rgba(0, 0, 0, 0.07);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.09);

}


.railings-image-frame {

    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #e9ebe9;

}


.railings-image-frame img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.8s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.railings-image-card:hover
.railings-image-frame img {

    transform:
        scale(1.035);

}


.railings-image-accent {

    position: absolute;

    right: -13px;
    bottom: -13px;

    z-index: -1;

    width: 42%;
    height: 42%;

    background:
        var(--btf-green);

    opacity: 0.16;

}


/* ============================================================
   EXPÉRIENCE
============================================================ */

.railings-experience {

    padding:
        90px
        0;

    background: #ffffff;

}


.railings-image-secondary {

    margin-right: 15px;

}


.railings-image-badge {

    position: absolute;

    right: -20px;
    bottom: 30px;

    display: flex;

    align-items: center;

    gap: 10px;

    max-width: 220px;

    padding:
        13px
        16px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #151715,
            #090a09
        );

    box-shadow:
        0 14px 30px
        rgba(0, 0, 0, 0.22);

    font-size: 11px;

    font-weight: 700;

    line-height: 1.2;

}


.railings-image-badge i {

    color: var(--btf-green);

    font-size: 18px;

}


/* ============================================================
   LISTE DE SERVICES
============================================================ */

.railings-feature-list {

    display: grid;

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

    gap: 11px;

    margin-top: 24px;

}


.railings-feature-item {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    min-height: 80px;

    padding:
        14px;

    color: #454845;

    background: #f7f8f7;

    border:
        1px solid
        rgba(0, 0, 0, 0.05);

    font-size: 12.5px;

    line-height: 1.2;

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

}


.railings-feature-item::after {

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 2px;

    content: "";

    background:
        linear-gradient(
            90deg,
            var(--btf-green),
            transparent
        );

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform 0.35s ease;

}


.railings-feature-item:hover {

    background: #ffffff;

    border-color:
        rgba(32, 173, 54, 0.20);

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 25px
        rgba(0, 0, 0, 0.07);

}


.railings-feature-item:hover::after {

    transform:
        scaleX(1);

}


.railings-feature-icon {

    width: 36px;
    height: 36px;

    display: flex;

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

    flex-shrink: 0;

    color: var(--btf-green);

    background:
        rgba(32, 173, 54, 0.08);

    border-radius: 50%;

    font-size: 15px;

}


/* ============================================================
   POURQUOI L'ALUMINIUM
============================================================ */

.railings-benefits {

    position: relative;

    padding:
        90px
        0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #171917 0%,
            #0a0c0a 100%
        );

}


.railings-benefits::before {

    position: absolute;

    top: -150px;
    left: -180px;

    width: 420px;
    height: 420px;

    content: "";

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(32, 173, 54, 0.14),
            transparent 68%
        );

}


.railings-benefits-content {

    position: relative;

    z-index: 2;

    padding-right: 20px;

}


.railings-benefits h2 {

    color: #ffffff;

}


.railings-dark-image {

    position: relative;

    height: 530px;

    padding:
        9px;

    background:
        rgba(255, 255, 255, 0.04);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.30);

}


.railings-dark-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


.railings-dark-image-line {

    position: absolute;

    top: 30px;
    right: -1px;

    width: 3px;
    height: 95px;

    background:
        var(--btf-green);

}


/* ============================================================
   APPLICATIONS
============================================================ */

.railings-applications {

    padding:
        90px
        0;

    background:
        #f7f8f7;

}


.railings-section-heading {

    max-width: 700px;

    margin-bottom: 30px;

}


.railings-list-card {

    position: relative;

    height: 100%;

    padding:
        28px;

    background: #ffffff;

    border:
        1px solid
        rgba(0, 0, 0, 0.06);

    box-shadow:
        0 16px 40px
        rgba(0, 0, 0, 0.06);

}


.railings-list-card-green {

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f2f8f3
        );

    border-color:
        rgba(32, 173, 54, 0.16);

}


.railings-list-card-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

}


.railings-list-card-icon {

    width: 43px;
    height: 43px;

    display: flex;

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

    flex-shrink: 0;

    color: #ffffff;

    background: var(--btf-green);

    border-radius: 50%;

    font-size: 16px;

}


.railings-list-card p {

    color: #575a57;

    font-size: 13px;

}


/* ============================================================
   CHECK LIST
============================================================ */

.railings-check-list {

    display: flex;

    flex-direction: column;

    gap: 9px;

    margin:
        20px
        0
        0;

    padding: 0;

    list-style: none;

}


.railings-check-list li {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: #424542;

    font-size: 12.5px;

    line-height: 1.2;

}


.railings-check-list i {

    width: 23px;
    height: 23px;

    display: flex;

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

    flex-shrink: 0;

    color: var(--btf-green);

    background:
        rgba(32, 173, 54, 0.09);

    border-radius: 50%;

    font-size: 12px;

}


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

.railings-wide-image {

    position: relative;

    height: 360px;

    margin-top: 35px;

    padding: 8px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        rgba(0, 0, 0, 0.06);

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.08);

}


.railings-wide-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


.railings-wide-image-overlay {

    position: absolute;

    inset: 8px;

    background:
        linear-gradient(
            90deg,
            rgba(7, 9, 7, 0.10),
            transparent 55%
        );

    pointer-events: none;

}


/* ============================================================
   FOURNISSEURS
============================================================ */

.railings-suppliers {

    padding:
        90px
        0;

    background: #ffffff;

}


.railings-image-supplier {

    margin-left: 15px;

}


.railings-image-corner {

    position: absolute;

    top: -1px;
    right: -1px;

    width: 70px;
    height: 70px;

    border-top:
        3px solid
        var(--btf-green);

    border-right:
        3px solid
        var(--btf-green);

}


/* ============================================================
   MINI FEATURES
============================================================ */

.railings-mini-features {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 24px;

}


.railings-mini-feature {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px
        12px;

    color: #363936;

    background: #f5f7f5;

    border:
        1px solid
        rgba(0, 0, 0, 0.05);

    font-size: 11px;

    font-weight: 700;

}


.railings-mini-feature i {

    color: var(--btf-green);

}


/* ============================================================
   CTA FINAL
============================================================ */

.railings-final-cta {

    position: relative;

    padding:
        65px
        0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #131513 0%,
            #080a08 100%
        );

}


.railings-final-cta::after {

    position: absolute;

    top: -130px;
    right: -80px;

    width: 370px;
    height: 370px;

    content: "";

    border:
        1px solid
        rgba(32, 173, 54, 0.13);

    border-radius: 50%;

}


.railings-final-cta-inner {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

}


.railings-final-cta-content {

    max-width: 700px;

}


.railings-final-cta h2 {

    margin-bottom: 12px;

    color: #ffffff;

}


.railings-final-cta p {

    margin-bottom: 0;

    color:
        rgba(255, 255, 255, 0.64);

    font-size: 14px;

}


.railings-final-cta-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}


/* ============================================================
   CTA TÉLÉPHONE
============================================================ */

.railings-cta-phone {

    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 50px;

    padding:
        8px
        14px;

    color: #ffffff;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;

}


.railings-cta-phone:hover {

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.06);

    border-color:
        rgba(32, 173, 54, 0.50);

    transform:
        translateY(-2px);

}


.railings-cta-phone-icon {

    width: 34px;
    height: 34px;

    display: flex;

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

    color: #ffffff;

    background: var(--btf-green);

    border-radius: 50%;

}


.railings-cta-phone small {

    display: block;

    margin-bottom: 2px;

    color:
        rgba(255, 255, 255, 0.45);

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

}


.railings-cta-phone strong {

    color: #ffffff;

    font-size: 13px;

}


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

@media (max-width: 1199.98px) {

    .railings-final-cta-inner {

        align-items: flex-start;

        flex-direction: column;

    }

}


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

@media (max-width: 991.98px) {

    .railings-intro,
    .railings-experience,
    .railings-benefits,
    .railings-applications,
    .railings-suppliers {

        padding:
            65px
            0;

    }


    .railings-intro-content,
    .railings-benefits-content {

        padding-right: 0;

    }


    .railings-image-secondary {

        margin-right: 0;

    }


    .railings-image-supplier {

        margin-left: 0;

    }


    .railings-dark-image {

        height: 430px;

    }


    .railings-final-cta-actions {

        flex-wrap: wrap;

    }

}


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

@media (max-width: 767.98px) {

    .railings-page h1,
    .railings-page h2 {

        font-size: 26px;

    }


    .railings-feature-list {

        grid-template-columns: 1fr;

    }


    .railings-wide-image {

        height: 300px;

    }


    .railings-image-badge {

        right: 15px;

        bottom: 20px;

    }


    .railings-final-cta {

        padding:
            55px
            0;

    }


    .railings-final-cta-actions {

        width: 100%;

        align-items: stretch;

        flex-direction: column;

    }


    .railings-cta-phone,
    .railings-final-cta-actions
    .railings-btn {

        width: 100%;

    }

}


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

@media (max-width: 500px) {

    .railings-page p {

        text-align: left;

    }


    .railings-page h1,
    .railings-page h2 {

        font-size: 24px;

    }


    .railings-intro,
    .railings-experience,
    .railings-benefits,
    .railings-applications,
    .railings-suppliers {

        padding:
            50px
            0;

    }


    .railings-image-card {

        padding: 6px;

    }


    .railings-image-frame {

        aspect-ratio: 4 / 3;

    }


    .railings-image-badge {

        position: relative;

        right: auto;
        bottom: auto;

        margin-top: 6px;

        max-width: none;

    }


    .railings-dark-image {

        height: 340px;

    }


    .railings-list-card {

        padding: 22px;

    }


    .railings-wide-image {

        height: 240px;

        margin-top: 25px;

    }


    .railings-mini-features {

        align-items: stretch;

        flex-direction: column;

    }


    .railings-mini-feature {

        width: 100%;

    }

}


/* ============================================================
   ACCESSIBILITÉ
============================================================ */

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

    .railings-page *,
    .railings-page *::before,
    .railings-page *::after {

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

    }

}



/* ============================================================
   PAGE RÉALISATIONS
============================================================ */

.projects-page {

    position: relative;

    padding:
        80px
        0
        90px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f8f7 100%
        );

}


/* ============================================================
   EN-TÊTE
============================================================ */

.projects-heading {

    max-width: 720px;

    margin-bottom: 36px;

}


.projects-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

    color: var(--btf-green-dark);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.10em;

    text-transform: uppercase;

}


.projects-eyebrow::before {

    width: 22px;
    height: 2px;

    content: "";

    background:
        var(--btf-green);

}


.projects-heading h1 {

    margin:
        0
        0
        12px;

    color: var(--btf-black);

    font-size: 30px;

    font-weight: 700;

    line-height: 1.1;

}


.projects-heading p {

    margin: 0;

    color: #555955;

    font-size: 15px;

    line-height: 1.2;

    text-align: justify;

}


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

.projects-gallery {

    display: grid;

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

    gap: 18px;

}


/* ============================================================
   VIGNETTE PREMIUM
============================================================ */

.project-item {

    position: relative;

    aspect-ratio: 4 / 3;

    display: block;

    width: 100%;

    padding: 7px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f3f5f3 100%
        );

    border:
        1px solid
        rgba(0, 0, 0, 0.07);

    border-radius: 3px;

    cursor: pointer;

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, 0.07),
        0 2px 6px
        rgba(0, 0, 0, 0.04);

    isolation: isolate;

    transition:
        transform 0.35s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        box-shadow 0.35s ease,
        border-color 0.35s ease;

}


/* ============================================================
   CADRE INTÉRIEUR
============================================================ */

.project-item::before {

    position: absolute;

    inset: 14px;

    z-index: 4;

    content: "";

    border:
        1px solid
        rgba(255, 255, 255, 0);

    pointer-events: none;

    transition:
        inset 0.35s ease,
        border-color 0.35s ease;

}


/* ============================================================
   LIGNE VERTE EN BAS
============================================================ */

.project-item::after {

    position: absolute;

    right: 7px;
    bottom: 0;
    left: 7px;

    z-index: 5;

    height: 3px;

    content: "";

    background:
        linear-gradient(
            90deg,
            var(--btf-green),
            rgba(32, 173, 54, 0.30),
            transparent
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform 0.4s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


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

.project-item img {

    position: relative;

    z-index: 1;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.7s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        filter 0.5s ease;

}


/* ============================================================
   OVERLAY
============================================================ */

.project-overlay {

    position: absolute;

    inset: 7px;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 8, 0.05) 0%,
            rgba(8, 10, 8, 0.18) 45%,
            rgba(8, 10, 8, 0.55) 100%
        );

    opacity: 0;

    transition:
        opacity 0.35s ease;

}


/* ============================================================
   ICÔNE DE ZOOM
============================================================ */

.project-zoom {

    width: 52px;
    height: 52px;

    display: flex;

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

    color: #ffffff;

    background:
        rgba(10, 12, 10, 0.68);

    border:
        1px solid
        rgba(255, 255, 255, 0.32);

    border-radius: 50%;

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, 0.22);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transform:
        scale(0.72);

    transition:
        transform 0.35s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        background 0.3s ease,
        border-color 0.3s ease;

}


.project-zoom i {

    font-size: 17px;

}


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

.project-item:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(32, 173, 54, 0.20);

    box-shadow:
        0 22px 45px
        rgba(0, 0, 0, 0.12),
        0 5px 12px
        rgba(0, 0, 0, 0.05);

}


.project-item:hover::before {

    inset: 17px;

    border-color:
        rgba(255, 255, 255, 0.38);

}


.project-item:hover::after {

    transform:
        scaleX(1);

}


.project-item:hover img {

    transform:
        scale(1.065);

    filter:
        contrast(1.04)
        brightness(0.90);

}


.project-item:hover
.project-overlay {

    opacity: 1;

}


.project-item:hover
.project-zoom {

    transform:
        scale(1);

}


/* ============================================================
   HOVER ICÔNE
============================================================ */

.project-zoom:hover {

    background:
        var(--btf-green);

    border-color:
        var(--btf-green);

}


/* ============================================================
   FOCUS CLAVIER
============================================================ */

.project-item:focus-visible {

    outline:
        2px solid
        var(--btf-green);

    outline-offset: 4px;

}


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

.projects-lightbox {

    position: fixed;

    inset: 0;

    z-index: 5000;

    display: flex;

    align-items: center;

    justify-content: center;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;

}


.projects-lightbox.is-open {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

}


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

.projects-lightbox-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(5, 6, 5, 0.75);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

}


/* ============================================================
   CONTENEUR IMAGE LIGHTBOX
============================================================ */

.projects-lightbox-content {

    position: relative;

    z-index: 2;

    width:
        min(88vw, 1500px);

    height:
        min(82vh, 950px);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

}


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

.projects-lightbox-content img {

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    display: block;

    object-fit: contain;

    opacity: 0;

    transform:
        scale(0.96);

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, 0.45);

    transition:
        opacity 0.25s ease,
        transform 0.35s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.projects-lightbox.is-open
.projects-lightbox-content img.is-loaded {

    opacity: 1;

    transform:
        scale(1);

}


/* ============================================================
   BOUTON FERMER
============================================================ */

.projects-lightbox-close {

    position: absolute;

    top: 24px;
    right: 28px;

    z-index: 5;

    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 50%;

    cursor: pointer;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;

}


.projects-lightbox-close:hover {

    background:
        var(--btf-green);

    border-color:
        var(--btf-green);

    transform:
        rotate(90deg);

}


/* ============================================================
   FLÈCHES DE NAVIGATION
============================================================ */

.projects-lightbox-nav {

    position: absolute;

    top: 50%;

    z-index: 5;

    width: 54px;
    height: 54px;

    display: flex;

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

    padding: 0;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 50%;

    cursor: pointer;

    transform:
        translateY(-50%);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;

}


.projects-lightbox-prev {

    left: 28px;

}


.projects-lightbox-next {

    right: 28px;

}


.projects-lightbox-nav:hover {

    color: #ffffff;

    background:
        var(--btf-green);

    border-color:
        var(--btf-green);

}


.projects-lightbox-prev:hover {

    transform:
        translateY(-50%)
        translateX(-3px);

}


.projects-lightbox-next:hover {

    transform:
        translateY(-50%)
        translateX(3px);

}


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

.projects-lightbox-close:focus-visible,
.projects-lightbox-nav:focus-visible {

    outline:
        2px solid
        var(--btf-green);

    outline-offset: 4px;

}


/* ============================================================
   COMPTEUR
============================================================ */

.projects-lightbox-counter {

    position: absolute;

    bottom: 25px;
    left: 50%;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        9px
        14px;

    color:
        rgba(255, 255, 255, 0.68);

    background:
        rgba(10, 11, 10, 0.60);

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 30px;

    font-size: 11px;

    font-weight: 700;

    transform:
        translateX(-50%);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

}


#projects-current {

    color:
        var(--btf-green-light);

}


.projects-lightbox-counter-separator {

    color:
        rgba(255, 255, 255, 0.25);

}


/* ============================================================
   EMPÊCHER LE SCROLL
============================================================ */

body.projects-lightbox-open {

    overflow: hidden;

}


/* ============================================================
   RESPONSIVE - 1200 PX
============================================================ */

@media (max-width: 1199.98px) {

    .projects-gallery {

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

        gap: 16px;

    }

}


/* ============================================================
   RESPONSIVE - 992 PX
============================================================ */

@media (max-width: 991.98px) {

    .projects-page {

        padding:
            65px
            0
            75px;

    }


    .projects-heading {

        margin-bottom: 30px;

    }


    .projects-lightbox-content {

        width:
            calc(100vw - 130px);

        height:
            82vh;

    }

}


/* ============================================================
   RESPONSIVE - 768 PX
============================================================ */

@media (max-width: 767.98px) {

    .projects-page {

        padding:
            60px
            0
            70px;

    }


    .projects-heading h1 {

        font-size: 26px;

    }


    .projects-gallery {

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

        gap: 12px;

    }


    .project-item {

        padding: 6px;

    }


    .project-item::after {

        right: 6px;
        left: 6px;

    }


    .project-overlay {

        inset: 6px;

    }


    .project-zoom {

        width: 46px;
        height: 46px;

    }


    .project-zoom i {

        font-size: 15px;

    }


    .projects-lightbox-content {

        width: 100vw;

        height: 80vh;

        padding:
            55px
            15px
            70px;

    }


    .projects-lightbox-close {

        top: 15px;
        right: 15px;

        width: 42px;
        height: 42px;

    }


    .projects-lightbox-nav {

        top: auto;
        bottom: 18px;

        width: 44px;
        height: 44px;

        transform: none;

    }


    .projects-lightbox-prev {

        left: 15px;

    }


    .projects-lightbox-next {

        right: 15px;

    }


    .projects-lightbox-prev:hover,
    .projects-lightbox-next:hover {

        transform: none;

    }


    .projects-lightbox-counter {

        bottom: 21px;

    }

}


/* ============================================================
   RESPONSIVE - 500 PX
============================================================ */

@media (max-width: 500px) {

    .projects-page {

        padding:
            50px
            0
            55px;

    }


    .projects-heading {

        margin-bottom: 26px;

    }


    .projects-heading h1 {

        font-size: 24px;

    }


    .projects-heading p {

        text-align: left;

    }


    .projects-gallery {

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

        gap: 9px;

    }


    .project-item {

        aspect-ratio: 1 / 1;

        padding: 5px;

    }


    .project-item::after {

        right: 5px;
        left: 5px;

        height: 2px;

    }


    .project-item::before {

        inset: 11px;

    }


    .project-item:hover::before {

        inset: 13px;

    }


    .project-overlay {

        inset: 5px;

    }


    .project-zoom {

        width: 40px;
        height: 40px;

    }


    .project-zoom i {

        font-size: 14px;

    }


    .project-item:hover {

        transform:
            translateY(-3px);

    }


    .projects-lightbox-content {

        height: 78vh;

        padding:
            55px
            10px
            70px;

    }

}


/* ============================================================
   TRÈS PETIT MOBILE
============================================================ */

@media (max-width: 360px) {

    .projects-gallery {

        grid-template-columns:
            1fr;

    }


    .project-item {

        aspect-ratio: 4 / 3;

    }

}


/* ============================================================
   APPAREILS SANS HOVER
============================================================ */

@media (hover: none) {

    .project-item:hover {

        transform: none;

    }


    .project-item:hover img {

        transform: none;

        filter: none;

    }


    .project-overlay {

        opacity: 0;

    }

}


/* ============================================================
   ACCESSIBILITÉ - MOUVEMENTS RÉDUITS
============================================================ */

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

    .project-item,
    .project-item::before,
    .project-item::after,
    .project-item img,
    .project-overlay,
    .project-zoom,
    .projects-lightbox,
    .projects-lightbox-content img,
    .projects-lightbox-close,
    .projects-lightbox-nav {

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

    }

}










/* ============================================================
   PAGE CONTACT
============================================================ */

.contact-page {

    position: relative;

    padding:
        85px
        0
        90px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8f9f8 100%
        );

}


/* ============================================================
   TYPOGRAPHIE
============================================================ */

.contact-title,
.contact-page h2,
.contact-map-section h2 {

    margin:
        0
        0
        18px;

    color: var(--btf-black);

    font-size: 30px;

    font-weight: 700;

    line-height: 1.1;

}


.contact-text p,
.contact-form-heading p {

    margin:
        0
        0
        10px;

    color: #4c4f4c;

    font-size: 15px;

    line-height: 1.2;

    text-align: justify;

}


.contact-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 11px;

    color: var(--btf-green-dark);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.10em;

    text-transform: uppercase;

}


.contact-eyebrow::before {

    width: 21px;

    height: 2px;

    content: "";

    background: var(--btf-green);

}


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

.contact-intro-card {

    position: relative;

    height: 100%;

    padding:
        36px
        34px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f5f7f5 100%
        );

    border:
        1px solid rgba(0, 0, 0, 0.06);

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, 0.07);

}


.contact-intro-card::before {

    position: absolute;

    top: 0;
    left: 0;

    width: 4px;
    height: 100%;

    content: "";

    background:
        linear-gradient(
            180deg,
            var(--btf-green),
            transparent 75%
        );

}


/* ============================================================
   COORDONNÉES
============================================================ */

.contact-details {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 30px;

}


.contact-detail {

    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    min-height: 70px;

    padding:
        13px
        15px;

    color: var(--btf-black);

    background: var(--btf-white);

    border:
        1px solid rgba(0, 0, 0, 0.06);

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

}


.contact-detail::after {

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 2px;

    content: "";

    background:
        linear-gradient(
            90deg,
            var(--btf-green),
            transparent
        );

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform 0.35s ease;

}


.contact-detail:hover {

    color: var(--btf-black);

    transform:
        translateY(-3px);

    border-color:
        rgba(32, 173, 54, 0.18);

    box-shadow:
        0 14px 30px
        rgba(0, 0, 0, 0.07);

}


.contact-detail:hover::after {

    transform:
        scaleX(1);

}


.contact-detail-icon {

    width: 42px;
    height: 42px;

    display: flex;

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

    flex-shrink: 0;

    color: var(--btf-green);

    background:
        rgba(32, 173, 54, 0.08);

    border:
        1px solid
        rgba(32, 173, 54, 0.15);

    border-radius: 50%;

    font-size: 15px;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;

}


.contact-detail:hover
.contact-detail-icon {

    color: var(--btf-white);

    background: var(--btf-green);

    transform:
        scale(1.06);

}


.contact-detail-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.contact-detail-label {

    color: #888b88;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;

}


.contact-detail-content strong {

    color: var(--btf-black);

    font-size: 13px;

    font-weight: 700;

    line-height: 1.2;

}


.contact-detail-arrow {

    color: var(--btf-green);

    font-size: 13px;

    transition:
        transform 0.25s ease;

}


.contact-detail:hover
.contact-detail-arrow {

    transform:
        translate(2px, -2px);

}


/* ============================================================
   HEURES D'OUVERTURE
============================================================ */

.contact-hours {

    margin-top: 25px;

    padding:
        22px;

    color: var(--btf-white);

    background:
        linear-gradient(
            135deg,
            #171917,
            #0d0e0d
        );

    border:
        1px solid rgba(255, 255, 255, 0.05);

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.12);

}


.contact-hours-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

}


.contact-hours-icon {

    width: 42px;
    height: 42px;

    display: flex;

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

    flex-shrink: 0;

    color: var(--btf-white);

    background: var(--btf-green);

    border-radius: 50%;

}


.contact-hours-label {

    display: block;

    margin-bottom: 3px;

    color:
        rgba(255, 255, 255, 0.45);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.contact-hours h2 {

    margin: 0;

    color: var(--btf-white);

    font-size: 19px;

}


.contact-hours-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        14px
        0;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);

    font-size: 13px;

}


.contact-hours-row span {

    color:
        rgba(255, 255, 255, 0.62);

}


.contact-hours-row strong {

    color: var(--btf-white);

    font-weight: 700;

}


.contact-appointment {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin-top: 14px;

    color:
        rgba(255, 255, 255, 0.60);

    font-size: 11px;

    line-height: 1.2;

}


.contact-appointment i {

    color: var(--btf-green);

}


/* ============================================================
   FORMULAIRE
============================================================ */

.contact-form-card {

    position: relative;

    overflow: hidden;

    padding:
        38px
        38px
        18px;

    background: var(--btf-white);

    border:
        1px solid rgba(0, 0, 0, 0.06);

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, 0.08);

}


.contact-form-card::before {

    position: absolute;

    top: 0;
    right: 0;

    width: 180px;
    height: 180px;

    content: "";

    background:
        radial-gradient(
            circle,
            rgba(32, 173, 54, 0.08),
            transparent 70%
        );

    pointer-events: none;

}


.contact-form-heading {

    position: relative;

    z-index: 2;

    margin-bottom: 20px;

}


.contact-form-frame {

    position: relative;

    z-index: 2;

    width: 100%;

    overflow: hidden;

}


.contact-form-frame iframe {

    width: 100% !important;
    height: 1000px;

    display: block;

    border: 0;

}


/* ============================================================
   GOOGLE MAP
============================================================ */

.contact-map-section {

    padding:
        70px
        0
        85px;

    background: #101110;

}


.contact-map-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 24px;

}


.contact-map-heading
.contact-eyebrow {

    color: var(--btf-green-light);

}


.contact-map-heading h2 {

    margin-bottom: 0;

    color: var(--btf-white);

}


.contact-map-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    flex-shrink: 0;

    padding:
        12px
        16px;

    color: var(--btf-white);

    border:
        1px solid var(--btf-green);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    transition:
        background 0.25s ease,
        transform 0.25s ease;

}


.contact-map-link:hover {

    color: var(--btf-white);

    background: var(--btf-green);

    transform:
        translateY(-2px);

}


.contact-map-wrapper {

    position: relative;

    height: 450px;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.30);

}


.contact-map-wrapper iframe {

    width: 100%;
    height: 100%;

    display: block;

    border: 0;

}


/* ============================================================
   RESPONSIVE - 992PX
============================================================ */

@media (max-width: 991.98px) {

    .contact-page {

        padding:
            65px
            0
            70px;

    }


    .contact-intro-card,
    .contact-form-card {

        padding:
            30px;

    }


    .contact-map-section {

        padding:
            60px
            0
            70px;

    }


    .contact-map-heading {

        align-items: flex-start;

        flex-direction: column;

    }

}


/* ============================================================
   RESPONSIVE - 768PX
============================================================ */

@media (max-width: 767.98px) {

    .contact-title,
    .contact-page h2,
    .contact-map-section h2 {

        font-size: 26px;

    }


    .contact-intro-card,
    .contact-form-card {

        padding:
            26px
            22px;

    }


    .contact-map-wrapper {

        height: 390px;

    }

}


/* ============================================================
   RESPONSIVE - 500PX
============================================================ */

@media (max-width: 500px) {

    .contact-page {

        padding:
            50px
            0
            55px;

    }


    .contact-title,
    .contact-page h2,
    .contact-map-section h2 {

        font-size: 24px;

    }


    .contact-text p,
    .contact-form-heading p {

        text-align: left;

    }


    .contact-hours-row {

        align-items: flex-start;

        flex-direction: column;

        gap: 7px;

    }


    .contact-detail {

        padding:
            12px;

    }


    .contact-detail-content strong {

        font-size: 12px;

        overflow-wrap: anywhere;

    }


    .contact-form-card {

        padding:
            24px
            15px
            10px;

    }


    .contact-form-frame iframe {

        height: 1050px;

    }


    .contact-map-section {

        padding:
            50px
            0
            55px;

    }


    .contact-map-wrapper {

        height: 330px;

    }


    .contact-map-link {

        width: 100%;

        justify-content: center;

    }

}












/* ============================================================
   BANNIÈRE DES PAGES
============================================================ */

.page-banner {

    position: relative;

    min-height: 330px;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

    isolation: isolate;

    background: #0c0d0c;

}


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

.page-banner-image {

    position: absolute;

    inset: 0;

    z-index: -3;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center center;

    transform: scale(1.01);

}


/* ============================================================
   OVERLAY PRINCIPAL
============================================================ */

.page-banner::before {

    position: absolute;

    inset: 0;

    z-index: -2;

    content: "";

    background:
        linear-gradient(
            90deg,
            rgba(7, 9, 7, 0.84) 0%,
            rgba(7, 9, 7, 0.62) 35%,
            rgba(7, 9, 7, 0.30) 68%,
            rgba(7, 9, 7, 0.42) 100%
        );

    pointer-events: none;

}


/* ============================================================
   PROFONDEUR / TRAITEMENT PREMIUM
============================================================ */

.page-banner::after {

    position: absolute;

    inset: 0;

    z-index: -1;

    content: "";

    background:

        radial-gradient(
            circle at 18% 55%,
            rgba(32, 173, 54, 0.12),
            transparent 33%
        ),

        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.03) 0%,
            rgba(0, 0, 0, 0.10) 45%,
            rgba(0, 0, 0, 0.72) 100%
        );

    pointer-events: none;

}


/* ============================================================
   DÉCORATION
============================================================ */

.page-banner-decoration {

    position: absolute;

    right: -130px;
    bottom: -180px;

    z-index: 1;

    width: 430px;
    height: 430px;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 50%;

    pointer-events: none;

}


.page-banner-decoration::before {

    position: absolute;

    top: 55px;
    left: 55px;

    width: 320px;
    height: 320px;

    content: "";

    border:
        1px solid
        rgba(32, 173, 54, 0.14);

    border-radius: 50%;

}


.page-banner-decoration::after {

    position: absolute;

    top: 115px;
    left: 115px;

    width: 200px;
    height: 200px;

    content: "";

    border:
        1px solid
        rgba(255, 255, 255, 0.045);

    border-radius: 50%;

}


/* ============================================================
   CONTAINER
============================================================ */

.page-banner-container {

    position: relative;

    z-index: 3;

    width: 100%;

    padding-bottom: 34px;

}


/* ============================================================
   FIL D'ARIANE
============================================================ */

.page-breadcrumb {

    display: inline-flex;

    align-items: center;

    min-height: 48px;

    padding:
        0
        18px;

    background:
        rgba(8, 10, 8, 0.52);

    border:
        1px solid
        rgba(255, 255, 255, 0.11);

    border-left:
        3px solid
        var(--btf-green);

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.18);

    backdrop-filter:
        blur(14px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(14px)
        saturate(135%);

}


/* ============================================================
   BREADCRUMB BOOTSTRAP
============================================================ */

.page-breadcrumb .breadcrumb {

    margin: 0;

    padding: 0;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

}


/* ============================================================
   ÉLÉMENTS DU FIL D'ARIANE
============================================================ */

.page-breadcrumb .breadcrumb-item {

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

    font-size: 13px;

    font-weight: 600;

    line-height: 1;

}


/* ============================================================
   LIENS DU FIL D'ARIANE
============================================================ */

.page-breadcrumb .breadcrumb-item a {

    position: relative;

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

    transition:
        color 0.25s ease;

}


.page-breadcrumb .breadcrumb-item a::after {

    position: absolute;

    right: 0;
    bottom: -5px;
    left: 0;

    height: 1px;

    content: "";

    background:
        var(--btf-green);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform 0.3s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.page-breadcrumb .breadcrumb-item a:hover {

    color:
        var(--btf-white);

}


.page-breadcrumb .breadcrumb-item a:hover::after {

    transform:
        scaleX(1);

    transform-origin:
        left;

}


/* ============================================================
   PAGE ACTUELLE
============================================================ */

.page-breadcrumb
.breadcrumb-item.active {

    color:
        var(--btf-white);

    font-weight: 700;

}


/* ============================================================
   SÉPARATEUR
============================================================ */

.page-breadcrumb
.breadcrumb-item + .breadcrumb-item {

    padding-left:
        11px;

}


.page-breadcrumb
.breadcrumb-item + .breadcrumb-item::before {

    padding-right:
        11px;

    color:
        var(--btf-green);

    content:
        "\F285";

    font-family:
        "bootstrap-icons";

    font-size:
        10px;

    font-weight:
        700;

}


/* ============================================================
   LIGNE D'ACCENT EN BAS
============================================================ */

.page-banner-container::after {

    position: absolute;

    right: 12px;
    bottom: 0;
    left: 12px;

    height: 1px;

    content: "";

    background:
        linear-gradient(
            90deg,
            var(--btf-green) 0%,
            rgba(32, 173, 54, 0.20) 22%,
            rgba(255, 255, 255, 0.06) 50%,
            transparent 100%
        );

}


/* ============================================================
   TABLETTE
============================================================ */

@media (max-width: 991.98px) {

    .page-banner {

        min-height: 290px;

    }


    .page-banner-container {

        padding-bottom:
            28px;

    }


    .page-banner-decoration {

        right: -190px;

        bottom: -220px;

    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .page-banner {

        min-height: 240px;

    }


    .page-banner-image {

        object-position:
            center center;

    }


    .page-banner::before {

        background:
            linear-gradient(
                90deg,
                rgba(7, 9, 7, 0.78) 0%,
                rgba(7, 9, 7, 0.48) 100%
            );

    }


    .page-banner-container {

        padding-bottom:
            22px;

    }


    .page-breadcrumb {

        min-height: 44px;

        max-width: 100%;

        padding:
            0
            14px;

    }


    .page-breadcrumb
    .breadcrumb-item {

        font-size:
            12px;

    }


    .page-banner-decoration {

        right: -240px;

        bottom: -260px;

    }

}


/* ============================================================
   PETIT MOBILE
============================================================ */

@media (max-width: 500px) {

    .page-banner {

        min-height: 215px;

    }


    .page-banner-container {

        padding-bottom:
            18px;

    }


    .page-breadcrumb {

        width: auto;

        min-height: 42px;

    }


    .page-breadcrumb
    .breadcrumb-item {

        font-size:
            11.5px;

    }

}


/* ============================================================
   ACCESSIBILITÉ
============================================================ */

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

    .page-banner *,
    .page-banner *::before,
    .page-banner *::after {

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

    }

}