.client__introduction {
    display: flex;
    flex-direction: column;
    gap: 5vw;
    margin-bottom: 7.5vw;
}
.client__list, .client__specification {
    display: flex;
    flex-direction: column;
    gap: 5vw;
}
.client__specification {
    gap: 6.5vw;
    margin-bottom: 7.5vw;
}
.client__name {
    color: var(--mColor);
    font-family: var(--ffMBo);
    font-size: var(--fsTitleH3);
    line-height: 1.625rem;
}
.client__undername, .client__undername * {
    color: var(--mColor);
    font-family: var(--ffMRe);
    font-size: var(--fsTitleH3);
    line-height: var(--fsTitleH2);
}
.client__item {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.client__illustration--client {
    aspect-ratio: 342/196;
    position: relative;
    width: 83vw;
}
.illustrationContainer:has(.client__illustration--client)::after {
    aspect-ratio: 54 / 108;
    background-image: url(../../img/particles/particlePinkClient.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%;
    bottom: -27vw;
    content: "";
    display: block;
    height: auto;
    right: -8.5vw;
    position: absolute;
    width: 27.5vw;
}
.client__contentTitle {
    display: flex;
    text-transform: uppercase;
}
.client__contentTitle::before {
    text-transform: uppercase;
}
.client__content {
    margin-bottom: 25vw;
    margin-top: 20vw;
}
.client__content .corps p strong {
    font-family: var(--ffMBo);
    text-transform: uppercase;
}
.client__content .corps {
    display: flex;
    flex-direction: column;
    gap: var(--fsCorps);
}
.client__content .corps ol {
    padding-left: 5vw;
}
.client__content .corps ol li {
    list-style: auto;
}
.client__content .actu__illustration {
    aspect-ratio: 342 / 186;
    width: 83vw;
}

@media screen and (min-width: 575.98px) {
    .client__introduction {
        margin-bottom: 6vw;
    }
    .client__specification {
        gap: 4vw;
        margin-bottom: 5.5vw;
    }
    .client__list, .client__specification {
        gap: 3.5vw;
    }
    .client__content {
        margin-bottom: 20vw;
        margin-top: 15vw;
    }
    .client__content .corps {
        gap: var(--fsCorpsLess);
    }
}

@media screen and (min-width: 991.98px) {
    .client__header {
        display: flex;
        margin-bottom: 5vw;
    }
    .client__introduction {
        width: 55vw;
    }
    .client__specification {
        margin-bottom: 0;
        margin-left: 3vw;
        position: relative;
        width: 25vw;
    }
    .client__specification::before {
        background-color: #C9C9C9;
        content: "";
        display: block;
        height: 100%;
        left: -2vw;
        position: absolute;
        width: .0625rem;
    }
    .client__list {
        gap: 2.5vw;
    }
    .client__introduction {
        gap: 3vw;
        margin-bottom: 0;
    }
    .client__list, .client__specification {
        gap: 2.5vw;
    }
    .client__illustration--client {
        aspect-ratio: 1325/745;
        width: 60vw;
    }
    .client__content {
        gap: 3.5vw;
        margin-bottom: 2.5vw;
        margin-top: 5vw;
    }
    .client__content .actu__illustration {
        aspect-ratio: 1100 / 598;
    }
}

@media screen and (min-width: 1199.98px) {
    .client__header {
        justify-content: space-between;
        margin-bottom: 3.5vw;
    }
    .client__introduction { 
        width: 50vw;
    }
    .client__specification {
        width: 20vw;
    }
    .client__specification::before {
        left: -2.5vw;
    }
    .client__list {
        gap: 1.5vw;
    }
}

@media screen and (min-width: 1399.98px) {
    .client__introduction {
        gap: 2vw;
        width: 60vw;
    }
    .client__specification {
        margin-left: 5vw;
    }
    .client__specification::before {
        left: -2.5vw;
    }
    body > header.client__header {
        margin-inline: 10vw;
    }
    .client__header ~ .illustrationContainer {
        margin-inline: 10vw;
    }
    .client__content {
        gap: 2.5vw;
        margin-top: 3.5vw;
    }
    .client__content .corps {
        gap: var(--fsSubtitle);
    }
}

@media screen and (min-width: 1599.98px) {
    .client__introduction {
        width: 50vw;
    }
    .client__specification {
        width: 25vw;
    }
}

@media screen and (min-width: 1919.98px) {
    .client__specification {
        gap: 1.5vw;
    }
    .client__list {
        gap: 1vw;
    }
    .client__header {
        margin-bottom: 3vw;
    }
    body > header.client__header {
        margin-inline: 15vw;
    }
    .client__header ~ .illustrationContainer {
        margin-inline: 15vw;
    }
    .client__content {
        gap: 1.5vw;
    }
        .client__content .corps {
        gap: var(--fsCorps);
    }
}

@media screen and (min-width: 2199.98px) {
    .client__introduction {
        width: 39vw;
    }
    .client__specification {
        width: 36vw;
    }
}