responsive design

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%;
     }
 }