Improved dl, dt and dd visual representation

themes/default/assets/css/typography.css

@@ -97,22 +97,46 @@ article aside {
     }
 
     dl {
+        display: grid;
+        grid-template-columns: 40% 60%;
+        row-gap: 0;
+        border: 1px solid #444;
+        border-radius: 4px;
+        overflow: hidden;
         margin: 2em 0;
-        padding: 0;
     }
 
+    /* Base commune */
+    dt,
+    dd {
+        padding: 0.6em 1em;
+        border-bottom: 1px solid #444;
+    }
+
+    /* Colonne de gauche */
     dt {
         font-weight: bold;
         color: #fff;
-        margin-top: 1.5em;
+        border-right: 1px solid #444;
     }
 
+    /* Colonne de droite */
     dd {
-        margin-left: 1em;
         color: #ccc;
         line-height: 1.6;
     }
 
+    /* Effet zébré sur les paires dt/dd */
+    dl dt:nth-of-type(odd),
+    dl dd:nth-of-type(odd) {
+        background-color: #222;
+    }
+
+    dl dt:nth-of-type(even),
+    dl dd:nth-of-type(even) {
+        background-color: #1a1a1a;
+    }
+
     del {
         display: inline;
         text-decoration: line-through;