.fa-green {
    color: var(--inputCorrect);
}

.fa-red {
    color: var(--inputIncorrect);
}

.inputCorrect {
    box-shadow: 5px 5px 6px var(--inputCorrect);
}

.inputIncorrect {
    box-shadow: 5px 5px 6px var(--inputIncorrect);
}

.inputVide {
}


input, select,textarea {
    box-shadow: 2px 2px 3px black;
    padding: 0.5em;
}
textarea{
    height: 3rem;
}
label {
    align-self: center;
}

fieldset {
    grid-column: 1 / span 2;
    padding: 0.5em;
}

form {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-gap: 0.5em;
    grid-auto-rows: minmax(1em, auto);
    width: 75%;
}
.colSpan2{
    grid-column: 1 / span 2;
}

.oeil {
    position: absolute;
    right: 0.5em;
    margin-top:0.5em;
}

.infoBulle {
    position: absolute;
    background-color: whitesmoke;
    margin-top: 3vh;
    right: 0;
    z-index: 10;
    white-space: nowrap;
} 



.gridAideMDP {
    display: grid;
    grid-template-columns: 0.1fr 2fr;
    grid-gap: 0.2em;
    grid-auto-rows: minmax(1em, auto);
    width: 75%;
}

.donneeForm:has(select[required])::before,
.donneeForm:has(input[required])::before,
.donneeForm:has(textarea[required])::before {
    content: '*';
    color: red; 
    margin-right: 4px; 
    font-weight: bold; 
}


.donneeForm:has(select:not([required]))::before,
.donneeForm:has(input:not([required]))::before,
.donneeForm:has(textarea:not([required]))::before {
    /* Pour aligner les inputs */
    content: '*';
    color: var(--color4); 
    margin-right: 4px; 
    font-weight: bold; 
}