.acccueilPage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: exit 2s ease 3.5s 1 normal forwards;
}
@keyframes exit {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
.genos, .center {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.genos::before {

    content: "";
    width: 0%;
    height: 0.5px;
    background: black;
    position: absolute;
    right: calc(50% + 148px);
    bottom: 1px;
    animation: genos 1s ease-in;
}

.center::before {

    content: "";
    width: 0%;
    height: 0.5px;
    background: black;
    position: absolute;
    left: calc(50% + 207px);
    bottom: 2px;
    animation: center 1s ease-in;
}

@keyframes genos {
    0% {
        width: 57%;
        right: calc(93% + 148px);
    }
    80% {
        right: calc(48% + 148px);
    }
    100% {
        width: 0%;
    }
}

@keyframes center {
    0% {
        width: 57%;
        left: calc(93% + 148px);
    }
    80% {
        left: calc(51% + 148px);
    }
    100% {
        width: 0%;
    }
}


svg {
}

path {
    fill: none;
    stroke: black;
    stroke-width: 1;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
}

.pathAnimated1, .pathAnimated11 {
    animation: draw 1.5s 1s ease forwards;
}

.pathAnimated2, .pathAnimated10 {
    animation: draw 1.5s 1.2s ease forwards;
}

.pathAnimated3, .pathAnimated9 {
    animation: draw 1.5s 1.4s ease forwards;
}

.pathAnimated4, .pathAnimated8 {
    animation: draw 1.5s 1.6s ease forwards;
}

.pathAnimated5, .pathAnimated7 {
    animation: draw 1.5s 1.8s ease forwards;
}

.pathAnimated6 {
    animation: draw 1.5s 2s ease forwards;
}

@keyframes draw {
    60%{
        fill: none;
    }
    80% {
        stroke-dashoffset: 0;
        stroke-width: 1;
    }
    90%{
        stroke: var(--primary);
    }
    100% {

        fill: var(--primary);
        stroke-width: 0;
    }
}


/* ================== LOGO =============== */
.acccueilPage img{
    width: 250px;
    opacity: 1;
    animation: logoAppear 3s linear;
    margin-bottom: 51px;
}
@keyframes logoAppear {
    0%{
        opacity: 0;
    }80%{
             opacity: 0;
         }


    100%{

        opacity: 1;
    }
}