/* =========================================================
   PAGE ACCUEIL - HERO PRINCIPAL
   VERSION SANS OVERLAY NOIR
   ========================================================= */
p {
    text-align: justify;
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.home-hero {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;

    min-height: 650px;
    height: min(76vh, 780px);

    background: #ffffff;

    overflow: hidden;

    isolation: isolate;
}


/* ---------------------------------------------------------
   CONTENEUR
   --------------------------------------------------------- */

.home-hero .container {
    position: relative;

    z-index: 5;

    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   IMAGE DE FOND
   ========================================================= */

.home-hero__media {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    background: transparent;
}


.home-hero__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    /*
     * Aucun filtre.
     * L'image conserve sa luminosité et ses couleurs originales.
     */
    filter: none;

    opacity: 1;

    transform: scale(1.025);

    transition:
        transform 6s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Léger zoom arrière au chargement */

.home-hero.is-loaded .home-hero__image {
    transform: scale(1);
}


/* =========================================================
   OVERLAY
   ENTIÈREMENT SUPPRIMÉ
   ========================================================= */

.home-hero__overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    /*
     * Aucun voile.
     * Aucun dégradé.
     * Aucun noir ajouté.
     */
    background: transparent;

    pointer-events: none;
}


/* =========================================================
   ANCIENNE OMBRE VERTICALE
   ÉGALEMENT SUPPRIMÉE
   ========================================================= */

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

    position: absolute;

    inset: 0;

    z-index: 3;

    /*
     * Aucun assombrissement supplémentaire.
     */
    background: transparent;

    pointer-events: none;
}


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

.home-hero__content {
    position: relative;

    z-index: 6;

    max-width: 700px;

    padding: 55px 0;

    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   SURTITRE
   ========================================================= */

.home-hero__eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 22px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.17em;

    text-transform: uppercase;

    color: #c99a20;

    /*
     * Petite ombre uniquement sur le texte pour
     * conserver sa lisibilité sans assombrir l'image.
     */
    text-shadow:
        0 1px 6px rgba(0, 0, 0, 0.45);
}


/* Trait doré */

.home-hero__eyebrow-line {
    display: block;

    width: 34px;
    height: 1px;

    flex: 0 0 auto;

    background: #c99a20;

    box-shadow:
        0 1px 5px rgba(0, 0, 0, 0.25);
}


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

.home-hero__title {
    margin: 0;

    max-width: 650px;

    font-size: clamp(34px, 3vw, 48px);
    font-weight: 600;
    line-height: 1.02;

    letter-spacing: -0.03em;

    color: #ffffff;

    /*
     * On protège uniquement le texte.
     * Aucun fond derrière.
     */
    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.48),
        0 1px 3px rgba(0, 0, 0, 0.4);
}


/* Deuxième ligne en doré */

.home-hero__title span {
    display: block;

    margin-top: 6px;

    color: #c99a20;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.45);
}


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

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 14px;

    margin-top: 38px;
}


/* ---------------------------------------------------------
   STYLE COMMUN
   --------------------------------------------------------- */

.home-hero__button {
    display: inline-flex;

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

    gap: 28px;

    min-height: 60px;

    padding: 0 24px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.04em;

    text-decoration: none;

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


/* =========================================================
   BOUTON DEMANDE DE SOUMISSION
   ========================================================= */

.home-hero__button--primary {
    min-width: 270px;

    background: #c99a20;

    border: 1px solid #c99a20;

    color: #111111;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.16);
}


.home-hero__button--primary:hover {
    background: #d9ab32;

    border-color: #d9ab32;

    color: #111111;

    transform: translateY(-2px);

    box-shadow:
        0 14px 32px rgba(201, 154, 32, 0.22);
}


/* ---------------------------------------------------------
   FLÈCHE
   --------------------------------------------------------- */

.home-hero__button-arrow {
    display: inline-block;

    font-size: 18px;
    font-weight: 400;

    transition: transform 0.3s ease;
}


.home-hero__button--primary:hover
.home-hero__button-arrow {
    transform: translateX(5px);
}


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

.home-hero__button--phone {
    min-width: 235px;

    justify-content: flex-start;

    /*
     * On conserve seulement un fond local au bouton.
     * Ça n'assombrit absolument pas le Hero.
     */
    background: rgba(0, 0, 0, 0.48);

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

    color: #ffffff;

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

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.14);
}


.home-hero__button--phone:hover {
    background: rgba(0, 0, 0, 0.68);

    border-color: #c99a20;

    color: #ffffff;

    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   ICÔNE TÉLÉPHONE
   --------------------------------------------------------- */

.home-hero__phone-icon {
    display: flex;

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

    width: 22px;
    height: 22px;

    flex: 0 0 auto;

    color: #c99a20;
}


.home-hero__phone-icon svg {
    display: block;

    width: 100%;
    height: 100%;
}


/* =========================================================
   PETIT INDICATEUR INFÉRIEUR
   ========================================================= */

.home-hero__scroll {
    position: absolute;

    bottom: 0;
    left: 50%;

    z-index: 6;

    width: 1px;
    height: 46px;

    overflow: hidden;

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


.home-hero__scroll span {
    position: absolute;

    top: -60%;
    left: 0;

    width: 100%;
    height: 55%;

    background: #c99a20;

    animation: homeHeroScroll 2s ease-in-out infinite;
}


@keyframes homeHeroScroll {

    0% {
        top: -60%;
    }

    50% {
        top: 40%;
    }

    100% {
        top: 110%;
    }

}


/* =========================================================
   RESPONSIVE - 1100 PX
   ========================================================= */

@media (max-width: 1100px) {

    .home-hero {
        min-height: 620px;
        height: min(74vh, 730px);
    }


    .home-hero__content {
        max-width: 650px;
    }


    .home-hero__title {
        max-width: 600px;

        font-size: clamp(34px, 3.8vw, 44px);
        line-height: 1.02;
    }

}


/* =========================================================
   RESPONSIVE - TABLETTE
   ========================================================= */

@media (max-width: 860px) {

    .home-hero {
        min-height: 640px;
        height: auto;

        padding: 90px 0 80px;
    }


    /* -----------------------------------------------------
       IMAGE
       Aucun overlay ajouté sur tablette non plus
       ----------------------------------------------------- */

    .home-hero__image {
        object-position: 62% center;

        filter: none;

        opacity: 1;
    }


    .home-hero__overlay {
        background: transparent;
    }


    .home-hero::after {
        background: transparent;
    }


    /* -----------------------------------------------------
       CONTENU
       ----------------------------------------------------- */

    .home-hero__content {
        max-width: 590px;

        padding: 35px 0;
    }


    .home-hero__title {
        max-width: 560px;

        font-size: clamp(32px, 5vw, 42px);
        line-height: 1.02;

        letter-spacing: -0.028em;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .home-hero {
        min-height: 620px;

        padding: 75px 0 70px;
    }


    .home-hero .container {
        width: min(100% - 28px, 1180px);
    }


    /* -----------------------------------------------------
       IMAGE
       ----------------------------------------------------- */

    .home-hero__image {
        object-position: 68% center;

        filter: none;

        opacity: 1;
    }


    /* -----------------------------------------------------
       TOUJOURS AUCUN OVERLAY NOIR
       ----------------------------------------------------- */

    .home-hero__overlay {
        background: transparent;
    }


    .home-hero::after {
        background: transparent;
    }


    /* -----------------------------------------------------
       SURTITRE
       ----------------------------------------------------- */

    .home-hero__eyebrow {
        margin-bottom: 18px;

        font-size: 10px;

        letter-spacing: 0.14em;
    }


    .home-hero__eyebrow-line {
        width: 24px;
    }


    /* -----------------------------------------------------
       TITRE
       ----------------------------------------------------- */

    .home-hero__title {
        max-width: 420px;

        font-size: clamp(30px, 8vw, 38px);
        line-height: 1.03;

        letter-spacing: -0.025em;
    }


    .home-hero__title span {
        margin-top: 5px;
    }


    /* -----------------------------------------------------
       BOUTONS
       ----------------------------------------------------- */

    .home-hero__actions {
        flex-direction: column;

        align-items: stretch;

        gap: 11px;

        margin-top: 32px;
    }


    .home-hero__button {
        width: 100%;

        min-width: 0;
        min-height: 56px;

        padding: 0 18px;
    }


    .home-hero__button--phone {
        justify-content: flex-start;
    }


    /* -----------------------------------------------------
       INDICATEUR
       ----------------------------------------------------- */

    .home-hero__scroll {
        display: none;
    }

}


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

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

    .home-hero__image,
    .home-hero__button,
    .home-hero__button-arrow {
        transition: none;
    }


    .home-hero__scroll span {
        animation: none;
    }

}

/* =========================================================
   PAGE ACCUEIL - CARTE + CALL TO ACTION
   ========================================================= */


/* ---------------------------------------------------------
   SECTION PRINCIPALE
   --------------------------------------------------------- */

.home-contact {
    position: relative;

    padding: 120px 0;

    background:
        linear-gradient(
            135deg,
            #f8f7f3 0%,
            #ffffff 52%,
            #f3f1eb 100%
        );

    overflow: hidden;
}


/* Grand élément décoratif très discret */

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

    position: absolute;

    top: -250px;
    right: -250px;

    width: 620px;
    height: 620px;

    border: 1px solid rgba(201, 154, 32, 0.08);

    transform: rotate(45deg);

    pointer-events: none;
}


/* ---------------------------------------------------------
   CONTENEUR
   --------------------------------------------------------- */

.home-contact .container {
    position: relative;

    z-index: 2;

    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   GRILLE PRINCIPALE
   --------------------------------------------------------- */

.home-contact__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr);

    align-items: stretch;

    gap: 58px;
}


/* =========================================================
   COLONNE GAUCHE : CARTE
   ========================================================= */

.home-contact__map-wrap {
    position: relative;
}


/* ---------------------------------------------------------
   DÉCORATION DERRIÈRE LA CARTE
   --------------------------------------------------------- */

.home-contact__map-wrap::before {
    content: "";

    position: absolute;

    left: -24px;
    bottom: -24px;

    width: 72%;
    height: 66%;

    background: #ffffff;

    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.05);

    z-index: 0;
}


/* Petit angle doré */

.home-contact__map-accent {
    position: absolute;

    top: -18px;
    right: -18px;

    width: 70px;
    height: 70px;

    border-top: 1px solid #c99a20;
    border-right: 1px solid #c99a20;

    z-index: 3;

    pointer-events: none;
}


/* ---------------------------------------------------------
   CARTE
   --------------------------------------------------------- */

.home-contact__map {
    position: relative;

    z-index: 1;

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

    overflow: hidden;

    background: #e8e8e5;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.07);
}


/* Iframe responsive */

.home-contact__map iframe {
    display: block;

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

    border: 0;
}



/* =========================================================
   COLONNE DROITE : CALL TO ACTION
   ========================================================= */

.home-contact__cta {
    position: relative;

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

    padding: 60px 54px;

    background: rgba(255, 255, 255, 0.88);

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

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.055);

    backdrop-filter: blur(5px);
}


/* Ligne dorée verticale */

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

    position: absolute;

    top: 54px;
    left: 0;

    width: 2px;
    height: 92px;

    background: #c99a20;
}


/* =========================================================
   SURTITRE
   ========================================================= */

.home-contact__eyebrow {
    position: relative;

    display: inline-block;

    margin-bottom: 18px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color: #c99a20;
}


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

.home-contact__title {
    margin: 0 0 28px;

    max-width: 480px;

    font-size: 38px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.025em;

    color: #111111;
}


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

.home-contact__text {
    max-width: 510px;
}


.home-contact__text p {
    margin: 0 0 22px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;

    color: #4a4a4a;
}


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


    color: #222222;
}


/* ---------------------------------------------------------
   LIENS DANS LE TEXTE
   --------------------------------------------------------- */

.home-contact__text a {
    position: relative;

    color: #111111;

    font-weight: 600;

    text-decoration: none;

    border-bottom:
        1px solid rgba(201, 154, 32, 0.55);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.home-contact__text a:hover {
    color: #c99a20;

    border-color: #c99a20;
}



/* =========================================================
   ZONE DES BOUTONS
   ========================================================= */

.home-contact__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 38px;
}


/* ---------------------------------------------------------
   STYLE COMMUN
   --------------------------------------------------------- */

.home-contact__button {
    display: inline-flex;

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

    gap: 22px;

    min-width: 230px;

    padding: 17px 20px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.055em;

    text-transform: uppercase;
    text-decoration: none;

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


/* ---------------------------------------------------------
   BOUTON PRINCIPAL
   --------------------------------------------------------- */

.home-contact__button--primary {
    background: var(--gold);
    border: 1px solid var(--gold);

    color: #111111;
}


.home-contact__button--primary:hover {
    background: #d6a82e;

    border-color: #d6a82e;

    color: #111111;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(201, 154, 32, 0.18);
}


/* ---------------------------------------------------------
   BOUTON TÉLÉPHONE
   --------------------------------------------------------- */

.home-contact__button--secondary {
    background: transparent;

    border:
        1px solid rgba(17, 17, 17, 0.18);

    color: #111111;
}


.home-contact__button--secondary:hover {
    background: #111111;

    border-color: #111111;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.1);
}


/* ---------------------------------------------------------
   FLÈCHE
   --------------------------------------------------------- */

.home-contact__button-arrow {
    display: inline-block;

    font-size: 17px;

    transition:
        transform 0.3s ease;
}


.home-contact__button:hover .home-contact__button-arrow {
    transform: translateX(5px);
}



/* =========================================================
   RESPONSIVE - 1100 PX
   ========================================================= */

@media (max-width: 1100px) {

    .home-contact {
        padding: 100px 0;
    }


    .home-contact__grid {
        gap: 38px;
    }


    .home-contact__cta {
        padding: 48px 40px;
    }


    .home-contact__title {
        font-size: 34px;
    }


    .home-contact__map,
    .home-contact__map iframe {
        min-height: 490px;
    }

}



/* =========================================================
   RESPONSIVE - TABLETTE
   ========================================================= */

@media (max-width: 860px) {

    .home-contact {
        padding: 80px 0;
    }


    .home-contact__grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .home-contact__map-wrap {
        max-width: 760px;
    }


    .home-contact__map,
    .home-contact__map iframe {
        min-height: 440px;
    }


    .home-contact__cta {
        max-width: 760px;

        padding: 50px 42px;
    }


    .home-contact__title {
        font-size: 32px;
    }

}



/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .home-contact {
        padding: 65px 0 70px;
    }


    .home-contact .container {
        width: min(100% - 28px, 1180px);
    }


    .home-contact__grid {
        gap: 38px;
    }


    /* -----------------------------------------------------
       CARTE
       ----------------------------------------------------- */

    .home-contact__map-wrap::before {
        left: -10px;
        bottom: -10px;
    }


    .home-contact__map-accent {
        top: -9px;
        right: -9px;

        width: 46px;
        height: 46px;
    }


    .home-contact__map,
    .home-contact__map iframe {
        min-height: 340px;
    }


    /* -----------------------------------------------------
       CTA
       ----------------------------------------------------- */

    .home-contact__cta {
        padding: 38px 26px 34px;
    }


    .home-contact__cta::before {
        top: 38px;

        height: 68px;
    }


    .home-contact__eyebrow {
        margin-bottom: 15px;

        font-size: 10px;
    }


    .home-contact__title {
        margin-bottom: 23px;

        font-size: 28px;
        line-height: 1.05;
    }


    .home-contact__text p {
        margin-bottom: 18px;

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


    /* Boutons l'un sous l'autre */

    .home-contact__actions {
        flex-direction: column;

        margin-top: 30px;
    }


    .home-contact__button {
        width: 100%;
        min-width: 0;

        padding: 16px 18px;
    }

}

/* =========================================================
   PAGE ACCUEIL - SECTION SERVICES
   ========================================================= */


/* ---------------------------------------------------------
   SECTION PRINCIPALE
   --------------------------------------------------------- */

.home-services {
    position: relative;

    padding: 115px 0 125px;

    background: #111111;

    overflow: hidden;
}


/* Léger élément graphique en arrière-plan */

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

    position: absolute;

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

    width: 520px;
    height: 520px;

    border: 1px solid rgba(201, 154, 32, 0.09);

    transform: rotate(45deg);

    pointer-events: none;
}


/* ---------------------------------------------------------
   CONTENEUR
   --------------------------------------------------------- */

.home-services .container {
    position: relative;

    z-index: 2;

    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   EN-TÊTE
   ========================================================= */

.home-services__header {
    max-width: 720px;

    margin-bottom: 58px;
}


/* Petit trait doré */

.home-services__accent {
    display: block;

    width: 42px;
    height: 2px;

    margin-bottom: 20px;

    background: #c99a20;
}


/* Titre */

.home-services__title {
    margin: 0 0 20px;

    font-size: 38px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.025em;

    color: #ffffff;
}


/* Introduction */

.home-services__intro {
    margin: 0;

    max-width: 620px;

    font-size: 17px;
    font-weight: 400;
    line-height: 1.2;

    color: rgba(255, 255, 255, 0.7);
}


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

.home-services__grid {
    display: grid;

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

    gap: 22px;
}


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

.home-service-card {
    position: relative;

    display: block;

    min-height: 440px;

    overflow: hidden;

    background: #1a1a1a;

    text-decoration: none;

    isolation: isolate;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.home-service-card__image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition:
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;
}


/* ---------------------------------------------------------
   OVERLAY
   --------------------------------------------------------- */

.home-service-card__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0.26) 34%,
            rgba(0, 0, 0, 0.88) 100%
        );

    transition: background 0.4s ease;
}


/* Deuxième couche subtile */

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

    position: absolute;

    inset: 0;

    z-index: 2;

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

    pointer-events: none;

    transition: border-color 0.35s ease;
}


/* Ligne dorée du bas */

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

    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 4;

    width: 0;
    height: 3px;

    background: #c99a20;

    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   CONTENU DE LA CARTE
   ========================================================= */

.home-service-card__content {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    z-index: 3;

    padding: 30px 30px 28px;

    transform: translateY(42px);

    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---------------------------------------------------------
   NUMÉRO
   --------------------------------------------------------- */

.home-service-card__number {
    display: block;

    margin-bottom: 12px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.15em;

    color: #c99a20;
}


/* ---------------------------------------------------------
   TITRE
   --------------------------------------------------------- */

.home-service-card__title {
    margin: 0 0 14px;

    font-size: 25px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.015em;

    color: #ffffff;
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

.home-service-card__text {
    margin: 0;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;

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

    opacity: 0.9;
}


/* =========================================================
   EN SAVOIR PLUS
   ========================================================= */

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

    gap: 14px;

    margin-top: 22px;

    padding-bottom: 7px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: #ffffff;

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

    opacity: 0;

    transform: translateY(14px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}


/* Flèche */

.home-service-card__arrow {
    display: inline-block;

    font-size: 16px;

    transition: transform 0.3s ease;
}


/* =========================================================
   ANIMATIONS AU SURVOL
   ========================================================= */

.home-service-card:hover .home-service-card__image {
    transform: scale(1.075);

    filter: saturate(1.06);
}


.home-service-card:hover .home-service-card__overlay {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.16) 0%,
            rgba(0, 0, 0, 0.34) 30%,
            rgba(0, 0, 0, 0.94) 100%
        );
}


.home-service-card:hover::before {
    border-color: rgba(201, 154, 32, 0.45);
}


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


.home-service-card:hover .home-service-card__content {
    transform: translateY(0);
}


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

    transform: translateY(0);
}


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


/* Accessibilité clavier */

.home-service-card:focus-visible {
    outline: 2px solid #c99a20;
    outline-offset: 4px;
}


.home-service-card:focus-visible .home-service-card__content {
    transform: translateY(0);
}


.home-service-card:focus-visible .home-service-card__link {
    opacity: 1;

    transform: translateY(0);
}



/* =========================================================
   RESPONSIVE - 1100 PX
   ========================================================= */

@media (max-width: 1100px) {

    .home-services {
        padding: 95px 0 105px;
    }


    .home-services__title {
        font-size: 34px;
    }


    .home-services__grid {
        gap: 18px;
    }


    .home-service-card {
        min-height: 410px;
    }


    .home-service-card__content {
        padding: 26px 24px 24px;
    }


    .home-service-card__title {
        font-size: 22px;
    }

}



/* =========================================================
   RESPONSIVE - TABLETTE
   ========================================================= */

@media (max-width: 860px) {

    .home-services {
        padding: 80px 0 90px;
    }


    .home-services__header {
        margin-bottom: 45px;
    }


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

        gap: 18px;
    }


    .home-service-card {
        min-height: 420px;
    }


    /* Sur tablette, on garde le bouton visible */

    .home-service-card__content {
        transform: translateY(0);
    }


    .home-service-card__link {
        opacity: 1;

        transform: translateY(0);
    }

}



/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .home-services {
        padding: 65px 0 70px;
    }


    .home-services .container {
        width: min(100% - 28px, 1180px);
    }


    /* -----------------------------------------------------
       EN-TÊTE
       ----------------------------------------------------- */

    .home-services__header {
        margin-bottom: 36px;
    }


    .home-services__accent {
        margin-bottom: 16px;
    }


    .home-services__title {
        margin-bottom: 16px;

        font-size: 29px;
        line-height: 1.05;
    }


    .home-services__intro {
        font-size: 15px;
        line-height: 1.2;
    }


    /* -----------------------------------------------------
       UNE CARTE PAR LIGNE
       ----------------------------------------------------- */

    .home-services__grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .home-service-card {
        min-height: 390px;
    }


    .home-service-card__content {
        padding: 26px 22px 24px;

        transform: translateY(0);
    }


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


    .home-service-card__title {
        margin-bottom: 12px;

        font-size: 23px;
    }


    .home-service-card__text {
        font-size: 14px;
        line-height: 1.25;
    }


    .home-service-card__link {
        margin-top: 19px;

        opacity: 1;

        transform: translateY(0);
    }

}



/* =========================================================
   UTILISATEURS PRÉFÉRANT MOINS D'ANIMATIONS
   ========================================================= */

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

    .home-service-card__image,
    .home-service-card__content,
    .home-service-card__link,
    .home-service-card__arrow,
    .home-service-card::after {
        transition: none;
    }

}

/* =========================================================
   PAGE ACCUEIL
   BLOCS 1 ET 2
   ========================================================= */



/* =========================================================
   BLOC 1 :
   LES SERVICES MJD INC.
   ========================================================= */

.home-intro {
    position: relative;

    padding: 95px 0 110px;

    background: #ffffff;

    overflow: hidden;
}


.home-intro .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   GRILLE PRINCIPALE
   Texte à gauche / image à droite
   --------------------------------------------------------- */

.home-intro__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    align-items: center;

    gap: 78px;
}


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

.home-intro__content {
    position: relative;

    z-index: 2;

    max-width: 560px;
}


/* ---------------------------------------------------------
   SURTITRE
   --------------------------------------------------------- */

.home-intro__eyebrow {
    position: relative;

    display: inline-block;

    margin-bottom: 20px;
    padding-left: 28px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #c99a20;
}


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

    position: absolute;

    top: 50%;
    left: 0;

    width: 16px;
    height: 1px;

    background: #c99a20;

    transform: translateY(-50%);
}


/* ---------------------------------------------------------
   H1
   --------------------------------------------------------- */

.home-intro__title {
    margin: 0 0 28px;

    font-size: 42px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.025em;

    color: #111111;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.home-intro__text {
    max-width: 525px;
}


.home-intro__text p {
    margin: 0 0 20px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


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


/* ---------------------------------------------------------
   BOUTON
   --------------------------------------------------------- */

.home-intro__cta {
    position: relative;

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

    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.06em;

    text-transform: uppercase;
    text-decoration: none;

    color: #111111;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.home-intro__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


.home-intro__cta-arrow {
    display: inline-block;

    font-size: 17px;

    transition: transform 0.3s ease;
}


.home-intro__cta:hover {
    color: #c99a20;

    border-color: transparent;
}


.home-intro__cta:hover::after {
    width: 100%;
}


.home-intro__cta:hover .home-intro__cta-arrow {
    transform: translateX(5px);
}


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

.home-intro__visual {
    position: relative;
}


/* Fond décoratif */

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

    position: absolute;

    top: -24px;
    right: -28px;

    width: 72%;
    height: 72%;

    background: #f5f5f2;

    z-index: 0;
}


/* Conteneur image */

.home-intro__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.22 / 1;

    background: #ededed;
}


/* Image */

.home-intro__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


/* Zoom léger */

.home-intro__image-wrap:hover .home-intro__image {
    transform: scale(1.025);
}


/* Détail doré */

.home-intro__visual::after {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 74px;
    height: 74px;

    border-left: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}



/* =========================================================
   BLOC 2 :
   ENTREPRISE DE TERRASSEMENT
   ========================================================= */

.home-earthworks {
    position: relative;

    padding: 110px 0;

    background: #f7f7f5;

    overflow: hidden;
}


.home-earthworks .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   GRILLE PRINCIPALE
   Image à gauche / texte à droite
   --------------------------------------------------------- */

.home-earthworks__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 85px;
}


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

.home-earthworks__visual {
    position: relative;
}


/* Fond décoratif */

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

    position: absolute;

    left: -28px;
    bottom: -28px;

    width: 72%;
    height: 65%;

    background: #ffffff;

    z-index: 0;
}


/* Conteneur image */

.home-earthworks__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #e9e9e7;
}


/* Image */

.home-earthworks__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


/* Zoom léger */

.home-earthworks__image-wrap:hover .home-earthworks__image {
    transform: scale(1.025);
}


/* Détail doré */

.home-earthworks__visual::after {
    content: "";

    position: absolute;

    top: -22px;
    right: -22px;

    width: 74px;
    height: 74px;

    border-top: 1px solid #c99a20;
    border-right: 1px solid #c99a20;

    z-index: 2;
}


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

.home-earthworks__content {
    position: relative;

    z-index: 2;

    max-width: 540px;
}


/* ---------------------------------------------------------
   TITRE
   --------------------------------------------------------- */

.home-earthworks__title {
    position: relative;

    margin: 0 0 30px;
    padding-top: 22px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.02em;

    color: #111111;
}


/* Trait doré */

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

    position: absolute;

    top: 0;
    left: 0;

    width: 42px;
    height: 2px;

    background: #c99a20;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.home-earthworks__text {
    max-width: 535px;
}


.home-earthworks__text p {
    margin: 0 0 22px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


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


/* ---------------------------------------------------------
   BOUTON
   --------------------------------------------------------- */

.home-earthworks__cta {
    position: relative;

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

    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.06em;

    text-transform: uppercase;
    text-decoration: none;

    color: #111111;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.home-earthworks__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


.home-earthworks__cta-arrow {
    display: inline-block;

    font-size: 17px;

    transition: transform 0.3s ease;
}


.home-earthworks__cta:hover {
    color: #c99a20;

    border-color: transparent;
}


.home-earthworks__cta:hover::after {
    width: 100%;
}


.home-earthworks__cta:hover .home-earthworks__cta-arrow {
    transform: translateX(5px);
}



/* =========================================================
   RESPONSIVE - 1100 PX
   ========================================================= */

@media (max-width: 1100px) {

    .home-intro,
    .home-earthworks {
        padding: 90px 0;
    }


    .home-intro__grid,
    .home-earthworks__grid {
        gap: 55px;
    }


    .home-intro__title {
        font-size: 38px;
    }


    .home-earthworks__title {
        font-size: 32px;
    }

}



/* =========================================================
   RESPONSIVE - TABLETTE
   ========================================================= */

@media (max-width: 860px) {

    .home-intro,
    .home-earthworks {
        padding: 75px 0;
    }


    .home-intro__grid,
    .home-earthworks__grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .home-intro__content,
    .home-earthworks__content {
        max-width: 680px;
    }


    .home-intro__visual,
    .home-earthworks__visual {
        max-width: 760px;
    }


    .home-intro__title {
        font-size: 36px;
    }


    .home-earthworks__title {
        font-size: 30px;
    }

}



/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .home-intro,
    .home-earthworks {
        padding: 60px 0;
    }


    .home-intro .container,
    .home-earthworks .container {
        width: min(100% - 28px, 1180px);
    }


    .home-intro__grid,
    .home-earthworks__grid {
        gap: 45px;
    }


    /* =====================================================
       BLOC 1
       ===================================================== */

    .home-intro__eyebrow {
        margin-bottom: 16px;
        padding-left: 24px;

        font-size: 11px;
    }


    .home-intro__title {
        margin-bottom: 22px;

        font-size: 30px;
        line-height: 1.05;
    }


    .home-intro__text p {
        font-size: 15px;
        line-height: 1.1;
    }


    .home-intro__cta {
        margin-top: 28px;
    }


    .home-intro__visual::before {
        top: -14px;
        right: -14px;
    }


    .home-intro__visual::after {
        left: -10px;
        bottom: -10px;

        width: 48px;
        height: 48px;
    }


    /* =====================================================
       BLOC 2
       ===================================================== */

    .home-earthworks__visual::before {
        left: -14px;
        bottom: -14px;
    }


    .home-earthworks__visual::after {
        top: -10px;
        right: -10px;

        width: 48px;
        height: 48px;
    }


    .home-earthworks__title {
        margin-bottom: 26px;

        font-size: 28px;
        line-height: 1.05;
    }


    .home-earthworks__text p {
        margin-bottom: 18px;

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


    .home-earthworks__cta {
        margin-top: 28px;
    }

}

/* =========================================================
   PAGE TONTE DE PELOUSE - SAINTE-CATHERINE-DE-HATLEY
   ========================================================= */



/* =========================================================
   BLOC 1 : INTRODUCTION
   ========================================================= */

.sch-intro {
    position: relative;

    padding: 95px 0 110px;

    background: #ffffff;

    overflow: hidden;
}


.sch-intro .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.sch-intro__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    align-items: center;

    gap: 78px;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.sch-intro__content {
    position: relative;

    z-index: 2;

    max-width: 560px;
}


/* ---------------------------------------------------------
   SURTITRE
   --------------------------------------------------------- */

.sch-intro__eyebrow {
    position: relative;

    display: inline-block;

    margin-bottom: 20px;
    padding-left: 28px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #c99a20;
}


.sch-intro__eyebrow::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 16px;
    height: 1px;

    background: #c99a20;

    transform: translateY(-50%);
}


/* ---------------------------------------------------------
   H1
   --------------------------------------------------------- */

.sch-intro__title {
    margin: 0 0 28px;

    font-size: 42px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.025em;

    color: #111111;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.sch-intro__text {
    max-width: 525px;
}


.sch-intro__text p {
    margin: 0 0 20px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.sch-intro__text p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BOUTON
   --------------------------------------------------------- */

.sch-intro__cta {
    position: relative;

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

    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.06em;

    text-transform: uppercase;
    text-decoration: none;

    color: #111111;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.sch-intro__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


.sch-intro__cta-arrow {
    display: inline-block;

    font-size: 17px;

    transition: transform 0.3s ease;
}


.sch-intro__cta:hover {
    color: #c99a20;

    border-color: transparent;
}


.sch-intro__cta:hover::after {
    width: 100%;
}


.sch-intro__cta:hover .sch-intro__cta-arrow {
    transform: translateX(5px);
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.sch-intro__visual {
    position: relative;
}


.sch-intro__visual::before {
    content: "";

    position: absolute;

    top: -24px;
    right: -28px;

    width: 72%;
    height: 72%;

    background: #f5f5f2;

    z-index: 0;
}


.sch-intro__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.22 / 1;

    background: #ededed;
}


.sch-intro__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.sch-intro__image-wrap:hover .sch-intro__image {
    transform: scale(1.025);
}


.sch-intro__visual::after {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 74px;
    height: 74px;

    border-left: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}



/* =========================================================
   BLOC 2 :
   DES SERVICES ADAPTÉS À VOTRE RÉALITÉ
   ========================================================= */

.sch-services {
    position: relative;

    padding: 110px 0;

    background: #f7f7f5;

    overflow: hidden;
}


.sch-services .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.sch-services__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 85px;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.sch-services__visual {
    position: relative;
}


.sch-services__visual::before {
    content: "";

    position: absolute;

    left: -28px;
    bottom: -28px;

    width: 72%;
    height: 65%;

    background: #ffffff;

    z-index: 0;
}


.sch-services__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #e9e9e7;
}


.sch-services__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.sch-services__image-wrap:hover .sch-services__image {
    transform: scale(1.025);
}


.sch-services__visual::after {
    content: "";

    position: absolute;

    top: -22px;
    right: -22px;

    width: 74px;
    height: 74px;

    border-top: 1px solid #c99a20;
    border-right: 1px solid #c99a20;

    z-index: 2;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.sch-services__content {
    position: relative;

    z-index: 2;

    max-width: 540px;
}


.sch-services__title {
    position: relative;

    margin: 0 0 30px;
    padding-top: 22px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.02em;

    color: #111111;
}


.sch-services__title::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 42px;
    height: 2px;

    background: #c99a20;
}


/* ---------------------------------------------------------
   INTRODUCTION
   --------------------------------------------------------- */

.sch-services__intro {
    margin-bottom: 34px;
}


.sch-services__intro p {
    margin: 0 0 20px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.sch-services__intro p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   LISTE
   --------------------------------------------------------- */

.sch-services__list {
    margin-bottom: 36px;

    border-top: 1px solid rgba(17, 17, 17, 0.12);
}


.sch-services__item {
    display: grid;

    grid-template-columns: 12px 1fr;

    gap: 16px;

    align-items: start;

    padding: 18px 0;

    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}


.sch-services__marker {
    display: block;

    width: 6px;
    height: 6px;

    margin-top: 5px;

    background: #c99a20;

    transform: rotate(45deg);
}


.sch-services__item p {
    margin: 0;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;

    color: #111111;
}


/* ---------------------------------------------------------
   TEXTE FINAL
   --------------------------------------------------------- */

.sch-services__footer-text {
    padding-left: 20px;

    border-left: 1px solid #c99a20;
}


.sch-services__footer-text p {
    margin: 0;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}



/* =========================================================
   BLOC 3 :
   UNE TONTE DE GAZON MODERNE
   ========================================================= */

.sch-process {
    position: relative;

    padding: 110px 0;

    background: #ffffff;

    overflow: hidden;
}


.sch-process .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.sch-process__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 82px;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.sch-process__content {
    position: relative;

    z-index: 2;

    max-width: 560px;

    padding-left: 28px;
}


.sch-process__accent {
    position: absolute;

    top: 3px;
    left: 0;

    width: 2px;
    height: 74px;

    background: #c99a20;
}


.sch-process__title {
    margin: 0 0 30px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.02em;

    color: #111111;
}


/* ---------------------------------------------------------
   INTRODUCTION
   --------------------------------------------------------- */

.sch-process__intro {
    margin-bottom: 30px;
}


.sch-process__intro p {
    margin: 0;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


/* ---------------------------------------------------------
   MÉTHODES
   --------------------------------------------------------- */

.sch-process__features {
    border-top: 1px solid rgba(17, 17, 17, 0.12);
}


.sch-process__feature {
    padding: 17px 0;

    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}


.sch-process__feature p {
    margin: 0;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


/* ---------------------------------------------------------
   BOUTON
   --------------------------------------------------------- */

.sch-process__cta {
    position: relative;

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

    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.06em;

    text-transform: uppercase;
    text-decoration: none;

    color: #111111;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.sch-process__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


.sch-process__cta-arrow {
    display: inline-block;

    font-size: 17px;

    transition: transform 0.3s ease;
}


.sch-process__cta:hover {
    color: #c99a20;

    border-color: transparent;
}


.sch-process__cta:hover::after {
    width: 100%;
}


.sch-process__cta:hover .sch-process__cta-arrow {
    transform: translateX(5px);
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.sch-process__visual {
    position: relative;
}


.sch-process__visual::before {
    content: "";

    position: absolute;

    top: -28px;
    right: -28px;

    width: 70%;
    height: 68%;

    background: #f5f5f2;

    z-index: 0;
}


.sch-process__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #ededed;
}


.sch-process__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.sch-process__image-wrap:hover .sch-process__image {
    transform: scale(1.025);
}


.sch-process__visual::after {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 74px;
    height: 74px;

    border-left: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}



/* =========================================================
   CTA :
   NOUS CONTACTER AUJOURD’HUI
   ========================================================= */

.sch-cta {
    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background: #0d0d0d;
}


/* ---------------------------------------------------------
   IMAGE DE FOND
   --------------------------------------------------------- */

.sch-cta__background {
    position: absolute;

    inset: 0;

    background-image: url("../images/sch-4.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    transform: scale(1.02);
}


/* ---------------------------------------------------------
   OVERLAY SOMBRE
   --------------------------------------------------------- */

.sch-cta__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.76) 32%,
            rgba(0, 0, 0, 0.56) 62%,
            rgba(0, 0, 0, 0.42) 100%
        );
}


/* ---------------------------------------------------------
   CONTENEUR
   --------------------------------------------------------- */

.sch-cta .container {
    position: relative;

    z-index: 2;

    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.sch-cta__content {
    max-width: 700px;
}


/* ---------------------------------------------------------
   SURTITRE
   --------------------------------------------------------- */

.sch-cta__eyebrow {
    position: relative;

    display: inline-block;

    margin-bottom: 24px;
    padding-left: 38px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #c99a20;
}


.sch-cta__eyebrow::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 24px;
    height: 1px;

    background: #c99a20;

    transform: translateY(-50%);
}


/* ---------------------------------------------------------
   TITRE
   --------------------------------------------------------- */

.sch-cta__title {
    margin: 0 0 26px;

    font-size: 48px;
    font-weight: 600;
    line-height: 1.02;

    letter-spacing: -0.035em;

    color: #ffffff;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.sch-cta__text {
    max-width: 640px;
}


.sch-cta__text p {
    margin: 0 0 22px;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;

    color: rgba(255, 255, 255, 0.92);
}


.sch-cta__text p:last-child {
    margin-bottom: 0;

    font-weight: 600;

    color: #ffffff;
}


/* ---------------------------------------------------------
   LIENS
   --------------------------------------------------------- */

.sch-cta__text a {
    color: #c99a20;

    text-decoration: none;

    border-bottom: 1px solid rgba(201, 154, 32, 0.45);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.sch-cta__text a:hover {
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.55);
}


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

.sch-cta__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 38px;
}


.sch-cta__button {
    display: inline-flex;

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

    gap: 22px;

    min-width: 270px;

    padding: 18px 22px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.05em;

    text-transform: uppercase;
    text-decoration: none;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* Bouton principal */

.sch-cta__button--primary {
    background: #c99a20;

    border: 1px solid #c99a20;

    color: #111111;
}


.sch-cta__button--primary:hover {
    background: #d7aa35;

    border-color: #d7aa35;

    color: #111111;

    transform: translateY(-2px);
}


/* Bouton téléphone */

.sch-cta__button--secondary {
    background: transparent;

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

    color: #ffffff;
}


.sch-cta__button--secondary:hover {
    background: rgba(255, 255, 255, 0.08);

    border-color: #c99a20;

    color: #ffffff;

    transform: translateY(-2px);
}


.sch-cta__button-arrow {
    display: inline-block;

    font-size: 18px;

    transition: transform 0.25s ease;
}


.sch-cta__button:hover .sch-cta__button-arrow {
    transform: translateX(4px);
}



/* =========================================================
   RESPONSIVE - 1100 PX
   ========================================================= */

@media (max-width: 1100px) {

    .sch-intro,
    .sch-services,
    .sch-process {
        padding: 90px 0;
    }


    .sch-intro__grid,
    .sch-services__grid,
    .sch-process__grid {
        gap: 55px;
    }


    .sch-intro__title {
        font-size: 38px;
    }


    .sch-services__title,
    .sch-process__title {
        font-size: 32px;
    }


    .sch-cta {
        padding: 100px 0;
    }


    .sch-cta__title {
        font-size: 42px;
    }

}



/* =========================================================
   RESPONSIVE - TABLETTE
   ========================================================= */

@media (max-width: 860px) {

    .sch-intro,
    .sch-services,
    .sch-process {
        padding: 75px 0;
    }


    .sch-intro__grid,
    .sch-services__grid,
    .sch-process__grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .sch-intro__content,
    .sch-services__content,
    .sch-process__content {
        max-width: 680px;
    }


    .sch-intro__visual,
    .sch-services__visual,
    .sch-process__visual {
        max-width: 760px;
    }


    .sch-intro__title {
        font-size: 36px;
    }


    .sch-services__title,
    .sch-process__title {
        font-size: 30px;
    }


    .sch-cta {
        padding: 85px 0;
    }


    .sch-cta__content,
    .sch-cta__text {
        max-width: 100%;
    }


    .sch-cta__title {
        font-size: 38px;
    }

}



/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .sch-intro,
    .sch-services,
    .sch-process {
        padding: 60px 0;
    }


    .sch-intro .container,
    .sch-services .container,
    .sch-process .container,
    .sch-cta .container {
        width: min(100% - 28px, 1180px);
    }


    .sch-intro__grid,
    .sch-services__grid,
    .sch-process__grid {
        gap: 45px;
    }


    /* =====================================================
       BLOC 1
       ===================================================== */

    .sch-intro__eyebrow {
        margin-bottom: 16px;
        padding-left: 24px;

        font-size: 11px;
    }


    .sch-intro__title {
        margin-bottom: 22px;

        font-size: 30px;
        line-height: 1.05;
    }


    .sch-intro__text p {
        font-size: 15px;
        line-height: 1.1;
    }


    .sch-intro__cta {
        margin-top: 28px;
    }


    .sch-intro__visual::before {
        top: -14px;
        right: -14px;
    }


    .sch-intro__visual::after {
        left: -10px;
        bottom: -10px;

        width: 48px;
        height: 48px;
    }


    /* =====================================================
       BLOC 2
       ===================================================== */

    .sch-services__visual::before {
        left: -14px;
        bottom: -14px;
    }


    .sch-services__visual::after {
        top: -10px;
        right: -10px;

        width: 48px;
        height: 48px;
    }


    .sch-services__title {
        margin-bottom: 26px;

        font-size: 28px;
        line-height: 1.05;
    }


    .sch-services__intro p,
    .sch-services__footer-text p {
        font-size: 15px;
        line-height: 1.1;
    }


    .sch-services__item {
        grid-template-columns: 10px 1fr;

        gap: 13px;

        padding: 16px 0;
    }


    .sch-services__item p {
        font-size: 15px;
        line-height: 1.1;
    }


    /* =====================================================
       BLOC 3
       ===================================================== */

    .sch-process__content {
        padding-left: 20px;
    }


    .sch-process__accent {
        height: 60px;
    }


    .sch-process__title {
        margin-bottom: 26px;

        font-size: 28px;
        line-height: 1.05;
    }


    .sch-process__intro p,
    .sch-process__feature p {
        font-size: 15px;
        line-height: 1.1;
    }


    .sch-process__cta {
        margin-top: 28px;
    }


    .sch-process__visual::before {
        top: -14px;
        right: -14px;
    }


    .sch-process__visual::after {
        left: -10px;
        bottom: -10px;

        width: 48px;
        height: 48px;
    }


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

    .sch-cta {
        padding: 65px 0;
    }


    .sch-cta__eyebrow {
        margin-bottom: 18px;
        padding-left: 30px;

        font-size: 11px;
    }


    .sch-cta__eyebrow::before {
        width: 18px;
    }


    .sch-cta__title {
        margin-bottom: 22px;

        font-size: 30px;
        line-height: 1.04;
    }


    .sch-cta__text p {
        margin-bottom: 18px;

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


    .sch-cta__actions {
        flex-direction: column;
        align-items: stretch;

        margin-top: 30px;
    }


    .sch-cta__button {
        width: 100%;
        min-width: 0;

        padding: 16px 18px;

        font-size: 13px;
    }

}/* =========================================================
   PAGE TONTE DE PELOUSE - SAINT-DENIS-DE-BROMPTON
   ========================================================= */



/* =========================================================
   BLOC 1 : INTRODUCTION
   ========================================================= */

.sdb-intro {
    position: relative;

    padding: 95px 0 110px;

    background: #ffffff;

    overflow: hidden;
}


.sdb-intro .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.sdb-intro__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    align-items: center;

    gap: 78px;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.sdb-intro__content {
    position: relative;

    z-index: 2;

    max-width: 560px;
}


/* ---------------------------------------------------------
   SURTITRE
   --------------------------------------------------------- */

.sdb-intro__eyebrow {
    position: relative;

    display: inline-block;

    margin-bottom: 20px;
    padding-left: 28px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #c99a20;
}


.sdb-intro__eyebrow::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 16px;
    height: 1px;

    background: #c99a20;

    transform: translateY(-50%);
}


/* ---------------------------------------------------------
   H1
   --------------------------------------------------------- */

.sdb-intro__title {
    margin: 0 0 28px;

    font-size: 42px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.025em;

    color: #111111;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.sdb-intro__text {
    max-width: 525px;
}


.sdb-intro__text p {
    margin: 0 0 20px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.sdb-intro__text p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BOUTON
   --------------------------------------------------------- */

.sdb-intro__cta {
    position: relative;

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

    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.06em;

    text-transform: uppercase;
    text-decoration: none;

    color: #111111;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.sdb-intro__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


.sdb-intro__cta-arrow {
    display: inline-block;

    font-size: 17px;

    transition: transform 0.3s ease;
}


.sdb-intro__cta:hover {
    color: #c99a20;

    border-color: transparent;
}


.sdb-intro__cta:hover::after {
    width: 100%;
}


.sdb-intro__cta:hover .sdb-intro__cta-arrow {
    transform: translateX(5px);
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.sdb-intro__visual {
    position: relative;
}


.sdb-intro__visual::before {
    content: "";

    position: absolute;

    top: -24px;
    right: -28px;

    width: 72%;
    height: 72%;

    background: #f5f5f2;

    z-index: 0;
}


.sdb-intro__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.22 / 1;

    background: #ededed;
}


.sdb-intro__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.sdb-intro__image-wrap:hover .sdb-intro__image {
    transform: scale(1.025);
}


.sdb-intro__visual::after {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 74px;
    height: 74px;

    border-left: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}



/* =========================================================
   BLOC 2 :
   DES SERVICES ADAPTÉS À VOS BESOINS
   ========================================================= */

.sdb-services {
    position: relative;

    padding: 110px 0;

    background: #f7f7f5;

    overflow: hidden;
}


.sdb-services .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.sdb-services__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 85px;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.sdb-services__visual {
    position: relative;
}


.sdb-services__visual::before {
    content: "";

    position: absolute;

    left: -28px;
    bottom: -28px;

    width: 72%;
    height: 65%;

    background: #ffffff;

    z-index: 0;
}


.sdb-services__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #e9e9e7;
}


.sdb-services__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.sdb-services__image-wrap:hover .sdb-services__image {
    transform: scale(1.025);
}


.sdb-services__visual::after {
    content: "";

    position: absolute;

    top: -22px;
    right: -22px;

    width: 74px;
    height: 74px;

    border-top: 1px solid #c99a20;
    border-right: 1px solid #c99a20;

    z-index: 2;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.sdb-services__content {
    position: relative;

    z-index: 2;

    max-width: 540px;
}


.sdb-services__title {
    position: relative;

    margin: 0 0 30px;
    padding-top: 22px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.02em;

    color: #111111;
}


.sdb-services__title::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 42px;
    height: 2px;

    background: #c99a20;
}


/* ---------------------------------------------------------
   INTRODUCTION
   --------------------------------------------------------- */

.sdb-services__intro {
    margin-bottom: 34px;
}


.sdb-services__intro p {
    margin: 0 0 20px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.sdb-services__intro p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   LISTE DES SERVICES
   --------------------------------------------------------- */

.sdb-services__list {
    margin-bottom: 36px;

    border-top: 1px solid rgba(17, 17, 17, 0.12);
}


.sdb-services__item {
    display: grid;

    grid-template-columns: 12px 1fr;

    gap: 16px;

    align-items: start;

    padding: 18px 0;

    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}


.sdb-services__marker {
    display: block;

    width: 6px;
    height: 6px;

    margin-top: 5px;

    background: #c99a20;

    transform: rotate(45deg);
}


.sdb-services__item p {
    margin: 0;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;

    color: #111111;
}


/* ---------------------------------------------------------
   TEXTE FINAL
   --------------------------------------------------------- */

.sdb-services__footer-text {
    padding-left: 20px;

    border-left: 1px solid #c99a20;
}


.sdb-services__footer-text p {
    margin: 0;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}



/* =========================================================
   BLOC 3 :
   UN PROCESSUS DE TONTE MODERNE
   ========================================================= */

.sdb-process {
    position: relative;

    padding: 110px 0;

    background: #ffffff;

    overflow: hidden;
}


.sdb-process .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.sdb-process__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 82px;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.sdb-process__content {
    position: relative;

    z-index: 2;

    max-width: 560px;

    padding-left: 28px;
}


.sdb-process__accent {
    position: absolute;

    top: 3px;
    left: 0;

    width: 2px;
    height: 74px;

    background: #c99a20;
}


.sdb-process__title {
    margin: 0 0 30px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.02em;

    color: #111111;
}


/* ---------------------------------------------------------
   INTRODUCTION
   --------------------------------------------------------- */

.sdb-process__intro {
    margin-bottom: 30px;
}


.sdb-process__intro p {
    margin: 0 0 20px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.sdb-process__intro p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   MÉTHODES
   --------------------------------------------------------- */

.sdb-process__features {
    border-top: 1px solid rgba(17, 17, 17, 0.12);
}


.sdb-process__feature {
    padding: 17px 0;

    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}


.sdb-process__feature p {
    margin: 0;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.sdb-process__feature strong {
    font-weight: 700;

    color: #111111;
}


/* ---------------------------------------------------------
   BOUTON
   --------------------------------------------------------- */

.sdb-process__cta {
    position: relative;

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

    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.06em;

    text-transform: uppercase;
    text-decoration: none;

    color: #111111;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.sdb-process__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


.sdb-process__cta-arrow {
    display: inline-block;

    font-size: 17px;

    transition: transform 0.3s ease;
}


.sdb-process__cta:hover {
    color: #c99a20;

    border-color: transparent;
}


.sdb-process__cta:hover::after {
    width: 100%;
}


.sdb-process__cta:hover .sdb-process__cta-arrow {
    transform: translateX(5px);
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.sdb-process__visual {
    position: relative;
}


.sdb-process__visual::before {
    content: "";

    position: absolute;

    top: -28px;
    right: -28px;

    width: 70%;
    height: 68%;

    background: #f5f5f2;

    z-index: 0;
}


.sdb-process__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #ededed;
}


.sdb-process__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.sdb-process__image-wrap:hover .sdb-process__image {
    transform: scale(1.025);
}


.sdb-process__visual::after {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 74px;
    height: 74px;

    border-left: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}



/* =========================================================
   CTA :
   NOUS CONTACTER
   ========================================================= */

.sdb-cta {
    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background: #0d0d0d;
}


/* ---------------------------------------------------------
   IMAGE DE FOND
   --------------------------------------------------------- */

.sdb-cta__background {
    position: absolute;

    inset: 0;

    background-image: url("../images/sdb-4.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    transform: scale(1.02);
}


/* ---------------------------------------------------------
   OVERLAY SOMBRE
   --------------------------------------------------------- */

.sdb-cta__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.76) 32%,
            rgba(0, 0, 0, 0.56) 62%,
            rgba(0, 0, 0, 0.42) 100%
        );
}


/* ---------------------------------------------------------
   CONTENEUR
   --------------------------------------------------------- */

.sdb-cta .container {
    position: relative;

    z-index: 2;

    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.sdb-cta__content {
    max-width: 700px;
}


/* ---------------------------------------------------------
   SURTITRE
   --------------------------------------------------------- */

.sdb-cta__eyebrow {
    position: relative;

    display: inline-block;

    margin-bottom: 24px;
    padding-left: 38px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #c99a20;
}


.sdb-cta__eyebrow::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 24px;
    height: 1px;

    background: #c99a20;

    transform: translateY(-50%);
}


/* ---------------------------------------------------------
   TITRE
   --------------------------------------------------------- */

.sdb-cta__title {
    margin: 0 0 26px;

    font-size: 48px;
    font-weight: 600;
    line-height: 1.02;

    letter-spacing: -0.035em;

    color: #ffffff;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.sdb-cta__text {
    max-width: 640px;
}


.sdb-cta__text p {
    margin: 0 0 22px;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;

    color: rgba(255, 255, 255, 0.92);
}


.sdb-cta__text p:last-child {
    margin-bottom: 0;

    font-weight: 600;

    color: #ffffff;
}


/* ---------------------------------------------------------
   LIENS
   --------------------------------------------------------- */

.sdb-cta__text a {
    color: #c99a20;


    text-decoration: none;

    border-bottom: 1px solid rgba(201, 154, 32, 0.45);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.sdb-cta__text a:hover {
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.55);
}


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

.sdb-cta__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 38px;
}


.sdb-cta__button {
    display: inline-flex;

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

    gap: 22px;

    min-width: 270px;

    padding: 18px 22px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.05em;

    text-transform: uppercase;
    text-decoration: none;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* Bouton principal */

.sdb-cta__button--primary {
    background: #c99a20;

    border: 1px solid #c99a20;

    color: #111111;
}


.sdb-cta__button--primary:hover {
    background: #d7aa35;

    border-color: #d7aa35;

    color: #111111;

    transform: translateY(-2px);
}


/* Bouton téléphone */

.sdb-cta__button--secondary {
    background: transparent;

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

    color: #ffffff;
}


.sdb-cta__button--secondary:hover {
    background: rgba(255, 255, 255, 0.08);

    border-color: #c99a20;

    color: #ffffff;

    transform: translateY(-2px);
}


.sdb-cta__button-arrow {
    display: inline-block;

    font-size: 18px;

    transition: transform 0.25s ease;
}


.sdb-cta__button:hover .sdb-cta__button-arrow {
    transform: translateX(4px);
}



/* =========================================================
   RESPONSIVE - 1100 PX
   ========================================================= */

@media (max-width: 1100px) {

    .sdb-intro,
    .sdb-services,
    .sdb-process {
        padding: 90px 0;
    }


    .sdb-intro__grid,
    .sdb-services__grid,
    .sdb-process__grid {
        gap: 55px;
    }


    .sdb-intro__title {
        font-size: 38px;
    }


    .sdb-services__title,
    .sdb-process__title {
        font-size: 32px;
    }


    .sdb-cta {
        padding: 100px 0;
    }


    .sdb-cta__title {
        font-size: 42px;
    }

}



/* =========================================================
   RESPONSIVE - TABLETTE
   ========================================================= */

@media (max-width: 860px) {

    .sdb-intro,
    .sdb-services,
    .sdb-process {
        padding: 75px 0;
    }


    .sdb-intro__grid,
    .sdb-services__grid,
    .sdb-process__grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .sdb-intro__content,
    .sdb-services__content,
    .sdb-process__content {
        max-width: 680px;
    }


    .sdb-intro__visual,
    .sdb-services__visual,
    .sdb-process__visual {
        max-width: 760px;
    }


    .sdb-intro__title {
        font-size: 36px;
    }


    .sdb-services__title,
    .sdb-process__title {
        font-size: 30px;
    }


    .sdb-cta {
        padding: 85px 0;
    }


    .sdb-cta__content,
    .sdb-cta__text {
        max-width: 100%;
    }


    .sdb-cta__title {
        font-size: 38px;
    }

}



/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .sdb-intro,
    .sdb-services,
    .sdb-process {
        padding: 60px 0;
    }


    .sdb-intro .container,
    .sdb-services .container,
    .sdb-process .container,
    .sdb-cta .container {
        width: min(100% - 28px, 1180px);
    }


    .sdb-intro__grid,
    .sdb-services__grid,
    .sdb-process__grid {
        gap: 45px;
    }


    /* =====================================================
       BLOC 1
       ===================================================== */

    .sdb-intro__eyebrow {
        margin-bottom: 16px;
        padding-left: 24px;

        font-size: 11px;
    }


    .sdb-intro__title {
        margin-bottom: 22px;

        font-size: 30px;
        line-height: 1.05;
    }


    .sdb-intro__text p {
        font-size: 15px;
        line-height: 1.1;
    }


    .sdb-intro__cta {
        margin-top: 28px;
    }


    .sdb-intro__visual::before {
        top: -14px;
        right: -14px;
    }


    .sdb-intro__visual::after {
        left: -10px;
        bottom: -10px;

        width: 48px;
        height: 48px;
    }


    /* =====================================================
       BLOC 2
       ===================================================== */

    .sdb-services__visual::before {
        left: -14px;
        bottom: -14px;
    }


    .sdb-services__visual::after {
        top: -10px;
        right: -10px;

        width: 48px;
        height: 48px;
    }


    .sdb-services__title {
        margin-bottom: 26px;

        font-size: 28px;
        line-height: 1.05;
    }


    .sdb-services__intro p,
    .sdb-services__footer-text p {
        font-size: 15px;
        line-height: 1.1;
    }


    .sdb-services__item {
        grid-template-columns: 10px 1fr;

        gap: 13px;

        padding: 16px 0;
    }


    .sdb-services__item p {
        font-size: 15px;
        line-height: 1.1;
    }


    /* =====================================================
       BLOC 3
       ===================================================== */

    .sdb-process__content {
        padding-left: 20px;
    }


    .sdb-process__accent {
        height: 60px;
    }


    .sdb-process__title {
        margin-bottom: 26px;

        font-size: 28px;
        line-height: 1.05;
    }


    .sdb-process__intro p,
    .sdb-process__feature p {
        font-size: 15px;
        line-height: 1.1;
    }


    .sdb-process__cta {
        margin-top: 28px;
    }


    .sdb-process__visual::before {
        top: -14px;
        right: -14px;
    }


    .sdb-process__visual::after {
        left: -10px;
        bottom: -10px;

        width: 48px;
        height: 48px;
    }


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

    .sdb-cta {
        padding: 65px 0;
    }


    .sdb-cta__eyebrow {
        margin-bottom: 18px;
        padding-left: 30px;

        font-size: 11px;
    }


    .sdb-cta__eyebrow::before {
        width: 18px;
    }


    .sdb-cta__title {
        margin-bottom: 22px;

        font-size: 30px;
        line-height: 1.04;
    }


    .sdb-cta__text p {
        margin-bottom: 18px;

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


    .sdb-cta__actions {
        flex-direction: column;
        align-items: stretch;

        margin-top: 30px;
    }


    .sdb-cta__button {
        width: 100%;
        min-width: 0;

        padding: 16px 18px;

        font-size: 13px;
    }

}


/* =========================================================
   PAGE TONTE DE PELOUSE
   ========================================================= */



/* =========================================================
   BLOC 1 : INTRODUCTION
   ========================================================= */

.mowing-intro {
    position: relative;

    padding: 95px 0 110px;

    background: #ffffff;

    overflow: hidden;
}


.mowing-intro .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.mowing-intro__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    align-items: center;

    gap: 78px;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.mowing-intro__content {
    position: relative;

    z-index: 2;

    max-width: 560px;
}


/* ---------------------------------------------------------
   SURTITRE
   --------------------------------------------------------- */

.mowing-intro__eyebrow {
    position: relative;

    display: inline-block;

    margin-bottom: 20px;
    padding-left: 28px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #c99a20;
}


.mowing-intro__eyebrow::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 16px;
    height: 1px;

    background: #c99a20;

    transform: translateY(-50%);
}


/* ---------------------------------------------------------
   H1
   --------------------------------------------------------- */

.mowing-intro__title {
    margin: 0 0 28px;

    font-size: 42px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.025em;

    color: #111111;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.mowing-intro__text {
    max-width: 525px;
}


.mowing-intro__text p {
    margin: 0 0 20px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.mowing-intro__text p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BOUTON
   --------------------------------------------------------- */

.mowing-intro__cta {
    position: relative;

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

    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.06em;

    text-transform: uppercase;
    text-decoration: none;

    color: #111111;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.mowing-intro__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


.mowing-intro__cta-arrow {
    display: inline-block;

    font-size: 17px;

    transition: transform 0.3s ease;
}


.mowing-intro__cta:hover {
    color: #c99a20;

    border-color: transparent;
}


.mowing-intro__cta:hover::after {
    width: 100%;
}


.mowing-intro__cta:hover .mowing-intro__cta-arrow {
    transform: translateX(5px);
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.mowing-intro__visual {
    position: relative;
}


.mowing-intro__visual::before {
    content: "";

    position: absolute;

    top: -24px;
    right: -28px;

    width: 72%;
    height: 72%;

    background: #f5f5f2;

    z-index: 0;
}


.mowing-intro__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.22 / 1;

    background: #ededed;
}


.mowing-intro__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.mowing-intro__image-wrap:hover .mowing-intro__image {
    transform: scale(1.025);
}


.mowing-intro__visual::after {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 74px;
    height: 74px;

    border-left: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}



/* =========================================================
   BLOC 2 :
   DES SERVICES SUR MESURE
   ========================================================= */

.mowing-services {
    position: relative;

    padding: 110px 0;

    background: #f7f7f5;

    overflow: hidden;
}


.mowing-services .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.mowing-services__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 85px;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.mowing-services__visual {
    position: relative;
}


.mowing-services__visual::before {
    content: "";

    position: absolute;

    left: -28px;
    bottom: -28px;

    width: 72%;
    height: 65%;

    background: #ffffff;

    z-index: 0;
}


.mowing-services__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #e9e9e7;
}


.mowing-services__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.mowing-services__image-wrap:hover .mowing-services__image {
    transform: scale(1.025);
}


.mowing-services__visual::after {
    content: "";

    position: absolute;

    top: -22px;
    right: -22px;

    width: 74px;
    height: 74px;

    border-top: 1px solid #c99a20;
    border-right: 1px solid #c99a20;

    z-index: 2;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.mowing-services__content {
    position: relative;

    z-index: 2;

    max-width: 540px;
}


.mowing-services__title {
    position: relative;

    margin: 0 0 30px;
    padding-top: 22px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.02em;

    color: #111111;
}


.mowing-services__title::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 42px;
    height: 2px;

    background: #c99a20;
}


/* ---------------------------------------------------------
   INTRODUCTION
   --------------------------------------------------------- */

.mowing-services__intro {
    margin-bottom: 34px;
}


.mowing-services__intro p {
    margin: 0 0 20px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.mowing-services__intro p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   LISTE
   --------------------------------------------------------- */

.mowing-services__list {
    margin-bottom: 36px;

    border-top: 1px solid rgba(17, 17, 17, 0.12);
}


.mowing-services__item {
    display: grid;

    grid-template-columns: 12px 1fr;

    gap: 16px;

    align-items: start;

    padding: 18px 0;

    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}


.mowing-services__marker {
    display: block;

    width: 6px;
    height: 6px;

    margin-top: 5px;

    background: #c99a20;

    transform: rotate(45deg);
}


.mowing-services__item p {
    margin: 0;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;

    color: #111111;
}


/* ---------------------------------------------------------
   TEXTE FINAL
   --------------------------------------------------------- */

.mowing-services__footer-text {
    padding-left: 20px;

    border-left: 1px solid #c99a20;
}


.mowing-services__footer-text p {
    margin: 0;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}



/* =========================================================
   BLOC 3 :
   OBTENEZ DES RÉSULTATS EXCEPTIONNELS
   ========================================================= */

.mowing-results {
    position: relative;

    padding: 110px 0;

    background: #ffffff;

    overflow: hidden;
}


.mowing-results .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.mowing-results__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 82px;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.mowing-results__content {
    position: relative;

    z-index: 2;

    max-width: 560px;

    padding-left: 28px;
}


.mowing-results__accent {
    position: absolute;

    top: 3px;
    left: 0;

    width: 2px;
    height: 74px;

    background: #c99a20;
}


.mowing-results__title {
    margin: 0 0 30px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.02em;

    color: #111111;
}


/* ---------------------------------------------------------
   INTRODUCTION
   --------------------------------------------------------- */

.mowing-results__intro {
    margin-bottom: 30px;
}


.mowing-results__intro p {
    margin: 0 0 20px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.mowing-results__intro p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   POINTS FORTS
   --------------------------------------------------------- */

.mowing-results__features {
    border-top: 1px solid rgba(17, 17, 17, 0.12);
}


.mowing-results__feature {
    padding: 17px 0;

    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}


.mowing-results__feature p {
    margin: 0;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.mowing-results__feature strong {
    font-weight: 700;

    color: #111111;
}


/* ---------------------------------------------------------
   BOUTON
   --------------------------------------------------------- */

.mowing-results__cta {
    position: relative;

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

    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.06em;

    text-transform: uppercase;
    text-decoration: none;

    color: #111111;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.mowing-results__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


.mowing-results__cta-arrow {
    display: inline-block;

    font-size: 17px;

    transition: transform 0.3s ease;
}


.mowing-results__cta:hover {
    color: #c99a20;

    border-color: transparent;
}


.mowing-results__cta:hover::after {
    width: 100%;
}


.mowing-results__cta:hover .mowing-results__cta-arrow {
    transform: translateX(5px);
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.mowing-results__visual {
    position: relative;
}


.mowing-results__visual::before {
    content: "";

    position: absolute;

    top: -28px;
    right: -28px;

    width: 70%;
    height: 68%;

    background: #f5f5f2;

    z-index: 0;
}


.mowing-results__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #ededed;
}


.mowing-results__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.mowing-results__image-wrap:hover .mowing-results__image {
    transform: scale(1.025);
}


.mowing-results__visual::after {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 74px;
    height: 74px;

    border-left: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}



/* =========================================================
   CTA :
   NOUS REJOINDRE
   ========================================================= */

.mowing-cta {
    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background: #0d0d0d;
}


/* ---------------------------------------------------------
   IMAGE DE FOND
   --------------------------------------------------------- */

.mowing-cta__background {
    position: absolute;

    inset: 0;

    background-image: url("../images/tonte-4.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    transform: scale(1.02);
}


/* ---------------------------------------------------------
   OVERLAY SOMBRE
   --------------------------------------------------------- */

.mowing-cta__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.76) 32%,
            rgba(0, 0, 0, 0.56) 62%,
            rgba(0, 0, 0, 0.42) 100%
        );
}


/* ---------------------------------------------------------
   CONTENEUR
   --------------------------------------------------------- */

.mowing-cta .container {
    position: relative;

    z-index: 2;

    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.mowing-cta__content {
    max-width: 700px;
}


/* ---------------------------------------------------------
   SURTITRE
   --------------------------------------------------------- */

.mowing-cta__eyebrow {
    position: relative;

    display: inline-block;

    margin-bottom: 24px;
    padding-left: 38px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #c99a20;
}


.mowing-cta__eyebrow::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 24px;
    height: 1px;

    background: #c99a20;

    transform: translateY(-50%);
}


/* ---------------------------------------------------------
   TITRE
   --------------------------------------------------------- */

.mowing-cta__title {
    margin: 0 0 26px;

    font-size: 48px;
    font-weight: 600;
    line-height: 1.02;

    letter-spacing: -0.035em;

    color: #ffffff;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.mowing-cta__text {
    max-width: 640px;
}


.mowing-cta__text p {
    margin: 0 0 22px;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;

    color: rgba(255, 255, 255, 0.92);
}


.mowing-cta__text p:last-child {
    margin-bottom: 0;

    font-weight: 600;

    color: #ffffff;
}


/* ---------------------------------------------------------
   LIENS
   --------------------------------------------------------- */

.mowing-cta__text a {
    color: #c99a20;

    text-decoration: none;

    border-bottom: 1px solid rgba(201, 154, 32, 0.45);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.mowing-cta__text a:hover {
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.55);
}


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

.mowing-cta__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 38px;
}


.mowing-cta__button {
    display: inline-flex;

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

    gap: 22px;

    min-width: 270px;

    padding: 18px 22px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.05em;

    text-transform: uppercase;
    text-decoration: none;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* Bouton principal */

.mowing-cta__button--primary {
    background: #c99a20;

    border: 1px solid #c99a20;

    color: #111111;
}


.mowing-cta__button--primary:hover {
    background: #d7aa35;

    border-color: #d7aa35;

    color: #111111;

    transform: translateY(-2px);
}


/* Bouton téléphone */

.mowing-cta__button--secondary {
    background: transparent;

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

    color: #ffffff;
}


.mowing-cta__button--secondary:hover {
    background: rgba(255, 255, 255, 0.08);

    border-color: #c99a20;

    color: #ffffff;

    transform: translateY(-2px);
}


.mowing-cta__button-arrow {
    display: inline-block;

    font-size: 18px;

    transition: transform 0.25s ease;
}


.mowing-cta__button:hover .mowing-cta__button-arrow {
    transform: translateX(4px);
}



/* =========================================================
   RESPONSIVE - 1100 PX
   ========================================================= */

@media (max-width: 1100px) {

    .mowing-intro,
    .mowing-services,
    .mowing-results {
        padding: 90px 0;
    }


    .mowing-intro__grid,
    .mowing-services__grid,
    .mowing-results__grid {
        gap: 55px;
    }


    .mowing-intro__title {
        font-size: 38px;
    }


    .mowing-services__title,
    .mowing-results__title {
        font-size: 32px;
    }


    .mowing-cta {
        padding: 100px 0;
    }


    .mowing-cta__title {
        font-size: 42px;
    }

}



/* =========================================================
   RESPONSIVE - TABLETTE
   ========================================================= */

@media (max-width: 860px) {

    .mowing-intro,
    .mowing-services,
    .mowing-results {
        padding: 75px 0;
    }


    .mowing-intro__grid,
    .mowing-services__grid,
    .mowing-results__grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .mowing-intro__content,
    .mowing-services__content,
    .mowing-results__content {
        max-width: 680px;
    }


    .mowing-intro__visual,
    .mowing-services__visual,
    .mowing-results__visual {
        max-width: 760px;
    }


    .mowing-intro__title {
        font-size: 36px;
    }


    .mowing-services__title,
    .mowing-results__title {
        font-size: 30px;
    }


    .mowing-cta {
        padding: 85px 0;
    }


    .mowing-cta__content,
    .mowing-cta__text {
        max-width: 100%;
    }


    .mowing-cta__title {
        font-size: 38px;
    }

}



/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .mowing-intro,
    .mowing-services,
    .mowing-results {
        padding: 60px 0;
    }


    .mowing-intro .container,
    .mowing-services .container,
    .mowing-results .container,
    .mowing-cta .container {
        width: min(100% - 28px, 1180px);
    }


    .mowing-intro__grid,
    .mowing-services__grid,
    .mowing-results__grid {
        gap: 45px;
    }


    /* =====================================================
       BLOC 1
       ===================================================== */

    .mowing-intro__eyebrow {
        margin-bottom: 16px;
        padding-left: 24px;

        font-size: 11px;
    }


    .mowing-intro__title {
        margin-bottom: 22px;

        font-size: 30px;
        line-height: 1.05;
    }


    .mowing-intro__text p {
        font-size: 15px;
        line-height: 1.1;
    }


    .mowing-intro__cta {
        margin-top: 28px;
    }


    .mowing-intro__visual::before {
        top: -14px;
        right: -14px;
    }


    .mowing-intro__visual::after {
        left: -10px;
        bottom: -10px;

        width: 48px;
        height: 48px;
    }


    /* =====================================================
       BLOC 2
       ===================================================== */

    .mowing-services__visual::before {
        left: -14px;
        bottom: -14px;
    }


    .mowing-services__visual::after {
        top: -10px;
        right: -10px;

        width: 48px;
        height: 48px;
    }


    .mowing-services__title {
        margin-bottom: 26px;

        font-size: 28px;
        line-height: 1.05;
    }


    .mowing-services__intro p,
    .mowing-services__footer-text p {
        font-size: 15px;
        line-height: 1.1;
    }


    .mowing-services__item {
        grid-template-columns: 10px 1fr;

        gap: 13px;

        padding: 16px 0;
    }


    .mowing-services__item p {
        font-size: 15px;
        line-height: 1.1;
    }


    /* =====================================================
       BLOC 3
       ===================================================== */

    .mowing-results__content {
        padding-left: 20px;
    }


    .mowing-results__accent {
        height: 60px;
    }


    .mowing-results__title {
        margin-bottom: 26px;

        font-size: 28px;
        line-height: 1.05;
    }


    .mowing-results__intro p,
    .mowing-results__feature p {
        font-size: 15px;
        line-height: 1.1;
    }


    .mowing-results__cta {
        margin-top: 28px;
    }


    .mowing-results__visual::before {
        top: -14px;
        right: -14px;
    }


    .mowing-results__visual::after {
        left: -10px;
        bottom: -10px;

        width: 48px;
        height: 48px;
    }


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

    .mowing-cta {
        padding: 65px 0;
    }


    .mowing-cta__eyebrow {
        margin-bottom: 18px;
        padding-left: 30px;

        font-size: 11px;
    }


    .mowing-cta__eyebrow::before {
        width: 18px;
    }


    .mowing-cta__title {
        margin-bottom: 22px;

        font-size: 30px;
        line-height: 1.04;
    }


    .mowing-cta__text p {
        margin-bottom: 18px;

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


    .mowing-cta__actions {
        flex-direction: column;
        align-items: stretch;

        margin-top: 30px;
    }


    .mowing-cta__button {
        width: 100%;
        min-width: 0;

        padding: 16px 18px;

        font-size: 13px;
    }

}
/* =========================================================
   PAGE GAZON
   ========================================================= */



/* =========================================================
   BLOC 1 : INTRODUCTION
   ========================================================= */

.sod-intro {
    position: relative;

    padding: 95px 0 110px;

    background: #ffffff;

    overflow: hidden;
}


.sod-intro .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.sod-intro__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    align-items: center;

    gap: 78px;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.sod-intro__content {
    position: relative;

    z-index: 2;

    max-width: 560px;
}


/* ---------------------------------------------------------
   SURTITRE
   --------------------------------------------------------- */

.sod-intro__eyebrow {
    position: relative;

    display: inline-block;

    margin-bottom: 20px;
    padding-left: 28px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #c99a20;
}


.sod-intro__eyebrow::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 16px;
    height: 1px;

    background: #c99a20;

    transform: translateY(-50%);
}


/* ---------------------------------------------------------
   H1
   --------------------------------------------------------- */

.sod-intro__title {
    margin: 0 0 28px;

    font-size: 42px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.025em;

    color: #111111;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.sod-intro__text {
    max-width: 525px;
}


.sod-intro__text p {
    margin: 0 0 20px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.sod-intro__text p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BOUTON
   --------------------------------------------------------- */

.sod-intro__cta {
    position: relative;

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

    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.06em;

    text-transform: uppercase;
    text-decoration: none;

    color: #111111;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.sod-intro__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


.sod-intro__cta-arrow {
    display: inline-block;

    font-size: 17px;

    transition: transform 0.3s ease;
}


.sod-intro__cta:hover {
    color: #c99a20;

    border-color: transparent;
}


.sod-intro__cta:hover::after {
    width: 100%;
}


.sod-intro__cta:hover .sod-intro__cta-arrow {
    transform: translateX(5px);
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.sod-intro__visual {
    position: relative;
}


.sod-intro__visual::before {
    content: "";

    position: absolute;

    top: -24px;
    right: -28px;

    width: 72%;
    height: 72%;

    background: #f5f5f2;

    z-index: 0;
}


.sod-intro__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.22 / 1;

    background: #ededed;
}


.sod-intro__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.sod-intro__image-wrap:hover .sod-intro__image {
    transform: scale(1.025);
}


.sod-intro__visual::after {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 74px;
    height: 74px;

    border-left: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}



/* =========================================================
   BLOC 2 :
   POUR UNE PELOUSE D’UN VERT ÉCLATANT
   ========================================================= */

.sod-green {
    position: relative;

    padding: 110px 0;

    background: #f7f7f5;

    overflow: hidden;
}


.sod-green .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.sod-green__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 85px;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.sod-green__visual {
    position: relative;
}


.sod-green__visual::before {
    content: "";

    position: absolute;

    left: -28px;
    bottom: -28px;

    width: 72%;
    height: 65%;

    background: #ffffff;

    z-index: 0;
}


.sod-green__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #e9e9e7;
}


.sod-green__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.sod-green__image-wrap:hover .sod-green__image {
    transform: scale(1.025);
}


.sod-green__visual::after {
    content: "";

    position: absolute;

    top: -22px;
    right: -22px;

    width: 74px;
    height: 74px;

    border-top: 1px solid #c99a20;
    border-right: 1px solid #c99a20;

    z-index: 2;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.sod-green__content {
    position: relative;

    z-index: 2;

    max-width: 540px;
}


.sod-green__title {
    position: relative;

    margin: 0 0 30px;
    padding-top: 22px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.02em;

    color: #111111;
}


.sod-green__title::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 42px;
    height: 2px;

    background: #c99a20;
}


.sod-green__text {
    max-width: 535px;
}


.sod-green__text p {
    margin: 0 0 22px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.sod-green__text p:last-child {
    margin-bottom: 0;
}



/* =========================================================
   BLOC 3 :
   BIEN ENTRETENIR VOTRE GAZON
   ========================================================= */

.sod-care {
    position: relative;

    padding: 110px 0;

    background: #ffffff;

    overflow: hidden;
}


.sod-care .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.sod-care__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 82px;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.sod-care__content {
    position: relative;

    z-index: 2;

    max-width: 560px;

    padding-left: 28px;
}


.sod-care__accent {
    position: absolute;

    top: 3px;
    left: 0;

    width: 2px;
    height: 70px;

    background: #c99a20;
}


.sod-care__title {
    margin: 0 0 30px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.02em;

    color: #111111;
}


.sod-care__text {
    max-width: 535px;
}


.sod-care__text p {
    margin: 0 0 22px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.sod-care__text p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BOUTON
   --------------------------------------------------------- */

.sod-care__cta {
    position: relative;

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

    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.06em;

    text-transform: uppercase;
    text-decoration: none;

    color: #111111;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.sod-care__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


.sod-care__cta-arrow {
    display: inline-block;

    font-size: 17px;

    transition: transform 0.3s ease;
}


.sod-care__cta:hover {
    color: #c99a20;

    border-color: transparent;
}


.sod-care__cta:hover::after {
    width: 100%;
}


.sod-care__cta:hover .sod-care__cta-arrow {
    transform: translateX(5px);
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.sod-care__visual {
    position: relative;
}


.sod-care__visual::before {
    content: "";

    position: absolute;

    top: -28px;
    right: -28px;

    width: 70%;
    height: 68%;

    background: #f5f5f2;

    z-index: 0;
}


.sod-care__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #ededed;
}


.sod-care__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.sod-care__image-wrap:hover .sod-care__image {
    transform: scale(1.025);
}


.sod-care__visual::after {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 74px;
    height: 74px;

    border-left: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}



/* =========================================================
   CTA :
   FAIRE APPEL À DES EXPERTS
   ========================================================= */

.sod-cta {
    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background: #0d0d0d;
}


/* ---------------------------------------------------------
   IMAGE DE FOND
   Le CSS étant dans le dossier CSS,
   on remonte d'un niveau
   --------------------------------------------------------- */

.sod-cta__background {
    position: absolute;

    inset: 0;

    background-image: url("../images/gazon-4.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    transform: scale(1.02);
}


/* ---------------------------------------------------------
   OVERLAY SOMBRE
   --------------------------------------------------------- */

.sod-cta__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.76) 32%,
            rgba(0, 0, 0, 0.56) 62%,
            rgba(0, 0, 0, 0.42) 100%
        );
}


/* ---------------------------------------------------------
   CONTENEUR
   --------------------------------------------------------- */

.sod-cta .container {
    position: relative;

    z-index: 2;

    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.sod-cta__content {
    max-width: 700px;
}


/* ---------------------------------------------------------
   SURTITRE
   --------------------------------------------------------- */

.sod-cta__eyebrow {
    position: relative;

    display: inline-block;

    margin-bottom: 24px;
    padding-left: 38px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #c99a20;
}


.sod-cta__eyebrow::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 24px;
    height: 1px;

    background: #c99a20;

    transform: translateY(-50%);
}


/* ---------------------------------------------------------
   TITRE CTA
   --------------------------------------------------------- */

.sod-cta__title {
    margin: 0 0 26px;

    font-size: 48px;
    font-weight: 600;
    line-height: 1.02;

    letter-spacing: -0.035em;

    color: #ffffff;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.sod-cta__text {
    max-width: 640px;
}


.sod-cta__text p {
    margin: 0 0 22px;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;

    color: rgba(255, 255, 255, 0.92);
}


.sod-cta__text p:last-child {
    margin-bottom: 0;

    font-weight: 600;

    color: #ffffff;
}


/* ---------------------------------------------------------
   LIENS
   --------------------------------------------------------- */

.sod-cta__text a {
    color: #c99a20;

    text-decoration: none;

    border-bottom: 1px solid rgba(201, 154, 32, 0.45);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.sod-cta__text a:hover {
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.55);
}


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

.sod-cta__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 38px;
}


.sod-cta__button {
    display: inline-flex;

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

    gap: 22px;

    min-width: 270px;

    padding: 18px 22px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.05em;

    text-transform: uppercase;
    text-decoration: none;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* Bouton principal */

.sod-cta__button--primary {
    background: #c99a20;

    border: 1px solid #c99a20;

    color: #111111;
}


.sod-cta__button--primary:hover {
    background: #d7aa35;

    border-color: #d7aa35;

    color: #111111;

    transform: translateY(-2px);
}


/* Bouton téléphone */

.sod-cta__button--secondary {
    background: transparent;

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

    color: #ffffff;
}


.sod-cta__button--secondary:hover {
    background: rgba(255, 255, 255, 0.08);

    border-color: #c99a20;

    color: #ffffff;

    transform: translateY(-2px);
}


.sod-cta__button-arrow {
    display: inline-block;

    font-size: 18px;

    transition: transform 0.25s ease;
}


.sod-cta__button:hover .sod-cta__button-arrow {
    transform: translateX(4px);
}



/* =========================================================
   RESPONSIVE - 1100 PX
   ========================================================= */

@media (max-width: 1100px) {

    .sod-intro,
    .sod-green,
    .sod-care {
        padding: 90px 0;
    }


    .sod-intro__grid,
    .sod-green__grid,
    .sod-care__grid {
        gap: 55px;
    }


    .sod-intro__title {
        font-size: 38px;
    }


    .sod-green__title,
    .sod-care__title {
        font-size: 32px;
    }


    .sod-cta {
        padding: 100px 0;
    }


    .sod-cta__title {
        font-size: 42px;
    }

}



/* =========================================================
   RESPONSIVE - TABLETTE
   ========================================================= */

@media (max-width: 860px) {

    .sod-intro,
    .sod-green,
    .sod-care {
        padding: 75px 0;
    }


    .sod-intro__grid,
    .sod-green__grid,
    .sod-care__grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .sod-intro__content,
    .sod-green__content,
    .sod-care__content {
        max-width: 680px;
    }


    .sod-intro__visual,
    .sod-green__visual,
    .sod-care__visual {
        max-width: 760px;
    }


    .sod-intro__title {
        font-size: 36px;
    }


    .sod-green__title,
    .sod-care__title {
        font-size: 30px;
    }


    .sod-cta {
        padding: 85px 0;
    }


    .sod-cta__content,
    .sod-cta__text {
        max-width: 100%;
    }


    .sod-cta__title {
        font-size: 38px;
    }

}



/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .sod-intro,
    .sod-green,
    .sod-care {
        padding: 60px 0;
    }


    .sod-intro .container,
    .sod-green .container,
    .sod-care .container,
    .sod-cta .container {
        width: min(100% - 28px, 1180px);
    }


    .sod-intro__grid,
    .sod-green__grid,
    .sod-care__grid {
        gap: 45px;
    }


    /* =====================================================
       BLOC 1
       ===================================================== */

    .sod-intro__eyebrow {
        margin-bottom: 16px;
        padding-left: 24px;

        font-size: 11px;
    }


    .sod-intro__title {
        margin-bottom: 22px;

        font-size: 30px;
        line-height: 1.05;
    }


    .sod-intro__text p {
        font-size: 15px;
        line-height: 1.1;
    }


    .sod-intro__cta {
        margin-top: 28px;
    }


    .sod-intro__visual::before {
        top: -14px;
        right: -14px;
    }


    .sod-intro__visual::after {
        left: -10px;
        bottom: -10px;

        width: 48px;
        height: 48px;
    }


    /* =====================================================
       BLOC 2
       ===================================================== */

    .sod-green__visual::before {
        left: -14px;
        bottom: -14px;
    }


    .sod-green__visual::after {
        top: -10px;
        right: -10px;

        width: 48px;
        height: 48px;
    }


    .sod-green__title {
        margin-bottom: 26px;

        font-size: 28px;
        line-height: 1.05;
    }


    .sod-green__text p {
        margin-bottom: 18px;

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


    /* =====================================================
       BLOC 3
       ===================================================== */

    .sod-care__content {
        padding-left: 20px;
    }


    .sod-care__accent {
        height: 58px;
    }


    .sod-care__title {
        margin-bottom: 26px;

        font-size: 28px;
        line-height: 1.05;
    }


    .sod-care__text p {
        font-size: 15px;
        line-height: 1.1;
    }


    .sod-care__cta {
        margin-top: 28px;
    }


    .sod-care__visual::before {
        top: -14px;
        right: -14px;
    }


    .sod-care__visual::after {
        left: -10px;
        bottom: -10px;

        width: 48px;
        height: 48px;
    }


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

    .sod-cta {
        padding: 65px 0;
    }


    .sod-cta__eyebrow {
        margin-bottom: 18px;
        padding-left: 30px;

        font-size: 11px;
    }


    .sod-cta__eyebrow::before {
        width: 18px;
    }


    .sod-cta__title {
        margin-bottom: 22px;

        font-size: 30px;
        line-height: 1.04;
    }


    .sod-cta__text p {
        margin-bottom: 18px;

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


    .sod-cta__actions {
        flex-direction: column;
        align-items: stretch;

        margin-top: 30px;
    }


    .sod-cta__button {
        width: 100%;
        min-width: 0;

        padding: 16px 18px;

        font-size: 13px;
    }

}

/* =========================================================
   PAGE TERRASSEMENT
   ========================================================= */



/* =========================================================
   BLOC 1 : INTRODUCTION
   ========================================================= */

.earthworks-intro {
    position: relative;
    padding: 95px 0 110px;
    background: #ffffff;
    overflow: hidden;
}


.earthworks-intro .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.earthworks-intro__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    align-items: center;

    gap: 78px;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.earthworks-intro__content {
    position: relative;
    z-index: 2;

    max-width: 560px;
}


/* ---------------------------------------------------------
   SURTITRE
   --------------------------------------------------------- */

.earthworks-intro__eyebrow {
    position: relative;
    display: inline-block;

    margin-bottom: 20px;
    padding-left: 28px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #c99a20;
}


.earthworks-intro__eyebrow::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 16px;
    height: 1px;

    background: #c99a20;

    transform: translateY(-50%);
}


/* ---------------------------------------------------------
   H1
   --------------------------------------------------------- */

.earthworks-intro__title {
    margin: 0 0 28px;

    font-size: 42px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.025em;

    color: #111111;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.earthworks-intro__text {
    max-width: 525px;
}


.earthworks-intro__text p {
    margin: 0 0 20px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.earthworks-intro__text p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BOUTON
   --------------------------------------------------------- */

.earthworks-intro__cta {
    position: relative;

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

    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;

    color: #111111;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.earthworks-intro__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


.earthworks-intro__cta-arrow {
    display: inline-block;

    font-size: 17px;

    transition: transform 0.3s ease;
}


.earthworks-intro__cta:hover {
    color: #c99a20;
    border-color: transparent;
}


.earthworks-intro__cta:hover::after {
    width: 100%;
}


.earthworks-intro__cta:hover .earthworks-intro__cta-arrow {
    transform: translateX(5px);
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.earthworks-intro__visual {
    position: relative;
}


.earthworks-intro__visual::before {
    content: "";

    position: absolute;

    top: -24px;
    right: -28px;

    width: 72%;
    height: 72%;

    background: #f5f5f2;

    z-index: 0;
}


.earthworks-intro__image-wrap {
    position: relative;
    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.22 / 1;

    background: #ededed;
}


.earthworks-intro__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.earthworks-intro__image-wrap:hover .earthworks-intro__image {
    transform: scale(1.025);
}


.earthworks-intro__visual::after {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 74px;
    height: 74px;

    border-left: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}



/* =========================================================
   BLOC 2 :
   LE TERRASSEMENT : UN ESSENTIEL!
   ========================================================= */

.earthworks-essential {
    position: relative;

    padding: 110px 0;

    background: #f7f7f5;

    overflow: hidden;
}


.earthworks-essential .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.earthworks-essential__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 85px;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.earthworks-essential__visual {
    position: relative;
}


.earthworks-essential__visual::before {
    content: "";

    position: absolute;

    left: -28px;
    bottom: -28px;

    width: 72%;
    height: 65%;

    background: #ffffff;

    z-index: 0;
}


.earthworks-essential__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #e9e9e7;
}


.earthworks-essential__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.earthworks-essential__image-wrap:hover .earthworks-essential__image {
    transform: scale(1.025);
}


.earthworks-essential__visual::after {
    content: "";

    position: absolute;

    top: -22px;
    right: -22px;

    width: 74px;
    height: 74px;

    border-top: 1px solid #c99a20;
    border-right: 1px solid #c99a20;

    z-index: 2;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.earthworks-essential__content {
    position: relative;

    z-index: 2;

    max-width: 540px;
}


.earthworks-essential__title {
    position: relative;

    margin: 0 0 30px;
    padding-top: 22px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.02em;

    color: #111111;
}


.earthworks-essential__title::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 42px;
    height: 2px;

    background: #c99a20;
}


.earthworks-essential__text {
    max-width: 535px;
}


.earthworks-essential__text p {
    margin: 0 0 22px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.earthworks-essential__text p:last-child {
    margin-bottom: 0;
}



/* =========================================================
   BLOC 3 :
   DES ÉQUIPEMENTS APPROPRIÉS
   ========================================================= */

.earthworks-equipment {
    position: relative;

    padding: 110px 0;

    background: #ffffff;

    overflow: hidden;
}


.earthworks-equipment .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.earthworks-equipment__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 82px;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.earthworks-equipment__content {
    position: relative;

    z-index: 2;

    max-width: 560px;

    padding-left: 28px;
}


.earthworks-equipment__accent {
    position: absolute;

    top: 3px;
    left: 0;

    width: 2px;
    height: 70px;

    background: #c99a20;
}


.earthworks-equipment__title {
    margin: 0 0 30px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.02em;

    color: #111111;
}


.earthworks-equipment__text {
    max-width: 535px;
}


.earthworks-equipment__text p {
    margin: 0 0 22px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.earthworks-equipment__text p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BOUTON
   --------------------------------------------------------- */

.earthworks-equipment__cta {
    position: relative;

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

    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.06em;

    text-transform: uppercase;
    text-decoration: none;

    color: #111111;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.earthworks-equipment__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


.earthworks-equipment__cta-arrow {
    display: inline-block;

    font-size: 17px;

    transition: transform 0.3s ease;
}


.earthworks-equipment__cta:hover {
    color: #c99a20;

    border-color: transparent;
}


.earthworks-equipment__cta:hover::after {
    width: 100%;
}


.earthworks-equipment__cta:hover .earthworks-equipment__cta-arrow {
    transform: translateX(5px);
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.earthworks-equipment__visual {
    position: relative;
}


.earthworks-equipment__visual::before {
    content: "";

    position: absolute;

    top: -28px;
    right: -28px;

    width: 70%;
    height: 68%;

    background: #f5f5f2;

    z-index: 0;
}


.earthworks-equipment__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #ededed;
}


.earthworks-equipment__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.earthworks-equipment__image-wrap:hover .earthworks-equipment__image {
    transform: scale(1.025);
}


.earthworks-equipment__visual::after {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 74px;
    height: 74px;

    border-left: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}



/* =========================================================
   CTA :
   NOUS CONTACTER
   ========================================================= */

.earthworks-cta {
    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background: #0d0d0d;
}


/* ---------------------------------------------------------
   IMAGE DE FOND
   Le fichier CSS se trouve dans le dossier CSS,
   donc on remonte d'un niveau avec ../
   --------------------------------------------------------- */

.earthworks-cta__background {
    position: absolute;

    inset: 0;

    background-image: url("../images/tr-4.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    transform: scale(1.02);
}


/* ---------------------------------------------------------
   OVERLAY SOMBRE
   --------------------------------------------------------- */

.earthworks-cta__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.76) 32%,
            rgba(0, 0, 0, 0.56) 62%,
            rgba(0, 0, 0, 0.42) 100%
        );
}


/* ---------------------------------------------------------
   CONTENEUR
   --------------------------------------------------------- */

.earthworks-cta .container {
    position: relative;

    z-index: 2;

    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.earthworks-cta__content {
    max-width: 700px;
}


/* ---------------------------------------------------------
   SURTITRE
   --------------------------------------------------------- */

.earthworks-cta__eyebrow {
    position: relative;

    display: inline-block;

    margin-bottom: 24px;
    padding-left: 38px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #c99a20;
}


.earthworks-cta__eyebrow::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 24px;
    height: 1px;

    background: #c99a20;

    transform: translateY(-50%);
}


/* ---------------------------------------------------------
   TITRE
   --------------------------------------------------------- */

.earthworks-cta__title {
    margin: 0 0 26px;

    font-size: 48px;
    font-weight: 600;
    line-height: 1.02;

    letter-spacing: -0.035em;

    color: #ffffff;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.earthworks-cta__text {
    max-width: 640px;
}


.earthworks-cta__text p {
    margin: 0 0 22px;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;

    color: rgba(255, 255, 255, 0.92);
}


.earthworks-cta__text p:last-child {
    margin-bottom: 0;

    font-weight: 600;

    color: #ffffff;
}


/* ---------------------------------------------------------
   LIENS TEXTE
   --------------------------------------------------------- */

.earthworks-cta__text a {
    color: #c99a20;

    text-decoration: none;

    border-bottom: 1px solid rgba(201, 154, 32, 0.45);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.earthworks-cta__text a:hover {
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.55);
}


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

.earthworks-cta__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 38px;
}


.earthworks-cta__button {
    display: inline-flex;

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

    gap: 22px;

    min-width: 270px;

    padding: 18px 22px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.05em;

    text-transform: uppercase;
    text-decoration: none;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* Bouton principal */

.earthworks-cta__button--primary {
    background: #c99a20;

    border: 1px solid #c99a20;

    color: #111111;
}


.earthworks-cta__button--primary:hover {
    background: #d7aa35;

    border-color: #d7aa35;

    color: #111111;

    transform: translateY(-2px);
}


/* Bouton téléphone */

.earthworks-cta__button--secondary {
    background: transparent;

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

    color: #ffffff;
}


.earthworks-cta__button--secondary:hover {
    background: rgba(255, 255, 255, 0.08);

    border-color: #c99a20;

    color: #ffffff;

    transform: translateY(-2px);
}


.earthworks-cta__button-arrow {
    display: inline-block;

    font-size: 18px;

    transition: transform 0.25s ease;
}


.earthworks-cta__button:hover .earthworks-cta__button-arrow {
    transform: translateX(4px);
}



/* =========================================================
   RESPONSIVE - 1100 PX
   ========================================================= */

@media (max-width: 1100px) {

    .earthworks-intro,
    .earthworks-essential,
    .earthworks-equipment {
        padding: 90px 0;
    }


    .earthworks-intro__grid,
    .earthworks-essential__grid,
    .earthworks-equipment__grid {
        gap: 55px;
    }


    .earthworks-intro__title {
        font-size: 38px;
    }


    .earthworks-essential__title,
    .earthworks-equipment__title {
        font-size: 32px;
    }


    .earthworks-cta {
        padding: 100px 0;
    }


    .earthworks-cta__title {
        font-size: 42px;
    }

}



/* =========================================================
   RESPONSIVE - TABLETTE
   ========================================================= */

@media (max-width: 860px) {

    .earthworks-intro,
    .earthworks-essential,
    .earthworks-equipment {
        padding: 75px 0;
    }


    .earthworks-intro__grid,
    .earthworks-essential__grid,
    .earthworks-equipment__grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .earthworks-intro__content,
    .earthworks-essential__content,
    .earthworks-equipment__content {
        max-width: 680px;
    }


    .earthworks-intro__visual,
    .earthworks-essential__visual,
    .earthworks-equipment__visual {
        max-width: 760px;
    }


    .earthworks-intro__title {
        font-size: 36px;
    }


    .earthworks-essential__title,
    .earthworks-equipment__title {
        font-size: 30px;
    }


    .earthworks-cta {
        padding: 85px 0;
    }


    .earthworks-cta__content,
    .earthworks-cta__text {
        max-width: 100%;
    }


    .earthworks-cta__title {
        font-size: 38px;
    }

}



/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .earthworks-intro,
    .earthworks-essential,
    .earthworks-equipment {
        padding: 60px 0;
    }


    .earthworks-intro .container,
    .earthworks-essential .container,
    .earthworks-equipment .container,
    .earthworks-cta .container {
        width: min(100% - 28px, 1180px);
    }


    .earthworks-intro__grid,
    .earthworks-essential__grid,
    .earthworks-equipment__grid {
        gap: 45px;
    }


    /* =====================================================
       BLOC 1
       ===================================================== */

    .earthworks-intro__eyebrow {
        margin-bottom: 16px;
        padding-left: 24px;

        font-size: 11px;
    }


    .earthworks-intro__title {
        margin-bottom: 22px;

        font-size: 30px;
        line-height: 1.05;
    }


    .earthworks-intro__text p {
        font-size: 15px;
        line-height: 1.1;
    }


    .earthworks-intro__cta {
        margin-top: 28px;
    }


    .earthworks-intro__visual::before {
        top: -14px;
        right: -14px;
    }


    .earthworks-intro__visual::after {
        left: -10px;
        bottom: -10px;

        width: 48px;
        height: 48px;
    }


    /* =====================================================
       BLOC 2
       ===================================================== */

    .earthworks-essential__visual::before {
        left: -14px;
        bottom: -14px;
    }


    .earthworks-essential__visual::after {
        top: -10px;
        right: -10px;

        width: 48px;
        height: 48px;
    }


    .earthworks-essential__title {
        margin-bottom: 26px;

        font-size: 28px;
        line-height: 1.05;
    }


    .earthworks-essential__text p {
        margin-bottom: 18px;

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


    /* =====================================================
       BLOC 3
       ===================================================== */

    .earthworks-equipment__content {
        padding-left: 20px;
    }


    .earthworks-equipment__accent {
        height: 58px;
    }


    .earthworks-equipment__title {
        margin-bottom: 26px;

        font-size: 28px;
        line-height: 1.05;
    }


    .earthworks-equipment__text p {
        font-size: 15px;
        line-height: 1.1;
    }


    .earthworks-equipment__cta {
        margin-top: 28px;
    }


    .earthworks-equipment__visual::before {
        top: -14px;
        right: -14px;
    }


    .earthworks-equipment__visual::after {
        left: -10px;
        bottom: -10px;

        width: 48px;
        height: 48px;
    }


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

    .earthworks-cta {
        padding: 65px 0;
    }


    .earthworks-cta__eyebrow {
        margin-bottom: 18px;
        padding-left: 30px;

        font-size: 11px;
    }


    .earthworks-cta__eyebrow::before {
        width: 18px;
    }


    .earthworks-cta__title {
        margin-bottom: 22px;

        font-size: 30px;
        line-height: 1.04;
    }


    .earthworks-cta__text p {
        margin-bottom: 18px;

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


    .earthworks-cta__actions {
        flex-direction: column;
        align-items: stretch;

        margin-top: 30px;
    }


    .earthworks-cta__button {
        width: 100%;
        min-width: 0;

        padding: 16px 18px;

        font-size: 13px;
    }

}


/* =========================================================
   PAGE TERRE EN VRAC
   ========================================================= */



/* =========================================================
   BLOC 1 : INTRODUCTION
   ========================================================= */


/* ---------------------------------------------------------
   SECTION PRINCIPALE
   --------------------------------------------------------- */

.soil-intro {
    position: relative;

    padding: 95px 0 110px;

    background: #ffffff;

    overflow: hidden;
}


/* ---------------------------------------------------------
   CONTENEUR PRINCIPAL
   --------------------------------------------------------- */

.soil-intro .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   GRILLE PRINCIPALE
   Texte à gauche / image à droite
   --------------------------------------------------------- */

.soil-intro__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    align-items: center;

    gap: 78px;
}


/* =========================================================
   COLONNE GAUCHE : CONTENU
   ========================================================= */

.soil-intro__content {
    position: relative;

    z-index: 2;

    max-width: 560px;
}


/* ---------------------------------------------------------
   PETIT SURTITRE
   --------------------------------------------------------- */

.soil-intro__eyebrow {
    position: relative;

    display: inline-block;

    margin-bottom: 20px;
    padding-left: 28px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #c99a20;
}


/* Petit trait doré avant le surtitre */

.soil-intro__eyebrow::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 16px;
    height: 1px;

    background: #c99a20;

    transform: translateY(-50%);
}


/* ---------------------------------------------------------
   TITRE PRINCIPAL H1
   --------------------------------------------------------- */

.soil-intro__title {
    margin: 0 0 28px;

    font-size: 42px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.025em;

    color: #111111;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.soil-intro__text {
    max-width: 525px;
}


.soil-intro__text p {
    margin: 0 0 20px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.soil-intro__text p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BOUTON DEMANDE DE SOUMISSION
   --------------------------------------------------------- */

.soil-intro__cta {
    position: relative;

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

    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.06em;

    text-transform: uppercase;
    text-decoration: none;

    color: #111111;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


/* Trait doré animé */

.soil-intro__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


/* Flèche */

.soil-intro__cta-arrow {
    display: inline-block;

    font-size: 17px;
    font-weight: 400;

    transition: transform 0.3s ease;
}


/* Effets au survol */

.soil-intro__cta:hover {
    color: #c99a20;

    border-color: transparent;
}


.soil-intro__cta:hover::after {
    width: 100%;
}


.soil-intro__cta:hover .soil-intro__cta-arrow {
    transform: translateX(5px);
}


/* =========================================================
   COLONNE DROITE : IMAGE
   ========================================================= */

.soil-intro__visual {
    position: relative;
}


/* Fond décoratif */

.soil-intro__visual::before {
    content: "";

    position: absolute;

    top: -24px;
    right: -28px;

    width: 72%;
    height: 72%;

    background: #f5f5f2;

    z-index: 0;
}


/* Conteneur image */

.soil-intro__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.22 / 1;

    background: #ededed;
}


/* Image */

.soil-intro__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


/* Léger zoom au survol */

.soil-intro__image-wrap:hover .soil-intro__image {
    transform: scale(1.025);
}


/* Petit détail doré */

.soil-intro__visual::after {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 74px;
    height: 74px;

    border-left: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}



/* =========================================================
   PAGE TERRE - BLOC 2 :
   DE LA TERRE EN VRAC POUR TOUS LES PROJETS
   ========================================================= */


/* ---------------------------------------------------------
   SECTION PRINCIPALE
   --------------------------------------------------------- */

.soil-products {
    position: relative;

    padding: 110px 0;

    background: #f7f7f5;

    overflow: hidden;
}


/* ---------------------------------------------------------
   CONTENEUR PRINCIPAL
   --------------------------------------------------------- */

.soil-products .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   GRILLE PRINCIPALE
   Deux images à gauche / contenu à droite
   --------------------------------------------------------- */

.soil-products__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    align-items: start;

    gap: 85px;
}


/* =========================================================
   COLONNE GAUCHE : LES DEUX IMAGES
   ========================================================= */

.soil-products__visual-column {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 38px;

    width: 100%;
}


/* ---------------------------------------------------------
   STYLE COMMUN DES DEUX VISUELS
   --------------------------------------------------------- */

.soil-products__visual {
    position: relative;

    width: 100%;
}


/* =========================================================
   PREMIÈRE IMAGE
   ========================================================= */

/* Fond décoratif */

.soil-products__visual--primary::before {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 70%;
    height: 65%;

    background: #ffffff;

    z-index: 0;
}


/* Détail doré */

.soil-products__visual--primary::after {
    content: "";

    position: absolute;

    top: -18px;
    right: -18px;

    width: 60px;
    height: 60px;

    border-top: 1px solid #c99a20;
    border-right: 1px solid #c99a20;

    z-index: 2;
}


/* =========================================================
   DEUXIÈME IMAGE
   ========================================================= */

.soil-products__visual--secondary {
    width: 100%;
    margin: 0;
}


/* Fond décoratif */

.soil-products__visual--secondary::before {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 70%;
    height: 65%;

    background: #ffffff;

    z-index: 0;
}


/* Détail doré */

.soil-products__visual--secondary::after {
    content: "";

    position: absolute;

    right: -18px;
    bottom: -18px;

    width: 60px;
    height: 60px;

    border-right: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}


/* =========================================================
   CONTENEURS DES DEUX IMAGES
   Même largeur + même hauteur
   ========================================================= */

.soil-products__image-wrap,
.soil-products__image-wrap--primary,
.soil-products__image-wrap--secondary {
    position: relative;

    z-index: 1;

    width: 100%;

    aspect-ratio: 1.15 / 1;

    overflow: hidden;

    background: #e9e9e7;
}


/* ---------------------------------------------------------
   IMAGES
   --------------------------------------------------------- */

.soil-products__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


/* Léger zoom au survol */

.soil-products__image-wrap:hover .soil-products__image {
    transform: scale(1.025);
}


/* =========================================================
   COLONNE DROITE : CONTENU
   ========================================================= */

.soil-products__content {
    position: relative;

    z-index: 2;
}


/* ---------------------------------------------------------
   TITRE H2
   --------------------------------------------------------- */

.soil-products__title {
    position: relative;

    margin: 0 0 30px;
    padding-top: 22px;

    max-width: 600px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.02em;

    color: #111111;
}


/* Trait doré */

.soil-products__title::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 42px;
    height: 2px;

    background: #c99a20;
}


/* ---------------------------------------------------------
   TEXTE D'INTRODUCTION
   --------------------------------------------------------- */

.soil-products__intro {
    margin-bottom: 34px;

    max-width: 620px;
}


.soil-products__intro p {
    margin: 0;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


/* =========================================================
   LISTE DES TYPES DE TERRE
   ========================================================= */

.soil-products__list {
    display: grid;

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

    column-gap: 34px;

    margin-bottom: 40px;

    border-top: 1px solid rgba(17, 17, 17, 0.12);
}


/* ---------------------------------------------------------
   CHAQUE TYPE DE TERRE
   --------------------------------------------------------- */

.soil-products__item {
    display: grid;

    grid-template-columns: 11px 1fr;

    align-items: center;

    gap: 13px;

    padding: 17px 0;

    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}


/* Petit marqueur doré */

.soil-products__marker {
    width: 6px;
    height: 6px;

    background: #c99a20;

    transform: rotate(45deg);
}


/* Texte de la liste */

.soil-products__item p {
    margin: 0;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;

    color: #111111;
}


/* =========================================================
   TEXTE DÉTAILLÉ
   ========================================================= */

.soil-products__text {
    max-width: 620px;
}


.soil-products__text p {
    margin: 0 0 24px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.soil-products__text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   MESSAGE FINAL
   ========================================================= */

.soil-products__note {
    margin-top: 38px;

    padding: 23px 0 23px 24px;

    border-left: 2px solid #c99a20;
    border-top: 1px solid rgba(17, 17, 17, 0.08);
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}


.soil-products__note p {
    margin: 0;

    max-width: 590px;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;

    color: #222222;
}


/* =========================================================
   RESPONSIVE - 1100 PX
   ========================================================= */

@media (max-width: 1100px) {

    .soil-products {
        padding: 90px 0;
    }


    .soil-products__grid {
        gap: 55px;
    }


    .soil-products__visual-column {
        gap: 32px;
    }


    .soil-products__title {
        font-size: 32px;
    }

}


/* =========================================================
   RESPONSIVE - TABLETTE
   ========================================================= */

@media (max-width: 860px) {

    .soil-products {
        padding: 75px 0;
    }


    .soil-products__grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    /* Les deux images restent de même taille
       et passent côte à côte sur tablette */

    .soil-products__visual-column {
        display: grid;

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

        gap: 28px;

        max-width: 760px;
    }


    .soil-products__visual--primary,
    .soil-products__visual--secondary {
        width: 100%;

        margin: 0;
    }


    .soil-products__image-wrap,
    .soil-products__image-wrap--primary,
    .soil-products__image-wrap--secondary {
        aspect-ratio: 1 / 1;
    }


    .soil-products__content {
        max-width: 680px;
    }


    .soil-products__title {
        font-size: 30px;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .soil-products {
        padding: 60px 0;
    }


    .soil-products .container {
        width: min(100% - 28px, 1180px);
    }


    .soil-products__grid {
        gap: 45px;
    }


    /* -----------------------------------------------------
       IMAGES
       Même dimension et l'une sous l'autre
       ----------------------------------------------------- */

    .soil-products__visual-column {
        display: flex;

        flex-direction: column;

        gap: 28px;
    }


    .soil-products__visual--primary,
    .soil-products__visual--secondary {
        width: 100%;

        margin: 0;
    }


    .soil-products__image-wrap,
    .soil-products__image-wrap--primary,
    .soil-products__image-wrap--secondary {
        aspect-ratio: 1.15 / 1;
    }


    /* Décoration première image */

    .soil-products__visual--primary::before {
        left: -12px;
        bottom: -12px;
    }


    .soil-products__visual--primary::after {
        top: -9px;
        right: -9px;

        width: 44px;
        height: 44px;
    }


    /* Décoration deuxième image */

    .soil-products__visual--secondary::before {
        left: -12px;
        bottom: -12px;
    }


    .soil-products__visual--secondary::after {
        right: -9px;
        bottom: -9px;

        width: 44px;
        height: 44px;
    }


    /* -----------------------------------------------------
       TITRE
       ----------------------------------------------------- */

    .soil-products__title {
        margin-bottom: 26px;

        font-size: 28px;
        line-height: 1.05;
    }


    /* -----------------------------------------------------
       TEXTES
       ----------------------------------------------------- */

    .soil-products__intro p,
    .soil-products__text p,
    .soil-products__note p {
        font-size: 15px;
        line-height: 1.1;
    }


    /* -----------------------------------------------------
       LISTE
       ----------------------------------------------------- */

    .soil-products__list {
        grid-template-columns: 1fr;

        margin-bottom: 34px;
    }


    .soil-products__item {
        padding: 15px 0;
    }


    .soil-products__item p {
        font-size: 15px;
        line-height: 1.1;
    }


    /* -----------------------------------------------------
       MESSAGE FINAL
       ----------------------------------------------------- */

    .soil-products__note {
        margin-top: 32px;

        padding: 20px 0 20px 18px;
    }

}



/* =========================================================
   BLOC 3 :
   UNE LIVRAISON SIMPLIFIÉE
   ========================================================= */


/* ---------------------------------------------------------
   SECTION PRINCIPALE
   --------------------------------------------------------- */

.soil-delivery {
    position: relative;

    padding: 110px 0;

    background: #ffffff;

    overflow: hidden;
}


/* ---------------------------------------------------------
   CONTENEUR
   --------------------------------------------------------- */

.soil-delivery .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   GRILLE PRINCIPALE
   Texte à gauche / image à droite
   --------------------------------------------------------- */

.soil-delivery__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 82px;
}


/* =========================================================
   COLONNE GAUCHE : CONTENU
   ========================================================= */

.soil-delivery__content {
    position: relative;

    z-index: 2;

    max-width: 560px;

    padding-left: 28px;
}


/* ---------------------------------------------------------
   TRAIT DORÉ
   --------------------------------------------------------- */

.soil-delivery__accent {
    position: absolute;

    top: 3px;
    left: 0;

    width: 2px;
    height: 70px;

    background: #c99a20;
}


/* ---------------------------------------------------------
   TITRE H2
   --------------------------------------------------------- */

.soil-delivery__title {
    margin: 0 0 30px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.02em;

    color: #111111;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.soil-delivery__text {
    max-width: 535px;
}


.soil-delivery__text p {
    margin: 0 0 22px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.soil-delivery__text p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BOUTON
   --------------------------------------------------------- */

.soil-delivery__cta {
    position: relative;

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

    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.06em;

    text-transform: uppercase;
    text-decoration: none;

    color: #111111;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


/* Trait animé */

.soil-delivery__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


/* Flèche */

.soil-delivery__cta-arrow {
    display: inline-block;

    font-size: 17px;

    transition: transform 0.3s ease;
}


/* Survol */

.soil-delivery__cta:hover {
    color: #c99a20;

    border-color: transparent;
}



.soil-delivery__cta:hover::after {
    width: 100%;
}


.soil-delivery__cta:hover .soil-delivery__cta-arrow {
    transform: translateX(5px);
}


/* =========================================================
   COLONNE DROITE : IMAGE
   ========================================================= */

.soil-delivery__visual {
    position: relative;
}


/* Fond décoratif */

.soil-delivery__visual::before {
    content: "";

    position: absolute;

    top: -28px;
    right: -28px;

    width: 70%;
    height: 68%;

    background: #f5f5f2;

    z-index: 0;
}


/* Conteneur image */

.soil-delivery__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #ededed;
}


/* Image */

.soil-delivery__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


/* Zoom */

.soil-delivery__image-wrap:hover .soil-delivery__image {
    transform: scale(1.025);
}


/* Détail doré */

.soil-delivery__visual::after {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 74px;
    height: 74px;

    border-left: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}



/* =========================================================
   BLOC 4 :
   CALL TO ACTION - POUR NOUS REJOINDRE
   ========================================================= */


/* ---------------------------------------------------------
   SECTION PRINCIPALE
   --------------------------------------------------------- */

.soil-cta {
    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background: #0d0d0d;
}


/* ---------------------------------------------------------
   IMAGE DE FOND
   Le CSS étant dans le dossier CSS,
   on remonte d'un niveau avec ../
   --------------------------------------------------------- */

.soil-cta__background {
    position: absolute;

    inset: 0;

    background-image: url("../images/terre-4.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    transform: scale(1.02);
}


/* ---------------------------------------------------------
   OVERLAY SOMBRE
   --------------------------------------------------------- */

.soil-cta__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.76) 32%,
            rgba(0, 0, 0, 0.56) 62%,
            rgba(0, 0, 0, 0.42) 100%
        );
}


/* ---------------------------------------------------------
   CONTENEUR
   --------------------------------------------------------- */

.soil-cta .container {
    position: relative;

    z-index: 2;

    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.soil-cta__content {
    max-width: 700px;
}


/* ---------------------------------------------------------
   SURTITRE
   --------------------------------------------------------- */

.soil-cta__eyebrow {
    position: relative;

    display: inline-block;

    margin-bottom: 24px;
    padding-left: 38px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #c99a20;
}


/* Petit trait doré */

.soil-cta__eyebrow::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 24px;
    height: 1px;

    background: #c99a20;

    transform: translateY(-50%);
}


/* ---------------------------------------------------------
   TITRE CTA
   --------------------------------------------------------- */

.soil-cta__title {
    margin: 0 0 26px;

    font-size: 48px;
    font-weight: 600;
    line-height: 1.02;

    letter-spacing: -0.035em;

    color: #ffffff;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.soil-cta__text {
    max-width: 640px;
}


.soil-cta__text p {
    margin: 0 0 22px;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;

    color: rgba(255, 255, 255, 0.92);
}


.soil-cta__text p:last-child {
    margin-bottom: 0;

    font-weight: 600;

    color: #ffffff;
}


/* ---------------------------------------------------------
   LIENS DANS LE TEXTE
   --------------------------------------------------------- */

.soil-cta__text a {
    color: #c99a20;

    text-decoration: none;

    border-bottom: 1px solid rgba(201, 154, 32, 0.45);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.soil-cta__text a:hover {
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.55);
}


/* =========================================================
   BOUTONS DU CTA
   ========================================================= */

.soil-cta__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 38px;
}


/* Style commun */

.soil-cta__button {
    display: inline-flex;

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

    gap: 22px;

    min-width: 270px;

    padding: 18px 22px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.05em;

    text-transform: uppercase;
    text-decoration: none;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* ---------------------------------------------------------
   BOUTON PRINCIPAL
   --------------------------------------------------------- */

.soil-cta__button--primary {
    background: #c99a20;

    border: 1px solid #c99a20;

    color: #111111;
}


.soil-cta__button--primary:hover {
    background: #d7aa35;

    border-color: #d7aa35;

    color: #111111;

    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   BOUTON TÉLÉPHONE
   --------------------------------------------------------- */

.soil-cta__button--secondary {
    background: transparent;

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

    color: #ffffff;
}


.soil-cta__button--secondary:hover {
    background: rgba(255, 255, 255, 0.08);

    border-color: #c99a20;

    color: #ffffff;

    transform: translateY(-2px);
}


/* Flèche */

.soil-cta__button-arrow {
    display: inline-block;

    font-size: 18px;

    transition: transform 0.25s ease;
}


.soil-cta__button:hover .soil-cta__button-arrow {
    transform: translateX(4px);
}



/* =========================================================
   RESPONSIVE - ÉCRANS MOYENS
   1100 PX ET MOINS
   ========================================================= */

@media (max-width: 1100px) {

    /* Sections principales */

    .soil-intro,
    .soil-products,
    .soil-delivery {
        padding: 90px 0;
    }


    /* Grilles */

    .soil-intro__grid,
    .soil-products__grid,
    .soil-delivery__grid {
        gap: 55px;
    }


    /* H1 */

    .soil-intro__title {
        font-size: 38px;
    }


    /* H2 */

    .soil-products__title,
    .soil-delivery__title {
        font-size: 32px;
    }


    /* Deux images bloc 2 */

    .soil-products__visual-column {
        gap: 44px;
    }


    /* CTA */

    .soil-cta {
        padding: 100px 0;
    }


    .soil-cta__title {
        font-size: 42px;
    }

}



/* =========================================================
   RESPONSIVE - TABLETTE
   860 PX ET MOINS
   ========================================================= */

@media (max-width: 860px) {

    /* -----------------------------------------------------
       SECTIONS
       ----------------------------------------------------- */

    .soil-intro,
    .soil-products,
    .soil-delivery {
        padding: 75px 0;
    }


    /* -----------------------------------------------------
       GRILLES SUR UNE COLONNE
       ----------------------------------------------------- */

    .soil-intro__grid,
    .soil-products__grid,
    .soil-delivery__grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    /* =====================================================
       BLOC 1
       ===================================================== */

    .soil-intro__content {
        max-width: 680px;
    }


    .soil-intro__visual {
        max-width: 760px;
    }


    .soil-intro__title {
        font-size: 36px;
    }


    /* =====================================================
       BLOC 2
       Deux images côte à côte sur tablette
       ===================================================== */

    .soil-products__visual-column {
        display: grid;

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, 0.85fr);

        align-items: end;

        gap: 28px;

        max-width: 760px;
    }


    .soil-products__visual--secondary {
        width: 100%;

        margin-left: 0;
    }


    .soil-products__image-wrap--primary {
        aspect-ratio: 1.15 / 1;
    }


    .soil-products__image-wrap--secondary {
        aspect-ratio: 1 / 1;
    }


    .soil-products__content {
        max-width: 680px;
    }


    .soil-products__title {
        font-size: 30px;
    }


    /* =====================================================
       BLOC 3
       ===================================================== */

    .soil-delivery__content {
        max-width: 680px;
    }


    .soil-delivery__visual {
        max-width: 760px;
    }


    .soil-delivery__title {
        font-size: 30px;
    }


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

    .soil-cta {
        padding: 85px 0;
    }


    .soil-cta__content,
    .soil-cta__text {
        max-width: 100%;
    }


    .soil-cta__title {
        font-size: 38px;
    }

}



/* =========================================================
   RESPONSIVE - MOBILE
   576 PX ET MOINS
   ========================================================= */

@media (max-width: 576px) {

    /* -----------------------------------------------------
       SECTIONS
       ----------------------------------------------------- */

    .soil-intro,
    .soil-products,
    .soil-delivery {
        padding: 60px 0;
    }


    /* -----------------------------------------------------
       CONTENEURS
       ----------------------------------------------------- */

    .soil-intro .container,
    .soil-products .container,
    .soil-delivery .container,
    .soil-cta .container {
        width: min(100% - 28px, 1180px);
    }


    /* -----------------------------------------------------
       GRILLES
       ----------------------------------------------------- */

    .soil-intro__grid,
    .soil-products__grid,
    .soil-delivery__grid {
        gap: 45px;
    }


    /* =====================================================
       BLOC 1
       ===================================================== */

    .soil-intro__eyebrow {
        margin-bottom: 16px;
        padding-left: 24px;

        font-size: 11px;
    }


    .soil-intro__title {
        margin-bottom: 22px;

        font-size: 30px;
        line-height: 1.05;
    }


    .soil-intro__text p {
        font-size: 15px;
        line-height: 1.1;
    }


    .soil-intro__cta {
        margin-top: 28px;
    }


    /* Décoration image */

    .soil-intro__visual::before {
        top: -14px;
        right: -14px;
    }


    .soil-intro__visual::after {
        left: -10px;
        bottom: -10px;

        width: 48px;
        height: 48px;
    }


    /* =====================================================
       BLOC 2
       ===================================================== */

    /* Images l'une sous l'autre */

    .soil-products__visual-column {
        display: flex;

        flex-direction: column;

        gap: 30px;
    }


    /* Deuxième image légèrement plus étroite */

    .soil-products__visual--secondary {
        width: 100%;

        margin-left: auto;
    }


    /* Ratios images */

    .soil-products__image-wrap--primary {
        aspect-ratio: 1.15 / 1;
    }


    .soil-products__image-wrap--secondary {
        aspect-ratio: 1.3 / 1;
    }


    /* Décorations première image */

    .soil-products__visual--primary::before {
        left: -14px;
        bottom: -14px;
    }


    .soil-products__visual--primary::after {
        top: -10px;
        right: -10px;

        width: 48px;
        height: 48px;
    }


    /* Décorations deuxième image */

    .soil-products__visual--secondary::before {
        top: -12px;
        left: -12px;
    }


    .soil-products__visual--secondary::after {
        right: -8px;
        bottom: -8px;

        width: 40px;
        height: 40px;
    }


    /* Titre */

    .soil-products__title {
        margin-bottom: 26px;

        font-size: 28px;
        line-height: 1.05;
    }


    /* Texte */

    .soil-products__intro p,
    .soil-products__text p,
    .soil-products__note p {
        font-size: 15px;
        line-height: 1.1;
    }


    /* Liste sur une colonne */

    .soil-products__list {
        grid-template-columns: 1fr;

        margin-bottom: 34px;
    }


    .soil-products__item {
        padding: 15px 0;
    }


    .soil-products__item p {
        font-size: 15px;
        line-height: 1.1;
    }


    /* Message final */

    .soil-products__note {
        margin-top: 32px;

        padding: 20px 0 20px 18px;
    }


    /* =====================================================
       BLOC 3
       ===================================================== */

    .soil-delivery__content {
        padding-left: 20px;
    }


    .soil-delivery__accent {
        height: 58px;
    }


    .soil-delivery__title {
        margin-bottom: 26px;

        font-size: 28px;
        line-height: 1.05;
    }


    .soil-delivery__text p {
        font-size: 15px;
        line-height: 1.1;
    }


    .soil-delivery__cta {
        margin-top: 28px;
    }


    /* Décoration image */

    .soil-delivery__visual::before {
        top: -14px;
        right: -14px;
    }


    .soil-delivery__visual::after {
        left: -10px;
        bottom: -10px;

        width: 48px;
        height: 48px;
    }


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

    .soil-cta {
        padding: 65px 0;
    }


    /* Surtitre */

    .soil-cta__eyebrow {
        margin-bottom: 18px;
        padding-left: 30px;

        font-size: 11px;
    }


    .soil-cta__eyebrow::before {
        width: 18px;
    }


    /* Titre */

    .soil-cta__title {
        margin-bottom: 22px;

        font-size: 30px;
        line-height: 1.04;
    }


    /* Texte */

    .soil-cta__text p {
        margin-bottom: 18px;

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


    /* Boutons l'un sous l'autre */

    .soil-cta__actions {
        flex-direction: column;
        align-items: stretch;

        margin-top: 30px;
    }


    .soil-cta__button {
        width: 100%;
        min-width: 0;

        padding: 16px 18px;

        font-size: 13px;
    }

}

/* =========================================================
   PAGE LOCATION DE REMORQUE
   ========================================================= */



/* =========================================================
   BLOC 1 : INTRODUCTION
   ========================================================= */


/* ---------------------------------------------------------
   SECTION PRINCIPALE
   --------------------------------------------------------- */

.trailer-intro {
    position: relative;

    padding: 95px 0 110px;

    background: #ffffff;

    overflow: hidden;
}


/* ---------------------------------------------------------
   CONTENEUR
   --------------------------------------------------------- */

.trailer-intro .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   GRILLE PRINCIPALE
   --------------------------------------------------------- */

.trailer-intro__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    align-items: center;

    gap: 78px;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.trailer-intro__content {
    position: relative;

    z-index: 2;

    max-width: 560px;
}


/* ---------------------------------------------------------
   SURTITRE
   --------------------------------------------------------- */

.trailer-intro__eyebrow {
    position: relative;

    display: inline-block;

    margin-bottom: 20px;
    padding-left: 28px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #c99a20;
}


.trailer-intro__eyebrow::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 16px;
    height: 1px;

    background: #c99a20;

    transform: translateY(-50%);
}


/* ---------------------------------------------------------
   H1
   --------------------------------------------------------- */

.trailer-intro__title {
    margin: 0 0 28px;

    font-size: 42px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.025em;

    color: #111111;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.trailer-intro__text {
    max-width: 525px;
}


.trailer-intro__text p {
    margin: 0 0 20px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.trailer-intro__text p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BOUTON
   --------------------------------------------------------- */

.trailer-intro__cta {
    position: relative;

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

    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.06em;

    text-transform: uppercase;
    text-decoration: none;

    color: #111111;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.trailer-intro__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


.trailer-intro__cta-arrow {
    display: inline-block;

    font-size: 17px;

    transition: transform 0.3s ease;
}


.trailer-intro__cta:hover {
    color: #c99a20;

    border-color: transparent;
}


.trailer-intro__cta:hover::after {
    width: 100%;
}


.trailer-intro__cta:hover .trailer-intro__cta-arrow {
    transform: translateX(5px);
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.trailer-intro__visual {
    position: relative;
}


.trailer-intro__visual::before {
    content: "";

    position: absolute;

    top: -24px;
    right: -28px;

    width: 72%;
    height: 72%;

    background: #f5f5f2;

    z-index: 0;
}


.trailer-intro__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.22 / 1;

    background: #ededed;
}


.trailer-intro__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.trailer-intro__image-wrap:hover .trailer-intro__image {
    transform: scale(1.025);
}


.trailer-intro__visual::after {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 74px;
    height: 74px;

    border-left: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}



/* =========================================================
   BLOC 2 : UNE REMORQUE ADAPTÉE À VOS BESOINS
   ========================================================= */

.trailer-models {
    position: relative;

    padding: 110px 0;

    background: #f7f7f5;

    overflow: hidden;
}


.trailer-models .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.trailer-models__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 85px;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.trailer-models__visual {
    position: relative;
}


.trailer-models__visual::before {
    content: "";

    position: absolute;

    left: -28px;
    bottom: -28px;

    width: 72%;
    height: 65%;

    background: #ffffff;

    z-index: 0;
}


.trailer-models__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #e9e9e7;
}


.trailer-models__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.trailer-models__image-wrap:hover .trailer-models__image {
    transform: scale(1.025);
}


.trailer-models__visual::after {
    content: "";

    position: absolute;

    top: -22px;
    right: -22px;

    width: 74px;
    height: 74px;

    border-top: 1px solid #c99a20;
    border-right: 1px solid #c99a20;

    z-index: 2;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.trailer-models__content {
    position: relative;

    z-index: 2;

    max-width: 540px;
}


.trailer-models__title {
    position: relative;

    margin: 0 0 30px;
    padding-top: 22px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.02em;

    color: #111111;
}


.trailer-models__title::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 42px;
    height: 2px;

    background: #c99a20;
}


.trailer-models__intro {
    margin-bottom: 35px;
}


.trailer-models__intro p {
    margin: 0;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


/* ---------------------------------------------------------
   LISTE DES REMORQUES
   --------------------------------------------------------- */

.trailer-models__list {
    margin-bottom: 36px;

    border-top: 1px solid rgba(17, 17, 17, 0.12);
}


.trailer-models__item {
    display: grid;

    grid-template-columns: 12px 1fr;

    gap: 16px;

    align-items: center;

    padding: 18px 0;

    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}


.trailer-models__marker {
    display: block;

    width: 6px;
    height: 6px;

    background: #c99a20;

    transform: rotate(45deg);
}


.trailer-models__item p {
    margin: 0;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;

    color: #111111;
}


/* ---------------------------------------------------------
   TEXTE FINAL
   --------------------------------------------------------- */

.trailer-models__footer-text {
    padding-left: 20px;

    border-left: 1px solid #c99a20;
}


.trailer-models__footer-text p {
    margin: 0;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}



/* =========================================================
   BLOC 3 : DES REMORQUES SÉCURITAIRES
   ========================================================= */

.trailer-safety {
    position: relative;

    padding: 110px 0;

    background: #ffffff;

    overflow: hidden;
}


.trailer-safety .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.trailer-safety__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 82px;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.trailer-safety__content {
    position: relative;

    z-index: 2;

    max-width: 560px;

    padding-left: 28px;
}


.trailer-safety__accent {
    position: absolute;

    top: 3px;
    left: 0;

    width: 2px;
    height: 74px;

    background: #c99a20;
}


.trailer-safety__title {
    margin: 0 0 32px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.02em;

    color: #111111;
}


.trailer-safety__text {
    max-width: 535px;
}


.trailer-safety__text p {
    margin: 0 0 22px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


.trailer-safety__text p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BOUTON
   --------------------------------------------------------- */

.trailer-safety__cta {
    position: relative;

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

    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.06em;

    text-transform: uppercase;
    text-decoration: none;

    color: #111111;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.trailer-safety__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


.trailer-safety__cta-arrow {
    font-size: 17px;

    transition: transform 0.3s ease;
}


.trailer-safety__cta:hover {
    color: #c99a20;

    border-color: transparent;
}


.trailer-safety__cta:hover::after {
    width: 100%;
}


.trailer-safety__cta:hover .trailer-safety__cta-arrow {
    transform: translateX(5px);
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.trailer-safety__visual {
    position: relative;
}


.trailer-safety__visual::before {
    content: "";

    position: absolute;

    top: -28px;
    right: -28px;

    width: 70%;
    height: 68%;

    background: #f5f5f2;

    z-index: 0;
}


.trailer-safety__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #ededed;
}


.trailer-safety__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


.trailer-safety__image-wrap:hover .trailer-safety__image {
    transform: scale(1.025);
}


.trailer-safety__visual::after {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 74px;
    height: 74px;

    border-left: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}



/* =========================================================
   CTA : RÉSERVEZ VOTRE REMORQUE
   ========================================================= */

.trailer-cta {
    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background: #0d0d0d;
}


/* ---------------------------------------------------------
   IMAGE DE FOND
   Le CSS se trouve dans le dossier CSS :
   on remonte donc d'un niveau avec ../
   --------------------------------------------------------- */

.trailer-cta__background {
    position: absolute;

    inset: 0;

    background-image: url("../images/location-4.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    transform: scale(1.02);
}


/* ---------------------------------------------------------
   OVERLAY SOMBRE
   --------------------------------------------------------- */

.trailer-cta__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.76) 32%,
            rgba(0, 0, 0, 0.56) 62%,
            rgba(0, 0, 0, 0.42) 100%
        );
}


/* ---------------------------------------------------------
   CONTENEUR
   --------------------------------------------------------- */

.trailer-cta .container {
    position: relative;

    z-index: 2;

    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.trailer-cta__content {
    max-width: 700px;
}


/* ---------------------------------------------------------
   SURTITRE
   --------------------------------------------------------- */

.trailer-cta__eyebrow {
    position: relative;

    display: inline-block;

    margin-bottom: 24px;
    padding-left: 38px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #c99a20;
}


.trailer-cta__eyebrow::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 24px;
    height: 1px;

    background: #c99a20;

    transform: translateY(-50%);
}


/* ---------------------------------------------------------
   TITRE
   --------------------------------------------------------- */

.trailer-cta__title {
    margin: 0 0 26px;

    font-size: 48px;
    font-weight: 600;
    line-height: 1.02;

    letter-spacing: -0.035em;

    color: #ffffff;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.trailer-cta__text {
    max-width: 620px;
}


.trailer-cta__text p {
    margin: 0 0 22px;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;

    color: rgba(255, 255, 255, 0.92);
}


.trailer-cta__text p:last-child {
    margin-bottom: 0;

    font-weight: 600;

    color: #ffffff;
}


/* ---------------------------------------------------------
   LIENS DU TEXTE
   --------------------------------------------------------- */

.trailer-cta__text a {
    color: #c99a20;

    text-decoration: none;

    border-bottom: 1px solid rgba(201, 154, 32, 0.45);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.trailer-cta__text a:hover {
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.55);
}


/* ---------------------------------------------------------
   BOUTONS
   --------------------------------------------------------- */

.trailer-cta__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 38px;
}


.trailer-cta__button {
    display: inline-flex;

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

    gap: 22px;

    min-width: 270px;

    padding: 18px 22px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.05em;

    text-transform: uppercase;
    text-decoration: none;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* Bouton principal */

.trailer-cta__button--primary {
    background: #c99a20;

    border: 1px solid #c99a20;

    color: #111111;
}


.trailer-cta__button--primary:hover {
    background: #d7aa35;

    border-color: #d7aa35;

    color: #111111;

    transform: translateY(-2px);
}


/* Bouton téléphone */

.trailer-cta__button--secondary {
    background: transparent;

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

    color: #ffffff;
}


.trailer-cta__button--secondary:hover {
    background: rgba(255, 255, 255, 0.08);

    border-color: #c99a20;

    color: #ffffff;

    transform: translateY(-2px);
}


.trailer-cta__button-arrow {
    display: inline-block;

    font-size: 18px;

    transition: transform 0.25s ease;
}


.trailer-cta__button:hover .trailer-cta__button-arrow {
    transform: translateX(4px);
}



/* =========================================================
   RESPONSIVE - 1100 PX
   ========================================================= */

@media (max-width: 1100px) {

    .trailer-intro,
    .trailer-models,
    .trailer-safety {
        padding: 90px 0;
    }


    .trailer-intro__grid,
    .trailer-models__grid,
    .trailer-safety__grid {
        gap: 55px;
    }


    .trailer-intro__title {
        font-size: 38px;
    }


    .trailer-models__title,
    .trailer-safety__title {
        font-size: 32px;
    }


    .trailer-cta {
        padding: 100px 0;
    }


    .trailer-cta__title {
        font-size: 42px;
    }

}



/* =========================================================
   RESPONSIVE - TABLETTE
   ========================================================= */

@media (max-width: 860px) {

    .trailer-intro,
    .trailer-models,
    .trailer-safety {
        padding: 75px 0;
    }


    .trailer-intro__grid,
    .trailer-models__grid,
    .trailer-safety__grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .trailer-intro__content,
    .trailer-models__content,
    .trailer-safety__content {
        max-width: 680px;
    }


    .trailer-intro__title {
        font-size: 36px;
    }


    .trailer-models__title,
    .trailer-safety__title {
        font-size: 30px;
    }


    .trailer-intro__visual,
    .trailer-models__visual,
    .trailer-safety__visual {
        max-width: 760px;
    }


    .trailer-cta {
        padding: 85px 0;
    }


    .trailer-cta__content,
    .trailer-cta__text {
        max-width: 100%;
    }


    .trailer-cta__title {
        font-size: 38px;
    }

}



/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .trailer-intro,
    .trailer-models,
    .trailer-safety {
        padding: 60px 0;
    }


    .trailer-intro .container,
    .trailer-models .container,
    .trailer-safety .container,
    .trailer-cta .container {
        width: min(100% - 28px, 1180px);
    }


    .trailer-intro__grid,
    .trailer-models__grid,
    .trailer-safety__grid {
        gap: 45px;
    }


    .trailer-intro__eyebrow {
        margin-bottom: 16px;
        padding-left: 24px;

        font-size: 11px;
    }


    .trailer-intro__title {
        margin-bottom: 22px;

        font-size: 30px;
        line-height: 1.05;
    }


    .trailer-intro__text p,
    .trailer-models__intro p,
    .trailer-models__footer-text p,
    .trailer-safety__text p {
        font-size: 15px;
        line-height: 1.1;
    }


    .trailer-models__title,
    .trailer-safety__title {
        font-size: 28px;
        line-height: 1.05;
    }


    .trailer-models__item p {
        font-size: 15px;
        line-height: 1.1;
    }


    .trailer-safety__content {
        padding-left: 20px;
    }


    .trailer-safety__accent {
        height: 58px;
    }


    .trailer-intro__visual::before,
    .trailer-safety__visual::before {
        top: -14px;
        right: -14px;
    }


    .trailer-models__visual::before {
        left: -14px;
        bottom: -14px;
    }


    .trailer-intro__visual::after,
    .trailer-safety__visual::after {
        left: -10px;
        bottom: -10px;

        width: 48px;
        height: 48px;
    }


    .trailer-models__visual::after {
        top: -10px;
        right: -10px;

        width: 48px;
        height: 48px;
    }


    /* CTA */

    .trailer-cta {
        padding: 65px 0;
    }


    .trailer-cta__eyebrow {
        margin-bottom: 18px;
        padding-left: 30px;

        font-size: 11px;
    }


    .trailer-cta__eyebrow::before {
        width: 18px;
    }


    .trailer-cta__title {
        margin-bottom: 22px;

        font-size: 30px;
        line-height: 1.04;
    }


    .trailer-cta__text p {
        margin-bottom: 18px;

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


    .trailer-cta__actions {
        flex-direction: column;
        align-items: stretch;

        margin-top: 30px;
    }


    .trailer-cta__button {
        width: 100%;
        min-width: 0;

        padding: 16px 18px;

        font-size: 13px;
    }

}

/* =========================================================
   PAGE DÉNEIGEMENT - BLOC 1 : INTRODUCTION
   ========================================================= */


/* ---------------------------------------------------------
   SECTION PRINCIPALE
   --------------------------------------------------------- */

.snow-intro {
    position: relative;
    padding: 95px 0 110px;
    background: #ffffff;
    overflow: hidden;
}


/* ---------------------------------------------------------
   CONTENEUR
   --------------------------------------------------------- */

.snow-intro .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   GRILLE PRINCIPALE
   Texte à gauche / image à droite
   --------------------------------------------------------- */

.snow-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: 78px;
}


/* =========================================================
   COLONNE GAUCHE : CONTENU
   ========================================================= */

.snow-intro__content {
    position: relative;
    z-index: 2;
    max-width: 560px;
}


/* ---------------------------------------------------------
   PETIT SLOGAN AU-DESSUS DU H1
   --------------------------------------------------------- */

.snow-intro__eyebrow {
    position: relative;
    display: inline-block;

    margin-bottom: 20px;
    padding-left: 28px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #c99a20;
}


/* Petit trait doré avant le slogan */

.snow-intro__eyebrow::before {
    content: "";
    position: absolute;

    top: 50%;
    left: 0;

    width: 16px;
    height: 1px;

    background: #c99a20;

    transform: translateY(-50%);
}


/* ---------------------------------------------------------
   TITRE PRINCIPAL H1
   --------------------------------------------------------- */

.snow-intro__title {
    margin: 0 0 28px;

    font-size: 42px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.025em;

    color: #111111;
}


/* ---------------------------------------------------------
   TEXTE D'INTRODUCTION
   --------------------------------------------------------- */

.snow-intro__text {
    max-width: 525px;
}

.snow-intro__text p {
    margin: 0;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


/* ---------------------------------------------------------
   BOUTON DEMANDE DE SOUMISSION
   --------------------------------------------------------- */

.snow-intro__cta {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    color: #111111;
    text-decoration: none;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


/* Trait doré animé sous le bouton */

.snow-intro__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


/* Flèche du bouton */

.snow-intro__cta-arrow {
    display: inline-block;

    font-size: 17px;
    font-weight: 400;

    transform: translateX(0);

    transition: transform 0.3s ease;
}


/* Effet au survol */

.snow-intro__cta:hover {
    color: #c99a20;
    border-color: transparent;
}

.snow-intro__cta:hover::after {
    width: 100%;
}

.snow-intro__cta:hover .snow-intro__cta-arrow {
    transform: translateX(5px);
}


/* =========================================================
   COLONNE DROITE : IMAGE
   ========================================================= */

.snow-intro__visual {
    position: relative;
}


/* Fond décoratif clair derrière l'image */

.snow-intro__visual::before {
    content: "";

    position: absolute;

    top: -24px;
    right: -28px;

    width: 72%;
    height: 72%;

    background: #f5f5f2;

    z-index: 0;
}


/* ---------------------------------------------------------
   CONTENEUR DE L'IMAGE
   --------------------------------------------------------- */

.snow-intro__image-wrap {
    position: relative;
    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.22 / 1;

    background: #ededed;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.snow-intro__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


/* Léger zoom au survol */

.snow-intro__image-wrap:hover .snow-intro__image {
    transform: scale(1.025);
}


/* ---------------------------------------------------------
   PETIT DÉTAIL DORÉ SOUS L'IMAGE
   --------------------------------------------------------- */

.snow-intro__visual::after {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 74px;
    height: 74px;

    border-left: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}


/* =========================================================
   RESPONSIVE - ÉCRANS MOYENS
   ========================================================= */

@media (max-width: 1100px) {

    .snow-intro {
        padding: 80px 0 90px;
    }

    .snow-intro__grid {
        gap: 50px;
    }

    .snow-intro__title {
        font-size: 38px;
        line-height: 1.05;
    }

}


/* =========================================================
   RESPONSIVE - TABLETTE
   ========================================================= */

@media (max-width: 860px) {

    .snow-intro {
        padding: 65px 0 75px;
    }

    .snow-intro__grid {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .snow-intro__content {
        max-width: 680px;
    }

    .snow-intro__text {
        max-width: 650px;
    }

    .snow-intro__title {
        font-size: 36px;
        line-height: 1.05;
    }

    .snow-intro__visual {
        max-width: 760px;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .snow-intro {
        padding: 50px 0 60px;
    }

    .snow-intro .container {
        width: min(100% - 28px, 1180px);
    }

    .snow-intro__eyebrow {
        margin-bottom: 16px;
        padding-left: 24px;

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

    .snow-intro__title {
        margin-bottom: 22px;

        font-size: 30px;
        line-height: 1.05;
    }

    .snow-intro__text p {
        font-size: 15px;
        line-height: 1.1;
    }

    .snow-intro__cta {
        margin-top: 28px;
        line-height: 1.1;
    }

    .snow-intro__visual::before {
        top: -14px;
        right: -14px;
    }

    .snow-intro__visual::after {
        left: -10px;
        bottom: -10px;

        width: 48px;
        height: 48px;
    }

}


/* =========================================================
   PAGE DÉNEIGEMENT - BLOC 2 : DES SERVICES ADAPTÉS
   ========================================================= */


/* ---------------------------------------------------------
   SECTION PRINCIPALE
   --------------------------------------------------------- */

.snow-services {
    position: relative;

    padding: 110px 0;

    background: #f7f7f5;

    overflow: hidden;
}


/* ---------------------------------------------------------
   CONTENEUR PRINCIPAL
   --------------------------------------------------------- */

.snow-services .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   GRILLE PRINCIPALE
   Image à gauche / contenu à droite
   --------------------------------------------------------- */

.snow-services__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 85px;
}


/* =========================================================
   COLONNE GAUCHE : IMAGE
   ========================================================= */

.snow-services__visual {
    position: relative;
}


/* ---------------------------------------------------------
   ÉLÉMENT DÉCORATIF DERRIÈRE L'IMAGE
   --------------------------------------------------------- */

.snow-services__visual::before {
    content: "";

    position: absolute;

    left: -28px;
    bottom: -28px;

    width: 72%;
    height: 65%;

    background: #ffffff;

    z-index: 0;
}


/* ---------------------------------------------------------
   CONTENEUR DE L'IMAGE
   --------------------------------------------------------- */

.snow-services__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #e9e9e7;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.snow-services__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


/* Léger mouvement au survol */

.snow-services__image-wrap:hover .snow-services__image {
    transform: scale(1.025);
}


/* ---------------------------------------------------------
   DÉTAIL DORÉ SUR L'IMAGE
   --------------------------------------------------------- */

.snow-services__visual::after {
    content: "";

    position: absolute;

    top: -22px;
    right: -22px;

    width: 74px;
    height: 74px;

    border-top: 1px solid #c99a20;
    border-right: 1px solid #c99a20;

    z-index: 2;
}


/* =========================================================
   COLONNE DROITE : CONTENU
   ========================================================= */

.snow-services__content {
    position: relative;

    z-index: 2;

    max-width: 535px;
}


/* ---------------------------------------------------------
   TITRE H2
   --------------------------------------------------------- */

.snow-services__title {
    position: relative;

    margin: 0 0 30px;

    padding-top: 22px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: #111111;
}


/* Petit trait doré au-dessus du titre */

.snow-services__title::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 42px;
    height: 2px;

    background: #c99a20;
}


/* ---------------------------------------------------------
   TEXTE D'INTRODUCTION
   --------------------------------------------------------- */

.snow-services__intro {
    margin-bottom: 35px;
}


.snow-services__intro p {
    margin: 0;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


/* =========================================================
   LISTE DES SERVICES
   ========================================================= */

.snow-services__list {
    position: relative;

    margin-bottom: 36px;

    border-top: 1px solid rgba(17, 17, 17, 0.12);
}


/* ---------------------------------------------------------
   CHAQUE SERVICE
   --------------------------------------------------------- */

.snow-services__item {
    position: relative;

    display: grid;

    grid-template-columns: 12px 1fr;

    gap: 16px;

    align-items: start;

    padding: 18px 0;

    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}


/* ---------------------------------------------------------
   PETIT REPÈRE DORÉ
   --------------------------------------------------------- */

.snow-services__marker {
    display: block;

    width: 6px;
    height: 6px;

    margin-top: 5px;

    background: #c99a20;

    transform: rotate(45deg);
}


/* ---------------------------------------------------------
   TEXTE DES SERVICES
   --------------------------------------------------------- */

.snow-services__item p {
    margin: 0;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


/* Nom du service */

.snow-services__item strong {
    font-weight: 700;

    color: #111111;
}


/* =========================================================
   TEXTE DE FIN DU BLOC
   ========================================================= */

.snow-services__footer-text {
    position: relative;

    padding-left: 20px;

    border-left: 1px solid #c99a20;
}


.snow-services__footer-text p {
    margin: 0;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


/* =========================================================
   RESPONSIVE - ÉCRANS MOYENS
   ========================================================= */

@media (max-width: 1100px) {

    .snow-services {
        padding: 90px 0;
    }


    .snow-services__grid {
        gap: 55px;
    }


    .snow-services__title {
        font-size: 32px;
    }

}


/* =========================================================
   RESPONSIVE - TABLETTE
   ========================================================= */

@media (max-width: 860px) {

    .snow-services {
        padding: 75px 0;
    }


    .snow-services__grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .snow-services__visual {
        max-width: 760px;
    }


    .snow-services__content {
        max-width: 680px;
    }


    .snow-services__title {
        font-size: 30px;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .snow-services {
        padding: 60px 0;
    }


    .snow-services .container {
        width: min(100% - 28px, 1180px);
    }


    .snow-services__grid {
        gap: 45px;
    }


    .snow-services__visual::before {
        left: -14px;
        bottom: -14px;
    }


    .snow-services__visual::after {
        top: -10px;
        right: -10px;

        width: 48px;
        height: 48px;
    }


    .snow-services__title {
        margin-bottom: 25px;

        font-size: 28px;
        line-height: 1.05;
    }


    .snow-services__intro {
        margin-bottom: 28px;
    }


    .snow-services__intro p,
    .snow-services__footer-text p {
        font-size: 15px;
        line-height: 1.1;
    }


    .snow-services__item {
        grid-template-columns: 10px 1fr;

        gap: 13px;

        padding: 16px 0;
    }


    .snow-services__item p {
        font-size: 15px;
        line-height: 1.1;
    }


    .snow-services__footer-text {
        padding-left: 16px;
    }

}


/* =========================================================
   PAGE DÉNEIGEMENT - BLOC 3 :
   LES AVANTAGES DU DÉNEIGEMENT PROFESSIONNEL
   ========================================================= */


/* ---------------------------------------------------------
   SECTION PRINCIPALE
   --------------------------------------------------------- */

.snow-benefits {
    position: relative;

    padding: 110px 0;

    background: #ffffff;

    overflow: hidden;
}


/* ---------------------------------------------------------
   CONTENEUR PRINCIPAL
   --------------------------------------------------------- */

.snow-benefits .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   GRILLE PRINCIPALE
   Contenu à gauche / image à droite
   --------------------------------------------------------- */

.snow-benefits__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 82px;
}


/* =========================================================
   COLONNE GAUCHE : CONTENU
   ========================================================= */

.snow-benefits__content {
    position: relative;

    z-index: 2;

    max-width: 560px;

    padding-left: 28px;
}


/* ---------------------------------------------------------
   TRAIT VERTICAL DORÉ
   --------------------------------------------------------- */

.snow-benefits__accent {
    position: absolute;

    top: 3px;
    left: 0;

    width: 2px;
    height: 74px;

    background: #c99a20;
}


/* ---------------------------------------------------------
   TITRE H2
   --------------------------------------------------------- */

.snow-benefits__title {
    margin: 0 0 32px;

    max-width: 520px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: #111111;
}


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

.snow-benefits__text {
    max-width: 535px;
}


/* ---------------------------------------------------------
   PARAGRAPHES
   --------------------------------------------------------- */

.snow-benefits__text p {
    margin: 0 0 22px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


/* Supprime la marge du dernier paragraphe */

.snow-benefits__text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   BOUTON DEMANDE DE SOUMISSION
   ========================================================= */

.snow-benefits__cta {
    position: relative;

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

    gap: 18px;

    margin-top: 34px;
    padding: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    color: #111111;

    text-decoration: none;

    border-bottom: 1px solid rgba(17, 17, 17, 0.25);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


/* Trait animé sous le bouton */

.snow-benefits__cta::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #c99a20;

    transition: width 0.3s ease;
}


/* Flèche du bouton */

.snow-benefits__cta-arrow {
    display: inline-block;

    font-size: 17px;
    font-weight: 400;

    transform: translateX(0);

    transition: transform 0.3s ease;
}


/* Effet au survol */

.snow-benefits__cta:hover {
    color: #c99a20;

    border-color: transparent;
}


.snow-benefits__cta:hover::after {
    width: 100%;
}


.snow-benefits__cta:hover .snow-benefits__cta-arrow {
    transform: translateX(5px);
}


/* =========================================================
   COLONNE DROITE : IMAGE
   ========================================================= */

.snow-benefits__visual {
    position: relative;
}


/* ---------------------------------------------------------
   FOND DÉCORATIF
   --------------------------------------------------------- */

.snow-benefits__visual::before {
    content: "";

    position: absolute;

    top: -28px;
    right: -28px;

    width: 70%;
    height: 68%;

    background: #f5f5f2;

    z-index: 0;
}


/* ---------------------------------------------------------
   CONTENEUR DE L'IMAGE
   --------------------------------------------------------- */

.snow-benefits__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #ededed;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.snow-benefits__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


/* Léger zoom premium */

.snow-benefits__image-wrap:hover .snow-benefits__image {
    transform: scale(1.025);
}


/* ---------------------------------------------------------
   DÉTAIL DORÉ
   --------------------------------------------------------- */

.snow-benefits__visual::after {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 74px;
    height: 74px;

    border-left: 1px solid #c99a20;
    border-bottom: 1px solid #c99a20;

    z-index: 2;
}


/* =========================================================
   RESPONSIVE - ÉCRANS MOYENS
   ========================================================= */

@media (max-width: 1100px) {

    .snow-benefits {
        padding: 90px 0;
    }


    .snow-benefits__grid {
        gap: 55px;
    }


    .snow-benefits__title {
        font-size: 32px;
    }

}


/* =========================================================
   RESPONSIVE - TABLETTE
   ========================================================= */

@media (max-width: 860px) {

    .snow-benefits {
        padding: 75px 0;
    }


    .snow-benefits__grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .snow-benefits__content {
        max-width: 680px;
    }


    .snow-benefits__text {
        max-width: 650px;
    }


    .snow-benefits__title {
        font-size: 30px;
    }


    .snow-benefits__visual {
        max-width: 760px;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .snow-benefits {
        padding: 60px 0;
    }


    .snow-benefits .container {
        width: min(100% - 28px, 1180px);
    }


    .snow-benefits__grid {
        gap: 45px;
    }


    .snow-benefits__content {
        padding-left: 20px;
    }


    .snow-benefits__accent {
        height: 58px;
    }


    .snow-benefits__title {
        margin-bottom: 26px;

        font-size: 28px;
        line-height: 1.05;
    }


    .snow-benefits__text p {
        margin-bottom: 18px;

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


    .snow-benefits__cta {
        margin-top: 28px;
    }


    .snow-benefits__visual::before {
        top: -14px;
        right: -14px;
    }


    .snow-benefits__visual::after {
        left: -10px;
        bottom: -10px;

        width: 48px;
        height: 48px;
    }

}

/* =========================================================
   PAGE DÉNEIGEMENT - BLOC 4 :
   UNE APPROCHE MODERNE
   ========================================================= */


/* ---------------------------------------------------------
   SECTION PRINCIPALE
   --------------------------------------------------------- */

.snow-modern {
    position: relative;

    padding: 110px 0;

    background: #f7f7f5;

    overflow: hidden;
}


/* ---------------------------------------------------------
   CONTENEUR PRINCIPAL
   --------------------------------------------------------- */

.snow-modern .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   GRILLE PRINCIPALE
   Image à gauche / contenu à droite
   --------------------------------------------------------- */

.snow-modern__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 85px;
}


/* =========================================================
   COLONNE GAUCHE : IMAGE
   ========================================================= */

.snow-modern__visual {
    position: relative;
}


/* ---------------------------------------------------------
   FOND DÉCORATIF DERRIÈRE L'IMAGE
   --------------------------------------------------------- */

.snow-modern__visual::before {
    content: "";

    position: absolute;

    left: -28px;
    bottom: -28px;

    width: 72%;
    height: 66%;

    background: #ffffff;

    z-index: 0;
}


/* ---------------------------------------------------------
   CONTENEUR DE L'IMAGE
   --------------------------------------------------------- */

.snow-modern__image-wrap {
    position: relative;

    z-index: 1;

    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #e9e9e7;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.snow-modern__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition: transform 0.7s ease;
}


/* Léger zoom au survol */

.snow-modern__image-wrap:hover .snow-modern__image {
    transform: scale(1.025);
}


/* ---------------------------------------------------------
   DÉTAIL DORÉ SUR L'IMAGE
   --------------------------------------------------------- */

.snow-modern__visual::after {
    content: "";

    position: absolute;

    top: -22px;
    right: -22px;

    width: 74px;
    height: 74px;

    border-top: 1px solid #c99a20;
    border-right: 1px solid #c99a20;

    z-index: 2;
}


/* =========================================================
   COLONNE DROITE : CONTENU
   ========================================================= */

.snow-modern__content {
    position: relative;

    z-index: 2;

    max-width: 540px;

    padding-left: 28px;
}


/* ---------------------------------------------------------
   TRAIT VERTICAL DORÉ
   --------------------------------------------------------- */

.snow-modern__accent {
    position: absolute;

    top: 3px;
    left: 0;

    width: 2px;
    height: 66px;

    background: #c99a20;
}


/* ---------------------------------------------------------
   TITRE H2
   --------------------------------------------------------- */

.snow-modern__title {
    margin: 0 0 30px;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: #111111;
}


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

.snow-modern__text {
    max-width: 530px;
}


/* ---------------------------------------------------------
   PARAGRAPHES
   --------------------------------------------------------- */

.snow-modern__text p {
    margin: 0 0 22px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;

    color: #4b4b4b;
}


/* Supprime la marge du dernier paragraphe */

.snow-modern__text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   RESPONSIVE - ÉCRANS MOYENS
   ========================================================= */

@media (max-width: 1100px) {

    .snow-modern {
        padding: 90px 0;
    }


    .snow-modern__grid {
        gap: 55px;
    }


    .snow-modern__title {
        font-size: 32px;
    }

}


/* =========================================================
   RESPONSIVE - TABLETTE
   ========================================================= */

@media (max-width: 860px) {

    .snow-modern {
        padding: 75px 0;
    }


    .snow-modern__grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .snow-modern__visual {
        max-width: 760px;
    }


    .snow-modern__content {
        max-width: 680px;
    }


    .snow-modern__text {
        max-width: 650px;
    }


    .snow-modern__title {
        font-size: 30px;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .snow-modern {
        padding: 60px 0;
    }


    .snow-modern .container {
        width: min(100% - 28px, 1180px);
    }


    .snow-modern__grid {
        gap: 45px;
    }


    .snow-modern__visual::before {
        left: -14px;
        bottom: -14px;
    }


    .snow-modern__visual::after {
        top: -10px;
        right: -10px;

        width: 48px;
        height: 48px;
    }


    .snow-modern__content {
        padding-left: 20px;
    }


    .snow-modern__accent {
        height: 54px;
    }


    .snow-modern__title {
        margin-bottom: 25px;

        font-size: 28px;
        line-height: 1.05;
    }


    .snow-modern__text p {
        margin-bottom: 18px;

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

}

/* =========================================================
   PAGE DÉNEIGEMENT - BLOC 5 :
   CALL TO ACTION / POUR NOUS REJOINDRE
   ========================================================= */


/* ---------------------------------------------------------
   SECTION PRINCIPALE
   --------------------------------------------------------- */

.snow-cta {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background: #0d0d0d;
}


/* ---------------------------------------------------------
   IMAGE DE FOND
   Tu peux remplacer l’image si besoin.
   --------------------------------------------------------- */

.snow-cta__background {
    position: absolute;
    inset: 0;

    background-image: url("../images/deneigement-5.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    transform: scale(1.02);
}


/* ---------------------------------------------------------
   OVERLAY SOMBRE
   --------------------------------------------------------- */

.snow-cta__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.76) 32%,
            rgba(0, 0, 0, 0.56) 62%,
            rgba(0, 0, 0, 0.42) 100%
        );
}


/* ---------------------------------------------------------
   CONTENEUR PRINCIPAL
   --------------------------------------------------------- */

.snow-cta .container {
    position: relative;
    z-index: 2;

    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   BLOC DE CONTENU
   --------------------------------------------------------- */

.snow-cta__content {
    max-width: 700px;
}


/* ---------------------------------------------------------
   PETIT SURTITRE
   --------------------------------------------------------- */

.snow-cta__eyebrow {
    position: relative;
    display: inline-block;

    margin-bottom: 24px;
    padding-left: 38px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #c99a20;
}


.snow-cta__eyebrow::before {
    content: "";
    position: absolute;

    top: 50%;
    left: 0;

    width: 24px;
    height: 1px;

    background: #c99a20;

    transform: translateY(-50%);
}


/* ---------------------------------------------------------
   TITRE PRINCIPAL
   --------------------------------------------------------- */

.snow-cta__title {
    margin: 0 0 26px;

    font-size: 58px;
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.035em;

    color: #ffffff;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.snow-cta__text {
    max-width: 620px;
}


.snow-cta__text p {
    margin: 0 0 22px;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;

    color: rgba(255, 255, 255, 0.92);
}


.snow-cta__text p:last-child {
    margin-bottom: 0;

    font-weight: 600;
    color: #ffffff;
}


/* ---------------------------------------------------------
   LIENS DANS LE TEXTE
   --------------------------------------------------------- */

.snow-cta__text a {
    color: #c99a20;
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 154, 32, 0.45);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.snow-cta__text a:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.55);
}


/* ---------------------------------------------------------
   ZONE DES BOUTONS
   --------------------------------------------------------- */

.snow-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;

    margin-top: 38px;
}


/* ---------------------------------------------------------
   STYLE COMMUN DES BOUTONS
   --------------------------------------------------------- */

.snow-cta__button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    min-width: 270px;
    padding: 18px 22px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* ---------------------------------------------------------
   BOUTON PRINCIPAL
   --------------------------------------------------------- */

.snow-cta__button--primary {
    background: #c99a20;
    border: 1px solid #c99a20;
    color: #111111;
}


.snow-cta__button--primary:hover {
    background: #d7aa35;
    border-color: #d7aa35;
    color: #111111;
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   BOUTON SECONDAIRE
   --------------------------------------------------------- */

.snow-cta__button--secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
}


.snow-cta__button--secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #c99a20;
    color: #ffffff;
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   FLÈCHE DES BOUTONS
   --------------------------------------------------------- */

.snow-cta__button-arrow {
    display: inline-block;

    font-size: 18px;
    font-weight: 400;

    transform: translateX(0);
    transition: transform 0.25s ease;
}


.snow-cta__button:hover .snow-cta__button-arrow {
    transform: translateX(4px);
}


/* =========================================================
   RESPONSIVE - ÉCRANS MOYENS
   ========================================================= */

@media (max-width: 1100px) {

    .snow-cta {
        padding: 100px 0;
    }

    .snow-cta__title {
        font-size: 48px;
    }

    .snow-cta__text p {
        font-size: 17px;
        line-height: 1.25;
    }

}


/* =========================================================
   RESPONSIVE - TABLETTE
   ========================================================= */

@media (max-width: 860px) {

    .snow-cta {
        padding: 85px 0;
    }

    .snow-cta__content {
        max-width: 100%;
    }

    .snow-cta__title {
        font-size: 40px;
    }

    .snow-cta__text {
        max-width: 100%;
    }

    .snow-cta__actions {
        gap: 14px;
    }

    .snow-cta__button {
        min-width: 240px;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .snow-cta {
        padding: 65px 0;
    }

    .snow-cta .container {
        width: min(100% - 28px, 1180px);
    }

    .snow-cta__eyebrow {
        margin-bottom: 18px;
        padding-left: 30px;

        font-size: 11px;
    }

    .snow-cta__eyebrow::before {
        width: 18px;
    }

    .snow-cta__title {
        margin-bottom: 22px;

        font-size: 30px;
        line-height: 1.04;
    }

    .snow-cta__text p {
        margin-bottom: 18px;

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

    .snow-cta__actions {
        flex-direction: column;
        align-items: stretch;

        margin-top: 30px;
    }

    .snow-cta__button {
        width: 100%;
        min-width: 0;
        padding: 16px 18px;

        font-size: 13px;
    }

}



/* =========================================================
   PAGE REALISATIONS
========================================================= */


/* =========================================================
   1. BASE
========================================================= */

.realisations-page {

    background: #ffffff;

    color: #111111;

    line-height: 1.1;

}


.realisations-page p,
.realisations-page h1,
.realisations-page h2,
.realisations-page span,
.realisations-page button {

    line-height: 1.1;

}


/* =========================================================
   2. INTRODUCTION
========================================================= */

.realisations-intro {

    padding:
        115px 0 65px;

    background:
        #ffffff;

}


.realisations-heading {

    max-width:
        820px;

}


/* =========================================================
   3. SURTITRE
========================================================= */

.realisations-page .section-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        16px;

    color:
        #8c6000;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;

}


.realisations-page .section-eyebrow::before {

    content:
        "";

    width:
        28px;

    height:
        2px;

    flex-shrink:
        0;

    background:
        var(--gold);

}


/* =========================================================
   4. H1
========================================================= */

.realisations-heading h1 {

    margin:
        0 0 20px;

    color:
        #111111;

    font-size:
        clamp(34px, 3.2vw, 46px);

    font-weight:
        700;

    line-height:
        1.1;

    letter-spacing:
        -.8px;

}


/* =========================================================
   5. TEXTE INTRODUCTION
========================================================= */

.realisations-heading p {

    max-width:
        760px;

    margin:
        0;

    color:
        #111111;

    font-size:
        16px;

    line-height:
        1.1;

}


/* =========================================================
   6. SECTION GALERIE
========================================================= */

.realisations-gallery-section {

    padding:
        0 0 110px;

    background:
        #ffffff;

}


/* =========================================================
   7. GRILLE
   Desktop : 2 / 3 / 2
========================================================= */

.realisations-gallery {

    display:
        grid;

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

    gap:
        18px;

}


/* =========================================================
   8. ITEM
========================================================= */

.realisation-item {

    position:
        relative;

    height:
        350px;

    margin:
        0;

    padding:
        0;

    overflow:
        hidden;

    border:
        0;

    outline:
        0;

    background:
        #eeeeec;

    cursor:
        pointer;

    appearance:
        none;

    -webkit-appearance:
        none;

}


/* =========================================================
   9. 50 %
========================================================= */

.realisation-half {

    grid-column:
        span 3;

}


/* =========================================================
   10. 33 %
========================================================= */

.realisation-third {

    grid-column:
        span 2;

}


/* =========================================================
   11. IMAGES
========================================================= */

.realisation-item > img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center center;

    transition:
        transform .55s ease;

}


/* =========================================================
   12. OVERLAY
========================================================= */

.realisation-overlay {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 45%,
            rgba(0, 0, 0, .28) 100%
        );

    opacity:
        .55;

    transition:
        opacity .3s ease;

}


/* =========================================================
   13. ICONE ZOOM
========================================================= */

.realisation-zoom {

    position:
        absolute;

    right:
        18px;

    bottom:
        18px;

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255, 255, 255, .75);

    border-radius:
        50%;

    background:
        rgba(0, 0, 0, .42);

    color:
        #ffffff;

    opacity:
        0;

    transform:
        translateY(8px);

    pointer-events:
        none;

    transition:
        opacity .3s ease,
        transform .3s ease;

}


.realisation-zoom svg {

    width:
        20px;

    height:
        20px;

    fill:
        currentColor;

}


/* =========================================================
   14. HOVER
========================================================= */

.realisation-item:hover > img {

    transform:
        scale(1.045);

}


.realisation-item:hover
.realisation-overlay {

    opacity:
        1;

}


.realisation-item:hover
.realisation-zoom {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =========================================================
   15. ACCESSIBILITE CLAVIER
========================================================= */

.realisation-item:focus-visible {

    outline:
        3px solid var(--gold);

    outline-offset:
        3px;

}


/* =========================================================
   16. LIGHTBOX
   IMPORTANT :
   display:none empêche tout élément d'apparaître
   sous la galerie ou près du footer.
========================================================= */

.realisation-lightbox {

    display:
        none;

    position:
        fixed;

    inset:
        0;

    z-index:
        999999;

}


/* Lightbox ouverte */

.realisation-lightbox.is-open {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* =========================================================
   17. FOND LIGHTBOX
========================================================= */

.realisation-lightbox-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(0, 0, 0, .80);

    cursor:
        pointer;

}


/* =========================================================
   18. CONTENEUR LIGHTBOX
========================================================= */

.realisation-lightbox-dialog {

    position:
        relative;

    z-index:
        2;

    width:
        calc(100vw - 160px);

    height:
        calc(100vh - 100px);

    max-width:
        1450px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* =========================================================
   19. IMAGE LIGHTBOX
========================================================= */

.realisation-lightbox-image {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.realisation-lightbox-image img {

    display:
        block;

    width:
        auto;

    height:
        auto;

    max-width:
        100%;

    max-height:
        100%;

    object-fit:
        contain;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, .45);

}


/* =========================================================
   20. BOUTON FERMER
========================================================= */

.realisation-lightbox-close {

    position:
        fixed;

    top:
        25px;

    right:
        28px;

    z-index:
        5;

    width:
        48px;

    height:
        48px;

    padding:
        0;

    border:
        1px solid rgba(255, 255, 255, .45);

    border-radius:
        50%;

    background:
        rgba(0, 0, 0, .35);

    cursor:
        pointer;

    transition:
        background .2s ease,
        border-color .2s ease;

}


.realisation-lightbox-close span {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        19px;

    height:
        1px;

    background:
        #ffffff;

}


.realisation-lightbox-close span:first-child {

    transform:
        translate(-50%, -50%)
        rotate(45deg);

}


.realisation-lightbox-close span:last-child {

    transform:
        translate(-50%, -50%)
        rotate(-45deg);

}


.realisation-lightbox-close:hover {

    background:
        var(--gold);

    border-color:
        var(--gold);

}


.realisation-lightbox-close:hover span {

    background:
        #111111;

}


/* =========================================================
   21. FLECHES
========================================================= */

.realisation-lightbox-arrow {

    position:
        fixed;

    top:
        50%;

    z-index:
        5;

    width:
        54px;

    height:
        54px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255, 255, 255, .4);

    border-radius:
        50%;

    background:
        rgba(0, 0, 0, .35);

    color:
        #ffffff;

    font-size:
        21px;

    cursor:
        pointer;

    transform:
        translateY(-50%);

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;

}


.realisation-lightbox-prev {

    left:
        28px;

}


.realisation-lightbox-next {

    right:
        28px;

}


.realisation-lightbox-arrow:hover {

    background:
        var(--gold);

    border-color:
        var(--gold);

    color:
        #111111;

}


/* =========================================================
   22. COMPTEUR
========================================================= */

.realisation-lightbox-counter {

    position:
        fixed;

    left:
        50%;

    bottom:
        24px;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        1px;

    transform:
        translateX(-50%);

}


/* =========================================================
   23. TABLETTE
========================================================= */

@media (max-width: 991px) {

    .realisations-intro {

        padding:
            85px 0 55px;

    }


    .realisations-gallery-section {

        padding-bottom:
            85px;

    }


    .realisations-gallery {

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

        gap:
            14px;

    }


    .realisation-half,
    .realisation-third {

        grid-column:
            span 1;

    }


    .realisation-item {

        height:
            300px;

    }


    /* La dernière prend toute la largeur */

    .realisation-item:last-child {

        grid-column:
            span 2;

    }


    .realisation-lightbox-dialog {

        width:
            calc(100vw - 120px);

        height:
            calc(100vh - 100px);

    }

}


/* =========================================================
   24. MOBILE
========================================================= */

@media (max-width: 767px) {

    .realisations-intro {

        padding:
            70px 0 45px;

    }


    .realisations-heading h1 {

        font-size:
            34px;

    }


    .realisations-heading p {

        font-size:
            15px;

    }


    .realisations-gallery-section {

        padding-bottom:
            65px;

    }


    .realisations-gallery {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }


    .realisation-item,
    .realisation-half,
    .realisation-third,
    .realisation-item:last-child {

        grid-column:
            span 1;

        height:
            270px;

    }


    .realisation-zoom {

        width:
            42px;

        height:
            42px;

        right:
            14px;

        bottom:
            14px;

        opacity:
            1;

        transform:
            none;

    }


    /* LIGHTBOX */

    .realisation-lightbox-dialog {

        width:
            calc(100vw - 24px);

        height:
            calc(100vh - 130px);

    }


    .realisation-lightbox-close {

        top:
            15px;

        right:
            15px;

        width:
            44px;

        height:
            44px;

    }


    .realisation-lightbox-arrow {

        top:
            auto;

        bottom:
            16px;

        width:
            46px;

        height:
            46px;

        transform:
            none;

    }


    .realisation-lightbox-prev {

        left:
            16px;

    }


    .realisation-lightbox-next {

        right:
            16px;

    }


    .realisation-lightbox-counter {

        bottom:
            32px;

    }

}


/* =========================================================
   25. PETIT MOBILE
========================================================= */

@media (max-width: 420px) {

    .realisations-intro {

        padding:
            60px 0 40px;

    }


    .realisation-item {

        height:
            240px;

    }

}


/* =========================================================
   26. REDUCTION DES ANIMATIONS
========================================================= */

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

    .realisation-item > img,
    .realisation-overlay,
    .realisation-zoom {

        transition:
            none;

    }

}

/* =========================================================
   PAGE FAQ
========================================================= */
/* =========================================================
   CTA FAQ
========================================================= */

.faq-cta {

    position: relative;

    width: 100%;

    min-height: 500px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: #111111;

}


/* =========================================================
   IMAGE DE FOND
========================================================= */

.faq-cta-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    z-index: 1;

}


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

.faq-cta-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .84) 0%,
            rgba(0, 0, 0, .70) 35%,
            rgba(0, 0, 0, .34) 62%,
            rgba(0, 0, 0, .10) 100%
        );

}


/* =========================================================
   CONTENEUR
   ALIGNEMENT IDENTIQUE AU RESTE DU SITE
========================================================= */

.faq-cta-inner {

    position: relative;

    z-index: 3;

    width:
        min(
            calc(100% - 50px),
            var(--container-width)
        );

    margin:
        0 auto;

}


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

.faq-cta-content {

    max-width: 620px;

}


/* =========================================================
   SURTITRE
========================================================= */

.faq-cta-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: var(--gold);

    font-size: 12px;

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.faq-cta-eyebrow::before {

    content: "";

    width: 28px;

    height: 2px;

    background: var(--gold);

}


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

.faq-cta h2 {

    margin:
        0 0 18px;

    color:
        #ffffff;

    font-size:
        clamp(32px, 3.4vw, 48px);

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -.8px;

}


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

.faq-cta p {

    max-width: 560px;

    margin:
        0 0 30px;

    color:
        #ffffff;

    font-size: 15px;

    line-height: 1.1;

}


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

.faq-cta-button {

    min-width: 225px;

    min-height: 52px;

    padding:
        0 22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    border:
        1px solid var(--gold);

    background:
        rgba(0, 0, 0, .20);

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1.1;

    text-decoration:
        none;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

}


.faq-cta-button:hover {

    background:
        var(--gold);

    color:
        #111111;

    transform:
        translateY(-2px);

}


.faq-cta-button-arrow {

    font-size:
        18px;

    transition:
        transform .25s ease;

}


.faq-cta-button:hover
.faq-cta-button-arrow {

    transform:
        translateX(4px);

}


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

@media (max-width: 1200px) {

    .faq-cta-inner {

        width:
            min(
                calc(100% - 36px),
                var(--container-width)
            );

    }

}


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

@media (max-width: 767px) {

    .faq-cta {

        min-height:
            420px;

    }


    .faq-cta-inner {

        width:
            calc(100% - 28px);

    }


    .faq-cta-image {

        object-position:
            65% center;

    }


    .faq-cta-overlay {

        background:
            rgba(0, 0, 0, .68);

    }


    .faq-cta h2 {

        font-size:
            32px;

    }


    .faq-cta p {

        font-size:
            14px;

    }


    .faq-cta-button {

        width:
            100%;

    }

}

/* =========================================================
   1. BASE
========================================================= */

.faq-page {

    background: #ffffff;

    color: #111111;

    line-height: 1.1;

}


.faq-page p,
.faq-page h1,
.faq-page h2,
.faq-page a,
.faq-page span {

    line-height: 1.1;

} 


/* =========================================================
   2. INTRODUCTION
   Plus d'espace entre la bannière et le contenu
========================================================= */

.faq-intro {

    padding:
        70px 0 70px;

    background:
        #ffffff;

}


.faq-heading {

    max-width:
        820px;

}


/* =========================================================
   3. SURTITRE
========================================================= */

.faq-page .section-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        16px;

    color:
        #8c6000;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;

}


.faq-page .section-eyebrow::before {

    content:
        "";

    width:
        28px;

    height:
        2px;

    flex-shrink:
        0;

    background:
        var(--gold);

}


/* =========================================================
   4. H1
========================================================= */

.faq-heading h1 {

    margin:
        0 0 20px;

    color:
        #111111;

    font-size:
        clamp(34px, 3.2vw, 46px);

    font-weight:
        700;

    line-height:
        1.1;

    letter-spacing:
        -.8px;

}


/* =========================================================
   5. TEXTE D'INTRODUCTION
========================================================= */

.faq-heading p {

    max-width:
        760px;

    margin:
        0;

    color:
        #111111;

    font-size:
        16px;

    line-height:
        1.1;

}


/* =========================================================
   6. SECTION QUESTIONS / REPONSES
========================================================= */

.faq-content {

    padding:
        0 0 100px;

    background:
        #ffffff;

}


/* =========================================================
   7. LISTE FAQ
========================================================= */

.faq-list {

    border-top:
        1px solid #dededb;

}


/* =========================================================
   8. ITEM FAQ
========================================================= */

.faq-item {

    position:
        relative;

    padding:
        40px 34px;

    border-bottom:
        1px solid #dededb;

    background:
        #ffffff;

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;

}


/* =========================================================
   9. ALTERNANCE DE FOND
========================================================= */

.faq-item:nth-child(even) {

    background:
        #f7f7f5;

}


/* =========================================================
   10. LIGNE DOREE AU SURVOL
========================================================= */

.faq-item::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        3px;

    height:
        0;

    background:
        var(--gold);

    transition:
        height .35s ease;

}


.faq-item:hover::before {

    height:
        100%;

}


.faq-item:hover {

    background:
        #faf9f5;

}


/* =========================================================
   11. CONTENU INTERNE
========================================================= */

.faq-item-content {

    max-width:
        980px;

}


/* =========================================================
   12. QUESTIONS
========================================================= */

.faq-item h2 {

    margin:
        0 0 14px;

    color:
        #111111;

    font-size:
        clamp(19px, 1.6vw, 23px);

    font-weight:
        700;

    line-height:
        1.1;

    letter-spacing:
        -.25px;

}


/* =========================================================
   13. REPONSES
========================================================= */

.faq-item p {

    max-width:
        930px;

    margin:
        0;

    color:
        #111111;

    font-size:
        15px;

    line-height:
        1.1;

}


/* =========================================================
   14. LIENS DANS LES REPONSES
========================================================= */

.faq-item p a {

    color:
        #875c00;

    font-weight:
        700;

    text-decoration:
        none;

    border-bottom:
        1px solid rgba(214, 154, 24, .55);

    transition:
        color .2s ease,
        border-color .2s ease;

}


.faq-item p a:hover {

    color:
        #111111;

    border-color:
        var(--gold);

}


/* =========================================================
   15. SECTION APPEL A L'ACTION
========================================================= */

.faq-contact {

    padding:
        85px 0;

    background:
        #f3f3f1;

    border-top:
        1px solid #e1e1de;

}


/* =========================================================
   16. LAYOUT CTA
========================================================= */

.faq-contact-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        60px;

}


/* =========================================================
   17. TEXTE CTA
========================================================= */

.faq-contact-text {

    max-width:
        700px;

}


.faq-contact-text h2 {

    margin:
        0 0 16px;

    color:
        #111111;

    font-size:
        clamp(27px, 2.5vw, 36px);

    font-weight:
        700;

    line-height:
        1.1;

    letter-spacing:
        -.5px;

}


.faq-contact-text p {

    max-width:
        620px;

    margin:
        0;

    color:
        #111111;

    font-size:
        15px;

    line-height:
        1.1;

}


/* =========================================================
   18. ACTIONS CTA
========================================================= */

.faq-contact-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    flex-shrink:
        0;

}


/* =========================================================
   19. BOUTONS
========================================================= */

.faq-button {

    min-height:
        50px;

    padding:
        0 22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    border:
        1px solid transparent;

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.1;

    text-decoration:
        none;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        gap .25s ease;

}


/* =========================================================
   20. BOUTON PRINCIPAL
========================================================= */

.faq-button-primary {

    background:
        var(--gold);

    border-color:
        var(--gold);

    color:
        #111111;

}


.faq-button-primary:hover {

    background:
        #111111;

    border-color:
        #111111;

    color:
        #ffffff;

    transform:
        translateY(-2px);

    gap:
        16px;

}


/* =========================================================
   21. BOUTON SECONDAIRE
========================================================= */

.faq-button-secondary {

    background:
        #ffffff;

    border-color:
        #d7d7d4;

    color:
        #111111;

}


.faq-button-secondary:hover {

    border-color:
        var(--gold);

    color:
        #111111;

    transform:
        translateY(-2px);

    gap:
        16px;

}


/* =========================================================
   22. ANIMATION FAQ
========================================================= */

.js .faq-item {

    opacity:
        0;

    transform:
        translateY(18px);

}


.js .faq-item.is-visible {

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity .55s ease,
        transform .55s ease,
        background .3s ease;

}


/* =========================================================
   23. TABLETTE
========================================================= */

@media (max-width: 991px) {

    .faq-intro {

        padding:
            85px 0 55px;

    }


    .faq-content {

        padding-bottom:
            80px;

    }


    .faq-item {

        padding:
            34px 26px;

    }


    .faq-contact {

        padding:
            70px 0;

    }


    .faq-contact-inner {

        display:
            block;

    }


    .faq-contact-actions {

        margin-top:
            30px;

    }

}


/* =========================================================
   24. MOBILE
========================================================= */

@media (max-width: 767px) {

    .faq-intro {

        padding:
            70px 0 45px;

    }


    .faq-heading h1 {

        font-size:
            34px;

    }


    .faq-heading p {

        font-size:
            15px;

    }


    .faq-content {

        padding-bottom:
            65px;

    }


    .faq-item {

        padding:
            28px 20px;

    }


    .faq-item h2 {

        font-size:
            19px;

    }


    .faq-item p {

        font-size:
            14px;

    }


    .faq-contact {

        padding:
            60px 0;

    }


    .faq-contact-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .faq-button {

        width:
            100%;

    }

}


/* =========================================================
   25. PETITS MOBILES
========================================================= */

@media (max-width: 420px) {

    .faq-intro {

        padding:
            60px 0 40px;

    }


    .faq-item {

        padding:
            25px 18px;

    }

}


/* =========================================================
   26. REDUCTION DES ANIMATIONS
========================================================= */

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

    .js .faq-item {

        opacity:
            1;

        transform:
            none;

    }


    .faq-item,
    .faq-item::before,
    .faq-button {

        transition:
            none;

    }

}


/* =========================================================
   LES SERVICES MJD ET FILS INC.
   BANNIERE GENERIQUE DES PAGES INTERNES
========================================================= */


/* =========================================================
   1. BANNIERE GENERALE
========================================================= */

.page-banner {

    position: relative;

    width: 100%;

    height: 360px;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

    background:
        #111111;

}


/* =========================================================
   2. IMAGE DE LA BANNIERE
   L'image est définie directement dans le HTML
========================================================= */

.page-banner-image {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
       Permet de mieux centrer visuellement l'image.
       50% = centre exact.
       Ici on descend légèrement le cadrage pour mieux
       mettre en valeur les véhicules / équipements.
    */
    object-position: center 58%;

    z-index: 1;

}


/* =========================================================
   3. OVERLAY SOMBRE
   Donne un rendu plus haut de gamme à l'image
========================================================= */

.page-banner-overlay {

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 2;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .08) 0%,
            rgba(0, 0, 0, .18) 42%,
            rgba(0, 0, 0, .58) 100%
        );

}


/* =========================================================
   4. CONTENU DE LA BANNIERE
   Même largeur et même alignement que le header
========================================================= */

.page-banner-content {

    position: relative;

    z-index: 3;

    width:
        min(
            calc(100% - 50px),
            var(--container-width)
        );

    margin:
        0 auto;

    padding-bottom: 38px;

}


/* =========================================================
   5. FIL D'ARIANE
========================================================= */

.breadcrumb {

    display: inline-flex;

    align-items: center;

    padding:
        13px 20px;

    background:
        rgba(10, 10, 10, .40);

    border:
        1px solid
        rgba(255, 255, 255, .18);

    border-radius:
        50px;

    backdrop-filter:
        blur(8px);

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

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

}


/* =========================================================
   6. LISTE DU FIL D'ARIANE
========================================================= */

.breadcrumb-list {

    margin: 0;

    padding: 0;

    list-style: none;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

}


/* =========================================================
   7. ELEMENTS DU FIL D'ARIANE
========================================================= */

.breadcrumb-item,
.breadcrumb-separator {

    font-size: 14px;

    line-height: 1;

}


/* =========================================================
   8. LIEN ACCUEIL
========================================================= */

.breadcrumb-item a {

    color:
        rgba(255, 255, 255, .90);

    transition:
        color .2s ease;

}

.breadcrumb-item a:hover {

    color:
        var(--gold);

}


/* =========================================================
   9. SEPARATEUR
========================================================= */

.breadcrumb-separator {

    color:
        rgba(255, 255, 255, .45);

}


/* =========================================================
   10. PAGE COURANTE
========================================================= */

.breadcrumb-current {

    color:
        var(--gold);

    font-weight: 600;

}


/* =========================================================
   11. RESPONSIVE TABLETTE
========================================================= */

@media (max-width: 1200px) {

    .page-banner {

        height: 300px;

    }

    .page-banner-content {

        width:
            min(
                calc(100% - 36px),
                var(--container-width)
            );

        padding-bottom: 30px;

    }

    .page-banner-image {

        object-position:
            center 55%;

    }

}


/* =========================================================
   12. RESPONSIVE MOBILE
========================================================= */

@media (max-width: 767px) {

    .page-banner {

        height: 230px;

    }

    .page-banner-content {

        width:
            calc(100% - 28px);

        padding-bottom: 20px;

    }

    .page-banner-image {

        /*
           Sur mobile, on recentre un peu plus l'image
           car le cadrage devient beaucoup plus étroit.
        */
        object-position:
            center center;

    }

    .breadcrumb {

        padding:
            11px 15px;

        border-radius:
            30px;

    }

    .breadcrumb-item,
    .breadcrumb-separator {

        font-size: 13px;

    }

}


/* =========================================================
   13. TRES PETITS ECRANS
========================================================= */

@media (max-width: 420px) {

    .page-banner {

        height: 210px;

    }

    .page-banner-content {

        width:
            calc(100% - 24px);

        padding-bottom: 16px;

    }

    .breadcrumb {

        padding:
            10px 13px;

    }

    .breadcrumb-list {

        gap: 8px;

    }

}

/* =========================================================
   PAGE CONTACT
========================================================= */


/* =========================================================
   1. BASE
========================================================= */

.contact-page {

    background:
        #ffffff;

    color:
        #111111;

    line-height:
        1.1;

}


/* Force tous les textes de la page contact en noir */

.contact-page p,
.contact-page span,
.contact-page strong,
.contact-page a,
.contact-page h1,
.contact-page h2,
.contact-page h3 {

    line-height:
        1.1;

}


/* =========================================================
   2. INTRODUCTION
========================================================= */

.contact-intro {

    padding:
        80px 0 90px;

    background:
        #ffffff;

}


/* =========================================================
   3. TITRE PRINCIPAL
========================================================= */

.contact-heading {

    max-width:
        760px;

    margin-bottom:
        45px;

}


/* =========================================================
   4. SURTITRES DORES
========================================================= */

.section-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        13px;

    color:
        #966600 !important;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;

}


/* Ligne dorée */

.section-eyebrow::before {

    content:
        "";

    width:
        28px;

    height:
        2px;

    flex-shrink:
        0;

    background:
        var(--gold);

}


/* =========================================================
   5. H1
========================================================= */

.contact-heading h1 {

    margin:
        0 0 17px;

    color:
        #111111;

    font-size:
        clamp(32px, 3vw, 44px);

    font-weight:
        700;

    line-height:
        1.1;

    letter-spacing:
        -.8px;

}


/* =========================================================
   6. TEXTE SOUS LE H1
========================================================= */

.contact-heading p {

    max-width:
        680px;

    margin:
        0;

    color:
        #111111;

    font-size:
        16px;

    line-height:
        1.1;

}


/* =========================================================
   7. GRILLE DES COORDONNEES
========================================================= */

.contact-cards {

    display:
        grid;

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

    background:
        #ffffff;

    border:
        1px solid #e4e4e4;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .055);

}


/* =========================================================
   8. CARTE DE CONTACT
========================================================= */

.contact-card {

    position:
        relative;

    min-width:
        0;

    min-height:
        235px;

    padding:
        32px 27px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    background:
        #ffffff;

    border-right:
        1px solid #e4e4e4;

    color:
        #111111;

    text-decoration:
        none;

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;

}


.contact-card:last-child {

    border-right:
        0;

}


/* =========================================================
   9. HOVER DES CARTES CLIQUABLES
========================================================= */

a.contact-card:hover {

    background:
        #f7f7f5;

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 38px rgba(0, 0, 0, .06);

    z-index:
        2;

}


/* =========================================================
   10. ICONES
========================================================= */

.contact-card-icon {

    width:
        50px;

    height:
        50px;

    margin-bottom:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    border:
        1px solid rgba(214, 154, 24, .42);

    border-radius:
        50%;

    background:
        #fffaf0;

    color:
        var(--gold) !important;

}


.contact-card-icon svg {

    width:
        22px;

    height:
        22px;

    display:
        block;

    fill:
        currentColor;

}


/* =========================================================
   11. CONTENU DES CARTES
========================================================= */

.contact-card-content {

    display:
        block;

    width:
        100%;

}



/* =========================================================
   LABELS DES CARTES DE CONTACT
========================================================= */

.contact-card-label {

    display: block;

    margin: 0 0 10px 0;

    padding: 0;

    color: #111111 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 18px !important;

    font-weight: 700 !important;

    font-style: normal !important;

    font-variant: normal !important;

    line-height: 1.1 !important;

    letter-spacing: 1px;

    text-transform: none !important;

    white-space: nowrap;

}
/* =========================================================
   13. VALEURS PRINCIPALES
========================================================= */

.contact-card-value {

    display:
        block;

    color:
        #111111 !important;

    font-size:
        15px;

    font-weight:
        600;

    line-height:
        1.1;

    overflow-wrap:
        anywhere;

}


/* =========================================================
   14. ACTION DES CARTES
========================================================= */

.contact-card-action {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        18px;

    color:
        #8c6000 !important;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        gap .2s ease;

}


a.contact-card:hover
.contact-card-action {

    gap:
        12px;

}


/* =========================================================
   15. HEURES D'OUVERTURE
========================================================= */

.contact-hours {

    margin-top:
        2px;

}


.contact-hours-row {

    margin-bottom:
        16px;

}


.contact-hours-row:last-child {

    margin-bottom:
        0;

}


/* Saison */

.contact-hours-season {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #111111 !important;

    font-size:
        13px;

    font-weight:
        600;

}


/* lundi - vendredi */

.contact-hours-days {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #111111 !important;

    font-size:
        14px;

    white-space:
        nowrap;

}


/* Horaires */

.contact-hours-row strong {

    display:
        block;

    color:
        #111111;

    font-size:
        14px;

    font-weight:
        700;

}


/* =========================================================
   16. SECTION EMPLACEMENT
========================================================= */

.contact-location {

    padding:
        80px 0 90px;

    background:
        #f3f3f1;

}


/* =========================================================
   17. EN-TETE DE LA CARTE
========================================================= */

.contact-section-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        35px;

    margin-bottom:
        32px;

}


/* =========================================================
   18. H2
========================================================= */

.contact-section-heading h2,
.contact-form-intro h2 {

    margin:
        0;

    color:
        #111111;

    font-size:
        clamp(27px, 2.5vw, 36px);

    font-weight:
        700;

    line-height:
        1.1;

    letter-spacing:
        -.5px;

}


/* =========================================================
   19. LIEN GOOGLE MAPS
========================================================= */

.contact-map-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    flex-shrink:
        0;

    padding-bottom:
        5px;

    color:
        #845a00 !important;

    border-bottom:
        1px solid rgba(214, 154, 24, .65);

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        color .2s ease,
        gap .2s ease,
        border-color .2s ease;

}


.contact-map-link:hover {

    gap:
        13px;

    color:
        #111111 !important;

    border-color:
        var(--gold);

}


/* =========================================================
   20. GOOGLE MAP
========================================================= */

.contact-map {

    width:
        100%;

    height:
        520px;

    overflow:
        hidden;

    background:
        #e4e4e2;

    border:
        1px solid #d8d8d6;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .07);

}


.contact-map iframe {

    display:
        block;

    width:
        100%;

    height:
        100%;

    border:
        0;

}


/* =========================================================
   21. SECTION FORMULAIRE
========================================================= */

.contact-form-section {

    padding:
        90px 0 100px;

    background:
        #f3f3f1;

    border-top:
        1px solid #e2e2df;

}


/* =========================================================
   22. LAYOUT FORMULAIRE
========================================================= */

.contact-form-layout {

    display:
        grid;

    grid-template-columns:
        minmax(300px, .72fr)
        minmax(0, 1.28fr);

    gap:
        70px;

    align-items:
        start;

}


/* =========================================================
   23. INTRODUCTION FORMULAIRE
========================================================= */

.contact-form-intro {

    position:
        sticky;

    top:
        125px;

}


.contact-form-intro h2 {

    margin-bottom:
        17px;

}


.contact-form-intro > p {

    margin:
        0 0 28px;

    color:
        #111111;

    font-size:
        15px;

    line-height:
        1.1;

}


/* =========================================================
   24. BLOC D'INFORMATION
========================================================= */

.contact-form-highlight {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        15px;

    padding:
        20px;

    background:
        #ffffff;

    border:
        1px solid #dfdfdc;

    border-left:
        3px solid var(--gold);

}


/* Icône */

.contact-form-highlight-icon {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        #f3f3f1;

    color:
        var(--gold) !important;

}


.contact-form-highlight-icon svg {

    width:
        16px;

    height:
        16px;

    fill:
        currentColor;

}


/* Texte */

.contact-form-highlight strong {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #111111;

    font-size:
        14px;

}


.contact-form-highlight div > span {

    display:
        block;

    color:
        #111111;

    font-size:
        13px;

    line-height:
        1.1;

}


/* =========================================================
   25. CONTENEUR JOTFORM
========================================================= */

.contact-form-wrapper {

    min-width:
        0;

    padding:
        18px 24px 24px;

    background:
        #ffffff;

    border:
        1px solid #ddddda;

    box-shadow:
        0 22px 60px rgba(0, 0, 0, .06);

}


/* =========================================================
   26. RESPONSIVE TABLETTE
========================================================= */

@media (max-width: 1100px) {

    .contact-cards {

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

    }


    .contact-card {

        border-bottom:
            1px solid #e4e4e4;

    }


    .contact-card:nth-child(2) {

        border-right:
            0;

    }


    .contact-card:nth-child(3),
    .contact-card:nth-child(4) {

        border-bottom:
            0;

    }


    .contact-form-layout {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }


    .contact-form-intro {

        position:
            static;

        max-width:
            700px;

    }

}


/* =========================================================
   27. RESPONSIVE MOBILE
========================================================= */

@media (max-width: 767px) {

    /* INTRO */

    .contact-intro {

        padding:
            55px 0 62px;

    }


    .contact-heading {

        margin-bottom:
            32px;

    }


    /* COORDONNEES */

    .contact-cards {

        grid-template-columns:
            1fr;

    }


    .contact-card {

        min-height:
            0;

        padding:
            27px 23px;

        border-right:
            0;

        border-bottom:
            1px solid #e4e4e4;

    }


    .contact-card:nth-child(3) {

        border-bottom:
            1px solid #e4e4e4;

    }


    .contact-card:last-child {

        border-bottom:
            0;

    }


    /* HEURES */

    .contact-hours-days {

        white-space:
            nowrap;

    }


    /* SECTION CARTE */

    .contact-location {

        padding:
            60px 0;

    }


    .contact-section-heading {

        display:
            block;

        margin-bottom:
            26px;

    }


    .contact-map-link {

        margin-top:
            20px;

    }


    .contact-map {

        height:
            400px;

    }


    /* FORMULAIRE */

    .contact-form-section {

        padding:
            62px 0 70px;

    }


    .contact-form-layout {

        gap:
            36px;

    }


    .contact-form-wrapper {

        padding:
            8px;

    }

}


/* =========================================================
   28. PETITS MOBILES
========================================================= */

@media (max-width: 420px) {

    .contact-map {

        height:
            340px;

    }

}