Merge branch 'ui-alerte-decrêt' into 'master'

Ui du panneau de notif

See merge request leximpact/leximpact-socio-fiscal-ui!100

src/lib/components/legifrance/ArticleView.svelte

@@ -70,6 +70,22 @@
 
 <div class="grid grid-cols-1 gap-x-8 sm:grid-cols-3">
   <div class="mb-4 sm:col-span-2">
+    <div
+      class="mb-3 flex rounded-md border-2 border-orange-500 bg-orange-100 p-2"
+    >
+      <Icon
+        class="mr-2 h-5 w-5 min-w-fit text-orange-500"
+        icon="ri-file-warning-fill"
+      />
+      <p class="text-orange-900">
+        Cet article est
+        <span class="font-bold"
+          >{#if numArticle.startsWith("A")}
+            un arrêté{:else if numArticle.startsWith("D")}un décret{:else if numArticle.startsWith("R")}un
+            décret pris en Conseil d'État{/if}</span
+        >. Il n'est pas amendable par un parlementaire.
+      </p>
+    </div>
     <h4 class="mb-2 font-serif text-xl italic text-gray-700 md:text-2xl">
       <Icon
         class="mr-1 inline-flex h-7 w-7 text-le-gris-dispositif-light"
@@ -105,23 +121,6 @@
   </div>
 </div>
 
-{#if numArticle.startsWith("A")}
-  <span class="bg-red-500">
-    Cet article fait partie d'un arrêté. Il n'est pas amendable par un
-    parlementaire.
-  </span>
-{:else if numArticle.startsWith("D")}
-  <span class="bg-red-500">
-    Cet article fait partie d'un décret. Il n'est pas amendable par un
-    parlementaire.
-  </span>
-{:else if numArticle.startsWith("R")}
-  <span class="bg-red-500">
-    Cet article fait partie d'un décret pris en Conseil d'État. Il n'est pas
-    amendable par un parlementaire.
-  </span>
-{/if}
-
 <div class="prose font-serif">
   {@html contenu}
 </div>