diff --git a/public/index.html b/public/index.html
index 78200e3..5be2b0b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -56,7 +56,7 @@
           <div id="panel-fenetre-contenu"></div>
         </div>
       </div>
-      <div id="grille">Chargement de la grille en cours…</div>
+      <div id="grille" class="grille">Chargement de la grille en cours…</div>
       <div id="input-area"></div>
       <div style="display: none">
         <audio preload src="sons/lettre-non-trouve.wav" id="son-lettre-non-trouve"></audio>
diff --git a/public/jeu.css b/public/jeu.css
index 81116d3..275b2fb 100644
--- a/public/jeu.css
+++ b/public/jeu.css
@@ -91,11 +91,12 @@ h1 {
   min-height: calc(6 * var(--taille-cellule) + 12 * var(--epaisseur-bordure-cellule));
 }
 
-#grille table {
+.grille table {
   border-spacing: 0;
+  background-color: var(--couleur-fond-grille);
 }
 
-#grille td {
+.grille td {
   width: calc(var(--taille-cellule) - 2 * var(--epaisseur-padding-cellule));
   height: calc(var(--taille-cellule) - 2 * var(--epaisseur-padding-cellule));
   text-align: center;
@@ -106,11 +107,11 @@ h1 {
   z-index: 0;
 }
 
-#grille td:not(.resultat) {
+.grille td:not(.resultat) {
   background-color: var(--couleur-fond-grille);
 }
 
-#grille td.resultat::after {
+.grille td.resultat::after {
   width: calc(var(--taille-cellule));
   height: calc(var(--taille-cellule));
   position: absolute;
@@ -120,16 +121,16 @@ h1 {
   content: " ";
 }
 
-#grille td.mal-place::after {
+.grille td.mal-place::after {
   background-color: var(--couleur-mal-place);
   border-radius: 50%;
 }
 
-#grille td.bien-place::after {
+.grille td.bien-place::after {
   background-color: var(--couleur-bien-place);
 }
 
-#grille td.non-trouve::after {
+.grille td.non-trouve::after {
   background-color: var(--couleur-fond-grille);
 }
 
@@ -205,11 +206,26 @@ h1 {
   cursor: initial;
 }
 
+.regles-panel table {
+  font-size: 32px;
+}
+
+@media (max-height: 640px) {
+  .regles-panel table {
+    font-size: 24px;
+  }
+}
+
 .regles-panel #panel-fenetre {
   font-size: 14px;
   text-align: left;
 }
 
+.regles-panel #panel-fenetre-contenu p,
+.regles-panel #panel-fenetre-contenu div {
+  padding: 0.5em;
+}
+
 #panel-area a,
 #panel-area a:visited {
   color: var(--couleur-police);
diff --git a/ts/reglesPanel.ts b/ts/reglesPanel.ts
index f6e4ef2..1e926f1 100644
--- a/ts/reglesPanel.ts
+++ b/ts/reglesPanel.ts
@@ -21,18 +21,31 @@ export default class ReglesPanel {
   public afficher(): void {
     let titre = "Règles";
     let contenu =
-      '<p> \
-    Vous avez six essais pour deviner le mot du jour.<br /> \
-    Vous ne pouvez proposer que des mots commençant par la même lettre que le mot recherché, et qui se trouvent dans notre dictionnaire.<br /> \
-    Les lettres entourées d\'un carré rouge sont bien placées,<br /> \
-    les lettres entourées d\'un cercle jaune sont mal placées (mais présentes dans le mot).<br /> \
-    Les lettres qui restent sur fond bleu ne sont pas dans le mot.<br /> \
-    Il y a un mot par jour, entre 6 et 9 lettres, et il est identique pour tout le monde. Évitez donc les spoils et privilégiez le bouton de partage.<br /> \
-    En cas de soucis, vous pouvez contacter <a href="https://twitter.com/Jonamaths">@Jonamaths</a> sur twitter. − \
-    <a target="_blank" href="https://framagit.org/JonathanMM/sutom">Page du projet</a><br /> \
-    Basé sur l\'excellent <a target="_blank" href="https://www.powerlanguage.co.uk/wordle/">Wordle</a> et le regretté Motus.<br /> \
-    Merci à Emmanuel pour l\'aide sur les mots à trouver, et à GaranceAmarante pour l\'aide sur le dictionnaire. \
-  </p>';
+      "<p>" +
+      "Vous avez six essais pour deviner le mot du jour, entre 6 et 9 lettres, commun à tous.<br />" +
+      "Vous ne pouvez proposer que des mots commençant par la même lettre que le mot recherché, et qui se trouvent dans notre dictionnaire.<br />" +
+      "Le mot change chaque jour. Évitez donc les spoils et privilégiez le bouton de partage.<br />" +
+      "</p>" +
+      '<div class="grille">' +
+      "<table>" +
+      "<tr>" +
+      '<td class="resultat non-trouve">R</td>' +
+      '<td class="resultat non-trouve">A</td>' +
+      '<td class="resultat bien-place">T</td>' +
+      '<td class="resultat non-trouve">I</td>' +
+      '<td class="resultat mal-place">O</td>' +
+      "</tr>" +
+      "</table>" +
+      "Les lettres entourées d'un carré rouge sont bien placées,<br />" +
+      "les lettres entourées d'un cercle jaune sont mal placées (mais présentes dans le mot).<br />" +
+      "Les lettres qui restent sur fond bleu ne sont pas dans le mot.<br />" +
+      "</div>" +
+      "<p>" +
+      'En cas de soucis, vous pouvez contacter <a href="https://twitter.com/Jonamaths">@Jonamaths</a> sur twitter. −' +
+      '<a target="_blank" href="https://framagit.org/JonathanMM/sutom">Page du projet</a><br />' +
+      'Basé sur l\'excellent <a target="_blank" href="https://www.powerlanguage.co.uk/wordle/">Wordle</a> et le regretté Motus.<br />' +
+      "Merci à Emmanuel pour l'aide sur les mots à trouver, et à GaranceAmarante pour l'aide sur le dictionnaire." +
+      "</p>";
 
     this._panelManager.setContenu(titre, contenu);
     this._panelManager.setClasses(["regles-panel"]);