v2 — catégories (imagier), espace parents protégé, perso prénom enfant, mode guidé

index.html

@@ -18,17 +18,26 @@
   <div id="start" class="screen">
     <div class="start-card">
       <h1 class="title">✨ Lettres&nbsp;Magiques ✨</h1>
-      <p class="subtitle">Écris les prénoms de la famille&nbsp;!</p>
+      <p class="subtitle" id="start-sub">Apprends à écrire en t'amusant&nbsp;!</p>
       <button id="btn-play" class="big-btn">🎮 Jouer</button>
-      <p class="hint-line">🔊 Le son aide les petits — laisse-le activé.</p>
+      <button id="btn-parents" class="text-btn">⚙️ Espace parents</button>
+    </div>
+  </div>
+
+  <!-- Menu de catégories -->
+  <div id="menu" class="screen hidden">
+    <div class="menu-card">
+      <h2 class="menu-title">Choisis un jeu&nbsp;!</h2>
+      <div id="cat-grid" class="cat-grid"></div>
+      <button id="btn-parents-menu" class="text-btn">⚙️ Espace parents</button>
     </div>
   </div>
 
   <!-- Interface de jeu -->
   <div id="hud" class="hud hidden">
     <div class="hud-left">
+      <button id="btn-home" class="icon-btn" title="Menu">🏠</button>
       <div class="badge">⭐ <span id="score">0</span></div>
-      <div class="badge">🚀 Niv. <span id="level">1</span></div>
       <div class="badge">🏅 <span id="stickers-count">0</span>/15</div>
     </div>
     <div class="hud-right">
@@ -37,10 +46,13 @@
     </div>
   </div>
 
+  <!-- Indice imagier (grande image du mot à écrire) -->
+  <div id="clue" class="clue hidden"></div>
+
   <!-- Mot en cours -->
   <div id="word-zone" class="word-zone hidden"></div>
 
-  <!-- Liste des mots à trouver (aide permanente) -->
+  <!-- Liste des mots à trouver -->
   <div id="word-list" class="word-list hidden"></div>
 
   <!-- Clavier tactile -->
@@ -66,10 +78,15 @@
     <div class="drawer-card">
       <h2>🏅 Mes autocollants</h2>
       <div id="sticker-grid" class="sticker-grid"></div>
-      <button id="btn-close-stickers" class="big-btn small">Fermer</button>
+      <button class="big-btn small" data-close-drawer>Fermer</button>
     </div>
   </div>
 
+  <!-- Espace parents (protégé) -->
+  <div id="parent" class="drawer hidden">
+    <div class="drawer-card parent-card" id="parent-body"></div>
+  </div>
+
   <script src="game.js"></script>
 </body>
 </html>