h1{
    font-size: 34px;
    text-align: center;
}

#Site{
    margin-top: 5%;
}
#Titre{
    color: #D9002E;
}

.orange{
    height:150px;
    width:150px;
    margin-left:5%;

    animation: rotation 6s linear infinite; /* Durée et répétition de l'animation /
        transform-origin: center center; / Centre de rotation */
}


.bleu{
    height:110px;
    width:110px;
    position: absolute;
    top:2%;
    right:2%;


    animation: rotation 6s linear infinite; /* Durée et répétition de l'animation /
        transform-origin: center center; / Centre de rotation */
}

.Vert{
    height:140px;
    width:140px;
    position: absolute;
    top:70%;
    right:8%;


    animation: rotation 6s linear infinite; /* Durée et répétition de l'animation /
        transform-origin: center center; / Centre de rotation */
}

.Violet{
    height:120px;
    width:120px;
    position: absolute;
    top:80%;
    left:8%;


    animation: rotation 6s linear infinite; /* Durée et répétition de l'animation /
        transform-origin: center center; / Centre de rotation */
}


/* Animation pour la rotation */
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#connexion{
    font-size: 22px;
    margin-top:-11%;
    margin-bottom:7%;
    color: #D9002E;
}

.formulaire {
    display: flex;
    flex-direction: column; /* Si vous voulez une structure en colonne */
    text-align: center;
    align-items: center;
    border: 3px solid rgba(0, 0, 0, 0.50);
    border-radius: 20px;
    background-color: rgba(233, 233, 233, 0.438);
    width: 30%;
    padding: 5% 0 2% 0;
    margin: auto; /* Centre horizontalement */
    margin-top:-3%;

    /* Transition fluide avec une durée plus longue et un timing plus doux */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
}

#identifiant2{
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-style: normal;

}

#mdp2{
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-style: normal;
}

#btnconnexion{
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
    background-color: #D9002E;
    color: #FFFFFF;
    border-radius: 15px;
    border: 0px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left: 40px;
    padding-right: 40px;
    font-size: 14px;
    margin-top:10%;
}

.formulaire:hover{
    transform: scale(1.006);
}

#logoindex {
    display: block;
    height: 47px;
    position: fixed;
    bottom: 10px; /* Ajustez la marge depuis le bas selon votre préférence */
    left: 50%; /* Centre horizontalement */
    transform: translateX(-50%); /* Ajuste pour aligner au centre */
}