.flexRow{
    display: flex; /*de basse un display flex est en ligne*/
    flex-direction: row; /*on précise quand même que c'est en ligne*/
}

.flexCol{
    display: flex;
    flex-direction: column; /*flex colonne*/
}

.justifyCenter{
    justify-content: center; /*on justifie au milieu de la colonne*/
}

.spaceBetween{
justify-content: space-between; /* permet de mettre chaque élément de chaque côté de l'écran*/

}

.spaceAround{

    justify-content: space-around;/*marge equitable entre chaque élément*/
}

.flexEnd{

    justify-content: flex-end;/*plac el'élément à la fin du flex*/
}

.alignCenter{

        align-items: center; /* aligner au centre de la ligne*/
}

.position{
    position: relative;
}

.textCenter{
    text-align: center;/*aligne et centre un texte*/
}

.flexWrap{
    display: flex;
    flex-wrap: wrap;
}

.uppercase{
    text-transform: uppercase;
}

.alignEnd{
    align-items: flex-end;
}

#zoneDeNotification{
    position: fixed;
    z-index: 100000;
    top: 110px;
    right: 20px;
    
    
}

.alert{
    
    
    font-size: 15px;
    line-height: 25px;
    border-radius: 5px;
    
    padding: 30px 20px;
    font-weight: bold;
    max-width: 250px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

    animation: vanish 5s forwards;
}

.alert-success{
    background-color: rgba(192, 222, 192, .8);
    color: rgb(0, 52, 0);
    border: 2px solid rgb(0, 52, 0);
}

.alert-danger{
    background-color: rgba(255, 165, 165, .8);
    color: rgb(112, 0, 0);
    border: 2px solid rgb(112, 0, 0);
}

@keyframes vanish {
    0% { opacity : 0; transform: translateY(-20px);}
    10% { opacity : 1 ; transform: translateY(0);}
    80% { opacity : 1 ;}
    100% { opacity: 0; visibility: hidden;}

}