play page : add dynamical coming soon status. related to #37

src/views/Play.svelte

@@ -270,7 +270,7 @@
             class="button play-icon"
           >{t('play')}</a>
         {:else}
-          <button class="button" disabled>{t('coming_soon')}</button>
+          <button class="button with-icon lock-icon" disabled>{t('coming_soon')}</button>
         {/if}
       </div>
     {/if}
@@ -280,7 +280,14 @@
   <nav class="play-carousel" aria-label="Choisir un jeu">
     <ul role="list">
       {#each games as game, i}
-        <li class="play-carousel-item" class:active={i === currentIndex}>
+        <li 
+          class={[
+            "play-carousel-item", 
+            i === currentIndex ? 'active' : '', 
+            !game.playLink ? 'coming-soon' : ''
+          ]}
+          style:--status={!game.playLink ? '"' + t('coming_soon') + '"' : 'false'}
+          >
           <button
             aria-label={game.title}
             aria-current={i === currentIndex ? 'true' : undefined}
@@ -440,18 +447,37 @@
     height: 100%;
   }
 
+  .play-carousel-item :global(picture) {
+    display: block;
+  }
+
   .play-carousel-item button {
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: flex-start;
     gap: 0.5rem;
     background: none;
     cursor: pointer;
     transition: all 0.4s var(--ease-standard);
   }
 
+  .play-carousel-item.coming-soon button::after {
+    content: var(--status);
+    text-transform: uppercase;
+    font-family: "Danzza Bold", sans-serif;
+    font-size: .7rem;
+    background-color: var(--color-primary);
+    margin-top: 1rem;
+    padding: .5rem .7rem;
+    border-radius: .5rem .5rem .5rem .5rem;
+    position: absolute;
+  }
+
   .play-carousel-item :global(img) {
     width: clamp(140px, 15.09vw, 291px);
+    border-radius: 25%;
   }
 
   .play-carousel-item.active :global(img) {
@@ -462,7 +488,10 @@
     object-fit: cover;
     transition: all 0.4s var(--ease-standard);
     border: 5px solid var(--color-primary);
-    border-radius: 25%;
+  }
+
+  .play-carousel-item.coming-soon :global(img) {
+    filter: saturate(0) contrast(1.3);
   }
 
   @media screen and (max-width: 1140px) {
@@ -471,6 +500,16 @@
     }
   }
 
+  @media screen and (max-width: 800px) {
+    .play-carousel-item.coming-soon button::after {
+      font-family: "Danzza", sans-serif;
+      margin-top: .5rem;
+      padding: .3rem .5rem;
+      font-size: .5rem;
+      font-weight: 600;
+    }
+  }
+
   /* --- Mobile (≤ 700px) --- */
   @media (max-width: 700px) {