Voici mes conseils d'ergonomie et de pédagogie pour faire de cet outil une véritable réussite d'apprentissage autonome (IEF) :

### 💡 Conseils d'Ergonomie & de Pédagogie

1. **La Double Approche (Physique & Digitale) :** 
   Le cœur de cet outil réside dans la transition entre l'écran et le papier. Sur l'écran, l'enfant s'exerce à la reconnaissance visuelle rapide. Sur le papier, le découpage des lettres (motricité fine) et leur manipulation physique pour reconstituer les mots avant de les chercher dans la grille ancrent l'orthographe de manière kinesthésique.
2. **Thématiques Scientifiques avec Lumi :**
   Puisque Lumi est notre mascotte des sciences, j'ai intégré 4 thèmes scientifiques passionnants (L'Espace, Le Corps Humain, La Nature, Physique & Chimie) avec des définitions simples et interactives pour chaque mot. L'enfant apprend la science tout en jouant avec l'orthographe !
3. **Mécanique de Sélection Ultra-Simple :**
   Pour éviter les glissements tactiles complexes parfois frustrants sur mobile, j'ai opté pour une sélection en deux clics : l'enfant clique sur la première lettre du mot, puis sur la dernière. La ligne se trace et se valide automatiquement si le mot est correct.
4. **Zéro frustration :**
   Une option de génération de grille personnalisée permet aux parents ou aux enfants d'entrer leurs propres mots (par exemple, les mots-outils de la semaine ou le vocabulaire d'une leçon en cours).

---

Voici le code applicatif complet, optimisé, accessible et conforme à 100% à la charte Apprendly, prêt à être injecté sous la balise `<main>`.


<main id="main-content" tabindex="-1" class="min-h-screen bg-gradient-to-b from-indigo-50 to-white dark:from-slate-900 dark:to-slate-950 text-slate-800 dark:text-slate-100 transition-colors duration-300">
  
  <!-- Zone Interactive (Masquée à l'impression) -->
  <div class="max-w-6xl mx-auto px-4 py-8 print:hidden" x-data="{
    tab: 'decouverte',
    themes: [
      {
        name: '🚀 L\'Espace',
        icon: 'rocket',
        description: 'Explore les mystères de l\'univers et des étoiles avec moi !',
        words: ['SOLEIL', 'PLANETE', 'ETOILE', 'COMETE', 'ORBITE', 'LUNE', 'FUSEE', 'GALAXIE'],
        definitions: {
          'SOLEIL': 'L\'étoile géante au centre de notre système planétaire qui nous éclaire.',
          'PLANETE': 'Un grand corps céleste rond qui tourne autour d\'une étoile comme notre Terre.',
          'ETOILE': 'Une boule de gaz géante et brûlante qui brille dans le ciel nocturne.',
          'COMETE': 'Un bloc de glace et de poussière spatiale qui laisse une traînée lumineuse.',
          'ORBITE': 'Le chemin invisible et régulier suivi par un astre autour d\'un autre.',
          'LUNE': 'Le satellite naturel rocheux qui tourne autour de notre planète Terre.',
          'FUSEE': 'Le véhicule spatial ultra-rapide qui permet de voyager au-delà de l\'atmosphère.',
          'GALAXIE': 'Un immense groupe d\'étoiles, de gaz et de poussière lié par la gravité.'
        }
      },
      {
        name: '🧬 Le Corps Humain',
        icon: 'dna',
        description: 'Découvre comment fonctionne ton incroyable machine corporelle !',
        words: ['COEUR', 'CERVEAU', 'POUMON', 'SQUELETTE', 'MUSCLE', 'SANG', 'ESTOMAC', 'NERF'],
        definitions: {
          'COEUR': 'Le muscle infatigable qui pompe le sang pour le distribuer à tout mon corps.',
          'CERVEAU': 'L\'organe chef d\'orchestre qui contrôle mes pensées, mes mouvements et mes rêves.',
          'POUMON': 'L\'organe qui se gonfle d\'air pour apporter de l\'oxygène à mon corps.',
          'SQUELETTE': 'La structure solide de tous mes os qui soutient et protège mon corps.',
          'MUSCLE': 'Le tissu élastique qui se contracte pour me permettre de courir et sauter.',
          'SANG': 'Le liquide rouge vital qui transporte l\'oxygène et les nutriments partout.',
          'ESTOMAC': 'La poche magique où les aliments que je mange commencent à être digérés.',
          'NERF': 'Le fil électrique minuscule qui transmet les messages de mes sens à mon cerveau.'
        }
      },
      {
        name: '🌿 Nature & Plantes',
        icon: 'leaf',
        description: 'Apprends à nommer et comprendre les merveilles de la biodiversité.',
        words: ['ARBRE', 'FLEUR', 'FORET', 'INSECTE', 'PLANTE', 'OCEAN', 'RACINE', 'GRAINE'],
        definitions: {
          'ARBRE': 'Une grande plante vivace avec un tronc en bois solide et des branches.',
          'FLEUR': 'La partie colorée et parfumée d\'une plante qui produit ensuite les graines.',
          'FORET': 'Un grand espace naturel couvert d\'arbres et habité par de nombreux animaux.',
          'INSECTE': 'Un petit animal invertébré à six pattes, souvent doté d\'ailes.',
          'PLANTE': 'Un être vivant végétal qui fabrique sa propre nourriture grâce à la lumière.',
          'OCEAN': 'Une immense étendue d\'eau salée qui couvre la majeure partie de notre planète.',
          'RACINE': 'La partie souterraine qui puise l\'eau et fixe solidement la plante au sol.',
          'GRAINE': 'La petite capsule de vie qui contient tout le nécessaire pour faire pousser une nouvelle plante.'
        }
      },
      {
        name: '⚡ Physique & Chimie',
        icon: 'atom',
        description: 'Observe les forces, les états de la matière et l\'énergie qui t\'entourent.',
        words: ['ATOME', 'ENERGIE', 'LIQUIDE', 'SOLIDE', 'LUMIERE', 'FORCE', 'AIMANT', 'GAZ'],
        definitions: {
          'ATOME': 'La toute petite brique invisible à l\'œil nu qui compose absolument toute la matière.',
          'ENERGIE': 'Ce qui permet de produire de la chaleur, du mouvement ou de la lumière.',
          'LIQUIDE': 'Un état de la matière qui coule, n\'a pas de forme propre et s\'adapte à son récipient.',
          'SOLIDE': 'Un état de la matière ferme qui garde sa forme et que l\'on peut attraper.',
          'LUMIERE': 'L\'onde visible qui me permet de voir les formes, les objets et toutes les couleurs.',
          'FORCE': 'Une action invisible capable de déplacer, de stopper ou de déformer un objet.',
          'AIMANT': 'Un objet magique qui attire certains métaux grâce à sa force magnétique.',
          'GAZ': 'Un état de la matière souvent invisible qui s\'étend pour occuper tout l\'espace libre.'
        }
      }
    ],
    currentTheme: 0,
    mode: 'theme', 
    customWordsInput: '',
    gridSize: 10,
    grid: [],
    words: [],
    wordLocations: [],
    foundWords: [],
    startCell: null,
    hoverCell: null,
    cuttingLetters: [],
    showSuccess: false,
    selectedWordInfo: null,

    init() {
      this.generateGrid();
    },

    generateGrid() {
      let sourceWords = [];
      if (this.mode === 'theme') {
        sourceWords = this.themes[this.currentTheme].words;
      } else {
        sourceWords = this.customWordsInput
          .toUpperCase()
          .split(/[\s,;]+/)
          .map(w => w.replace(/[^A-Z]/g, ''))
          .filter(w => w.length > 1 && w.length <= this.gridSize);
      }

      if (sourceWords.length === 0) {
        sourceWords = ['LUMI', 'SCIENCE', 'SAGE', 'JEU'];
      }

      // Limiter à 8 mots maximum pour garder une grille aérée et lisible
      this.words = sourceWords.slice(0, 8);
      this.grid = Array(this.gridSize).fill(null).map(() => Array(this.gridSize).fill(''));
      this.wordLocations = [];
      this.foundWords = [];
      this.startCell = null;
      this.hoverCell = null;
      this.showSuccess = false;
      this.selectedWordInfo = null;

      const directions = [
        [0, 1],   // Droite
        [1, 0],   // Bas
        [1, 1],   // Diagonale Bas-Droite
        [-1, 1],  // Diagonale Haut-Droite
        [0, -1],  // Gauche
        [-1, 0],  // Haut
        [-1, -1], // Diagonale Haut-Gauche
        [1, -1]   // Diagonale Bas-Gauche
      ];

      // Trier les mots du plus long au plus court pour optimiser le placement
      let sortedWords = [...this.words].sort((a, b) => b.length - a.length);

      for (let word of sortedWords) {
        let placed = false;
        let attempts = 0;
        while (!placed && attempts < 150) {
          let dir = directions[Math.floor(Math.random() * directions.length)];
          let r = Math.floor(Math.random() * this.gridSize);
          let c = Math.floor(Math.random() * this.gridSize);

          if (this.canPlaceWord(word, r, c, dir)) {
            let cells = this.placeWord(word, r, c, dir);
            this.wordLocations.push({ word, cells });
            placed = true;
          }
          attempts++;
        }
      }

      // Remplir les cases vides avec des lettres aléatoires
      const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      for (let r = 0; r < this.gridSize; r++) {
        for (let c = 0; c < this.gridSize; c++) {
          if (this.grid[r][c] === '') {
            this.grid[r][c] = alphabet[Math.floor(Math.random() * alphabet.length)];
          }
        }
      }

      // Préparer les lettres à découper (mélangées)
      let allLetters = [];
      this.words.forEach(w => {
        allLetters.push(...w.split(''));
      });
      this.cuttingLetters = allLetters
        .map(value => ({ value, sort: Math.random() }))
        .sort((a, b) => a.sort - b.sort)
        .map(({ value }) => value);
    },

    canPlaceWord(word, r, c, dir) {
      let dr = dir[0];
      let dc = dir[1];
      if (r + dr * (word.length - 1) < 0 || r + dr * (word.length - 1) >= this.gridSize) return false;
      if (c + dc * (word.length - 1) < 0 || c + dc * (word.length - 1) >= this.gridSize) return false;

      for (let i = 0; i < word.length; i++) {
        let currR = r + dr * i;
        let currC = c + dc * i;
        if (this.grid[currR][currC] !== '' && this.grid[currR][currC] !== word[i]) {
          return false;
        }
      }
      return true;
    },

    placeWord(word, r, c, dir) {
      let dr = dir[0];
      let dc = dir[1];
      let cells = [];
      for (let i = 0; i < word.length; i++) {
        let currR = r + dr * i;
        let currC = c + dc * i;
        this.grid[currR][currC] = word[i];
        cells.push({ r: currR, c: currC });
      }
      return cells;
    },

    selectCell(r, c) {
      if (!this.startCell) {
        this.startCell = { r, c };
      } else {
        let endCell = { r, c };
        let line = this.getLineCells(this.startCell, endCell);
        if (line.length > 0) {
          let selectedWord = line.map(cell => this.grid[cell.r][cell.c]).join('');
          let reversedWord = selectedWord.split('').reverse().join('');

          let matchedWord = null;
          if (this.words.includes(selectedWord) && !this.foundWords.includes(selectedWord)) {
            matchedWord = selectedWord;
          } else if (this.words.includes(reversedWord) && !this.foundWords.includes(reversedWord)) {
            matchedWord = reversedWord;
          }

          if (matchedWord) {
            this.foundWords.push(matchedWord);
            this.showWordDefinition(matchedWord);
            if (this.foundWords.length === this.words.length) {
              this.showSuccess = true;
            }
          }
        }
        this.startCell = null;
        this.hoverCell = null;
      }
    },

    isCellSelected(r, c) {
      if (!this.startCell) return false;
      if (this.startCell.r === r && this.startCell.c === c) return true;
      if (this.hoverCell) {
        let line = this.getLineCells(this.startCell, this.hoverCell);
        return line.some(cell => cell.r === r && cell.c === c);
      }
      return false;
    },

    isCellFound(r, c) {
      return this.wordLocations.some(loc => {
        if (!this.foundWords.includes(loc.word)) return false;
        return loc.cells.some(cell => cell.r === r && cell.c === c);
      });
    },

    getLineCells(start, end) {
      let dr = end.r - start.r;
      let dc = end.c - start.c;
      let steps = Math.max(Math.abs(dr), Math.abs(dc));
      if (steps === 0) return [start];

      let isHorizontal = dr === 0;
      let isVertical = dc === 0;
      let isDiagonal = Math.abs(dr) === Math.abs(dc);

      if (!isHorizontal && !isVertical && !isDiagonal) return [];

      let stepR = dr === 0 ? 0 : dr / steps;
      let stepC = dc === 0 ? 0 : dc / steps;

      let cells = [];
      for (let i = 0; i <= steps; i++) {
        cells.push({
          r: start.r + Math.round(i * stepR),
          c: start.c + Math.round(i * stepC)
        });
      }
      return cells;
    },

    showWordDefinition(word) {
      if (this.mode === 'theme') {
        this.selectedWordInfo = {
          word: word,
          definition: this.themes[this.currentTheme].definitions[word] || 'Un mot scientifique passionnant !'
        };
      } else {
        this.selectedWordInfo = {
          word: word,
          definition: 'Tu as trouvé ton mot personnalisé ! Félicitations !'
        };
      }
    }
  }">

    <!-- En-tête de l'outil avec Lumi -->
    <header class="bg-white dark:bg-slate-800 rounded-3xl p-6 shadow-sm border border-slate-100 dark:border-slate-700 mb-8 flex flex-col md:flex-row items-center gap-6">
      <div class="flex-shrink-0">
        <img src="https://ief.apprendly.net/assets/img/mascottes/lumi.png" 
             alt="Lumi, ma mascotte scientifique" 
             width="120" 
             height="120" 
             loading="lazy"
             class="w-24 h-24 md:w-28 md:h-28 object-contain drop-shadow-md">
      </div>
      <div class="text-center md:text-left flex-grow">
        <span class="inline-block px-3 py-1 bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 text-xs font-bold rounded-full uppercase tracking-wider mb-2">Sciences & Orthographe</span>
        <h1 class="text-3xl font-extrabold text-slate-900 dark:text-white tracking-tight">Lettres à Découper & Mots-Mêlés</h1>
        <p class="text-slate-600 dark:text-slate-300 mt-1 max-w-2xl">
          Bienvenue dans mon laboratoire de mots ! Choisis un thème scientifique, explore les définitions, joue en ligne ou imprime ta fiche d'activité unique avec ses lettres physiques à découper.
        </p>
      </div>
    </header>

    <!-- Navigation par Onglets -->
    <nav class="flex flex-wrap gap-2 mb-8" aria-label="Menu principal de l'outil">
      <button @click="tab = 'decouverte'" 
              :class="tab === 'decouverte' ? 'bg-indigo-600 text-white shadow-md' : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'"
              class="px-5 py-3 rounded-xl font-semibold text-sm transition-all duration-200 flex items-center gap-2 border border-slate-100 dark:border-slate-700"
              aria-label="Aller à l'onglet Découverte">
        <i data-lucide="book-open" class="w-4 h-4" aria-hidden="true"></i>
        1. Découverte & Vocabulaire
      </button>
      <button @click="tab = 'jeu'" 
              :class="tab === 'jeu' ? 'bg-indigo-600 text-white shadow-md' : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'"
              class="px-5 py-3 rounded-xl font-semibold text-sm transition-all duration-200 flex items-center gap-2 border border-slate-100 dark:border-slate-700"
              aria-label="Aller à l'onglet Jeu Interactif">
        <i data-lucide="gamepad-2" class="w-4 h-4" aria-hidden="true"></i>
        2. Grille Interactive
      </button>
      <button @click="tab = 'impression'" 
              :class="tab === 'impression' ? 'bg-indigo-600 text-white shadow-md' : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'"
              class="px-5 py-3 rounded-xl font-semibold text-sm transition-all duration-200 flex items-center gap-2 border border-slate-100 dark:border-slate-700"
              aria-label="Aller à l'onglet Impression">
        <i data-lucide="printer" class="w-4 h-4" aria-hidden="true"></i>
        3. Fiche Imprimable (A4)
      </button>
    </nav>

    <!-- Configuration globale (Thèmes / Perso) -->
    <section class="bg-white dark:bg-slate-800 rounded-3xl p-6 shadow-sm border border-slate-100 dark:border-slate-700 mb-8">
      <h2 class="text-lg font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
        <i data-lucide="sliders" class="w-5 h-5 text-indigo-500" aria-hidden="true"></i>
        Configure ma grille de mots-mêlés
      </h2>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Choix du mode -->
        <div>
          <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Mode de génération</label>
          <div class="grid grid-cols-2 gap-2">
            <button @click="mode = 'theme'; generateGrid()" 
                    :class="mode === 'theme' ? 'border-2 border-indigo-500 bg-indigo-50/50 dark:bg-indigo-950/30' : 'border border-slate-200 dark:border-slate-700'"
                    class="p-3 rounded-xl text-left transition-all">
              <span class="block font-bold text-sm text-slate-900 dark:text-white">Thèmes de Lumi</span>
              <span class="text-xs text-slate-500 dark:text-slate-400">Vocabulaire scientifique</span>
            </button>
            <button @click="mode = 'perso'; generateGrid()" 
                    :class="mode === 'perso' ? 'border-2 border-indigo-500 bg-indigo-50/50 dark:bg-indigo-950/30' : 'border border-slate-200 dark:border-slate-700'"
                    class="p-3 rounded-xl text-left transition-all">
              <span class="block font-bold text-sm text-slate-900 dark:text-white">Mots Personnalisés</span>
              <span class="text-xs text-slate-500 dark:text-slate-400">Saisis tes propres mots</span>
            </button>
          </div>
        </div>

        <!-- Options selon le mode -->
        <div>
          <!-- Mode Thème -->
          <div x-show="mode === 'theme'">
            <label for="theme-select" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Choisis mon thème scientifique</label>
            <select id="theme-select" 
                    x-model="currentTheme" 
                    @change="generateGrid()" 
                    class="w-full p-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-white font-medium focus:ring-2 focus:ring-indigo-500">
              <template x-for="(theme, index) in themes" :key="index">
                <option :value="index" x-text="theme.name"></option>
              </template>
            </select>
          </div>

          <!-- Mode Perso -->
          <div x-show="mode === 'perso'" x-cloak>
            <label for="custom-words" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Mes mots (séparés par des virgules)</label>
            <div class="flex gap-2">
              <input id="custom-words" 
                     type="text" 
                     x-model="customWordsInput" 
                     placeholder="LUMI, ATOME, FORCE, SCIENCE" 
                     class="flex-grow p-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-white uppercase focus:ring-2 focus:ring-indigo-500">
              <button @click="generateGrid()" 
                      class="px-4 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-xl transition-colors"
                      aria-label="Générer la grille personnalisée">
                Créer
              </button>
            </div>
            <span class="text-xs text-slate-500 dark:text-slate-400 mt-1 block">Maximum 8 mots de 2 à 10 lettres.</span>
          </div>
        </div>
      </div>
    </section>

    <!-- VOLET 1 : DÉCOUVERTE & VOCABULAIRE -->
    <section x-show="tab === 'decouverte'" class="space-y-6">
      <div class="bg-indigo-50 dark:bg-indigo-950/30 rounded-3xl p-6 border border-indigo-100/50 dark:border-indigo-900/50">
        <h3 class="text-xl font-bold text-indigo-900 dark:text-indigo-200 mb-2 flex items-center gap-2">
          <i data-lucide="sparkles" class="w-5 h-5 text-indigo-500" aria-hidden="true"></i>
          Le grimoire scientifique de Lumi
        </h3>
        <p class="text-indigo-950/80 dark:text-indigo-300/90 text-sm" x-text="mode === 'theme' ? themes[currentTheme].description : 'Découvre et mémorise l\'orthographe de tes mots personnalisés avant de lancer la recherche !'"></p>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <template x-for="word in words" :key="word">
          <div class="bg-white dark:bg-slate-800 p-5 rounded-2xl border border-slate-100 dark:border-slate-700 shadow-sm hover:shadow-md transition-all">
            <div class="flex justify-between items-center mb-3">
              <span class="text-lg font-extrabold text-indigo-600 dark:text-indigo-400 tracking-wider" x-text="word"></span>
              <span class="text-xs bg-slate-100 dark:bg-slate-700 px-2 py-1 rounded-md font-mono text-slate-600 dark:text-slate-300" x-text="word.length + ' lettres'"></span>
            </div>
            <!-- Épellation visuelle -->
            <div class="flex flex-wrap gap-1 mb-3">
              <template x-for="letter in word.split('')" :key="Math.random()">
                <span class="w-6 h-6 flex items-center justify-center bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 rounded text-xs font-bold border border-indigo-100 dark:border-indigo-900" x-text="letter"></span>
              </template>
            </div>
            <!-- Définition -->
            <p class="text-xs text-slate-600 dark:text-slate-300 leading-relaxed" 
               x-text="mode === 'theme' ? themes[currentTheme].definitions[word] : 'Mot personnalisé prêt à être recherché dans la grille.'">
            </p>
          </div>
        </template>
      </div>
    </section>

    <!-- VOLET 2 : GRILLE INTERACTIVE -->
    <section x-show="tab === 'jeu'" x-cloak class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- La Grille de Mots-Mêlés -->
      <div class="lg:col-span-2 flex flex-col items-center">
        <div class="bg-white dark:bg-slate-800 p-6 rounded-3xl border border-slate-100 dark:border-slate-700 shadow-sm w-full max-w-lg">
          <div class="flex justify-between items-center mb-4">
            <span class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Clique sur la 1ère puis la dernière lettre</span>
            <button @click="generateGrid()" 
                    class="p-2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg text-slate-600 dark:text-slate-300 transition-colors"
                    aria-label="Mélanger et générer une nouvelle grille">
              <i data-lucide="refresh-cw" class="w-4 h-4"></i>
            </button>
          </div>

          <!-- Grille Tactile / Clic -->
          <div class="grid gap-1 bg-slate-100 dark:bg-slate-900 p-2 rounded-2xl" 
               :style="'grid-template-columns: repeat(' + gridSize + ', minmax(0, 1fr))'">
            <template x-for="(row, rIndex) in grid" :key="rIndex">
              <template x-for="(char, cIndex) in row" :key="cIndex">
                <button @click="selectCell(rIndex, cIndex)"
                        @mouseenter="if(startCell) hoverCell = {r: rIndex, c: cIndex}"
                        :class="{
                          'bg-indigo-600 text-white scale-95 shadow-inner': isCellSelected(rIndex, cIndex),
                          'bg-emerald-500 text-white font-extrabold': isCellFound(rIndex, cIndex) && !isCellSelected(rIndex, cIndex),
                          'bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-200 hover:bg-indigo-50 dark:hover:bg-indigo-950/30': !isCellSelected(rIndex, cIndex) && !isCellFound(rIndex, cIndex)
                        }"
                        class="aspect-square flex items-center justify-center font-bold text-sm sm:text-base rounded-lg transition-all duration-150 select-none focus:outline-none focus:ring-2 focus:ring-indigo-400"
                        x-text="char"
                        :aria-label="'Lettre ' + char + ' en ligne ' + (rIndex+1) + ' colonne ' + (cIndex+1)">
                </button>
              </template>
            </template>
          </div>
        </div>
      </div>

      <!-- Liste des mots & Définitions en direct -->
      <div class="space-y-6">
        <div class="bg-white dark:bg-slate-800 p-6 rounded-3xl border border-slate-100 dark:border-slate-700 shadow-sm">
          <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
            <i data-lucide="list-todo" class="w-5 h-5 text-indigo-500" aria-hidden="true"></i>
            Mots à trouver (<span x-text="foundWords.length + '/' + words.length"></span>)
          </h3>
          <div class="space-y-2">
            <template x-for="word in words" :key="word">
              <div class="flex items-center justify-between p-3 rounded-xl border transition-all"
                   :class="foundWords.includes(word) ? 'bg-emerald-50 dark:bg-emerald-950/20 border-emerald-200 dark:border-emerald-900 text-emerald-800 dark:text-emerald-300' : 'bg-slate-50 dark:bg-slate-900 border-slate-100 dark:border-slate-800 text-slate-700 dark:text-slate-300'">
                <span class="font-bold tracking-wider" :class="foundWords.includes(word) ? 'line-through opacity-60' : ''" x-text="word"></span>
                <div class="flex items-center gap-2">
                  <span x-show="foundWords.includes(word)" class="text-emerald-600 dark:text-emerald-400" x-cloak>
                    <i data-lucide="check-circle-2" class="w-5 h-5"></i>
                  </span>
                  <button @click="showWordDefinition(word)" 
                          class="p-1 hover:bg-slate-200 dark:hover:bg-slate-800 rounded text-slate-500 dark:text-slate-400"
                          aria-label="Voir la définition">
                    <i data-lucide="help-circle" class="w-4 h-4"></i>
                  </button>
                </div>
              </div>
            </template>
          </div>
        </div>

        <!-- Pop-up de définition dynamique -->
        <div x-show="selectedWordInfo" x-transition x-cloak class="bg-indigo-50 dark:bg-indigo-950/30 p-5 rounded-2xl border border-indigo-100 dark:border-indigo-900/50">
          <div class="flex justify-between items-start mb-2">
            <h4 class="font-bold text-indigo-900 dark:text-indigo-200 uppercase tracking-wider" x-text="selectedWordInfo?.word"></h4>
            <button @click="selectedWordInfo = null" class="text-indigo-500 hover:text-indigo-700" aria-label="Fermer la définition">
              <i data-lucide="x" class="w-4 h-4"></i>
            </button>
          </div>
          <p class="text-xs text-indigo-950/80 dark:text-indigo-300/90 leading-relaxed" x-text="selectedWordInfo?.definition"></p>
        </div>

        <!-- Célébration de réussite -->
        <div x-show="showSuccess" x-transition x-cloak class="bg-emerald-500 text-white p-6 rounded-3xl text-center shadow-lg">
          <div class="text-4xl mb-2">🎉</div>
          <h4 class="text-xl font-extrabold mb-1">Incroyable !</h4>
          <p class="text-sm text-emerald-100 mb-4">Tu as décodé tous les mots scientifiques de Lumi !</p>
          <button @click="generateGrid()" class="px-4 py-2 bg-white text-emerald-600 font-bold rounded-xl hover:bg-emerald-50 transition-colors text-sm">
            Rejouer une grille
          </button>
        </div>
      </div>
    </section>

    <!-- VOLET 3 : IMPRESSION / PDF -->
    <section x-show="tab === 'impression'" x-cloak class="space-y-6">
      <div class="bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-900/50 rounded-3xl p-6 flex flex-col md:flex-row items-center gap-6">
        <div class="text-center md:text-left flex-grow">
          <h3 class="text-lg font-bold text-amber-900 dark:text-amber-200 mb-1 flex items-center justify-center md:justify-start gap-2">
            <i data-lucide="printer" class="w-5 h-5 text-amber-600" aria-hidden="true"></i>
            Prépare ton atelier de découpage physique !
          </h3>
          <p class="text-sm text-amber-800 dark:text-amber-300 max-w-2xl">
            Imprime cette fiche d'activité. L'enfant pourra découper les lettres en bas de page, les manipuler pour reconstituer les mots, puis résoudre la grille au crayon. Une méthode d'apprentissage kinesthésique idéale !
          </p>
        </div>
        <button @click="window.print()" class="w-full md:w-auto px-6 py-4 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-2xl shadow-md transition-all flex items-center justify-center gap-2">
          <i data-lucide="printer" class="w-5 h-5"></i>
          Imprimer ma Fiche A4
        </button>
      </div>

      <!-- Aperçu de la fiche avant impression -->
      <div class="bg-white dark:bg-slate-800 p-8 rounded-3xl border border-slate-200 dark:border-slate-700 shadow-inner max-w-2xl mx-auto">
        <span class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider block mb-4 text-center">— Aperçu de ma fiche papier —</span>
        
        <div class="border-2 border-dashed border-slate-300 dark:border-slate-600 p-6 rounded-2xl bg-white text-slate-900 space-y-6">
          <!-- En-tête Fiche -->
          <div class="flex justify-between items-start border-b pb-4">
            <div>
              <h4 class="text-xl font-extrabold tracking-tight">Mon Grimoire de Mots-Mêlés</h4>
              <p class="text-xs text-slate-500 mt-1" x-text="mode === 'theme' ? 'Thème : ' + themes[currentTheme].name : 'Thème : Mes Mots Personnalisés'"></p>
            </div>
            <div class="text-right">
              <span class="text-xs font-bold text-indigo-600">Apprendly IEF</span>
              <p class="text-[10px] text-slate-400">Sciences avec Lumi</p>
            </div>
          </div>

          <!-- Grille Aperçu -->
          <div class="flex justify-center">
            <div class="grid gap-1 bg-slate-100 p-2 rounded-xl w-full max-w-xs" :style="'grid-template-columns: repeat(' + gridSize + ', minmax(0, 1fr))'">
              <template x-for="row in grid">
                <template x-for="char in row">
                  <div class="aspect-square flex items-center justify-center font-bold text-xs bg-white text-slate-800 rounded border border-slate-200" x-text="char"></div>
                </template>
              </template>
            </div>
          </div>

          <!-- Mots à chercher -->
          <div>
            <h5 class="text-xs font-bold uppercase tracking-wider text-slate-600 mb-2">Mots à retrouver :</h5>
            <div class="grid grid-cols-2 gap-2">
              <template x-for="word in words" :key="word">
                <div class="flex items-center gap-2 text-xs text-slate-700">
                  <span class="w-3 h-3 border border-slate-400 rounded-sm"></span>
                  <span class="font-mono font-bold tracking-wider" x-text="word"></span>
                </div>
              </template>
            </div>
          </div>

          <!-- Zone de découpage -->
          <div class="border-t-2 border-dashed border-slate-300 pt-4 mt-6">
            <div class="flex items-center gap-2 text-xs font-bold text-slate-600 mb-2">
              <i data-lucide="scissors" class="w-4 h-4"></i>
              <span>✂️ Zone de découpage : Mes lettres mobiles</span>
            </div>
            <p class="text-[10px] text-slate-500 mb-3">Découpe ces lettres et assemble-les sur ta table pour former les mots mystères avant de les chercher dans la grille !</p>
            
            <div class="flex flex-wrap gap-1">
              <template x-for="letter in cuttingLetters" :key="Math.random()">
                <div class="w-8 h-8 flex items-center justify-center border border-dashed border-slate-400 font-bold text-xs bg-slate-50 text-slate-800 rounded" x-text="letter"></div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </section>

  </div>

  <!-- ========================================== -->
  <!-- ZONE D'IMPRESSION RÉELLE (Masquée à l'écran) -->
  <!-- ========================================== -->
  <div class="hidden print:block bg-white text-black p-8 font-sans min-h-screen" x-data="{}" x-cloak>
    <!-- En-tête A4 -->
    <div class="flex justify-between items-start border-b-2 border-black pb-4 mb-6">
      <div>
        <h1 class="text-2xl font-black tracking-tight uppercase">Mon Grimoire de Mots-Mêlés</h1>
        <p class="text-sm text-slate-700 mt-1" x-text="mode === 'theme' ? 'Thème scientifique : ' + themes[currentTheme].name : 'Thème : Mes Mots Personnalisés'"></p>
      </div>
      <div class="text-right">
        <span class="text-sm font-bold text-indigo-600">Apprendly IEF</span>
        <p class="text-xs text-slate-500">Apprendre en s'amusant librement</p>
      </div>
    </div>

    <!-- Consignes -->
    <div class="mb-6 bg-slate-100 p-4 rounded-lg border border-slate-300">
      <h2 class="text-sm font-bold uppercase mb-1">🔬 Ma Mission Scientifique :</h2>
      <p class="text-xs text-slate-700 leading-relaxed">
        1. Découpe les lettres mobiles tout en bas de la page le long des pointillés.<br>
        2. Reconstitue physiquement les mots de la liste sur ta table.<br>
        3. Retrouve-les ensuite dans la grille de mots-mêlés et barre-les au crayon !
      </p>
    </div>

    <!-- Grille A4 (Grande et lisible) -->
    <div class="flex justify-center my-8">
      <div class="grid gap-1 bg-slate-200 p-2 rounded-lg w-full max-w-md border-2 border-black" :style="'grid-template-columns: repeat(' + gridSize + ', minmax(0, 1fr))'">
        <template x-for="row in grid">
          <template x-for="char in row">
            <div class="aspect-square flex items-center justify-center font-black text-lg bg-white text-black rounded border border-slate-300" x-text="char"></div>
          </template>
        </template>
      </div>
    </div>

    <!-- Liste des mots à chercher -->
    <div class="mb-8">
      <h3 class="text-sm font-bold uppercase tracking-wider mb-3 border-b pb-1">Mots à retrouver :</h3>
      <div class="grid grid-cols-3 gap-4">
        <template x-for="word in words" :key="word">
          <div class="flex items-center gap-3 text-sm">
            <span class="w-4 h-4 border-2 border-black rounded-sm flex-shrink-0"></span>
            <span class="font-mono font-bold tracking-widest" x-text="word"></span>
          </div>
        </template>
      </div>
    </div>

    <!-- Ligne de découpe physique -->
    <div class="border-t-4 border-dashed border-black pt-6 mt-12">
      <div class="flex items-center gap-2 text-sm font-bold mb-2">
        <span>✂️----------------------------------------------------------------------------------------------------</span>
      </div>
      <h3 class="text-sm font-bold uppercase tracking-wider mb-1">Mes Lettres Mobiles à Découper</h3>
      <p class="text-xs text-slate-600 mb-4">Découpe chaque carré pour manipuler tes lettres et former tes mots scientifiques.</p>
      
      <div class="grid grid-cols-10 gap-2">
        <template x-for="letter in cuttingLetters" :key="Math.random()">
          <div class="aspect-square flex items-center justify-center border-2 border-dashed border-slate-500 font-black text-base bg-slate-50 text-black rounded" x-text="letter"></div>
        </template>
      </div>
    </div>

    <!-- Pied de page papier obligatoire -->
    <footer class="mt-16 pt-4 border-t border-slate-300 text-center text-[10px] text-slate-500">
      <p>Fiche d'activité offerte par Apprendly IEF — https://ief.apprendly.net</p>
      <p>Usage éducatif et familial libre — Soutenez mon travail sur le site pour plus de partages !</p>
    </footer>
  </div>

</main>