integrated icons

src/assets/common.scss

@@ -7,4 +7,32 @@ $pad_btn: 0.5em;
   // background-color: $btns_back;
   cursor: pointer;
   line-height: 1.5;
+}
+
+span.icon{
+  background-repeat: no-repeat;
+  background-position: middle center;
+  background-size: contain;
+  display: inline-block;
+  vertical-align:bottom;
+  width: 2em;
+  height:2em;
+  &.terraindevie{
+    background-image: url('./icons/terraindevie.svg');
+  }
+  &.proximite{
+    background-image: url('./icons/proximite.svg');
+  }
+  &.superposition{
+    background-image: url('./icons/superposition.svg');
+  }
+  &.puissancedagir{
+    background-image: url('./icons/puissancedagir.svg');
+  }
+  &.action{
+    background-image: url('./icons/action.svg');
+  }
+  &.doleancer{
+    background-image: url('./icons/doleancer.svg');
+  }
 }

src/assets/icons/action.svg

@@ -0,0 +1,151 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   version="1.1"
+   id="svg6251"
+   sodipodi:docname="action.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs6255" />
+  <sodipodi:namedview
+     id="namedview6253"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="20.296452"
+     inkscape:cx="16.086555"
+     inkscape:cy="21.949649"
+     inkscape:window-width="1920"
+     inkscape:window-height="1026"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6251" />
+  <g
+     id="g7491"
+     transform="translate(0.00940843)">
+    <circle
+       class="circle-fill"
+       fill="#000000"
+       cx="17.5"
+       cy="17.5"
+       r="2.5"
+       id="circle6224"
+       style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+    <line
+       class="thin"
+       x1="17.5"
+       y1="11"
+       x2="17.5"
+       y2="24"
+       id="line6226"
+       style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+    <line
+       class="thin"
+       x1="22.096193"
+       y1="12.903806"
+       x2="12.903806"
+       y2="22.096193"
+       id="line6228"
+       style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+    <line
+       class="thin"
+       x1="24"
+       y1="17.5"
+       x2="11"
+       y2="17.5"
+       id="line6230"
+       style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+    <line
+       class="thin"
+       x1="22.096193"
+       y1="22.096193"
+       x2="12.903806"
+       y2="12.903806"
+       id="line6232"
+       style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+  <line
+     class="thick"
+     x1="0.023232711"
+     y1="17.5"
+     x2="5.023232"
+     y2="17.5"
+     transform-origin="center"
+     id="line6234"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <line
+     class="thick"
+     x1="17.46936"
+     y1="30.018717"
+     x2="17.46936"
+     y2="35.018715"
+     transform-origin="center"
+     id="line6238"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <line
+     class="thick"
+     x1="34.979893"
+     y1="17.5"
+     x2="29.979893"
+     y2="17.5"
+     transform-origin="center"
+     id="line6242"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <line
+     class="thick"
+     x1="17.46936"
+     y1="5.0401611"
+     x2="17.46936"
+     y2="0.040162195"
+     transform-origin="center"
+     id="line6246"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <line
+     class="thick"
+     x1="8.6381073"
+     y1="26.360691"
+     x2="5.1025743"
+     y2="29.896225"
+     transform-origin="center"
+     id="line6238-7"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <line
+     class="thick"
+     x1="26.300613"
+     y1="8.6981859"
+     x2="29.836145"
+     y2="5.1626525"
+     transform-origin="center"
+     id="line6246-5"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <line
+     class="thick"
+     x1="8.6381073"
+     y1="8.6981859"
+     x2="5.1025734"
+     y2="5.162653"
+     transform-origin="center"
+     id="line6238-7-3"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <line
+     class="thick"
+     x1="26.300613"
+     y1="26.360693"
+     x2="29.836145"
+     y2="29.896225"
+     transform-origin="center"
+     id="line6246-5-5"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+</svg>

src/assets/icons/doleancer.svg

@@ -0,0 +1,139 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   version="1.1"
+   id="svg5344"
+   sodipodi:docname="doleance.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs5348" />
+  <sodipodi:namedview
+     id="namedview5346"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="25.8"
+     inkscape:cx="14.903101"
+     inkscape:cy="17.53876"
+     inkscape:window-width="1920"
+     inkscape:window-height="1026"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg5344" />
+  <circle
+     class="thick"
+     fill="#ffffff"
+     cx="17.5"
+     cy="17.5"
+     r="17"
+     id="circle5315"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <line
+     class="thin"
+     x1="17.5"
+     y1="0"
+     x2="17.5"
+     y2="35"
+     id="line5317"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <line
+     class="thin"
+     x1="29.874369"
+     y1="5.1256313"
+     x2="5.1256313"
+     y2="29.874369"
+     id="line5319"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <line
+     class="thin"
+     x1="35"
+     y1="17.5"
+     x2="0"
+     y2="17.5"
+     id="line5321"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <line
+     class="thin"
+     x1="29.874369"
+     y1="29.874369"
+     x2="5.1256313"
+     y2="5.1256313"
+     id="line5323"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <circle
+     class="thin"
+     fill="#ffffff"
+     cx="17.5"
+     cy="17.5"
+     r="8"
+     id="circle5325"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     class="thin"
+     fill="none"
+     d="m 3.5,22.5 2,-3 2,3"
+     transform-origin="center"
+     id="path5327"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     class="thin"
+     fill="none"
+     d="m -13.435029,18.384776 3.5355343,-0.707106 -0.7071063,3.535534"
+     transform-origin="center"
+     id="path5329"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     class="thin"
+     fill="none"
+     d="m -22.5,3.5 3,2 -3,2"
+     transform-origin="center"
+     id="path5331"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     class="thin"
+     fill="none"
+     d="m -18.384776,-13.435029 0.707106,3.535534 -3.535534,-0.707107"
+     transform-origin="center"
+     id="path5333"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     class="thin"
+     fill="none"
+     d="m -3.5,-22.5 -2,3 -2,-3"
+     transform-origin="center"
+     id="path5335"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     class="thin"
+     fill="none"
+     d="m 13.435029,-18.384776 -3.535534,0.707107 0.707107,-3.535534"
+     transform-origin="center"
+     id="path5337"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     class="thin"
+     fill="none"
+     d="m 22.5,-3.5 -3,-2 3,-2"
+     transform-origin="center"
+     id="path5339"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     class="thin"
+     fill="none"
+     d="M 31.841686,13.177822 29.81831,16.162106 27.841808,13.146572"
+     transform-origin="center"
+     id="path5341"
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+</svg>

src/assets/icons/proximite.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   version="1.1"
+   id="svg4457"
+   sodipodi:docname="proximite.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs4461" />
+  <sodipodi:namedview
+     id="namedview4459"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="25.8"
+     inkscape:cx="14.903101"
+     inkscape:cy="17.53876"
+     inkscape:window-width="1920"
+     inkscape:window-height="1026"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4457" />
+  <g
+     id="picto"
+     style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none">
+    <path
+       class="thick"
+       fill="white"
+       d="M 4, 4            L 13, 1            L 19, 5            L 28, 3            L 34, 12            L 29, 22            L 27, 29            L 21, 34            L 14, 31            L 12, 23            L 4, 17            L 1, 12            Z"
+       id="path4446"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <circle
+       class="circle-fill"
+       fill="black"
+       cx="17.5"
+       cy="17.5"
+       r="2.5"
+       id="circle4448"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <path
+       class="thin"
+       fill="none"
+       d="M 7, 7            L 11, 5            L 15, 7            L 12, 12            L 12, 15            L 9, 16            L 5, 12            Z"
+       id="path4450"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <path
+       class="thin"
+       fill="none"
+       d="M 20, 11            L 22, 9            L 24, 9            L 27, 7            L 29, 11            L 26, 15            L 24, 16            L 21, 14            Z"
+       id="path4452"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <path
+       class="thin"
+       fill="none"
+       d="M 18, 23            L 22, 22            L 24, 25            L 22, 28            L 20, 29            L 17, 27            Z"
+       id="path4454"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+  </g>
+</svg>

src/assets/icons/puissancedagir.svg

@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   version="1.1"
+   id="svg3586"
+   sodipodi:docname="puissance-d-agir.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs3590" />
+  <sodipodi:namedview
+     id="namedview3588"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="25.8"
+     inkscape:cx="14.903101"
+     inkscape:cy="17.53876"
+     inkscape:window-width="1920"
+     inkscape:window-height="1026"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3586" />
+  <g
+     id="picto"
+     style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none">
+    <circle
+       class="thick"
+       fill="white"
+       cx="17.5"
+       cy="17.5"
+       r="17"
+       id="circle3571"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <circle
+       class="thin"
+       fill="none"
+       cx="17.5"
+       cy="17.5"
+       r="9.3"
+       id="circle3573"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <circle
+       class="circle-fill"
+       fill="black"
+       cx="17.5"
+       cy="17.5"
+       r="2.5"
+       id="circle3575"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <line
+       class="thin"
+       x1="17.5"
+       y1="0"
+       x2="17.5"
+       y2="35"
+       id="line3577"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <line
+       class="thin"
+       x1="17.5"
+       y1="0"
+       x2="17.5"
+       y2="35"
+       transform="rotate(45, 17.5, 17.5)"
+       id="line3579"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <line
+       class="thin"
+       x1="17.5"
+       y1="0"
+       x2="17.5"
+       y2="35"
+       transform="rotate(90, 17.5, 17.5)"
+       id="line3581"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <line
+       class="thin"
+       x1="17.5"
+       y1="0"
+       x2="17.5"
+       y2="35"
+       transform="rotate(135, 17.5, 17.5)"
+       id="line3583"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+  </g>
+</svg>

src/assets/icons/superposition.svg

@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   version="1.1"
+   id="svg1973"
+   sodipodi:docname="superposition.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1977" />
+  <sodipodi:namedview
+     id="namedview1975"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="25.8"
+     inkscape:cx="14.903101"
+     inkscape:cy="17.53876"
+     inkscape:window-width="1920"
+     inkscape:window-height="1026"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1973" />
+  <g
+     id="picto"
+     style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none">
+    <path
+       class="thick"
+       d="M 12, 13            L 21, 13            L 31, 22            L 22, 32            L 8, 26            Z"
+       id="path1952"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <path
+       class="thick"
+       d="M 1, 11            L 9, 2            L 25, 9            L 21, 23            L 3, 20            Z"
+       id="path1954"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <path
+       class="thick"
+       d="M 21, 2            L 30, 6            L 33, 13            L 25, 24            L 18, 27            L 7, 12            Z"
+       id="path1956"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <path
+       fill="white"
+       d="M 12, 13            L 21, 13            L 31, 22            L 22, 32            L 8, 26            Z"
+       id="path1958"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <path
+       fill="white"
+       d="M 1, 11            L 9, 2            L 25, 9            L 21, 23            L 3, 20            Z"
+       id="path1960"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <path
+       fill="white"
+       d="M 21, 2            L 30, 6            L 33, 13            L 25, 24            L 18, 27            L 7, 12            Z"
+       id="path1962"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <circle
+       class="circle-fill"
+       fill="black"
+       cx="17.5"
+       cy="17.5"
+       r="2.5"
+       id="circle1964"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <path
+       class="thin"
+       fill="none"
+       d="M 12, 13            L 21, 13            L 31, 22            L 22, 32            L 8, 26            Z"
+       id="path1966"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <path
+       class="thin"
+       fill="none"
+       d="M 1, 11            L 9, 2            L 25, 9            L 21, 23            L 3, 20            Z"
+       id="path1968"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <path
+       class="thin"
+       fill="none"
+       d="M 21, 2            L 30, 6            L 33, 13            L 25, 24            L 18, 27            L 7, 12            Z"
+       id="path1970"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+  </g>
+</svg>

src/assets/icons/terraindevie.svg

@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   version="1.1"
+   id="svg13"
+   sodipodi:docname="terrain-de-vie.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs17" />
+  <sodipodi:namedview
+     id="namedview15"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="1.7479522"
+     inkscape:cx="-20.881578"
+     inkscape:cy="62.644733"
+     inkscape:window-width="1920"
+     inkscape:window-height="1026"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg13" />
+  <g
+     id="picto"
+     style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none">
+    <circle
+       class="thick"
+       fill="white"
+       cx="17.5"
+       cy="17.5"
+       r="17"
+       id="circle2"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <line
+       class="thin"
+       x1="17.5"
+       y1="0"
+       x2="17.5"
+       y2="35"
+       id="line4"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <line
+       class="thin"
+       x1="17.5"
+       y1="0"
+       x2="17.5"
+       y2="35"
+       transform="rotate(90, 17.5, 17.5)"
+       id="line6"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <path
+       class="thick"
+       fill="white"
+       d="M 9, 12            L 21, 8            L 27, 14            L 27, 21            L 19, 26            L 12, 27            L 6, 21            Z"
+       transform="translate(0 0.5)"
+       id="path8"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+    <path
+       class="thin"
+       fill="none"
+       d="M 15, 20.5             L 17.5, 17.5             L 20, 20.5"
+       transform-origin="center"
+       transform="translate(0 -15.75)"
+       id="path10"
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+  </g>
+</svg>

src/assets/main.scss

@@ -71,8 +71,11 @@ body{
       li{
         list-style: none;
         pointer-events: all;
+        margin-right: 1em;
         a{
           @include btn();
+          display: block;
+          line-height: 2.1;
         }
       }
     }
@@ -147,7 +150,7 @@ body{
           li{
             list-style:none;
             padding:0;
-            margin:0;
+            margin:0 1em 0 0;
           }
         }
       }

src/components/ConcernementMapPopup.vue

@@ -101,8 +101,11 @@ export default {
       <section v-if="infos.type === 'concernement'" class="concernement-map-popup">
         <h1>{{ concernement.title }}</h1>
         <ul class="icons">
-          <li v-if="concernement.has_agissantes" ><span class="icon action">Action</span></li>
-          <li v-if="concernement.has_puissancedagir" ><span class="icon puissanceagir">Puissance d'agir</span></li>
+          <li v-if="concernement.has_puissancedagir" ><span class="icon puissancedagir"></span></li>
+          <li v-if="concernement.has_proximite" ><span class="icon proximite"></span></li>
+          <li v-if="concernement.has_superposition" ><span class="icon superposition"></span></li>
+          <li v-if="concernement.has_agissantes" ><span class="icon action"></span></li>
+          <li v-if="concernement.has_doleance" ><span class="icon puissancedagir"></span></li>
         </ul>
       </section>
       <section v-if="infos.type === 'entite'" class="entite-map-popup">

src/components/MapConcernements.vue

@@ -95,8 +95,8 @@ export default {
         Matter.Bodies.rectangle(-wall_w/2,         canvas_h/2,        wall_w,   canvas_h, { isStatic: true }),   // left
         Matter.Bodies.rectangle(canvas_w+wall_w/2, canvas_h/2,        wall_w,   canvas_h, { isStatic: true }),   // right
         // make the items never goes under menus
-        Matter.Bodies.rectangle(550, canvas_h-15, 900, 30, { isStatic: true }),      // menu bottom
-        Matter.Bodies.rectangle(550,          15, 900, 30, { isStatic: true })       // menu top
+        Matter.Bodies.rectangle(550,          25, 900, 50, { isStatic: true }),  // menu top
+        Matter.Bodies.rectangle(550, canvas_h-15, 900, 30, { isStatic: true })   // menu bottom
     ]);
 
     // add mouse control
@@ -277,22 +277,22 @@ export default {
   <nav id="map-nav">
     <ul>
       <li>
-        <a href="#terraindevie" @click="setMapMode('terraindevie')">terrain de vie</a>
+        <a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span>  terrain de vie</a>
       </li>
-      <!-- <li>
-        <a href="#proximite" @click="setMapMode('proximite')">proximité</a>
-      </li> -->
-      <!-- <li>
-        <a href="#superposition" @click="setMapMode('superposition')">superposition</a>
-      </li> -->
       <li>
-        <a href="#puissancedagir" @click="setMapMode('puissancedagir')">puissance d'agir</a>
+        <a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span>  proximité</a>
       </li>
       <li>
-        <a href="#action" @click="setMapMode('action')">action</a>
+        <a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span>  superposition</a>
       </li>
       <li>
-        <a href="#doleancer" @click="setMapMode('doleancer')">doléancer</a>
+        <a href="#puissancedagir" @click="setMapMode('puissancedagir')"><span class="icon puissancedagir"></span>  puissance d'agir</a>
+      </li>
+      <li>
+        <a href="#action" @click="setMapMode('action')"><span class="icon action"></span>  action</a>
+      </li>
+      <li>
+        <a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span>  doléancer</a>
       </li>
     </ul>
   </nav>