.grand-logo{    
    position: absolute;
    display: flex;
    justify-content: space-around;
    left: 5px;
    width: 100vw;
    height: 100vh;
    max-width: 180px; /* 507px; */
    max-height: 145px; /* 362px; */
    overflow: hidden;
    /* margin: auto; */
    /* background-color: rgb(70, 70, 70); */
    /* border-radius: 50px; */
}

.petit-logo{
    max-width: 100px; /* 507px */
    max-height: 70px; /* 362px */
    z-index: 1000;
    display: none;
}

/* Ci-dessous à laisser */

.logoBox, .logoBox a{
    --from: 100%;
    --to: 100%;
    --time: 0.5s;
    position: absolute;
    display: flex;
    align-self: center;    
    width: var(--to);
}

.logoBox a{
    width: 100%;
}

.logoBox img{
    margin: 0 auto;
}

/* Animations */

.fromTo{
    animation: fromTo var(--time) linear 1;
}

.flash{
    animation: flash 0.15s linear 3;
}

.fadeIn{
    animation: fadeIn 2s linear 1;
}

.animShine{
    animation: shine 0.07s linear infinite;
}

/* @keyframes */

@keyframes fromTo{
    from {width: var(--from)} to {width: var(--to);}
}

@keyframes flash{
    from {opacity: 0} to {opacity: 1;}
}

@keyframes fadeIn{
    from {opacity: 0} to {opacity: 1;}
}

@keyframes shine{
    from {opacity: 0.7} to {opacity: 1;}
}