Fix: suppression de la classe slide en doublon dans toutes les vues

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

site/templates/play.json.php

@@ -8,9 +8,8 @@ $specificData = [
       'lettering'        => $game->lettering()->toFile()?->url(),
       'description'      => $game->description()->value(),
       'thumbnail'        => $game->thumbnail()->toFile()?->url(),
-      'backgroundImage'  => $game->backgroundImage()->toFile()?->url(),
       'backgroundColor'  => $game->backgroundColor()->value() ?: null,
-      'playLink'         => $game->playLinks()->value() ?: null,
+      'playLink'         => $game->playLink()->value() ?: null,
     ];
   })->values()
 ];

src/views/Expertise.svelte

@@ -217,7 +217,7 @@
 </script>
 
 <section
-  class="expertise golden-grid slide"
+  class="expertise golden-grid"
   aria-label="Expertise"
   bind:this={sectionEl}
   ontouchstart={nav.onTouchStart}

src/views/Home.svelte

@@ -44,7 +44,7 @@
   }
 </script>
 
-<div class="home golden-grid slide" data-anchor="HOME">
+<div class="home golden-grid" data-anchor="HOME">
   <div class="home-bg">
     <figure class="home-figure">
       <video

src/views/Play.svelte

@@ -62,17 +62,13 @@
 </script>
 
 <section
-  class="play golden-grid slide"
+  class="play golden-grid"
   aria-label="Jouer"
   style={displayedGame?.backgroundColor ? `--background-color: ${displayedGame.backgroundColor}` : ''}
 >
 
   <!-- Fond : image + overlay, crossfade au changement de jeu -->
   <div class="play-bg" class:is-out={isOut} aria-hidden="true">
-    {#if displayedGame?.backgroundImage}
-      <img class="play-bg-img" src={displayedGame.backgroundImage} alt="" />
-    {/if}
-    <div class="play-bg-overlay"></div>
   </div>
 
   <!-- Lignes courbes décoratives (SVG) -->
@@ -191,11 +187,18 @@
 
   /* --- Background --- */
   .play-bg {
-    grid-area: 1/1 / span 20 / span 20;
+    background-image: url(/static/media/background-play.f8db5aa42e2983197126.svg);
-    position: relative;
+    background-position: 50%;
-    overflow: hidden;
+    background-repeat: no-repeat;
-    transition: opacity 0.4s ease;
+    background-size: cover;
-  }
+    height: 100%;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+}
 
   .play-bg.is-out {
     opacity: 0;
@@ -209,17 +212,6 @@
     object-fit: cover;
   }
 
-  .play-bg-overlay {
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(
-      to right,
-      rgba(0, 0, 0, 0.75) 0%,
-      rgba(0, 0, 0, 0.35) 60%,
-      rgba(0, 0, 0, 0.1) 100%
-    );
-  }
-
   /* --- Lignes courbes SVG --- */
   .play-curves {
     grid-area: 1/1 / span 20 / span 20;
@@ -313,15 +305,12 @@
   }
 
   .play-carousel-item.active button img {
-    border-color: var(--color-primary);
+    border: 4px solid var(--color-primary);
+    border-radius: 4.9375rem;
   }
 
   /* --- Mobile (≤ 700px) --- */
   @media screen and (max-width: 700px) {
-    .play-bg-overlay {
-      background: rgba(0, 0, 0, 0.6);
-    }
-
     .play-featured {
       grid-area: 3/2 / span 12 / span 18;
     }

src/views/Portfolio.svelte

@@ -79,7 +79,7 @@
 </script>
 
 <section
-  class="portfolio golden-grid slide"
+  class="portfolio golden-grid"
   style={backgroundImage ? `--background-image: url('${backgroundImage}')` : ''}
   bind:this={sectionEl}
   ontouchstart={nav.onTouchStart}