.header {
    display: flex;
    flex-direction: column;
    gap: 7.5vw;
    margin-top: 17vw;
}
body > header.header {
    margin-top: 1rem;
}
.header__legend {
    display: flex;
    flex-direction: column;
    gap: var(--fsCorps);
}
.header--frontpage .illustration__inside {
    display: block;
    height: 75vw;
    width: 70vw;
    mask-image: url(../../img/masks/hexagon.svg);
    -webkit-mask-image: url(../../img/masks/hexagon.svg); /* Compatibilité Safari */
    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;
    transition: top 0.05s ease, left 0.05s ease;
}    
.header .illustration__inside {
    transition: transform 0.1s ease;
    transform-style: preserve-3d;
    will-change: transform;
}
.header--frontpage .illustrationContainer {
    display: flex;
    height: fit-content;
    justify-content: center;
    width: 100%;
}
.header .illustrationContainer {
    perspective: 1000px;
}
.header--frontpage .illustrationContainer::after {
    align-items: center;
    background-image: url("../../img/particles/particleFront.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%;
    content: "";
    display: block;
    height: 110%;
    position: absolute;
    width: 100%;
    z-index: 0;
}
.header--frontpage .header__legend::before {
    z-index: 1;
}
.header--triangle .illustrationContainer::before {
    background-image: url(../../img/masks/maskTriangleShadow.png);
    background-position: -34vw 30%;
    background-repeat: no-repeat;
    background-size: 130%;
    content: "";
    display: block;
    height: 82vw;
    position: absolute;
    width: 85vw;
    z-index: 0;
}
.header--triangle .illustration__inside {
    display: block;
    height: 95vw;
    width: 110vw;
    margin-left: -34vw;
    mask-image: url(../../img/masks/maskTriangle.svg);
    -webkit-mask-image: url(../../img/masks/maskTriangle.svg); /* Compatibilité Safari */
    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;
}
.header--triangle .illustrationContainer {
    display: flex;
    height: fit-content;
    justify-content: center;
    width: 100vw;
}
.header--triangle .illustrationContainer::after {
    align-items: center;
    aspect-ratio: 1/1;
    background-image: url(../../img/particles/particleTriangle.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 102%;
    content: "";
    display: block;
    height: auto;
    margin-left: -26vw;
    position: absolute;
    width: 100%;
    z-index: 0;
}
.header--triangle .illustrationContainer::after {
    align-items: center;
    aspect-ratio: 1 / 1;
    background-image: url(../../img/particles/particleTriangle.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 102%;
    content: "";
    display: block;
    height: auto;
    margin-left: -26vw;
    position: absolute;
    width: 100%;
    z-index: 0;
}


.illustration__before {
    display: none;
}
.header--arrow .illustration__before {
    background-color: var(--white);
    clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
    display: block;
    height: 55vw;
    position: absolute;
    top: -.3px;
    width: 100%;
    z-index: 1;
}
.header--arrow .illustration__inside {
    display: block;
    height: 80vw;
    width: 110vw;
}
.header--arrow .illustrationContainer {
    display: flex;
    height: fit-content;
    justify-content: center;
    margin-left: -8.5vw;
    width: 100vw;
}
.header--arrow .illustrationContainer::after {
    align-items: center;
    aspect-ratio: 75 / 77;
    background-image: url(../../img/particles/particleOffreHeader.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    bottom: -23.5vw;
    content: "";
    display: block;
    height: 60%;
    position: absolute;
    right: -12.5vw;
    width: 45vw;
    z-index: 0;
}

.header--agency .illustrationContainer::after {
    z-index: 1;
}

.header--arrow ~ .header--triangle .illustrationContainer::after {
    background-image: url(../../img/particles/particleOffreTriangle.svg);
    bottom: 15.5vw;
    right: 24vw;
    width: 35vw;
    z-index: 0;
}

.header--arrow ~ .header--triangle .illustration__inside {
    aspect-ratio: 1/1;
    height: auto;
    margin-left: -45vw;
    width: 100%;
}
.header--arrow ~ .header--triangle .illustrationContainer {
    height: 105vw;
    margin-left: -8.5vw;
    width: 105vw;
}


.header--agencies .illustrationContainer::before {
    background-image: url(../../img/masks/maskAgenciesShadow.png);
    background-position: 120% 20%;
    background-repeat: no-repeat;
    background-size: 130%;
    content: "";
    display: block;
    height: 82vw;
    position: absolute;
    width: 85vw;
    z-index: 0;
}
.header--agencies .illustration__inside {
    display: block;
    height: 95vw;
    width: 110vw;
    margin-left: -30vw;
    mask-image: url(../../img/masks/maskAgencies.svg);
    -webkit-mask-image: url(../../img/masks/maskAgencies.svg); /* Compatibilité Safari */
    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;
}
.header--agencies .illustration__inside {
    aspect-ratio: 1/1;
    height: auto;
    width: 100vw;
}
.header--agencies .illustrationContainer {
    display: flex;
    height: fit-content;
    justify-content: center;
    margin-left: -8.5vw;
    width: 100vw;
}
.header--agencies .illustrationContainer::after {
    align-items: center;
    aspect-ratio: 327 / 354;
    background-image: url(../../img/particles/particleAgenciesTriangle.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    bottom: 0vw;
    content: "";
    display: block;
    height: auto;
    position: absolute;
    left: 33vw;
    width: 80vw;
    z-index: 0;
}
.header--agencies .header__legend {
    overflow-x: visible;
}
.header--agencies {
    position: relative;
}
.header--agencies ~ .header--triangle .illustrationContainer::after {
    background-image: url(../../img/particles/particleAgenciesTriangleHexagons.svg);
    bottom: 15.5vw;
    right: 24vw;
    width: 35vw;
    z-index: 0;
}

.header--agencies ~ .header--triangle .illustration__inside {
    aspect-ratio: 1/1;
    height: auto;
    margin-left: -45vw;
    width: 100%;
}
.header--agencies ~ .header--triangle .illustrationContainer {
    height: 105vw;
    margin-left: -8.5vw;
    width: 105vw;
}
.header--agencies::before {
    aspect-ratio: 355 / 104;
    background-image: url(../../img/particles/particleAgenciesTriangleHexagons.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 95%;
    bottom: 52vw;
    content: "";
    display: block;
    height: auto;
    left: -18vw;
    position: absolute;
    rotate: 5deg;
    width: 100vw;
    z-index: 0;
}

.header .category--ariane {
    display: none;
}
.header--subpage .category--ariane {
    display: flex;
}
.header--subpage .category--ariane::before {
    rotate: 180deg;
}
.header--subpage .introduction, .header--subpage .introduction:not(.introduction--black) p, .header--subpage ~ .header--triangle .introduction, .header--subpage ~ .header--triangle .introduction p {
    color: var(--tColor);
}
.headerPart {
    display: flex;
    flex-direction: column;
    gap: var(--fsTitleH2);
}

.header--casclients .illustrationContainer::before {
    background-image: url(../../img/masks/maskCasClientsShadow.png);
    background-position: 40% -60%;
    background-repeat: no-repeat;
    background-size: 90%;
    content: "";
    display: block;
    height: 100vw;
    position: absolute;
    width: 95vw;
    z-index: 0;
}
.header--casclients .illustration__inside {
    aspect-ratio: 334/363;
    display: block;
    height: auto;
    width: 82.5vw;
    margin-left: 0;
    mask-image: url(../../img/masks/maskCasClients.svg);
    -webkit-mask-image: url(../../img/masks/maskCasClients.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;
}
.header--casclients .illustrationContainer {
    display: flex;
    height: fit-content;
    justify-content: center;
    margin-left: -8.5vw;
    width: 100vw;
}
.header--casclients .illustrationContainer::after {
    align-items: center;
    aspect-ratio: 1/1;
    background-image: url(../../img/particles/particleCasClients.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 102%;
    content: "";
    display: block;
    height: auto;
    margin-left: -26vw;
    position: absolute;
    right: 0vw;
    top: -16vw;
    width: 100%;
    z-index: 0;
}
.header--agency .illustrationContainer::after {
    bottom: 36.5vw;
    right: -4.5vw;
}
.header--actus .illustration__inside {
    margin-left: -10vw;
    width: 75vw;
}
.header--actus .illustrationContainer::after {
    align-items: center;
    aspect-ratio: 372 / 173;
    background-image: url(../../img/particles/particleActuAfter.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 102%;
    bottom: -19vw;
    content: "";
    display: block;
    height: auto;
    left: 30.5vw;
    margin-left: -26vw;
    position: absolute;
    right: unset;
    width: 96%;
    z-index: 0;
}
.header--actus .illustrationContainer {
    overflow: hidden;
}
.header--offre ~ .header--triangle {
    gap: 0;
}
.header--error .introduction {
    width: 80%;
}
.header--error .illustrationContainer::after {
    align-items: center;
    aspect-ratio: 166 / 324;
    background-image: url(../../img/particles/particleError.svg);
    background-position: 95% -4%;
    background-repeat: no-repeat;
    background-size: 54%;
    content: "";
    display: block;
    height: auto;
    position: absolute;
    width: 100%;
    z-index: 0;
}
.header--error .header__legend::after {
    aspect-ratio: 146 / 170;
    background-image: url(../../img/particles/particleErrorTop.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
    content: "";
    display: block;
    height: auto;
    position: absolute;
    right: -5vw;
    top: 12vw;
    width: 55vw;
    z-index: -1;
}
.header--history .title {
    width: 57.5%;
}
.header--history .illustration__inside {
    height: 85vw;
}
.header--history .illustrationContainer::after {
    align-items: center;
    aspect-ratio: 155 / 162;
    background-image: url(../../img/particles/particleHistory.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    bottom: 16.5vw;
    content: "";
    display: block;
    height: auto;
    position: absolute;
    right: 57.5vw;
    width: 45vw;
    z-index: 0;
}
.header--team .illustrationContainer::after {
    align-items: center;
    aspect-ratio: 185 / 154;
    background-image: url(../../img/particles/particleTeam.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    bottom: -18.5vw;
    content: "";
    display: block;
    height: auto;
    position: absolute;
    right: -3vw;
    width: 50vw;
    z-index: 0;
}
.header--team .illustrationContainer::after {
    align-items: center;
    aspect-ratio: 95 / 145;
    background-image: url(../../img/particles/particleTeam.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    bottom: -35vw;
    content: "";
    display: block;
    height: auto;
    position: absolute;
    right: -5vw;
    width: 50vw;
    z-index: 1;
}
@media screen and (min-width: 575.98px) {
    .header--triangle .illustrationContainer::after {
        background-position: -10% 10%;
        background-size: 90%;
    }
    .header--casclients .illustrationContainer::after {
        background-position: 80% 50%;
    }
    .header--agencies .illustrationContainer::after {
        background-position: 160% 70%;
        background-size: 99%;
    }
    .header--actus .illustrationContainer::after {
        background-position: center;
        background-size: 102%;
    }
    .header--error .header__legend::after {
        right: 5vw;
        width: 45vw;
    }
    .header--error .introduction {
        width: 50%;
    }
}

@media screen and (min-width: 767.98px) {
    .header--arrow:not(.header--history) .illustrationContainer::after {
        bottom: -20vw;
        right: -11vw;
        width: 40vw;
    }
    .header--history .illustrationContainer::after {
        width: 40vw;
    }
    .header--agencies .header__legend::after {
        bottom: -10vw;
        background-size: 90%;
        left: -11vw;
    }
    .header--agency .illustrationContainer::after {
        bottom: 45vw;
        right: 6vw;
        width: 30vw;
    }
    .header--error .introduction {
        width: 40%;
    }
    .header--team:not(.header--history) .illustrationContainer::after {
        bottom: -28.5vw;
        right: 0vw;
        width: 40vw;
    }
}

@media screen and (min-width: 991.98px) {
    .header {
        flex-direction: row;
    }
    body > header.header {
        margin-top: 5rem;
    }
    body > header.header--offres, body > header.header--actus, body > header.header--casclients, body > header.header--agencies {
        margin-top: 0rem;
    }
    .header__legend {
        justify-content: center;
    }
    .header__legend::after {
        aspect-ratio: 77/102;
        background-image: url(../../img/particles/particleHeaderFront.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 80%;
        content: "";
        display: block;
        position: absolute;
        width: 7.5vw;
        left: 12.5vw;
        top: 10vw;
    }
    .header__legend::before {
        aspect-ratio: 57/82;
        background-image: url(../../img/masks/hexagon.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        content: "";
        display: block;
        position: absolute;
        width: 4vw;
        top: 54.5vw;
        left: 40vw;
        transform: rotate(85deg);
    }
    .header--frontpage .illustration__inside {
        height: 44vw;
        width: 50vw;
    }
    .header--frontpage .illustrationContainer::after {
        background-position: 48% 3%;
        background-size: 112%;
    }
    .header--frontpage .illustrationContainer {
        height: 50vw;
    }
    .header--triangle {
        gap: 2.5vw;
        margin-bottom: 12.5vw;
    }
    .header--triangle .header__legend {
        flex: 0 0 50%;
    }
    .header--triangle .illustrationContainer {
        flex: 0 0 65%;
        width: auto;
    }
    .header--triangle .illustration__inside {
        aspect-ratio: 1 / 1;
        height: auto;
        margin-left: -25vw;
        margin-top: 5vw;
        width: 100%;
    }
    .header--triangle .illustrationContainer::before {
        background-position: -6vw 0%;
        background-size: 77.5%;
    }
    .header--triangle .introduction--black, .header--triangle .introduction--black p {
        font-size: var(--fsCorps);
        line-height: 1.4375rem;
    }
    .header--agencies::after {
        aspect-ratio: 1036 / 753;
        background-image: url(../../img/particles/particleAgenciesDesktop.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 95%;
        bottom: 17vw;
        content: "";
        display: block;
        height: auto;
        left: -27vw;
        position: absolute;
        rotate: 5deg;
        width: 100vw;
        z-index: 0;
    }
    .header--agencies::before {
        bottom: 65vw;
        left: 57vw;
        rotate: 0deg;
        width: 40vw;
    }
    .header--agencies .header__legend::after {
        display: none!important;
    }
    .header--offres .illustrationContainer::after {
        background-position: 50% 10%;
        background-size: 80%;
    }
    .header--offres .header__legend::after {
        background-image: url(../../img/particles/particleBlueSimple.svg);
        bottom: 0vw;
        left: 10vw;
        top: unset;
        width: 10vw;
    }
    .header--offres .header__legend::before {
        bottom: 6vw;
        top: unset;
        left: 20vw;
        width: 5vw;
    }
    .header--offres {
        position: relative;
    }
    body > .header--triangle {
        background-color: var(--white);
        margin: 0;
        padding: calc(15vw - 5rem) 5vw 15vw 12.5vw;
    }
    .header--arrow .illustration__before {
        clip-path: polygon(0% 0%, 0% 100%, 35% 50%);
        height: 100%;
        left: -.5px;
        top: 0;
    }
    .header--arrow .header__legend {
        flex: 0 0 50%;
    }
    body > header.header--arrow {
        margin-top: 0rem;
        margin-right: 0;
    }
    .header--arrow .illustrationContainer::after {
        bottom: -15vw;
        right: 27.5vw;
        width: 25vw;
        z-index: 1;
    }
    .header--arrow .header__legend::after, .header--arrow ~ .header--triangle .header__legend::before,  .header--arrow ~ .header--triangle .header__legend::after {
        display:none;
    }
    .header--arrow .header__legend::before {
        aspect-ratio: 2 / 3.25;
        background-image: url(../../img/particles/particleHeaderOffre.svg);
        left: 37vw;
        rotate: -90deg;
        top: 12.5vw;
        width: 10.5vw;
        z-index: -1;
    }
    .header--offre .header__legend::before {
        rotate: 0deg;
    }
    .header--arrow ~ .header--triangle .illustration__inside {
        margin-left: -20vw;
    }
    .header--arrow ~ .header--triangle .illustrationContainer {
        height: fit-content;
        flex: 0 0 70%;
        margin-left: -8.5vw;
        width: auto;
    }
    .header--arrow ~ .header--triangle .illustrationContainer::before {
        background-position: -3vw 0%;
    }
    .header--arrow ~ .header--triangle .illustrationContainer::after {
        bottom: 2.5vw;
        right: 9vw;
        width: 24vw;
    }
    .header--casclients .illustrationContainer {
        flex: 0 0 60%;
        margin-left: 6.5vw;
    }
    .header--casclients .illustrationContainer::before {
        background-position: -2vw 2%;
        background-size: 65%;
        width: 68vw;
    }
    .header--casclients .illustration__inside {
        aspect-ratio: 2 / 2.125;
        width: 80%;
    }
    .header--casclients .illustrationContainer::after {
        background-position: -105% 122%;
        background-size: 85%;
    }
    .header--casclients .header__legend::after, .header--casclients .header__legend::before {
        display: none;
    }
    .header--casclients {
        position: relative;
    }
    .header--casclients::before {
        aspect-ratio: 57 / 82;
        background-image: url(../../img/masks/hexagon.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        bottom: 20vw;
        content: "";
        display: block;
        left: 55vw;
        position: absolute;
        width: 4vw;
    }
    .header--agencies .illustrationContainer::before {
        background-position: 8vw 5%;
        background-size: 61.5%;
    }
    .header--agencies .illustration__inside {
        margin-left: -12vw;
        width: 90%;
    }
    .header--agencies .illustrationContainer::after {
        background-position: 3% 98%;
        background-size: 45%;
    }
    .header--agencies .header__legend::before {
        display: none;
    }
    .header--agencies .header__legend * {
        z-index: 1;
    }
    .header--agencies .button--full {
        width: 75%;
    }
    .header--agency {
        position: relative;
    }
    .header--agency::before {
        aspect-ratio: 2 / 3;
        background-image: url(../../img/particles/particleAgencyBefore.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        bottom: -14.5vw;
        content: "";
        display: block;
        left: -2.5vw;
        position: absolute;
        rotate: 0deg;
        top: unset;
        width: 25vw;
    }
    .header--agency .header__legend::before {
        display: none;
    }
    .header--agency .illustrationContainer::after {
        aspect-ratio: 10 / 12;
        background-image: url(../../img/particles/particleAgencyAfter.svg);
        bottom: unset;
        right: 21.5vw;
        top: 11vw;
        width: 22.5vw;
    }
    .header--actus .illustrationContainer {
        flex: 0 0 60%;
        margin-left: 7.5vw;
        overflow: visible;
    }
    .header--actus .illustrationContainer::after {
        background-position: -15% 57%;
        background-size: 107.5%;
        left: 16vw;
    }
    .header--actus .header__legend::before {
        aspect-ratio: 3 / 2;
        background-image: url(../../img/particles/particleAgenceSBottom.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        content: "";
        display: block;
        position: absolute;
        width: 12.5vw;
        top: 25.5vw;
        height: auto;
        margin-left: 30vw;
        padding-top: 70vw;
        left: 6vw;
        transform: rotate(-35deg);
    }
    .header--actus::before {
        display: none;
    }
    .header--arrow .illustrationContainer {
        margin-left: -6.5vw;
    }
    .header--arrow .illustration__inside {
        height: 70vw;
        width: 100vw;
    }
    .header--subpage .introduction, .header--subpage .introduction p, .header--subpage ~ .header--triangle .introduction, .header--subpage ~ .header--triangle .introduction p {
        font-size: 1.5rem;
        line-height: 1.875rem;
        width: 80%;
    }
    .header--casclients .header__legend p.introduction {
        font-size: var(--fsTitleH2);
        line-height: 1.875rem;
    }
    .header--offre ~ .header--triangle {
        align-items: center;
        gap: 2.5vw;
    }
    .header--error .illustrationContainer::after {
        background-position: 48% 3%;
        background-size: 90%;
        right: -7vw;
        width: 35vw;
    }
    .header--error .illustration__inside {
        height: 60vw;
        width: 50vw;
    }
    .header--error .illustrationContainer {
        height: fit-content;
    }
    .header--error .header__legend::before {
        aspect-ratio: 57 / 82;
        background-image: url(../../img/masks/hexagon.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 90%;
        content: "";
        display: block;
        left: 32.5vw;
        position: absolute;
        rotate: 20deg;
        top: 14.5vw;
        width: 10vw;
    }
    .header--error .introduction {
        font-size: var(--fsTitleH2);
        line-height: 1.875rem;
        width: 100%;
    }
    .header--error .header__legend::after {
        aspect-ratio: 4 / 2;
        background-image: url(../../img/particles/particleErrorBottom.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 80%;
        content: "";
        display: block;
        height: auto;
        position: absolute;
        right: -5vw;
        top: 60vw;
        width: 35vw;
        z-index: -1;
    }
    .header--error {
        padding-bottom: 5vw;
    }
    body > header.header--offre {
        margin-top: 2rem;
        margin-right: 0;
    }
    .header--offre .illustration__inside {
        height: calc(100vh - 5.85rem);
    }
    .header--arrow .header__legend::before {
        background-image: url(../../img/particles/particleHistory.svg);
        width: 20vw;
    }
    .header--history .illustrationContainer::after {
        display: none;
    }
    .header--history .introduction--black, .header--history .introduction--black p {
        font-size: var(--fsCorps);
        line-height: 1.4375rem;
    }
    .header--engagements .header__legend::before {
        background-image: url(../../img/particles/particleEngagementsLeft.svg);
        left: -2.5vw;
        top: 82.5vw;
        width: 20vw;
    }
    .header--arrow:not(.header--history) .illustrationContainer::after {
        bottom: 50vw;
        right: 29vw;
        width: 20vw;
    }
    body > header.header--join {
        margin-top: 0rem;
    }
    .header--join .header__legend::after, .header--join .header__legend::before {
        display: none;
    }
    .header--triangle .illustrationContainer::after {
        align-items: center;
        aspect-ratio: 1 / 1;
        background-image: url(../../img/particles/particleJoin.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 102%;
        content: "";
        display: block;
        height: auto;
        margin-left: -20vw;
        position: absolute;
        width: 100%;
        z-index: 0;
    }
    .header--team .header__legend::before {
        aspect-ratio: 144 / 276;
        background-image: url(../../img/particles/particleTeamTop.svg);
        left: 35vw;
        width: 11vw;
    }
    .header--team:not(.header--history) .illustrationContainer::after {
        bottom: -10vw;
        right: 29vw;
        width: 30vw;
    }
    .header--offre:not(.header--history) .illustrationContainer::after {
        bottom: -10vw;
        right: 29vw;
        width: 20vw;
    }
    .header--offre .header__legend::before {
        display: none;
        aspect-ratio: 2 / 3.25;
        background-image: url(../../img/particles/particleHeaderOffre.svg);
        left: 37vw;
        rotate: 0deg;
        top: 12.5vw;
        width: 15vw;
        z-index: -1;
    }
}

@media screen and (min-width: 1099.98px) {
    .header--agencies::before {
        bottom: 58vw;
        left: 52vw;
    }
}

@media screen and (min-width: 1199.98px) {
    .header--frontpage .illustration__inside {
        height: 36vw;
        width: 50vw;
    }
    .header--frontpage .illustrationContainer {
        align-items: center;
    }
    .header--frontpage .illustrationContainer::after {
        background-position: 48% 63%;
    }
    .header {
        align-items: center;
        margin: 5.1rem 12.5vw;
    }
    .header__legend {
        gap: calc(var(--fsCorps) * 1.5);
    }
    .header__legend::after {
        left: 15vw;
        top: 9vw;
        width: 6.5vw;
    }
    .header__legend::before {
        left: 42vw;
        top: 51.5vw;
        width: 3.5vw;
    }
    body > .header--triangle {
        padding-inline: 10vw;
    }
    .header--triangle .illustrationContainer {
        flex: 0 0 75%;
    }
    .header--triangle .illustrationContainer::after {
        background-position: 110% 20%;
        background-size: 90%;
    }
    .header--triangle .header__legend {
        flex: 0 0 45%;
    }
    .header--triangle .illustration__inside {
        margin-left: -22.5vw;
    }
    .header--triangle .header__legend::after {
        bottom: -2.5vw;
        left: 7.5vw;
    }
    .header--triangle .header__legend::before {
        bottom: 4vw;
        left: 17.5vw;
    }
    .header--casclients::before {
        bottom: 11vw;
        left: 48vw;
    }
    .header--arrow .header__legend {
        flex: 0 0 40%;
    }
    .header--arrow .illustrationContainer::after {
        bottom: -12.5vw;
        right: 35vw;
        width: 20vw;
    }
    .header--arrow .header__legend::before {
        left: 0vw;
        top: 20vw;
    }
    body > .header--arrow ~ .header--triangle {
        padding-top: 0vw;
    }
    .header--arrow ~ .header--triangle .illustrationContainer {
        margin-left: 0;
    }
    .header--arrow ~ .header--triangle .illustrationContainer::after {
        bottom: 8.5vw;
        right: 12vw;
        width: 17.5vw;
    }
    .header--casclients .illustrationContainer::after {
        background-position: -40% 90%;
        background-size: 85%;
    }
    .header--casclients .header__legend::before {
        bottom: 40vw;
        left: 47.5vw;
    }
    .header--casclients .illustrationContainer::before {
        background-position: -5vw 1%;
        background-size: 77.5%;
    }
    body > header.header {
        margin-top: 0;
        padding-bottom: 1vw;
    }
    body > header.header--casclients {
        padding-top: 3.5vw;
        padding-bottom: 5.5vw;
    }
    .header--agencies .illustration__inside {
        margin-left: -7.5vw;
    }
    .header--agencies .illustrationContainer::before {
        background-position: 5vw -3%;
        background-size: 75%;
        z-index: 0;
    }
    .header--agencies .header__legend::after {
        background-size: 105%;
        bottom: unset;
        left: 52vw;
        z-index: 0;
    }
    .header--agencies .illustrationContainer::after {
        background-position: 14% 97%;
        background-size: 50%;
        z-index: 0;
    }
    .header--agencies .header__legend::before {
        bottom: unset;
        left: -23.5vw;
        top: -4vw;
        width: 82.5vw;
        z-index: 0;
    }
    .header--agencies::before {
        bottom: 33vw;
        left: 50vw;
    }
    .header--agencies::after {
        bottom: 0vw;
        left: -31vw;
    }
    .header--agency .illustrationContainer::after {
        right: 25vw;
        top: -40vw;
    }
    .header--agency .header__legend::before {
        left: -5vw;
        top: 55vw;
    }
    .header--agency::before {
        bottom: -2.5vw;
        left: -15vw;
    }
    .header--actus .illustrationContainer::after {
        background-position: -15% 57%;
        background-size: 112%;
    }
    .header--actus .header__legend::before {
        left: 7.5vw;
        padding-top: 52.5vw;
        width: 10vw;
    }
    .header--error .header__legend::after {
        right: 10vw;
        top: 47.5vw;
        width: 25vw;
    }
    body > header.header--error {
        padding-bottom: 5vw;
    }
    .header--error .header__legend::before {
        top: 10vw;
        width: 7.5vw;
    }
    .header--frontpage .illustration__inside {
        height: 45vw;
    }
    .header--history .header__legend::before {
        left: -7vw;
        top: 50vw;
    }
    .header--arrow:not(.header--history) .illustrationContainer::after {
        bottom: 30vw;
    }
    .header--engagements .header__legend::before {
        left: 3vw;
        top: 80vw;
    }
    body > header.header--engagements, body > header.header--history {
        margin-top: 0;
    }
    body > .header--join {
        padding-top: 0;
    }
    .header--team .illustration__inside {
        height: 80vw;
    }
    .header--arrow:not(.header--history) .illustrationContainer::after {
        bottom: -15vw;
        right: 35vw;
    }
    .header--offre .illustration__inside {
        height: calc(100vh - 5rem);
    }
    .header--offre:not(.header--history) .illustrationContainer::after {
        bottom: -10vw;
        right: 35vw;
    }
    .header--offre .header__legend::before {
        display: block;
        left: -1vw;
        top: 9vw;
        width: 12.5vw;
    }
    .header--agency:not(.header--history) .illustrationContainer::after {
        bottom: 25vw;
        right: 29vw;
        top: unset;
        width: 20vw;
    }
}

@media screen and (min-width: 1399.98px) {
    .header {
        margin: 6.25rem 15vw;
    }
    .header--frontpage .illustrationContainer {
        flex: 0 0 52%;
    }
    .header--frontpage .illustration__inside {
        height: 40vw;
    }
    .header__legend::before {
        left: 39vw;
        top: 55vw;
    }
    .header__legend::after {
        left: 20vw;
    }
    .header--frontpage .illustrationContainer::after {
        background-position: 48% 80%;
    }

    .header--triangle .illustrationContainer::after {
        background-position: 100% 40%;
    }
    .header--triangle .header__legend::after {
        bottom: -5vw;
    }
    .header--triangle .header__legend::before {
        bottom: 1vw;
    }
    body > .header--triangle {
        padding-bottom: 7.5vw;
        padding-top: 0;
    }
    .header--casclients::before {
        left: 50vw;
    }
    .header--arrow .illustration__inside {
        height: calc(100vh - 5rem);
    }
    .header--arrow .illustration__before {
        clip-path: polygon(0% 0%, 0% 100%, 25% 50%);
    }
    .header--arrow .header__legend::before {
        left: -1vw;
        top: 16vw;
        width: 15vw;
    }
    .header--arrow .illustrationContainer::after {
        bottom: -15vw;
        right: 30vw;
        width: 25vw;
    }
    .header--offre .illustrationContainer::after {
        bottom: -12vw;
        right: 36vw;
        width: 20vw;
    }
    .header--casclients .illustrationContainer::after {
        background-position: 3% 70%;
        background-size: 70%;
    }
    .header--casclients .illustration__inside {
        width: 70%;
    }
    .header--casclients .illustrationContainer::before {
        background-position: -2vw 2%;
        background-size: 65%;
        width: 68vw;
    }
    .header--casclients .header__legend::before {
        bottom: 32.5vw;
    }
    .header--agencies .header__legend::before {
        bottom: unset;
        left: -18.5vw;
        top: -10vw;
        width: 70vw;
    }
    .header--agencies .illustrationContainer::after {
        background-position: 14% 97%;
    }
    .header--agencies .header__legend::after {
        bottom: 5vw;
        margin-top: -17vw;
    }
    .header--agencies::after {
        bottom: 4vw;
        left: -23vw;
        width: 77vw;
    }
    .header--agency .illustrationContainer::after {
        bottom: -20vw;
        right: 25vw;
        width: 15vw;
    }
    .header--agency .header__legend::before {
        left: -1vw;
        top: 35vw;
        width: 19vw;
    }
    .header--agency::before {
        bottom: 1.5vw;
        left: -20vw;
    }
    .header--actus .illustrationContainer::after {
        background-position: 201% 57%;
        background-size: 95%;
    }
    .header--actus .header__legend::before {
        padding-top: 35vw;
        width: 8vw;
    }
    body > header.header--casclients {
        padding-top: 0vw;
        padding-bottom: 5.5vw;
    }
    .header--agencies .button--full {
        width: 65%;
    }
    .header--error .illustrationContainer::after {
        right: -7vw;
        top: -6vw;
        width: 25vw;
    }
    body > header.header--engagements {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .header--engagements .header__legend::before {
        left: 10vw;
        top: 48vw;
        width: 15vw;
    }
    .header--engagements:not(.header--history) .illustrationContainer::after {
        bottom: 15vw;
        right: 39vw;
        width: 15vw;
    }
    .header--team .header__legend::before {
        left: 3vw;
        top: 10vw;
        width: 10vw;
    }
    .header--team:not(.header--history) .illustrationContainer::after {
        bottom: -12vw;
        right: 38vw;
        width: 22.5vw;
    }
    .header--agency:not(.header--history) .illustrationContainer::after {
        right: 32vw;
    }
}

@media screen and (min-width: 1599.98px) {
    .header__legend::before {
        left: 40vw;
        top: 45vw;
    }
    .headerPart {
        gap: calc(var(--fsTitleH2) * .75);
    }
    body > .header--triangle {
        gap: 7.5vw;
        padding-bottom: 5vw;
        padding-inline: 15vw;
    }
    .header--triangle .illustrationContainer::before {
        background-position: -4vw -5%;
    }
    .header--triangle .header__legend::after {
        bottom: -4vw;
        left: 14vw;
        width: 8vw;
    }
    .header--triangle .header__legend::before {
        left: 20vw;
        width: 4vw;
    }
    .header--casclients::before {
        bottom: 10vw;
        left: 54vw;
    }
    .header--casclients .illustrationContainer::before {
        background-position: .75vw 0.5%;
        background-size: 62%;
    }
    .header--offres .header__legend::after {
        bottom: 2.5vw;
        left: 14vw;
        width: 8vw;
    }
    .header--offres .header__legend::before {
        bottom: 7.5vw;
        left: 22vw;
    }
    .header--arrow ~ .header--triangle .illustrationContainer::after {
        bottom: 6.5vw;
    }
    .header--arrow ~ .header--triangle .illustrationContainer::before {
        background-position: 0vw 0%;
        background-size: 70%;
    }
    .header--casclients .header__legend::before {
        bottom: 27.5vw;
        left: 55vw;
    }
    .header--casclients .illustrationContainer::after {
        background-position: -7% 81%;
    }
    .header--agencies .illustrationContainer::after {
        background-position: 8% 99%;
        background-size: 45%;
    }
    .header--agencies .illustrationContainer::before {
        background-position: 9vw 1%;
        background-size: 65%;
    }
    .header--agencies .header__legend::after {
        bottom: 5vw;
        left: 52vw;
        width: 35vw;
    }
    .header--agencies .header__legend::before {
        bottom: unset;
        left: -11.5vw;
        top: -11vw;
        width: 63.5vw;
    }
    .header--agencies::before {
        bottom: 25vw;
        left: 48vw;
    }
    .header--actus .illustration__inside {
        margin-top: 2vw;
        margin-left: -29vw;
    }
    .header--actus .illustrationContainer::after {
        background-position: 50% 52%;
        background-size: 95%;
    }
    .header--actus .header__legend::before {
        bottom: unset;
        left: 5vw;
        padding-top: 25vw;
        width: 8vw;
    }
    .header--arrow .illustration__before {
        clip-path: polygon(0% 0%, 0% 100%, 22.5% 50%);
    }
    body > header.header--offre:has(+ .header--triangle) {
        margin-bottom: 1vw;
    }
    .header--engagements .header__legend::before {
        left: 7.5vw;
        top: 40vw;
    }
    .header--engagements:not(.header--history) .illustrationContainer::after {
        bottom: 7vw;
    }
    .header--team:not(.header--history) .illustrationContainer::after {
        bottom: -11vw;
        width: 20vw;
    }
    .header--team .header__legend::before {
        width: 8vw;
    }
    .header--engagements .header__legend::before {
        left: 0vw;
        top: 40vw;
    }
}

@media screen and (min-width: 1799.98px) {
    .header--arrow .header__legend::before {
        left: 1vw;
        top: 14vw;
        width: 12.5vw;
    }
    .header--offre .header__legend::before {
        width: 10vw;
    }
    .header--arrow .illustrationContainer::after {
        bottom: -10.5vw;
        right: 43vw;
        width: 17.5vw;
    }
    .header--offre .illustrationContainer::after {
        bottom: -7.5vw;
        right: 47vw;
        width: 14vw;
    }
    .header--arrow .header__legend {
        flex: 0 0 32.5%;
    }
    .header--arrow .illustration__before {
        clip-path: polygon(0% 0%, 0% 100%, 25% 50%);
    }
    .header--casclients .header__legend::before {
        bottom: 20.5vw;
    }
    .header--casclients .illustrationContainer::before {
        background-position: 1.5vw 4%;
        background-size: 57.5%;
    }
    .header--casclients .illustrationContainer::after {
        background-position: -5% 79%;
        background-size: 68%;
    }
    .header--agencies::after {
        bottom: 4vw;
        left: -13vw;
        width: 67vw;
    }
    .header--agencies::before {
        bottom: 27.5vw;
        left: 51vw;
        width: 35vw;
    }
    .header--agency .illustrationContainer::after {
        bottom: -23vw;
        right: 42vw;
        width: 12.5vw;
    }
    .header--agency .header__legend::before {
        left: -3vw;
        top: 25vw;
        width: 17.5vw;
    }
    .header--actus .illustrationContainer::after {
        background-position: 50% 52%;
        background-size: 95%;
    }
    .header--actus .illustrationContainer::before {
        background-position: -1.5vw -1%;
        background-size: 57.5%;
    }
    .header--actus .header__legend::before {
        padding-top: 18vw;
        width: 7vw;
    }
    .header--agencies .button--full {
        width: 60%;
    }
    .header--error .header__legend::after {
        left: 26vw;
        width: 22.5vw;
    }
    .header--error .header__legend::before {
        top: 13.5vw;
        width: 6.5vw;
    }
    .header--engagements .header__legend::before {
        left: 9vw;
        top: 36vw;
        width: 12.5vw;
    }
    .header--engagements:not(.header--history) .illustrationContainer::after {
        bottom: 9vw;
        right: 44vw;
        width: 10vw;
    }
    .header--team:not(.header--history) .illustrationContainer::after {
        bottom: -7vw;
        right: 45vw;
        width: 15vw;
    }
    .header--team .header__legend::before {
        left: 3.5vw;
        top: 9vw;
    }
    .header--offre:not(.header--history) .illustrationContainer::after {
        bottom: -8vw;
        right: 44vw;
        width: 15vw;
    }
    .header--agency:not(.header--history) .illustrationContainer::after {
        bottom: unset;
        right: 39vw;
        top: 0vw;
        width: 18vw;
    }
}

@media screen and (min-width: 1919.98px) {
    .header--triangle .illustrationContainer::after {
        background-position: 60% 50%;
        background-size: 80%;
    }
    .header--triangle .illustrationContainer {
        flex: 0 0 60%;
    }
    .header--triangle .header__legend::after {
        bottom: -2.5vw;
        width: 7vw;
    }
    .header--triangle .header__legend::before {
        bottom: 2vw;
        width: 3.5vw;
    }
    .header--offres .header__legend::after {
        bottom: 3vw;
        left: 12vw;
        width: 7vw;
    }
    .header--offres .header__legend::before {
        bottom: 7vw;
        left: 18.5vw;
        width: 3.5vw;
    }
    .header--triangle .illustrationContainer::before {
        background-position: 4.5vw 2%;
        background-size: 60%;
    }
    .header--triangle p.introduction {
        width: 80%;
    }
    .header--arrow .header__legend::before {
        top: 11vw;
    }
    .header--arrow ~ .header--triangle .illustrationContainer::after {
        bottom: 7.5vw;
        right: 10vw;
    }
    .header--arrow .header__legend {
        flex: 0 0 30%;
    }
    .header--arrow .illustration__before {
        clip-path: polygon(0% 0%, 0% 100%, 20% 50%);
    }
    .header--agencies::after {
        bottom: 0vw;
        left: -14vw;
        width: 61vw;
        background-size: 85%;
        rotate: 0deg;
    }
    .header--agencies::before {
        bottom: 20.5vw;
        left: 49vw;
        width: 30vw;
    }
    .header--agency::before {
        bottom: 3.5vw;
        left: -18vw;
        width: 20vw;
    }
    .header--casclients .header__legend::before {
        bottom: 21.5vw;
        left: 52.5vw;
    }
    .header--casclients .illustrationContainer::after {
        background-position: -20% 100%;
        background-size: 67%;
    }
    .header--casclients .illustrationContainer::before {
        background-position: 5.5vw 4%;
        background-size: 47%;
    }
    .header--casclients::before {
        bottom: 6vw;
        left: 53vw;
    }
    body > header.header--casclients {
        padding-bottom: 3.5vw;
        padding-top: 1vw;
    }
    body > .clientscases {
        margin-inline: 15vw;
    }
    .header--agencies .illustrationContainer::after {
        background-position: 0% 100%;
        background-size: 36%;
    }
    .header--agencies .illustrationContainer::before {
        background-position: 15.5vw 6%;
        background-size: 50%;
    }
    .header--agencies .header__legend::after {
        bottom: 5vw;
        left: 49vw;
        margin-top: -30vw;
        width: 30vw;
    }
    .header--agencies .header__legend::before {
        bottom: unset;
        left: -7.5vw;
        top: -10vw;
        width: 55vw;
        rotate: 5deg;
    }
    .header--agencies .button--full {
        width: 55%;
    }
    .header--agency .header__legend::before {
        top: 30vw;
    }
    .header--agency .illustrationContainer::after {
        right: 40.5vw;
    }
    .header--actus .illustrationContainer::after {
        background-position: -2% 51%;
        background-size: 95%;
    }
    .header--actus .header__legend::before {
        bottom: 20.5vw;
        left: 5vw;
        padding-top: 10vw;
        width: 6.5vw;
    }
    .header--offre .header__legend::before {
        width: 7.5vw;
    }
    .header--offre .illustrationContainer::after {
        width: 12vw;
    }
    .header--arrow .illustration__inside {
        height: calc(100vh - 5rem);
    }
    .header--arrow ~ .header--triangle .illustration__inside {
        margin-top: 1vw;
    }
    .header--triangle .illustration__inside {
        margin-top: 2vw;
    }
    .header--error .header__legend::after {
        top: 42.5vw;
    }
    .header--error .illustrationContainer::after {
        right: -7vw;
        top: -4vw;
        width: 22.5vw;
    }
    body > header.header--error {
        margin-top: 2.5vw;
        padding-bottom: 0vw;
    }
    .header--error .header__legend::after {
        top: 37.5vw;
    }
    .header--error .introduction {
        width: 60%;
    }
    .header--engagements .header__legend::before {
        left: 2.5vw;
        top: 39vw;
    }
    .header--engagements:not(.header--history) .illustrationContainer::after {
        bottom: 12vw;
        right: 47vw;
        width: 12.5vw;
    }
    .header--team:not(.header--history) .illustrationContainer::after {
        bottom: -7vw;
        right: 48vw;
        width: 17.5vw;
    }
    .header--team .header__legend::before {
        width: 10vw;
    }
    .header--offre:not(.header--history) .illustrationContainer::after {
        right: 47vw;
    }
    .header--agency:not(.header--history) .illustrationContainer::after {
        bottom: unset;
        right: 43vw;
        top: 4vw;
        width: 15vw;
    }
}

@media screen and (min-width: 2099.98px) {
    .header--agencies .button--full {
        width: 50%;
    }
}

@media screen and (min-width: 2199.98px) {
    .header--casclients .header__legend::before {
        bottom: 14.5vw;
    }
    .header--arrow .illustration__before {
        clip-path: polygon(0% 0%, 0% 100%, 17.5% 50%);
    }
    .header--agencies .button--full {
        width: 47%;
    }
    .header--engagements .header__legend::before {
        top: 30vw;
    }
    .header--engagements:not(.header--history) .illustrationContainer::after {
        bottom: 10vw;
        right: 49vw;
        width: 10vw;
    }
}

@media screen and (min-width: 2399.98px) {
    .header--agencies .button--full {
        width: 43%;
    }
}

@media screen and (min-width: 2499.98px) {
    .header--agencies .button--full {
        width: 40.5%;
    }
}