svg {
    display: flex;
    width: 60vw;
    height: auto;
}

.fullLoader {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000000000;
    background-color: #000;
}


.blancGroupe {
    fill: none;
    stroke:#FFFFFF;
    stroke-width: 60;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    stroke-dasharray: 270;
    stroke-dashoffset: 270;
    animation: blancGroupe 4s ease forwards;
    animation-delay: 1.45s;
}

.masqueBlancGroupe {
    fill: #000;
}

.redGroupe {
    fill: #E83D3D;
    animation: redGroupe 2s ease forwards;
    transform-origin: 47.5% 87.5%;
}

.redHalo {
    fill: #E83D3D;
    transform: scale(3);
    opacity: 0;
    animation: Halo 2s ease infinite;
    transform-origin: 71.1% 19.15%;
    animation-delay: 1.75s;
}

.yellowGroupe1 {
    opacity: 0.8;
    fill: #EDC953;
    enable-background: new;
    animation: yellowGroupe1 2s ease forwards;
    transform-origin: 46.75% 42.75%;
    transform: scale(0);
}

.yellowGroupe2 {
    opacity: 0.8;
    fill: #EDC953;
    enable-background: new;
    animation: yellowGroupe2 2s ease forwards;
    transform-origin: 46.75% 48%;
    transform: scale(0);
}

.yellowGroupe3 {
    opacity: 0.8;
    fill: #EDC953;
    enable-background: new;
    animation: yellowGroupe3 2s ease forwards;
    transform: scale(0);
}

#yellowGroupe3Trait1 {
    transform-origin: 44.1% 82.5%;
    animation-delay: 0.1s;
}

#yellowGroupe3Trait2 {
    transform-origin: 42.5% 81.5%;
    animation-delay: 0.2s;
}

#yellowGroupe3Trait3 {
    transform-origin: 40.85% 81%;
    animation-delay: 0.3s;
}

#yellowGroupe3Trait4 {
    transform-origin: 39.25% 80.5%;
    animation-delay: 0.4s;
}

#yellowGroupe3Trait5 {
    transform-origin: 37.65% 79.6%;
    animation-delay: 0.5s;
}

#yellowGroupe3Trait6 {
    transform-origin: 45.6% 52.9%;
    animation-delay: 1.0s;
}

#yellowGroupe2Trait1 {
    transform-origin: 48.75% 48%;
    animation-delay: 1.65s;
}

#yellowGroupe2Trait2 {
    transform-origin: 48.1% 48%;
    animation-delay: 1.60s;
}

#yellowGroupe2Trait3 {
    transform-origin: 47.55% 48%;
    animation-delay: 1.55s;
}

#yellowGroupe2Trait4 {
    transform-origin: 46.95% 48%;
    animation-delay: 1.5s;
}

#yellowGroupe2Trait5 {
    transform-origin: 46.3% 48%;
    animation-delay: 1.45s;
}

#yellowGroupe2Trait6 {
    transform-origin: 45.8% 48%;
    animation-delay: 1.40s;
}

#yellowGroupe1Trait1 {
    animation-delay: 2.15s;
}

#yellowGroupe1Trait2 {
    animation-delay: 2.275s;
}

#yellowGroupe1Trait3 {
    animation-delay: 2.4s;
}

#yellowGroupe1Trait4 {
    animation-delay: 2.55s;
}

#yellowGroupe1Trait5 {
    animation-delay: 2.75s;
}

#yellowGroupe1Trait6 {
    animation-delay: 3.1s;
}


@keyframes redGroupe {
    0% {
        transform: translate(-23%, 64%);
    }

    100% {}
}

@keyframes blancGroupe {
    from {
        stroke-dashoffset: 270;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes yellowGroupe1 {
    0% {
        transform: scaleY(0);
    }

    100% {
        transform: scaleY(1);
    }
}

@keyframes yellowGroupe2 {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
    }
}


@keyframes yellowGroupe3 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}


@keyframes Halo {
    from {transform: scale(0); opacity: 1;}
    to {transform: scale(3); opacity: 0;}
}