.agences {
    display: flex;
    flex-direction: column;
    gap: 5vw;
}
.agences > .title, .agences > .corps {
    text-align: center;
}
.agences > .corps {
    line-height: 1.4375rem;
}
.agences__container {
    margin-left: -8.5vw;
    position: relative;
    width: 100vw;
}
.agences__illustration {
    aspect-ratio: 414/565;
    height: auto;
    width: 100vw;
}
.agences__firms {
    display: flex;
    flex-direction: column;
    gap: 7vw;
    margin-top: 2.25vw;
}
.agences__city {
    color: var(--whiteBis);
    font-family: var(--ffMXBo);
    font-size: 2.1875rem;
    line-height: 2.375rem;
    text-transform: uppercase;
}
.agences__legend {
    align-items: center;
    border: .75rem solid #86E3F2;
    display: flex;
    flex-direction: column;
    gap: 5vw;
    height: 85%;
    justify-content: center;
    left: 0;
    margin: 10% 0 0 8.75%;
    top: 0;
    position: absolute;
    width: 82.5%;
}
.agences__container .agences__legend::before {
    aspect-ratio: 78/127;
    background-image: url(../../img/particles/particleAgenceTop.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    display: block;
    height: auto;
    left: 5vw;
    position: absolute;
    top: -17.5vw;
    width: 30vw;
}
.agences__container .agences__legend::after {
    aspect-ratio: 61 / 74;
    background-image: url(../../img/particles/particleAgenceLeft.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    bottom: -5vw;
    content: "";
    display: block;
    height: auto;
    left: -11.5vw;
    position: absolute;
    width: 25vw;
}
.agences__container:nth-child(2n) .agences__legend:before {
    aspect-ratio: 79 / 80;
    background-image: url(../../img/particles/particleAgenceSRight.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    display: block;
    height: auto;
    left: unset;
    position: absolute;
    right: -20vw;
    top: 5vw;
    width: 45vw;
}
.agences__container:nth-child(2n) .agences__legend:after {
    aspect-ratio: 61 / 74;
    background-image: url(../../img/particles/particleAgenceSBottom.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    bottom: -20vw;
    content: "";
    display: block;
    height: auto;
    left: 5vw;
    position: absolute;
    width: 27.5vw;
}
.agences__container:nth-child(3n) .agences__legend::before {
    aspect-ratio: 78 / 82;
    background-image: url(../../img/particles/particleAgenceTTop.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    display: block;
    height: auto;
    left: 7.5vw;
    position: absolute;
    top: -7.5vw;
    width: 30vw;
}
.agences__container:nth-child(3n) .agences__legend::after {
    aspect-ratio: 61 / 105;
    background-image: url(../../img/particles/particleAgenceTRight.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    bottom: unset;
    content: "";
    display: block;
    height: auto;
    left: unset;
    position: absolute;
    right: -12vw;
    top: 10vw;
    width: 25vw;
}
.agences__shadow {
    background-color: rgba(0, 0, 0, 0.24);
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
}

@media screen and (min-width: 991.98px) {
    .agences {
        gap: 2vw;
    }
    .agences__firms {
        flex-direction: row;
        gap: 0;
        margin-left: -5vw;
        width: 100vw;
    }
    .agences__container {
        margin-left: 0;
        width: 100%;
    }
    .agences__illustration {
        width: 100%;
    }
    .agences__container:hover .agences__legend {
        background-color: #ffffff78;
        transition: all .45s ease;
    }
    .agences__container:hover .agences__city {
        opacity: 0;
        position: relative;
        bottom: -3rem;
        transition: all .45s ease;
        z-index: -1;
    }
    .agences__city {
        bottom: 0rem;
        opacity: 1;
        position: relative;
        transition: all .45s ease;
    }
    .agences__container:hover .button {
        background-color: var(--mColor);
        border: .0625rem solid var(--tColorLight);
        bottom: 3rem;
        color: var(--tColorLight);
        gap: 2rem;
        padding-inline: 2rem;
        position: relative;
        transition: all .25s linear;
    }
    .agences__container .button {
        border: .0625rem solid var(--tColorLight);
        bottom: 0rem;
        gap: var(--fsCorpsLess);
        padding-inline: 2.5rem;
        position: relative;
        transition: all .25s linear;
    }
    .agences__container:hover .button > .button__arrow:not(.button__arrow--hovered) {
        display: none;
    }
    .agences__container:hover .button > .button__arrow--hovered {
        display: block;
    }
    .agences__container .agences__legend::after {
        left: -5.5vw;
        rotate: 20deg;
        transition: rotate .45s ease;
        width: 10vw;
    }
    .agences__container .agences__legend::before {
        left: 8vw;
        top: -3.5vw;
        transition: rotate .45s ease;
        width: 7.5vw;
    }
    .agences__container:nth-child(2n) .agences__legend:before {
        right: -6vw;
        rotate: -5deg;
        top: 5vw;
        transition: rotate .45s ease;
        width: 15vw;
    }
    .agences__container:nth-child(2n) .agences__legend:after {
        bottom: -6vw;
        left: 5vw;
        rotate: 25deg;
        transition: rotate .45s ease;
        width: 10vw;
    }
    .agences__container:nth-child(3n) .agences__legend::before {
        left: 7.5vw;
        rotate: 30deg;
        top: -4.5vw;
        transition: rotate .45s ease;
        width: 9vw;
    }
    .agences__container:nth-child(3n) .agences__legend::after {
        right: -2vw;
        rotate: 155deg;
        top: 4vw;
        transition: rotate .45s ease;
        width: 7.5vw;
    }
    .agences__container:hover .agences__legend::after {
        rotate: 10deg;
        transition: rotate .45s ease;
    }
    .agences__container:hover .agences__legend::before {
        rotate: -10deg;
        transition: rotate .45s ease;
    }
    .agences__container:nth-child(2n):hover .agences__legend:before {
        rotate: -17.5deg;
        transition: rotate .45s ease;
    }
    .agences__container:nth-child(2n):hover .agences__legend:after {
        rotate: 9deg;
        transition: rotate .45s ease;
    }
    .agences__container:nth-child(3n):hover .agences__legend::before {
        rotate: 17.5deg;
        transition: rotate .45s ease;
    }
    .agences__container:nth-child(3n):hover .agences__legend::after {
        rotate: 137.5deg;
        transition: rotate .45s ease;
    }
    .agences__illustration {
        aspect-ratio: 640/876;
    }
    .agences__city {
        font-size: 2.75rem;
        line-height: 3.5625rem;
    }
    .agences__legend {
        gap: 3vw;
        margin-left: 5%;
        transition: all .25s ease;
        width: 90%;
    }
}

@media screen and (min-width: 1199.98px) {
    .agences {
        margin-top: 15vw;
    }
    .agences__city {
        font-size: 3.25rem;
        line-height: 3.5625rem;
    }
    .agences__firms {
        margin-left: -12.5vw;
    }
}

@media screen and (min-width: 1399.98px) {
    .agences {
        margin-top: 12.5vw;
    }
    .header--agencies ~ .agences {
        margin-top: 10vw;
    }
    .agences__firms {
        margin-left: -15vw;
    }
}

@media screen and (min-width: 1599.98px) {
    .agences {
        gap: 1.5vw;
    }
}

@media screen and (min-width: 1799.98px) {
    .header--agencies ~ .agences {
        margin-top: 6.5vw;
    }
}

@media screen and (min-width: 1919.98px) {
    .agences {
        margin-top: 7.5vw;
    }
    .header--agencies ~ .agences {
        margin-top: 4.5vw;
    }
    .agences__legend {
        gap: 2vw;
        height: 80%;
        margin-left: 10%;
        margin-top: 15%;
        width: 80%;
    }
}