diff --git a/Grille.php b/Grille.php
index c0e5d7d..e8ced83 100644
--- a/Grille.php
+++ b/Grille.php
@@ -20,7 +20,7 @@ class Grille implements Iterator, ArrayAccess {
     private $lettres_suivantes;
     private $positions;
     private $nb_positions;
-    private $mots_utilises;
+    public $mots_utilises;
 
     public function __construct($hauteur, $largeur, $id = "")
     {
diff --git a/dico.php b/dico.php
index 841bedb..d14abde 100644
--- a/dico.php
+++ b/dico.php
@@ -35,6 +35,9 @@ foreach ($dico as $mot => $definition) {
         $mots_de_n_lettres[$n] = [];
     }
     $mots_de_n_lettres[$n][] = $mot;
+    if (!empty($definitions)) {
+        $dico[$mot] = [$definitions[array_rand($definitions)]];
+    }
 }
 
 function mots_espaces($longueur)
diff --git a/index.php b/index.php
index f96340e..333b3d5 100644
--- a/index.php
+++ b/index.php
@@ -38,14 +38,14 @@ $largeur = filter_input(INPUT_GET, 'c', FILTER_VALIDATE_INT, [
 $grille = new Grille($hauteur, $largeur, $id);
 $grille->current();
 $definitions = [
-    "horizontales" => [],
-    "verticales" => []
+    "lignes" => [],
+    "colonnes" => []
 ];
 for ($y = 0; $y < $hauteur; $y++) {
-    $definitions["horizontales"][$y] = $dico[$grille->get_ligne($y, $largeur)];
+    $definitions["lignes"][$y] = $dico[$grille->get_ligne($y, $largeur)];
 }
 for ($x = 0; $x < $largeur; $x++) {
-    $definitions["verticales"][$x] = $dico[$grille->get_colonne($x, $hauteur)];
+    $definitions["colonnes"][$x] = $dico[$grille->get_colonne($x, $hauteur)];
 }
 
 ?>
@@ -107,10 +107,10 @@ for ($x = 0; $x < $largeur; $x++) {
                                 <?php for ($x = 0; $x < $largeur; $x++): ?>
                                     <td class="case <?= $grille[$y][$x] == " " ? "noire" : "blanche" ?>">
                                         <?php if ($grille[$y][$x] == " "): ?>
-                                            <input type="text" maxlength="1" size="1" value=" " disabled />
+                                            <input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1" value=" " disabled />
                                         <?php else: ?>
-                                            <input type="text" maxlength="1" size="1" pattern="[A-Z]" placeholder="<?= $grille[$y][$x] ?>"
-                                                title="<?= "➡️ " . strip_tags(implode(" ➡️ ", $definitions["horizontales"][$y])) . "\n⬇️ " . strip_tags(implode("\n⬇️ ", $definitions["verticales"][$x])) ?>" />
+                                            <input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1" pattern="[A-Z]" placeholder="<?= $grille[$y][$x] ?>"
+                                                title="<?= "→ " . strip_tags(implode("\n→ ", $definitions["lignes"][$y])) . "\n↓ " . strip_tags(implode("\n↓ ", $definitions["colonnes"][$x])) ?>" />
                                         <?php endif; ?>
                                     </td>
                                 <?php endfor; ?>
@@ -121,37 +121,37 @@ for ($x = 0; $x < $largeur; $x++) {
                 <div class="definitions horizontales">
                     <h2>Horizontalement</h2>
                     <ol>
-                        <?php for ($y = 0; $y < $hauteur; $y++): ?>
+                        <?php foreach ($definitions["lignes"] as $y => $definitions_ligne): ?>
                             <li>
-                                <?php if (count($definitions["horizontales"][$y]) == 1): ?>
-                                    <?= $definitions["horizontales"][$y][0] ?>
+                                <?php if (count($definitions_ligne) == 1): ?>
+                                    <?= $definitions_ligne[0] ?>
                                 <?php else: ?>
                                     <ol>
-                                        <?php foreach ($definitions["horizontales"][$y] as $definition) : ?>
+                                        <?php foreach ($definitions_ligne as $definition) : ?>
                                             <li><?= $definition ?></li>
                                         <?php endforeach ?>
                                     </ol>
                                 <?php endif ?>
                             </li>
-                        <?php endfor; ?>
+                        <?php endforeach; ?>
                     </ol>
                 </div>
                 <div class="definitions verticales">
                     <h2>Verticalement</h2>
                     <ol type="A">
-                        <?php for ($x = 0; $x < $largeur; $x++): ?>
+                        <?php foreach ($definitions["colonnes"] as $x => $definitions_colonne): ?>
                             <li>
-                                <?php if (count($definitions["horizontales"][$x]) == 1): ?>
-                                    <?= $definitions["horizontales"][$x][0] ?>
+                                <?php if (count($definitions_colonne) == 1): ?>
+                                    <?= $definitions_colonne[0] ?>
                                 <?php else: ?>
                                     <ol>
-                                        <?php foreach ($definitions["horizontales"][$x] as $definition) : ?>
+                                        <?php foreach ($definitions_colonne as $definition) : ?>
                                             <li><?= $definition ?></li>
                                         <?php endforeach ?>
                                     </ol>
                                 <?php endif ?>
                             </li>
-                        <?php endfor; ?>
+                        <?php endforeach; ?>
                     </ol>
                 </div>
             <?php else: ?>
diff --git a/script.js b/script.js
index 3123f0e..a73ea37 100644
--- a/script.js
+++ b/script.js
@@ -1,59 +1,79 @@
 async function sha256(text) {
-    const encoder = new TextEncoder();
-    const data = encoder.encode(text);
-    const hashBuffer = await crypto.subtle.digest('SHA-256', data);
-    const hashArray = Array.from(new Uint8Array(hashBuffer));
-    return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+  const encoder = new TextEncoder();
+  const data = encoder.encode(text);
+  const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
 }
 
 const inputs = Array.from(grilleForm.querySelectorAll('input[type="text"]'));
 let largeur = Number(colonnes.value);
 let nb_cases = inputs.length;
 let index = 0;
+inputs.forEach((input) => {
+  input.index = index++;
+  input.x = input.index % largeur;
+  input.y = Math.floor(input.index / largeur);
 
-inputs.forEach(input => {
-    input.index = index++;
+  input.onfocus = function (event) {
+    for (li of document.querySelectorAll(`.definitions.horizontales > ol > li:nth-child(${input.y+1}), .definitions.verticales > ol > li:nth-child(${input.x+1})`)) {
+      li.classList.add("selectionee")
+    }
+    for (li of document.querySelectorAll(`.definitions.horizontales > ol > li:not(:nth-child(${input.y+1})), .definitions.verticales > ol > li:not(:nth-child(${input.x+1}))`)) {
+      li.classList.add("non-selectionee")
+    }
+    
+    input.select();
+  };
 
-    input.onfocus = function (event) {
-        input.select();
-    };
+  input.onkeydown = function (event) {
+    next_input = null;
+    switch (event.key) {
+      case "ArrowUp":
+        next_input = inputs[(input.index - largeur + nb_cases) % nb_cases];
+        break;
+      case "ArrowDown":
+        next_input = inputs[(input.index + largeur) % nb_cases];
+        break;
+      case "ArrowLeft":
+        next_input = inputs[(input.index - 1 + nb_cases) % nb_cases];
+        break;
+      case "ArrowRight":
+        next_input = inputs[(input.index + 1) % nb_cases];
+        break;
+    }
+    if (next_input) {
+      next_input.focus();
+      next_input.select();
+      event.preventDefault();
+    }
+  };
 
-    input.onkeydown = function (event) {
-        next_input = null;
-        switch (event.key) {
-            case 'ArrowUp':
-                next_input = inputs[(input.index - largeur + nb_cases) % nb_cases];
-                break;
-            case 'ArrowDown':
-                next_input = inputs[(input.index + largeur) % nb_cases];
-                break;
-            case 'ArrowLeft':
-                next_input = inputs[(input.index - 1 + nb_cases) % nb_cases];
-                break;
-            case 'ArrowRight':
-                next_input = inputs[(input.index + 1) % nb_cases];
-                break;
+  input.oninput = function (event) {
+    this.value = this.value.toUpperCase();
+    if (!input.checkValidity()) {
+      input.value = "";
+    }
+    if (
+      inputs.every((input) => input.value.length == 1) &&
+      grilleForm.checkValidity()
+    ) {
+      sha256(inputs.map((input) => input.value).join("")).then((hash) => {
+        if (hash == solution_hashee.value) {
+          if (confirm("Bravo ! \nUne nouvelle partie ?")) {
+            grilleForm.submit();
+          }
         }
-        if (next_input) {
-            next_input.focus();
-            next_input.select();
-            event.preventDefault();
-        }
-    };
+      });
+    }
+  };
 
-    input.oninput = function (event) {
-        this.value = this.value.toUpperCase();
-        if (!input.checkValidity()) {
-            input.value = '';
-        }
-        if (inputs.every(input => input.value.length == 1) && grilleForm.checkValidity()) {
-            sha256(inputs.map(input => input.value).join('')).then(hash => {
-                if (hash == solution_hashee.value) {
-                    if (confirm('Bravo ! \nUne nouvelle partie ?')) {
-                        grilleForm.submit();
-                    }
-                }
-            });
-        }
-    };
+  input.onblur = function (event) {
+    for (li of document.querySelectorAll(`.definitions.horizontales > ol > li:nth-child(${input.y+1}), .definitions.verticales > ol > li:nth-child(${input.x+1})`)) {
+      li.classList.remove("selectionee")
+    }
+    for (li of document.querySelectorAll(`.definitions.horizontales > ol > li:not(:nth-child(${input.y+1})), .definitions.verticales > ol > li:not(:nth-child(${input.x+1}))`)) {
+      li.classList.remove("non-selectionee")
+    }
+  };
 });
diff --git a/style.css b/style.css
index 3b13c64..253b201 100644
--- a/style.css
+++ b/style.css
@@ -1,283 +1,300 @@
 body {
-    margin: 0;
-    padding: 2rem 1rem;
-    background-color: white;
-    font-family: Times, 'Times New Roman', Georgia, serif;
+  margin: 0;
+  padding: 0;
+  background-color: white;
+  font-family: Times, "Times New Roman", Georgia, serif;
 }
 
 form {
-    display: flex;
-    flex-flow: column;
-    min-height: calc(100vh - 4rem);
+  display: flex;
+  padding: 1rem;
+  min-height: calc(100vh - 2rem);
+  flex-flow: column;
+  justify-content: space-between;
 }
 
 h1 {
-    margin: 0;
-    letter-spacing: 0.2em;
+  margin: 0;
+  letter-spacing: 0.2em;
 }
 
 h1.large.width {
-    display: inherit;
+  display: inherit;
+  padding-top: 1rem;
 }
 
 h1.small.width {
-    display: none;
+  display: none;
 }
 
 h1 table {
-    margin: auto;
-    line-height: 0.8;
+  margin: auto;
+  line-height: 0.8;
 }
 
 h1 td {
-    width: 0.7em;
-    text-align: center;
+  width: 0.7em;
+  text-align: center;
 }
 
 h1,
 h2 {
-    font-variant-caps: petite-caps;
-    text-align: center;
+  font-variant-caps: petite-caps;
+  text-align: center;
 }
 
 .grille-et-definitions {
-    display: flex;
-    flex-flow: row;
-    justify-content: space-evenly;
-    flex-wrap: wrap;
-    height: max-content;
-    flex-grow: 1;
-    align-items: center;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  height: max-content;
+  gap: 1em;
 }
 
 .grille table {
-    border-collapse: collapse;
-    margin: 0 auto;
-    height: fit-content;
+  border-collapse: collapse;
+  margin: 0 auto;
+  height: fit-content;
 }
 
 .grille th,
 .grille td {
-    width: 2rem;
-    height: 2rem;
-    text-align: center;
+  width: 2rem;
+  height: 2rem;
+  text-align: center;
 }
 
 .grille td {
-    width: 2rem;
-    height: 2rem;
-    border: 1px solid black;
-    padding: 2px;
-    background-color: white;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid black;
+  padding: 2px;
+  background-color: white;
 }
 
 .grille tr:nth-of-type(2) td {
-    border-top-width: 3px;
+  border-top-width: 3px;
 }
 .grille tr:last-of-type td {
-    border-bottom-width: 3px;
+  border-bottom-width: 3px;
 }
 .grille td:first-of-type {
-    border-left-width: 3px;
+  border-left-width: 3px;
 }
 .grille td:last-child {
-    border-right-width: 3px;
+  border-right-width: 3px;
 }
 
 .grille .case.noire {
-    background-color: black;
+  background-color: black;
 }
 
 .grille .case.noire {
-    background-color: black;
+  background-color: black;
 }
 
 .grille input {
-    width: 100%;
-    height: 100%;
-    border: none;
-    padding: 0;
-    text-align: center;
-    font-size: 1.2em;
-    font-family: 'Comic Sans MS', 'Comic Sans', sans;
-    color: darkblue;
-    background-color: white;
+  width: 100%;
+  height: 100%;
+  border: none;
+  padding: 0;
+  text-align: center;
+  font-size: 1.2em;
+  font-family: "Comic Sans MS", "Comic Sans", sans;
+  color: darkblue;
+  background-color: white;
 }
 
 .grille input[disabled] {
-    background-color: black;
+  background-color: black;
 }
 
 .grille input::placeholder {
-    color: transparent;
+  color: transparent;
 }
 
 .definitions {
-    width: 30%;
+  width: 30%;
 }
 
 .definitions.horizontales {
-    order: -1;
+  order: -1;
 }
 
 .definitions ol {
-    padding-left: 2em;
+  padding-left: 2em;
 }
 
 .definitions > div > ol > li::marker {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .definitions li ol {
-    padding-left: 0em;
-    list-style: parenthese;
+  padding-left: 0em;
+  list-style: parenthese;
 }
 
 @counter-style parenthese {
-    system: extends decimal;
-    suffix: ") ";
+  system: extends decimal;
+  suffix: ") ";
 }
 
 .definitions li li {
-    margin-left: 0.8em;
-    counter-increment: count;
+  margin-left: 0.8em;
+  counter-increment: count;
 }
 
 .definitions li li::marker {
-    font-size: small;
+  font-size: small;
 }
 
 .definitions em {
-    text-wrap: nowrap;
+  text-wrap: nowrap;
+}
+
+.definitions.case ol.horizontales {
+  list-style-type: "→ ";
+}
+
+.definitions.case ol.verticales {
+  list-style-type: "↓ ";
+}
+
+.definitions li {
+  transition: opacity 0.3s;
+}
+
+.definitions li.non-selectionee {
+  opacity: 30%;
 }
 
 .erreur {
-    text-align: center;
+  text-align: center;
 }
 
-button[type='submit'] {
-    width: fit-content;
-    margin: 0 auto;
+button[type="submit"] {
+  width: fit-content;
+  margin: 0 auto;
 }
 
-button[type='submit'] {
-    width: 100%;
-    margin: auto;
-    border: none;
-    background: none;
-    font-family: inherit;
-    font-size: 1em;
-    display: flex;
-    align-items: center;
-    gap: 0.5em;
-    justify-content: center;
+button[type="submit"] {
+  width: 100%;
+  margin: 1em auto 0 auto;
+  border: none;
+  background: none;
+  font-family: inherit;
+  font-size: 1em;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  justify-content: center;
 }
 
 button[type="submit"]:hover {
-    cursor: pointer;
-    color: #2a6496;
-    text-decoration: underline;
+  cursor: pointer;
+  color: #2a6496;
+  text-decoration: underline;
 }
 
 button[type="submit"]:active {
-    color: darkorchid;
+  color: darkorchid;
 }
 
-
 @media (max-width: 1024px) {
-    body {
-        padding: 1.5rem 1rem;
-    }
+  h1.large.width {
+    display: none;
+  }
 
-    h1.large.width {
-        display: none;
-    }
+  h1.small.width {
+    display: initial;
+  }
 
-    h1.small.width {
-        display: initial;
-    }
+  h1 table {
+    line-height: 0.7;
+  }
 
-    h1 table {
-        line-height: 0.7;
-    }
-    
-    form {
-        min-height: calc(100vh - 2rem);
-    }
-    
-    .grille {
-        width: 100%;
-        margin: auto;
-    }
-    
-    .definitions {
-        width: 45%;
-    }
-    
-    .definitions.horizontales {
-        order: inherit
-    }
+  .grille {
+    width: 100%;
+    margin: auto;
+  }
+
+  .definitions {
+    width: 45%;
+  }
+
+  .definitions.horizontales {
+    order: inherit;
+  }
 }
 
 @media (max-width: 640px) {
-	* {
-		box-sizing: border-box;
-	}
-    
-	body {
-		width: auto;
-		margin: 0;
-		padding: 1rem 0;
-	}
+  * {
+    box-sizing: border-box;
+  }
 
-    h1.large.width {
-        display: none;
-    }
+  body {
+    width: auto;
+    margin: 0;
+    padding: 1rem 0;
+  }
 
-    h1.small.width {
-        display: none;
-    }
+  h1.large.width {
+    display: none;
+  }
 
-	.grille td {
-		width: 2.5rem;
-        height: 2.5rem;
-	}
-    
-    .definitions {
-        display: flex;
-        flex-flow: column;
-    }
+  h1.small.width {
+    display: none;
+  }
 
-    .definitions.horizontales,
-    .definitions.verticales {
-        width: 100%;
-    }
+  .grille td {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  
+  h2 {
+    font-size: 1.2em;
+    margin: 1em 0 0.5em 0;
+  }
+
+  .definitions.horizontales,
+  .definitions.verticales {
+    width: 100%;
+  }
+  
+  .definitions > ol {
+    margin: 0;
+  }
+  
+  .definitions li.non-selectionee {
+    display: none;
+  }
 }
 
-@media (max-device-width:768px) and (orientation: landscape) {
+@media (max-device-width: 768px) and (orientation: landscape) {
   html {
-   -webkit-text-size-adjust: 100%;
-   -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
   }
 }
 
 @media (prefers-color-scheme: dark) {
-    body,
-    button {
-        background-color: #02081a;
-        color: #c6c6c6;
-    }
-    
-    .grille td,
-    .grille input {
-        background-color: #edeeee;
-    }
-    
-    button[type="submit"]:hover {
-        color: #479fec;
-    }
-    
-    button[type="submit"]:active {
-        color: orchid;
-    }
+  body,
+  button {
+    background-color: #02081a;
+    color: #c6c6c6;
+  }
+
+  .grille td,
+  .grille input {
+    background-color: #edeeee;
+  }
+
+  button[type="submit"]:hover {
+    color: #479fec;
+  }
+
+  button[type="submit"]:active {
+    color: orchid;
+  }
 }