p {
    text-align: justify;
}

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

.home-hero {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #080808;
}


.home-hero .carousel,
.home-hero .carousel-inner,
.home-hero .carousel-item {
    width: 100%;
}


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

.home-hero-slide {
    position: relative;

    height: 560px;
    min-height: 560px;

    overflow: hidden;

    background: #090909;
}


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

.home-hero-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.045);

    transition:
        transform 7s cubic-bezier(.15, .65, .25, 1);
}


.home-hero .carousel-item.active .home-hero-image {
    transform: scale(1);
}


/* ============================================================
   OVERLAY PRINCIPAL
============================================================ */

.home-hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(5, 5, 5, 0.95) 0%,
            rgba(7, 7, 7, 0.90) 25%,
            rgba(8, 8, 8, 0.62) 52%,
            rgba(8, 8, 8, 0.27) 77%,
            rgba(8, 8, 8, 0.10) 100%
        );
}


.home-hero-overlay::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.10) 0%,
            transparent 45%,
            rgba(0, 0, 0, 0.48) 100%
        );
}


/* ============================================================
   LUEUR ORANGE
============================================================ */

.home-hero-glow {
    position: absolute;

    z-index: 2;

    left: -180px;
    bottom: -250px;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(241, 90, 0, 0.12) 0%,
            rgba(241, 90, 0, 0.045) 35%,
            transparent 70%
        );

    pointer-events: none;
}


/* ============================================================
   CONTAINER
============================================================ */

.home-hero-container {
    position: relative;

    z-index: 4;

    height: 100%;

    display: flex;
    align-items: center;
}


/* ============================================================
   CONTENU
============================================================ */

.home-hero-content {
    position: relative;

    max-width: 760px;

    padding-left: 28px;

    opacity: 0;

    transform: translateY(24px);

    transition:
        opacity 0.8s ease 0.25s,
        transform 0.8s ease 0.25s;
}


.home-hero .carousel-item.active .home-hero-content {
    opacity: 1;

    transform: translateY(0);
}


/* ============================================================
   LIGNE VERTICALE
============================================================ */

.home-hero-content::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 2px;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            var(--rb-orange) 0%,
            rgba(241, 90, 0, 0.32) 62%,
            transparent 100%
        );
}


/* ============================================================
   PETITE LIGNE ORANGE
============================================================ */

.home-hero-line {
    display: block;

    width: 48px;
    height: 2px;

    margin-bottom: 18px;

    background: var(--rb-orange);
}


/* ============================================================
   TITRES
============================================================ */

.home-hero-title {
    width: max-content;
    max-width: 100%;

    margin: 0;

    color: #ffffff;

    font-size: clamp(28px, 3vw, 43px);
    font-weight: 500;

    line-height: 1.02;

    letter-spacing: -1px;
}


.home-hero-title-line,
.home-hero-title strong {
    display: block;

    white-space: nowrap;
}


.home-hero-title strong {
    color: #ffffff;

    font-weight: 750;
}


/* ============================================================
   ACTIONS
============================================================ */

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 11px;

    margin-top: 30px;
}


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

.home-hero-button {
    min-height: 50px;

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

    gap: 9px;

    padding: 0 23px;

    border-radius: 3px;

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

    line-height: 1;

    text-transform: uppercase;
    letter-spacing: 0.4px;

    transition:
        background var(--rb-transition),
        border-color var(--rb-transition),
        color var(--rb-transition),
        transform var(--rb-transition),
        box-shadow var(--rb-transition);
}


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


/* ============================================================
   BOUTON PRINCIPAL
============================================================ */

.home-hero-button-primary {
    background: var(--rb-orange);

    border:
        1px solid
        var(--rb-orange);

    color: #ffffff;

    box-shadow:
        0 12px 28px
        rgba(241, 90, 0, 0.18);
}


.home-hero-button-primary:hover {
    background: var(--rb-orange-hover);

    border-color:
        var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 16px 34px
        rgba(241, 90, 0, 0.26);
}


/* ============================================================
   BOUTON SECONDAIRE
============================================================ */

.home-hero-button-secondary {
    background:
        rgba(10, 10, 10, 0.48);

    border:
        1px solid
        rgba(255, 255, 255, 0.30);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    color: #ffffff;
}


.home-hero-button-secondary:hover {
    background:
        rgba(255, 255, 255, 0.10);

    border-color:
        var(--rb-orange);

    color: #ffffff;

    transform: translateY(-2px);
}


/* ============================================================/* ============================================================
   INDICATEURS 01 / 02
============================================================ */

.home-hero-indicators {
    position: absolute;

    z-index: 8;

    left: 50%;
    bottom: 24px;

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

    gap: 14px;

    width: auto;

    margin: 0;
    padding: 0;

    transform: translateX(-50%);
}


.home-hero-indicators button {
    position: relative;

    width: 44px;
    height: 32px;

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

    flex: 0 0 44px;

    margin: 0;
    padding: 0;

    background: transparent;

    border: 0;

    text-indent: 0;

    opacity: 1;

    color: rgba(255, 255, 255, 0.35);

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

    line-height: 1;

    letter-spacing: 0.4px;

    cursor: pointer;

    transition:
        color 0.35s ease;
}


.home-hero-indicators button span {
    position: relative;

    z-index: 3;

    display: block;

    padding-top: 1px;
}


/* trait gris */

.home-hero-indicators button::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: rgba(255, 255, 255, 0.20);
}


/* trait orange actif */

.home-hero-indicators button::before {
    content: "";

    position: absolute;

    z-index: 2;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: var(--rb-orange);

    transition:
        width 0.4s ease;
}


.home-hero-indicators button.active {
    color: #ffffff;
}


.home-hero-indicators button.active::before {
    width: 100%;
}

/* ============================================================
   CONTRÔLES GAUCHE / DROITE
============================================================ */

.home-hero-control {
    top: 50%;

    width: 46px;
    height: 46px;

    opacity: 1;

    background:
        rgba(8, 8, 8, 0.55);

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 2px;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    transform: translateY(-50%);

    transition:
        background 0.35s ease,
        border-color 0.35s ease;
}


.home-hero-control i {
    color: #ffffff;

    font-size: 18px;
}


.home-hero-control:hover {
    background: var(--rb-orange);

    border-color: var(--rb-orange);
}


.home-hero-control-prev {
    left: 22px;
}


.home-hero-control-next {
    right: 22px;
}


/* ============================================================
   TABLETTE
============================================================ */

@media (max-width: 991.98px) {

    .home-hero-slide {
        height: 485px;
        min-height: 485px;
    }


    .home-hero-content {
        max-width: 650px;

        padding-left: 24px;
    }


    .home-hero-title {
        font-size:
            clamp(27px, 4vw, 38px);
    }


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


    .home-hero-control-prev {
        left: 14px;
    }


    .home-hero-control-next {
        right: 14px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .home-hero-slide {
        height: 410px;
        min-height: 410px;
    }


    .home-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(6, 6, 6, 0.93) 0%,
                rgba(6, 6, 6, 0.82) 52%,
                rgba(6, 6, 6, 0.48) 100%
            );
    }


    .home-hero-container {
        align-items: center;
    }


    .home-hero-content {
        max-width:
            calc(100% - 35px);

        padding-left: 19px;
    }


    .home-hero-content::before {
        width: 1px;
    }


    .home-hero-line {
        width: 36px;

        margin-bottom: 14px;
    }


    .home-hero-title {
        font-size:
            clamp(23px, 5.3vw, 31px);

        line-height: 1;

        letter-spacing: -0.6px;
    }


    .home-hero-actions {
        gap: 8px;

        margin-top: 25px;
    }


    .home-hero-button {
        min-height: 46px;

        padding: 0 17px;

        font-size: 10.5px;
    }


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


    .home-hero-indicators {
        bottom: 17px;
    }

}


/* ============================================================
   PETITS MOBILES
============================================================ */

@media (max-width: 575.98px) {

    .home-hero-slide {
        height: 380px;
        min-height: 380px;
    }


    .home-hero-content {
        max-width: 100%;

        padding-left: 16px;
        padding-right: 12px;
    }


    .home-hero-title {
        font-size:
            clamp(20px, 5.5vw, 27px);

        line-height: 1;

        letter-spacing: -0.4px;
    }


    .home-hero-title-line,
    .home-hero-title strong {
        white-space: nowrap;
    }


    .home-hero-actions {
        display: grid;

        grid-template-columns:
            1fr 1fr;

        width: 100%;
    }


    .home-hero-button {
        width: 100%;

        padding: 0 11px;

        white-space: nowrap;
    }


    .home-hero-indicators {
        bottom: 12px;
    }

}

@media (max-width: 425px) {

p {
    text-align: left;
}
}

/* ============================================================
   TRÈS PETITS ÉCRANS
============================================================ */

@media (max-width: 400px) {

    .home-hero-slide {
        height: 365px;
        min-height: 365px;
    }


    .home-hero-title {
        font-size: 20px;
    }


    .home-hero-button {
        font-size: 9.5px;
    }

}


/* ============================================================
   ACCESSIBILITÉ
============================================================ */

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

    .home-hero-image,
    .home-hero-content,
    .home-hero-button,
    .home-hero-indicators button::before {
        transition: none;
    }

}





















/* ============================================================
   ACCUEIL - SERVICES
============================================================ */

.home-services-grid-section {
    position: relative;

    padding: 100px 0 110px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(241, 90, 0, 0.08) 0,
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(255, 255, 255, 0.035) 0,
            transparent 26%
        ),
        linear-gradient(
            145deg,
            #181818 0%,
            #0e0e0e 48%,
            #070707 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


/* ============================================================
   DÉCOR DE FOND
============================================================ */

.home-services-grid-section::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -150px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    border:
        1px solid
        rgba(241, 90, 0, 0.08);

    box-shadow:
        0 0 100px
        rgba(241, 90, 0, 0.04);

    pointer-events: none;
}


.home-services-grid-section::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(241, 90, 0, 0.35),
            transparent
        );

    pointer-events: none;
}


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

.home-services-grid-header {
    position: relative;

    z-index: 2;

    max-width: 780px;

    margin: 0 auto 55px;

    text-align: center;
}


.home-services-grid-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 12px;

    color: var(--rb-orange);

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

    text-transform: uppercase;
    letter-spacing: 1.6px;
}


.home-services-grid-eyebrow::before,
.home-services-grid-eyebrow::after {
    content: "";

    width: 26px;
    height: 1px;

    background:
        rgba(241, 90, 0, 0.60);
}


.home-services-grid-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(25px, 2.5vw, 34px);
    font-weight: 700;

    line-height: 1.05;
}


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

.home-services-grid {
    position: relative;

    z-index: 2;
}


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

.home-service-card {
    position: relative;

    height: 100%;

    overflow: hidden;

    background:
        linear-gradient(
            160deg,
            rgba(255, 255, 255, 0.055) 0%,
            rgba(255, 255, 255, 0.018) 100%
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 4px;

    box-shadow:
        0 22px 45px
        rgba(0, 0, 0, 0.23);

    transform: translateY(0);

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


.home-service-card::before {
    content: "";

    position: absolute;

    z-index: 5;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--rb-orange),
            rgba(241, 90, 0, 0.15)
        );

    transition:
        width 0.55s cubic-bezier(.22, .61, .36, 1);
}


.home-service-card::after {
    content: "";

    position: absolute;

    z-index: 0;

    top: -100px;
    right: -100px;

    width: 200px;
    height: 200px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(241, 90, 0, 0.08),
            transparent 68%
        );

    opacity: 0;

    transform: scale(0.8);

    transition:
        opacity 0.45s ease,
        transform 0.45s ease;

    pointer-events: none;
}


.home-service-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(241, 90, 0, 0.30);

    box-shadow:
        0 30px 60px
        rgba(0, 0, 0, 0.35);
}


.home-service-card:hover::before {
    width: 100%;
}


.home-service-card:hover::after {
    opacity: 1;

    transform: scale(1);
}


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

.home-service-card-image {
    position: relative;

    height: 235px;

    overflow: hidden;

    background: #101010;
}


.home-service-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform: scale(1.01);

    transition:
        transform 0.8s cubic-bezier(.2, .65, .3, 1),
        filter 0.6s ease;
}


.home-service-card-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.06) 0%,
            rgba(0, 0, 0, 0.08) 45%,
            rgba(8, 8, 8, 0.78) 100%
        );

    transition:
        background 0.45s ease;
}


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

    filter:
        contrast(1.04)
        saturate(1.05);
}


.home-service-card:hover .home-service-card-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.03) 0%,
            rgba(0, 0, 0, 0.07) 48%,
            rgba(8, 8, 8, 0.67) 100%
        );
}


/* ============================================================
   CONTENU
============================================================ */

.home-service-card-content {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;

    min-height: 265px;

    padding: 28px 28px 30px;
}


.home-service-card-number {
    position: absolute;

    top: -24px;
    right: 22px;

    color:
        rgba(255, 255, 255, 0.10);

    font-size: 42px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -2px;

    transition:
        color 0.45s ease,
        transform 0.45s ease;
}


.home-service-card:hover .home-service-card-number {
    color:
        rgba(241, 90, 0, 0.18);

    transform:
        translateY(-3px);
}


.home-service-card h3 {
    position: relative;

    margin: 0 0 14px;

    padding-bottom: 14px;

    color: #ffffff;

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

    line-height: 1.05;
}


.home-service-card h3::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 30px;
    height: 2px;

    background: var(--rb-orange);

    transition:
        width 0.45s ease;
}


.home-service-card:hover h3::after {
    width: 52px;
}


.home-service-card p {
    margin: 0 0 24px;

    color: #aeaeae;

    font-size: 14px;

    line-height: 1.25;
}


/* ============================================================
   LIEN
============================================================ */

.home-service-card-link {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    width: fit-content;

    margin-top: auto;

    color: #ffffff;

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

    text-transform: uppercase;
    letter-spacing: 0.55px;

    transition:
        color var(--rb-transition);
}


.home-service-card-link i {
    color: var(--rb-orange);

    font-size: 15px;

    transition:
        transform 0.35s ease;
}


.home-service-card-link:hover {
    color: var(--rb-orange);
}


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


/* ============================================================
   ANIMATION D'APPARITION
============================================================ */

@keyframes homeServiceCardReveal {

    0% {
        opacity: 0;

        transform:
            translateY(24px);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0);
    }

}


.home-services-grid > div {
    opacity: 0;

    animation:
        homeServiceCardReveal
        0.7s ease
        forwards;
}


.home-services-grid > div:nth-child(1) {
    animation-delay: 0.05s;
}


.home-services-grid > div:nth-child(2) {
    animation-delay: 0.10s;
}


.home-services-grid > div:nth-child(3) {
    animation-delay: 0.15s;
}


.home-services-grid > div:nth-child(4) {
    animation-delay: 0.20s;
}


.home-services-grid > div:nth-child(5) {
    animation-delay: 0.25s;
}


.home-services-grid > div:nth-child(6) {
    animation-delay: 0.30s;
}


.home-services-grid > div:nth-child(7) {
    animation-delay: 0.35s;
}


.home-services-grid > div:nth-child(8) {
    animation-delay: 0.40s;
}


.home-services-grid > div:nth-child(9) {
    animation-delay: 0.45s;
}


/* ============================================================
   TABLETTE
============================================================ */

@media (max-width: 991.98px) {

    .home-services-grid-section {
        padding: 75px 0 80px;
    }


    .home-services-grid-header {
        margin-bottom: 42px;
    }


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


    .home-service-card-content {
        min-height: 250px;

        padding:
            25px 24px 27px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .home-services-grid-section {
        padding: 55px 0 60px;
    }


    .home-services-grid-header {
        margin-bottom: 34px;

        text-align: left;
    }


    .home-services-grid-eyebrow::before {
        display: none;
    }


    .home-services-grid-header h2 {
        font-size: 24px;
    }


    .home-service-card-image {
        height: 230px;
    }


    .home-service-card-content {
        min-height: auto;

        padding:
            25px 23px 27px;
    }


    .home-service-card p {
        font-size: 14px;
    }


    .home-service-card:hover {
        transform: translateY(-4px);
    }

}


/* ============================================================
   PETITS MOBILES
============================================================ */

@media (max-width: 575.98px) {

    .home-services-grid-section {
        padding: 48px 0 52px;
    }


    .home-service-card-image {
        height: 205px;
    }


    .home-service-card h3 {
        font-size: 20px;
    }


    .home-service-card-number {
        right: 18px;

        font-size: 37px;
    }

}


/* ============================================================
   ACCESSIBILITÉ - RÉDUCTION DES ANIMATIONS
============================================================ */

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

    .home-services-grid > div {
        opacity: 1;

        animation: none;
    }


    .home-service-card,
    .home-service-card-image img,
    .home-service-card::before,
    .home-service-card::after,
    .home-service-card-number,
    .home-service-card h3::after,
    .home-service-card-link i {
        transition: none;
    }

}


/* ============================================================
   PAGE D'ACCUEIL
   BLOCS 1 + 2 + 3 + CTA MAP
============================================================ */

.home-page {
    background: #080808;
    color: #d0d0d0;
}


/* ============================================================
   TYPOGRAPHIE GÉNÉRALE
============================================================ */

.home-page h1,
.home-page h2 {
    margin: 0;

    line-height: 1.05;
}


.home-page h1 {
    margin-bottom: 24px;

    color: #ffffff;

    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
}


.home-page h2 {
    margin-bottom: 22px;

    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
}


.home-page p {
    margin: 0 0 16px;

    font-size: 15px;
    line-height: 1.1;
}


.home-page p:last-child {
    margin-bottom: 0;
}


.home-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--rb-orange);

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

    line-height: 1.1;

    text-transform: uppercase;
    letter-spacing: 1.35px;
}


/* ============================================================
   CTA INTÉGRÉS AUX BLOCS
============================================================ */

.home-inline-cta {
    margin-top: 28px;
}


.home-inline-button {
    min-height: 48px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        border-color var(--rb-transition),
        color var(--rb-transition),
        transform var(--rb-transition);
}


.home-inline-button-primary {
    background: var(--rb-orange);

    border:
        1px solid
        var(--rb-orange);

    color: #ffffff;
}


.home-inline-button-primary:hover {
    background: var(--rb-orange-hover);

    border-color:
        var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.home-inline-button-dark {
    background: #171717;

    border:
        1px solid
        #171717;

    color: #ffffff;
}


.home-inline-button-dark:hover {
    background: var(--rb-orange);

    border-color:
        var(--rb-orange);

    color: #ffffff;

    transform: translateY(-2px);
}


.home-inline-button-outline {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

    color: #ffffff;
}


.home-inline-button-outline:hover {
    background: var(--rb-orange);

    border-color:
        var(--rb-orange);

    color: #ffffff;

    transform: translateY(-2px);
}


/* ============================================================
   CADRES D'IMAGES
============================================================ */

.home-image-frame {
    position: relative;

    padding: 12px;

    isolation: isolate;
}


.home-image-frame::before {
    content: "";

    position: absolute;

    z-index: -2;

    inset: 0;

    border-radius: 5px;

    pointer-events: none;
}


.home-image-frame::after {
    content: "";

    position: absolute;

    z-index: -1;

    right: -9px;
    bottom: -9px;

    width: 82%;
    height: 82%;

    border-radius: 3px;

    pointer-events: none;
}


/* ============================================================
   CADRE SOMBRE
============================================================ */

.home-image-frame-dark::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.015)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.35);
}


.home-image-frame-dark::after {
    border-right:
        1px solid
        rgba(241, 90, 0, 0.45);

    border-bottom:
        1px solid
        rgba(241, 90, 0, 0.45);

    background:
        linear-gradient(
            135deg,
            transparent 50%,
            rgba(241, 90, 0, 0.05) 100%
        );
}


/* ============================================================
   CADRE CLAIR
============================================================ */

.home-image-frame-light::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(225, 225, 222, 0.92)
        );

    border:
        1px solid
        rgba(0, 0, 0, 0.10);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.10);
}


.home-image-frame-light::after {
    border-right:
        1px solid
        rgba(35, 35, 35, 0.28);

    border-bottom:
        1px solid
        rgba(35, 35, 35, 0.28);

    background:
        linear-gradient(
            135deg,
            transparent 45%,
            rgba(35, 35, 35, 0.05) 100%
        );
}


/* ============================================================
   COINS DÉCORATIFS
============================================================ */

.home-image-corner {
    position: absolute;

    z-index: 5;

    width: 42px;
    height: 42px;

    pointer-events: none;
}


.home-image-corner::before,
.home-image-corner::after {
    content: "";

    position: absolute;

    background: var(--rb-orange);
}


.home-image-corner-top {
    top: 0;
    left: 0;
}


.home-image-corner-top::before {
    top: 0;
    left: 0;

    width: 42px;
    height: 2px;
}


.home-image-corner-top::after {
    top: 0;
    left: 0;

    width: 2px;
    height: 42px;
}


.home-image-corner-bottom {
    right: 0;
    bottom: 0;
}


.home-image-corner-bottom::before {
    right: 0;
    bottom: 0;

    width: 42px;
    height: 2px;
}


.home-image-corner-bottom::after {
    right: 0;
    bottom: 0;

    width: 2px;
    height: 42px;
}


/* ============================================================
   TRAITEMENT DES IMAGES
============================================================ */

.home-about-image,
.home-services-image,
.home-all-services-image {
    position: relative;

    overflow: hidden;

    border-radius: 3px;

    background: #111111;
}


.home-about-image::after,
.home-services-image::after,
.home-all-services-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.07) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.15) 100%
        );
}


.home-about-image img,
.home-services-image img,
.home-all-services-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}


.home-image-frame:hover img {
    transform: scale(1.025);
}


/* ============================================================
   BLOC 1
   CENTRE MÉCANIQUE RB
============================================================ */

.home-about-section {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            #080808 0%,
            #151515 56%,
            #0b0b0b 100%
        );

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.home-about-content {
    max-width: 680px;
}


.home-about-content p {
    color: #b9b9b9;
}


.home-about-image,
.home-about-image img {
    min-height: 430px;
}


/* ============================================================
   BLOC 2
   SERVICES DE MÉCANIQUE GÉNÉRALE
============================================================ */

.home-services-section {
    padding: 95px 0;

    background:
        linear-gradient(
            180deg,
            #f7f7f5 0%,
            #ebebe8 100%
        );
}


.home-light-content {
    max-width: 780px;
}


.home-light-content h2 {
    color: #161616;
}


.home-light-content p {
    color: #3b3b3b;
}


.home-services-image,
.home-services-image img {
    min-height: 460px;
}


/* ============================================================
   BLOC 3
   TOUS LES SERVICES AU MÊME ENDROIT
============================================================ */

.home-all-services-section {
    position: relative;

    padding: 95px 0;

    overflow: hidden;

    background:
        linear-gradient(
            140deg,
            #222222 0%,
            #171717 55%,
            #0e0e0e 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.05);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.05);
}


.home-all-services-section::before {
    content: "";

    position: absolute;

    top: -220px;
    left: -170px;

    width: 460px;
    height: 460px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(241, 90, 0, 0.08) 0%,
            transparent 70%
        );

    pointer-events: none;
}


.home-all-services-content {
    position: relative;

    z-index: 2;

    max-width: 760px;
}


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


.home-all-services-content p {
    color: #bdbdbd;
}


.home-all-services-image,
.home-all-services-image img {
    min-height: 440px;
}


/* ============================================================
   CTA FINAL
   MAP + CONTACT
============================================================ */

.home-contact-section {
    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #f0f0ee 0%,
            #e4e4e1 100%
        );
}


.home-contact-panel {
    position: relative;

    overflow: hidden;

    background: #171717;

    border:
        1px solid
        rgba(0, 0, 0, 0.12);

    border-radius: 4px;

    box-shadow:
        0 30px 70px
        rgba(0, 0, 0, 0.16);
}


.home-contact-panel::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    z-index: 4;

    width: 58%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--rb-orange)
        );
}


/* ============================================================
   MAP
============================================================ */

.home-contact-map {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 410px;

    overflow: hidden;

    background: #101010;
}


.home-contact-map iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    filter:
        grayscale(0.72)
        contrast(1.08)
        brightness(0.72);

    transition:
        filter 0.5s ease;
}


.home-contact-panel:hover .home-contact-map iframe {
    filter:
        grayscale(0.35)
        contrast(1.04)
        brightness(0.82);
}


.home-contact-map-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.06) 0%,
            rgba(0, 0, 0, 0.02) 55%,
            rgba(23, 23, 23, 0.75) 100%
        );
}


/* ============================================================
   BOUTON MAP
============================================================ */

.home-contact-map-link {
    position: absolute;

    z-index: 3;

    left: 24px;
    bottom: 24px;

    min-height: 46px;

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

    gap: 9px;

    padding: 0 18px;

    background:
        rgba(12, 12, 12, 0.92);

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 3px;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    color: #ffffff;

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

    text-transform: uppercase;
    letter-spacing: 0.45px;

    transition:
        background var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.home-contact-map-link i {
    color: var(--rb-orange);

    font-size: 16px;

    transition:
        color var(--rb-transition);
}


.home-contact-map-link:hover {
    background: var(--rb-orange);

    border-color: var(--rb-orange);

    color: #ffffff;

    transform: translateY(-2px);
}


.home-contact-map-link:hover i {
    color: #ffffff;
}


/* ============================================================
   CONTENU CTA
============================================================ */

.home-contact-content {
    position: relative;

    z-index: 2;

    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 55px 60px;
}


.home-contact-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: var(--rb-orange);

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

    text-transform: uppercase;
    letter-spacing: 1.4px;
}


.home-contact-content h2 {
    margin: 0 0 22px;

    color: #ffffff;

    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;

    line-height: 1.05;
}


.home-contact-content p {
    margin: 0;

    color: #bcbcbc;

    font-size: 15px;
    line-height: 1.1;
}


.home-contact-content p a {
    color: var(--rb-orange);

    font-weight: 600;

    transition:
        color var(--rb-transition);
}


.home-contact-content p a:hover {
    color: var(--rb-orange-hover);
}


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

.home-contact-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}


.home-contact-primary,
.home-contact-secondary {
    min-height: 50px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        border-color var(--rb-transition),
        color var(--rb-transition),
        transform var(--rb-transition);
}


.home-contact-primary {
    background: var(--rb-orange);

    border:
        1px solid
        var(--rb-orange);

    color: #ffffff;
}


.home-contact-primary:hover {
    background: var(--rb-orange-hover);

    border-color:
        var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.home-contact-secondary {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    color: #ffffff;
}


.home-contact-secondary:hover {
    border-color: var(--rb-orange);

    color: var(--rb-orange);

    transform: translateY(-2px);
}


/* ============================================================
   TABLETTE
============================================================ */

@media (max-width: 991.98px) {

    .home-about-section,
    .home-services-section,
    .home-all-services-section,
    .home-contact-section {
        padding: 65px 0;
    }


    .home-about-image,
    .home-about-image img,
    .home-services-image,
    .home-services-image img,
    .home-all-services-image,
    .home-all-services-image img {
        min-height: 360px;
    }


    .home-contact-map {
        min-height: 360px;
    }


    .home-contact-map-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.02) 55%,
                rgba(23, 23, 23, 0.28) 100%
            );
    }


    .home-contact-content {
        padding: 42px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .home-about-section,
    .home-services-section,
    .home-all-services-section,
    .home-contact-section {
        padding: 50px 0;
    }


    .home-page h1 {
        font-size: 29px;
    }


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


    .home-page p {
        font-size: 14px;
    }


    .home-inline-button {
        width: 100%;
    }


    .home-image-frame {
        padding: 9px;
    }


    .home-image-frame::after {
        right: -6px;
        bottom: -6px;
    }


    .home-image-corner {
        width: 32px;
        height: 32px;
    }


    .home-image-corner-top::before,
    .home-image-corner-bottom::before {
        width: 32px;
    }


    .home-image-corner-top::after,
    .home-image-corner-bottom::after {
        height: 32px;
    }


    .home-about-image,
    .home-about-image img,
    .home-services-image,
    .home-services-image img,
    .home-all-services-image,
    .home-all-services-image img {
        min-height: 290px;
    }


    .home-contact-map {
        min-height: 320px;
    }


    .home-contact-map-link {
        left: 18px;
        bottom: 18px;
    }


    .home-contact-content {
        padding: 35px 28px;
    }


    .home-contact-content p {
        font-size: 14px;
    }


    .home-contact-actions {
        flex-direction: column;
    }


    .home-contact-primary,
    .home-contact-secondary {
        width: 100%;
    }

}


/* ============================================================
   PETITS MOBILES
============================================================ */

@media (max-width: 575.98px) {

    .home-about-section,
    .home-services-section,
    .home-all-services-section,
    .home-contact-section {
        padding: 45px 0;
    }


    .home-about-image,
    .home-about-image img,
    .home-services-image,
    .home-services-image img,
    .home-all-services-image,
    .home-all-services-image img {
        min-height: 250px;
    }


    .home-contact-map {
        min-height: 280px;
    }


    .home-contact-map-link {
        min-height: 43px;

        left: 15px;
        bottom: 15px;

        padding: 0 15px;

        font-size: 10.5px;
    }


    .home-contact-content {
        padding: 30px 22px;
    }

}


/* ============================================================
   PAGE AIR CLIMATISÉ AUTO
============================================================ */

.ac-page {
    background: #080808;
    color: #d2d2d2;
}


/* ============================================================
   GLOBAL PAGE
============================================================ */

.ac-page h1,
.ac-page h2 {
    margin: 0;
    line-height: 1.05;
}


.ac-page h1 {
    color: #ffffff;

    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
}


.ac-page h2 {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
}


.ac-page p {
    margin: 0 0 16px;

    font-size: 15px;
    line-height: 1.1;
}


.ac-page p:last-child {
    margin-bottom: 0;
}


.ac-page .section-eyebrow {
    display: inline-block;

    margin-bottom: 11px;

    color: var(--rb-orange);

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

    text-transform: uppercase;
    letter-spacing: 1.4px;

    line-height: 1.1;
}


/* ============================================================
   CTA INTÉGRÉS
============================================================ */

.ac-inline-cta {
    margin-top: 28px;
}


.ac-inline-button {
    min-height: 48px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.ac-inline-button-primary {
    background: var(--rb-orange);

    border:
        1px solid
        var(--rb-orange);

    color: #ffffff;
}


.ac-inline-button-primary:hover {
    background: var(--rb-orange-hover);

    border-color:
        var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.ac-inline-button-outline {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

    color: #ffffff;
}


.ac-inline-button-outline:hover {
    background: var(--rb-orange);

    border-color:
        var(--rb-orange);

    color: #ffffff;

    transform: translateY(-2px);
}


/* ============================================================
   CADRES D'IMAGES
============================================================ */

.ac-image-frame {
    position: relative;

    padding: 12px;

    isolation: isolate;
}


.ac-image-frame::before {
    content: "";

    position: absolute;

    z-index: -2;

    inset: 0;

    border-radius: 5px;

    pointer-events: none;
}


.ac-image-frame::after {
    content: "";

    position: absolute;

    z-index: -1;

    right: -9px;
    bottom: -9px;

    width: 82%;
    height: 82%;

    border-radius: 3px;

    pointer-events: none;
}


/* ============================================================
   CADRES SOMBRES
============================================================ */

.ac-image-frame-dark::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.015)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.35);
}


.ac-image-frame-dark::after {
    border-right:
        1px solid
        rgba(241, 90, 0, 0.45);

    border-bottom:
        1px solid
        rgba(241, 90, 0, 0.45);

    background:
        linear-gradient(
            135deg,
            transparent 50%,
            rgba(241, 90, 0, 0.05) 100%
        );
}


.ac-image-frame-dark {
    filter:
        drop-shadow(
            0 14px 24px
            rgba(0, 0, 0, 0.22)
        );
}


/* ============================================================
   CADRES CLAIRS
============================================================ */

.ac-image-frame-light::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(225, 225, 222, 0.92)
        );

    border:
        1px solid
        rgba(0, 0, 0, 0.10);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.10);
}


.ac-image-frame-light::after {
    border-right:
        1px solid
        rgba(35, 35, 35, 0.28);

    border-bottom:
        1px solid
        rgba(35, 35, 35, 0.28);

    background:
        linear-gradient(
            135deg,
            transparent 45%,
            rgba(35, 35, 35, 0.05) 100%
        );
}


/* ============================================================
   COINS DÉCORATIFS
============================================================ */

.ac-image-corner {
    position: absolute;

    z-index: 5;

    width: 42px;
    height: 42px;

    pointer-events: none;
}


.ac-image-corner::before,
.ac-image-corner::after {
    content: "";

    position: absolute;

    background: var(--rb-orange);
}


.ac-image-corner-top {
    top: 0;
    left: 0;
}


.ac-image-corner-top::before {
    top: 0;
    left: 0;

    width: 42px;
    height: 2px;
}


.ac-image-corner-top::after {
    top: 0;
    left: 0;

    width: 2px;
    height: 42px;
}


.ac-image-corner-bottom {
    right: 0;
    bottom: 0;
}


.ac-image-corner-bottom::before {
    right: 0;
    bottom: 0;

    width: 42px;
    height: 2px;
}


.ac-image-corner-bottom::after {
    right: 0;
    bottom: 0;

    width: 2px;
    height: 42px;
}


/* ============================================================
   TRAITEMENT COMMUN DES IMAGES
============================================================ */

.ac-intro-image,
.ac-team-image,
.ac-causes-image {
    position: relative;

    overflow: hidden;

    border-radius: 3px;

    background: #111111;
}


.ac-intro-image::after,
.ac-team-image::after,
.ac-causes-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.12) 100%
        );
}


.ac-intro-image img,
.ac-team-image img,
.ac-causes-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}


.ac-image-frame:hover img {
    transform: scale(1.025);
}


/* ============================================================
   INTRODUCTION - SOMBRE
============================================================ */

.ac-intro {
    padding: 80px 0;

    background:
        linear-gradient(
            135deg,
            #090909 0%,
            #131313 55%,
            #0a0a0a 100%
        );

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.ac-intro-content {
    max-width: 680px;
}


.ac-intro-content h1 {
    margin-bottom: 24px;
}


.ac-intro-content p {
    color: #b9b9b9;
}


.ac-intro-image,
.ac-intro-image img {
    min-height: 460px;
}


/* ============================================================
   ÉQUIPE EXPÉRIMENTÉE - CLAIR
============================================================ */

.ac-team-section {
    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #f6f6f4 0%,
            #eaeae7 100%
        );
}


.ac-light-content {
    max-width: 780px;
}


.ac-light-content h2 {
    margin-bottom: 22px;

    color: #161616;
}


.ac-light-content p {
    color: #3b3b3b;
}


.ac-team-image,
.ac-team-image img {
    min-height: 390px;
}


/* ============================================================
   CAUSES DE BRIS - SOMBRE
============================================================ */

.ac-causes-section {
    position: relative;

    padding: 90px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #101010 0%,
            #232323 55%,
            #131313 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.ac-causes-section::before {
    content: "";

    position: absolute;

    top: -190px;
    left: -180px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(241, 90, 0, 0.08) 0%,
            transparent 70%
        );

    pointer-events: none;
}


.ac-causes-content {
    position: relative;

    z-index: 2;

    max-width: 780px;
}


.ac-causes-content h2 {
    margin-bottom: 22px;

    color: #ffffff;
}


.ac-causes-content p {
    color: #bdbdbd;
}


.ac-causes-image,
.ac-causes-image img {
    min-height: 470px;
}


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

.ac-contact-section {
    padding: 85px 0;

    background:
        linear-gradient(
            180deg,
            #efefed 0%,
            #e4e4e1 100%
        );
}


.ac-contact-panel {
    position: relative;

    overflow: hidden;

    background: #171717;

    border:
        1px solid
        rgba(0, 0, 0, 0.12);

    border-radius: 4px;

    box-shadow:
        0 28px 65px
        rgba(0, 0, 0, 0.16);
}


.ac-contact-panel::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    z-index: 3;

    width: 55%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--rb-orange)
        );
}


.ac-contact-image {
    position: relative;

    width: 100%;
    min-height: 390px;

    overflow: hidden;
}


.ac-contact-image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s ease;
}


.ac-contact-panel:hover .ac-contact-image img {
    transform: scale(1.025);
}


.ac-contact-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.03) 45%,
            rgba(23, 23, 23, 0.88) 100%
        );

    pointer-events: none;
}


.ac-contact-content {
    position: relative;

    z-index: 2;

    padding: 55px 60px;
}


.ac-contact-content h2 {
    margin-bottom: 20px;

    color: #ffffff;
}


.ac-contact-content p {
    color: #bcbcbc;
}


.ac-contact-content a:not(.ac-primary-button):not(.ac-secondary-button) {
    color: var(--rb-orange);

    font-weight: 600;

    transition:
        color var(--rb-transition);
}


.ac-contact-content a:not(.ac-primary-button):not(.ac-secondary-button):hover {
    color: var(--rb-orange-hover);
}


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

.ac-contact-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}


.ac-primary-button,
.ac-secondary-button {
    min-height: 50px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.ac-primary-button {
    background: var(--rb-orange);

    border:
        1px solid
        var(--rb-orange);

    color: #ffffff;
}


.ac-primary-button:hover {
    background: var(--rb-orange-hover);

    border-color:
        var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.ac-secondary-button {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    color: #ffffff;
}


.ac-secondary-button:hover {
    border-color: var(--rb-orange);

    color: var(--rb-orange);

    transform: translateY(-2px);
}


/* ============================================================
   TABLETTE
============================================================ */

@media (max-width: 991.98px) {

    .ac-intro,
    .ac-team-section,
    .ac-causes-section,
    .ac-contact-section {
        padding: 65px 0;
    }


    .ac-intro-image,
    .ac-intro-image img {
        min-height: 370px;
    }


    .ac-team-image,
    .ac-team-image img {
        min-height: 340px;
    }


    .ac-causes-image,
    .ac-causes-image img {
        min-height: 390px;
    }


    .ac-contact-image {
        min-height: 340px;
    }


    .ac-contact-image-overlay {
        background:
            linear-gradient(
                180deg,
                transparent 55%,
                rgba(23, 23, 23, 0.4) 100%
            );
    }


    .ac-contact-content {
        padding: 42px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .ac-intro,
    .ac-team-section,
    .ac-causes-section,
    .ac-contact-section {
        padding: 50px 0;
    }


    .ac-page h1 {
        font-size: 29px;
    }


    .ac-page h2 {
        font-size: 22px;
    }


    .ac-page p {
        font-size: 14px;
    }


    .ac-inline-button {
        width: 100%;
    }


    .ac-image-frame {
        padding: 9px;
    }


    .ac-image-frame::after {
        right: -6px;
        bottom: -6px;
    }


    .ac-image-corner {
        width: 32px;
        height: 32px;
    }


    .ac-image-corner-top::before,
    .ac-image-corner-bottom::before {
        width: 32px;
    }


    .ac-image-corner-top::after,
    .ac-image-corner-bottom::after {
        height: 32px;
    }


    .ac-intro-image,
    .ac-intro-image img,
    .ac-team-image,
    .ac-team-image img,
    .ac-causes-image,
    .ac-causes-image img {
        min-height: 290px;
    }


    .ac-contact-image {
        min-height: 290px;
    }


    .ac-contact-content {
        padding: 35px 28px;
    }


    .ac-contact-actions {
        flex-direction: column;
    }


    .ac-primary-button,
    .ac-secondary-button {
        width: 100%;
    }

}


/* ============================================================
   PETITS MOBILES
============================================================ */

@media (max-width: 575.98px) {

    .ac-intro,
    .ac-team-section,
    .ac-causes-section,
    .ac-contact-section {
        padding: 45px 0;
    }


    .ac-intro-image,
    .ac-intro-image img,
    .ac-team-image,
    .ac-team-image img,
    .ac-causes-image,
    .ac-causes-image img {
        min-height: 250px;
    }


    .ac-contact-image {
        min-height: 250px;
    }


    .ac-contact-content {
        padding: 30px 22px;
    }

}

/* ============================================================
   PAGE CHANGEMENT D'HUILE
============================================================ */

.oil-change-page {
    background: #080808;
    color: #d2d2d2;
}


/* ============================================================
   GLOBAL PAGE
============================================================ */

.oil-change-page h1,
.oil-change-page h2 {
    margin: 0;
    line-height: 1.05;
}


.oil-change-page h1 {
    color: #ffffff;

    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
}


.oil-change-page h2 {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
}


.oil-change-page p {
    margin: 0 0 16px;

    font-size: 15px;
    line-height: 1.1;
}


.oil-change-page p:last-child {
    margin-bottom: 0;
}


.oil-change-page .section-eyebrow {
    display: inline-block;

    margin-bottom: 11px;

    color: var(--rb-orange);

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

    text-transform: uppercase;
    letter-spacing: 1.4px;

    line-height: 1.1;
}


/* ============================================================
   CTA INTÉGRÉS
============================================================ */

.oil-change-inline-cta {
    margin-top: 28px;
}


.oil-change-inline-button {
    min-height: 48px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.oil-change-inline-button-primary {
    background: var(--rb-orange);

    border:
        1px solid
        var(--rb-orange);

    color: #ffffff;
}


.oil-change-inline-button-primary:hover {
    background: var(--rb-orange-hover);

    border-color:
        var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.oil-change-inline-button-outline {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

    color: #ffffff;
}


.oil-change-inline-button-outline:hover {
    background: var(--rb-orange);

    border-color:
        var(--rb-orange);

    color: #ffffff;

    transform: translateY(-2px);
}


/* ============================================================
   CADRES D'IMAGES
============================================================ */

.oil-change-image-frame {
    position: relative;

    padding: 12px;

    isolation: isolate;
}


.oil-change-image-frame::before {
    content: "";

    position: absolute;

    z-index: -2;

    inset: 0;

    border-radius: 5px;

    pointer-events: none;
}


.oil-change-image-frame::after {
    content: "";

    position: absolute;

    z-index: -1;

    right: -9px;
    bottom: -9px;

    width: 82%;
    height: 82%;

    border-radius: 3px;

    pointer-events: none;
}


/* ============================================================
   CADRES SOMBRES
============================================================ */

.oil-change-image-frame-dark::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.015)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.35);
}


.oil-change-image-frame-dark::after {
    border-right:
        1px solid
        rgba(241, 90, 0, 0.45);

    border-bottom:
        1px solid
        rgba(241, 90, 0, 0.45);

    background:
        linear-gradient(
            135deg,
            transparent 50%,
            rgba(241, 90, 0, 0.05) 100%
        );
}


.oil-change-image-frame-dark {
    filter:
        drop-shadow(
            0 14px 24px
            rgba(0, 0, 0, 0.22)
        );
}


/* ============================================================
   CADRES CLAIRS
============================================================ */

.oil-change-image-frame-light::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(225, 225, 222, 0.92)
        );

    border:
        1px solid
        rgba(0, 0, 0, 0.10);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.10);
}


.oil-change-image-frame-light::after {
    border-right:
        1px solid
        rgba(35, 35, 35, 0.28);

    border-bottom:
        1px solid
        rgba(35, 35, 35, 0.28);

    background:
        linear-gradient(
            135deg,
            transparent 45%,
            rgba(35, 35, 35, 0.05) 100%
        );
}


/* ============================================================
   COINS DÉCORATIFS
============================================================ */

.oil-change-image-corner {
    position: absolute;

    z-index: 5;

    width: 42px;
    height: 42px;

    pointer-events: none;
}


.oil-change-image-corner::before,
.oil-change-image-corner::after {
    content: "";

    position: absolute;

    background: var(--rb-orange);
}


.oil-change-image-corner-top {
    top: 0;
    left: 0;
}


.oil-change-image-corner-top::before {
    top: 0;
    left: 0;

    width: 42px;
    height: 2px;
}


.oil-change-image-corner-top::after {
    top: 0;
    left: 0;

    width: 2px;
    height: 42px;
}


.oil-change-image-corner-bottom {
    right: 0;
    bottom: 0;
}


.oil-change-image-corner-bottom::before {
    right: 0;
    bottom: 0;

    width: 42px;
    height: 2px;
}


.oil-change-image-corner-bottom::after {
    right: 0;
    bottom: 0;

    width: 2px;
    height: 42px;
}


/* ============================================================
   TRAITEMENT COMMUN DES IMAGES
============================================================ */

.oil-change-intro-image,
.oil-change-importance-image,
.oil-change-when-image,
.oil-change-check-image {
    position: relative;

    overflow: hidden;

    border-radius: 3px;

    background: #111111;
}


.oil-change-intro-image::after,
.oil-change-importance-image::after,
.oil-change-when-image::after,
.oil-change-check-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.12) 100%
        );
}


.oil-change-intro-image img,
.oil-change-importance-image img,
.oil-change-when-image img,
.oil-change-check-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}


.oil-change-image-frame:hover img {
    transform: scale(1.025);
}


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

.oil-change-intro {
    padding: 80px 0;

    background:
        linear-gradient(
            135deg,
            #090909 0%,
            #131313 55%,
            #0a0a0a 100%
        );

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.oil-change-intro-content {
    max-width: 680px;
}


.oil-change-intro-content h1 {
    margin-bottom: 24px;
}


.oil-change-intro-content p {
    color: #b9b9b9;
}


.oil-change-intro-image,
.oil-change-intro-image img {
    min-height: 410px;
}


/* ============================================================
   IMPORTANCE - CLAIR
============================================================ */

.oil-change-importance-section {
    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #f6f6f4 0%,
            #eaeae7 100%
        );
}


.oil-change-light-content {
    max-width: 780px;
}


.oil-change-light-content h2 {
    margin-bottom: 22px;

    color: #161616;
}


.oil-change-light-content p {
    color: #3b3b3b;
}


.oil-change-importance-image,
.oil-change-importance-image img {
    min-height: 390px;
}


/* ============================================================
   QUAND CHANGER L'HUILE - SOMBRE
============================================================ */

.oil-change-when-section {
    position: relative;

    padding: 90px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #101010 0%,
            #232323 55%,
            #131313 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.oil-change-when-section::before {
    content: "";

    position: absolute;

    top: -180px;
    left: -180px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(241, 90, 0, 0.08) 0%,
            transparent 70%
        );

    pointer-events: none;
}


.oil-change-when-content {
    position: relative;

    z-index: 2;

    max-width: 760px;
}


.oil-change-when-content h2 {
    margin-bottom: 22px;

    color: #ffffff;
}


.oil-change-when-content p {
    color: #bdbdbd;
}


.oil-change-when-image,
.oil-change-when-image img {
    min-height: 410px;
}


/* ============================================================
   VÉRIFICATION - CLAIR
============================================================ */

.oil-change-check-section {
    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #f7f7f5 0%,
            #ededeb 100%
        );
}


.oil-change-check-image,
.oil-change-check-image img {
    min-height: 370px;
}


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

.oil-change-contact-section {
    padding: 85px 0;

    background:
        linear-gradient(
            180deg,
            #101010 0%,
            #070707 100%
        );
}


.oil-change-contact-panel {
    position: relative;

    overflow: hidden;

    background: #171717;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 4px;

    box-shadow:
        0 28px 65px
        rgba(0, 0, 0, 0.35);
}


.oil-change-contact-panel::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    z-index: 3;

    width: 55%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--rb-orange)
        );
}


.oil-change-contact-image {
    position: relative;

    width: 100%;
    min-height: 380px;

    overflow: hidden;
}


.oil-change-contact-image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s ease;
}


.oil-change-contact-panel:hover .oil-change-contact-image img {
    transform: scale(1.025);
}


.oil-change-contact-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.03) 45%,
            rgba(23, 23, 23, 0.88) 100%
        );

    pointer-events: none;
}


.oil-change-contact-content {
    position: relative;

    z-index: 2;

    padding: 55px 60px;
}


.oil-change-contact-content h2 {
    margin-bottom: 20px;

    color: #ffffff;
}


.oil-change-contact-content p {
    color: #bcbcbc;
}


.oil-change-contact-content a:not(.oil-change-primary-button):not(.oil-change-secondary-button) {
    color: var(--rb-orange);

    font-weight: 600;

    transition:
        color var(--rb-transition);
}


.oil-change-contact-content a:not(.oil-change-primary-button):not(.oil-change-secondary-button):hover {
    color: var(--rb-orange-hover);
}


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

.oil-change-contact-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}


.oil-change-primary-button,
.oil-change-secondary-button {
    min-height: 50px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.oil-change-primary-button {
    background: var(--rb-orange);

    border:
        1px solid
        var(--rb-orange);

    color: #ffffff;
}


.oil-change-primary-button:hover {
    background: var(--rb-orange-hover);

    border-color:
        var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.oil-change-secondary-button {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    color: #ffffff;
}


.oil-change-secondary-button:hover {
    border-color: var(--rb-orange);

    color: var(--rb-orange);

    transform: translateY(-2px);
}


/* ============================================================
   TABLETTE
============================================================ */

@media (max-width: 991.98px) {

    .oil-change-intro,
    .oil-change-importance-section,
    .oil-change-when-section,
    .oil-change-check-section,
    .oil-change-contact-section {
        padding: 65px 0;
    }


    .oil-change-intro-image,
    .oil-change-intro-image img {
        min-height: 350px;
    }


    .oil-change-importance-image,
    .oil-change-importance-image img {
        min-height: 340px;
    }


    .oil-change-when-image,
    .oil-change-when-image img {
        min-height: 350px;
    }


    .oil-change-check-image,
    .oil-change-check-image img {
        min-height: 330px;
    }


    .oil-change-contact-image {
        min-height: 340px;
    }


    .oil-change-contact-image-overlay {
        background:
            linear-gradient(
                180deg,
                transparent 55%,
                rgba(23, 23, 23, 0.4) 100%
            );
    }


    .oil-change-contact-content {
        padding: 42px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .oil-change-intro,
    .oil-change-importance-section,
    .oil-change-when-section,
    .oil-change-check-section,
    .oil-change-contact-section {
        padding: 50px 0;
    }


    .oil-change-page h1 {
        font-size: 29px;
    }


    .oil-change-page h2 {
        font-size: 22px;
    }


    .oil-change-page p {
        font-size: 14px;
    }


    .oil-change-inline-button {
        width: 100%;
    }


    .oil-change-image-frame {
        padding: 9px;
    }


    .oil-change-image-frame::after {
        right: -6px;
        bottom: -6px;
    }


    .oil-change-image-corner {
        width: 32px;
        height: 32px;
    }


    .oil-change-image-corner-top::before,
    .oil-change-image-corner-bottom::before {
        width: 32px;
    }


    .oil-change-image-corner-top::after,
    .oil-change-image-corner-bottom::after {
        height: 32px;
    }


    .oil-change-intro-image,
    .oil-change-intro-image img,
    .oil-change-importance-image,
    .oil-change-importance-image img,
    .oil-change-when-image,
    .oil-change-when-image img,
    .oil-change-check-image,
    .oil-change-check-image img {
        min-height: 290px;
    }


    .oil-change-contact-image {
        min-height: 290px;
    }


    .oil-change-contact-content {
        padding: 35px 28px;
    }


    .oil-change-contact-actions {
        flex-direction: column;
    }


    .oil-change-primary-button,
    .oil-change-secondary-button {
        width: 100%;
    }

}


/* ============================================================
   PETITS MOBILES
============================================================ */

@media (max-width: 575.98px) {

    .oil-change-intro,
    .oil-change-importance-section,
    .oil-change-when-section,
    .oil-change-check-section,
    .oil-change-contact-section {
        padding: 45px 0;
    }


    .oil-change-intro-image,
    .oil-change-intro-image img,
    .oil-change-importance-image,
    .oil-change-importance-image img,
    .oil-change-when-image,
    .oil-change-when-image img,
    .oil-change-check-image,
    .oil-change-check-image img {
        min-height: 250px;
    }


    .oil-change-contact-image {
        min-height: 250px;
    }


    .oil-change-contact-content {
        padding: 30px 22px;
    }

}/* ============================================================
   PAGE ALIGNEMENT AUTO
============================================================ */

.alignment-page {
    background: #080808;
    color: #d2d2d2;
}


/* ============================================================
   GLOBAL PAGE
============================================================ */

.alignment-page h1,
.alignment-page h2 {
    margin: 0;
    line-height: 1.05;
}


.alignment-page h1 {
    color: #ffffff;

    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
}


.alignment-page h2 {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
}


.alignment-page p {
    margin: 0 0 16px;

    font-size: 15px;
    line-height: 1.1;
}


.alignment-page p:last-child {
    margin-bottom: 0;
}


.alignment-page .section-eyebrow {
    display: inline-block;

    margin-bottom: 11px;

    color: var(--rb-orange);

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

    text-transform: uppercase;
    letter-spacing: 1.4px;

    line-height: 1.1;
}


/* ============================================================
   CTA INTÉGRÉS
============================================================ */

.alignment-inline-cta {
    margin-top: 28px;
}


.alignment-inline-button {
    min-height: 48px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.alignment-inline-button-primary {
    background: var(--rb-orange);

    border: 1px solid var(--rb-orange);

    color: #ffffff;
}


.alignment-inline-button-primary:hover {
    background: var(--rb-orange-hover);

    border-color: var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.alignment-inline-button-outline {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

    color: #ffffff;
}


.alignment-inline-button-outline:hover {
    background: var(--rb-orange);

    border-color: var(--rb-orange);

    color: #ffffff;

    transform: translateY(-2px);
}


/* ============================================================
   CADRES D'IMAGES
============================================================ */

.alignment-image-frame {
    position: relative;

    padding: 12px;

    isolation: isolate;
}


.alignment-image-frame::before {
    content: "";

    position: absolute;

    z-index: -2;

    inset: 0;

    border-radius: 5px;

    pointer-events: none;
}


.alignment-image-frame::after {
    content: "";

    position: absolute;

    z-index: -1;

    right: -9px;
    bottom: -9px;

    width: 82%;
    height: 82%;

    border-radius: 3px;

    pointer-events: none;
}


/* ============================================================
   CADRES SOMBRES
============================================================ */

.alignment-image-frame-dark::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.015)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.35);
}


.alignment-image-frame-dark::after {
    border-right:
        1px solid
        rgba(241, 90, 0, 0.45);

    border-bottom:
        1px solid
        rgba(241, 90, 0, 0.45);

    background:
        linear-gradient(
            135deg,
            transparent 50%,
            rgba(241, 90, 0, 0.05) 100%
        );
}


.alignment-image-frame-dark {
    filter:
        drop-shadow(
            0 14px 24px
            rgba(0, 0, 0, 0.22)
        );
}


/* ============================================================
   CADRES CLAIRS
============================================================ */

.alignment-image-frame-light::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(225, 225, 222, 0.92)
        );

    border:
        1px solid
        rgba(0, 0, 0, 0.10);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.10);
}


.alignment-image-frame-light::after {
    border-right:
        1px solid
        rgba(35, 35, 35, 0.28);

    border-bottom:
        1px solid
        rgba(35, 35, 35, 0.28);

    background:
        linear-gradient(
            135deg,
            transparent 45%,
            rgba(35, 35, 35, 0.05) 100%
        );
}


/* ============================================================
   COINS DÉCORATIFS
============================================================ */

.alignment-image-corner {
    position: absolute;

    z-index: 5;

    width: 42px;
    height: 42px;

    pointer-events: none;
}


.alignment-image-corner::before,
.alignment-image-corner::after {
    content: "";

    position: absolute;

    background: var(--rb-orange);
}


.alignment-image-corner-top {
    top: 0;
    left: 0;
}


.alignment-image-corner-top::before {
    top: 0;
    left: 0;

    width: 42px;
    height: 2px;
}


.alignment-image-corner-top::after {
    top: 0;
    left: 0;

    width: 2px;
    height: 42px;
}


.alignment-image-corner-bottom {
    right: 0;
    bottom: 0;
}


.alignment-image-corner-bottom::before {
    right: 0;
    bottom: 0;

    width: 42px;
    height: 2px;
}


.alignment-image-corner-bottom::after {
    right: 0;
    bottom: 0;

    width: 2px;
    height: 42px;
}


/* ============================================================
   TRAITEMENT COMMUN DES IMAGES
============================================================ */

.alignment-intro-image,
.alignment-explanation-image,
.alignment-3d-image,
.alignment-benefits-image {
    position: relative;

    overflow: hidden;

    border-radius: 3px;

    background: #111111;
}


.alignment-intro-image::after,
.alignment-explanation-image::after,
.alignment-3d-image::after,
.alignment-benefits-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.12) 100%
        );
}


.alignment-intro-image img,
.alignment-explanation-image img,
.alignment-3d-image img,
.alignment-benefits-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}


.alignment-image-frame:hover img {
    transform: scale(1.025);
}


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

.alignment-intro {
    padding: 80px 0;

    background:
        linear-gradient(
            135deg,
            #090909 0%,
            #131313 55%,
            #0a0a0a 100%
        );

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.alignment-intro-content {
    max-width: 680px;
}


.alignment-intro-content h1 {
    margin-bottom: 24px;
}


.alignment-intro-content p {
    color: #b9b9b9;
}


.alignment-intro-image,
.alignment-intro-image img {
    min-height: 430px;
}


/* ============================================================
   EXPLICATION - CLAIR
============================================================ */

.alignment-explanation-section {
    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #f6f6f4 0%,
            #eaeae7 100%
        );
}


.alignment-light-content {
    max-width: 780px;
}


.alignment-light-content h2 {
    margin-bottom: 22px;

    color: #161616;
}


.alignment-light-content p {
    color: #3b3b3b;
}


.alignment-explanation-image,
.alignment-explanation-image img {
    min-height: 520px;
}


/* ============================================================
   ALIGNEMENT 3D - SOMBRE TECHNIQUE
============================================================ */

.alignment-3d-section {
    position: relative;

    padding: 90px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #101010 0%,
            #232323 55%,
            #131313 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.alignment-3d-section::before {
    content: "";

    position: absolute;

    top: -190px;
    left: -180px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(241, 90, 0, 0.09) 0%,
            transparent 70%
        );

    pointer-events: none;
}


.alignment-3d-content {
    position: relative;

    z-index: 2;

    max-width: 760px;
}


.alignment-3d-content h2 {
    margin-bottom: 22px;

    color: #ffffff;
}


.alignment-3d-content p {
    color: #bdbdbd;
}


.alignment-3d-image,
.alignment-3d-image img {
    min-height: 390px;
}


/* ============================================================
   AVANTAGES - CLAIR
============================================================ */

.alignment-benefits-section {
    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #f7f7f5 0%,
            #ededeb 100%
        );
}


.alignment-benefits-image,
.alignment-benefits-image img {
    min-height: 460px;
}


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

.alignment-contact-section {
    padding: 85px 0;

    background:
        linear-gradient(
            180deg,
            #101010 0%,
            #070707 100%
        );
}


.alignment-contact-panel {
    position: relative;

    overflow: hidden;

    background: #171717;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 4px;

    box-shadow:
        0 28px 65px
        rgba(0, 0, 0, 0.35);
}


.alignment-contact-panel::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    z-index: 3;

    width: 55%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--rb-orange)
        );
}


.alignment-contact-image {
    position: relative;

    width: 100%;
    min-height: 410px;

    overflow: hidden;
}


.alignment-contact-image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s ease;
}


.alignment-contact-panel:hover .alignment-contact-image img {
    transform: scale(1.025);
}


.alignment-contact-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.03) 45%,
            rgba(23, 23, 23, 0.88) 100%
        );

    pointer-events: none;
}


.alignment-contact-content {
    position: relative;

    z-index: 2;

    padding: 55px 60px;
}


.alignment-contact-content h2 {
    margin-bottom: 20px;

    color: #ffffff;
}


.alignment-contact-content p {
    color: #bcbcbc;
}


.alignment-contact-content a:not(.alignment-primary-button):not(.alignment-secondary-button) {
    color: var(--rb-orange);

    font-weight: 600;

    transition:
        color var(--rb-transition);
}


.alignment-contact-content a:not(.alignment-primary-button):not(.alignment-secondary-button):hover {
    color: var(--rb-orange-hover);
}


.alignment-contact-last {
    margin-top: 18px !important;

    color: #ffffff !important;

    font-weight: 600;
}


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

.alignment-contact-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}


.alignment-primary-button,
.alignment-secondary-button {
    min-height: 50px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.alignment-primary-button {
    background: var(--rb-orange);

    border:
        1px solid
        var(--rb-orange);

    color: #ffffff;
}


.alignment-primary-button:hover {
    background: var(--rb-orange-hover);

    border-color: var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.alignment-secondary-button {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    color: #ffffff;
}


.alignment-secondary-button:hover {
    border-color: var(--rb-orange);

    color: var(--rb-orange);

    transform: translateY(-2px);
}


/* ============================================================
   TABLETTE
============================================================ */

@media (max-width: 991.98px) {

    .alignment-intro,
    .alignment-explanation-section,
    .alignment-3d-section,
    .alignment-benefits-section,
    .alignment-contact-section {
        padding: 65px 0;
    }


    .alignment-intro-image,
    .alignment-intro-image img {
        min-height: 360px;
    }


    .alignment-explanation-image,
    .alignment-explanation-image img {
        min-height: 420px;
    }


    .alignment-3d-image,
    .alignment-3d-image img {
        min-height: 350px;
    }


    .alignment-benefits-image,
    .alignment-benefits-image img {
        min-height: 390px;
    }


    .alignment-contact-image {
        min-height: 350px;
    }


    .alignment-contact-image-overlay {
        background:
            linear-gradient(
                180deg,
                transparent 55%,
                rgba(23, 23, 23, 0.4) 100%
            );
    }


    .alignment-contact-content {
        padding: 42px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .alignment-intro,
    .alignment-explanation-section,
    .alignment-3d-section,
    .alignment-benefits-section,
    .alignment-contact-section {
        padding: 50px 0;
    }


    .alignment-page h1 {
        font-size: 29px;
    }


    .alignment-page h2 {
        font-size: 22px;
    }


    .alignment-page p {
        font-size: 14px;
    }


    .alignment-inline-button {
        width: 100%;
    }


    .alignment-image-frame {
        padding: 9px;
    }


    .alignment-image-frame::after {
        right: -6px;
        bottom: -6px;
    }


    .alignment-image-corner {
        width: 32px;
        height: 32px;
    }


    .alignment-image-corner-top::before,
    .alignment-image-corner-bottom::before {
        width: 32px;
    }


    .alignment-image-corner-top::after,
    .alignment-image-corner-bottom::after {
        height: 32px;
    }


    .alignment-intro-image,
    .alignment-intro-image img,
    .alignment-explanation-image,
    .alignment-explanation-image img,
    .alignment-3d-image,
    .alignment-3d-image img,
    .alignment-benefits-image,
    .alignment-benefits-image img {
        min-height: 290px;
    }


    .alignment-contact-image {
        min-height: 290px;
    }


    .alignment-contact-content {
        padding: 35px 28px;
    }


    .alignment-contact-actions {
        flex-direction: column;
    }


    .alignment-primary-button,
    .alignment-secondary-button {
        width: 100%;
    }

}


/* ============================================================
   PETITS MOBILES
============================================================ */

@media (max-width: 575.98px) {

    .alignment-intro,
    .alignment-explanation-section,
    .alignment-3d-section,
    .alignment-benefits-section,
    .alignment-contact-section {
        padding: 45px 0;
    }


    .alignment-intro-image,
    .alignment-intro-image img,
    .alignment-explanation-image,
    .alignment-explanation-image img,
    .alignment-3d-image,
    .alignment-3d-image img,
    .alignment-benefits-image,
    .alignment-benefits-image img {
        min-height: 250px;
    }


    .alignment-contact-image {
        min-height: 250px;
    }


    .alignment-contact-content {
        padding: 30px 22px;
    }

}

/* ============================================================
   PAGE PNEUS À VENDRE
============================================================ */

.tires-sale-page {
    background: #080808;
    color: #d2d2d2;
}


/* ============================================================
   GLOBAL PAGE
============================================================ */

.tires-sale-page h1,
.tires-sale-page h2 {
    margin: 0;
    line-height: 1.05;
}


.tires-sale-page h1 {
    color: #ffffff;

    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
}


.tires-sale-page h2 {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
}


.tires-sale-page p {
    margin: 0 0 16px;

    font-size: 15px;
    line-height: 1.1;
}


.tires-sale-page p:last-child {
    margin-bottom: 0;
}


.tires-sale-page .section-eyebrow {
    display: inline-block;

    margin-bottom: 11px;

    color: var(--rb-orange);

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

    text-transform: uppercase;
    letter-spacing: 1.4px;

    line-height: 1.1;
}


/* ============================================================
   CTA INTÉGRÉS
============================================================ */

.tires-sale-inline-cta {
    margin-top: 28px;
}


.tires-sale-inline-button {
    min-height: 48px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.tires-sale-inline-button-primary {
    background: var(--rb-orange);

    border: 1px solid var(--rb-orange);

    color: #ffffff;
}


.tires-sale-inline-button-primary:hover {
    background: var(--rb-orange-hover);

    border-color: var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.tires-sale-inline-button-dark {
    background: #1a1a1a;

    border: 1px solid #1a1a1a;

    color: #ffffff;
}


.tires-sale-inline-button-dark:hover {
    background: var(--rb-orange);

    border-color: var(--rb-orange);

    color: #ffffff;

    transform: translateY(-2px);
}


/* ============================================================
   CADRES D'IMAGES
============================================================ */

.tires-sale-image-frame {
    position: relative;

    padding: 12px;

    isolation: isolate;
}


.tires-sale-image-frame::before {
    content: "";

    position: absolute;

    z-index: -2;

    inset: 0;

    border-radius: 5px;

    pointer-events: none;
}


.tires-sale-image-frame::after {
    content: "";

    position: absolute;

    z-index: -1;

    right: -9px;
    bottom: -9px;

    width: 82%;
    height: 82%;

    border-radius: 3px;

    pointer-events: none;
}


/* ============================================================
   CADRES SOMBRES
============================================================ */

.tires-sale-image-frame-dark::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.015)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.35);
}


.tires-sale-image-frame-dark::after {
    border-right:
        1px solid
        rgba(241, 90, 0, 0.45);

    border-bottom:
        1px solid
        rgba(241, 90, 0, 0.45);

    background:
        linear-gradient(
            135deg,
            transparent 50%,
            rgba(241, 90, 0, 0.05) 100%
        );
}


.tires-sale-image-frame-dark {
    filter:
        drop-shadow(
            0 14px 24px
            rgba(0, 0, 0, 0.22)
        );
}


/* ============================================================
   CADRES CLAIRS
============================================================ */

.tires-sale-image-frame-light::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(225, 225, 222, 0.92)
        );

    border:
        1px solid
        rgba(0, 0, 0, 0.10);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.10);
}


.tires-sale-image-frame-light::after {
    border-right:
        1px solid
        rgba(35, 35, 35, 0.28);

    border-bottom:
        1px solid
        rgba(35, 35, 35, 0.28);

    background:
        linear-gradient(
            135deg,
            transparent 45%,
            rgba(35, 35, 35, 0.05) 100%
        );
}


/* ============================================================
   COINS DÉCORATIFS
============================================================ */

.tires-sale-image-corner {
    position: absolute;

    z-index: 5;

    width: 42px;
    height: 42px;

    pointer-events: none;
}


.tires-sale-image-corner::before,
.tires-sale-image-corner::after {
    content: "";

    position: absolute;

    background: var(--rb-orange);
}


.tires-sale-image-corner-top {
    top: 0;
    left: 0;
}


.tires-sale-image-corner-top::before {
    top: 0;
    left: 0;

    width: 42px;
    height: 2px;
}


.tires-sale-image-corner-top::after {
    top: 0;
    left: 0;

    width: 2px;
    height: 42px;
}


.tires-sale-image-corner-bottom {
    right: 0;
    bottom: 0;
}


.tires-sale-image-corner-bottom::before {
    right: 0;
    bottom: 0;

    width: 42px;
    height: 2px;
}


.tires-sale-image-corner-bottom::after {
    right: 0;
    bottom: 0;

    width: 2px;
    height: 42px;
}


/* ============================================================
   TRAITEMENT COMMUN DES IMAGES
============================================================ */

.tires-sale-intro-image,
.tires-sale-choice-image,
.tires-sale-service-image {
    position: relative;

    overflow: hidden;

    border-radius: 3px;

    background: #111111;
}


.tires-sale-intro-image::after,
.tires-sale-choice-image::after,
.tires-sale-service-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.12) 100%
        );
}


.tires-sale-intro-image img,
.tires-sale-choice-image img,
.tires-sale-service-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

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


.tires-sale-image-frame:hover img {
    transform: scale(1.025);
}


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

.tires-sale-intro {
    padding: 80px 0;

    background:
        linear-gradient(
            135deg,
            #090909 0%,
            #131313 55%,
            #0a0a0a 100%
        );

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.tires-sale-intro-content {
    max-width: 680px;
}


.tires-sale-intro-content h1 {
    margin-bottom: 24px;
}


.tires-sale-intro-content p {
    color: #b9b9b9;
}


.tires-sale-intro-image,
.tires-sale-intro-image img {
    min-height: 450px;
}


/* ============================================================
   INVENTAIRE + MARQUES - SOMBRE
============================================================ */

.tires-sale-inventory-section {
    position: relative;

    padding: 85px 0;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #232323 0%,
            #181818 55%,
            #111111 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.tires-sale-inventory-section::before {
    content: "";

    position: absolute;

    top: -180px;
    left: 50%;

    width: 500px;
    height: 500px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(241, 90, 0, 0.07) 0%,
            transparent 70%
        );

    pointer-events: none;
}


.tires-sale-inventory-header {
    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: 0 auto 40px;

    text-align: center;
}


.tires-sale-inventory-header h2 {
    margin-bottom: 16px;

    color: #ffffff;
}


.tires-sale-inventory-header p {
    margin: 0;

    color: #bdbdbd;
}


.tires-sale-brands-grid {
    position: relative;

    z-index: 2;

    margin-bottom: 34px;
}


.tires-sale-brand-card {
    position: relative;

    min-height: 80px;

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

    padding: 14px 10px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 3px;

    color: #ffffff;

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

    text-align: center;
    text-transform: uppercase;

    letter-spacing: 0.45px;

    transition:
        background var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.tires-sale-brand-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: var(--rb-orange);

    transition:
        width 0.3s ease;
}


.tires-sale-brand-card:hover {
    background:
        rgba(241, 90, 0, 0.09);

    border-color:
        rgba(241, 90, 0, 0.38);

    transform:
        translateY(-3px);
}


.tires-sale-brand-card:hover::after {
    width: 100%;
}


.tires-sale-inventory-bottom {
    position: relative;

    z-index: 2;

    max-width: 950px;

    margin: 0 auto;

    text-align: center;
}


.tires-sale-inventory-bottom p {
    margin: 0;

    color: #bdbdbd;
}


/* ============================================================
   COMMENT BIEN CHOISIR SES PNEUS - CLAIR
============================================================ */

.tires-sale-choice-section {
    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #f7f7f5 0%,
            #ededeb 100%
        );
}


.tires-sale-light-content {
    max-width: 760px;
}


.tires-sale-light-content h2 {
    margin-bottom: 22px;

    color: #161616;
}


.tires-sale-light-content p {
    color: #3b3b3b;
}


.tires-sale-choice-image,
.tires-sale-choice-image img {
    min-height: 470px;
}


/* ============================================================
   POSE ET BALANCEMENT - SOMBRE
============================================================ */

.tires-sale-service-section {
    position: relative;

    padding: 90px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #111111 0%,
            #232323 55%,
            #151515 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.tires-sale-service-section::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -180px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(241, 90, 0, 0.08) 0%,
            transparent 70%
        );

    pointer-events: none;
}


.tires-sale-service-content {
    position: relative;

    z-index: 2;

    max-width: 760px;
}


.tires-sale-service-content h2 {
    margin-bottom: 22px;

    color: #ffffff;
}


.tires-sale-service-content p {
    color: #bdbdbd;
}


.tires-sale-service-image,
.tires-sale-service-image img {
    min-height: 420px;
}


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

.tires-sale-contact-section {
    padding: 85px 0;

    background:
        linear-gradient(
            180deg,
            #efefed 0%,
            #e4e4e1 100%
        );
}


.tires-sale-contact-panel {
    position: relative;

    overflow: hidden;

    background: #171717;

    border:
        1px solid
        rgba(0, 0, 0, 0.12);

    border-radius: 4px;

    box-shadow:
        0 28px 65px
        rgba(0, 0, 0, 0.16);
}


.tires-sale-contact-panel::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    z-index: 3;

    width: 55%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--rb-orange)
        );
}


.tires-sale-contact-image {
    position: relative;

    width: 100%;
    min-height: 430px;

    overflow: hidden;
}


.tires-sale-contact-image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s ease;
}


.tires-sale-contact-panel:hover .tires-sale-contact-image img {
    transform: scale(1.025);
}


.tires-sale-contact-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.02) 45%,
            rgba(23, 23, 23, 0.87) 100%
        );

    pointer-events: none;
}


.tires-sale-contact-content {
    position: relative;

    z-index: 2;

    padding: 55px 60px;
}


.tires-sale-contact-content h2 {
    margin-bottom: 20px;

    color: #ffffff;
}


.tires-sale-contact-content p {
    color: #bcbcbc;
}


.tires-sale-contact-content a:not(.tires-sale-primary-button):not(.tires-sale-secondary-button) {
    color: var(--rb-orange);

    font-weight: 600;

    transition:
        color var(--rb-transition);
}


.tires-sale-contact-content a:not(.tires-sale-primary-button):not(.tires-sale-secondary-button):hover {
    color: var(--rb-orange-hover);
}


.tires-sale-contact-last {
    margin-top: 18px !important;

    color: #ffffff !important;

    font-weight: 600;
}


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

.tires-sale-contact-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}


.tires-sale-primary-button,
.tires-sale-secondary-button {
    min-height: 50px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.tires-sale-primary-button {
    background: var(--rb-orange);

    border:
        1px solid
        var(--rb-orange);

    color: #ffffff;
}


.tires-sale-primary-button:hover {
    background: var(--rb-orange-hover);

    border-color:
        var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.tires-sale-secondary-button {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    color: #ffffff;
}


.tires-sale-secondary-button:hover {
    border-color: var(--rb-orange);

    color: var(--rb-orange);

    transform: translateY(-2px);
}


/* ============================================================
   TABLETTE
============================================================ */

@media (max-width: 991.98px) {

    .tires-sale-intro,
    .tires-sale-inventory-section,
    .tires-sale-choice-section,
    .tires-sale-service-section,
    .tires-sale-contact-section {
        padding: 65px 0;
    }


    .tires-sale-intro-image,
    .tires-sale-intro-image img {
        min-height: 370px;
    }


    .tires-sale-choice-image,
    .tires-sale-choice-image img {
        min-height: 390px;
    }


    .tires-sale-service-image,
    .tires-sale-service-image img {
        min-height: 360px;
    }


    .tires-sale-inventory-header {
        margin-bottom: 34px;
    }


    .tires-sale-contact-image {
        min-height: 350px;
    }


    .tires-sale-contact-image-overlay {
        background:
            linear-gradient(
                180deg,
                transparent 55%,
                rgba(23, 23, 23, 0.4) 100%
            );
    }


    .tires-sale-contact-content {
        padding: 42px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .tires-sale-intro,
    .tires-sale-inventory-section,
    .tires-sale-choice-section,
    .tires-sale-service-section,
    .tires-sale-contact-section {
        padding: 50px 0;
    }


    .tires-sale-page h1 {
        font-size: 29px;
    }


    .tires-sale-page h2 {
        font-size: 22px;
    }


    .tires-sale-page p {
        font-size: 14px;
    }


    .tires-sale-inline-button {
        width: 100%;
    }


    .tires-sale-image-frame {
        padding: 9px;
    }


    .tires-sale-image-frame::after {
        right: -6px;
        bottom: -6px;
    }


    .tires-sale-image-corner {
        width: 32px;
        height: 32px;
    }


    .tires-sale-image-corner-top::before,
    .tires-sale-image-corner-bottom::before {
        width: 32px;
    }


    .tires-sale-image-corner-top::after,
    .tires-sale-image-corner-bottom::after {
        height: 32px;
    }


    .tires-sale-intro-image,
    .tires-sale-intro-image img,
    .tires-sale-choice-image,
    .tires-sale-choice-image img,
    .tires-sale-service-image,
    .tires-sale-service-image img {
        min-height: 290px;
    }


    .tires-sale-inventory-header {
        margin-bottom: 30px;
    }


    .tires-sale-brand-card {
        min-height: 70px;
    }


    .tires-sale-inventory-bottom {
        text-align: left;
    }


    .tires-sale-contact-image {
        min-height: 290px;
    }


    .tires-sale-contact-content {
        padding: 35px 28px;
    }


    .tires-sale-contact-actions {
        flex-direction: column;
    }


    .tires-sale-primary-button,
    .tires-sale-secondary-button {
        width: 100%;
    }

}


/* ============================================================
   PETITS MOBILES
============================================================ */

@media (max-width: 575.98px) {

    .tires-sale-intro,
    .tires-sale-inventory-section,
    .tires-sale-choice-section,
    .tires-sale-service-section,
    .tires-sale-contact-section {
        padding: 45px 0;
    }


    .tires-sale-intro-image,
    .tires-sale-intro-image img,
    .tires-sale-choice-image,
    .tires-sale-choice-image img,
    .tires-sale-service-image,
    .tires-sale-service-image img {
        min-height: 250px;
    }


    .tires-sale-brand-card {
        min-height: 65px;

        font-size: 12px;
    }


    .tires-sale-contact-image {
        min-height: 250px;
    }


    .tires-sale-contact-content {
        padding: 30px 22px;
    }

}

/* ============================================================
   PAGE MÉCANIQUE GÉNÉRALE
============================================================ */

.general-mechanics-page {
    background: #080808;
    color: #d2d2d2;
}


/* ============================================================
   GLOBAL PAGE
============================================================ */

.general-mechanics-page h1,
.general-mechanics-page h2 {
    margin: 0;
    line-height: 1.05;
}


.general-mechanics-page h1 {
    color: #ffffff;

    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
}


.general-mechanics-page h2 {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
}


.general-mechanics-page p {
    margin: 0 0 16px;

    font-size: 15px;
    line-height: 1.1;
}


.general-mechanics-page p:last-child {
    margin-bottom: 0;
}


.general-mechanics-page .section-eyebrow {
    display: inline-block;

    margin-bottom: 11px;

    color: var(--rb-orange);

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

    text-transform: uppercase;
    letter-spacing: 1.4px;

    line-height: 1.1;
}


/* ============================================================
   CTA INTÉGRÉS
============================================================ */

.general-mechanics-inline-cta {
    margin-top: 28px;
}


.general-mechanics-inline-button {
    min-height: 48px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.general-mechanics-inline-button-primary {
    background: var(--rb-orange);

    border: 1px solid var(--rb-orange);

    color: #ffffff;
}


.general-mechanics-inline-button-primary:hover {
    background: var(--rb-orange-hover);

    border-color: var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.general-mechanics-inline-button-outline {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

    color: #ffffff;
}


.general-mechanics-inline-button-outline:hover {
    background: var(--rb-orange);

    border-color: var(--rb-orange);

    color: #ffffff;

    transform: translateY(-2px);
}


/* ============================================================
   CADRES D'IMAGES
============================================================ */

.general-mechanics-image-frame {
    position: relative;

    padding: 12px;

    isolation: isolate;
}


.general-mechanics-image-frame::before {
    content: "";

    position: absolute;

    z-index: -2;

    inset: 0;

    border-radius: 5px;

    pointer-events: none;
}


.general-mechanics-image-frame::after {
    content: "";

    position: absolute;

    z-index: -1;

    right: -9px;
    bottom: -9px;

    width: 82%;
    height: 82%;

    border-radius: 3px;

    pointer-events: none;
}


/* ============================================================
   CADRES SOMBRES
============================================================ */

.general-mechanics-image-frame-dark::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.015)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.35);
}


.general-mechanics-image-frame-dark::after {
    border-right:
        1px solid
        rgba(241, 90, 0, 0.45);

    border-bottom:
        1px solid
        rgba(241, 90, 0, 0.45);

    background:
        linear-gradient(
            135deg,
            transparent 50%,
            rgba(241, 90, 0, 0.05) 100%
        );
}


.general-mechanics-image-frame-dark {
    filter:
        drop-shadow(
            0 14px 24px
            rgba(0, 0, 0, 0.22)
        );
}


/* ============================================================
   CADRES CLAIRS
============================================================ */

.general-mechanics-image-frame-light::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(225, 225, 222, 0.92)
        );

    border:
        1px solid
        rgba(0, 0, 0, 0.10);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.10);
}


.general-mechanics-image-frame-light::after {
    border-right:
        1px solid
        rgba(35, 35, 35, 0.28);

    border-bottom:
        1px solid
        rgba(35, 35, 35, 0.28);

    background:
        linear-gradient(
            135deg,
            transparent 45%,
            rgba(35, 35, 35, 0.05) 100%
        );
}


/* ============================================================
   COINS DÉCORATIFS
============================================================ */

.general-mechanics-image-corner {
    position: absolute;

    z-index: 5;

    width: 42px;
    height: 42px;

    pointer-events: none;
}


.general-mechanics-image-corner::before,
.general-mechanics-image-corner::after {
    content: "";

    position: absolute;

    background: var(--rb-orange);
}


.general-mechanics-image-corner-top {
    top: 0;
    left: 0;
}


.general-mechanics-image-corner-top::before {
    top: 0;
    left: 0;

    width: 42px;
    height: 2px;
}


.general-mechanics-image-corner-top::after {
    top: 0;
    left: 0;

    width: 2px;
    height: 42px;
}


.general-mechanics-image-corner-bottom {
    right: 0;
    bottom: 0;
}


.general-mechanics-image-corner-bottom::before {
    right: 0;
    bottom: 0;

    width: 42px;
    height: 2px;
}


.general-mechanics-image-corner-bottom::after {
    right: 0;
    bottom: 0;

    width: 2px;
    height: 42px;
}


/* ============================================================
   IMAGES - TRAITEMENT COMMUN
============================================================ */

.general-mechanics-intro-image,
.general-mechanics-services-image,
.general-mechanics-quality-image,
.general-mechanics-dealer-image {
    position: relative;

    overflow: hidden;

    border-radius: 3px;

    background: #111111;
}


.general-mechanics-intro-image::after,
.general-mechanics-services-image::after,
.general-mechanics-quality-image::after,
.general-mechanics-dealer-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.12) 100%
        );
}


.general-mechanics-intro-image img,
.general-mechanics-services-image img,
.general-mechanics-quality-image img,
.general-mechanics-dealer-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

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


.general-mechanics-image-frame:hover img {
    transform: scale(1.025);
}


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

.general-mechanics-intro {
    padding: 80px 0;

    background:
        linear-gradient(
            135deg,
            #090909 0%,
            #131313 55%,
            #0a0a0a 100%
        );

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.general-mechanics-intro-content {
    max-width: 680px;
}


.general-mechanics-intro-content h1 {
    margin-bottom: 24px;
}


.general-mechanics-intro-content p {
    color: #b9b9b9;
}


.general-mechanics-intro-image,
.general-mechanics-intro-image img {
    min-height: 450px;
}


/* ============================================================
   SERVICES - CLAIR
============================================================ */

.general-mechanics-services-section {
    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #f6f6f4 0%,
            #eaeae7 100%
        );
}


.general-mechanics-light-content {
    max-width: 780px;
}


.general-mechanics-light-content h2 {
    margin-bottom: 22px;

    color: #161616;
}


.general-mechanics-light-content p {
    color: #3b3b3b;
}


.general-mechanics-services-image,
.general-mechanics-services-image img {
    min-height: 540px;
}


/* ============================================================
   TRANSPARENCE - SOMBRE
============================================================ */

.general-mechanics-quality-section {
    position: relative;

    padding: 90px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #111111 0%,
            #232323 55%,
            #151515 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.general-mechanics-quality-section::before {
    content: "";

    position: absolute;

    top: -180px;
    left: -180px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(241, 90, 0, 0.08) 0%,
            transparent 70%
        );

    pointer-events: none;
}


.general-mechanics-quality-content {
    position: relative;

    z-index: 2;

    max-width: 780px;
}


.general-mechanics-quality-content h2 {
    margin-bottom: 22px;

    color: #ffffff;
}


.general-mechanics-quality-content p {
    color: #bdbdbd;
}


.general-mechanics-quality-image,
.general-mechanics-quality-image img {
    min-height: 500px;
}


/* ============================================================
   CONCESSIONNAIRE OU GARAGE INDÉPENDANT - CLAIR
============================================================ */

.general-mechanics-dealer-section {
    padding: 85px 0;

    background:
        linear-gradient(
            180deg,
            #f3f3f1 0%,
            #e7e7e4 100%
        );
}


.general-mechanics-dealer-image,
.general-mechanics-dealer-image img {
    min-height: 370px;
}


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

.general-mechanics-contact-section {
    padding: 85px 0;

    background:
        linear-gradient(
            180deg,
            #101010 0%,
            #070707 100%
        );
}


.general-mechanics-contact-panel {
    position: relative;

    overflow: hidden;

    background: #171717;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 4px;

    box-shadow:
        0 28px 65px
        rgba(0, 0, 0, 0.35);
}


.general-mechanics-contact-panel::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    z-index: 3;

    width: 55%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--rb-orange)
        );
}


.general-mechanics-contact-image {
    position: relative;

    width: 100%;
    min-height: 410px;

    overflow: hidden;
}


.general-mechanics-contact-image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s ease;
}


.general-mechanics-contact-panel:hover .general-mechanics-contact-image img {
    transform: scale(1.025);
}


.general-mechanics-contact-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.03) 45%,
            rgba(23, 23, 23, 0.88) 100%
        );

    pointer-events: none;
}


.general-mechanics-contact-content {
    position: relative;

    z-index: 2;

    padding: 55px 60px;
}


.general-mechanics-contact-content h2 {
    margin-bottom: 20px;

    color: #ffffff;
}


.general-mechanics-contact-content p {
    color: #bcbcbc;
}


.general-mechanics-contact-content a:not(.general-mechanics-primary-button):not(.general-mechanics-secondary-button) {
    color: var(--rb-orange);

    font-weight: 600;

    transition:
        color var(--rb-transition);
}


.general-mechanics-contact-content a:not(.general-mechanics-primary-button):not(.general-mechanics-secondary-button):hover {
    color: var(--rb-orange-hover);
}


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

.general-mechanics-contact-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}


.general-mechanics-primary-button,
.general-mechanics-secondary-button {
    min-height: 50px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.general-mechanics-primary-button {
    background: var(--rb-orange);

    border:
        1px solid
        var(--rb-orange);

    color: #ffffff;
}


.general-mechanics-primary-button:hover {
    background: var(--rb-orange-hover);

    border-color:
        var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.general-mechanics-secondary-button {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    color: #ffffff;
}


.general-mechanics-secondary-button:hover {
    border-color: var(--rb-orange);

    color: var(--rb-orange);

    transform: translateY(-2px);
}


/* ============================================================
   TABLETTE
============================================================ */

@media (max-width: 991.98px) {

    .general-mechanics-intro,
    .general-mechanics-services-section,
    .general-mechanics-quality-section,
    .general-mechanics-dealer-section,
    .general-mechanics-contact-section {
        padding: 65px 0;
    }


    .general-mechanics-intro-image,
    .general-mechanics-intro-image img {
        min-height: 370px;
    }


    .general-mechanics-services-image,
    .general-mechanics-services-image img {
        min-height: 420px;
    }


    .general-mechanics-quality-image,
    .general-mechanics-quality-image img {
        min-height: 390px;
    }


    .general-mechanics-dealer-image,
    .general-mechanics-dealer-image img {
        min-height: 340px;
    }


    .general-mechanics-contact-image {
        min-height: 350px;
    }


    .general-mechanics-contact-image-overlay {
        background:
            linear-gradient(
                180deg,
                transparent 55%,
                rgba(23, 23, 23, 0.4) 100%
            );
    }


    .general-mechanics-contact-content {
        padding: 42px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .general-mechanics-intro,
    .general-mechanics-services-section,
    .general-mechanics-quality-section,
    .general-mechanics-dealer-section,
    .general-mechanics-contact-section {
        padding: 50px 0;
    }


    .general-mechanics-page h1 {
        font-size: 29px;
    }


    .general-mechanics-page h2 {
        font-size: 22px;
    }


    .general-mechanics-page p {
        font-size: 14px;
    }


    .general-mechanics-inline-button {
        width: 100%;
    }


    .general-mechanics-image-frame {
        padding: 9px;
    }


    .general-mechanics-image-frame::after {
        right: -6px;
        bottom: -6px;
    }


    .general-mechanics-image-corner {
        width: 32px;
        height: 32px;
    }


    .general-mechanics-image-corner-top::before,
    .general-mechanics-image-corner-bottom::before {
        width: 32px;
    }


    .general-mechanics-image-corner-top::after,
    .general-mechanics-image-corner-bottom::after {
        height: 32px;
    }


    .general-mechanics-intro-image,
    .general-mechanics-intro-image img,
    .general-mechanics-services-image,
    .general-mechanics-services-image img,
    .general-mechanics-quality-image,
    .general-mechanics-quality-image img,
    .general-mechanics-dealer-image,
    .general-mechanics-dealer-image img {
        min-height: 290px;
    }


    .general-mechanics-contact-image {
        min-height: 290px;
    }


    .general-mechanics-contact-content {
        padding: 35px 28px;
    }


    .general-mechanics-contact-actions {
        flex-direction: column;
    }


    .general-mechanics-primary-button,
    .general-mechanics-secondary-button {
        width: 100%;
    }

}


/* ============================================================
   PETITS MOBILES
============================================================ */

@media (max-width: 575.98px) {

    .general-mechanics-intro,
    .general-mechanics-services-section,
    .general-mechanics-quality-section,
    .general-mechanics-dealer-section,
    .general-mechanics-contact-section {
        padding: 45px 0;
    }


    .general-mechanics-intro-image,
    .general-mechanics-intro-image img,
    .general-mechanics-services-image,
    .general-mechanics-services-image img,
    .general-mechanics-quality-image,
    .general-mechanics-quality-image img,
    .general-mechanics-dealer-image,
    .general-mechanics-dealer-image img {
        min-height: 250px;
    }


    .general-mechanics-contact-image {
        min-height: 250px;
    }


    .general-mechanics-contact-content {
        padding: 30px 22px;
    }

}

/* ============================================================
   PAGE GARAGE
============================================================ */

.garage-page {
    background: #080808;
    color: #d2d2d2;
}


/* ============================================================
   GLOBAL PAGE
============================================================ */

.garage-page h1,
.garage-page h2 {
    margin: 0;
    line-height: 1.05;
}


.garage-page h1 {
    color: #ffffff;

    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
}


.garage-page h2 {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
}


.garage-page p {
    margin: 0 0 16px;

    font-size: 15px;
    line-height: 1.1;
}


.garage-page p:last-child {
    margin-bottom: 0;
}


.garage-page .section-eyebrow {
    display: inline-block;

    margin-bottom: 11px;

    color: var(--rb-orange);

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

    text-transform: uppercase;
    letter-spacing: 1.4px;

    line-height: 1.1;
}


/* ============================================================
   CTA INTÉGRÉS
============================================================ */

.garage-inline-cta {
    margin-top: 28px;
}


.garage-inline-button {
    min-height: 48px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.garage-inline-button-primary {
    background: var(--rb-orange);

    border:
        1px solid
        var(--rb-orange);

    color: #ffffff;
}


.garage-inline-button-primary:hover {
    background: var(--rb-orange-hover);

    border-color:
        var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.garage-inline-button-outline {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

    color: #ffffff;
}


.garage-inline-button-outline:hover {
    background: var(--rb-orange);

    border-color:
        var(--rb-orange);

    color: #ffffff;

    transform: translateY(-2px);
}


/* ============================================================
   CADRES D'IMAGES
============================================================ */

.garage-image-frame {
    position: relative;

    padding: 12px;

    isolation: isolate;
}


.garage-image-frame::before {
    content: "";

    position: absolute;

    z-index: -2;

    inset: 0;

    border-radius: 5px;

    pointer-events: none;
}


.garage-image-frame::after {
    content: "";

    position: absolute;

    z-index: -1;

    right: -9px;
    bottom: -9px;

    width: 82%;
    height: 82%;

    border-radius: 3px;

    pointer-events: none;
}


/* ============================================================
   CADRES SUR FOND SOMBRE
============================================================ */

.garage-image-frame-dark::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.015)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.35);
}


.garage-image-frame-dark::after {
    border-right:
        1px solid
        rgba(241, 90, 0, 0.45);

    border-bottom:
        1px solid
        rgba(241, 90, 0, 0.45);

    background:
        linear-gradient(
            135deg,
            transparent 50%,
            rgba(241, 90, 0, 0.05) 100%
        );
}


.garage-image-frame-dark {
    filter:
        drop-shadow(
            0 14px 24px
            rgba(0, 0, 0, 0.22)
        );
}


/* ============================================================
   CADRES SUR FOND CLAIR
============================================================ */

.garage-image-frame-light::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(225, 225, 222, 0.92)
        );

    border:
        1px solid
        rgba(0, 0, 0, 0.10);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.10);
}


.garage-image-frame-light::after {
    border-right:
        1px solid
        rgba(35, 35, 35, 0.28);

    border-bottom:
        1px solid
        rgba(35, 35, 35, 0.28);

    background:
        linear-gradient(
            135deg,
            transparent 45%,
            rgba(35, 35, 35, 0.05) 100%
        );
}


/* ============================================================
   COINS DÉCORATIFS
============================================================ */

.garage-image-corner {
    position: absolute;

    z-index: 5;

    width: 42px;
    height: 42px;

    pointer-events: none;
}


.garage-image-corner::before,
.garage-image-corner::after {
    content: "";

    position: absolute;

    background: var(--rb-orange);
}


.garage-image-corner-top {
    top: 0;
    left: 0;
}


.garage-image-corner-top::before {
    top: 0;
    left: 0;

    width: 42px;
    height: 2px;
}


.garage-image-corner-top::after {
    top: 0;
    left: 0;

    width: 2px;
    height: 42px;
}


.garage-image-corner-bottom {
    right: 0;
    bottom: 0;
}


.garage-image-corner-bottom::before {
    right: 0;
    bottom: 0;

    width: 42px;
    height: 2px;
}


.garage-image-corner-bottom::after {
    right: 0;
    bottom: 0;

    width: 2px;
    height: 42px;
}


/* ============================================================
   TRAITEMENT COMMUN DES IMAGES
============================================================ */

.garage-intro-image,
.garage-professional-image,
.garage-service-image {
    position: relative;

    overflow: hidden;

    border-radius: 3px;

    background: #111111;
}


.garage-intro-image::after,
.garage-professional-image::after,
.garage-service-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.12) 100%
        );
}


.garage-intro-image img,
.garage-professional-image img,
.garage-service-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

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


.garage-image-frame:hover img {
    transform: scale(1.025);
}


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

.garage-intro {
    padding: 80px 0;

    background:
        linear-gradient(
            135deg,
            #090909 0%,
            #131313 55%,
            #0a0a0a 100%
        );

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.garage-intro-content {
    max-width: 670px;
}


.garage-intro-content h1 {
    margin-bottom: 24px;
}


.garage-intro-content p {
    color: #b9b9b9;
}


.garage-intro-image,
.garage-intro-image img {
    min-height: 500px;
}


/* ============================================================
   GARAGE PROFESSIONNEL - CLAIR
============================================================ */

.garage-professional-section {
    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #f6f6f4 0%,
            #eaeae7 100%
        );
}


.garage-light-content {
    max-width: 760px;
}


.garage-light-content h2 {
    margin-bottom: 22px;

    color: #161616;
}


.garage-light-content p {
    color: #3b3b3b;
}


.garage-professional-image,
.garage-professional-image img {
    min-height: 430px;
}


/* ============================================================
   ENTRETIEN / RÉPARATION - SOMBRE
============================================================ */

.garage-service-section {
    position: relative;

    padding: 90px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #111111 0%,
            #232323 55%,
            #151515 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.garage-service-section::before {
    content: "";

    position: absolute;

    top: -160px;
    left: -160px;

    width: 390px;
    height: 390px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(241, 90, 0, 0.07) 0%,
            transparent 70%
        );

    pointer-events: none;
}


.garage-service-content {
    position: relative;

    z-index: 2;

    max-width: 760px;
}


.garage-service-content h2 {
    margin-bottom: 22px;

    color: #ffffff;
}


.garage-service-content p {
    color: #bdbdbd;
}


.garage-service-image,
.garage-service-image img {
    min-height: 430px;
}


/* ============================================================
   CONTACT FINAL
============================================================ */

.garage-contact-section {
    padding: 85px 0;

    background:
        linear-gradient(
            180deg,
            #efefed 0%,
            #e4e4e1 100%
        );
}


.garage-contact-panel {
    position: relative;

    overflow: hidden;

    background: #171717;

    border:
        1px solid
        rgba(0, 0, 0, 0.12);

    border-radius: 4px;

    box-shadow:
        0 28px 65px
        rgba(0, 0, 0, 0.16);
}


.garage-contact-panel::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    z-index: 3;

    width: 55%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--rb-orange)
        );
}


.garage-contact-image {
    position: relative;

    width: 100%;
    min-height: 390px;

    overflow: hidden;
}


.garage-contact-image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s ease;
}


.garage-contact-panel:hover .garage-contact-image img {
    transform: scale(1.025);
}


.garage-contact-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.02) 45%,
            rgba(23, 23, 23, 0.86) 100%
        );

    pointer-events: none;
}


.garage-contact-content {
    position: relative;

    z-index: 2;

    padding: 55px 60px;
}


.garage-contact-content h2 {
    margin-bottom: 20px;

    color: #ffffff;
}


.garage-contact-content p {
    color: #bcbcbc;
}


.garage-contact-content a:not(.garage-primary-button):not(.garage-secondary-button) {
    color: var(--rb-orange);

    font-weight: 600;

    transition:
        color var(--rb-transition);
}


.garage-contact-content a:not(.garage-primary-button):not(.garage-secondary-button):hover {
    color: var(--rb-orange-hover);
}


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

.garage-contact-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}


.garage-primary-button,
.garage-secondary-button {
    min-height: 50px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.garage-primary-button {
    background: var(--rb-orange);

    border:
        1px solid
        var(--rb-orange);

    color: #ffffff;
}


.garage-primary-button:hover {
    background: var(--rb-orange-hover);

    border-color:
        var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.garage-secondary-button {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    color: #ffffff;
}


.garage-secondary-button:hover {
    border-color: var(--rb-orange);

    color: var(--rb-orange);

    transform: translateY(-2px);
}


/* ============================================================
   TABLETTE
============================================================ */

@media (max-width: 991.98px) {

    .garage-intro,
    .garage-professional-section,
    .garage-service-section,
    .garage-contact-section {
        padding: 65px 0;
    }


    .garage-intro-image,
    .garage-intro-image img {
        min-height: 390px;
    }


    .garage-professional-image,
    .garage-professional-image img,
    .garage-service-image,
    .garage-service-image img {
        min-height: 360px;
    }


    .garage-contact-image {
        min-height: 350px;
    }


    .garage-contact-image-overlay {
        background:
            linear-gradient(
                180deg,
                transparent 55%,
                rgba(23, 23, 23, 0.4) 100%
            );
    }


    .garage-contact-content {
        padding: 42px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .garage-intro,
    .garage-professional-section,
    .garage-service-section,
    .garage-contact-section {
        padding: 50px 0;
    }


    .garage-page h1 {
        font-size: 29px;
    }


    .garage-page h2 {
        font-size: 22px;
    }


    .garage-page p {
        font-size: 14px;
    }


    .garage-inline-button {
        width: 100%;
    }


    .garage-image-frame {
        padding: 9px;
    }


    .garage-image-frame::after {
        right: -6px;
        bottom: -6px;
    }


    .garage-image-corner {
        width: 32px;
        height: 32px;
    }


    .garage-image-corner-top::before,
    .garage-image-corner-bottom::before {
        width: 32px;
    }


    .garage-image-corner-top::after,
    .garage-image-corner-bottom::after {
        height: 32px;
    }


    .garage-intro-image,
    .garage-intro-image img,
    .garage-professional-image,
    .garage-professional-image img,
    .garage-service-image,
    .garage-service-image img {
        min-height: 290px;
    }


    .garage-contact-image {
        min-height: 290px;
    }


    .garage-contact-content {
        padding: 35px 28px;
    }


    .garage-contact-actions {
        flex-direction: column;
    }


    .garage-primary-button,
    .garage-secondary-button {
        width: 100%;
    }

}


/* ============================================================
   PETITS MOBILES
============================================================ */

@media (max-width: 575.98px) {

    .garage-intro,
    .garage-professional-section,
    .garage-service-section,
    .garage-contact-section {
        padding: 45px 0;
    }


    .garage-intro-image,
    .garage-intro-image img,
    .garage-professional-image,
    .garage-professional-image img,
    .garage-service-image,
    .garage-service-image img {
        min-height: 250px;
    }


    .garage-contact-image {
        min-height: 250px;
    }


    .garage-contact-content {
        padding: 30px 22px;
    }

}


/* ============================================================
   PAGE PROGRAMMATION CONCESSIONNAIRE
============================================================ */

.dealer-programming-page {
    background: #080808;
    color: #d2d2d2;
}


/* ============================================================
   GLOBAL PAGE
============================================================ */

.dealer-programming-page h1,
.dealer-programming-page h2 {
    margin: 0;
    line-height: 1.05;
}


.dealer-programming-page h1 {
    color: #ffffff;

    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
}


.dealer-programming-page h2 {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
}


.dealer-programming-page p {
    margin: 0 0 16px;

    font-size: 15px;
    line-height: 1.1;
}


.dealer-programming-page p:last-child {
    margin-bottom: 0;
}


.dealer-programming-page .section-eyebrow {
    display: inline-block;

    margin-bottom: 11px;

    color: var(--rb-orange);

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

    text-transform: uppercase;
    letter-spacing: 1.4px;

    line-height: 1.1;
}


/* ============================================================
   CTA INTÉGRÉS AUX BLOCS
============================================================ */

.dealer-inline-cta {
    margin-top: 28px;
}


.dealer-inline-button {
    min-height: 48px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.dealer-inline-button-primary {
    background: var(--rb-orange);

    border: 1px solid var(--rb-orange);

    color: #ffffff;
}


.dealer-inline-button-primary:hover {
    background: var(--rb-orange-hover);

    border-color: var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.dealer-inline-button-outline {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

    color: #ffffff;
}


.dealer-inline-button-outline:hover {
    background: var(--rb-orange);

    border-color: var(--rb-orange);

    color: #ffffff;

    transform: translateY(-2px);
}


/* ============================================================
   CADRES D'IMAGES
============================================================ */

.dealer-image-frame {
    position: relative;

    padding: 12px;

    isolation: isolate;
}


.dealer-image-frame::before {
    content: "";

    position: absolute;

    z-index: -2;

    inset: 0;

    border-radius: 5px;

    pointer-events: none;
}


.dealer-image-frame::after {
    content: "";

    position: absolute;

    z-index: -1;

    right: -9px;
    bottom: -9px;

    width: 82%;
    height: 82%;

    border-radius: 3px;

    pointer-events: none;
}


/* ============================================================
   CADRES SOMBRES
============================================================ */

.dealer-image-frame-dark::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.015)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.35);
}


.dealer-image-frame-dark::after {
    border-right:
        1px solid
        rgba(241, 90, 0, 0.45);

    border-bottom:
        1px solid
        rgba(241, 90, 0, 0.45);

    background:
        linear-gradient(
            135deg,
            transparent 50%,
            rgba(241, 90, 0, 0.05) 100%
        );
}


.dealer-image-frame-dark {
    filter:
        drop-shadow(
            0 14px 24px
            rgba(0, 0, 0, 0.22)
        );
}


/* ============================================================
   CADRES CLAIRS
============================================================ */

.dealer-image-frame-light::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(225, 225, 222, 0.92)
        );

    border:
        1px solid
        rgba(0, 0, 0, 0.10);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.10);
}


.dealer-image-frame-light::after {
    border-right:
        1px solid
        rgba(35, 35, 35, 0.28);

    border-bottom:
        1px solid
        rgba(35, 35, 35, 0.28);

    background:
        linear-gradient(
            135deg,
            transparent 45%,
            rgba(35, 35, 35, 0.05) 100%
        );
}


/* ============================================================
   COINS DÉCORATIFS
============================================================ */

.dealer-image-corner {
    position: absolute;

    z-index: 5;

    width: 42px;
    height: 42px;

    pointer-events: none;
}


.dealer-image-corner::before,
.dealer-image-corner::after {
    content: "";

    position: absolute;

    background: var(--rb-orange);
}


.dealer-image-corner-top {
    top: 0;
    left: 0;
}


.dealer-image-corner-top::before {
    top: 0;
    left: 0;

    width: 42px;
    height: 2px;
}


.dealer-image-corner-top::after {
    top: 0;
    left: 0;

    width: 2px;
    height: 42px;
}


.dealer-image-corner-bottom {
    right: 0;
    bottom: 0;
}


.dealer-image-corner-bottom::before {
    right: 0;
    bottom: 0;

    width: 42px;
    height: 2px;
}


.dealer-image-corner-bottom::after {
    right: 0;
    bottom: 0;

    width: 2px;
    height: 42px;
}


/* ============================================================
   TRAITEMENT COMMUN DES IMAGES
============================================================ */

.dealer-intro-image,
.dealer-update-image,
.dealer-software-image {
    position: relative;

    overflow: hidden;

    border-radius: 3px;

    background: #111111;
}


.dealer-intro-image::after,
.dealer-update-image::after,
.dealer-software-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.12) 100%
        );
}


.dealer-intro-image img,
.dealer-update-image img,
.dealer-software-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

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


.dealer-image-frame:hover img {
    transform: scale(1.025);
}


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

.dealer-intro {
    padding: 80px 0;

    background:
        linear-gradient(
            135deg,
            #090909 0%,
            #131313 55%,
            #0a0a0a 100%
        );

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.dealer-intro-content {
    max-width: 660px;
}


.dealer-intro-content h1 {
    margin-bottom: 24px;
}


.dealer-intro-content p {
    color: #b9b9b9;
}


.dealer-intro-image,
.dealer-intro-image img {
    min-height: 455px;
}


/* ============================================================
   PROGRAMMATION À JOUR - CLAIR
============================================================ */

.dealer-update-section {
    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #f6f6f4 0%,
            #eaeae7 100%
        );
}


.dealer-light-content {
    max-width: 760px;
}


.dealer-light-content h2 {
    margin-bottom: 22px;

    color: #161616;
}


.dealer-light-content p {
    color: #3b3b3b;
}


.dealer-update-image,
.dealer-update-image img {
    min-height: 500px;
}


/* ============================================================
   LOGICIELS MODERNES - SOMBRE
============================================================ */

.dealer-software-section {
    position: relative;

    padding: 90px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #111111 0%,
            #232323 55%,
            #151515 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.dealer-software-section::before {
    content: "";

    position: absolute;

    top: -180px;
    left: -180px;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(241, 90, 0, 0.08) 0%,
            rgba(241, 90, 0, 0) 70%
        );

    pointer-events: none;
}


.dealer-software-content {
    position: relative;

    z-index: 2;

    max-width: 760px;
}


.dealer-software-content h2 {
    margin-bottom: 22px;

    color: #ffffff;
}


.dealer-software-content p {
    color: #bdbdbd;
}


.dealer-software-image,
.dealer-software-image img {
    min-height: 470px;
}


/* ============================================================
   CONTACT FINAL
============================================================ */

.dealer-contact-section {
    padding: 85px 0;

    background:
        linear-gradient(
            180deg,
            #efefed 0%,
            #e4e4e1 100%
        );
}


.dealer-contact-panel {
    position: relative;

    overflow: hidden;

    background: #171717;

    border:
        1px solid
        rgba(0, 0, 0, 0.12);

    border-radius: 4px;

    box-shadow:
        0 28px 65px
        rgba(0, 0, 0, 0.16);
}


.dealer-contact-panel::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 55%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--rb-orange)
        );

    z-index: 3;
}


.dealer-contact-image {
    position: relative;

    width: 100%;
    min-height: 440px;

    overflow: hidden;
}


.dealer-contact-image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s ease;
}


.dealer-contact-panel:hover .dealer-contact-image img {
    transform: scale(1.025);
}


.dealer-contact-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.02) 45%,
            rgba(23, 23, 23, 0.85) 100%
        );

    pointer-events: none;
}


.dealer-contact-content {
    position: relative;

    z-index: 2;

    padding: 55px 60px;
}


.dealer-contact-content h2 {
    margin-bottom: 20px;

    color: #ffffff;
}


.dealer-contact-content p {
    color: #bcbcbc;
}


.dealer-contact-content a:not(.dealer-primary-button):not(.dealer-secondary-button) {
    color: var(--rb-orange);

    font-weight: 600;

    transition:
        color var(--rb-transition);
}


.dealer-contact-content a:not(.dealer-primary-button):not(.dealer-secondary-button):hover {
    color: var(--rb-orange-hover);
}


.dealer-contact-last {
    margin-top: 18px !important;

    color: #ffffff !important;

    font-weight: 600;
}


/* ============================================================
   BOUTONS DU CTA FINAL
============================================================ */

.dealer-contact-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}


.dealer-primary-button,
.dealer-secondary-button {
    min-height: 50px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.dealer-primary-button {
    background: var(--rb-orange);

    border:
        1px solid
        var(--rb-orange);

    color: #ffffff;
}


.dealer-primary-button:hover {
    background: var(--rb-orange-hover);

    border-color: var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.dealer-secondary-button {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    color: #ffffff;
}


.dealer-secondary-button:hover {
    border-color: var(--rb-orange);

    color: var(--rb-orange);

    transform: translateY(-2px);
}


/* ============================================================
   TABLETTE
============================================================ */

@media (max-width: 991.98px) {

    .dealer-intro,
    .dealer-update-section,
    .dealer-software-section,
    .dealer-contact-section {
        padding: 65px 0;
    }


    .dealer-intro-image,
    .dealer-intro-image img {
        min-height: 370px;
    }


    .dealer-update-image,
    .dealer-update-image img {
        min-height: 390px;
    }


    .dealer-software-image,
    .dealer-software-image img {
        min-height: 380px;
    }


    .dealer-contact-image {
        min-height: 360px;
    }


    .dealer-contact-image img {
        position: absolute;
    }


    .dealer-contact-image-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0) 60%,
                rgba(23, 23, 23, 0.4) 100%
            );
    }


    .dealer-contact-content {
        padding: 42px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .dealer-intro,
    .dealer-update-section,
    .dealer-software-section,
    .dealer-contact-section {
        padding: 50px 0;
    }


    .dealer-programming-page h1 {
        font-size: 29px;
    }


    .dealer-programming-page h2 {
        font-size: 22px;
    }


    .dealer-programming-page p {
        font-size: 14px;
    }


    .dealer-inline-button {
        width: 100%;
    }


    .dealer-image-frame {
        padding: 9px;
    }


    .dealer-image-frame::after {
        right: -6px;
        bottom: -6px;
    }


    .dealer-image-corner {
        width: 32px;
        height: 32px;
    }


    .dealer-image-corner-top::before,
    .dealer-image-corner-bottom::before {
        width: 32px;
    }


    .dealer-image-corner-top::after,
    .dealer-image-corner-bottom::after {
        height: 32px;
    }


    .dealer-intro-image,
    .dealer-intro-image img,
    .dealer-update-image,
    .dealer-update-image img,
    .dealer-software-image,
    .dealer-software-image img {
        min-height: 290px;
    }


    .dealer-contact-image {
        min-height: 290px;
    }


    .dealer-contact-content {
        padding: 35px 28px;
    }


    .dealer-contact-actions {
        flex-direction: column;
    }


    .dealer-primary-button,
    .dealer-secondary-button {
        width: 100%;
    }

}


/* ============================================================
   PETITS MOBILES
============================================================ */

@media (max-width: 575.98px) {

    .dealer-intro,
    .dealer-update-section,
    .dealer-software-section,
    .dealer-contact-section {
        padding: 45px 0;
    }


    .dealer-intro-image,
    .dealer-intro-image img,
    .dealer-update-image,
    .dealer-update-image img,
    .dealer-software-image,
    .dealer-software-image img {
        min-height: 250px;
    }


    .dealer-contact-image {
        min-height: 250px;
    }


    .dealer-contact-content {
        padding: 30px 22px;
    }

}


/* ============================================================
   PAGE PNEUS D'HIVER
============================================================ */

.winter-tires-page {
    background: #080808;
    color: #d2d2d2;
}


/* ============================================================
   GLOBAL PAGE
============================================================ */

.winter-tires-page h1,
.winter-tires-page h2 {
    margin: 0;
    line-height: 1.05;
}


.winter-tires-page h1 {
    color: #ffffff;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
}


.winter-tires-page h2 {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
}


.winter-tires-page p {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.1;
}


.winter-tires-page p:last-child {
    margin-bottom: 0;
}


.winter-tires-page .section-eyebrow {
    display: inline-block;

    margin-bottom: 11px;

    color: var(--rb-orange);

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

    text-transform: uppercase;
    letter-spacing: 1.4px;

    line-height: 1.1;
}


/* ============================================================
   CTA INTÉGRÉS AUX BLOCS
============================================================ */

.winter-inline-cta {
    margin-top: 28px;
}


.winter-inline-button {
    min-height: 48px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.winter-inline-button-primary {
    background: var(--rb-orange);

    border: 1px solid var(--rb-orange);

    color: #ffffff;
}


.winter-inline-button-primary:hover {
    background: var(--rb-orange-hover);

    border-color: var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.winter-inline-button-dark {
    background: #1a1a1a;

    border: 1px solid #1a1a1a;

    color: #ffffff;
}


.winter-inline-button-dark:hover {
    background: var(--rb-orange);

    border-color: var(--rb-orange);

    color: #ffffff;

    transform: translateY(-2px);
}


/* ============================================================
   SYSTÈME DE CADRES D'IMAGES
============================================================ */

.winter-image-frame {
    position: relative;

    padding: 12px;

    isolation: isolate;
}


.winter-image-frame::before {
    content: "";

    position: absolute;

    z-index: -2;

    inset: 0;

    border-radius: 5px;

    pointer-events: none;
}


.winter-image-frame::after {
    content: "";

    position: absolute;

    z-index: -1;

    right: -9px;
    bottom: -9px;

    width: 82%;
    height: 82%;

    border-radius: 3px;

    pointer-events: none;
}


/* ============================================================
   CADRE SUR FOND SOMBRE
============================================================ */

.winter-image-frame-dark::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.015)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.35);
}


.winter-image-frame-dark::after {
    border-right:
        1px solid
        rgba(241, 90, 0, 0.45);

    border-bottom:
        1px solid
        rgba(241, 90, 0, 0.45);

    background:
        linear-gradient(
            135deg,
            transparent 50%,
            rgba(241, 90, 0, 0.05) 100%
        );
}


.winter-image-frame-dark {
    filter:
        drop-shadow(
            0 14px 24px
            rgba(0, 0, 0, 0.22)
        );
}


/* ============================================================
   CADRE SUR FOND CLAIR
============================================================ */

.winter-image-frame-light::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(225, 225, 222, 0.92)
        );

    border:
        1px solid
        rgba(0, 0, 0, 0.10);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.10);
}


.winter-image-frame-light::after {
    border-right:
        1px solid
        rgba(35, 35, 35, 0.28);

    border-bottom:
        1px solid
        rgba(35, 35, 35, 0.28);

    background:
        linear-gradient(
            135deg,
            transparent 45%,
            rgba(35, 35, 35, 0.05) 100%
        );
}


/* ============================================================
   COINS DÉCORATIFS
============================================================ */

.winter-image-corner {
    position: absolute;

    z-index: 5;

    width: 42px;
    height: 42px;

    pointer-events: none;
}


.winter-image-corner::before,
.winter-image-corner::after {
    content: "";

    position: absolute;

    background: var(--rb-orange);
}


.winter-image-corner-top {
    top: 0;
    left: 0;
}


.winter-image-corner-top::before {
    top: 0;
    left: 0;

    width: 42px;
    height: 2px;
}


.winter-image-corner-top::after {
    top: 0;
    left: 0;

    width: 2px;
    height: 42px;
}


.winter-image-corner-bottom {
    right: 0;
    bottom: 0;
}


.winter-image-corner-bottom::before {
    right: 0;
    bottom: 0;

    width: 42px;
    height: 2px;
}


.winter-image-corner-bottom::after {
    right: 0;
    bottom: 0;

    width: 2px;
    height: 42px;
}


/* ============================================================
   TRAITEMENT COMMUN DES IMAGES
============================================================ */

.winter-intro-image,
.winter-choice-image,
.winter-driving-image,
.winter-service-image {
    position: relative;

    overflow: hidden;

    border-radius: 3px;

    background: #111111;
}


.winter-intro-image::after,
.winter-choice-image::after,
.winter-driving-image::after,
.winter-service-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.12) 100%
        );
}


.winter-intro-image img,
.winter-choice-image img,
.winter-driving-image img,
.winter-service-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

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


.winter-image-frame:hover img {
    transform: scale(1.025);
}


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

.winter-intro {
    padding: 80px 0;

    background:
        linear-gradient(
            135deg,
            #090909 0%,
            #131313 55%,
            #0a0a0a 100%
        );

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.winter-intro-content {
    max-width: 650px;
}


.winter-intro-content h1 {
    margin-bottom: 24px;
}


.winter-intro-content p {
    color: #b9b9b9;
}


.winter-intro-image {
    min-height: 440px;
}


.winter-intro-image img {
    min-height: 440px;
}


/* ============================================================
   BLOC CLAIR - CHOIX DU PNEU
============================================================ */

.winter-choice-section {
    padding: 85px 0;

    background:
        linear-gradient(
            180deg,
            #f3f3f1 0%,
            #e9e9e6 100%
        );
}


.winter-light-content {
    max-width: 700px;
}


.winter-light-content h2 {
    margin-bottom: 20px;

    color: #161616;
}


.winter-light-content p {
    color: #3b3b3b;
}


.winter-choice-image {
    min-height: 390px;
}


.winter-choice-image img {
    min-height: 390px;
}


/* ============================================================
   MARQUES
============================================================ */

.winter-brands-section {
    padding: 75px 0;

    background:
        linear-gradient(
            145deg,
            #232323 0%,
            #1a1a1a 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.winter-brands-grid {
    margin-bottom: 28px;
}


.winter-brand-card {
    position: relative;

    min-height: 82px;

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

    padding: 15px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 3px;

    color: #ffffff;

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

    text-transform: uppercase;
    letter-spacing: 0.5px;

    transition:
        background var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.winter-brand-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: var(--rb-orange);

    transition:
        width 0.3s ease;
}


.winter-brand-card:hover {
    background:
        rgba(241, 90, 0, 0.09);

    border-color:
        rgba(241, 90, 0, 0.38);

    transform:
        translateY(-3px);
}


.winter-brand-card:hover::after {
    width: 100%;
}


.winter-brands-text {
    max-width: 820px;
}


.winter-brands-text p {
    color: #bdbdbd;
}


/* ============================================================
   CONDUITE - CLAIR
============================================================ */

.winter-driving-section {
    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #f7f7f5 0%,
            #ededeb 100%
        );
}


.winter-driving-image {
    min-height: 480px;
}


.winter-driving-image img {
    min-height: 480px;
}


/* ============================================================
   INSTALLATION - SOMBRE
============================================================ */

.winter-service-section {
    padding: 85px 0;

    background:
        linear-gradient(
            135deg,
            #111111 0%,
            #232323 55%,
            #151515 100%
        );
}


.winter-service-image {
    min-height: 420px;
}


.winter-service-image img {
    min-height: 420px;
}


.winter-service-content h2 {
    margin-bottom: 20px;

    color: #ffffff;
}


.winter-service-content > p {
    color: #bdbdbd;
}


/* ============================================================
   GARANTIE HASARD DE ROUTE
============================================================ */

.winter-road-hazard {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 17px;

    margin-top: 30px;

    padding: 22px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-left:
        3px solid
        var(--rb-orange);

    border-radius: 3px;
}


.winter-road-hazard::after {
    content: "";

    position: absolute;

    top: -50px;
    right: -50px;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background:
        rgba(241, 90, 0, 0.06);
}


.winter-road-hazard-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    border-radius: 50%;

    background:
        rgba(241, 90, 0, 0.12);

    color: var(--rb-orange);

    font-size: 19px;
}


.winter-road-hazard p {
    margin: 0;

    color: #b8b8b8;

    font-size: 13px;
}


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

.winter-contact-cta {
    position: relative;

    padding: 70px 0;

    background:
        linear-gradient(
            90deg,
            #050505 0%,
            #141414 55%,
            #050505 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.winter-contact-cta::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 70%;
    height: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--rb-orange),
            transparent
        );

    opacity: 0.7;
}


.winter-contact-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;
}


.winter-contact-content {
    max-width: 720px;
}


.winter-contact-content h2 {
    margin-bottom: 17px;

    color: #ffffff;
}


.winter-contact-content p {
    color: #bcbcbc;
}


.winter-contact-content a {
    color: var(--rb-orange);

    font-weight: 600;

    transition:
        color var(--rb-transition);
}


.winter-contact-content a:hover {
    color: var(--rb-orange-hover);
}


.winter-contact-last {
    margin-top: 15px !important;

    color: #ffffff !important;

    font-weight: 600;
}


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

.winter-contact-actions {
    min-width: 250px;

    display: flex;
    flex-direction: column;

    gap: 10px;
}


.winter-primary-button,
.winter-secondary-button {
    min-height: 50px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.winter-primary-button {
    background: var(--rb-orange);

    border: 1px solid var(--rb-orange);

    color: #ffffff;
}


.winter-primary-button:hover {
    background: var(--rb-orange-hover);

    border-color: var(--rb-orange-hover);

    color: #ffffff;

    transform: translateY(-2px);
}


.winter-secondary-button {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    color: #ffffff;
}


.winter-secondary-button:hover {
    border-color: var(--rb-orange);

    color: var(--rb-orange);

    transform: translateY(-2px);
}


/* ============================================================
   TABLETTE
============================================================ */

@media (max-width: 991.98px) {

    .winter-intro,
    .winter-choice-section,
    .winter-driving-section,
    .winter-service-section {
        padding: 65px 0;
    }


    .winter-brands-section {
        padding: 60px 0;
    }


    .winter-intro-image,
    .winter-intro-image img {
        min-height: 360px;
    }


    .winter-choice-image,
    .winter-choice-image img {
        min-height: 340px;
    }


    .winter-driving-image,
    .winter-driving-image img {
        min-height: 380px;
    }


    .winter-service-image,
    .winter-service-image img {
        min-height: 360px;
    }


    .winter-contact-inner {
        flex-direction: column;

        align-items: flex-start;

        gap: 30px;
    }


    .winter-contact-actions {
        width: 100%;

        min-width: 0;

        flex-direction: row;
    }


    .winter-primary-button,
    .winter-secondary-button {
        flex: 1;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .winter-intro,
    .winter-choice-section,
    .winter-driving-section,
    .winter-service-section {
        padding: 50px 0;
    }


    .winter-brands-section {
        padding: 50px 0;
    }


    .winter-contact-cta {
        padding: 55px 0;
    }


    .winter-tires-page h1 {
        font-size: 29px;
    }


    .winter-tires-page h2 {
        font-size: 22px;
    }


    .winter-tires-page p {
        font-size: 14px;
    }


    .winter-inline-button {
        width: 100%;
    }


    .winter-image-frame {
        padding: 9px;
    }


    .winter-image-frame::after {
        right: -6px;
        bottom: -6px;
    }


    .winter-image-corner {
        width: 32px;
        height: 32px;
    }


    .winter-image-corner-top::before,
    .winter-image-corner-bottom::before {
        width: 32px;
    }


    .winter-image-corner-top::after,
    .winter-image-corner-bottom::after {
        height: 32px;
    }


    .winter-intro-image,
    .winter-intro-image img,
    .winter-choice-image,
    .winter-choice-image img,
    .winter-driving-image,
    .winter-driving-image img,
    .winter-service-image,
    .winter-service-image img {
        min-height: 290px;
    }


    .winter-road-hazard {
        padding: 18px;
    }


    .winter-contact-actions {
        flex-direction: column;
    }

}


/* ============================================================
   PETITS MOBILES
============================================================ */

@media (max-width: 575.98px) {

    .winter-intro,
    .winter-choice-section,
    .winter-driving-section,
    .winter-service-section,
    .winter-brands-section {
        padding: 45px 0;
    }


    .winter-intro-image,
    .winter-intro-image img,
    .winter-choice-image,
    .winter-choice-image img,
    .winter-driving-image,
    .winter-driving-image img,
    .winter-service-image,
    .winter-service-image img {
        min-height: 250px;
    }


    .winter-brand-card {
        min-height: 70px;

        font-size: 12.5px;
    }


    .winter-road-hazard {
        flex-direction: column;
    }

}


/* ============================================================
   PAGE PNEUS D'ÉTÉ
============================================================ */

.summer-tires-page {
    background: #080808;
    color: #d2d2d2;
}


/* ============================================================
   GLOBAL PAGE
============================================================ */

.summer-tires-page h1,
.summer-tires-page h2 {
    margin: 0;

    line-height: 1.05;
}


.summer-tires-page h1 {
    color: #ffffff;

    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
}


.summer-tires-page h2 {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
}


.summer-tires-page p {
    margin: 0 0 16px;

    font-size: 15px;
    line-height: 1.1;
}


.summer-tires-page p:last-child {
    margin-bottom: 0;
}


.section-eyebrow {
    display: inline-block;

    margin-bottom: 11px;

    color: var(--rb-orange);

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

    text-transform: uppercase;
    letter-spacing: 1.4px;

    line-height: 1.1;
}


/* ============================================================
   CTA INTÉGRÉS AUX BLOCS
============================================================ */

.summer-inline-cta {
    margin-top: 28px;
}


.summer-inline-button {
    min-height: 48px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;

    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.summer-inline-button-primary {
    background: var(--rb-orange);

    border:
        1px solid
        var(--rb-orange);

    color: #ffffff;
}


.summer-inline-button-primary:hover {
    background: var(--rb-orange-hover);

    border-color:
        var(--rb-orange-hover);

    color: #ffffff;

    transform:
        translateY(-2px);
}


.summer-inline-button-dark {
    background: #1a1a1a;

    border:
        1px solid
        #1a1a1a;

    color: #ffffff;
}


.summer-inline-button-dark:hover {
    background: var(--rb-orange);

    border-color:
        var(--rb-orange);

    color: #ffffff;

    transform:
        translateY(-2px);
}


/* ============================================================
   SYSTÈME DE CADRES D'IMAGES
============================================================ */

.summer-image-frame {
    position: relative;

    padding: 12px;

    isolation: isolate;
}


.summer-image-frame::before {
    content: "";

    position: absolute;

    z-index: -2;

    inset: 0;

    border-radius: 5px;

    pointer-events: none;
}


.summer-image-frame::after {
    content: "";

    position: absolute;

    z-index: -1;

    right: -9px;
    bottom: -9px;

    width: 82%;
    height: 82%;

    border-radius: 3px;

    pointer-events: none;
}


/* ============================================================
   CADRE SUR FOND SOMBRE
============================================================ */

.summer-image-frame-dark::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.015)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.35);
}


.summer-image-frame-dark::after {
    border-right:
        1px solid
        rgba(241, 90, 0, 0.45);

    border-bottom:
        1px solid
        rgba(241, 90, 0, 0.45);

    background:
        linear-gradient(
            135deg,
            transparent 50%,
            rgba(241, 90, 0, 0.05) 100%
        );
}


.summer-image-frame-dark {
    filter:
        drop-shadow(
            0 14px 24px
            rgba(0, 0, 0, 0.22)
        );
}


/* ============================================================
   CADRE SUR FOND CLAIR
============================================================ */

.summer-image-frame-light::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(225, 225, 222, 0.92)
        );

    border:
        1px solid
        rgba(0, 0, 0, 0.10);

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, 0.10);
}


.summer-image-frame-light::after {
    border-right:
        1px solid
        rgba(35, 35, 35, 0.28);

    border-bottom:
        1px solid
        rgba(35, 35, 35, 0.28);

    background:
        linear-gradient(
            135deg,
            transparent 45%,
            rgba(35, 35, 35, 0.05) 100%
        );
}


/* ============================================================
   COINS DÉCORATIFS
============================================================ */

.summer-image-corner {
    position: absolute;

    z-index: 5;

    width: 42px;
    height: 42px;

    pointer-events: none;
}


.summer-image-corner::before,
.summer-image-corner::after {
    content: "";

    position: absolute;

    background: var(--rb-orange);
}


.summer-image-corner-top {
    top: 0;
    left: 0;
}


.summer-image-corner-top::before {
    top: 0;
    left: 0;

    width: 42px;
    height: 2px;
}


.summer-image-corner-top::after {
    top: 0;
    left: 0;

    width: 2px;
    height: 42px;
}


.summer-image-corner-bottom {
    right: 0;
    bottom: 0;
}


.summer-image-corner-bottom::before {
    right: 0;
    bottom: 0;

    width: 42px;
    height: 2px;
}


.summer-image-corner-bottom::after {
    right: 0;
    bottom: 0;

    width: 2px;
    height: 42px;
}


/* ============================================================
   TRAITEMENT COMMUN DES IMAGES
============================================================ */

.summer-intro-image,
.summer-choice-image,
.summer-driving-image,
.summer-service-image {
    position: relative;

    overflow: hidden;

    border-radius: 3px;

    background: #111111;
}


.summer-intro-image::after,
.summer-choice-image::after,
.summer-driving-image::after,
.summer-service-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.12) 100%
        );
}


.summer-intro-image img,
.summer-choice-image img,
.summer-driving-image img,
.summer-service-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

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


.summer-image-frame:hover img {
    transform: scale(1.025);
}


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

.summer-intro {
    padding: 80px 0;

    background:
        linear-gradient(
            135deg,
            #090909 0%,
            #131313 55%,
            #0a0a0a 100%
        );

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.summer-intro-content {
    max-width: 650px;
}


.summer-intro-content h1 {
    margin-bottom: 24px;
}


.summer-intro-content p {
    color: #b9b9b9;
}


.summer-intro-image {
    min-height: 440px;
}


.summer-intro-image img {
    min-height: 440px;
}


/* ============================================================
   BLOC CLAIR - CHOIX DU PNEU
============================================================ */

.summer-choice-section {
    padding: 85px 0;

    background:
        linear-gradient(
            180deg,
            #f3f3f1 0%,
            #e9e9e6 100%
        );
}


.summer-light-content {
    max-width: 700px;
}


.summer-light-content h2 {
    margin-bottom: 20px;

    color: #161616;
}


.summer-light-content p {
    color: #3b3b3b;
}


.summer-choice-image {
    min-height: 390px;
}


.summer-choice-image img {
    min-height: 390px;
}


/* ============================================================
   MARQUES
============================================================ */

.summer-brands-section {
    padding: 75px 0;

    background:
        linear-gradient(
            145deg,
            #232323 0%,
            #1a1a1a 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.summer-brands-grid {
    margin-bottom: 28px;
}


.summer-brand-card {
    position: relative;

    min-height: 82px;

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

    padding: 15px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 3px;

    color: #ffffff;

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

    text-transform: uppercase;
    letter-spacing: 0.5px;

    transition:
        background var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.summer-brand-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: var(--rb-orange);

    transition:
        width 0.3s ease;
}


.summer-brand-card:hover {
    background:
        rgba(241, 90, 0, 0.09);

    border-color:
        rgba(241, 90, 0, 0.38);

    transform:
        translateY(-3px);
}


.summer-brand-card:hover::after {
    width: 100%;
}


.summer-brands-text {
    max-width: 820px;
}


.summer-brands-text p {
    color: #bdbdbd;
}


/* ============================================================
   CONDUITE - CLAIR
============================================================ */

.summer-driving-section {
    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #f7f7f5 0%,
            #ededeb 100%
        );
}


.summer-driving-image {
    min-height: 480px;
}


.summer-driving-image img {
    min-height: 480px;
}


/* ============================================================
   INSTALLATION - SOMBRE
============================================================ */

.summer-service-section {
    padding: 85px 0;

    background:
        linear-gradient(
            135deg,
            #111111 0%,
            #232323 55%,
            #151515 100%
        );
}


.summer-service-image {
    min-height: 420px;
}


.summer-service-image img {
    min-height: 420px;
}


.summer-service-content h2 {
    margin-bottom: 20px;

    color: #ffffff;
}


.summer-service-content > p {
    color: #bdbdbd;
}


/* ============================================================
   GARANTIE HASARD DE ROUTE
============================================================ */

.summer-road-hazard {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 17px;

    margin-top: 30px;

    padding: 22px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-left:
        3px solid
        var(--rb-orange);

    border-radius: 3px;
}


.summer-road-hazard::after {
    content: "";

    position: absolute;

    top: -50px;
    right: -50px;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background:
        rgba(241, 90, 0, 0.06);
}


.summer-road-hazard-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    border-radius: 50%;

    background:
        rgba(241, 90, 0, 0.12);

    color: var(--rb-orange);

    font-size: 19px;
}


.summer-road-hazard p {
    margin: 0;

    color: #b8b8b8;

    font-size: 13px;
}


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

.summer-contact-cta {
    position: relative;

    padding: 70px 0;

    background:
        linear-gradient(
            90deg,
            #050505 0%,
            #141414 55%,
            #050505 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.summer-contact-cta::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 70%;
    height: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--rb-orange),
            transparent
        );

    opacity: 0.7;
}


.summer-contact-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;
}


.summer-contact-content {
    max-width: 720px;
}


.summer-contact-content h2 {
    margin-bottom: 17px;

    color: #ffffff;
}


.summer-contact-content p {
    color: #bcbcbc;
}


.summer-contact-content a {
    color: var(--rb-orange);

    font-weight: 600;

    transition:
        color var(--rb-transition);
}


.summer-contact-content a:hover {
    color: var(--rb-orange-hover);
}


.summer-contact-last {
    margin-top: 15px !important;

    color: #ffffff !important;

    font-weight: 600;
}


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

.summer-contact-actions {
    min-width: 250px;

    display: flex;
    flex-direction: column;

    gap: 10px;
}


.summer-primary-button,
.summer-secondary-button {
    min-height: 50px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 3px;

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

    text-transform: uppercase;

    letter-spacing: 0.25px;

    transition:
        background var(--rb-transition),
        color var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.summer-primary-button {
    background: var(--rb-orange);

    border:
        1px solid
        var(--rb-orange);

    color: #ffffff;
}


.summer-primary-button:hover {
    background: var(--rb-orange-hover);

    border-color:
        var(--rb-orange-hover);

    color: #ffffff;

    transform:
        translateY(-2px);
}


.summer-secondary-button {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    color: #ffffff;
}


.summer-secondary-button:hover {
    border-color:
        var(--rb-orange);

    color:
        var(--rb-orange);

    transform:
        translateY(-2px);
}


/* ============================================================
   TABLETTE
============================================================ */

@media (max-width: 991.98px) {

    .summer-intro,
    .summer-choice-section,
    .summer-driving-section,
    .summer-service-section {
        padding:
            65px
            0;
    }


    .summer-brands-section {
        padding:
            60px
            0;
    }


    .summer-intro-image,
    .summer-intro-image img {
        min-height:
            360px;
    }


    .summer-choice-image,
    .summer-choice-image img {
        min-height:
            340px;
    }


    .summer-driving-image,
    .summer-driving-image img {
        min-height:
            380px;
    }


    .summer-service-image,
    .summer-service-image img {
        min-height:
            360px;
    }


    .summer-contact-inner {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            30px;
    }


    .summer-contact-actions {
        width: 100%;

        min-width: 0;

        flex-direction: row;
    }


    .summer-primary-button,
    .summer-secondary-button {
        flex: 1;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .summer-intro,
    .summer-choice-section,
    .summer-driving-section,
    .summer-service-section {
        padding:
            50px
            0;
    }


    .summer-brands-section {
        padding:
            50px
            0;
    }


    .summer-contact-cta {
        padding:
            55px
            0;
    }


    .summer-tires-page h1 {
        font-size:
            29px;
    }


    .summer-tires-page h2 {
        font-size:
            22px;
    }


    .summer-tires-page p {
        font-size:
            14px;
    }


    .summer-inline-button {
        width: 100%;
    }


    .summer-image-frame {
        padding:
            9px;
    }


    .summer-image-frame::after {
        right:
            -6px;

        bottom:
            -6px;
    }


    .summer-image-corner {
        width:
            32px;

        height:
            32px;
    }


    .summer-image-corner-top::before,
    .summer-image-corner-bottom::before {
        width:
            32px;
    }


    .summer-image-corner-top::after,
    .summer-image-corner-bottom::after {
        height:
            32px;
    }


    .summer-intro-image,
    .summer-intro-image img,
    .summer-choice-image,
    .summer-choice-image img,
    .summer-driving-image,
    .summer-driving-image img,
    .summer-service-image,
    .summer-service-image img {
        min-height:
            290px;
    }


    .summer-road-hazard {
        padding:
            18px;
    }


    .summer-contact-actions {
        flex-direction:
            column;
    }

}


/* ============================================================
   PETITS MOBILES
============================================================ */

@media (max-width: 575.98px) {

    .summer-intro,
    .summer-choice-section,
    .summer-driving-section,
    .summer-service-section,
    .summer-brands-section {
        padding:
            45px
            0;
    }


    .summer-intro-image,
    .summer-intro-image img,
    .summer-choice-image,
    .summer-choice-image img,
    .summer-driving-image,
    .summer-driving-image img,
    .summer-service-image,
    .summer-service-image img {
        min-height:
            250px;
    }


    .summer-brand-card {
        min-height:
            70px;

        font-size:
            12.5px;
    }


    .summer-road-hazard {
        flex-direction:
            column;
    }

}

/* ============================================================
   PAGE CONTACT
============================================================ */

.contact-page {
    background: #080808;
    color: var(--rb-text);
}


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

.contact-intro {
    padding: 70px 0 45px;

    background:
        linear-gradient(
            180deg,
            #0b0b0b 0%,
            #101010 100%
        );
}


.contact-intro-content {
    max-width: 800px;
}


.section-eyebrow {
    display: inline-block;

    margin-bottom: 10px;

    color: var(--rb-orange);

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

    text-transform: uppercase;
    letter-spacing: 1.4px;
}


/* ============================================================
   TITRES
============================================================ */

.contact-page h1 {
    margin: 0 0 18px;

    color: var(--rb-white);

    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;

    line-height: 1.05;
}


.contact-page h2 {
    margin: 0;

    color: var(--rb-white);

    font-size: clamp(20px, 2vw, 27px);
    font-weight: 700;

    line-height: 1.05;
}


/* ============================================================
   TEXTES
============================================================ */

.contact-page p {
    margin: 0;

    color: #b9b9b9;

    font-size: 15px;

    line-height: 1.1;
}


/* ============================================================
   SECTION COORDONNÉES + CARTE
============================================================ */

.contact-details-section {
    padding: 25px 0 75px;

    background:
        linear-gradient(
            180deg,
            #111111 0%,
            #0c0c0c 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.04);
}


/* ============================================================
   PANNEAU COORDONNÉES
============================================================ */

.contact-info-panel {
    height: 100%;

    padding: 34px;

    background:
        linear-gradient(
            145deg,
            #232323 0%,
            #1d1d1d 55%,
            #171717 100%
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 4px;

    box-shadow:
        0 18px 40px
        rgba(0, 0, 0, 0.18);
}


.contact-panel-header {
    margin-bottom: 26px;
}


/* ============================================================
   LISTE DES COORDONNÉES
============================================================ */

.contact-info-list {
    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.contact-info-item {
    position: relative;

    display: flex;
    align-items: center;

    gap: 15px;

    min-height: 78px;

    padding: 15px 8px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);

    color: #c7c7c7;

    transition:
        background var(--rb-transition),
        padding-left var(--rb-transition);
}


.contact-info-item:hover {
    padding-left: 14px;

    background:
        rgba(255, 255, 255, 0.035);
}


/* ============================================================
   ICÔNES COORDONNÉES
============================================================ */

.contact-info-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    border:
        1px solid
        rgba(241, 90, 0, 0.45);

    border-radius: 50%;

    color: var(--rb-orange);

    font-size: 17px;

    background:
        rgba(0, 0, 0, 0.16);
}


/* ============================================================
   TEXTE COORDONNÉES
============================================================ */

.contact-info-text {
    display: flex;
    flex-direction: column;

    flex: 1;

    gap: 5px;

    min-width: 0;

    line-height: 1.1;
}


.contact-info-text strong {
    color: var(--rb-white);

    font-size: 13px;
    font-weight: 600;
}


.contact-info-text span {
    color: #c0c0c0;

    font-size: 13px;

    line-height: 1.25;
}


/* ============================================================
   FLÈCHE COORDONNÉES
============================================================ */

.contact-info-arrow {
    color:
        rgba(255, 255, 255, 0.32);

    font-size: 13px;

    transition:
        color var(--rb-transition),
        transform var(--rb-transition);
}


.contact-info-item:hover .contact-info-arrow {
    color: var(--rb-orange);

    transform:
        translate(2px, -2px);
}


/* ============================================================
   HEURES D'OUVERTURE
============================================================ */

.contact-hours {
    margin-top: 30px;
}


.contact-hours h2 {
    font-size: 19px;
}


.contact-hours-line {
    width: 38px;
    height: 2px;

    margin: 11px 0 15px;

    background: var(--rb-orange);
}


.contact-hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 6px 0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);

    font-size: 13px;

    line-height: 1.1;
}


.contact-hours-row span {
    color: #b1b1b1;
}


.contact-hours-row strong {
    color: #e0e0e0;

    font-weight: 600;
}


.contact-hours-row .closed {
    color: #808080;
}


.contact-hours-note {
    padding: 7px 0 4px;

    color: var(--rb-orange);

    font-size: 12px;
    font-weight: 600;

    line-height: 1.1;
}


/* ============================================================
   RÉSEAUX SOCIAUX
============================================================ */

.contact-social {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 24px;
}


.contact-social > span {
    color: #a0a0a0;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.7px;
}


.contact-social a {
    width: 38px;
    height: 38px;

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

    background:
        rgba(255, 255, 255, 0.04);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 50%;

    color: var(--rb-white);

    transition:
        background var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.contact-social a:hover {
    background: var(--rb-orange);

    border-color: var(--rb-orange);

    transform: translateY(-2px);
}


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

.contact-map {
    position: relative;

    height: 100%;
    min-height: 570px;

    overflow: hidden;

    background: #151515;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 4px;

    box-shadow:
        0 18px 40px
        rgba(0, 0, 0, 0.16);
}


.contact-map iframe {
    width: 100%;
    height: 100%;

    min-height: 570px;

    display: block;

    border: 0;

    filter:
        grayscale(1)
        invert(0.92)
        contrast(0.95);
}


/* ============================================================
   BOUTON GOOGLE MAPS
============================================================ */

.contact-map-button {
    position: absolute;

    left: 24px;
    bottom: 24px;

    min-height: 46px;

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

    gap: 9px;

    padding: 0 20px;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 3px;

    color: var(--rb-white);

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

    text-transform: uppercase;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        background var(--rb-transition),
        border-color var(--rb-transition),
        transform var(--rb-transition);
}


.contact-map-button i {
    color: var(--rb-orange);
}


.contact-map-button:hover {
    background: var(--rb-orange);

    border-color: var(--rb-orange);

    color: var(--rb-white);

    transform: translateY(-2px);
}


.contact-map-button:hover i {
    color: var(--rb-white);
}


/* ============================================================
   SECTION FORMULAIRE
============================================================ */

.contact-form-section {
    padding: 70px 0 90px;

    background:
        linear-gradient(
            180deg,
            #191919 0%,
            #121212 60%,
            #0d0d0d 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);
}


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

.contact-form-heading {
    max-width: 760px;

    margin-bottom: 35px;
}


.contact-form-heading h2 {
    margin-bottom: 15px;
}


.contact-form-heading p {
    max-width: 720px;
}


/* ============================================================
   JOTFORM
============================================================ */

.contact-form-wrapper {
    position: relative;

    padding: 22px;

    background: #191919;

    border-radius: 4px;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.25);
}


.contact-jotform {
    width: 100%;
    min-width: 100%;

    height: 665px;

    display: block;

    overflow: hidden;

    border: 0;
}


/* ============================================================
   TABLETTE
============================================================ */

@media (max-width: 991.98px) {

    .contact-intro {
        padding:
            55px
            0
            35px;
    }


    .contact-details-section {
        padding-bottom:
            60px;
    }


    .contact-info-panel {
        padding:
            30px;
    }


    .contact-map {
        min-height:
            460px;
    }


    .contact-map iframe {
        min-height:
            460px;
    }


    .contact-form-section {
        padding:
            60px
            0
            70px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .contact-intro {
        padding:
            45px
            0
            30px;
    }


    .contact-page h1 {
        font-size:
            29px;
    }


    .contact-page h2 {
        font-size:
            21px;
    }


    .contact-info-panel {
        padding:
            26px
            20px;
    }


    .contact-info-item {
        min-height:
            70px;

        padding:
            13px
            3px;
    }


    .contact-info-item:hover {
        padding-left:
            3px;
    }


    .contact-info-icon {
        width:
            38px;

        height:
            38px;

        flex-basis:
            38px;
    }


    .contact-hours-row {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            3px;
    }


    .contact-map {
        min-height:
            390px;
    }


    .contact-map iframe {
        min-height:
            390px;
    }


    .contact-map-button {
        left:
            15px;

        right:
            15px;

        bottom:
            15px;

        width:
            calc(100% - 30px);
    }


    .contact-form-section {
        padding:
            50px
            0
            60px;
    }


    .contact-form-wrapper {
        padding:
            10px;
    }

}


/* ============================================================
   PETITS MOBILES
============================================================ */

@media (max-width: 575.98px) {

    .contact-page p {
        font-size:
            14px;
    }


    .contact-info-panel {
        background:
            linear-gradient(
                145deg,
                #232323 0%,
                #1b1b1b 100%
            );
    }


    .contact-map {
        min-height:
            340px;
    }


    .contact-map iframe {
        min-height:
            340px;
    }


    .contact-form-section {
        background:
            linear-gradient(
                180deg,
                #171717 0%,
                #101010 100%
            );
    }

}

/* ============================================================
   BANNIÈRE DE PAGE
============================================================ */

.page-banner {
    position: relative;

    min-height: 320px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background: #050505;
}


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

.page-banner-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* ============================================================
   OVERLAY PRINCIPAL
============================================================ */

.page-banner-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.38) 45%,
            rgba(0, 0, 0, 0.15) 100%
        );
}


/* ============================================================
   ASSOMBRISSEMENT BAS DE BANNIÈRE
============================================================ */

.page-banner::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 1;

    height: 110px;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.78) 100%
        );

    pointer-events: none;
}


/* ============================================================
   CONTAINER
============================================================ */

.page-banner-container {
    position: relative;

    z-index: 2;

    width: 100%;
}


/* ============================================================
   FIL D'ARIANE
============================================================ */

.page-breadcrumb {
    position: relative;

    min-height: 68px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 0 24px;

    

    border-top:
        1px solid
        rgba(255, 255, 255, 0.09);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    color:
        var(--rb-white);

    font-size:
        14px;

    line-height:
        1;
}


/* ============================================================
   LIGNE ORANGE AVEC FONDU
============================================================ */

.page-breadcrumb::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 100%;
    height: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(241, 90, 0, 0.18) 10%,
            rgba(241, 90, 0, 0.55) 24%,
            var(--rb-orange) 42%,
            var(--rb-orange) 58%,
            rgba(241, 90, 0, 0.55) 76%,
            rgba(241, 90, 0, 0.18) 90%,
            transparent 100%
        );

    pointer-events: none;
}


/* ============================================================
   LIEN ACCUEIL
============================================================ */

.page-breadcrumb a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color:
        var(--rb-white);

    transition:
        color
        var(--rb-transition);
}


.page-breadcrumb a:hover {
    color:
        var(--rb-orange);
}


.page-breadcrumb a i {
    color:
        var(--rb-orange);

    font-size:
        16px;
}


/* ============================================================
   SÉPARATEUR
============================================================ */

.breadcrumb-separator {
    color:
        rgba(255, 255, 255, 0.55);

    font-size:
        11px;
}


/* ============================================================
   PAGE COURANTE
============================================================ */

.breadcrumb-current {
    color:
        var(--rb-orange);

    font-weight:
        600;
}


/* ============================================================
   TABLETTE
============================================================ */

@media (max-width: 991.98px) {

    .page-banner {
        min-height: 260px;
    }


    .page-breadcrumb {
        min-height: 62px;

        gap: 12px;

        padding:
            0 20px;

        font-size:
            13px;
    }


    .page-breadcrumb a i {
        font-size:
            15px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .page-banner {
        min-height: 220px;
    }


    .page-banner-image {
        object-position:
            center;
    }


    .page-banner::after {
        height:
            90px;
    }


    .page-breadcrumb {
        min-height: 58px;

        gap: 10px;

        padding:
            0 15px;

        font-size:
            12.5px;
    }


    .page-breadcrumb a {
        gap: 6px;
    }


    .page-breadcrumb a i {
        font-size:
            15px;
    }


    .breadcrumb-separator {
        font-size:
            10px;
    }

}