body {
    margin: 0;
    /*background-color: blueviolet;*/
}


.new_conteneur {
    display: flex;
    flex-direction: column;
    /* Aligne les éléments en colonne */
    align-items: center;
    /* Centre les éléments horizontalement */
    justify-content: flex-start;
    /* Aligne les éléments tout en haut */
    gap: 0px;
    /* Espace entre les div */
    min-height: 100vh;
    /* Prend toute la hauteur de l'écran */
    /*min-width: 90vh;*/
    padding-top: 5px;
    /* Optionnel : évite que le premier élément colle complètement au bord haut */
    /*background-color: grey;*/
    background-color: #f0f0f0;
}

.new_header {
    display: flex;
    /* Met les enfants sur la même ligne */
    /*justify-content: space-between;*/
    /* Espace les 3 div uniformément */
    justify-content: center;
    width: 100%;
    /*background-color: orange;*/
    background-color: #f0f0f0;
    /* min-width: 300px;*/
    max-width: 600px;
}

.new_col_left {
    /*background-color: rgb(158, 192, 221);*/
    background-color: #f0f0f0;
}

.new_header_centre {
    text-align: center;
    width: 70%;
    /*background-color: rgb(108, 168, 221);*/
    background-color: #f0f0f0;
}

.new_col_right {
    /*background-color: rgb(42, 137, 219);*/
    background-color: #f0f0f0;
}



.new_titre {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 600px;

    text-align: center;
    /*background-color: rgba(255, 166, 0, 0.596);*/
    background-color: #f0f0f0;
}

.new_titre_centre {
    text-align: center;
    width: 96%;
    /*background-color: rgb(10, 90, 160);*/
    background-color: #f0f0f0;

}

.new_titre_centre h1 {
    margin-top: 0px;
}



.new_content {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 600px;

    text-align: center;
    /*background-color: rgb(173, 95, 95);*/
    background-color: #f0f0f0;

}

.new_content_centre {
    text-align: center;
    width: 96%;
    /*background-color: rgb(87, 199, 87);*/
    background-color: #f0f0f0;
}




.img-avatar {
    /*position: relative;*/
    /*top: 5px;
  left: 5px;*/
    width: 36px;
    height: 36px;
}

.new_container_legende {
    margin-top: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    /*background-color: rgb(87, 199, 87);*/
    display: flex;
    justify-content: center;
}

.new_tbl_legende {
    width: 100%;
    text-align: left;
    /*background-color: rgb(173, 87, 199);*/
}

.img-locked {
    position: absolute;
    top: 1.5em;
    left: 0px;
    height: 3em;

    filter: drop-shadow(5px 5px 10px rgba(185, 184, 184, 0.5));
}

/* button defi */
button.defi {
    color: white;
    min-width: 280px;

}

.textButton {
    filter: drop-shadow(1px 1px 5px rgba(5, 5, 5, 0.7));

}

button.defi-finished {
    background: #b5b9b5;
}

button.defi-current {
    background: #4CAF50;
}

button.defi-future {
    background: #4CAF50;
}

.finished {
    opacity: 0.6;
}

.ban-msg {
    color: red;
    border-style: dotted;
    border-color: red;
    padding: 1em;
    text-align: center;
}