diff --git a/dico.php b/dico.php
index a5e4dcd..d849bb2 100644
--- a/dico.php
+++ b/dico.php
@@ -36,9 +36,9 @@ function mots_espaces($max, $min=0) {
         foreach ($mots_de_n_lettres[$i] as $mot1) {
             foreach (mots_espaces($max - $i -1, $min) as $mot2) {
                 if ($mot1 != $mot2) {
-                    $dico["$mot1 $mot2"] = $dico[$mot1] && $dico[$mot2] ? "{$dico[$mot1]}. {$dico[$mot2]}." : $dico[$mot1] . $dico[$mot2];
+                    $dico["$mot1 $mot2"] = $dico[$mot1] && $dico[$mot2] ? "{$dico[$mot1]}<br/>{$dico[$mot2]}." : $dico[$mot1] . $dico[$mot2];
                     yield "$mot1 $mot2";
-                    $dico["$mot2 $mot1"] = $dico[$mot2] && $dico[$mot1] ? "{$dico[$mot2]}. {$dico[$mot1]}." : $dico[$mot2] . $dico[$mot1];
+                    $dico["$mot2 $mot1"] = $dico[$mot2] && $dico[$mot1] ? "{$dico[$mot2]}<br/>{$dico[$mot1]}." : $dico[$mot2] . $dico[$mot1];
                     yield "$mot2 $mot1";
                 }
             }
diff --git a/index.php b/index.php
index 1a4651d..4b81507 100644
--- a/index.php
+++ b/index.php
@@ -37,36 +37,36 @@ $grille = new Grille($hauteur, $largeur);
 </head>
 
 <body>
-    <div class="grille">
-        <table class="grille">
+    <form id="grilleForm" class="grille">
+        <table>
             <tr>
                 <th></th>
                 <?php for ($c = 0; $c < $largeur; $c++): ?>
-                <th><?= chr($c + 65) ?></th>
+                    <th><?= chr($c + 65) ?></th>
                 <?php endfor; ?>
             </tr>
             <?php for ($l = 0; $l < $hauteur; $l++): ?>
-            <tr>
-                <th><?= $l + 1 ?></th>
-                <?php for ($c = 0; $c < $largeur; $c++): ?>
-                <td class="case <?= $grille->grille[$l][$c]==" "?"noire": "blanche" ?>">
-                    <?php if ($grille->grille[$l][$c] == " "): ?>
-                        <input type="text" maxlength="1" size="1" name="<?= $l . $c ?>" value=" " disabled/>
-                    <?php else: ?>
-                        <input type="text" maxlength="1" size="1" name="<?= $l . $c ?>" />
-                    <?php endif; ?>
-                </td>
-                <?php endfor; ?>
-            </tr>
+                <tr>
+                    <th><?= $l + 1 ?></th>
+                    <?php for ($c = 0; $c < $largeur; $c++): ?>
+                        <td class="case <?= $grille->grille[$l][$c] == " " ? "noire" : "blanche" ?>">
+                            <?php if ($grille->grille[$l][$c] == " "): ?>
+                                <input type="text" maxlength="1" size="1" name="<?= $l . $c ?>" value=" " disabled />
+                            <?php else: ?>
+                                <input type="text" maxlength="1" size="1" name="<?= $l . $c ?>" required pattern="[A-Z]" />
+                            <?php endif; ?>
+                        </td>
+                    <?php endfor; ?>
+                </tr>
             <?php endfor; ?>
         </table>
-    </div>
+    </form>
     <div class="definitions">
         <div class="horizontales">
             <h2>Horizontalement</h2>
             <ol>
                 <?php for ($l = 0; $l < $hauteur; $l++): ?>
-                <li><?= $dico[$grille->get_ligne($l, $largeur)] ?></li>
+                    <li><?= $dico[$grille->get_ligne($l, $largeur)] ?></li>
                 <?php endfor; ?>
             </ol>
         </div>
@@ -74,10 +74,48 @@ $grille = new Grille($hauteur, $largeur);
             <h2>Verticalement</h2>
             <ol type="A">
                 <?php for ($c = 0; $c < $largeur; $c++): ?>
-                <li><?= $dico[$grille->get_colonne($c, $hauteur)] ?></li>
+                    <li><?= $dico[$grille->get_colonne($c, $hauteur)] ?></li>
                 <?php endfor; ?>
             </ol>
         </div>
     </div>
 
+    <script>
+        const inputs = Array.from(grilleForm.querySelectorAll('input[type="text"]'))
+        let largeur = <?= $largeur ?>;
+        let nb_cases = inputs.length
+        let index = 0
+        inputs.forEach(input => {
+            input.index = index++
+            input.onfocus = function() {
+                this.select();
+            }
+            input.oninput = function() {
+                this.value = this.value.toUpperCase()
+                if (!input.checkValidity()) {
+                    input.value = ""
+                }
+                if (grilleForm.checkValidity()) {
+                    window.setTimeout(() => alert("Grille validée !"), 100)
+                }
+            }
+            input.onkeydown = function(event) {
+                switch (event.key) {
+                    case "ArrowUp":
+                        inputs[(input.index - largeur + nb_cases) % nb_cases].focus()
+                        break;
+                    case "ArrowDown":
+                        inputs[(input.index + largeur) % nb_cases].focus()
+                        break;
+                    case "ArrowLeft":
+                        inputs[(input.index - 1 + nb_cases) % nb_cases].focus()
+                        break;
+                    case "ArrowRight":
+                        inputs[(input.index + 1) % nb_cases].focus()
+                        break;
+                }
+            }
+        })
+    </script>
+
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 1aa47b2..cacb630 100644
--- a/style.css
+++ b/style.css
@@ -4,7 +4,29 @@ body {
   
 .grille {
     margin: 2rem auto;
+}
+
+.grille table {
     border-collapse: collapse;
+    margin: 0 auto;
+}
+
+tr:nth-of-type(2) td {
+    border-top: 3px solid black;
+}
+tr:last-of-type td {
+    border-bottom: 3px solid black;
+}
+td:first-of-type {
+    border-left: 3px solid black;
+}
+td:last-child {
+    border-right: 3px solid black;
+}
+
+td {
+    border: 1px solid black;
+    padding: 2px;
 }
 
 th, td {
@@ -13,11 +35,6 @@ th, td {
     text-align: center;
 }
 
-td {
-    border: 1px solid black;
-    padding: 2px;
-}
-
 .case.noire {
     background-color: black;
 }
@@ -28,7 +45,7 @@ input {
     border: none;
     padding: 0;
     text-align: center;
-    font-size: 1em;
+    font-size: 1.2em;
 }
 
 input[disabled] {
@@ -42,4 +59,5 @@ input[disabled] {
 
 .definitions h2 {
     font-variant-caps: petite-caps;
+    text-align: center;
 }
\ No newline at end of file


	"> - grille[$l][$c] == " "): ?> - - - - -
	"> + grille[$l][$c] == " "): ?> + + + + +