header{
    height: 15vh;
    flex:none;
    background-color: var(--color5);
    color: var(--color1);
}
.titre{
    font-size: 2.5em;
} 
.logo{
    padding:0.5em;
}
.titreListe, .labelListe{
    font-size: 2 em;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: bold;
}
body{
    background-color: var(--color4);
}
footer{
    background-color: var(--color5);
    color: var(--color1);
    font-size: 0.8em;
    position: fixed;
    bottom:0;
    width: 100%;
   
     padding: 2em; 
}
main{
    padding-bottom: 20vh;
    margin:5em;
}

input,select, button{
    padding: 0.5em;
}
.labelListe{
    grid-gap:0.2em;
}
.labelListe .left{
    justify-content: unset;
}
.titreForm{
    padding: 3em;
}

nav a > div , nav > div{
    padding: 2em 0.2em;
    box-shadow: 2px 2px 3px black;
    justify-content: center;
    margin: 0.3em;
    background-color: var(--color2);
}
.sous-menu a > div{
    padding: 0.5em 2em;
    box-shadow: 2px 2px 3px black;
}
nav a > div:hover , nav > div:hover{
    background-color: var(--color2);
}
nav div:hover .sous-menu{
    display: flex;
}
.sous-menu{
    display: none;
    position: absolute;
    top: 5em;
}
.left {
    justify-content: left !important;
}
.estompe{
    opacity:0.3;
}

.absolu {
    position: absolute;
    top: 5em;
    left: 5em;
}

.relatif {
    position: relative;
}
.aideMdp {
    flex-direction: column;
    z-index: 2;
    font-size: 0.8em;
    display: none;
    white-space: nowrap;
    border-radius: 2vh;
    background-color: white;
    padding: 1vh;
}

.rouge {
    color: red;
}

.vert {
    color: #3db651;
}

input[required], select[required]{
    background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%);
    background-size: 2em 2em;
    background-position: 90% top;
    background-repeat: no-repeat;
}

input[class*="heure"]{ /* les input qui ont heure dans classList*/
    text-align: center;
    min-width: 0; /* pour que l'inut ne dépasse pas la grid */
}
.heuretotal{
    height:2em;
}
#chart{
    margin-top: 2em;
    background-color: var(--color6);
    height: 50vh;
    resize: both;
    overflow: auto;
    border: 2px solid black;
}