Agit sur les magins pour distinguer les variables des groupes

src/lib/components/variables/VariableReferredInputs.svelte

@@ -52,17 +52,17 @@
   influentes sur :
 </h2>
 <h1
-  class="bg-le-gris-dispositif-light font-serif text-center mb-3 p-2 sm:p-1 md:p-2 rounded-md  "
+  class="bg-le-gris-dispositif-light font-serif text-center mb-3 p-2 rounded-md text-lg"
 >
   <p class="font-medium">{variable.label ?? variable.name}</p>
 </h1>
 
 {#if directInputs.length > 0}
-  <section>
+  <section class="bg-gray-100 pb-3 mb-3">
     <h2
-      class="bg-gray-100 flex font-medium justify-between p-2 sm:p-1 md:p-2 text-gray-800 text-lg"
+      class="text-gray-500 flex font-medium tracking-wide justify-between p-2 text-lg"
     >
-      <span>Variables d'entrée directes</span>
+      <span>Caractéristiques écrites dans la formule du dispositif</span>
       <button on:click={() => (openDirectInputs = !openDirectInputs)}>
         {#if openDirectInputs}
           <!-- Material Icons name: Expand Less -->
@@ -101,9 +101,9 @@
 {/if}
 
 {#if inputs.length > 0}
-  <section>
+  <section class="bg-gray-100 pb-3 mb-3">
     <h2
-      class="bg-gray-100 text-gray-500 flex font-medium tracking-wide justify-between p-2 text-lg"
+      class=" text-gray-500 flex font-medium tracking-wide justify-between p-2 text-lg"
     >
       <span>Caractéristiques directement influentes</span>
       <button on:click={() => (openAllInputs = !openAllInputs)}>