Mise en forme de la parte des formules et paramètres présents dans la formule

src/lib/components/variables/FormulaView.svelte

@@ -44,30 +44,39 @@
 </div>
 <p class="my-4">
   <a
-    class="hover:underline text-gray-900 text-sm"
+    class="text-gray-900 hover:text-le-bleu text-xs underline"
     href={newFormulaRepositoryUrl(metadata, formula)}
     >Lien vers la page de la formule OpenFisca sur Github</a
   >
 </p>
+
+<h2 class="pb-2">Formules et paramètres présents dans la formule&nbsp;:</h2>
+<div class="text-sm border-t-0 border-b-0 border-r-0 border-l-4 px-8">
   {#if extraction.openFiscaParametersName.size > 0}
-  <section>
-    <h1>Paramètres référencés</h1>
+    <section class="mb-2">
+      <h3 class="mb-1 ">Paramètres&nbsp;:</h3>
       <ul class="list-disc list-inside">
         {#each [...extraction.openFiscaParametersName].sort() as parameterName}
           <li>
-          <a class="link" href="/parameters/{parameterName}">{parameterName}</a>
+            <a
+              class="text-gray-900 hover:text-le-bleu  underline"
+              href="/parameters/{parameterName}">{parameterName}</a
+            >
           </li>
         {/each}
       </ul>
     </section>
   {/if}
   {#if extraction.decomposition !== undefined}
-  <section>
-    <h1>Décomposition</h1>
+    <section class="mb-2">
+      <h3 class="mb-1  ">Décomposition&nbsp;:</h3>
       <ul class="list-disc list-inside">
         {#each extraction.decomposition as variableName}
           <li>
-          <a class="link" href="/variables/{variableName}">{variableName}</a>
+            <a
+              class="text-gray-900 hover:text-le-bleu  underline"
+              href="/variables/{variableName}">{variableName}</a
+            >
           </li>
         {/each}
       </ul>
@@ -79,7 +88,7 @@
                 <ul class="list-disc list-inside">
                   {#each formula.variables as variableName}
                     <li>
-                      <a class="link" href="/variables/{variableName}"
+                      <a class="text-gray-900 hover:text-le-bleu underline" href="/variables/{variableName}"
                         >{variableName}</a
                       >
                     </li>
@@ -88,14 +97,18 @@
               </section>
             {/if} -->
   {#if extraction.openFiscaVariablesName.size > 0}
-  <section>
-    <h1>Variables référencées</h1>
+    <section class="mb-2">
+      <h3 class="mb-1  ">Formules&nbsp;:</h3>
       <ul class="list-disc list-inside">
         {#each [...extraction.openFiscaVariablesName].sort() as variableName}
           <li>
-          <a class="link" href="/variables/{variableName}">{variableName}</a>
+            <a
+              class="text-gray-900 hover:text-le-bleu  underline"
+              href="/variables/{variableName}">{variableName}</a
+            >
           </li>
         {/each}
       </ul>
     </section>
   {/if}
+</div>

src/lib/components/variables/VariableView.svelte

@@ -128,6 +128,27 @@
       {/each}
     </section>
 
+    <!-- Caractéristiques avancées-->
+    <section class="my-4">
+      <p class="pb-2">Caractéristiques avancées :</p>
+
+      <div class="text-sm border-t-0 border-b-0 border-r-0 border-l-4 px-8">
+        {#if variable.definition_period !== undefined}
+          <div class="py-1">
+            Période de définition&nbsp;: {variable.definition_period}
+          </div>
+        {/if}
+
+        {#if variable.entity !== undefined}
+          <div class="py-1">Entité&nbsp;: {variable.entity}</div>
+        {/if}
+
+        {#if variable.value_type !== undefined}
+          <div class="py-1">Type de valeur&nbsp;: {variable.value_type}</div>
+        {/if}
+      </div>
+    </section>
+
     <section>
       <div>
         <!-- svelte-ignore a11y-missing-attribute -->
@@ -208,18 +229,6 @@
     </div>
   {/if}
 
-  {#if variable.definition_period !== undefined}
-    <div>Période de définition : {variable.definition_period}</div>
-  {/if}
-
-  {#if variable.entity !== undefined}
-    <div>Entité : {variable.entity}</div>
-  {/if}
-
-  {#if variable.value_type !== undefined}
-    <div>Type de valeur : {variable.value_type}</div>
-  {/if}
-
   <div>
     <a class="link" href={newVariableRepositoryUrl(metadata, variable)}
       >Source</a