body > .offers {
    background-color: var(--tColorLight);
    background-image: url(../../img/backgrounds/triangle.svg);
    background-position: 50% -40%;
    background-repeat: no-repeat;
    background-size: 130%;
    margin-inline: 0;
    padding: 8.5vw 0 8.5vw 8.5vw;
}
body > .offers--frontpage {
    background-position: 50% -30%;
}
.offers__header {
    margin-top: 5vw;
    padding-right: 5vw;
}

.offers {
    display: flex;
    flex-direction: column;
    gap: 7.5vw;
}
.offers .introduction {
    width: 65%;
}
.offers__container {
    display: flex;
    flex-direction: row;
    gap: 6.5vw;
    overflow-x: scroll;
    -ms-overflow-style: none;
    padding-right: 8.5vw;
    scrollbar-width: none;
}
.offers__container::-webkit-scrollbar {
    display: none;
}
.offers .title--frontpage::after {
    aspect-ratio: 112/136;
    background-image: url(../../img/masks/hexagon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    display: block;
    position: absolute;
    right: 3vw;
    top: -9vw;
    transform: rotate(80deg);
    width: 3.75rem;
}

body > .offers--second {
    background-color: unset;
    background-image: url(../../img/backgrounds/offersSecondBackground.svg);
    background-position: 40% 57%;
    background-size: 545%;
    padding-bottom: 35vw;
}
.offers--second .introduction {
    width: 87.5%;
}
.offers--second > .headerPart > .title {
    font-size: calc(var(--fsCorps) * 2);
    hyphens: auto;
    line-height: calc(var(--fsSubtitle) * 2);
    word-break: break-word;
}
.offers--second .category {
    margin-bottom: -1.5vw;
    margin-top: 15vw;
}
.offers--second .title--frontpage::after {
    display: none;
}

/* -- -- -- -- -- OFFER CARD -- -- -- -- --  */

.offer {
    background-color: var(--whiteBis);
    display: flex;
    flex: 0 0 79.5%;
    flex-direction: column;
    width: 100%;
}
.offer:last-child {
    margin-right: 8.5vw;
}
.offer__illustration {
    aspect-ratio: 1/1;
    width: 100%;
}
.offer__legend {
    display: flex;
    flex-direction: column;
    gap: var(--fsCorpsLess);
    height: 100%;
    justify-content: space-between;
    padding: 5vw;
}

.offer__content {
    display: flex;
    flex-direction: column;
    gap: var(--fsCorpsLess);
}
.offer__description {
    color: var(--mColor);
    font-family: var(--ffMBo);
    font-size: var(--fsCorpsLess);
    line-height: 1.375rem;
    text-transform: uppercase;
}
.offer__name--big {
    display: none;
}
.offer__gradient {
    position: relative;
}
.illustration__color {
    background: rgb(14,56,67); 
    background: linear-gradient(180deg, rgba(14,56,67,0) 0%,rgba(14,56,67,0) 60%, rgba(14,56,67,0.6214041804635762) 80%, rgba(14,56,67,1) 100%);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

body > .offers--offre {
    background-position: 40% 137%;
}

.offers .button:not(.offers .button--white) {
    width: 90%;
}
.offers--second .offers__header .button {
    display: none;
    width: fit-content;
}

@media screen and (min-width: 449.98px) {
    body > .offers--frontpage {
        background-position: 60% -37%;
    }
    body > .offers--second {
        background-size: 370%;
    }
}

@media screen and (min-width: 575.98px) {
    body > .offers {
        background-position: 80% -90%;
        background-size: 125%;
    }
    body > .offers--second {
        background-position: 43% 80%;
        background-size: 280%;
    }
    body > .offers--offre {
        background-position: 43% 56%;
        background-size: 340%;
    }
    .offers--frontpage .introduction {
        width: 55%;
    }
    .offers--offre .category {
        margin-top: 10vw;
    }
    .offers--second > .headerPart > .title {
        word-break: unset;
        hyphens: unset;
    }
}

@media screen and (min-width: 767.98px) {
    body > .offers {
        background-position: 70% -132%;
        background-size: 115%;
    }
    body > .offers--second {
        background-position: 40% 52%;
        background-size: 232%;
    }
    body > .offers--offre {
        background-position: 49% 67%;
        background-size: 250%;
    }
    .offers--second .category {
        margin-top: 12.5vw;
    }
}

@media screen and (min-width: 991.98px) {
    body > .offers {
        background-image: url(../../img/backgrounds/doubleTriangle.svg);
        background-position: 43% 184%;
        background-size: 220%;
        padding: 3.5vw 0 3.5vw 5vw;
        position: relative;
    }
    .offers__header {
        padding-inline: 0;
    }

    body > .offers::before {
        aspect-ratio: 283/569;
        background-image: url("../../img/backgrounds/offersBackgroundLeft.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        content: "";
        display: block;
        left: -10vw;
        position: absolute;
        top: 40%;
        width: 20vw;
        z-index: 0;
    }
    body > .offers::after {
        aspect-ratio: 142/269;
        background-image: url("../../img/backgrounds/offersBackgroundRight.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        bottom: 5vw;
        content: "";
        display: block;
        right: -5vw;
        position: absolute;
        width: 20vw;
        z-index: 0;
    }
    .offers__container {
        gap: 3.5vw;
        padding-right: 5vw;
        z-index: 1;
    }
    .offers .title--frontpage::after {
        background-size: 100%;
        right: 25vw;
        top: -1vw;
        width: 7rem;
        height: 9.5rem;
    }
    .offers .introduction {
        width: 45%;
    }
    .offers--second .introduction {
        width: 80%;
    }

    .offer {
        flex: 0 0 75%;
        overflow: hidden;
        position: relative;
    }
    .offer:hover .offer__legend {
        bottom: 0;
        transition: bottom .25s ease-in;
    }
    .offer__legend {
        background-color: var(--whiteBis);
        bottom: -55vw;
        gap: 5vw;
        height: fit-content;
        margin: 5vw;
        padding: 3.5vw;
        position: absolute;
        transition: bottom .25s ease-in;
    }
    .offer__name {
        font-size: calc(var(--fsCorpsLess) * 2);
        line-height: calc(var(--fsCorpsLess) * 2);
        width: 90%;
    }
    .offer__name--big {
        bottom: 5vw;
        color: var(--whiteBis);
        display: block;
        font-size: calc(var(--fsSubtitle) * 2);
        line-height: calc(var(--fsSubtitle) * 2 + .0625rem);
        left: 5vw;
        position: absolute;
        width: 55%;
    }

    body > .offers--second {
        background-color: var(--white);
        background-image: url(../../img/backgrounds/offersBackground.svg);
        background-position: 70% 48%;
        background-repeat: no-repeat;
        background-size: 177.5%;
        gap: 7.5vw;
        margin: 0;
        padding: 3.5vw 0 15vw 5vw;
        position: relative;
    }
    body > .offers--second::after {
        display: none;
    }
    .offers--second > .headerPart > .title {
        font-size: 5.0625rem;
        line-height: 5.5625rem;
    }
    .body > .offers--second::before {
        display: none;
    }
    .offers--second .offer:last-child {
        margin-right: unset;
    }
    .offers--offre .headerPart > .title {
        font-size: 3.5625rem;
        line-height: calc(var(--fsSubtitle) * 3);
        width: 90%;
    }
    body > .offers--offre {
        background-position: 49% 58%;
        background-size: 180%;
        /* padding-block: 20vw 25vw; */
        padding-block: 10vw 20vw;
    }
}

@media screen and (min-width: 1199.98px) {
    body > .offers {
        background-position: 45% 120%;
        background-size: 200%;
        gap: 6.5vw;
        padding-inline: 12.5vw 0;
        padding-bottom: 3vw;
    }
    body > .offers--second {
        background-position: 70% 55%;
        background-size: 130%;
        padding: 15vw 12.5vw;
    }
    .offers__header {
        margin-top: 0;
    }
    .offers .title--frontpage::after {
        right: 29vw;
        top: 3.5vw;
    }
    .offers__conatiner {
        gap: 2.5vw;
    }
    
    .offer {
        flex: 0 0 45%;
    }
    .offer__name--big {
        width: 70%;
    }
    .offers__container {
        gap: 2vw;
    }
    .offers .introduction {
        width: 37.5%;
    }
    .offers--second .introduction {
        width: 90%;
    }
    .offer__legend {
        bottom: -60vw;
    }
    body > .offers::after {
        bottom: -5vw;
    }
    .offers--second .offer__name--big {
        bottom: 3.5vw;
        left: 3.5vw;
    }
    .offers--second .offer__legend {
        gap: 2.5vw;
        margin: 2.5vw;
        padding: 2.5vw;
    }
    .offers--second .offer {
        flex: 0 0 57.5%;
    }
    body > .offers--offre {
        background-image: url(../../img/backgrounds/friseOffreBackground.svg);
        background-position: 60% 70%;
        background-size: 170%;
        /* padding: 21vw 12.5vw 24.5vw 12.5vw; */
        padding: 12.5vw 12.5vw 17.5vw 12.5vw;
    }
    .offers--offre .headerPart {
        width: 87%;
    }
    .offer__legend {
        background-color: var(--whiteBis);
        bottom: -40vw;
        gap: 2vw;
        height: fit-content;
        margin: 2.5vw;
        padding: 2vw;
        position: absolute;
        transition: bottom .25s ease-in;
    }
    .offers--offre .offer__legend {
        bottom: -50vw;
    }
    .offer__name--big {
        bottom: 3vw;
        left: 3vw;
    }
}

@media screen and (min-width: 1399.98px) {
    body > .offers {
        background-position: 40% 130%;
        background-size: 150%;
        gap: 5vw;
        padding-bottom: 2.5vw;
        padding-left: 15vw;
    }
    .offers__container {
        gap: 1.5vw;
    }
    .offer {
        flex: 0 0 41.5%;
    }
    body > .offers::before {
        left: -7.5vw;
        top: 30%;
    }
    body > .offers::after {
        bottom: 5vw;
        right: -5vw;
        width: 15vw;
    }
    .offer__name--big {
        bottom: 2.5vw;
        left: 2.5vw;
        width: 63%;
    }
    .offer__legend {
        gap: 2.5vw;
        margin: 2vw;
        padding: 2vw;
        transition: bottom .35s ease-in;
    }
    .offer:hover .offer__legend {
        transition: bottom .35s ease-in;
    }
    .offers--second .offer {
        flex: 0 0 47.5%;
    }
    .offers--second .offer__legend {
        gap: 2.5vw;
        margin: 1.5vw;
        padding: 1.5vw;
    }
    body > .offers--second {
        background-position: 100% 40%;
        background-size: 125%;
        gap: 5vw;
        padding-bottom: 15vw;
        padding-left: 12.5vw;
        padding-top: 5vw;
    }
    .offers--second .headerPart {
        width: 70%;
    }
    body > .offers--offre {
        background-position: 100% 47%;
        background-size: 125%;
        /* padding-block: 15vw 10vw; */
        padding-block: 10vw;
    }
}

@media screen and (min-width: 1599.98px) {
    body > .offers {
        background-position: 55% 130%;
    }
    .offers .title--frontpage::after {
        right: 40vw;
    }
    body > .offers::before {
        left: -6.5vw;
        top: 27.5%;
        width: 17.5vw;
    }
    body > .offers::after {
        bottom: 5vw;
        right: -2.5vw;
        width: 12.5vw;
    }
    .offer {
        flex: 0 0 39%;
    }
    body > .offers--second {
        background-position: 160% 50%;
        background-size: 115%;
    }
    body > .offers--offre {
        background-position: 120% 50%;
        background-size: 115%;
    }
    .offers--offre .category {
        margin-bottom: -0.5vw;
    }
}

@media screen and (min-width: 1799.98px) {
    body > .offers--offre {
        background-position: 110% 45%;
        background-size: 123%;
    }
    body > .offers--second {
        /* background-position: 330% 50%;
        background-size: 105%; */
        background-position: 340% 60%;
        background-size: 105%;
        padding-block: 0vw 5vw;
    }
    .offers--offre .headerPart > .title {
        width: 90%;
    }
}

@media screen and (min-width: 1919.98px) {
    .offers .introduction {
        width: 25%;
    }
    .offers--second .introduction {
        width: 63%;
    }
    body > .offers {
        background-position: 76% 120%;
        gap: 3.5vw;
    }
    .offers .title--frontpage::after {
        right: 46.5vw;
        width: 9rem;
    }
    body > .offers::after {
        bottom: 2vw;
        right: 2.5vw;
        width: 10vw;
    }
    body > .offers::before {
        left: -8.5vw;
    }
    .offers--second .category {
        margin-bottom: calc(var(--fsCorps)* -.75);
    }
    .offers--second .offer {
        flex: 0 0 45.5%;
    }
    body > .offers--second {
        background-position: -228% 60%;
        background-size: 93%;
    }
    .offers--second .category {
        margin-top: 7.5vw;
    }
    .offers--second .offer__legend {
        gap: 2vw;
        margin: 2.5vw;
        padding: 1.5vw 2vw;
    }
    .offers--second .offer__name--big {
        bottom: 2.5vw;
        left: 2.5vw;
    }
    body > .offers--offre {
        /* background-position: 260% 45%;
        background-size: 107%;
        padding-bottom: 12.5vw; */
        background-position: 560% 45%;
        background-size: 102.5%;
        padding-block: 10vw 5vw;
    }
    .offer__legend {
        gap: 2vw;
    }
}

@media screen and (min-width: 2199.98px) {
    body > .offers--second {
        background-position: -12vw 47%;
        background-size: 90%;
    }
    .offers--second .headerPart {
        width: 60%;
    }
    body > .offers--offre {
        /* background-position: 230% 48%;
        background-size: 110%; */
        background-position: -270% 54%;
        background-size: 94%;
        padding-top: 2.5vw;
    }
    .offers--second > .headerPart > .title {
        width: 90%;
    }
}