diff --git a/index.php b/index.php
index c5df204..f05736e 100644
--- a/index.php
+++ b/index.php
@@ -53,7 +53,7 @@ $grille->current();
 
 <body>
     <form id="grilleForm" method="get" location=".">
-        <h1>
+        <h1 class="large width">
             <table>
                 <tbody>
                     <tr>
@@ -80,32 +80,35 @@ $grille->current();
                 </tbody>
             </table>
         </h1>
-        <?php if ($grille->valid()): ?>
-            <table class="grille">
-                <tr>
-                    <th></th>
-                    <?php for ($x = 0; $x < $largeur; $x++): ?>
-                        <th><?= chr($x + 65) ?></th>
-                    <?php endfor; ?>
-                    <th></th>
-                </tr>
-                <?php for ($y = 0; $y < $hauteur; $y++): ?>
-                    <tr>
-                        <th><?= $y + 1 ?></th>
-                        <?php for ($x = 0; $x < $largeur; $x++): ?>
-                            <td class="case <?= $grille->grille[$y][$x] == " " ? "noire" : "blanche" ?>">
-                                <?php if ($grille->grille[$y][$x] == " "): ?>
-                                    <input type="text" maxlength="1" size="1" value=" " disabled />
-                                <?php else: ?>
-                                    <input type="text" maxlength="1" size="1" pattern="[A-Z]"/>
-                                <?php endif; ?>
-                            </td>
+        <h1 class="small width">Mots croisés</h1>
+        <div class="grille-et-definitions">
+            <?php if ($grille->valid()): ?>
+                <div class="grille">
+                    <table>
+                        <tr>
+                            <th></th>
+                            <?php for ($x = 0; $x < $largeur; $x++): ?>
+                                <th><?= chr($x + 65) ?></th>
+                            <?php endfor; ?>
+                            <th></th>
+                        </tr>
+                        <?php for ($y = 0; $y < $hauteur; $y++): ?>
+                            <tr>
+                                <th><?= $y + 1 ?></th>
+                                <?php for ($x = 0; $x < $largeur; $x++): ?>
+                                    <td class="case <?= $grille->grille[$y][$x] == " " ? "noire" : "blanche" ?>">
+                                        <?php if ($grille->grille[$y][$x] == " "): ?>
+                                            <input type="text" maxlength="1" size="1" value=" " disabled />
+                                        <?php else: ?>
+                                            <input type="text" maxlength="1" size="1" pattern="[A-Z]"/>
+                                        <?php endif; ?>
+                                    </td>
+                                <?php endfor; ?>
+                            </tr>
                         <?php endfor; ?>
-                    </tr>
-                <?php endfor; ?>
-            </table>
-            <div class="definitions">
-                <div class="horizontales">
+                    </table>
+                </div>
+                <div class="definitions horizontales">
                     <h2>Horizontalement</h2>
                     <ol>
                         <?php for ($y = 0; $y < $hauteur; $y++): ?>
@@ -124,7 +127,7 @@ $grille->current();
                         <?php endfor; ?>
                     </ol>
                 </div>
-                <div class="verticales">
+                <div class="definitions verticales">
                     <h2>Verticalement</h2>
                     <ol type="A">
                         <?php for ($x = 0; $x < $largeur; $x++): ?>
@@ -143,10 +146,10 @@ $grille->current();
                         <?php endfor; ?>
                     </ol>
                 </div>
-            </div>
-        <?php else: ?>
-            <h3 class="erreur">Erreur de génération de la grille</h3>
-        <?php endif ?>
+            <?php else: ?>
+                <h3 class="erreur">Erreur de génération de la grille</h3>
+            <?php endif ?>
+        </div>
 
         <input type="hidden" id="lignes" <?php if (isset($_GET["lignes"])): ?>name="lignes" <?php endif ?>value="<?= $hauteur ?>" />
         <input type="hidden" id="colonnes" <?php if (isset($_GET["colonnes"])): ?>name="colonnes" <?php endif ?>value="<?= $largeur ?>" />
diff --git a/style.css b/style.css
index 4220c25..9170b6c 100644
--- a/style.css
+++ b/style.css
@@ -1,20 +1,27 @@
 body {
     margin: 0;
-    padding: 0;
+    padding: 2rem 1rem;
     background-color: white;
     font-family: Times, 'Times New Roman', Georgia, serif;
 }
 
 form {
-    padding: 1rem;
-    min-height: calc(100vh - 2rem);
     display: flex;
     flex-flow: column;
-    justify-content: space-evenly;
+    min-height: calc(100vh - 4rem);
 }
 
 h1 {
     margin: 0;
+    letter-spacing: 0.2em;
+}
+
+h1.large.width {
+    display: inherit;
+}
+
+h1.small.width {
+    display: none;
 }
 
 h1 table {
@@ -33,15 +40,26 @@ h2 {
     text-align: center;
 }
 
-table.grille {
+.grille-et-definitions {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    height: max-content;
+    flex-grow: 1;
+    align-items: center;
+}
+
+.grille table {
     border-collapse: collapse;
     margin: 0 auto;
     height: fit-content;
 }
 
-.grille th {
-    width: 25px;
-    height: 30px;
+.grille th,
+.grille td {
+    width: 2rem;
+    height: 2rem;
     text-align: center;
 }
 
@@ -91,13 +109,11 @@ table.grille {
 }
 
 .definitions {
-    display: flex;
-    justify-content: space-evenly;
+    width: 30%;
 }
 
-.definitions .horizontales,
-.definitions .verticales {
-    width: 45%;
+.definitions.horizontales {
+    order: -1;
 }
 
 .definitions ol {
@@ -141,8 +157,8 @@ button[type='submit'] {
 }
 
 button[type='submit'] {
-    width: fit-content;
-    margin: 0 auto;
+    width: 100%;
+    margin: auto;
     border: none;
     background: none;
     font-family: inherit;
@@ -150,6 +166,7 @@ button[type='submit'] {
     display: flex;
     align-items: center;
     gap: 0.5em;
+    justify-content: center;
 }
 
 button[type="submit"]:hover {
@@ -163,6 +180,41 @@ button[type="submit"]:active {
 }
 
 
+@media (max-width: 1024px) {
+    body {
+        padding: 1.5rem 1rem;
+    }
+
+    h1.large.width {
+        display: none;
+    }
+
+    h1.small.width {
+        display: initial;
+    }
+
+    h1 table {
+        line-height: 0.7;
+    }
+    
+    form {
+        min-height: calc(100vh - 2rem);
+    }
+    
+    .grille {
+        width: 100%;
+        margin: auto;
+    }
+    
+    .definitions {
+        width: 45%;
+    }
+    
+    .definitions.horizontales {
+        order: inherit
+    }
+}
+
 @media (max-width: 640px) {
 	* {
 		box-sizing: border-box;
@@ -171,12 +223,15 @@ button[type="submit"]:active {
 	body {
 		width: auto;
 		margin: 0;
-		padding: 0;
+		padding: 1rem 0;
 	}
-    
 
-    h1 table {
-        line-height: 0.7;
+    h1.large.width {
+        display: none;
+    }
+
+    h1.small.width {
+        display: none;
     }
 
 	.grille td {
@@ -189,8 +244,8 @@ button[type="submit"]:active {
         flex-flow: column;
     }
 
-    .definitions .horizontales,
-    .definitions .verticales {
+    .definitions.horizontales,
+    .definitions.verticales {
         width: 100%;
     }
 }
