app/static/css/assiduites.css

@@ -730,31 +730,11 @@ tr.row-justificatif.non_valide td.assi-type {
   background-color: var(--color-defaut) !important;
 }
 
-.color.est_just.sans_etat::before {
+.color.invalide {
-  content: "";
-  position: absolute;
-  width: 25%;
-  height: 100%;
-  background-color: var(--color-justi) !important;
-  right: 0;
-}
-
-.color.invalide::before {
-  content: "";
-  position: absolute;
-  width: 25%;
-  height: 100%;
-  right: 0;
   background-color: var(--color-justi-invalide) !important;
 }
 
-.color.attente::before,
+.color.attente {
-.color.modifie::before {
-  content: "";
-  position: absolute;
-  width: 25%;
-  height: 100%;
-  right: 0;
   background: repeating-linear-gradient(to bottom,
       var(--color-justi-attente-stripe) 0px,
       var(--color-justi-attente-stripe) 4px,
@@ -762,6 +742,10 @@ tr.row-justificatif.non_valide td.assi-type {
       var(--color-justi-attente) 7px) !important;
 }
 
+.color.est_just {
+  background-color: var(--color-justi) !important;
+}
+
 #gtrcontent .pdp {
   display: none;
 }

app/templates/assiduites/pages/calendrier_assi_etud.j2

@@ -75,36 +75,7 @@ Calendrier de l'assiduité
 
         <div class="help">
             <h3>Calendrier</h3>
-            <p>Code couleur</p>
+            {% include "assiduites/widgets/legende_couleur.j2" %}
-            <ul class="couleurs">
-                <li><span title="Vert" class="present demo"></span> &rightarrow; présence de l'étudiant lors de la
-                    période
-                </li>
-                <li><span title="Bleu clair" class="nonwork demo"></span> &rightarrow; la période n'est pas travaillée
-                </li>
-                <li><span title="Rouge" class="absent demo"></span> &rightarrow; absence de l'étudiant lors de la
-                    période
-                </li>
-                <li><span title="Rose" class="demo color absent est_just"></span> &rightarrow; absence justifiée
-                </li>
-                <li><span title="Orange" class="retard demo"></span> &rightarrow; retard de l'étudiant lors de la
-                    période
-                </li>
-                <li><span title="Jaune clair" class="demo color retard est_just"></span> &rightarrow; retard justifié
-                </li>
-
-                <li><span title="Quart Bleu" class="est_just demo"></span> &rightarrow; la période est couverte par un
-                    justificatif valide</li>
-                <li><span title="Justif. non valide" class="invalide demo"></span> &rightarrow; la période est
-                    couverte par un justificatif non valide
-                </li>
-                <li><span title="Justif. en attente" class="attente demo"></span> &rightarrow; la période
-                    a un justificatif en attente de validation
-                </li>
-            </ul>
-
-
-            <p>Vous pouvez passer le curseur sur les jours colorés afin de voir les informations supplémentaires</p>
         </div>
         <ul class="couleurs print">
             <li><span title="Vert" class="present demo"></span> présence
@@ -180,21 +151,8 @@ Calendrier de l'assiduité
             justify-content: start;
         }
 
-        .demo.invalide {
-            background-color: var(--color-justi-invalide) !important;
-        }
         
-        .demo.attente {
-            background: repeating-linear-gradient(to bottom,
-                    var(--color-justi-attente-stripe) 0px,
-                    var(--color-justi-attente-stripe) 4px,
-                    var(--color-justi-attente) 4px,
-                    var(--color-justi-attente) 7px) !important;
-        }
         
-        .demo.est_just {
-            background-color: var(--color-justi) !important;
-        }
 
 
         .demi .day.nonwork>span {

app/templates/assiduites/pages/signal_assiduites_group.j2

@@ -178,6 +178,11 @@
         </p>
     </div>
 
+    <div class="help">
+        <h3>Calendrier</h3>
+        {% include "assiduites/widgets/legende_couleur.j2" %}
+    </div>
+
     {% include "assiduites/widgets/toast.j2" %}
     {% include "assiduites/widgets/alert.j2" %}
     {% include "assiduites/widgets/prompt.j2" %}

app/templates/assiduites/widgets/legende_couleur.j2

@@ -1,12 +1,28 @@
-<li><span title="Vert" class="present demo"></span> &rightarrow; présence de l'étudiant lors de la période
+<p>Code couleur</p>
+<ul class="couleurs">
+    <li><span title="Vert" class="present demo"></span> &rightarrow; présence de l'étudiant lors de la
+        période
     </li>
-<li><span title="Orange" class="retard demo"></span> &rightarrow; retard de l'étudiant lors de la période
+    <li><span title="Bleu clair" class="nonwork demo"></span> &rightarrow; la période n'est pas travaillée
     </li>
-<li><span title="Rouge" class="absent demo"></span> &rightarrow; absence de l'étudiant lors de la période
+    <li><span title="Rouge" class="absent demo"></span> &rightarrow; absence de l'étudiant lors de la
+        période
+    </li>
+    <li><span title="Rose" class="demo color absent est_just"></span> &rightarrow; absence justifiée
+    </li>
+    <li><span title="Orange" class="retard demo"></span> &rightarrow; retard de l'étudiant lors de la
+        période
+    </li>
+    <li><span title="Jaune clair" class="demo color retard est_just"></span> &rightarrow; retard justifié
     </li>
 
-<li><span title="Hachure Bleue" class="justified demo"></span> &rightarrow; l'assiduité est justifiée par un
+    <li><span title="Quart Bleu" class="est_just demo color"></span> &rightarrow; la période est couverte par un
         justificatif valide</li>
-<li><span title="Hachure Rouge" class="invalid_justified demo"></span> &rightarrow; l'assiduité est
+    <li><span title="Justif. non valide" class="invalide demo color "></span> &rightarrow; la période est
-    justifiée par un justificatif non valide / en attente de validation
+        couverte par un justificatif non valide
     </li>
+    <li><span title="Justif. en attente" class="attente demo color"></span> &rightarrow; la période
+        a un justificatif en attente de validation
+    </li>
+</ul>
+<p>Vous pouvez passer le curseur sur les jours colorés afin de voir les informations supplémentaires</p>

app/templates/assiduites/widgets/minitimeline.j2

@@ -74,7 +74,13 @@
                 setupAssiduiteBubble(block, assiduité);
             }
 
-            // TODO: ajout couleur justificatif
+            // ajout couleur justificatif
+            const justificatifs = assiduité.justificatifs || [];
+            const justified = justificatifs.some(
+                (justificatif) => justificatif.etat === "VALIDE"
+            )
+
+            if(justified) block.classList.add("est_just");
 
             block.classList.add(assiduité.etat.toLowerCase());
             if(assiduité.etat != "CRENEAU") block.classList.add("color");