@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Regular.otf");
}

@font-face {
    font-family: "MontserratSemiBold";
    src: url("../fonts/Montserrat-SemiBold.otf");
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
}

body {
    margin: 0;
    background-color: #faf7f3;
}

:root {
    --largeur-site: 1600px;
    --padding-site: 40px;
    --hauteur-header: 79px;
    --beige-separateur: #f4eee9;
}

/*--Menu de navigation dans commun.css--*/

/*===========================HERO INDEX.HTLM===========================*/
.hero {
    --hero-preview: 48px;
    --hero-gap: 16px;
    --hero-radius: 7px;
    --hero-carousel-height: 338px;

    max-width: none;
    margin: 0;
    padding: 6px 0 48px;

    background-color: #faf7f3;

    box-sizing: border-box;
    overflow: hidden;
}

/*===========================CAROUSEL===========================*/

.hero-carousel {
    position: relative;

    width: 100%;
    max-width: none;

    margin: 0 auto 46px;
    padding: 0 40px;

    box-sizing: border-box;
}

.hero-carousel-fenetre {
    width: 100%;
    overflow: hidden;
}

.hero-carousel-piste {
    display: flex;
    gap: var(--hero-gap);

    will-change: transform;
    transition: transform 0.45s ease;
}

.hero-carousel-slide {
    flex: 0 0 calc(100% - (var(--hero-preview) * 2) - (var(--hero-gap) * 2));

    height: var(--hero-carousel-height);

    border-radius: var(--hero-radius);
    overflow: hidden;

    background-color: #ede5dc;

    box-sizing: border-box;
}

.hero-carousel-slide img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
}


/*-----------BOUTONS CAROUSEL HERO-----------*/

.hero-carousel-bouton {
    position: absolute;
    top: calc(50% - 18px);

    z-index: 4;

    width: 36px;
    height: 36px;

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

    border: 1px solid rgba(12, 32, 51, 0.10);
    border-radius: 50%;

    background-color: #faf7f3;
    color: #0c2033;

    font-family: "MontserratSemiBold", sans-serif;
    font-size: 18px;
    line-height: 1;

    cursor: pointer;
    user-select: none;

    box-shadow: 0 8px 18px rgba(12, 32, 51, 0.12);

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

.hero-carousel-precedent {
    left: calc(40px + var(--hero-preview) + var(--hero-gap) - 18px);
}

.hero-carousel-suivant {
    right: calc(40px + var(--hero-preview) + var(--hero-gap) - 18px);
}

.hero-carousel-bouton:hover {
    transform: translateY(-2px);
    color: #b0161d;
    border-color: rgba(176, 22, 29, 0.35);
    box-shadow: 0 10px 22px rgba(12, 32, 51, 0.16);
}

/* Flèches SVG du carousel hero */
.hero-carousel-bouton img {
    width: 13px;
    height: auto;

    display: block;
    pointer-events: none;
}

.hero-carousel-precedent img {
    transform: scaleX(-1);
}


/*-----------POINTS CAROUSEL HERO-----------*/

.hero-carousel-points {
    margin-top: 18px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;

    line-height: 0;
    font-size: 0;
}

.hero-carousel-point {
    width: 7px;
    height: 7px;

    display: block;
    flex: 0 0 7px;

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 50%;

    appearance: none;
    -webkit-appearance: none;

    background-color: rgba(12, 32, 51, 0.24);

    cursor: pointer;

    transition:
        background-color 0.22s ease,
        transform 0.22s ease;
}

.hero-carousel-point.actif {
    background-color: #b0161d;
    transform: scale(1.1);
}

/*-----------CONTENU TEXTE HERO-----------*/

.hero-contenu {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    box-sizing: border-box;
}

/* Petit surtitre rouge */
.hero-contenu h2 {
    margin: 0 0 24px;

    color: #7a0a0f;
    font-family: "MontserratSemiBold", sans-serif;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

/* Grand titre */
.hero-contenu h1 {
    max-width: 1120px;
    margin: 0 0 38px;

    position: relative;

    color: #0c2033;
    font-family: "MontserratSemiBold", sans-serif;
    font-size: clamp(38px, 3.35vw, 58px);
    line-height: 1.08;
}

/* Petit trait rouge sous le titre */
.hero-contenu h1::after {
    content: "";
    position: absolute;

    left: 50%;
    bottom: -20px;

    width: 70px;
    height: 2px;

    background-color: #b0161d;

    transform: translateX(-50%);
}

/* Paragraphes */
.hero-contenu p {
    max-width: 1120px;
    margin: 0 0 16px;

    color: #0c2033;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(14px, 0.95vw, 17px);
    line-height: 1.55;
}

/* Boutons */
.hero-boutons {
    margin-top: 42px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 90px;
}

.hero-boutons a {
    min-width: 255px;
    height: 48px;
    padding: 0 24px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    font-family: "MontserratSemiBold", sans-serif;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    border-radius: 4px;
    user-select: none;
    box-sizing: border-box;

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

.hero-boutons a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(12, 32, 51, 0.08);
}

.hero-boutons img {
    height: 19px;
    width: auto;
}

.bouton-plein {
    background-color: #0c2033;
    color: #faf7f3;
    border: 2px solid #0c2033;
}

.bouton-contour {
    background-color: transparent;
    color: #7a0a0f;
    border: 2px solid #7a0a0f;
}

.bouton-contour:hover {
    background-color: rgba(237, 229, 220, 0.45);
}

/* Localisation */
.hero-localisation {
    margin-top: 36px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: #0c2033;
    font-family: "MontserratSemiBold", sans-serif;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: 0.5px;

    opacity: 0.9;
}

.hero-localisation img {
    height: 13px;
    width: auto;
}

/*-----------RESPONSIVE TEXTE HERO-----------*/

@media screen and (max-width: 760px) {
    .hero-contenu {
        padding: 0 22px;
    }

    .hero-contenu h2 {
        font-size: 12px;
        line-height: 1.35;
        margin-bottom: 18px;
    }

    .hero-contenu h1 {
        max-width: 100%;
        font-size: 32px;
        margin-bottom: 32px;
    }

    .hero-contenu h1::after {
        bottom: -16px;
        width: 58px;
    }

    .hero-contenu p {
        max-width: 100%;
        font-size: 14px;
    }

    .hero-boutons {
        width: 100%;
        margin-top: 32px;

        flex-direction: column;
        gap: 16px;
    }

    .hero-boutons a {
        width: 100%;
        min-width: 0;
    }

    .hero-localisation {
        flex-wrap: wrap;
        font-size: 11px;
        text-align: center;
    }
}

@media screen and (max-width: 430px) {
    .hero-contenu h1 {
        font-size: 29px;
    }
}

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

.hero-localisation {
    margin-top: 38px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: #0c2033;
    font-family: "MontserratSemiBold", sans-serif;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: 0.5px;

    opacity: 0.9;
}

.hero-localisation img {
    height: 13px;
    width: auto;
}


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

@media screen and (max-width: 1150px) {
    .hero {
        --hero-preview: 34px;
        --hero-carousel-height: 195px;

        padding-top: 16px;
    }

    .hero-carousel {
        padding: 0 28px;
    }

    .hero-carousel {
    width: 90%;
    padding: 0 28px;
    }

    .hero-carousel-precedent {
        left: calc(28px + var(--hero-preview) + var(--hero-gap) - 17px);
    }

    .hero-carousel-suivant {
        right: calc(28px + var(--hero-preview) + var(--hero-gap) - 17px);
    }

    .hero h1 {
        font-size: clamp(34px, 4vw, 48px);
    }

    .hero p {
        max-width: 820px;
    }
}

@media screen and (max-width: 760px) {
    .hero {
        --hero-preview: 0px;
        --hero-gap: 0px;
        --hero-carousel-height: 176px;

        padding: 14px 0 42px;
    }

    .hero-carousel {
        padding: 0 22px;
        margin-bottom: 38px;
    }

    .hero-carousel-slide {
        flex-basis: 100%;
    }

    .hero-carousel-bouton {
        width: 32px;
        height: 32px;

        top: calc(50% - 16px);

        font-size: 16px;
    }

    .hero-carousel-precedent {
        left: 30px;
    }

    .hero-carousel-suivant {
        right: 30px;
    }

    .hero-contenu {
        padding: 0 22px;
    }

    .hero h2 {
        font-size: 13px;
        line-height: 1.35;
    }

    .hero h1 {
        font-size: 34px;
    }

    .hero p {
        font-size: 14px;
    }

    .hero-boutons {
        width: 100%;
        margin-top: 34px;

        flex-direction: column;
        gap: 16px;
    }

    .hero-boutons a {
        width: 100%;
        min-width: 0;
    }

    .hero-localisation {
        flex-wrap: wrap;
        font-size: 11px;
        text-align: center;
    }
}

@media screen and (max-width: 430px) {
    .hero {
        --hero-carousel-height: 165px;
    }

    .hero h1 {
        font-size: 30px;
    }
}

/*-----------BANDE CTA 1 INDEX #PROMO-----------*/

.bande-cta-1 {
    width: 100%;
    height: 41px;
    min-height: 41px;

    margin-top: 45px;
    padding: 0;

    position: sticky;
    top: var(--hauteur-header);
    z-index: 900;

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

    background-color: #0c2033;

    border-top: 1px solid var(--beige-separateur);
    border-bottom: 1px solid var(--beige-separateur);

    box-sizing: border-box;
    overflow: hidden;
}

/* Hachures gauche */
.bande-cta-1::before {
    content: "";

    position: absolute;
    top: 0;
    left: max(0px, calc((100vw - var(--largeur-site)) / 2 - 80px));

    width: 195px;
    height: 100%;

    background-image: url("../patterns/pattern-hachure-beige.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    opacity: 0.05;
    pointer-events: none;
}

/* Hachures droite */
.bande-cta-1::after {
    content: "";

    position: absolute;
    top: 0;
    right: max(0px, calc((100vw - var(--largeur-site)) / 2 - 80px));

    width: 195px;
    height: 100%;

    background-image: url("../patterns/pattern-hachure-beige.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    opacity: 0.1;
    pointer-events: none;
}

/* Contenu */
.bande-cta-1-contenu {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: var(--largeur-site);
    padding: 0 var(--padding-site);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;

    box-sizing: border-box;
}

/* Réduction */
.reduction-cta-1 {
    margin: 0;

    color: #faf7f3;

    font-family: "MontserratSemiBold", "Montserrat", sans-serif;
    font-size: 28px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.3px;

    white-space: nowrap;
}

/* Trait rouge */
.separateur-cta-1 {
    width: 1px;
    height: 28px;

    display: block;
    flex: 0 0 1px;

    background-color: #b0161d;
}

/* Texte principal */
.texte-cta-1 {
    margin: 0;

    color: #faf7f3;

    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1.2px;
    text-transform: uppercase;

    white-space: nowrap;
}

/* Bouton */
.bouton-cta-1 {
    width: 124px;
    height: 30px;

    margin-left: 8px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border: 0.5px solid #b0161d;
    border-radius: 3px;

    color: #faf7f3;
    text-decoration: none;
    text-transform: uppercase;

    font-family: "MontserratSemiBold", "Montserrat", sans-serif;
    font-size: 9px;
    letter-spacing: 0.45px;

    box-sizing: border-box;

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

.bouton-cta-1 img {
    width: 10px;
    height: auto;

    display: block;

    transition: transform 0.22s ease;
}

.bouton-cta-1:hover {
    transform: translateY(-1px);

    background-color: rgba(250, 247, 243, 0.08);
    border-color: #faf7f3;
}

.bouton-cta-1:hover img {
    transform: translateX(4px);
}

/*-----------RESPONSIVE BANDE CTA 1-----------*/

@media screen and (max-width: 900px) {
    .bande-cta-1 {
        height: 44px;
        min-height: 44px;
    }

    .bande-cta-1-contenu {
        padding: 0 22px;
        gap: 18px;
    }

    .reduction-cta-1 {
        font-size: 22px;
    }

    .separateur-cta-1 {
        height: 22px;
    }

    .texte-cta-1 {
        font-size: 13px;
        letter-spacing: 1.2px;
    }

    .bouton-cta-1 {
        width: 116px;
        height: 25px;
        margin-left: 0;
        font-size: 7.5px;
        gap: 10px;
    }

    .bouton-cta-1 img {
        width: 10px;
    }
}


@media screen and (max-width: 650px) {
    .bande-cta-1 {
        height: 42px;
        min-height: 42px;
    }

    .bande-cta-1::before,
    .bande-cta-1::after {
        width: 150px;
        opacity: 0.035;
    }

    .bande-cta-1::before {
        left: -70px;
    }

    .bande-cta-1::after {
        right: -70px;
    }

    .bande-cta-1-contenu {
        padding: 0 18px;
        gap: 14px;
        justify-content: center;
    }

    .reduction-cta-1 {
        font-size: 20px;
    }

    .separateur-cta-1 {
        height: 20px;
    }

    .texte-cta-1 {
        font-size: 11px;
        letter-spacing: 1px;
    }

    .bouton-cta-1 {
        width: 104px;
        height: 24px;
        font-size: 7px;
    }
}


@media screen and (max-width: 520px) {
    .bande-cta-1 {
        height: auto;
        min-height: 42px;
        padding: 7px 0;
    }

    .bande-cta-1-contenu {
        padding: 0 16px;
        gap: 10px;

        display: grid;
        grid-template-columns: auto 1px 1fr auto;
        align-items: center;
    }

    .reduction-cta-1 {
        font-size: 19px;
    }

    .separateur-cta-1 {
        height: 20px;
    }

    .texte-cta-1 {
        min-width: 0;

        font-size: 10px;
        letter-spacing: 0.8px;
        line-height: 1.15;

        white-space: normal;
    }

    .bouton-cta-1 {
        width: 92px;
        height: 24px;

        font-size: 6.5px;
        gap: 7px;
    }

    .bouton-cta-1 img {
        width: 9px;
    }
}


@media screen and (max-width: 390px) {
    .bande-cta-1-contenu {
        grid-template-columns: auto 1px 1fr;
    }

    .bouton-cta-1 {
        display: none;
    }

    .reduction-cta-1 {
        font-size: 18px;
    }

    .texte-cta-1 {
        font-size: 10px;
        letter-spacing: 0.7px;
    }
}


/*-----------SECTION PRODUITS INDEX-----------*/

.section-produits {
    position: relative;

    padding: 75px max(var(--padding-site), calc((100vw - var(--largeur-site)) / 2 + var(--padding-site))) 88px;

    display: grid;
    grid-template-columns: 250px minmax(0, 1080px);
    gap: 62px;
    align-items: center;
    justify-content: center;

    background-color: #faf7f3;

    overflow: hidden;
    box-sizing: border-box;
}

.pattern-produits {
    position: absolute;
    left: 0;
    top: 20px;

    width: auto;
    height: 85%;

    opacity: 0.35;
    z-index: 0;

    pointer-events: none;
}

.nos-produits,
.grille-produits {
    position: relative;
    z-index: 1;

    min-width: 0;
}


/*bloc texte gauche*/

.nos-produits {
    max-width: 230px;
}

.nos-produits h2 {
    margin: 0 0 28px;

    position: relative;

    color: #7a0a0f;

    font-family: "MontserratSemiBold", sans-serif;
    font-size: 26px;
    line-height: 1.15;
}

.nos-produits h2::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -9px;

    width: 32px;
    height: 2px;

    background-color: #7a0a0f;
}

.nos-produits p {
    margin: 0 0 60px;

    color: #0c2033;

    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    line-height: 1.45;
}

.nos-produits a {
    width: 135px;
    height: 38px;

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

    border: 1px solid #0c2033;
    border-radius: 3px;

    color: #0c2033;
    text-decoration: none;

    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: normal;

    box-sizing: border-box;

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

.nos-produits a:hover {
    transform: translateY(-2px);

    background-color: rgba(237, 229, 220, 0.45);
    box-shadow: 0 10px 22px rgba(12, 32, 51, 0.08);
}


/*grille produits*/

.grille-produits {
    width: 100%;
    max-width: 1080px;

    justify-self: end;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}


/*cartes produits*/

.carte-produit {
    position: relative;

    min-width: 0;
    min-height: 220px;
    aspect-ratio: 1 / 0.72;

    display: block;

    background-color: #faf7f3;
    border: 1px solid rgba(12, 32, 51, 0.14);
    border-radius: 7px;

    overflow: hidden;

    color: inherit;
    text-decoration: none;

    box-sizing: border-box;

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

.carte-produit:hover {
    transform: translateY(-2px);

    box-shadow: 0 10px 22px rgba(12, 32, 51, 0.08);
    border-color: rgba(12, 32, 51, 0.20);
}


/*partie haute/pictogrammes*/

.visuel-produit {
    height: 62%;
    padding: 22px;

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

    background-color: #faf7f3;

    box-sizing: border-box;
}

.picto-produit {
    width: auto;
    height: clamp(72px, 5.6vw, 108px);

    display: block;

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

.carte-produit:hover .picto-produit {
    transform: scale(1.012);
}


/*partie basse/zone action*/

.zone-action-produit {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 38%;
    padding: 15px 18px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;

    background-color: #f4eee9;
    border-top: 1px solid rgba(12, 32, 51, 0.08);

    box-sizing: border-box;
}

.zone-action-produit h3 {
    margin: 0;

    color: #0c2033;

    font-family: "MontserratSemiBold", sans-serif;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
}

.action-produit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    color: #7a0a0f;

    font-family: "MontserratSemiBold", sans-serif;
    font-size: 12px;
    line-height: 1;

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

.action-produit img {
    width: 12px;
    height: auto;

    display: block;

    transition: transform 0.38s ease;
}

.carte-produit:hover .action-produit img {
    transform: translateX(4px);
}


/*overlay catalogue/survol partie basse*/

.overlay-produit {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 3;

    height: 38%;

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

    background-color: #f4eee9;
    border-top: 1px solid rgba(12, 32, 51, 0.08);

    opacity: 0;
    overflow: hidden;
    pointer-events: none;

    box-sizing: border-box;

    transition:
        height 0.68s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.34s ease,
        border-top 0.34s ease;
}

.overlay-picto-fond {
    position: absolute;
    left: 50%;
    top: 50%;

    width: 46%;
    height: auto;

    opacity: 0;

    transform: translate(-50%, -50%) scale(1.08);

    pointer-events: none;

    transition:
        opacity 0.48s ease 0.12s,
        transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);
}

.overlay-message {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;

    color: #0c2033;

    font-family: "MontserratSemiBold", sans-serif;
    text-align: center;

    opacity: 0;
    transform: translateY(26px);

    transition:
        opacity 0.42s ease 0.16s,
        transform 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.overlay-message strong {
    color: #0c2033;

    font-family: "MontserratSemiBold", sans-serif;
    font-size: 13px;
    line-height: 1.2;
}

.overlay-message img {
    width: 30px;
    height: auto;

    display: block;
}

.overlay-message span {
    max-width: 170px;

    color: #0c2033;

    font-family: "MontserratSemiBold", sans-serif;
    font-size: 14px;
    line-height: 1.35;
}


/*activation de l’overlay au survol de la partie basse*/

.zone-action-produit:hover ~ .overlay-produit,
.carte-produit.is-action-hover .overlay-produit {
    height: 100%;

    opacity: 1;
    border-top: 0;
}

.zone-action-produit:hover ~ .overlay-produit .overlay-picto-fond,
.carte-produit.is-action-hover .overlay-picto-fond {
    opacity: 0.045;

    transform: translate(-50%, -50%) scale(1.16);
}

.zone-action-produit:hover ~ .overlay-produit .overlay-message,
.carte-produit.is-action-hover .overlay-message {
    opacity: 1;
    transform: translateY(-10px);
}


/*responsive produits*/

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

    .section-produits {
        padding: 70px var(--padding-site) 85px;

        grid-template-columns: minmax(0, 1fr);
        gap: 45px;

        align-items: start;
        justify-content: stretch;
    }

    .nos-produits {
        max-width: 620px;
    }

    .nos-produits p {
        margin-bottom: 32px;
    }

    .grille-produits {
        max-width: 1080px;

        justify-self: center;

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


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

    .grille-produits {
        max-width: 760px;

        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }
}


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

    .section-produits {
        padding: 60px 22px 75px;
    }

    .grille-produits {
        width: 100%;
        max-width: 430px;

        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .carte-produit {
        min-height: 250px;
        aspect-ratio: auto;
    }

    .visuel-produit {
        height: 60%;
    }

    .zone-action-produit,
    .overlay-produit {
        height: 40%;
    }

    .picto-produit {
        height: 105px;
    }

    .zone-action-produit h3 {
        font-size: 13px;
    }

    .overlay-message strong {
        font-size: 13px;
    }

    .overlay-message span {
        font-size: 14px;
    }
}


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

    .carte-produit {
        min-height: 235px;
    }

    .picto-produit {
        height: 92px;
    }
}



/*-----------SECTION NOS SERVICES / NOS OPTIONS INDEX-----------*/

.section-services-options {
    max-width: 1520px;
    margin: 95px auto;
    padding: 0 32px;

    display: flex;
    gap: 40px;
    align-items: stretch;

    box-sizing: border-box;
}

/* Commun aux deux blocs */

.bloc-services,
.bloc-options {
    flex: 1;
    min-width: 0;
    min-height: 470px;

    border-radius: 12px;

    box-sizing: border-box;
}

.bloc-services {
    background-color: #0c2033;
}

.bloc-options {
    background-color: #f4eee9;
}

.bloc-services h2,
.bloc-options h2 {
    margin: 0 0 30px;

    position: relative;

    font-family: "MontserratSemiBold", sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.bloc-services h2 {
    color: #faf7f3;
}

.bloc-options h2 {
    color: #7a0a0f;
}

.bloc-services h2::after,
.bloc-options h2::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -10px;

    width: 30px;
    height: 2px;

    background-color: #7a0a0f;
}

.carte-creation-fabrication,
.carte-installation-desinstallation,
.carte-transport,
.bouton-planifier-point-projet,
.bouton-livraison-kit,
.bouton-packs {
    color: inherit;
    text-decoration: none;
    outline: none;
}

.carte-creation-fabrication img,
.carte-installation-desinstallation img,
.carte-transport img,
.bouton-planifier-point-projet img,
.bouton-livraison-kit img,
.bouton-packs img {
    border: 0;
    outline: none;
}

.fleche-droite-rouge img,
.bouton-planifier-point-projet img,
.bouton-livraison-kit img,
.bouton-packs img {
    display: none;
}


/*---BLOC NOS SERVICES---*/

.bloc-services {
    padding: 28px 32px 30px;

    display: flex;
    flex-direction: column;
    gap: 18px;
}

.carte-creation-fabrication,
.carte-installation-desinstallation,
.carte-transport {
    height: 118px;
    min-height: 118px;
    padding: 18px 24px;

    display: grid;
    grid-template-columns: 120px 1fr 24px;
    align-items: center;
    column-gap: 22px;

    background-color: #faf7f3;
    border-radius: 6px;

    text-decoration: none;
    box-sizing: border-box;
}

.carte-creation-fabrication > img,
.carte-installation-desinstallation > img,
.carte-transport > img {
    width: 110px;
    height: 82px;

    object-fit: contain;

    border: none;
    display: block;

    align-self: center;
    justify-self: center;
}

.contenu-creation-fabrication h3,
.contenu-installation-desinstallation h3,
.contenu-transport h3 {
    margin: 0 0 4px 18px;

    font-family: "MontserratSemiBold", sans-serif;
    font-size: 16px;

    color: #0c2033;
}

.contenu-creation-fabrication p,
.contenu-installation-desinstallation p,
.contenu-transport p {
    margin: 0 0 0 18px;

    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    line-height: 1.45;

    color: #25384b;
}

.fleche-droite-rouge {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fleche-droite-rouge img {
    width: 18px;
    height: auto;

    display: block;
}


/*---BLOC NOS OPTIONS---*/

.bloc-options {
    padding: 32px;

    display: grid;
    grid-template-columns: 1fr 1.25fr;
    grid-template-rows: auto 1fr 1fr;
    gap: 20px;

    box-sizing: border-box;
}

.bloc-options h2 {
    grid-column: 1 / 3;
}

/* Carte planifier */
.planifier-point-projet {
    grid-column: 1;
    grid-row: 2 / 4;

    padding: 24px;

    display: flex;
    flex-direction: column;

    background-color: #faf7f3;
    border: 1px solid rgba(12, 32, 51, 0.10);
    border-radius: 6px;

    box-sizing: border-box;
}

.planifier-point-projet > img {
    width: 76px;
    height: auto;

    display: block;
}

.contenu-planifier-point-projet h3 {
    margin: 0 0 12px;
    padding-top: 22px;

    font-family: "MontserratSemiBold", sans-serif;
    font-size: 16px;
    line-height: 1.25;

    color: #0c2033;
}

.contenu-planifier-point-projet ul {
    margin: 14px 0 0;
    padding: 0;

    list-style: none;

    display: flex;
    flex-direction: column;
    gap: 6px;

    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    line-height: 1.45;

    color: #25384b;
}

.contenu-planifier-point-projet li {
    margin-bottom: 2px;
}

.bouton-planifier-point-projet {
    margin-top: auto;

    height: 42px;
    padding: 0 18px;

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

    background-color: #b0161d;
    border-radius: 4px;

    text-decoration: none;
    box-sizing: border-box;
}

.bouton-planifier-point-projet span {
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    color: #faf7f3;
}

.bouton-planifier-point-projet img {
    width: 12px;
    height: auto;
    display: block;
}

/* Petites cartes options */

.livraison-kit,
.packs {
    grid-column: 2;

    min-height: 128px;
    padding: 22px 24px;

    display: grid;
    grid-template-columns: 95px 1fr;
    grid-template-rows: 1fr auto;
    column-gap: 22px;

    background-color: #faf7f3;
    border: 1px solid rgba(12, 32, 51, 0.10);
    border-radius: 6px;

    box-sizing: border-box;
}

.livraison-kit {
    grid-row: 2;
}

.packs {
    grid-row: 3;
}

.livraison-kit > img,
.packs > img {
    grid-column: 1;
    grid-row: 1 / 3;

    width: 76px;
    height: auto;

    align-self: center;
    justify-self: center;

    display: block;
}

.contenu-livraison-kit,
.contenu-packs {
    grid-column: 2;
    grid-row: 1;

    display: flex;
    flex-direction: column;
}

.contenu-livraison-kit h3,
.contenu-packs h3 {
    margin: 0 0 10px;

    font-family: "MontserratSemiBold", sans-serif;
    font-size: 16px;

    color: #0c2033;
}

.contenu-livraison-kit p,
.contenu-packs p {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    line-height: 1.45;

    color: #25384b;
}

.bouton-livraison-kit,
.bouton-packs {
    grid-column: 1 / 3;
    grid-row: 2;

    width: 150px;
    height: 26px;

    margin: 14px auto 0;

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

    text-decoration: none;
    box-sizing: border-box;
}

.bouton-livraison-kit span,
.bouton-packs span {
    font-family: "MontserratSemiBold", sans-serif;
    font-size: 11px;

    color: #b0161d;
}

.bouton-livraison-kit img,
.bouton-packs img {
    width: 11px;
    height: auto;

    display: block;
}

/*aniation de survol cartes &boutons nos services & nos options*/

/* Animation cartes Nos services */
.carte-creation-fabrication,
.carte-installation-desinstallation,
.carte-transport {
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease;
}

.carte-creation-fabrication:hover,
.carte-installation-desinstallation:hover,
.carte-transport:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(12, 32, 51, 0.12);
}

/* Animation pictos Nos services */
.carte-creation-fabrication > img,
.carte-installation-desinstallation > img,
.carte-transport > img {
    transition: transform 0.28s ease;
}

.carte-creation-fabrication:hover > img,
.carte-installation-desinstallation:hover > img,
.carte-transport:hover > img {
    transform: scale(1.015);
}

/* Animation flèches Nos services */
.fleche-droite-rouge img {
    transition: transform 0.22s ease;
}

.carte-creation-fabrication:hover .fleche-droite-rouge img,
.carte-installation-desinstallation:hover .fleche-droite-rouge img,
.carte-transport:hover .fleche-droite-rouge img {
    transform: translateX(4px);
}


/* Animation cartes Nos options */
.planifier-point-projet,
.livraison-kit,
.packs {
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.planifier-point-projet:hover,
.livraison-kit:hover,
.packs:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(12, 32, 51, 0.08);
    border-color: rgba(12, 32, 51, 0.18);
}

/* Animation pictos Nos options */
.planifier-point-projet > img,
.livraison-kit > img,
.packs > img {
    transition: transform 0.28s ease;
}

.planifier-point-projet:hover > img,
.livraison-kit:hover > img,
.packs:hover > img {
    transform: scale(1.015);
}


/* Animation bouton Planifier */
.bouton-planifier-point-projet {
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease;
}

.bouton-planifier-point-projet:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(12, 32, 51, 0.16);
    background-color: #9f1118;
}

.bouton-planifier-point-projet img {
    transition: transform 0.22s ease;
}

.bouton-planifier-point-projet:hover img {
    transform: translateX(4px);
}


/* Animation boutons En savoir plus */
.bouton-livraison-kit,
.bouton-packs {
    transition:
        transform 0.22s ease,
        color 0.22s ease;
}

.bouton-livraison-kit:hover,
.bouton-packs:hover {
    transform: translateY(-2px);
}

.bouton-livraison-kit img,
.bouton-packs img {
    transition: transform 0.22s ease;
}

.bouton-livraison-kit:hover img,
.bouton-packs:hover img {
    transform: translateX(4px);
}

/*-----------RESPONSIVE SERVICES / OPTIONS : VERSION RÉDUITE PROPRE-----------*/

/* Écran moyen : les deux grands blocs passent en colonne, mais gardent leur mise en page interne */
@media screen and (max-width: 1350px) {
    .section-services-options {
        width: 100%;
        max-width: var(--largeur-site);

        margin: 70px auto;
        padding: 0 var(--padding-site);

        display: grid;
        grid-template-columns: 1fr;
        gap: 36px;

        box-sizing: border-box;
    }

    .bloc-services,
    .bloc-options {
        width: 100%;
        min-width: 0;
        min-height: auto;
    }

    /* Bloc services */
    .bloc-services {
        padding: 26px 28px 28px;
        gap: 14px;
    }

    .carte-creation-fabrication,
    .carte-installation-desinstallation,
    .carte-transport {
        height: 104px;
        min-height: 104px;

        padding: 16px 20px;

        display: grid;
        grid-template-columns: 100px 1fr 22px;
        align-items: center;
        column-gap: 18px;
    }

    .carte-creation-fabrication > img,
    .carte-installation-desinstallation > img,
    .carte-transport > img {
        width: 92px;
        height: 72px;
        object-fit: contain;
    }

    .contenu-creation-fabrication h3,
    .contenu-installation-desinstallation h3,
    .contenu-transport h3 {
        margin-left: 0;
        font-size: 15px;
        line-height: 1.15;
    }

    .contenu-creation-fabrication p,
    .contenu-installation-desinstallation p,
    .contenu-transport p {
        margin-left: 0;
        font-size: 10.5px;
        line-height: 1.35;
    }

    .fleche-droite-rouge img {
        width: 15px;
    }

    /* Bloc options : on garde la composition originale, mais réduite */
    .bloc-options {
        padding: 28px;

        display: grid;
        grid-template-columns: 1fr 1.25fr;
        grid-template-rows: auto 1fr 1fr;
        gap: 18px;
    }

    .bloc-options h2 {
        grid-column: 1 / 3;
    }

    .planifier-point-projet {
        grid-column: 1;
        grid-row: 2 / 4;

        padding: 22px;
        min-height: auto;
    }

    .planifier-point-projet > img {
        width: 68px;
    }

    .contenu-planifier-point-projet h3 {
        font-size: 15px;
        line-height: 1.2;
        padding-top: 20px;
    }

    .contenu-planifier-point-projet ul {
        font-size: 10.5px;
        line-height: 1.35;
        gap: 4px;
    }

    .bouton-planifier-point-projet {
        height: 38px;
        padding: 0 14px;
    }

    .bouton-planifier-point-projet span {
        font-size: 10.5px;
    }

    .livraison-kit,
    .packs {
        grid-column: 2;

        min-height: 116px;
        padding: 18px 20px;

        display: grid;
        grid-template-columns: 82px 1fr;
        grid-template-rows: 1fr auto;
        column-gap: 18px;
    }

    .livraison-kit {
        grid-row: 2;
    }

    .packs {
        grid-row: 3;
    }

    .livraison-kit > img,
    .packs > img {
        grid-column: 1;
        grid-row: 1 / 3;

        width: 68px;
        height: auto;

        align-self: center;
        justify-self: center;
    }

    .contenu-livraison-kit,
    .contenu-packs {
        grid-column: 2;
        grid-row: 1;
    }

    .contenu-livraison-kit h3,
    .contenu-packs h3 {
        font-size: 15px;
        line-height: 1.2;
    }

    .contenu-livraison-kit p,
    .contenu-packs p {
        font-size: 10.5px;
        line-height: 1.35;
    }

    .bouton-livraison-kit,
    .bouton-packs {
        grid-column: 1 / 3;
        grid-row: 2;

        width: 140px;
        height: 24px;

        margin: 12px auto 0;
    }

    .bouton-livraison-kit span,
    .bouton-packs span {
        font-size: 10.5px;
    }
}


/* Petite tablette : les options passent en colonne, mais restent compactes */
@media screen and (max-width: 850px) {
    .section-services-options {
        padding: 0 22px;
        margin: 58px auto;
        gap: 32px;
    }

    .bloc-services {
        padding: 24px 24px 26px;
    }

    .bloc-options {
        padding: 24px;

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 16px;
    }

    .bloc-options h2 {
        grid-column: auto;
    }

    .planifier-point-projet,
    .livraison-kit,
    .packs {
        grid-column: auto;
        grid-row: auto;
    }

    /* Services : toujours horizontal, juste réduit */
    .carte-creation-fabrication,
    .carte-installation-desinstallation,
    .carte-transport {
        height: 96px;
        min-height: 96px;

        grid-template-columns: 88px 1fr 20px;
        column-gap: 16px;

        padding: 14px 16px;
    }

    .carte-creation-fabrication > img,
    .carte-installation-desinstallation > img,
    .carte-transport > img {
        width: 78px;
        height: 62px;
    }

    .contenu-creation-fabrication h3,
    .contenu-installation-desinstallation h3,
    .contenu-transport h3 {
        font-size: 14px;
    }

    .contenu-creation-fabrication p,
    .contenu-installation-desinstallation p,
    .contenu-transport p {
        font-size: 10px;
    }

    /* Options : cartes horizontales compactes */
    .planifier-point-projet {
        padding: 20px;
    }

    .livraison-kit,
    .packs {
        min-height: 108px;

        display: grid;
        grid-template-columns: 82px 1fr;
        grid-template-rows: auto auto;
        column-gap: 16px;

        padding: 18px;
    }

    .livraison-kit > img,
    .packs > img {
        grid-column: 1;
        grid-row: 1 / 3;

        width: 66px;
    }

    .contenu-livraison-kit,
    .contenu-packs {
        grid-column: 2;
        grid-row: 1;
    }

    .bouton-livraison-kit,
    .bouton-packs {
        grid-column: 2;
        grid-row: 2;

        margin: 12px 0 0;
        justify-content: flex-start;
    }
}


/* Mobile : on réduit encore, mais on ne casse pas tout en vertical trop tôt */
@media screen and (max-width: 560px) {
    .section-services-options {
        padding: 0 18px;
        margin: 50px auto;
        gap: 28px;
    }

    .bloc-services,
    .bloc-options {
        border-radius: 8px;
    }

    .bloc-services {
        padding: 22px 16px 22px;
    }

    .bloc-options {
        padding: 22px 16px 22px;
    }

    .bloc-services h2,
    .bloc-options h2 {
        font-size: 15px;
    }

    /* Services : mini cartes horizontales */
    .carte-creation-fabrication,
    .carte-installation-desinstallation,
    .carte-transport {
        height: 90px;
        min-height: 90px;

        grid-template-columns: 72px 1fr 18px;
        column-gap: 12px;

        padding: 12px;
    }

    .carte-creation-fabrication > img,
    .carte-installation-desinstallation > img,
    .carte-transport > img {
        width: 64px;
        height: 54px;
    }

    .contenu-creation-fabrication h3,
    .contenu-installation-desinstallation h3,
    .contenu-transport h3 {
        font-size: 13px;
        line-height: 1.15;
    }

    .contenu-creation-fabrication p,
    .contenu-installation-desinstallation p,
    .contenu-transport p {
        font-size: 9px;
        line-height: 1.25;
    }

    .fleche-droite-rouge img {
        width: 13px;
    }

    /* Options compactes */
    .planifier-point-projet {
        padding: 18px;
    }

    .planifier-point-projet > img {
        width: 58px;
    }

    .contenu-planifier-point-projet h3 {
        font-size: 14px;
        padding-top: 16px;
    }

    .contenu-planifier-point-projet ul {
        font-size: 9.5px;
    }

    .bouton-planifier-point-projet {
        height: 34px;
        margin-top: 20px;
    }

    .bouton-planifier-point-projet span {
        font-size: 9.5px;
    }

    .livraison-kit,
    .packs {
        min-height: 100px;

        grid-template-columns: 68px 1fr;
        column-gap: 12px;

        padding: 16px 14px;
    }

    .livraison-kit > img,
    .packs > img {
        width: 58px;
    }

    .contenu-livraison-kit h3,
    .contenu-packs h3 {
        font-size: 14px;
        line-height: 1.15;
    }

    .contenu-livraison-kit p,
    .contenu-packs p {
        font-size: 9.5px;
        line-height: 1.25;
    }

    .bouton-livraison-kit,
    .bouton-packs {
        width: auto;
        height: 22px;
        margin-top: 10px;
    }

    .bouton-livraison-kit span,
    .bouton-packs span {
        font-size: 9.5px;
    }
}



/*-----------RESSOURCES / À DÉCOUVRIR EN CE MOMENT INDEX-----------*/

.section-ressources-decouverte {
    --hauteur-cartes-home: 390px;

    max-width: var(--largeur-site);
    margin: 0 auto;
    padding: 70px var(--padding-site) 85px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: start;

    background-color: #faf7f3;
    box-sizing: border-box;
}

.bloc-home-cartes {
    min-width: 0;
}

.bloc-home-cartes h2 {
    margin: 0 0 34px;

    position: relative;

    color: #7a0a0f;
    font-family: "MontserratSemiBold", sans-serif;
    font-size: 18px;
    line-height: 1.2;
}

.bloc-home-cartes h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;

    width: 32px;
    height: 2px;

    background-color: #7a0a0f;
}


/*CARTES COMMUNES*/

.carte-home {
    min-width: 0;

    display: flex;
    flex-direction: column;

    background-color: #faf7f3;
    border: 1px solid rgba(12, 32, 51, 0.10);
    border-radius: 6px;

    overflow: hidden;

    color: inherit;
    text-decoration: none;

    box-sizing: border-box;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.carte-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(12, 32, 51, 0.08);
}

.visuel-carte-home {
    width: 100%;

    background-color: #faf7f3;
    overflow: hidden;
}

.visuel-carte-home img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;

    transition: transform 0.28s ease;
}

.carte-home:hover .visuel-carte-home img {
    transform: scale(1.015);
}

.contenu-carte-home {
    flex: 1;

    padding: 20px 20px 18px;

    display: flex;
    flex-direction: column;

    background-color: #f4eee9;
    box-sizing: border-box;
}

.contenu-carte-home h3 {
    margin: 0;

    color: #0c2033;
    font-family: "MontserratSemiBold", sans-serif;
    font-size: 13px;
    line-height: 1.35;
}

.contenu-carte-home p {
    margin: 12px 0 0;

    color: #0c2033;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    line-height: 1.55;
}

.fleche-carte-home {
    width: 22px;
    height: 14px;

    margin-top: auto;
    align-self: flex-end;

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

    transform: translateX(0);
    transition: transform 0.22s ease;
}

.fleche-carte-home img {
    width: 100%;
    height: auto;

    display: block;
}

.carte-home:hover .fleche-carte-home {
    transform: translateX(4px);
}


/*-----------BLOC RESSOURCES-----------*/

.grille-ressources {
    height: var(--hauteur-cartes-home);

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.carte-ressource {
    height: 100%;
}

.carte-ressource .visuel-carte-home {
    height: 54%;
}

.carte-ressource .contenu-carte-home {
    min-height: 46%;
}


/*-----------BLOC À DÉCOUVRIR EN CE MOMENT-----------*/

.grille-decouverte {
    height: var(--hauteur-cartes-home);

    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 14px;
}

.carte-decouverte-large {
    grid-row: 1 / 3;
}

.carte-decouverte-large .visuel-carte-home,
.carte-decouverte:not(.carte-decouverte-large) .visuel-carte-home {
    height: 54%;
}

.carte-decouverte-large .contenu-carte-home,
.carte-decouverte:not(.carte-decouverte-large) .contenu-carte-home {
    min-height: 46%;
}

.carte-decouverte .contenu-carte-home h3,
.carte-ressource .contenu-carte-home h3 {
    font-size: 13px;
    line-height: 1.35;
}


/*-----------RESPONSIVE-----------*/

@media screen and (max-width: 1150px) {
    .section-ressources-decouverte {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .grille-ressources,
    .grille-decouverte {
        height: auto;
    }

    .carte-ressource,
    .carte-decouverte {
        min-height: 280px;
    }

    .carte-decouverte-large {
        grid-row: auto;
    }

    .grille-decouverte {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .carte-decouverte-large {
        grid-column: 1 / 3;
    }

    .carte-decouverte-large .visuel-carte-home {
        height: 260px;
    }
}

@media screen and (max-width: 760px) {
    .section-ressources-decouverte {
        padding: 55px 22px 70px;
        gap: 45px;
    }

    .grille-ressources,
    .grille-decouverte {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .carte-decouverte-large {
        grid-column: auto;
    }

    .carte-ressource,
    .carte-decouverte {
        min-height: auto;
    }

    .carte-ressource .visuel-carte-home,
    .carte-decouverte .visuel-carte-home,
    .carte-decouverte-large .visuel-carte-home {
        height: 210px;
    }

    .contenu-carte-home {
        min-height: 150px;
        padding: 20px 20px 18px;
    }

    .bloc-home-cartes h2 {
        font-size: 17px;
    }
}



/*-----------BANDE CTA 2 INDEX #CONTACT-----------*/

.bande-cta-2 {
    position: relative;

    min-height: 86px;
    padding: 18px 0;

    display: flex;
    align-items: center;

    background-color: #0c2033;
    overflow: hidden;

    box-sizing: border-box;
}

/* Contenu dans la zone de build */
.bande-cta-2-interieur {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: var(--largeur-site);
    margin: 0 auto;
    padding: 0 var(--padding-site);

    display: grid;
    grid-template-columns: 270px 440px auto;
    align-items: center;
    justify-content: center;
    gap: 52px;

    box-sizing: border-box;
}

/* Hachures à gauche */
.bande-cta-2::before {
    content: "";
    position: absolute;
    top: 0;
    left: max(0px, calc((100vw - var(--largeur-site)) / 2 - 80px));

    width: 260px;
    height: 100%;

    background-image: url("../patterns/pattern-hachure-beige.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    


    opacity: 0.05;
    pointer-events: none;
}

/* Texte principal */
.bande-cta-2-texte {
    display: contents;
}

.bande-cta-2-texte h2 {
    margin: 0;

    position: relative;

    color: #faf7f3;
    font-family: "MontserratSemiBold", sans-serif;
    font-size: clamp(22px, 1.8vw, 32px);
    line-height: 1.05;
    white-space: nowrap;
}

.bande-cta-2-texte h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;

    width: 38px;
    height: 2px;

    background-color: #b0161d;
}

.bande-cta-2-texte p {
    margin: 0;

    max-width: 420px;

    color: #faf7f3;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(11px, 0.75vw, 14px);
    line-height: 1.45;
}

/* Zone actions */
.bande-cta-2-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
}

.action-cta-2 {
    display: flex;
    align-items: center;
    gap: 14px;

    color: #faf7f3;
    text-decoration: none;

    user-select: none;
}

.icone-action-cta-2 {
    width: 42px;
    height: 42px;

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

    border: 1.5px solid #faf7f3;
    border-radius: 50%;

    box-sizing: border-box;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease;
}

.icone-action-cta-2 img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

.texte-action-cta-2 {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.texte-action-cta-2 strong {
    color: #faf7f3;
    font-family: "MontserratSemiBold", sans-serif;
    font-size: 12px;
    line-height: 1;
}

.texte-action-cta-2 img {
    width: 16px;
    height: auto;

    display: block;

    transition: transform 0.22s ease;
}

.action-cta-2:hover .icone-action-cta-2 {
    transform: translateY(-2px);
    border-color: #b0161d;
}

.action-cta-2:hover .texte-action-cta-2 img {
    transform: translateX(4px);
}

/* Trait entre les deux boutons */
.separateur-cta-2 {
    width: 1px;
    height: 48px;

    display: block;

    background-color: rgba(250, 247, 243, 0.45);
}

/* Emblème rouge à droite */
.embleme-cta-2 {
    position: absolute;
    z-index: 1;

    right: max(-62px, calc((100vw - var(--largeur-site)) / 2 - 105px));
    top: 50%;

    width: 165px;
    height: auto;

    opacity: 0.4;

    transform: translateY(-50%) rotate(90deg);

    pointer-events: none;
}

/*-----------RESPONSIVE BANDE CTA 2-----------*/

@media screen and (max-width: 1100px) {
    .bande-cta-2 {
        min-height: auto;
        padding: 26px 0;
    }

    .bande-cta-2-interieur {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .bande-cta-2-texte {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 34px;
    }

    .bande-cta-2-actions {
        justify-content: flex-start;
    }

    .embleme-cta-2 {
        right: -35px;
        width: 120px;
    }
}

@media screen and (max-width: 650px) {
    .bande-cta-2 {
        padding: 30px 0 38px;
    }

    .bande-cta-2-interieur {
        padding: 0 24px;
    }

    .bande-cta-2-texte {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .bande-cta-2-texte h2 {
        font-size: 24px;
        white-space: normal;
    }

    .bande-cta-2-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .separateur-cta-2 {
        display: none;
    }

    .icone-action-cta-2 {
        width: 40px;
        height: 40px;
    }

    .texte-action-cta-2 strong {
        font-size: 12px;
    }

    .embleme-cta-2 {
        width: 95px;
        right: -30px;
        bottom: -24px;
        top: auto;

        transform: none;
    }
}













/*-----------SECTION ZONE / RÉALISATIONS INDEX-----------*/

.section-zone-realisations {
    max-width: var(--largeur-site);
    margin: 0 auto;
    padding: 70px var(--padding-site) 85px;

    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 55px;

    background-color: #faf7f3;
    box-sizing: border-box;
}

/* Séparateur vertical entre les deux blocs */
.bloc-realisations-apercu {
    padding-left: 55px;
    border-left: 1px solid rgba(12, 32, 51, 0.10);
}

.bloc-zone-intervention,
.bloc-realisations-apercu {
    min-width: 0;
}

/* Titres */
.bloc-zone-intervention h2,
.bloc-realisations-apercu h2 {
    margin: 0 0 32px;

    position: relative;

    color: #7a0a0f;
    font-family: "MontserratSemiBold", sans-serif;
    font-size: 18px;
    line-height: 1.2;
}

.bloc-zone-intervention h2::after,
.bloc-realisations-apercu h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;

    width: 32px;
    height: 2px;

    background-color: #7a0a0f;
}


/*-----------ZONE D'INTERVENTION-----------*/

.carte-zone-intervention {
    aspect-ratio: 2 / 1;
    height: auto;

    display: block;

    background-color: #faf7f3;
    border: 1px solid rgba(12, 32, 51, 0.10);
    border-radius: 6px;

    overflow: hidden;

    text-decoration: none;
    box-sizing: border-box;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.carte-zone-intervention img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;

    transition: transform 0.28s ease;
}

.carte-zone-intervention:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(12, 32, 51, 0.08);
}

.carte-zone-intervention:hover img {
    transform: scale(1.015);
}


/*-----------CAROUSEL RÉALISATIONS-----------*/

.carousel-realisations {
    position: relative;

    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    gap: 12px;
}

.carousel-realisations-fenetre {
    overflow: hidden;
}

.carousel-realisations-piste {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 32px) / 3);
    gap: 16px;

    transition: transform 0.35s ease;
}

.carte-realisation-apercu {
    aspect-ratio: 1 / 1;
    height: auto;

    display: block;

    background-color: #faf7f3;
    border: 1px solid rgba(12, 32, 51, 0.10);
    border-radius: 6px;

    overflow: hidden;

    text-decoration: none;
    box-sizing: border-box;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.carte-realisation-apercu img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;

    transition: transform 0.28s ease;
}

.carte-realisation-apercu:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(12, 32, 51, 0.08);
}

.carte-realisation-apercu:hover img {
    transform: scale(1.015);
}


/* Flèches carousel */

.bouton-carousel {
    width: 34px;
    height: 60px;

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

    background-color: transparent;
    border: none;

    color: #7a0a0f;
    font-family: "MontserratSemiBold", sans-serif;
    font-size: 42px;
    line-height: 1;

    cursor: pointer;
    user-select: none;

    transition:
        transform 0.22s ease,
        color 0.22s ease,
        opacity 0.22s ease;
}

.bouton-carousel:hover {
    transform: translateY(-2px);
    color: #b0161d;
}

.bouton-carousel:disabled {
    opacity: 0.25;
    cursor: default;
    transform: none;
}


/* Points + bouton voir tout */

.realisations-bas {
    margin-top: 26px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.points-carousel-realisations {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;

    line-height: 0;
    font-size: 0;
}

.point-carousel {
    width: 8px;
    height: 8px;

    display: block;
    flex: 0 0 8px;

    border: none;
    outline: none;
    border-radius: 50%;

    background-color: rgba(12, 32, 51, 0.25);

    cursor: pointer;

    transition:
        background-color 0.22s ease,
        transform 0.22s ease;
}

.point-carousel.actif {
    background-color: #7a0a0f;
    transform: scale(1.15);
}

.bouton-voir-tout-realisations {
    width: 120px;
    height: 34px;

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

    border: 1px solid #0c2033;
    border-radius: 3px;

    color: #0c2033;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 12px;
    text-decoration: none;

    box-sizing: border-box;

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

.bouton-voir-tout-realisations:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(12, 32, 51, 0.08);
    background-color: rgba(237, 229, 220, 0.45);
}


/*-----------RESPONSIVE ZONE / RÉALISATIONS-----------*/

@media screen and (max-width: 1100px) {
    .section-zone-realisations {
        grid-template-columns: 1fr;
        gap: 55px;
        padding: 60px var(--padding-site) 75px;
    }

    .bloc-realisations-apercu {
        padding-left: 0;
        border-left: none;
    }

    .carousel-realisations-piste {
        grid-auto-columns: calc((100% - 16px) / 2);
    }
}

@media screen and (max-width: 650px) {
    .section-zone-realisations {
        padding: 50px 22px 65px;
    }

    .carousel-realisations {
        grid-template-columns: 28px 1fr 28px;
        gap: 8px;
    }

    .carousel-realisations-piste {
        grid-auto-columns: 100%;
    }

    .carte-zone-intervention,
    .carte-realisation-apercu {
        height: 220px;
    }

    .bouton-carousel {
        width: 28px;
        font-size: 34px;
    }

    .bloc-zone-intervention h2,
    .bloc-realisations-apercu h2 {
        font-size: 17px;
    }
}

/*-----------RESPONSIVE ZONE / RÉALISATIONS-----------*/

@media screen and (max-width: 900px) {
    .section-zone-realisations {
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 60px 40px 75px;
    }

    .bloc-realisations-apercu {
        padding-left: 0;
        border-left: none;
    }

    .carte-zone-intervention {
        height: 190px;
    }
}

@media screen and (max-width: 620px) {
    .section-zone-realisations {
        padding: 50px 22px 65px;
    }

    .grille-realisations-apercu {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .carte-zone-intervention,
    .carte-realisation-apercu {
        height: 190px;
    }

    .bloc-zone-intervention h2,
    .bloc-realisations-apercu h2 {
        font-size: 17px;
    }
}