.plan {
    display: flex;
    flex-direction: column;
    gap: 7.5vw;
    padding-bottom: 20vw;
}
.plan__illustration {
    display: block;
    height: 90vw;
    width: 85vw;
    mask-image: url(../../img/masks/maskHexagonSecond.svg);
    -webkit-mask-image: url(../../img/masks/maskHexagonSecond.svg);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    overflow: visible;
}
.plan .illustrationContainer {
    align-items: center;
    display: flex;
    height: 95vw;
    justify-content: center;
    width: 90vw;
}
.plan .illustrationContainer::after {
    align-items: center;
    aspect-ratio: 1/1;
    background-image: url("../../img/particles/particlePink.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%;
    bottom: -6vw;
    content: "";
    display: block;
    height: auto;
    left: 1vw;
    position: absolute;
    rotate: -85deg;
    width: 52vw;
}
.plan .illustrationContainer::before {
    background-image: url(../../img/masks/maskHexagonSecondShadow.png);
    background-position: -7.5vw 50%;
    background-repeat: no-repeat;
    background-size: 110%;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
}
.plan__content {
    display: flex;
    flex-direction: column;
    gap: var(--fsCorps);
}

.plan--offres .illustrationContainer::after {
    aspect-ratio: 181 / 365;
    background-image: url(../../img/particles/particlePinkContact.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    bottom: unset;
    display: block;
    left: unset;
    right: 45vw;
    rotate: 0deg;
    top: 19vw;
    width: 55vw;
}

@media screen and (min-width: 767.98px) {
    .plan {
        padding-bottom: 10vw;
    }
    .plan .illustrationContainer::after {
        aspect-ratio: 24 / 25;
        bottom: -3vw;
        left: 2vw;
        width: 47.5vw;
    }
    .plan--offres .illustrationContainer::after {
        aspect-ratio: 181 / 365;
        background-image: url(../../img/particles/particlePinkContact.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        bottom: unset;
        display: block;
        left: unset;
        right: 45vw;
        rotate: 0deg;
        top: 19vw;
        width: 55vw;
    }
}

@media screen and (min-width: 767.98px) {
    body .plan--offres {
        background-color: var(--white);
        margin: 0;
        padding: 0vw 5vw 10vw 5vw ;
    }
}

@media screen and (min-width: 991.98px) {
    body .plan--offres {
        align-items: center;
        flex-direction: row;
        gap: 5vw;
    }
    .plan__content .title {
        font-size: 3.25rem;
        line-height: 3.5625rem;
    }
    .plan__content {
        gap: var(--fsTitle);
    }
    .plan--offres .illustrationContainer {
        height: 50vw;
    }
    .plan--offres .plan__illustration {
        height: 50vw;
    }
    .plan--offres .illustrationContainer::before {
        background-position: -3vw 35%;
    }
    .plan--offres .illustrationContainer::after {
        aspect-ratio: 3 / 2;
        top: 7vw;
        left: 16vw;
        width: 26vw;
        rotate: -6deg;
    }
    .plan--offres .illustrationContainer::after {
        aspect-ratio: 181 / 365;
        background-image: url(../../img/particles/particlePinkContact.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        bottom: unset;
        display: block;
        left: unset;
        right: 15.5vw;
        rotate: 0deg;
        top: 9.5vw;
        width: 26vw;
    }
    .plan--offres .introduction, .plan--offres .introduction p, .plan--offres .introduction p span {
        font-size: var(--fsTitleH2);
        line-height: 1.875rem;
    } 
}

@media screen and (min-width: 1199.98px) {
    body .plan--offres {
        padding: 0vw 12.5vw 10vw 12.5vw;
    }
    .plan--offres .plan__illustration {
        height: 37.5vw;
    }
    .plan--offres .illustrationContainer::after {
        bottom: 5vw;
        width: 20vw;
    }
    body .plan--offres {
        padding-bottom: 0;
    }
    .plan--offres .illustrationContainer::after {
        top: 13.5vw;
        left: -4vw;
        width: 22vw;
        rotate: -5deg;
    }
    .employeeC + .plan--offres .plan__illustration {
        height: 45vw;
    }
}

@media screen and (min-width: 1399.98px) {
    body .plan--offres {
        padding-inline: 10vw;
        position: relative;
    }
    .plan--offres .plan__illustration {
        height: 40vw;
    }
    .plan--offres .illustrationContainer {
        width: 40vw;
        flex: 0 0 42.5%;
    }
    .plan__content {
        flex: 0 0 40%;
    }
    .plan--offres::after {
        aspect-ratio: 2 / 2.75;
        background-image: url(../../img/particles/particleOther.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 90%;
        bottom: 20vw;
        content: "";
        display: block;
        height: auto;
        left: 80vw;
        position: absolute;
        width: 15vw;
    }
    .plan--offres .illustrationContainer::after {
        top: 14.5vw;
        left: -4vw;
        width: 22vw;
        rotate: -5deg;
    }
    .offers--offre ~ .plan--offres::after {
        background-image: url(../../img/particles/particleContact.svg);
    }
}

@media screen and (min-width: 1599.98px) {
    .plan--offres .illustrationContainer::after {
        bottom: 3.5vw;
        width: 20vw;
        left: 0.5vw;
    }
    .plan--offres::after {
        bottom: 15vw;
        width: 12.5vw;
    }
    .plan--offres .illustrationContainer {
        height: 45vw;
        width: 45vw;
    }
    .plan--offres .plan__illustration {
        height: 35vw;
        width: 30vw;
    }
    .plan--offres .illustrationContainer::before {
        background-position: -2.5vw 70%;
    }
    body .plan--offres {
        gap: 1.5vw;
    }
    .plan--offres .illustrationContainer::after {
        top: 13.5vw;
        left: -1vw;
        width: 19vw;
    }
    .employeeC + .plan--offres .plan__illustration {
        height: 35vw;
    }
}

@media screen and (min-width: 1799.98px) {
    .plan--offres::after {
        left: 77.5vw;
        width: 15vw;
    }
    .plan--offres .illustrationContainer::after {
        bottom: 22.5vw;
        left: 15vw;
        width: 23.5vw;
        top: unset;
    }
    .plan--offres .illustrationContainer::after {
        bottom: unset;
        top: 13.5vw;
        left: -1vw;
        width: 19vw;
    }
}

@media screen and (min-width: 1919.98px) {
    .plan__content {
        flex: 0 0 34.5%;
    }
    .plan--offres .illustrationContainer::before {
        background-position: -2.5vw 50%;
        background-size: 100%;
    }
    .plan--offres::after {
        left: 77.5vw;
    }
    .plan--offres .illustrationContainer::after {
        bottom: unset;
        top: 14.5vw;
        left: -1vw;
        width: 18vw;
    }
}