From 869dacd1213646eb1807fc4a8faf44325d46eb78 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 20 Mar 2026 11:52:28 +0100
Subject: [PATCH] =?UTF-8?q?fix(play):=20ratio=20SVG=20curves=20et=20simpli?=
 =?UTF-8?q?fication=20=C3=A9tat=20actif=20carousel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SVG curves : height 100vh / width auto (conserve le ratio)
- Carousel : fusionne les règles de border sur .active picture img
- Mobile : carousel décalé d'une ligne (grid-area 15), taille active corrigée

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/views/Play.svelte | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/views/Play.svelte b/src/views/Play.svelte
index 80d3bfc..0a299b7 100644
--- a/src/views/Play.svelte
+++ b/src/views/Play.svelte
@@ -336,8 +336,8 @@
   }
 
   .play-curves svg {
-    width: 100%;
-    height: 100%;
+    height: 100vh;
+    width: auto;
   }
 
   /* --- Animations partagées featured + preview --- */
@@ -453,10 +453,11 @@
     opacity: 1;
   }
 
-  .play-carousel-item button :global(img),
-  .play-carousel-item button :global(picture img) {
+  .play-carousel-item.active button :global(picture img) {
     object-fit: cover;
     transition: all 0.4s var(--ease-standard);
+    border: 4px solid var(--color-primary);
+    border-radius: 25%;
   }
 
   .play-carousel-title {
@@ -465,11 +466,6 @@
     text-align: center;
   }
 
-  .play-carousel-item.active button :global(picture img) {
-    border: 4px solid var(--color-primary);
-    border-radius: 25%;
-  }
-
   /* --- Mobile (≤ 700px) --- */
   @media (max-width: 700px) {
     .game-preview {
@@ -491,14 +487,15 @@
     }
 
     .play-carousel {
-      grid-area: 14/4 / span 3 / span 13;
+      grid-area: 15/4 / span 3 / span 13;
     }
 
     .play-carousel-item :global(img) {
-      width: clamp(70px, 18.41vw, 355px);
+      width: clamp(80px, 18.41vw, 355px);
     }
-    .play-carousel-item.active :global(img) {
-      width: clamp(90px, 18.41vw, 355px);
+    .play-carousel-item.active button :global(picture img) {
+      border: 2px solid var(--color-primary);
+      width: clamp(97px, 18.41vw, 355px);
     }
   }