Feat: page Play — backgroundColor, playLink, play-icon + fix slug jouer

- Renommage dossier content 3_play → 3_jouer (slug /jouer)
- Champ backgroundColor (code-editor) dans game.yml + exposé en API
- playLinks simplifié en champ url simple → playLink dans l'API
- Variable CSS --background-color sur la section .play
- Bouton "Jouer" avec icône play-icon (SVG data URI dans buttons.css)
- Plugin sylvainjule/code-editor ajouté via composer

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

src/styles/buttons.css

@@ -48,6 +48,16 @@
     hue-rotate(91deg) brightness(101%) contrast(97%);
 }
 
+.button.play-icon::before {
+  content: "";
+  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7598 13.5H14.6348V14.625V15.75H15.7598V14.625H16.8848V13.5V12.375H15.7598V13.5Z' fill='black'/%3E%3Cpath d='M12.3848 15.75V16.875H13.5098H14.6348V15.75H13.5098H12.3848Z' fill='black'/%3E%3Cpath d='M10.1348 16.875H9.00977V18H10.1348H11.2598H12.3848V16.875H11.2598H10.1348Z' fill='black'/%3E%3Cpath d='M1.125 10.125V9V7.875V6.75V5.625H0V6.75V7.875V9V10.125V11.25V12.375H1.125V11.25V10.125Z' fill='black'/%3E%3Cpath d='M3.375 13.5H2.25V12.375H1.125V13.5V14.625H2.25V15.75H3.375V14.625V13.5Z' fill='black'/%3E%3Cpath d='M4.5 15.75H3.375V16.875H4.5H5.625V15.75H4.5Z' fill='black'/%3E%3Cpath d='M6.75 16.875H5.625V18H6.75H7.875H9V16.875H7.875H6.75Z' fill='black'/%3E%3Cpath d='M16.8848 5.625V6.75V7.875V9V10.125V11.25V12.375H18.0098V11.25V10.125V9V7.875V6.75V5.625H16.8848Z' fill='black'/%3E%3Cpath d='M16.8848 3.375H15.7598V2.25H14.6348V3.375V4.5H15.7598V5.625H16.8848V4.5V3.375Z' fill='black'/%3E%3Cpath d='M11.2598 0H10.1348H9.00977V1.125H10.1348H11.2598H12.3848V0H11.2598Z' fill='black'/%3E%3Cpath d='M13.5098 1.125H12.3848V2.25H13.5098H14.6348V1.125H13.5098Z' fill='black'/%3E%3Cpath d='M2.25 4.5H3.375V3.375V2.25H2.25V3.375H1.125V4.5V5.625H2.25V4.5Z' fill='black'/%3E%3Cpath d='M5.625 2.25V1.125H4.5H3.375V2.25H4.5H5.625Z' fill='black'/%3E%3Cpath d='M7.875 1.125H9V0H7.875H6.75H5.625V1.125H6.75H7.875Z' fill='black'/%3E%3Cpath d='M10.1399 10.1825H11.2774V9.6775H12.4149V8.54H11.2774V7.91H10.1399V6.7725H9.00492V5.6375H7.86742V4.5H6.73242V13.5925H7.86742V12.455H9.00492V11.3175H10.1399V10.1825Z' fill='black'/%3E%3C/svg%3E");
+  background-size: 100%;
+  width: 1.125rem;
+  height: 1.125rem;
+  transform: translateX(-0.5rem);
+  transition: all 0.5s ease-out;
+}
+
 /* Clickable elements */
 .clickable {
   cursor: pointer;

src/views/Play.svelte

@@ -61,7 +61,11 @@
   })
 </script>
 
-<section class="play golden-grid slide" aria-label="Jouer">
+<section
+  class="play golden-grid slide"
+  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">
@@ -144,15 +148,13 @@
       {/if}
 
       <div class="play-actions">
-        {#if displayedGame.playLinks?.length}
-          {#each displayedGame.playLinks as link}
-            <a
-              href={link.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              class="button"
-            >{link.label}</a>
-          {/each}
+        {#if displayedGame.playLink}
+          <a
+            href={displayedGame.playLink}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="button play-icon"
+          >Jouer</a>
         {:else}
           <button class="button" disabled>Coming soon</button>
         {/if}
@@ -184,7 +186,7 @@
 
 <style>
   .play {
-    background: #000;
+    background: var(--background-color);
   }
 
   /* --- Background --- */