Changed related test case "selected" layout

src/lib/components/test_cases/TestCaseRelatedCarousel.svelte

@@ -82,20 +82,17 @@
     on:scroll={(ev) => (carouselScrollX = ev.target.scrollLeft)}
     class="flex w-full snap-x scroll-p-10 gap-5 overflow-x-auto scroll-smooth py-5 md:-ml-14 lg:-ml-20 2xl:-ml-[88px]"
   >
-    <!--    <div class="snap-center shrink-0">-->
-    <!--        <div class="shrink-0 w-4 sm:w-20"></div>-->
-    <!--    </div>-->
     <div />
     {#each filteredTestCases as { situation, situationIndex }}
       {@const isTestCaseSelected =
         JSON.stringify(displayMode.testCasesIndex) ===
         JSON.stringify([situationIndex])}
       <div
-        class="w-[80%] shrink-0 snap-start md:w-[400px]"
+        class="flex w-[80%] shrink-0 snap-start md:w-[400px]"
         value={situationIndex}
       >
         <button
-          class="group w-full text-start"
+          class="group w-full self-start text-start"
           on:click={() => {
             if (!isTestCaseSelected)
               replacementValidationModalTestCaseIndex = situationIndex
@@ -103,8 +100,9 @@
           type="button"
         >
           <div
-            class="overflow-hidden rounded-md border-2 hover:border-le-bleu hover:bg-gray-200"
-            class:border-le-bleu={isTestCaseSelected}
+            class="overflow-hidden rounded-md border-2"
+            class:hover:border-le-vert-500={!isTestCaseSelected}
+            class:cursor-default={isTestCaseSelected}
             id="situation_{situationIndex}_case_summary"
           >
             <div class="bg-gray-100 p-4 pb-2 text-left">
@@ -135,17 +133,24 @@
             </div>
           </div>
           <span
-            class="text-sm group-hover:text-le-bleu 2xl:text-base"
-            class:text-le-bleu={JSON.stringify(displayMode.testCasesIndex) ===
-              JSON.stringify([situationIndex])}
+            class="text-sm 2xl:text-base"
+            class:group-hover:text-le-vert-800={!isTestCaseSelected}
           >
             {situation.title}
           </span>
         </button>
+        {#if isTestCaseSelected}
+          <span
+            class="-ml-32 -mt-4 flex h-fit shrink-0 items-center gap-1 rounded-2xl bg-le-vert-200 px-3 py-1 text-sm text-le-vert-900"
+          >
+            sélectionné
+            <iconify-icon icon="ri-check-line" />
+          </span>
+        {/if}
       </div>
     {/each}
     <div
-      class="w-[80%] shrink-0 snap-center rounded-md border-2 bg-white/30 hover:border-le-bleu hover:bg-gray-50/50 md:w-[400px]"
+      class="w-[80%] shrink-0 snap-start rounded-md border-2 bg-white/30 hover:border-le-vert-500 hover:bg-gray-50/50 hover:text-le-vert-800 md:w-[400px]"
     >
       <button
         class="flex h-full min-h-[320px] w-full flex-col items-center justify-center gap-5"

tailwind.config.cjs

@@ -50,6 +50,19 @@ const config = {
         "le-gris-dispositif-dark": "#2F406A",
         "le-vert-validation": "#13CC03",
         "le-vert-validation-dark": "#377330",
+        "le-vert": {
+          50: "#f1f0e6",
+          100: "#e2e1cd",
+          200: "#c5c39c",
+          300: "#a8a66a",
+          400: "#8b8839",
+          500: "#6e6a07",
+          600: "#635f06",
+          700: "#585506",
+          800: "#424004",
+          900: "#2c2a03",
+          950: "#161501",
+        },
       },
       keyframes: {
         blinker: {