Amélioration mise en page

src/agenda_culturel/static/style.scss

@@ -628,6 +628,11 @@ form [role="button"] {
       grid-column-gap: var(--nav-element-spacing-vertical);
       grid-template-columns: auto 25%;
     }
+    .grid.two-columns-2 {
+        grid-column-gap: var(--nav-element-spacing-vertical);
+        grid-template-columns: 30% auto;
+        align-items: center;
+    }
   }
 
 aside nav a.selected {
@@ -787,3 +792,11 @@ table .buttons {
     flex: auto;
     gap: 0.4em;
 }
+
+.image {
+    text-align: center;
+    img {
+        width: 800px;
+        margin: 4em auto;
+    }
+}

src/agenda_culturel/templates/page-erreur.html

@@ -10,7 +10,7 @@
 
 
 {% block title %}
-Y'a un pépin
+Y'a un pépin ({{ error }})
 {% endblock %}
 
 
@@ -20,10 +20,11 @@ Y'a un pépin
     <header>
         <h1>Y'a un pépin (erreur {{ error }})</h1>
     </header>
-    <p>On a rencontré un pépin en cherchant la page que tu as demandé&nbsp;! N'hésites pas à <a href="{% url 'contact' %}">nous signaler 
+    <div class="grid two-columns-2">
+        <p>On a rencontré un pépin en cherchant la page que tu as demandé&nbsp;! N'hésites pas à <a href="{% url 'contact' %}">nous signaler 
         tout ça</a> si tu penses qu'il y a un bug dans la compote.</p>
-        <div style="text-align: center"><img src="{% static 'images/pommes.svg' %}" style="width: 800px; margin: auto" /></div>
+        <div class="image"><img src="{% static 'images/pommes.svg' %}" alt="quelques pommes et leur pépins" /></div>
-
+    </div>
     </article>