{# Explication des états des justificatifs #}

<div class="explication-etats-justifs">
    <div class="explication-titre">États des justificatifs</div>
    <div class="explication-etats">
        <div class="valide">Justificatif valide</div>
        <div class="legend">ayant été considéré comme valide, justifie les absences
        ou retards de la période
        </div>

        <div class="attente">Justificatif soumis</div>
        <div class="legend">en attente de validation. Les absences ne sont pas
        encore considérées comme justifiées.
        </div>

        <div class="modifie">Justificatif modifié</div>
        <div class="legend">une information a été ajoutée ou modifiée. Doit être validé avant
        d'être pris en en compte.
        </div>

        <div class="invalide">Justificatif invalide</div>
        <div class="legend">proposé mais considéré comme non valide.
        Les absences ne sont pas justifiées.
        </div>
    </div>
</div>

<style>
.explication-etats-justifs {
    margin-top: 32px;
    margin-left: 12px;
    padding: 8px;
}
.explication-etats-justifs .explication-titre {
    font-size: 110%;
    font-weight: bold;
    margin-bottom: 8px;
}
.explication-etats-justifs .explication-etats {
    display: grid;
    grid-template-columns: auto 1fr;
    font-size: 80%;
}
.explication-etats > div {
    margin-bottom: 8px;
    margin-right: 8px;
    padding: 6px;
}
.explication-etats-justifs div.legend {
    font-style: italic;
}
.valide {
    background-color: var(--color-justi);
}
.attente {
    background-color: var(--color-justi-attente);
}
.modifie {
    background-color: var(--color-justi-modifie);
}
.invalide {
    background-color: var(--color-justi-invalide);
}




</style>