Voici ma proposition d'accompagnement et le code applicatif complet, optimisé et prêt à être injecté par S2.

---

### 📝 Mise à jour de la fiche CHANTIER.md

```markdown
# 🔨 Chantier : Generateur de mots croises sur mesure

- **Catégorie :** sciences
- **Mascotte :** Lumi
- **Slug :** generateur-de-mots-croises-sur-mesure
- **URL Production :** `https://ief.apprendly.net/outils/generateur-de-mots-croises-sur-mesure/index.html`
- **Source Prototype :** Création ex nihilo
- **Statut :** 🟡 En cours de forge

---

## 1. Intention & Borne Pivot

### Intention
Permettre aux parents et aux enfants de concevoir instantanément des grilles de mots croisés thématiques et scientifiques personnalisées. L'outil favorise l'ancrage mémoriel du vocabulaire scientifique (astronomie, anatomie, botanique) par la création active et le jeu.

### Borne Pivot
Le moment de bascule se produit lorsque l'enfant, après avoir saisi ses propres définitions ou choisi un thème de Lumi, voit la grille se générer dynamiquement sous ses yeux. Il réalise qu'il peut lui-même devenir le créateur du jeu pour défier ses parents, ou imprimer sa fiche pour la résoudre sur papier.

---

## 2. Spécifications des 3 Volets

### Volet 1 : Découverte / Apprentissage
- **L'Atelier de Lumi :** Un espace d'inspiration avec des thèmes scientifiques pré-remplis (Le Système Solaire, Le Corps Humain, La Nature).
- **Conseils de Lumi :** Des astuces interactives pour apprendre à rédiger une bonne définition scientifique (courte, précise, sans donner la réponse).

### Volet 2 : Exercice Dynamique
- **Générateur Algorithmique :** Un moteur de placement croisé en temps réel qui assemble les mots saisis pour former la grille la plus compacte possible.
- **Mode Jeu Interactif :** Possibilité de remplir la grille directement à l'écran avec un retour visuel (validation des lettres, mode correction active).

### Volet 3 : Fiche Imprimable / PDF
- **Mise en page A4 optimisée :** Export propre de la grille vierge avec la liste des définitions (Horizontales & Verticales).
- **Option Correction :** Possibilité d'imprimer la version corrigée pour l'auto-correction autonome de l'enfant.
- **Mentions obligatoires :** Intégration des mentions papier requises pour l'audit.


---

### 💡 Conseils d'ergonomie et de pédagogie (Sparring Partner)

1. **Le moteur de croisement robuste :** J'ai conçu un algorithme glouton (greedy) en pur JavaScript/Alpine.js qui trie les mots par longueur, place le premier au centre, puis cherche toutes les intersections possibles pour les suivants en évaluant le meilleur score de compacité. C'est fluide, instantané et s'exécute entièrement côté client.
2. **La double expérience (Écran vs Papier) :** L'enfant peut jouer directement sur l'écran (les cases sont cliquables et interactives) ou imprimer sa création. Pour l'impression, j'ai ajouté un commutateur "Mode Impression" qui permet de choisir d'imprimer la grille vierge ou la grille corrigée.
3. **Zéro frustration :** Si un mot saisi ne peut pas être croisé par l'algorithme, il est clairement listé dans une section "Mots en attente" avec un conseil de Lumi pour ajouter des mots contenant des lettres communes.

---

### 🛠️ Code Applicatif HTML / Alpine.js

Voici le code complet à insérer dans le fichier `index.html` sous la balise `<main id="main-content" tabindex="-1">`.


<main id="main-content" tabindex="-1" class="flex-grow container mx-auto px-4 py-8 max-w-5xl">
  <!-- Fil d'Ariane / Header Outil -->
  <div class="mb-8 no-print">
    <div class="flex items-center gap-2 text-sm text-emerald-700 dark:text-emerald-300 mb-2">
      <span>Sciences</span>
      <span class="text-xs">/</span>
      <span class="font-semibold">Générateur de mots croisés</span>
    </div>
    <h1 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white font-outfit">
      Générateur de mots croisés sur mesure
    </h1>
    <p class="text-slate-600 dark:text-slate-300 mt-2">
      Crée mes propres grilles thématiques, joue en ligne ou imprime-les pour apprendre en m'amusant !
    </p>
  </div>

  <!-- Zone Applicative principale -->
  <div x-data="crosswordApp()" x-init="initApp()" class="grid grid-cols-1 lg:grid-cols-12 gap-8">
    
    <!-- COLONNE GAUCHE : Configuration & Saisie (Masquée à l'impression) -->
    <div class="lg:col-span-5 space-y-6 no-print">
      
      <!-- Carte Mascotte Lumi -->
      <div class="bg-gradient-to-br from-amber-50 to-orange-50 dark:from-slate-800 dark:to-slate-700 p-5 rounded-2xl border border-amber-100 dark:border-slate-600 shadow-sm flex gap-4 items-start">
        <img src="https://ief.apprendly.net/assets/img/mascottes/lumi.png" alt="Lumi la mascotte" class="w-16 h-16 object-contain flex-shrink-0" loading="lazy" width="120" height="120">
        <div>
          <h3 class="font-bold text-amber-900 dark:text-amber-200 font-outfit">Le conseil de Lumi</h3>
          <p class="text-sm text-amber-800 dark:text-slate-300 mt-1 leading-relaxed">
            "Bonjour ! Je suis Lumi. Pour réussir une super grille, choisis des mots qui ont des lettres en commun (comme E, A, R, T). Tu peux utiliser mes thèmes scientifiques pour commencer !"
          </p>
        </div>
      </div>

      <!-- Thèmes rapides -->
      <div class="bg-white dark:bg-slate-800 p-5 rounded-2xl border border-slate-100 dark:border-slate-700 shadow-sm">
        <h3 class="font-bold text-slate-800 dark:text-white mb-3 flex items-center gap-2">
          <i data-lucide="sparkles" class="w-5 h-5 text-amber-500"></i>
          Thèmes scientifiques de Lumi
        </h3>
        <div class="flex flex-wrap gap-2">
          <button @click="loadTheme('espace')" class="px-3 py-1.5 text-xs font-medium rounded-full bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-900/30 dark:text-emerald-300 transition">
            🚀 Système Solaire
          </button>
          <button @click="loadTheme('corps')" class="px-3 py-1.5 text-xs font-medium rounded-full bg-blue-50 text-blue-700 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-300 transition">
            🧬 Corps Humain
          </button>
          <button @click="loadTheme('nature')" class="px-3 py-1.5 text-xs font-medium rounded-full bg-lime-50 text-lime-700 hover:bg-lime-100 dark:bg-lime-900/30 dark:text-lime-300 transition">
            🌿 Botanique & Nature
          </button>
        </div>
      </div>

      <!-- Formulaire de saisie des mots -->
      <div class="bg-white dark:bg-slate-800 p-5 rounded-2xl border border-slate-100 dark:border-slate-700 shadow-sm space-y-4">
        <div class="flex justify-between items-center">
          <h3 class="font-bold text-slate-800 dark:text-white">Mes mots & définitions</h3>
          <span class="text-xs text-slate-500" x-text="`${words.length} mot(s)`"></span>
        </div>

        <div class="space-y-3 max-h-[350px] overflow-y-auto pr-1">
          <template x-for="(item, index) in words" :key="index">
            <div class="flex gap-2 items-start bg-slate-50 dark:bg-slate-900 p-3 rounded-xl border border-slate-100 dark:border-slate-800">
              <div class="flex-grow space-y-2">
                <input type="text" x-model="item.word" @input="item.word = item.word.toUpperCase().replace(/[^A-Z]/gi, '')" placeholder="MOT" class="w-full px-3 py-1 text-sm font-mono font-bold uppercase rounded border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-800 dark:text-white focus:ring-2 focus:ring-emerald-500 focus:outline-none">
                <input type="text" x-model="item.clue" placeholder="Définition ou indice..." class="w-full px-3 py-1 text-xs rounded border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 focus:ring-2 focus:ring-emerald-500 focus:outline-none">
              </div>
              <button @click="removeWord(index)" class="p-1 text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-950/30 rounded transition" aria-label="Supprimer ce mot">
                <i data-lucide="trash-2" class="w-4 h-4"></i>
              </button>
            </div>
          </template>
        </div>

        <div class="flex gap-2 pt-2">
          <button @click="addWord()" class="flex-1 py-2 px-4 bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-white font-medium rounded-xl text-sm transition flex items-center justify-center gap-2">
            <i data-lucide="plus" class="w-4 h-4"></i> Ajouter un mot
          </button>
          <button @click="generateGrid()" class="flex-1 py-2 px-4 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-xl text-sm transition flex items-center justify-center gap-2 shadow-sm">
            <i data-lucide="shuffle" class="w-4 h-4"></i> Générer la grille
          </button>
        </div>
      </div>

    </div>

    <!-- COLONNE DROITE : Grille & Rendu (Interactive à l'écran, épurée à l'impression) -->
    <div class="lg:col-span-7 space-y-6">
      
      <!-- Barre d'actions de la grille -->
      <div class="bg-white dark:bg-slate-800 p-4 rounded-2xl border border-slate-100 dark:border-slate-700 shadow-sm flex flex-wrap gap-3 justify-between items-center no-print">
        <div class="flex items-center gap-2">
          <span class="inline-block w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
          <span class="text-sm font-medium text-slate-700 dark:text-slate-300" x-text="`${placedCount}/${totalCount} mots placés`"></span>
        </div>
        <div class="flex gap-2">
          <button @click="toggleAnswers()" class="px-3 py-1.5 text-xs font-medium rounded-lg border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 transition flex items-center gap-1.5">
            <i data-lucide="eye" class="w-3.5 h-3.5" x-show="!showAnswers"></i>
            <i data-lucide="eye-off" class="w-3.5 h-3.5" x-show="showAnswers"></i>
            <span x-text="showAnswers ? 'Masquer la solution' : 'Afficher la solution'"></span>
          </button>
          <button @click="printGrid()" class="px-3 py-1.5 text-xs font-medium rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white transition flex items-center gap-1.5 shadow-sm">
            <i data-lucide="printer" class="w-3.5 h-3.5"></i>
            Imprimer la fiche
          </button>
        </div>
      </div>

      <!-- Zone d'impression spécifique (Masquée à l'écran, visible à l'impression) -->
      <div class="hidden print:block mb-6">
        <div class="text-center border-b pb-4 mb-6">
          <h1 class="text-2xl font-bold text-slate-900 font-outfit">Mes Mots Croisés Scientifiques</h1>
          <p class="text-sm text-slate-600 mt-1">Une activité créée sur mesure avec Lumi sur ief.apprendly.net</p>
        </div>
      </div>

      <!-- Grille de mots croisés -->
      <div class="bg-white dark:bg-slate-800 p-6 rounded-2xl border border-slate-100 dark:border-slate-700 shadow-sm flex flex-col items-center justify-center min-h-[300px]">
        
        <!-- Message si aucune grille n'est générée -->
        <div x-show="!generatedGrid || generatedGrid.length === 0" class="text-center py-12 space-y-3">
          <div class="w-16 h-16 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mx-auto text-slate-400">
            <i data-lucide="grid" class="w-8 h-8"></i>
          </div>
          <p class="text-slate-500 dark:text-slate-400 max-w-xs mx-auto text-sm">
            Saisis tes mots à gauche ou choisis un thème, puis clique sur "Générer la grille" !
          </p>
        </div>

        <!-- Rendu de la Grille -->
        <div x-show="generatedGrid && generatedGrid.length > 0" class="w-full overflow-auto flex justify-center p-2">
          <div class="grid gap-1 bg-slate-200 dark:bg-slate-900 p-2 rounded-lg" 
               :style="`grid-template-columns: repeat(${gridWidth}, minmax(0, 1fr));`"
               style="max-width: 100%; width: fit-content;">
            
            <template x-for="(row, rIndex) in generatedGrid" :key="rIndex">
              <template x-for="(cell, cIndex) in row" :key="cIndex">
                
                <!-- Case Noire (Vide) -->
                <div x-if="!cell" class="w-8 h-8 md:w-10 md:h-10 bg-slate-900 dark:bg-slate-950 rounded-sm"></div>
                
                <!-- Case Lettre -->
                <div x-if="cell" class="relative w-8 h-8 md:w-10 md:h-10 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-sm flex items-center justify-center">
                  
                  <!-- Numéro d'indice -->
                  <span x-show="cell.number" x-text="cell.number" class="absolute top-0.5 left-0.5 text-[9px] font-bold text-slate-500 dark:text-slate-400 leading-none"></span>
                  
                  <!-- Input de saisie (Écran uniquement) -->
                  <input type="text" 
                         maxlength="1" 
                         x-model="cell.guess" 
                         @input="cell.guess = cell.guess.toUpperCase()"
                         :disabled="showAnswers"
                         :class="{
                           'text-emerald-600 dark:text-emerald-400 font-bold': showAnswers || (cell.guess === cell.letter),
                           'text-slate-800 dark:text-white': !showAnswers && (cell.guess !== cell.letter)
                         }"
                         class="w-full h-full text-center font-mono font-bold text-sm md:text-base uppercase bg-transparent focus:bg-amber-50 dark:focus:bg-slate-700 focus:outline-none rounded-sm no-print">
                  
                  <!-- Affichage statique pour l'impression -->
                  <span class="hidden print:block font-mono font-bold text-sm md:text-base text-slate-900" 
                        x-text="printWithAnswers ? cell.letter : ''"></span>
                </div>

              </template>
            </template>

          </div>
        </div>

        <!-- Mots non placés (Alerte pédagogique) -->
        <div x-show="unplacedWords.length > 0" class="mt-4 w-full bg-amber-50 dark:bg-amber-950/20 border border-amber-100 dark:border-amber-900/40 p-3 rounded-xl text-xs text-amber-800 dark:text-amber-300 no-print">
          <span class="font-bold">⚠️ Mots non placés :</span> 
          <span x-text="unplacedWords.join(', ')"></span>. 
          <span class="italic">Lumi te conseille d'ajouter des mots avec des lettres communes pour les aider à se croiser !</span>
        </div>

      </div>

      <!-- Liste des Définitions -->
      <div x-show="generatedGrid && generatedGrid.length > 0" class="bg-white dark:bg-slate-800 p-6 rounded-2xl border border-slate-100 dark:border-slate-700 shadow-sm grid grid-cols-1 md:grid-cols-2 gap-6">
        
        <!-- Horizontales -->
        <div>
          <h3 class="font-bold text-slate-800 dark:text-white border-b pb-2 mb-3 flex items-center gap-2">
            <i data-lucide="arrow-right" class="w-4 h-4 text-emerald-600"></i>
            Horizontales (Horizontal)
          </h3>
          <ul class="space-y-2 text-sm text-slate-600 dark:text-slate-300">
            <template x-for="clue in horizontalClues" :key="clue.number">
              <li class="leading-relaxed">
                <span class="font-bold text-emerald-600 dark:text-emerald-400" x-text="`${clue.number}. `"></span>
                <span x-text="clue.clue"></span>
                <span x-show="showAnswers" class="text-xs text-slate-400 font-mono ml-1" x-text="`(${clue.word})`"></span>
              </li>
            </template>
            <template x-if="horizontalClues.length === 0">
              <li class="text-slate-400 italic text-xs">Aucune définition horizontale.</li>
            </template>
          </ul>
        </div>

        <!-- Verticales -->
        <div>
          <h3 class="font-bold text-slate-800 dark:text-white border-b pb-2 mb-3 flex items-center gap-2">
            <i data-lucide="arrow-down" class="w-4 h-4 text-emerald-600"></i>
            Verticales (Vertical)
          </h3>
          <ul class="space-y-2 text-sm text-slate-600 dark:text-slate-300">
            <template x-for="clue in verticalClues" :key="clue.number">
              <li class="leading-relaxed">
                <span class="font-bold text-emerald-600 dark:text-emerald-400" x-text="`${clue.number}. `"></span>
                <span x-text="clue.clue"></span>
                <span x-show="showAnswers" class="text-xs text-slate-400 font-mono ml-1" x-text="`(${clue.word})`"></span>
              </li>
            </template>
            <template x-if="verticalClues.length === 0">
              <li class="text-slate-400 italic text-xs">Aucune définition verticale.</li>
            </template>
          </ul>
        </div>

      </div>

      <!-- Sélecteur d'options d'impression (No-print) -->
      <div x-show="generatedGrid && generatedGrid.length > 0" class="bg-slate-50 dark:bg-slate-900 p-4 rounded-xl border border-slate-100 dark:border-slate-800 flex items-center justify-between no-print">
        <span class="text-xs text-slate-500 dark:text-slate-400">Option d'impression :</span>
        <label class="inline-flex items-center cursor-pointer">
          <input type="checkbox" x-model="printWithAnswers" class="sr-only peer">
          <div class="relative w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-slate-600 peer-checked:bg-emerald-600"></div>
          <span class="ms-2 text-xs font-medium text-slate-700 dark:text-slate-300">Imprimer avec la solution</span>
        </label>
      </div>

    </div>

    <!-- Pied de page d'impression (Masqué à l'écran, visible uniquement sur papier) -->
    <div class="hidden print:block w-full text-center text-[10px] text-slate-400 mt-12 border-t pt-4">
      Document d'apprentissage généré sur <span class="font-bold">ief.apprendly.net</span> • <span class="font-bold">Apprendly</span> • Support partagé à prix libre.
    </div>

  </div>

  <!-- Script Applicatif -->
  <script>
    function crosswordApp() {
      return {
        words: [],
        generatedGrid: null,
        gridWidth: 0,
        gridHeight: 0,
        horizontalClues: [],
        verticalClues: [],
        unplacedWords: [],
        placedCount: 0,
        totalCount: 0,
        showAnswers: false,
        printWithAnswers: false,

        themes: {
          espace: [
            { word: 'SOLEIL', clue: 'Étoile au centre de notre système planétaire.' },
            { word: 'TERRE', clue: 'Notre planète bleue, la troisième du système solaire.' },
            { word: 'LUNE', clue: 'L\'unique satellite naturel de la Terre.' },
            { word: 'MARS', clue: 'Surnommée la planète rouge en raison de son oxyde de fer.' },
            { word: 'ORBITE', clue: 'Trajectoire courbe suivie par un astre dans l\'espace.' }
          ],
          corps: [
            { word: 'COEUR', clue: 'Muscle creux qui pompe le sang dans tout l\'organisme.' },
            { word: 'POUMON', clue: 'Organe principal de la respiration chez les mammifères.' },
            { word: 'SQUELETTE', clue: 'Charpente osseuse qui soutient et protège notre corps.' },
            { word: 'CERVEAU', clue: 'Organe de la pensée, de la mémoire et des émotions.' },
            { word: 'MUSCLE', clue: 'Tissu capable de se contracter pour produire le mouvement.' }
          ],
          nature: [
            { word: 'ARBRE', clue: 'Grand végétal ligneux doté d\'un tronc et de branches.' },
            { word: 'FEUILLE', clue: 'Organe vert spécialisé dans la photosynthèse.' },
            { word: 'RACINE', clue: 'Partie souterraine qui puise l\'eau et les minéraux.' },
            { word: 'FLEUR', clue: 'Organe reproducteur coloré qui attire les pollinisateurs.' },
            { word: 'GRAINE', clue: 'Structure qui contient l\'embryon d\'une future plante.' }
          ]
        },

        initApp() {
          // Charger le thème espace par défaut
          this.loadTheme('espace');
          // Initialiser Lucide Icons après le rendu d'Alpine
          this.$nextTick(() => {
            if (typeof lucide !== 'undefined') {
              lucide.createIcons();
            }
          });
        },

        loadTheme(themeKey) {
          this.words = JSON.parse(JSON.stringify(this.themes[themeKey]));
          this.generateGrid();
        },

        addWord() {
          this.words.push({ word: '', clue: '' });
        },

        removeWord(index) {
          this.words.splice(index, 1);
          if (this.words.length === 0) {
            this.addWord();
          }
        },

        toggleAnswers() {
          this.showAnswers = !this.showAnswers;
        },

        printGrid() {
          window.print();
        },

        generateGrid() {
          this.showAnswers = false;
          
          // Nettoyage et filtrage des mots valides
          let list = this.words
            .filter(w => w.word.trim().length > 1 && w.clue.trim().length > 0)
            .map(w => ({
              word: w.word.trim().toUpperCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""),
              clue: w.clue.trim(),
              placed: false
            }));

          this.totalCount = list.length;
          if (list.length === 0) {
            this.generatedGrid = null;
            this.placedCount = 0;
            return;
          }

          // Trier par longueur décroissante
          list.sort((a, b) => b.word.length - a.word.length);

          const SIZE = 30;
          // Création d'une grille de travail vide
          let grid = Array(SIZE).fill(null).map(() => 
            Array(SIZE).fill(null).map(() => ({ letter: '', number: 0 }))
          );

          let placedWords = [];

          // Placer le premier mot horizontalement au centre
          let first = list[0];
          let startX = Math.floor(SIZE / 2) - Math.floor(first.word.length / 2);
          let startY = Math.floor(SIZE / 2);
          
          for (let i = 0; i < first.word.length; i++) {
            grid[startY][startX + i].letter = first.word[i];
          }
          placedWords.push({ word: first.word, clue: first.clue, x: startX, y: startY, dir: 'H' });
          first.placed = true;

          // Tenter de placer les mots suivants
          for (let i = 1; i < list.length; i++) {
            let current = list[i];
            let bestPlacement = null;
            let bestScore = -1;

            // Parcourir les mots déjà placés pour chercher des intersections
            for (let placed of placedWords) {
              for (let cp = 0; cp < current.word.length; cp++) {
                for (let pp = 0; pp < placed.word.length; pp++) {
                  if (current.word[cp] === placed.word[pp]) {
                    let newDir = placed.dir === 'H' ? 'V' : 'H';
                    let newX = placed.dir === 'H' ? placed.x + pp : placed.x - cp;
                    let newY = placed.dir === 'H' ? placed.y - cp : placed.y + pp;

                    if (this.isValidPlacement(grid, current.word, newX, newY, newDir, SIZE)) {
                      let score = this.scorePlacement(grid, current.word, newX, newY, newDir, SIZE);
                      if (score > bestScore) {
                        bestScore = score;
                        bestPlacement = { x: newX, y: newY, dir: newDir };
                      }
                    }
                  }
                }
              }
            }

            if (bestPlacement) {
              for (let k = 0; k < current.word.length; k++) {
                let cx = bestPlacement.dir === 'H' ? bestPlacement.x + k : bestPlacement.x;
                let cy = bestPlacement.dir === 'H' ? bestPlacement.y : bestPlacement.y + k;
                grid[cy][cx].letter = current.word[k];
              }
              placedWords.push({ 
                word: current.word, 
                clue: current.clue, 
                x: bestPlacement.x, 
                y: bestPlacement.y, 
                dir: bestPlacement.dir 
              });
              current.placed = true;
            }
          }

          // Calculer la boîte englobante (cropping)
          let minX = SIZE, maxX = 0, minY = SIZE, maxY = 0;
          let hasPlaced = false;
          for (let y = 0; y < SIZE; y++) {
            for (let x = 0; x < SIZE; x++) {
              if (grid[y][x].letter) {
                if (x < minX) minX = x;
                if (x > maxX) maxX = x;
                if (y < minY) minY = y;
                if (y > maxY) maxY = y;
                hasPlaced = true;
              }
            }
          }

          if (!hasPlaced) {
            this.generatedGrid = null;
            this.placedCount = 0;
            return;
          }

          // Ajouter une marge de 1 case autour de la grille
          minX = Math.max(0, minX - 1);
          maxX = Math.min(SIZE - 1, maxX + 1);
          minY = Math.max(0, minY - 1);
          maxY = Math.min(SIZE - 1, maxY + 1);

          this.gridWidth = maxX - minX + 1;
          this.gridHeight = maxY - minY + 1;

          // Assigner des numéros uniques aux cases de départ
          let clueNumber = 1;
          let startCells = {}; // "x,y" -> number
          let horizontalClues = [];
          let verticalClues = [];

          placedWords.forEach(pw => {
            let cx = pw.x - minX;
            let cy = pw.y - minY;
            let key = `${cx},${cy}`;
            
            if (!startCells[key]) {
              startCells[key] = clueNumber++;
            }
            let num = startCells[key];

            if (pw.dir === 'H') {
              horizontalClues.push({ number: num, clue: pw.clue, word: pw.word });
            } else {
              verticalClues.push({ number: num, clue: pw.clue, word: pw.word });
            }
          });

          // Construire la grille finale recadrée
          let finalGrid = Array(this.gridHeight).fill(null).map(() => 
            Array(this.gridWidth).fill(null)
          );

          for (let y = minY; y <= maxY; y++) {
            for (let x = minX; x <= maxX; x++) {
              let cell = grid[y][x];
              let cx = x - minX;
              let cy = y - minY;
              let key = `${cx},${cy}`;

              if (cell.letter) {
                finalGrid[cy][cx] = {
                  letter: cell.letter,
                  number: startCells[key] || null,
                  guess: ''
                };
              } else {
                finalGrid[cy][cx] = null;
              }
            }
          }

          this.generatedGrid = finalGrid;
          this.horizontalClues = horizontalClues.sort((a, b) => a.number - b.number);
          this.verticalClues = verticalClues.sort((a, b) => a.number - b.number);
          this.placedCount = placedWords.length;
          this.unplacedWords = list.filter(w => !w.placed).map(w => w.word);

          // Recréer les icônes Lucide après mise à jour du DOM
          this.$nextTick(() => {
            if (typeof lucide !== 'undefined') {
              lucide.createIcons();
            }
          });
        },

        isValidPlacement(grid, word, x, y, dir, SIZE) {
          for (let i = 0; i < word.length; i++) {
            let cx = dir === 'H' ? x + i : x;
            let cy = dir === 'H' ? y : y + i;

            if (cx < 0 || cx >= SIZE || cy < 0 || cy >= SIZE) return false;

            let currentCell = grid[cy][cx];

            // Conflit de lettre
            if (currentCell.letter && currentCell.letter !== word[i]) return false;

            // Vérification des adjacences pour éviter les collisions de mots parallèles
            if (!currentCell.letter) {
              if (dir === 'H') {
                if (cy > 0 && grid[cy - 1][cx].letter) return false;
                if (cy < SIZE - 1 && grid[cy + 1][cx].letter) return false;
                if (i === 0 && cx > 0 && grid[cy][cx - 1].letter) return false;
                if (i === word.length - 1 && cx < SIZE - 1 && grid[cy][cx + 1].letter) return false;
              } else {
                if (cx > 0 && grid[cy][cx - 1].letter) return false;
                if (cx < SIZE - 1 && grid[cy][cx + 1].letter) return false;
                if (i === 0 && cy > 0 && grid[cy - 1][cx].letter) return false;
                if (i === word.length - 1 && cy < SIZE - 1 && grid[cy + 1][cx].letter) return false;
              }
            }
          }
          return true;
        },

        scorePlacement(grid, word, x, y, dir, SIZE) {
          let intersections = 0;
          for (let i = 0; i < word.length; i++) {
            let cx = dir === 'H' ? x + i : x;
            let cy = dir === 'H' ? y : y + i;
            if (grid[cy][cx].letter === word[i]) {
              intersections++;
            }
          }
          return intersections;
        }
      };
    }
  </script>

  <!-- Styles d'impression CSS -->
  <style>
    @media print {
      body {
        background: white !important;
        color: black !important;
      }
      .no-print {
        display: none !important;
      }
      main {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
      }
      /* Forcer l'affichage de la grille sur papier */
      .print\:block {
        display: block !important;
      }
      .print\:hidden {
        display: none !important;
      }
    }
  </style>
</main>