Retire le flou et ajoute le code couleur

src/lib/components/test_cases/TestCaseView.svelte

@@ -459,7 +459,7 @@
         Revenus disponibles du cas type /an
       </p>
     </div>
-    <div class="filter blur-xs place-self-center ">
+    <div class="place-self-center ">
       <p
         class=" text-2xl font-bold"
         title="⚠️ Les dispositifs n'étant pas tous à jour, ce montant est à considérer avec prudence"
@@ -470,18 +470,22 @@
           ].deltaAtVectorIndex ?? 0,
         )}
         {#if $billName !== undefined}
+          <span class="text-le-rouge-pjl">
             {euroAmountFormatter.format(
               evaluationByNameArrayByCalculationName.bill[situationIndex][
                 rootDecompositionName
               ].deltaAtVectorIndex ?? 0,
             )}
+          </span>
         {/if}
         {#if Object.keys($reform).length > 0}
+          <span class="text-black bg-le-jaune px-1">
             {euroAmountFormatter.format(
               evaluationByNameArrayByCalculationName.amendment[situationIndex][
                 rootDecompositionName
               ].deltaAtVectorIndex ?? 0,
             )}
+          </span>
         {/if}
       </p>
     </div>
@@ -492,7 +496,7 @@
     <div>
       <p class="text-sm leading-none text-center">Coût pour l'entreprise /an</p>
     </div>
-    <div class="filter blur-xs place-self-center">
+    <div class="place-self-center">
       <p
         class="text-base"
         title="⚠️ Les dispositifs n'étant pas tous à jour, ce montant est à considérer avec prudence"
@@ -503,18 +507,22 @@
           ].deltaAtVectorIndex ?? 0,
         )}
         {#if $billName !== undefined}
+          <span class="text-le-rouge-pjl">
             {euroAmountFormatter.format(
               evaluationByNameArrayByCalculationName.bill[situationIndex][
                 firstDecompositionName
               ].deltaAtVectorIndex ?? 0,
             )}
+          </span>
         {/if}
         {#if Object.keys($reform).length > 0}
+          <span class="text-black bg-le-jaune px-1">
             {euroAmountFormatter.format(
               evaluationByNameArrayByCalculationName.amendment[situationIndex][
                 firstDecompositionName
               ].deltaAtVectorIndex ?? 0,
             )}
+          </span>
         {/if}
       </p>
     </div>
@@ -527,7 +535,7 @@
         Coût ou gain pour l'État /an
       </p>
     </div>
-    <div class="filter blur-xs place-self-center">
+    <div class=" place-self-center">
       <p
         class="text-base"
         title="⚠️ Les dispositifs n'étant pas tous à jour, ce montant est à considérer avec prudence"
@@ -541,6 +549,7 @@
             ].deltaAtVectorIndex ?? 0),
         )}
         {#if $billName !== undefined}
+          <span class="text-le-rouge-pjl">
             {euroAmountFormatter.format(
               (evaluationByNameArrayByCalculationName.bill[situationIndex][
                 firstDecompositionName
@@ -549,16 +558,19 @@
                   rootDecompositionName
                 ].deltaAtVectorIndex ?? 0),
             )}
+          </span>
         {/if}
         {#if Object.keys($reform).length > 0}
+          <span class="text-black bg-le-jaune px-1">
             {euroAmountFormatter.format(
               (evaluationByNameArrayByCalculationName.amendment[situationIndex][
                 firstDecompositionName
               ].deltaAtVectorIndex ?? 0) -
-              (evaluationByNameArrayByCalculationName.amendment[situationIndex][
-                rootDecompositionName
-              ].deltaAtVectorIndex ?? 0),
+                (evaluationByNameArrayByCalculationName.amendment[
+                  situationIndex
+                ][rootDecompositionName].deltaAtVectorIndex ?? 0),
             )}
+          </span>
         {/if}
       </p>
     </div>

tailwind.config.cjs

@@ -23,6 +23,7 @@ const config = {
       },
       blur: {
         xs: '1.2px',
+        xxs: '0.8px',
       }
     },
     fontFamily: {