diff --git a/test/Hiking_legend_FR.html b/test/Hiking_legend_FR.html
index 6cffa31..d002766 100644
--- a/test/Hiking_legend_FR.html
+++ b/test/Hiking_legend_FR.html
@@ -35,39 +35,39 @@ <h4>Chemin/Chemin agricole/piste forestière type IGN (<code>highway=track</code
           <td rowspan="2" colspan="1" align="center">Grades 1 et 2</td>
           <td colspan="2" align="center">Normal</td>
           <td colspan="2" align="center">
-            <span style="display: inline-block; height: 1.2em; width: 80%;">
-              <svg width="100%" height="70%" version="1.1">
-                <line x1="0%" x2="100%" y1="0%" y2="0%" stroke-linecap="butt" stroke-dasharray="20,8" stroke="black" stroke-width="60%" />
-                <rect x="0%" y="20%" width="100%" height="60%" fill="#FFFFFF" />
+            <span style="display: flex; align-items: center; width: 80%;">
+              <svg height="20" width="100%">
+                <line x1="0" y1="50%" x2="100%" y2="50%" stroke-dasharray="20,8" style="stroke:black;stroke-width:13" />
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:white;stroke-width:8" />
               </svg>
             </span>
           </td>
         </tr>
         <td colspan="2" align="center">Accès: « <strong>non ou privé</strong> »</td>
         <td colspan="2" align="center">
-          <span style="display: inline-block; height: 1.2em; width: 80%;">
-            <svg width="100%" height="70%" version="1.1">
-              <line x1="0%" x2="100%" y1="0%" y2="0%" stroke-linecap="butt" stroke-dasharray="20,8" stroke="#dd0e0e" stroke-width="60%" />
-              <rect x="0%" y="20%" width="100%" height="60%" fill="#FFFFFF" />
-            </svg>
-          </span>
+          <span style="display: flex; align-items: center; width: 80%;">
+              <svg height="20" width="100%">
+                <line x1="0" y1="50%" x2="100%" y2="50%" stroke-dasharray="20,8" style="stroke:#dd0e0e;stroke-width:13" />
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:white;stroke-width:8" />
+              </svg>
+            </span>
         </td>
         </tr>
         <tr>
           <td rowspan="2" colspan="1" align="center">Grades 3, 4 et 5</td>
           <td colspan="2" align="center">Normal</td>
           <td colspan="2" align="center">
-            <span style="display: inline-block; height: 1em; width: 80%;">
-              <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" solid stroke="black" stroke-width="6.5px" />
+            <span style="display: flex; align-items: center; width: 80%;">
+              <svg height="20" width="100%">
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:black;stroke-width:6.5" />
               </svg>
           </td>
         <tr align="center">
           <td colspan="2">Accès: « <strong>non ou privé</strong> »</td>
           <td colspan="2" align="center">
-            <span style="display: inline-block; height: 1em; width: 80%;">
-              <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" solid stroke="#dd0e0e" stroke-width="6.5px" />
+            <span style="display: flex; align-items: center; width: 80%;">
+              <svg height="20" width="100%">
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:#dd0e0e;stroke-width:6.5" />
               </svg>
             </span>
           </td>
@@ -82,20 +82,20 @@ <h4 style="display: flex; align-items: center;" id="othertrack">&nbsp;<img src="
           <td rowspan="2" colspan="1" align="center">Grades 1</td>
           <td colspan="2" align="center">Normal</td>
           <td colspan="2" align="center">
-            <span style="display: inline-block; height: 1.2em; width: 80%;">
-              <svg width="100%" height="70%" version="1.1">
-                <line x1="0%" x2="100%" y1="0%" y2="0%" stroke-linecap="butt" stroke-dasharray="20,8" stroke="black" stroke-width="60%" />
-                <rect x="0%" y="20%" width="100%" height="60%" fill="#FFFFFF" />
+            <span style="display: flex; align-items: center; width: 80%;">
+              <svg height="20" width="100%">
+                <line x1="0" y1="50%" x2="100%" y2="50%" stroke-dasharray="20,8" style="stroke:black;stroke-width:13" />
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:white;stroke-width:8" />
               </svg>
             </span>
           </td>
         </tr>
         <td colspan="2" align="center">Accès: « <strong>non ou privé</strong> »</td>
         <td colspan="2" align="center">
-          <span style="display: inline-block; height: 1.2em; width: 80%;">
-            <svg width="100%" height="70%" version="1.1">
-              <line x1="0%" x2="100%" y1="0%" y2="0%" stroke-linecap="butt" stroke-dasharray="20,8" stroke="#dd0e0e" stroke-width="60%" />
-              <rect x="0%" y="20%" width="100%" height="60%" fill="#FFFFFF" />
+          <span style="display: flex; align-items: center; width: 80%;">
+            <svg height="20" width="100%">
+              <line x1="0" y1="50%" x2="100%" y2="50%" stroke-dasharray="20,8" style="stroke:#dd0e0e;stroke-width:13" />
+              <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:white;stroke-width:8" />
             </svg>
           </span>
         </td>
@@ -104,20 +104,20 @@ <h4 style="display: flex; align-items: center;" id="othertrack">&nbsp;<img src="
           <td rowspan="2" colspan="1" align="center">Grades 2</td>
           <td colspan="2" align="center">Normal</td>
           <td colspan="2" align="center">
-            <span style="display: inline-block; height: 1.2em; width: 80%;">
-              <svg width="100%" height="70%" version="1.1">
-                <line x1="0%" x2="100%" y1="0%" y2="0%" stroke-linecap="butt" stroke-dasharray="20,8" stroke="black" stroke-width="60%" />
-                <rect x="0%" y="20%" width="100%" height="60%" fill="#dddddd" />
+            <span style="display: flex; align-items: center; width: 80%;">
+              <svg height="20" width="100%">
+                <line x1="0" y1="50%" x2="100%" y2="50%" stroke-dasharray="20,8" style="stroke:black;stroke-width:13" />
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:#d0d0d0;stroke-width:8" />
               </svg>
             </span>
           </td>
         </tr>
         <td colspan="2" align="center">Accès: « <strong>non ou privé</strong> »</td>
         <td colspan="2" align="center">
-          <span style="display: inline-block; height: 1.2em; width: 80%;">
-            <svg width="100%" height="70%" version="1.1">
-              <line x1="0%" x2="100%" y1="0%" y2="0%" stroke-linecap="butt" stroke-dasharray="20,8" stroke="#dd0e0e" stroke-width="60%" />
-              <rect x="0%" y="20%" width="100%" height="60%" fill="#dddddd" />
+          <span style="display: flex; align-items: center; width: 80%;">
+            <svg height="20" width="100%">
+              <line x1="0" y1="50%" x2="100%" y2="50%" stroke-dasharray="20,8" style="stroke:#dd0e0e;stroke-width:13" />
+              <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:#d0d0d0;stroke-width:8" />
             </svg>
           </span>
         </td>
@@ -126,20 +126,20 @@ <h4 style="display: flex; align-items: center;" id="othertrack">&nbsp;<img src="
           <td rowspan="2" colspan="1" align="center">Grades 3, 4 et 5</td>
           <td colspan="2" align="center">Normal</td>
           <td colspan="2" align="center">
-            <span style="display: inline-block; height: 1.2em; width: 80%;">
-              <svg width="100%" height="70%" version="1.1">
-                <line x1="0%" x2="100%" y1="0%" y2="0%" stroke-linecap="butt" stroke-dasharray="20,8" stroke="black" stroke-width="60%" />
-                <rect x="0%" y="20%" width="100%" height="60%" fill="#d0c0af" />
+            <span style="display: flex; align-items: center; width: 80%;">
+              <svg height="20" width="100%">
+                <line x1="0" y1="50%" x2="100%" y2="50%" stroke-dasharray="20,8" style="stroke:black;stroke-width:13" />
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:#d0c0af;stroke-width:8" />
               </svg>
             </span>
           </td>
         </tr>
         <td colspan="2" align="center">Accès: « <strong>non ou privé</strong> »</td>
         <td colspan="2" align="center">
-          <span style="display: inline-block; height: 1.2em; width: 80%;">
-            <svg width="100%" height="70%" version="1.1">
-              <line x1="0%" x2="100%" y1="0%" y2="0%" stroke-linecap="butt" stroke-dasharray="20,8" stroke="#dd0e0e" stroke-width="60%" />
-              <rect x="0%" y="20%" width="100%" height="60%" fill="#d0c0af" />
+          <span style="display: flex; align-items: center; width: 80%;">
+            <svg height="20" width="100%">
+              <line x1="0" y1="50%" x2="100%" y2="50%" stroke-dasharray="20,8" style="stroke:#dd0e0e;stroke-width:13" />
+              <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:#d0c0af;stroke-width:8" />
             </svg>
           </span>
         </td>
@@ -154,7 +154,7 @@ <h4>Sentiers type IGN (<code>highway=path</code>)</h4>
           <td colspan="2" align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3" />
               </svg>
             </span>
           </td>
@@ -164,7 +164,7 @@ <h4>Sentiers type IGN (<code>highway=path</code>)</h4>
           <td colspan="2" align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#dd0e0e" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#dd0e0e" stroke-width="3" />
               </svg>
             </span>
           </td>
@@ -191,28 +191,28 @@ <h4>Difficulté et visibilité des sentiers (<code>sac_scale=* & trail_visibilit
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#7d5c46" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#7d5c46" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#7d5c46" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#7d5c46" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#7d5c46" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#7d5c46" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#7d5c46" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#7d5c46" stroke-width="3" />
               </svg>
             </span>
           </td>
@@ -222,28 +222,28 @@ <h4>Difficulté et visibilité des sentiers (<code>sac_scale=* & trail_visibilit
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#2d14fd" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#2d14fd" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#2d14fd" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#2d14fd" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#2d14fd" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#2d14fd" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#2d14fd" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#2d14fd" stroke-width="3" />
               </svg>
             </span>
           </td>
@@ -253,28 +253,28 @@ <h4>Difficulté et visibilité des sentiers (<code>sac_scale=* & trail_visibilit
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#FF00F5" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#FF00F5" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#FF00F5" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#FF00F5" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#FF00F5" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#FF00F5" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#FF00F5" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#FF00F5" stroke-width="3" />
               </svg>
             </span>
           </td>
@@ -284,28 +284,28 @@ <h4>Difficulté et visibilité des sentiers (<code>sac_scale=* & trail_visibilit
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#ac19ff" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#ac19ff" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#ac19ff" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#ac19ff" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#ac19ff" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#ac19ff" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#ac19ff" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#ac19ff" stroke-width="3" />
               </svg>
             </span>
           </td>
@@ -315,21 +315,21 @@ <h4>Difficulté et visibilité des sentiers (<code>sac_scale=* & trail_visibilit
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#00cdcd" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#00cdcd" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#00cdcd" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#00cdcd" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#00cdcd" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#00cdcd" stroke-width="3" />
               </svg>
             </span>
           </td>
@@ -337,7 +337,7 @@ <h4>Difficulté et visibilité des sentiers (<code>sac_scale=* & trail_visibilit
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#00cdcd" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#00cdcd" stroke-width="3" />
               </svg>
             </span>
           </td>
@@ -347,28 +347,28 @@ <h4>Difficulté et visibilité des sentiers (<code>sac_scale=* & trail_visibilit
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#FF7F00" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#FF7F00" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#FF7F00" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#FF7F00" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#FF7F00" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#FF7F00" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#FF7F00" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#FF7F00" stroke-width="3" />
               </svg>
             </span>
         </tr>
@@ -379,28 +379,28 @@ <h4>Difficulté et visibilité des sentiers (<code>sac_scale=* & trail_visibilit
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#7d5c46" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#7d5c46" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#7d5c46" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#7d5c46" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#7d5c46" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#7d5c46" stroke-width="3" />
               </svg>
             </span>
           </td>
           <td align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
               <svg width="100%" height="100%" version="1.1">
-                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#7d5c46" stroke-width="3px" />
+                <line x1="0%" x2="100%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#7d5c46" stroke-width="3" />
               </svg>
             </span>
           </td>
@@ -536,10 +536,10 @@ <h4>Itinéraires</h4>
             International / National
           </td>
           <td colspan="3" align="center">
-            <span style="display: inline-block; height: 1.2em; width: 80%;">
-              <svg width="100%" height="70%" version="1.1">
-                <rect x="0%" y="20%" width="100%" height="60%" fill="red" />
-                <line x1="2%" x2="100%" y1="50%" y2="50%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3px" />
+            <span style="display: flex; align-items: center; width: 80%;">
+              <svg height="20" width="100%">
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:red;stroke-width:11" />
+                <line x1="2%" x2="100%" y1="50%" y2="50%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3" />
               </svg>
             </span>
           </td>
@@ -549,10 +549,10 @@ <h4>Itinéraires</h4>
             Régional
           </td>
           <td colspan="3" align="center">
-            <span style="display: inline-block; height: 1.2em; width: 80%;">
-              <svg width="100%" height="70%" version="1.1">
-                <rect x="0%" y="20%" width="100%" height="60%" fill="red" />
-                <line x1="2%" x2="100%" y1="50%" y2="50%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3px" />
+            <span style="display: flex; align-items: center; width: 80%;">
+              <svg height="20" width="100%">
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:red;stroke-width:11" />
+                <line x1="2%" x2="100%" y1="50%" y2="50%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3" />
               </svg>
             </span>
           </td>
@@ -562,10 +562,10 @@ <h4>Itinéraires</h4>
             local
           </td>
           <td colspan="3" align="center">
-            <span style="display: inline-block; height: 1.2em; width: 80%;">
-              <svg width="100%" height="70%" version="1.1">
-                <rect x="0%" y="20%" width="100%" height="60%" fill="yellow" />
-                <line x1="2%" x2="100%" y1="50%" y2="50%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3px" />
+            <span style="display: flex; align-items: center; width: 80%;">
+              <svg height="20" width="100%">
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:yellow;stroke-width:11" />
+                <line x1="2%" x2="100%" y1="50%" y2="50%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3" />
               </svg>
             </span>
           </td>
@@ -582,10 +582,10 @@ <h4>Itinéraires</h4>
             International
           </td>
           <td colspan="3" align="center">
-            <span style="display: inline-block; height: 1.4em; width: 80%;">
-              <svg width="100%" height="70%" version="1.1">
-                <rect x="0%" y="20%" width="100%" height="60%" fill="blue" />
-                <line x1="2%" x2="100%" y1="50%" y2="50%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3px" />
+            <span style="display: flex; align-items: center; width: 80%;">
+              <svg height="20" width="100%">
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:blue;stroke-width:15" />
+                <line x1="2%" x2="100%" y1="50%" y2="50%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3" />
               </svg>
             </span>
           </td>
@@ -595,10 +595,10 @@ <h4>Itinéraires</h4>
             National
           </td>
           <td colspan="3" align="center">
-            <span style="display: inline-block; height: 1.2em; width: 80%;">
-              <svg width="100%" height="70%" version="1.1">
-                <rect x="0%" y="20%" width="100%" height="60%" fill="red" />
-                <line x1="2%" x2="100%" y1="50%" y2="50%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3px" />
+            <span style="display: flex; align-items: center; width: 80%;">
+              <svg height="20" width="100%">
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:red;stroke-width:12" />
+                <line x1="2%" x2="100%" y1="50%" y2="50%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3" />
               </svg>
             </span>
           </td>
@@ -609,9 +609,9 @@ <h4>Itinéraires</h4>
           </td>
           <td colspan="3" align="center">
             <span style="display: inline-block; height: 1em; width: 80%;">
-              <svg width="100%" height="70%" version="1.1">
-                <rect x="0%" y="20%" width="100%" height="60%" fill="orange" />
-                <line x1="2%" x2="100%" y1="50%" y2="50%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3px" />
+              <svg height="20" width="100%">
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:orange;stroke-width:9" />
+                <line x1="2%" x2="100%" y1="50%" y2="50%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3" />
               </svg>
             </span>
           </td>
@@ -622,9 +622,9 @@ <h4>Itinéraires</h4>
           </td>
           <td colspan="3" align="center">
             <span style="display: inline-block; height: 0.8em; width: 80%;">
-              <svg width="100%" height="70%" version="1.1">
-                <rect x="0%" y="20%" width="100%" height="60%" fill="yellow" />
-                <line x1="2%" x2="100%" y1="50%" y2="50%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3px" />
+              <svg height="20" width="100%">
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:yellow;stroke-width:6" />
+                <line x1="2%" x2="100%" y1="50%" y2="50%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3" />
               </svg>
             </span>
           </td>
@@ -634,13 +634,13 @@ <h4>Itinéraires</h4>
             combinée
           </td>
           <td colspan="3" align="center">
-            <span style="display: inline-block; height: 1.4em; width: 80%;">
-              <svg width="100%" height="70%" version="1.1">
-                <rect x="0%" y="0%" width="100%" height="100%" fill="blue" />
-                <rect x="0%" y="15%" width="100%" height="75%" fill="red" />
-                <rect x="0%" y="22%" width="100%" height="55%" fill="orange" />
-                <rect x="0%" y="34%" width="100%" height="30%" fill="yellow" />
-                <line x1="2%" x2="100%" y1="50%" y2="50%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3px" />
+            <span style="display: flex; align-items: center; width: 80%;">
+              <svg height="20" width="100%">
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:blue;stroke-width:15" />
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:red;stroke-width:12" />
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:orange;stroke-width:9" />
+                <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:yellow;stroke-width:6" />
+                <line x1="2%" x2="100%" y1="50%" y2="50%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="3" />
               </svg>
             </span>
           </td>