En l'absence de modification remplace le bouton jaune par un bouton gris...

En l'absence de modification remplace le bouton jaune par un bouton gris 'aucune modification' non cliquable

src/lib/components/impact/Button.svelte

@@ -52,7 +52,7 @@
 
 <div class="relative my-4 inline-block">
   <button
-    class="ease-out-back flex flex-row items-center gap-2 rounded border border-white bg-le-bleu px-5 py-2 text-sm font-bold uppercase tracking-[0.085em] text-white shadow-lg transition-all duration-200 hover:border-le-bleu hover:bg-gray-100 hover:text-le-bleu active:bg-gray-200 disabled:scale-90 disabled:opacity-0 lg:right-5 xl:right-10"
+    class="ease-out-back flex flex-row items-center gap-2 rounded-md border border-white bg-le-bleu px-5 py-2 text-sm font-bold uppercase tracking-[0.085em] text-white shadow-lg transition-all duration-200 hover:border-le-bleu hover:bg-gray-100 hover:text-le-bleu active:bg-gray-200 disabled:scale-90 disabled:opacity-0 lg:right-5 xl:right-10"
     onclick={() => triggerCalculation()}
   >
     {#if runningCalculation()}

src/lib/components/rules/ModificationsPanel.svelte

@@ -14,12 +14,25 @@
     openPanel: boolean
   } = $props()
 
-  // Le style d'un bouton jaune sans le positionnement extérieur et sans les dimensions
+  let modificationsNumber = $derived(
+    Object.keys(getAmendementDotations()).length,
+  )
+
+  // Le style d'un bouton sans le positionnement extérieur et sans les dimensions
+  const GRAY_BUTTON_STYLE =
+    "rounded-md shadow-md hover:bg-opacity-90 focus:outline-none bg-gray-200 text-gray-600 text-nowrap uppercase cursor-default"
   const YELLOW_BUTTON_STYLE =
-    "rounded border border-white bg-le-jaune-dark font-bold uppercase tracking-[0.085em] text-white shadow-lg transition-all duration-200 hover:border-le-jaune-dark hover:bg-gray-100 hover:text-le-jaune-dark active:bg-gray-200 disabled:scale-90 disabled:opacity-0"
+    "rounded-md border border-white bg-le-jaune-dark font-bold uppercase tracking-[0.085em] text-white shadow-lg transition-all duration-200 hover:border-le-jaune-dark hover:bg-gray-100 hover:text-le-jaune-dark active:bg-gray-200 disabled:scale-90 disabled:opacity-0 uppercase"
 </script>
 
 <div>
+  {#if modificationsNumber == 0}
+    <button
+      class="ease-out-back items-center {GRAY_BUTTON_STYLE} flex h-8 grow-0 items-center px-5 py-2 text-sm lg:right-5 xl:right-10"
+    >
+      AUCUNE MODIFICATION
+    </button>
+  {:else}
     <div class="relative my-4 inline-block">
       <button
         class="ease-out-back items-center {YELLOW_BUTTON_STYLE} px-5 py-2 text-sm lg:right-5 xl:right-10"
@@ -33,7 +46,7 @@
         <div
           class="absolute -bottom-2 -right-2 z-30 flex h-6 w-6 items-center justify-center overflow-hidden text-nowrap rounded-full border-2 border-white bg-le-jaune text-xs font-bold tracking-wider text-black shadow transition-all duration-200"
         >
-        {Object.keys(getAmendementDotations()).length}
+          {modificationsNumber}
         </div>
       {/if}
     </div>
@@ -75,4 +88,5 @@
         </div>
       {/snippet}
     </PersistentPopover>
+  {/if}
 </div>