Design tutoriel pour ajouter des caractéristiques

src/lib/components/test_cases/TestCaseEdit.svelte

@@ -263,7 +263,7 @@
   }
 </script>
 
-<section class="bg-gray-100 border-b-2 border-gray-200 p-2 my-2 rounded-sm">
+<section class="bg-gray-100 border-b-2 border-gray-200 p-2 my-2 rounded">
   <SituationEdit on:changeSituation {situation} {year} />
 
   <!-- <h3 class="font-bold pb-2">Personnes composant le cas type</h3>

src/routes/simulation.svelte

@@ -469,11 +469,29 @@
           <h2 class="font-bold text-xl pt-3">
             Définir d'autres caractéristiques
           </h2>
-          <p class="italic">
-            Depuis le cas type concerné, cliquez sur le nom d'une mesure à
-            droite pour éditer les variables entrant dans le calcul de cette
-            mesure.
+          <div
+            class="bg-white border-le-bleu-light border-4 shadow-lg rounded-md my-12 mx-2 xl:mx-10"
+          >
+            <h1
+              class="bg-le-bleu-light text-2xl font-light text-gray-600 py-3 px-4 "
+            >
+              Ajouter d'autres caractéristiques
+            </h1>
+
+            <p class="py-2 px-4 font-light text-gray-600">
+              Depuis les cas type à droite de l'interface, <span
+                class="font-normal">cliquez sur le nom d'un dispositif</span
+              > de la colonne de droite pour éditer les variables entrant dans le
+              calcul de ce dispositif.
             </p>
+
+            <div class="m-4">
+              <img
+                src="/tutoriel-edition-cas-type-variables-supp.png"
+                alt="Tutoriel indiquant de cliquer sur un dispositif du cas type pour pouvoir ajouter d'autres caractéristiques au cas type."
+              />
+            </div>
+          </div>
         {:else if editionMode.mode === "test_case_with_variable_inputs"}
           <div class="flex justify-end space-x-2">
             <!-- Bouton de fermeture de l'édition du cas type et des variables d'entrée-->
@@ -494,9 +512,11 @@
           <h1 class="text-3xl font-bold text-gray-600 pb-5 md:mt-10">
             Configurer le cas type
           </h1>
-          <h2 class="font-bold text-xl">
-            Caractéristiques actives du cas type
-          </h2>
+          <p class="text-sm my-4 text-gray-700 rounded bg-le-bleu-light p-2">
+            📌 Par défaut, toutes les caractéristiques du cas type sont
+            considérées comme étant stables depuis 2 ans.
+          </p>
+
           <TestCaseEdit
             on:changeAxes={changeAxes}
             on:changeSituation={({ detail }) =>