From 59e40085418f6b6b78bd99e36ab68e944bd22272 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Fri, 7 Nov 2025 16:12:38 +0100
Subject: [PATCH] /lesprojets pictos sur nodesite dans /lesprojets

---
 .../dist/assets/css/bundle.css                | 140 ++++++++++++++++-
 .../dist/assets/img/pictos_sites/caen.svg     |  42 +++++
 .../dist/assets/img/pictos_sites/colmar.svg   |  42 +++++
 .../img/pictos_sites/corbeil-essonnes.svg     |  42 +++++
 .../assets/img/pictos_sites/coulommiers.svg   |  42 +++++
 .../dist/assets/img/pictos_sites/le-mans.svg  |  42 +++++
 .../dist/assets/img/pictos_sites/lodeve.svg   |  42 +++++
 .../dist/assets/img/pictos_sites/manosque.svg |  42 +++++
 .../assets/img/pictos_sites/marseille.svg     |  42 +++++
 .../dist/assets/img/pictos_sites/pessac.svg   |  42 +++++
 .../dist/assets/img/pictos_sites/sedan.svg    |  42 +++++
 .../src/assets/scss/pages/lesprojets.scss     | 145 +++++++++++++++++-
 12 files changed, 689 insertions(+), 16 deletions(-)
 create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/caen.svg
 create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/colmar.svg
 create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/corbeil-essonnes.svg
 create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/coulommiers.svg
 create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/le-mans.svg
 create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/lodeve.svg
 create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/manosque.svg
 create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/marseille.svg
 create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/pessac.svg
 create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/sedan.svg

diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
index 5d3366e..26a479f 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
@@ -4857,16 +4857,137 @@ main {
   width: 18%;
   margin-bottom: 2rem;
   font-size: 0.4rem;
+  position: relative;
 }
-@media (max-width: 810px) {
-  #lesprojets .content_container .views-element-container .views-row .views-field-group {
-    width: 45%;
-  }
+#lesprojets .content_container .views-element-container .views-row .views-field-group.marseille::before {
+  content: "";
+  position: absolute;
+  top: -1rem;
+  left: -1rem;
+  width: 3rem;
+  height: 3rem;
+  background-image: url("../img/pictos_sites/marseille.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  pointer-events: none;
 }
-@media (max-width: 550px) {
-  #lesprojets .content_container .views-element-container .views-row .views-field-group {
-    font-size: 0.7rem;
-  }
+#lesprojets .content_container .views-element-container .views-row .views-field-group.sedan::before {
+  content: "";
+  position: absolute;
+  top: -1rem;
+  left: -1rem;
+  width: 3rem;
+  height: 3rem;
+  background-image: url("../img/pictos_sites/sedan.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  pointer-events: none;
+}
+#lesprojets .content_container .views-element-container .views-row .views-field-group.lodève::before {
+  content: "";
+  position: absolute;
+  top: -1rem;
+  left: -1rem;
+  width: 3rem;
+  height: 3rem;
+  background-image: url("../img/pictos_sites/lodeve.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  pointer-events: none;
+}
+#lesprojets .content_container .views-element-container .views-row .views-field-group.colmar::before {
+  content: "";
+  position: absolute;
+  top: -1rem;
+  left: -1rem;
+  width: 3rem;
+  height: 3rem;
+  background-image: url("../img/pictos_sites/colmar.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  pointer-events: none;
+}
+#lesprojets .content_container .views-element-container .views-row .views-field-group.manosque::before {
+  content: "";
+  position: absolute;
+  top: -1rem;
+  left: -1rem;
+  width: 3rem;
+  height: 3rem;
+  background-image: url("../img/pictos_sites/manosque.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  pointer-events: none;
+}
+#lesprojets .content_container .views-element-container .views-row .views-field-group.pessac::before {
+  content: "";
+  position: absolute;
+  top: -1rem;
+  left: -1rem;
+  width: 3rem;
+  height: 3rem;
+  background-image: url("../img/pictos_sites/pessac.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  pointer-events: none;
+}
+#lesprojets .content_container .views-element-container .views-row .views-field-group.corbeil-essones::before {
+  content: "";
+  position: absolute;
+  top: -1rem;
+  left: -1rem;
+  width: 3rem;
+  height: 3rem;
+  background-image: url("../img/pictos_sites/corbeil-essones.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  pointer-events: none;
+}
+#lesprojets .content_container .views-element-container .views-row .views-field-group.caen::before {
+  content: "";
+  position: absolute;
+  top: -1rem;
+  left: -1rem;
+  width: 3rem;
+  height: 3rem;
+  background-image: url("../img/pictos_sites/caen.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  pointer-events: none;
+}
+#lesprojets .content_container .views-element-container .views-row .views-field-group.le-mans::before {
+  content: "";
+  position: absolute;
+  top: -1rem;
+  left: -1rem;
+  width: 3rem;
+  height: 3rem;
+  background-image: url("../img/pictos_sites/le-mans.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  pointer-events: none;
+}
+#lesprojets .content_container .views-element-container .views-row .views-field-group.coulommiers::before {
+  content: "";
+  position: absolute;
+  top: -1rem;
+  left: -1rem;
+  width: 3rem;
+  height: 3rem;
+  background-image: url("../img/pictos_sites/coulommiers.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  pointer-events: none;
 }
 #lesprojets .content_container .views-element-container .views-row .views-field-group .views-field-title h2 {
   margin: 0;
@@ -4935,6 +5056,9 @@ main {
   margin-top: 0;
   margin-bottom: 0;
 }
+#lesprojets .content_container .views-element-container .views-row .views-field-field-projets-lie div {
+  background-color: #f6f7f3;
+}
 #lesprojets .content_container .views-element-container .views-row .views-field-field-projets-lie .field-content ul {
   display: flex;
   flex-direction: row;
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/caen.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/caen.svg
new file mode 100644
index 0000000..f998d4c
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/caen.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="34.322182mm"
+   height="34.322182mm"
+   viewBox="0 0 34.322182 34.322182"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-17.898682,-11.702984)">
+    <circle
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-0"
+       cx="35.059772"
+       cy="28.864075"
+       r="17.161091" />
+    <circle
+       style="opacity:0.2;fill:#0732c2;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1"
+       cx="35.059772"
+       cy="28.864075"
+       r="17.161091" />
+    <path
+       id="path13602"
+       d="m 45.025163,37.200189 0.0762,0.97356 -1.32641,0.41656 0.30802,2.53153 0.80147,0.70757 0.61626,-1.84069 -0.0476,-2.52285 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13603"
+       d="m 33.254293,16.877539 1.74205,-0.46269 c 0,0 3.19959,4.21813 10.27592,5.5542 0,0 -0.74796,1.29195 -1.13143,3.71659 l -2.54748,3.19571 1.23106,-0.2219 0.54377,3.19684 -0.82924,0.36163 c 0,0 1.14977,2.27125 1.80411,2.76472 l -2.70295,2.80433 c 0,0 -2.96192,-2.17889 -4.52604,-1.24615 -1.42352,0.88544 -1.10398,2.57979 -1.10398,2.57979 l -4.60212,-0.40685 -4.00005,-1.29018 c 0,0 0.74532,-3.7216 0.73872,-6.53147 l 0.74641,0.86639 -0.45283,-1.39993 c -0.42044,-1.29971 -1.65826,-2.31123 -1.66694,-2.40944 -0.20126,-2.27725 -2.0903,-2.79986 -4.51211,-3.02694 l -0.65958,-1.97111 2.63593,-0.61556 3.48117,0.71109 c 0,0 -0.0887,-1.05607 -0.96859,-2.78557 l 1.10331,-0.41145 c 0,0 0.89958,1.50401 1.40557,1.43271 0.26568,-0.0374 1.30507,-1.1732 1.75003,-1.44623 0.39896,-0.24477 1.94998,-0.57229 1.99129,-0.73141 0.16034,-0.58747 0.254,-2.22712 0.254,-2.22712 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13604"
+       d="m 30.066673,21.578249 c 0,0.41023 -0.33463,0.74277 -0.74745,0.74277 -0.41281,0 -0.74745,-0.33254 -0.74745,-0.74277 0,-0.41022 0.33464,-0.74277 0.74745,-0.74277 0.41282,0 0.74745,0.33255 0.74745,0.74277 z"
+       style="fill:#f7002b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.352778" />
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/colmar.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/colmar.svg
new file mode 100644
index 0000000..b6ee7ee
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/colmar.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="34.322178mm"
+   height="34.322182mm"
+   viewBox="0 0 34.322178 34.322182"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-67.070862,-59.695038)">
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-0-6-0"
+       cx="84.231956"
+       cy="76.856125"
+       r="17.161091" />
+    <circle
+       style="opacity:0.2;fill:#0732c2;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-2-36"
+       cx="84.231956"
+       cy="76.856125"
+       r="17.161091" />
+    <path
+       id="path13602-6-1"
+       d="m 94.197348,85.192242 0.0762,0.97356 -1.32641,0.41656 0.30802,2.53153 0.80147,0.70757 0.61626,-1.84069 -0.0476,-2.52285 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13603-1-0"
+       d="m 82.426478,64.869592 1.74205,-0.46269 c 0,0 3.19959,4.21813 10.27592,5.5542 0,0 -0.74796,1.29195 -1.13143,3.71659 l -2.54748,3.19571 1.23106,-0.2219 0.54377,3.19684 -0.82924,0.36163 c 0,0 1.14977,2.27125 1.80411,2.76472 l -2.70295,2.80433 c 0,0 -2.96192,-2.17889 -4.52604,-1.24615 -1.42352,0.88544 -1.10398,2.57979 -1.10398,2.57979 l -4.60212,-0.40685 -4.00005,-1.29018 c 0,0 0.74532,-3.7216 0.73872,-6.53147 l 0.74641,0.86639 -0.45283,-1.39993 c -0.42044,-1.29971 -1.65826,-2.31123 -1.66694,-2.40944 -0.20126,-2.27725 -2.0903,-2.79986 -4.51211,-3.02694 l -0.65958,-1.97111 2.63593,-0.61556 3.48117,0.71109 c 0,0 -0.0887,-1.05607 -0.96859,-2.78557 l 1.10331,-0.41145 c 0,0 0.89958,1.50401 1.40557,1.43271 0.26568,-0.0374 1.30507,-1.1732 1.75003,-1.44623 0.39896,-0.24477 1.94998,-0.57229 1.99129,-0.73141 0.16034,-0.58747 0.254,-2.22712 0.254,-2.22712 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13604-8-6"
+       d="m 93.146852,72.351901 c 0,0.41023 -0.33463,0.74277 -0.74745,0.74277 -0.41281,0 -0.74745,-0.33254 -0.74745,-0.74277 0,-0.41022 0.33464,-0.74277 0.74745,-0.74277 0.41282,0 0.74745,0.33255 0.74745,0.74277 z"
+       style="fill:#f7002b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.352778" />
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/corbeil-essonnes.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/corbeil-essonnes.svg
new file mode 100644
index 0000000..60e3d52
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/corbeil-essonnes.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="34.322178mm"
+   height="34.322182mm"
+   viewBox="0 0 34.322178 34.322182"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-115.06292,-11.702984)">
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-0-6-2"
+       cx="132.22401"
+       cy="28.864075"
+       r="17.161091" />
+    <circle
+       style="opacity:0.2;fill:#0732c2;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-2-3"
+       cx="132.22401"
+       cy="28.864075"
+       r="17.161091" />
+    <path
+       id="path13602-6-7"
+       d="m 142.1894,37.200189 0.0762,0.97356 -1.32641,0.41656 0.30802,2.53153 0.80147,0.70757 0.61626,-1.84069 -0.0476,-2.52285 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13603-1-5"
+       d="m 130.41853,16.877539 1.74205,-0.46269 c 0,0 3.19959,4.21813 10.27592,5.5542 0,0 -0.74796,1.29195 -1.13143,3.71659 l -2.54748,3.19571 1.23106,-0.2219 0.54377,3.19684 -0.82924,0.36163 c 0,0 1.14977,2.27125 1.80411,2.76472 l -2.70295,2.80433 c 0,0 -2.96192,-2.17889 -4.52604,-1.24615 -1.42352,0.88544 -1.10398,2.57979 -1.10398,2.57979 l -4.60212,-0.40685 -4.00005,-1.29018 c 0,0 0.74532,-3.7216 0.73872,-6.53147 l 0.74641,0.86639 -0.45283,-1.39993 c -0.42044,-1.29971 -1.65826,-2.31123 -1.66694,-2.40944 -0.20126,-2.27725 -2.0903,-2.79986 -4.51211,-3.02694 l -0.65958,-1.97111 2.63593,-0.61556 3.48117,0.71109 c 0,0 -0.0887,-1.05607 -0.96859,-2.78557 l 1.10331,-0.41145 c 0,0 0.89958,1.50401 1.40557,1.43271 0.26568,-0.0374 1.30507,-1.1732 1.75003,-1.44623 0.39896,-0.24477 1.94998,-0.57229 1.99129,-0.73141 0.16034,-0.58747 0.254,-2.22712 0.254,-2.22712 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13604-8-9"
+       d="m 131.75475,23.741825 c 0,0.41023 -0.33463,0.74277 -0.74745,0.74277 -0.41281,0 -0.74745,-0.33254 -0.74745,-0.74277 0,-0.41022 0.33464,-0.74277 0.74745,-0.74277 0.41282,0 0.74745,0.33255 0.74745,0.74277 z"
+       style="fill:#f7002b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.352778" />
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/coulommiers.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/coulommiers.svg
new file mode 100644
index 0000000..a276f4d
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/coulommiers.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="34.322178mm"
+   height="34.322182mm"
+   viewBox="0 0 34.322178 34.322182"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-166.39867,-11.702984)">
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-0-6-2-8"
+       cx="183.55977"
+       cy="28.864075"
+       r="17.161091" />
+    <circle
+       style="opacity:0.2;fill:#0732c2;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-2-3-8"
+       cx="183.55977"
+       cy="28.864075"
+       r="17.161091" />
+    <path
+       id="path13602-6-7-4"
+       d="m 193.52516,37.200189 0.0762,0.97356 -1.32641,0.41656 0.30802,2.53153 0.80147,0.70757 0.61626,-1.84069 -0.0476,-2.52285 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13603-1-5-3"
+       d="m 181.75429,16.877539 1.74205,-0.46269 c 0,0 3.19959,4.21813 10.27592,5.5542 0,0 -0.74796,1.29195 -1.13143,3.71659 l -2.54748,3.19571 1.23106,-0.2219 0.54377,3.19684 -0.82924,0.36163 c 0,0 1.14977,2.27125 1.80411,2.76472 l -2.70295,2.80433 c 0,0 -2.96192,-2.17889 -4.52604,-1.24615 -1.42352,0.88544 -1.10398,2.57979 -1.10398,2.57979 l -4.60212,-0.40685 -4.00005,-1.29018 c 0,0 0.74532,-3.7216 0.73872,-6.53147 l 0.74641,0.86639 -0.45283,-1.39993 c -0.42044,-1.29971 -1.65826,-2.31123 -1.66694,-2.40944 -0.20126,-2.27725 -2.0903,-2.79986 -4.51211,-3.02694 l -0.65958,-1.97111 2.63593,-0.61556 3.48117,0.71109 c 0,0 -0.0887,-1.05607 -0.96859,-2.78557 l 1.10331,-0.41145 c 0,0 0.89958,1.50401 1.40557,1.43271 0.26568,-0.0374 1.30507,-1.1732 1.75003,-1.44623 0.39896,-0.24477 1.94998,-0.57229 1.99129,-0.73141 0.16034,-0.58747 0.254,-2.22712 0.254,-2.22712 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13604-8-9-14"
+       d="m 184.1723,23.250103 c 0,0.41023 -0.33463,0.74277 -0.74745,0.74277 -0.41281,0 -0.74745,-0.33254 -0.74745,-0.74277 0,-0.41022 0.33464,-0.74277 0.74745,-0.74277 0.41282,0 0.74745,0.33255 0.74745,0.74277 z"
+       style="fill:#f7002b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.352778" />
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/le-mans.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/le-mans.svg
new file mode 100644
index 0000000..dc89621
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/le-mans.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="34.322178mm"
+   height="34.322182mm"
+   viewBox="0 0 34.322178 34.322182"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-67.070862,-11.702984)">
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-0-6"
+       cx="84.231956"
+       cy="28.864075"
+       r="17.161091" />
+    <circle
+       style="opacity:0.2;fill:#0732c2;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-2"
+       cx="84.231956"
+       cy="28.864075"
+       r="17.161091" />
+    <path
+       id="path13602-6"
+       d="m 94.197348,37.200189 0.0762,0.97356 -1.32641,0.41656 0.30802,2.53153 0.80147,0.70757 0.61626,-1.84069 -0.0476,-2.52285 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13603-1"
+       d="m 82.426478,16.877539 1.74205,-0.46269 c 0,0 3.19959,4.21813 10.27592,5.5542 0,0 -0.74796,1.29195 -1.13143,3.71659 l -2.54748,3.19571 1.23106,-0.2219 0.54377,3.19684 -0.82924,0.36163 c 0,0 1.14977,2.27125 1.80411,2.76472 l -2.70295,2.80433 c 0,0 -2.96192,-2.17889 -4.52604,-1.24615 -1.42352,0.88544 -1.10398,2.57979 -1.10398,2.57979 l -4.60212,-0.40685 -4.00005,-1.29018 c 0,0 0.74532,-3.7216 0.73872,-6.53147 l 0.74641,0.86639 -0.45283,-1.39993 c -0.42044,-1.29971 -1.65826,-2.31123 -1.66694,-2.40944 -0.20126,-2.27725 -2.0903,-2.79986 -4.51211,-3.02694 l -0.65958,-1.97111 2.63593,-0.61556 3.48117,0.71109 c 0,0 -0.0887,-1.05607 -0.96859,-2.78557 l 1.10331,-0.41145 c 0,0 0.89958,1.50401 1.40557,1.43271 0.26568,-0.0374 1.30507,-1.1732 1.75003,-1.44623 0.39896,-0.24477 1.94998,-0.57229 1.99129,-0.73141 0.16034,-0.58747 0.254,-2.22712 0.254,-2.22712 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13604-8"
+       d="m 80.517335,24.52858 c 0,0.41023 -0.33463,0.74277 -0.74745,0.74277 -0.41281,0 -0.74745,-0.33254 -0.74745,-0.74277 0,-0.41022 0.33464,-0.74277 0.74745,-0.74277 0.41282,0 0.74745,0.33255 0.74745,0.74277 z"
+       style="fill:#f7002b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.352778" />
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/lodeve.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/lodeve.svg
new file mode 100644
index 0000000..347481e
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/lodeve.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="34.322193mm"
+   height="34.322182mm"
+   viewBox="0 0 34.322193 34.322182"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-165.41524,-59.695038)">
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-0-6-2-7-5"
+       cx="182.57634"
+       cy="76.856125"
+       r="17.161091" />
+    <circle
+       style="opacity:0.2;fill:#0732c2;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-2-3-3-5"
+       cx="182.57634"
+       cy="76.856125"
+       r="17.161091" />
+    <path
+       id="path13602-6-7-6-4"
+       d="m 192.54172,85.192242 0.0762,0.97356 -1.32641,0.41656 0.30802,2.53153 0.80147,0.70757 0.61626,-1.84069 -0.0476,-2.52285 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13603-1-5-1-7"
+       d="m 180.77085,64.869592 1.74205,-0.46269 c 0,0 3.19959,4.21813 10.27592,5.5542 0,0 -0.74796,1.29195 -1.13143,3.71659 l -2.54748,3.19571 1.23106,-0.2219 0.54377,3.19684 -0.82924,0.36163 c 0,0 1.14977,2.27125 1.80411,2.76472 l -2.70295,2.80433 c 0,0 -2.96192,-2.17889 -4.52604,-1.24615 -1.42352,0.88544 -1.10398,2.57979 -1.10398,2.57979 l -4.60212,-0.40685 -4.00005,-1.29018 c 0,0 0.74532,-3.7216 0.73872,-6.53147 l 0.74641,0.86639 -0.45283,-1.39993 c -0.42044,-1.29971 -1.65826,-2.31123 -1.66694,-2.40944 -0.20126,-2.27725 -2.0903,-2.79986 -4.51211,-3.02694 l -0.65958,-1.97111 2.63593,-0.61556 3.48117,0.71109 c 0,0 -0.0887,-1.05607 -0.96859,-2.78557 l 1.10331,-0.41145 c 0,0 0.89958,1.50401 1.40557,1.43271 0.26568,-0.0374 1.30507,-1.1732 1.75003,-1.44623 0.39896,-0.24477 1.94998,-0.57229 1.99129,-0.73141 0.16034,-0.58747 0.254,-2.22712 0.254,-2.22712 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13604-8-9-2-6"
+       d="m 183.84183,83.478296 c 0,0.41023 -0.33463,0.74277 -0.74745,0.74277 -0.41281,0 -0.74745,-0.33254 -0.74745,-0.74277 0,-0.41022 0.33464,-0.74277 0.74745,-0.74277 0.41282,0 0.74745,0.33255 0.74745,0.74277 z"
+       style="fill:#f7002b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.352778" />
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/manosque.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/manosque.svg
new file mode 100644
index 0000000..0f645c5
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/manosque.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="34.322178mm"
+   height="34.322178mm"
+   viewBox="0 0 34.322178 34.322178"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-67.070862,-105.7202)">
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-0-6-0-4"
+       cx="84.231956"
+       cy="122.88129"
+       r="17.161091" />
+    <circle
+       style="opacity:0.2;fill:#0732c2;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-2-36-7"
+       cx="84.231956"
+       cy="122.88129"
+       r="17.161091" />
+    <path
+       id="path13602-6-1-4"
+       d="m 94.197348,131.21741 0.0762,0.97356 -1.32641,0.41656 0.30802,2.53153 0.80147,0.70757 0.61626,-1.84069 -0.0476,-2.52285 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13603-1-0-4"
+       d="m 82.426478,110.89476 1.74205,-0.46269 c 0,0 3.19959,4.21813 10.27592,5.5542 0,0 -0.74796,1.29195 -1.13143,3.71659 l -2.54748,3.19571 1.23106,-0.2219 0.54377,3.19684 -0.82924,0.36163 c 0,0 1.14977,2.27125 1.80411,2.76472 l -2.70295,2.80433 c 0,0 -2.96192,-2.17889 -4.52604,-1.24615 -1.42352,0.88544 -1.10398,2.57979 -1.10398,2.57979 l -4.60212,-0.40685 -4.00005,-1.29018 c 0,0 0.74532,-3.7216 0.73872,-6.53147 l 0.74641,0.86639 -0.45283,-1.39993 c -0.42044,-1.29971 -1.65826,-2.31123 -1.66694,-2.40944 -0.20126,-2.27725 -2.0903,-2.79986 -4.51211,-3.02694 l -0.65958,-1.97111 2.63593,-0.61556 3.48117,0.71109 c 0,0 -0.0887,-1.05607 -0.96859,-2.78557 l 1.10331,-0.41145 c 0,0 0.89958,1.50401 1.40557,1.43271 0.26568,-0.0374 1.30507,-1.1732 1.75003,-1.44623 0.39896,-0.24477 1.94998,-0.57229 1.99129,-0.73141 0.16034,-0.58747 0.254,-2.22712 0.254,-2.22712 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13604-8-6-3"
+       d="m 90.226174,129.2253 c 0,0.41023 -0.33463,0.74277 -0.74745,0.74277 -0.41281,0 -0.74745,-0.33254 -0.74745,-0.74277 0,-0.41022 0.33464,-0.74277 0.74745,-0.74277 0.41282,0 0.74745,0.33255 0.74745,0.74277 z"
+       style="fill:#f7002b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.352778" />
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/marseille.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/marseille.svg
new file mode 100644
index 0000000..1c05f93
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/marseille.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="34.322182mm"
+   height="34.322178mm"
+   viewBox="0 0 34.322182 34.322178"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-17.898682,-105.7202)">
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-0-4-7"
+       cx="35.059772"
+       cy="122.88129"
+       r="17.161091" />
+    <circle
+       style="opacity:0.2;fill:#0732c2;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-7-4"
+       cx="35.059772"
+       cy="122.88129"
+       r="17.161091" />
+    <path
+       id="path13602-8-5"
+       d="m 45.025163,131.21741 0.0762,0.97356 -1.32641,0.41656 0.30802,2.53153 0.80147,0.70757 0.61626,-1.84069 -0.0476,-2.52285 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13603-4-2"
+       d="m 33.254293,110.89476 1.74205,-0.46269 c 0,0 3.19959,4.21813 10.27592,5.5542 0,0 -0.74796,1.29195 -1.13143,3.71659 l -2.54748,3.19571 1.23106,-0.2219 0.54377,3.19684 -0.82924,0.36163 c 0,0 1.14977,2.27125 1.80411,2.76472 l -2.70295,2.80433 c 0,0 -2.96192,-2.17889 -4.52604,-1.24615 -1.42352,0.88544 -1.10398,2.57979 -1.10398,2.57979 l -4.60212,-0.40685 -4.00005,-1.29018 c 0,0 0.74532,-3.7216 0.73872,-6.53147 l 0.74641,0.86639 -0.45283,-1.39993 c -0.42044,-1.29971 -1.65826,-2.31123 -1.66694,-2.40944 -0.20126,-2.27725 -2.0903,-2.79986 -4.51211,-3.02694 l -0.65958,-1.97111 2.63593,-0.61556 3.48117,0.71109 c 0,0 -0.0887,-1.05607 -0.96859,-2.78557 l 1.10331,-0.41145 c 0,0 0.89958,1.50401 1.40557,1.43271 0.26568,-0.0374 1.30507,-1.1732 1.75003,-1.44623 0.39896,-0.24477 1.94998,-0.57229 1.99129,-0.73141 0.16034,-0.58747 0.254,-2.22712 0.254,-2.22712 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13604-5-5"
+       d="m 40.775829,130.33794 c 0,0.41023 -0.33463,0.74277 -0.74745,0.74277 -0.41281,0 -0.74745,-0.33254 -0.74745,-0.74277 0,-0.41022 0.33464,-0.74277 0.74745,-0.74277 0.41282,0 0.74745,0.33255 0.74745,0.74277 z"
+       style="fill:#f7002b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.352778" />
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/pessac.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/pessac.svg
new file mode 100644
index 0000000..c2f70b1
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/pessac.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="34.322178mm"
+   height="34.322182mm"
+   viewBox="0 0 34.322178 34.322182"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-115.06292,-59.695038)">
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-0-6-2-3"
+       cx="132.22401"
+       cy="76.856125"
+       r="17.161091" />
+    <circle
+       style="opacity:0.2;fill:#0732c2;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-2-3-2"
+       cx="132.22401"
+       cy="76.856125"
+       r="17.161091" />
+    <path
+       id="path13602-6-7-0"
+       d="m 142.1894,85.192242 0.0762,0.97356 -1.32641,0.41656 0.30802,2.53153 0.80147,0.70757 0.61626,-1.84069 -0.0476,-2.52285 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13603-1-5-6"
+       d="m 130.41853,64.869592 1.74205,-0.46269 c 0,0 3.19959,4.21813 10.27592,5.5542 0,0 -0.74796,1.29195 -1.13143,3.71659 l -2.54748,3.19571 1.23106,-0.2219 0.54377,3.19684 -0.82924,0.36163 c 0,0 1.14977,2.27125 1.80411,2.76472 l -2.70295,2.80433 c 0,0 -2.96192,-2.17889 -4.52604,-1.24615 -1.42352,0.88544 -1.10398,2.57979 -1.10398,2.57979 l -4.60212,-0.40685 -4.00005,-1.29018 c 0,0 0.74532,-3.7216 0.73872,-6.53147 l 0.74641,0.86639 -0.45283,-1.39993 c -0.42044,-1.29971 -1.65826,-2.31123 -1.66694,-2.40944 -0.20126,-2.27725 -2.0903,-2.79986 -4.51211,-3.02694 l -0.65958,-1.97111 2.63593,-0.61556 3.48117,0.71109 c 0,0 -0.0887,-1.05607 -0.96859,-2.78557 l 1.10331,-0.41145 c 0,0 0.89958,1.50401 1.40557,1.43271 0.26568,-0.0374 1.30507,-1.1732 1.75003,-1.44623 0.39896,-0.24477 1.94998,-0.57229 1.99129,-0.73141 0.16034,-0.58747 0.254,-2.22712 0.254,-2.22712 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13604-8-9-1"
+       d="m 126.95275,80.974857 c 0,0.41023 -0.33463,0.74277 -0.74745,0.74277 -0.41281,0 -0.74745,-0.33254 -0.74745,-0.74277 0,-0.41022 0.33464,-0.74277 0.74745,-0.74277 0.41282,0 0.74745,0.33255 0.74745,0.74277 z"
+       style="fill:#f7002b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.352778" />
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/sedan.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/sedan.svg
new file mode 100644
index 0000000..47d3a29
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/pictos_sites/sedan.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="34.322182mm"
+   height="34.322182mm"
+   viewBox="0 0 34.322182 34.322182"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-17.898682,-59.695038)">
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-0-4"
+       cx="35.059772"
+       cy="76.856125"
+       r="17.161091" />
+    <circle
+       style="opacity:0.2;fill:#0732c2;fill-opacity:1;stroke-width:0.227828;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+       id="path1-7"
+       cx="35.059772"
+       cy="76.856125"
+       r="17.161091" />
+    <path
+       id="path13602-8"
+       d="m 45.025163,85.192242 0.0762,0.97356 -1.32641,0.41656 0.30802,2.53153 0.80147,0.70757 0.61626,-1.84069 -0.0476,-2.52285 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13603-4"
+       d="m 33.254293,64.869592 1.74205,-0.46269 c 0,0 3.19959,4.21813 10.27592,5.5542 0,0 -0.74796,1.29195 -1.13143,3.71659 l -2.54748,3.19571 1.23106,-0.2219 0.54377,3.19684 -0.82924,0.36163 c 0,0 1.14977,2.27125 1.80411,2.76472 l -2.70295,2.80433 c 0,0 -2.96192,-2.17889 -4.52604,-1.24615 -1.42352,0.88544 -1.10398,2.57979 -1.10398,2.57979 l -4.60212,-0.40685 -4.00005,-1.29018 c 0,0 0.74532,-3.7216 0.73872,-6.53147 l 0.74641,0.86639 -0.45283,-1.39993 c -0.42044,-1.29971 -1.65826,-2.31123 -1.66694,-2.40944 -0.20126,-2.27725 -2.0903,-2.79986 -4.51211,-3.02694 l -0.65958,-1.97111 2.63593,-0.61556 3.48117,0.71109 c 0,0 -0.0887,-1.05607 -0.96859,-2.78557 l 1.10331,-0.41145 c 0,0 0.89958,1.50401 1.40557,1.43271 0.26568,-0.0374 1.30507,-1.1732 1.75003,-1.44623 0.39896,-0.24477 1.94998,-0.57229 1.99129,-0.73141 0.16034,-0.58747 0.254,-2.22712 0.254,-2.22712 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path13604-5"
+       d="m 39.106869,67.484103 c 0,0.41023 -0.33463,0.74277 -0.74745,0.74277 -0.41281,0 -0.74745,-0.33254 -0.74745,-0.74277 0,-0.41022 0.33464,-0.74277 0.74745,-0.74277 0.41282,0 0.74745,0.33255 0.74745,0.74277 z"
+       style="fill:#f7002b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.352778" />
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss
index d0a5f80..8be2658 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss
@@ -37,18 +37,143 @@ main{
                 padding-top: 2rem;
                 margin-left: 2rem;
                 margin-right: 2rem;
-                .views-field-group{
+                .views-field-group {
                     width: 18%;
                     margin-bottom: 2rem;
-                    font-size: 0.4rem ;
-        
-                    @media(max-width: 810px){
-                        width: 45%;
+                    font-size: 0.4rem;
+                    position: relative; // important pour positionner le ::before
+                  
+                    &.marseille::before {
+                        content: "";
+                        position: absolute;
+                        top: -1rem;
+                        left: -1rem;
+                        width: 3rem;
+                        height: 3rem;
+                        background-image: url("../img/pictos_sites/marseille.svg");
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: contain;
+                        pointer-events: none;  // si tu ne veux pas bloquer les clics
                     }
-                    @media(max-width: 550px){
-                        font-size: 0.7rem ;
+                    &.sedan::before {
+                        content: "";
+                        position: absolute;
+                        top: -1rem;
+                        left: -1rem;
+                        width: 3rem;
+                        height: 3rem;
+                        background-image: url("../img/pictos_sites/sedan.svg");
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: contain;
+                        pointer-events: none;  // si tu ne veux pas bloquer les clics
+                    }
+                    &.lodève::before {
+                        content: "";
+                        position: absolute;
+                        top: -1rem;
+                        left: -1rem;
+                        width: 3rem;
+                        height: 3rem;
+                        background-image: url("../img/pictos_sites/lodeve.svg");
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: contain;
+                        pointer-events: none;  // si tu ne veux pas bloquer les clics
+                    }
+                  
+                    &.colmar::before {
+                        content: "";
+                        position: absolute;
+                        top: -1rem;
+                        left: -1rem;
+                        width: 3rem;
+                        height: 3rem;
+                        background-image: url("../img/pictos_sites/colmar.svg");
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: contain;
+                        pointer-events: none;  // si tu ne veux pas bloquer les clics
+                    }
+                    &.manosque::before {
+                        content: "";
+                        position: absolute;
+                        top: -1rem;
+                        left: -1rem;
+                        width: 3rem;
+                        height: 3rem;
+                        background-image: url("../img/pictos_sites/manosque.svg");
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: contain;
+                        pointer-events: none;  // si tu ne veux pas bloquer les clics
+                    }
+                    &.pessac::before {
+                        content: "";
+                        position: absolute;
+                        top: -1rem;
+                        left: -1rem;
+                        width: 3rem;
+                        height: 3rem;
+                        background-image: url("../img/pictos_sites/pessac.svg");
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: contain;
+                        pointer-events: none;  // si tu ne veux pas bloquer les clics
+                    }
+                    &.corbeil-essones::before {
+                        content: "";
+                        position: absolute;
+                        top: -1rem;
+                        left: -1rem;
+                        width: 3rem;
+                        height: 3rem;
+                        background-image: url("../img/pictos_sites/corbeil-essones.svg");
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: contain;
+                        pointer-events: none;  // si tu ne veux pas bloquer les clics
+                    }
+                    &.caen::before {
+                        content: "";
+                        position: absolute;
+                        top: -1rem;
+                        left: -1rem;
+                        width: 3rem;
+                        height: 3rem;
+                        background-image: url("../img/pictos_sites/caen.svg");
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: contain;
+                        pointer-events: none;  // si tu ne veux pas bloquer les clics
+                    }
+                    &.le-mans::before {
+                        content: "";
+                        position: absolute;
+                        top: -1rem;
+                        left: -1rem;
+                        width: 3rem;
+                        height: 3rem;
+                        background-image: url("../img/pictos_sites/le-mans.svg");
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: contain;
+                        pointer-events: none;  // si tu ne veux pas bloquer les clics
+                    }
+                    &.coulommiers::before {
+                        content: "";
+                        position: absolute;
+                        top: -1rem;
+                        left: -1rem;
+                        width: 3rem;
+                        height: 3rem;
+                        background-image: url("../img/pictos_sites/coulommiers.svg");
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: contain;
+                        pointer-events: none;  // si tu ne veux pas bloquer les clics
                     }
-                    
                     .views-field-title{
                         h2{
                             margin: 0;
@@ -113,6 +238,10 @@ main{
                         margin-right: 0;
                         margin-top: 0;
                         margin-bottom: 0;
+                        div{
+                            background-color: #f6f7f3;
+                           
+                        }
                        
                     .field-content{
                         ul{