diff --git a/index.php b/index.php
index b94b91f..66562a6 100644
--- a/index.php
+++ b/index.php
@@ -170,8 +170,8 @@ function definition_courante($definitions, $position) {
 ?>
                                 <input id="case-<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1"
                                     pattern="[A-Z]" title="<?= $title ?>"
-                                    data-iddh="<?= isset($definition_horizontale["definition"])? "dh-$y.$iddh" : "" ?>"
-                                    data-iddv="<?= isset($definition_verticale["definition"])? "dv-$x.$iddv" : "" ?>"
+                                    data-iddh="<?= isset($definition_horizontale["definition"])? "dh-$y-$iddh" : "" ?>"
+                                    data-iddv="<?= isset($definition_verticale["definition"])? "dv-$x-$iddv" : "" ?>"
                                 />
                             </td>
 <?php               endif; ?>
@@ -188,25 +188,23 @@ function definition_courante($definitions, $position) {
                     return isset($definition["definition"]);
                 });
 ?>
-                        <li>
 <?php           if (count($definitions)): ?>
 <?php               if (count($definitions) == 1): ?>
 <?php                   foreach ($definitions as $id => $definition): ?>
-                            <label id="<?= "dh-$y.$id" ?>" for="case-1<?= $y + 1 ?>">
-                                <?= formatter_definition($definition) ?>
-                            </label>
+                            <li id="<?= "dh-$y-$id" ?>"><label for="case-A<?= $y + 1 ?>"><?= formatter_definition($definition) ?></label></li>
 <?php                   endforeach ?>
 <?php               else: ?>
+                        <li>
                             <ol>
 <?php                   foreach ($definitions as $id => $definition): ?>
-                                <label id="<?= "dh-$y.$id" ?>" for="case-<?= chr($definition["debut"] + 0x41) ?><?= $y + 1 ?>">
-                                    <li><?= formatter_definition($definition) ?></li>
-                                </label>
+                                <li id="<?= "dh-$y-$id" ?>">
+                                    <label for="case-<?= chr($definition["debut"] + 0x41) ?><?= $y + 1 ?>"><?= formatter_definition($definition) ?></label>
+                                </li>
 <?php                   endforeach ?>
                             </ol>
+                        </li>
 <?php               endif ?>
 <?php           endif ?>
-                        </li>
 <?php       endforeach ?>
                     </ol>
                 </div>
@@ -218,25 +216,23 @@ function definition_courante($definitions, $position) {
                     return isset($definition["definition"]);
                 });
 ?>
-                        <li>
 <?php           if (count($definitions)): ?>
 <?php               if (count($definitions) == 1): ?>
 <?php                   foreach ($definitions as $id => $definition): ?>
-                            <label id="<?= "dv-$x.$id" ?>" for="case-<?= chr($x + 0x41) ?>1">
-                                <?= formatter_definition($definition) ?>
-                            </label>
+                        <li id="<?= "dv-$x-$id" ?>"><label for="case-<?= chr($x + 0x41) ?>1"><?= formatter_definition($definition) ?></label></li>
 <?php                   endforeach ?>
 <?php               else: ?>
+                        <li>
                             <ol>
 <?php                   foreach ($definitions as $id => $definition): ?>
-                                <label id="<?= "dv-$x.$id" ?>" for="case-<?= chr($x + 0x41) ?><?= $definition["debut"] + 1 ?>">
-                                    <li><?= formatter_definition($definition) ?></li>
-                                </label>
+                                <li id="<?= "dv-$x-$id" ?>">
+                                    <label for="case-<?= chr($x + 0x41) ?><?= $definition["debut"] + 1 ?>"><?= formatter_definition($definition) ?></label>
+                                </li>
 <?php                   endforeach ?>
                             </ol>
+                        </li>
 <?php               endif ?>
 <?php           endif ?>
-                        </li>
 <?php       endforeach ?>
                     </ol>
                 </div>
@@ -251,11 +247,9 @@ function definition_courante($definitions, $position) {
                 <img src="favicons/favicon.svg" width="16" height="16">
                 <button type="submit">Nouvelle grille</button>
                 de
-                <input type="number" id="lignes" <?= isset($_GET["lignes"]) ? ' name="lignes"' : "" ?>
-                    value="<?= $hauteur ?>" min="<?= HAUTEUR_MIN ?>" max="<?= HAUTEUR_MAX ?>" />
+                <input type="number" id="lignes" <?= isset($_GET["lignes"]) ? ' name="lignes"' : "" ?> value="<?= $hauteur ?>" min="<?= HAUTEUR_MIN ?>" max="<?= HAUTEUR_MAX ?>" />
                 lignes et
-                <input type="number" id="colonnes" <?= isset($_GET["colonnes"]) ? ' name="colonnes"' : "" ?>
-                    value="<?= $largeur ?>" min="<?= LARGEUR_MIN ?>" max="<?= LARGEUR_MAX ?>" />
+                <input type="number" id="colonnes" <?= isset($_GET["colonnes"]) ? ' name="colonnes"' : "" ?> value="<?= $largeur ?>" min="<?= LARGEUR_MIN ?>" max="<?= LARGEUR_MAX ?>" />
                 colonnes
             </div>
         </form>
diff --git a/script.js b/script.js
index ce1ff9c..c660983 100644
--- a/script.js
+++ b/script.js
@@ -17,19 +17,37 @@ for (let input of inputs) {
 
   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})`
+      `.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}))`
+      `.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");
     }
+    if (input.dataset.iddh) {
+      for (li of document.querySelectorAll(`.definitions.horizontales ol li ol #${input.dataset.iddh}`)) {
+        for (liVoisin of li.parentElement.querySelectorAll("li")) {
+          if (liVoisin == li) {
+            liVoisin.classList.add("selectionee");
+          } else {
+            liVoisin.classList.add("non-selectionee");
+          }
+        }
+      }
+    }
+    if (input.dataset.iddv) {
+      for (li of document.querySelectorAll(`.definitions.verticales ol li ol #${input.dataset.iddv}`)) {
+        for (liVoisin of li.parentElement.querySelectorAll("li")) {
+          if (liVoisin == li) {
+            liVoisin.classList.add("selectionee");
+          } else {
+            liVoisin.classList.add("non-selectionee");
+          }
+        }
+      }
+    }
 
     input.select();
   };
@@ -79,21 +97,11 @@ for (let input of inputs) {
   };
 
   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})`
-    )) {
+    for (li of document.querySelectorAll(".definitions li")) {
       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");
     }
-  };
+  }
 }
 
 for (let input of grilleForm.querySelectorAll(".nouvelle-grille input")) {