Première version du message

src/lib/components/variables/VariableReferredInputs.svelte

@@ -28,12 +28,13 @@
   $: openAllInputs = directInputs.length === 0
 </script>
 
-<h2 class="font-bold text-xl pt-3 pb-2">
+<h2 class="font-bold text-xl pt-3 pb-2 mx-5">
   Définir d'autres caractéristiques <br />
   influentes sur :
 </h2>
+
 <h1
-  class="bg-le-gris-dispositif-light font-serif text-center mb-3 p-2 rounded-md text-lg"
+  class="bg-le-gris-dispositif-light font-serif text-center mb-3 p-2 rounded-r mr-5 text-lg"
 >
   <p class="font-medium">{variable.label ?? variable.name}</p>
   <a
@@ -42,10 +43,31 @@
   >
 </h1>
 
+<div class="bg-le-bleu-light rounded p-2 drop-shadow-md m-5">
+  <p class="px-2 pb-1">
+    <span class="font-bold"
+      >Vous avez besoin de configurer plus précisemment votre cas type ?</span
+    >
+    Contactez-nous sur
+    <a class="underline hover:text-le-bleu" href="mailto:leximpact@an.fr"
+      >leximpact@an.fr</a
+    >.
+  </p>
+
+  <p class="bg-white text-sm m-1 p-2 rounded">
+    Le mode de configuration avancée est fonctionnel mais encore difficile
+    d'accès. Si vous avez besoin d'utiliser votre cas type dans un amendement,
+    nous vous proposons une relecture.
+    <br />Pour cela, utilisez la fonctionnalité "Sauvegarder/Partager dans la
+    partie supérieure droite de l'écran et transmettez nous le lien de votre
+    copie de travail ainsi qu'un résumé du cas type que vous cherchez à
+    concevoir."
+  </p>
+</div>
 {#if directInputs.length > 0}
-  <section class="bg-gray-100 pb-3 mb-3">
+  <section class="pb-3 mb-3 mr-5">
     <h2
-      class="text-gray-500 flex font-medium tracking-wide justify-between p-2 text-lg"
+      class="bg-le-gris-dispositif-ultralight text-black flex justify-between py-2 text-lg px-5 rounded-r shadow-inner"
     >
       <span>Caractéristiques écrites dans la formule du dispositif</span>
       <button on:click={() => (openDirectInputs = !openDirectInputs)}>
@@ -74,6 +96,7 @@
     </h2>
 
     {#if openDirectInputs}
+      <div class="ml-5">
         <ul>
           {#each directInputs as input}
             <li>
@@ -86,14 +109,15 @@
             </li>
           {/each}
         </ul>
+      </div>
     {/if}
   </section>
 {/if}
 
 {#if inputs.length > 0}
-  <section class="bg-gray-100 pb-3 mb-3">
+  <section class="pb-3 mb-3 mr-5">
     <h2
-      class=" text-gray-500 flex font-medium tracking-wide justify-between p-2 text-lg"
+      class="bg-le-gris-dispositif-ultralight text-black flex justify-between py-2 text-lg px-5 rounded-r shadow-inner"
     >
       <span>Caractéristiques directement influentes</span>
       <button on:click={() => (openAllInputs = !openAllInputs)}>
@@ -120,6 +144,7 @@
     </h2>
 
     {#if openAllInputs}
+      <div class="ml-5">
         <ul>
           {#each inputs as input}
             <li>
@@ -132,6 +157,7 @@
             </li>
           {/each}
         </ul>
+      </div>
     {/if}
   </section>
 {/if}