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 2115975..60ae10d 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
@@ -827,34 +827,63 @@ footer span.totop #toTop .arrow-up::before {
   width: 80%;
 }
 #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
+  margin-top: 2rem;
+  display: grid;
+  grid-template-columns: repeat(6 auto);
+  grid-template-rows: repeat(3 1fr);
 }
 #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5 {
   font-size: 5rem;
   font-weight: 800;
+  margin-bottom: 0;
+  margin: 0;
+}
+#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(1) {
+  grid-row: 2;
+  grid-column: 1;
+}
+#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(2) {
+  grid-row: 2;
+  grid-column: 3;
+}
+#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) {
+  grid-row: 1;
+  grid-column: 5;
 }
 #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p {
-  width: 30%;
-  display: flex;
-  flex-direction: column;
+  font-size: 1rem;
+  font-weight: 400;
+  margin: 0;
 }
 #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:not(:last-of-type) {
   padding-right: 2rem;
 }
-#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(1)::before {
-  content: url("../img/pillier-1-full.svg");
-  padding-bottom: 1rem;
+#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(1) {
+  grid-row: 1/span 2;
+  grid-column: 1/span 2;
 }
-#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(2)::after {
-  content: url("../img/pillier-2-full.svg");
-  padding-top: 1rem;
+#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) {
+  grid-row: 3;
+  grid-column: inherit;
 }
-#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3)::before {
-  content: url("../img/pillier-3-full.svg");
-  padding-bottom: 1rem;
+#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) {
+  grid-row: 1/span 2;
+  grid-column: 5/span 6;
+}
+#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(1) {
+  grid-row: 3;
+  grid-column: 1/span 2;
+}
+#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(2) {
+  grid-row: 1;
+}
+#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) {
+  grid-row: 3;
+  grid-column: 5;
 }
 #home article.node-type-static #paragraph-id--9 {
   display: none;
+}
+#home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
+  display: none;
 }
\ No newline at end of file
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-1-full.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-1-full.svg
index a76572d..5ceaf61 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-1-full.svg
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-1-full.svg
@@ -39,5 +39,5 @@
        id="tspan1"
        x="-1.4831511"
        y="387.52762"
-       style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:183.589px;font-family:Gilroy;-inkscape-font-specification:'Gilroy Semi-Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.956195">1.</tspan></text>
+       style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:183.589px;font-family:Gilroy, sans-serif;-inkscape-font-specification:'Gilroy Semi-Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.956195">1.</tspan></text>
 </svg>
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-2-full.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-2-full.svg
index 0501787..ff22270 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-2-full.svg
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-2-full.svg
@@ -3,7 +3,7 @@
 
 <svg
    version="1.1"
-   id="svg1"
+   id="svg2"
    width="362.79999"
    height="562.18646"
    viewBox="0 0 362.79999 562.18646"
@@ -39,5 +39,5 @@
        id="tspan1"
        x="-0.4619709"
        y="130.89897"
-       style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:183.589px;font-family:Gilroy;-inkscape-font-specification:'Gilroy Semi-Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.956195">2.</tspan></text>
+       style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:183.589px;font-family:Gilroy;font-family:sans-serif;fill:#ffffff;fill-opacity:1;stroke-width:0.956195">2.</tspan></text>
 </svg>
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-3-full.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-3-full.svg
index 33b0d63..309a0d9 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-3-full.svg
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-3-full.svg
@@ -3,7 +3,7 @@
 
 <svg
    version="1.1"
-   id="svg1"
+   id="svg2"
    width="362.79999"
    height="362.79999"
    viewBox="0 0 362.79999 362.79998"
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
index 9e3c6e4..51ff282 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
@@ -148,7 +148,7 @@
                 }
             }
         }
-        #paragraph-id--7{
+        #paragraph-id--7{ ///////// les piliers
             background-color: #0833c2ff;
             display: flex;
             flex-direction: column;
@@ -165,43 +165,74 @@
             .field_field_texte{
                 width: 80%;
                 .colone-picto{
-                    display: flex;
-                    flex-direction:row ;
-                    justify-content: center;
+                    // display: flex;
+                    // flex-direction:row ;
+                    // justify-content: center;
+                    margin-top: 2rem;
+                    display: grid;
+                    grid-template-columns: repeat(6 auto);
+                    grid-template-rows: repeat(3 1fr);
                     h5{
                         font-size: 5rem;
                         font-weight: 800;
+                        margin-bottom: 0;
+                        margin: 0;
+                       
+                    }
+                    h5:nth-of-type(1){
+                        grid-row: 2;
+                        grid-column: 1;
+                    }
+                    h5:nth-of-type(2){
+                        grid-row: 2;
+                        grid-column: 3;
+                    }
+                    h5:nth-of-type(3){
+                        grid-row: 1;
+                        grid-column: 5;
                     }
                     p{
-                        width: 30%;
-                        display: flex;
-                        flex-direction:column ;
+                        font-size: 1rem;
+                        font-weight: 400;
+                        margin: 0;
                         &:not(:last-of-type){
                             padding-right: 2rem;
                         }
-                    
-                        &:nth-of-type(1)::before{
-                            content: url("../img/pillier-1-full.svg");
-                            padding-bottom: 1rem;
-                           
-                        }
-                        &:nth-of-type(2)::after{
-                            content: url("../img/pillier-2-full.svg");
-                            padding-top: 1rem;
-                           
-                        }
-                        &:nth-of-type(3)::before{
-                            content: url("../img/pillier-3-full.svg");
-                            padding-bottom: 1rem;
-                            
-                        }
                     }
-
+                    svg:nth-of-type(1){
+                        grid-row: 1 /span 2;
+                        grid-column: 1 /span 2;
+                    }
+                    svg:nth-of-type(2){
+                        grid-row: 3;
+                        grid-column: inherit;
+                    }
+                    svg:nth-of-type(3){
+                        grid-row: 1 /span 2;
+                        grid-column: 5 /span 6;
+                    }
+                    p:nth-of-type(1){
+                        grid-row: 3;
+                        grid-column: 1 /span 2;
+                    }
+                    p:nth-of-type(2){
+                        grid-row: 1;
+                    }
+                    p:nth-of-type(3){
+                        grid-row: 3;
+                        grid-column: 5;
+                    }
+                    
                 }
             }
         }
         #paragraph-id--9{display: none;}
     }
 
+    .paragraph--type--static-parts:not(#paragraph-id--7){
+        #svg1{
+            display: none;
+        }
+    }
 
 }
\ No newline at end of file
diff --git a/web/themes/custom/quartiers_de_demain/templates/field--paragraph--field-texte.html.twig b/web/themes/custom/quartiers_de_demain/templates/field--paragraph--field-texte.html.twig
index 77946a0..7e21aed 100644
--- a/web/themes/custom/quartiers_de_demain/templates/field--paragraph--field-texte.html.twig
+++ b/web/themes/custom/quartiers_de_demain/templates/field--paragraph--field-texte.html.twig
@@ -69,7 +69,12 @@
       <div>
     {% endif %}
     {% for item in items %}
-      <div class="colone-picto"{{ item.attributes }}>{{ item.content }}</div>
+      <div class="colone-picto"
+      {{ item.attributes }}>{{ item.content }}
+      {% include active_theme_path() ~ '/dist/assets/img/pillier-1.svg' %}
+      {% include active_theme_path() ~ '/dist/assets/img/pillier-2.svg' %}
+      {% include active_theme_path() ~ '/dist/assets/img/pillier-3.svg' %}
+      </div>
     {% endfor %}
     {% if multiple %}
       </div>