diff --git a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
index bf0e68c..83e4407 100644
--- a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
+++ b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
@@ -298,47 +298,6 @@ header {
       text-transform: uppercase; }
 
 /*pages*/
-#presentation {
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  grid-gap: 10px; }
-  #presentation .layout-content {
-    grid-column: 3 / 11;
-    order: 2;
-    padding-top: 3rem;
-    padding-bottom: 6rem; }
-    @media (max-width: 891px) {
-      #presentation .layout-content {
-        width: 90%; } }
-    @media (max-width: 500px) {
-      #presentation .layout-content {
-        padding-top: 0; } }
-    #presentation .layout-content .content_container {
-      display: flex; }
-      #presentation .layout-content .content_container #block-quartiers-de-demain-titredepage {
-        display: none; }
-      #presentation .layout-content .content_container article.node-type-static {
-        width: 100%; }
-        #presentation .layout-content .content_container article.node-type-static div.field_body h2 {
-          font-size: 0.8rem;
-          font-weight: 600;
-          margin-bottom: 0; }
-        #presentation .layout-content .content_container article.node-type-static div.field_body p {
-          margin-top: 0; }
-  #presentation aside {
-    grid-column: 1 /span 2;
-    order: 1;
-    margin-top: 5rem; }
-    @media (max-width: 891px) {
-      #presentation aside {
-        margin-left: 5%;
-        margin-top: 9rem; } }
-    @media (max-width: 500px) {
-      #presentation aside {
-        width: 80%;
-        margin-top: 3rem; } }
-
 .partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage {
   grid-column: 3 /span 9;
   grid-row: 1;
@@ -399,6 +358,107 @@ header {
           padding-right: 0.5rem;
           padding-top: 0.2rem; }
 
+#presentation {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-gap: 10px; }
+  #presentation .layout-content {
+    grid-row: 1;
+    order: 2;
+    padding-top: 3rem;
+    padding-bottom: 6rem; }
+    @media (max-width: 891px) {
+      #presentation .layout-content {
+        width: 90%; } }
+    @media (max-width: 500px) {
+      #presentation .layout-content {
+        padding-top: 0; } }
+    #presentation .layout-content .content_container {
+      display: flex; }
+      #presentation .layout-content .content_container #block-quartiers-de-demain-titredepage {
+        display: none; }
+      #presentation .layout-content .content_container article.node-type-static {
+        width: 100%; }
+        #presentation .layout-content .content_container article.node-type-static .field_body {
+          padding-left: 20%;
+          width: 80%; }
+          #presentation .layout-content .content_container article.node-type-static .field_body h2 {
+            font-size: 0.8rem;
+            font-weight: 600;
+            margin-bottom: 0; }
+          #presentation .layout-content .content_container article.node-type-static .field_body p {
+            margin-top: 0; }
+        #presentation .layout-content .content_container article.node-type-static .paragraph {
+          padding-top: 1rem;
+          padding-bottom: 1rem;
+          padding-left: 20%;
+          padding-right: 20%; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_title {
+          text-transform: uppercase;
+          font-size: 1rem;
+          font-weight: 300; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title {
+          color: #0732c2; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4 .field_field_title {
+          color: #f7002b; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 {
+          background-color: #e8ebf4; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 {
+          text-align: center; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 {
+          display: flex;
+          flex-direction: column; }
+          #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title {
+            width: 60%;
+            margin: auto; }
+          #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) {
+            display: flex;
+            flex-direction: row; }
+            #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p {
+              padding-right: 30px;
+              text-align: left;
+              color: #0732c2; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) {
+          display: flex;
+          flex-direction: row; }
+          #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p {
+            padding-right: 30px;
+            text-align: left; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes p {
+          margin-bottom: 0; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto {
+          height: auto;
+          float: inline-start;
+          padding-right: 0.5rem; }
+          #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img {
+            width: 50px;
+            height: auto; }
+  #presentation aside {
+    position: relative;
+    grid-column: 1 /span 2;
+    grid-row: 1;
+    z-index: 100;
+    order: 1;
+    margin-top: 5rem; }
+    @media (max-width: 891px) {
+      #presentation aside {
+        margin-left: 5%;
+        margin-top: 9rem; } }
+    @media (max-width: 500px) {
+      #presentation aside {
+        width: 80%;
+        margin-top: 3rem; } }
+    #presentation aside .sidebar_first_container {
+      position: -webkit-sticky;
+      position: sticky;
+      top: 10rem; }
+      @media (max-width: 810px) {
+        #presentation aside .sidebar_first_container {
+          display: none; } }
+    #presentation aside .views-field-field-pieces-jointes .field-content .file--application-pdf::before {
+      content: url(../images/noun-arrow-download.png); }
+
 .node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage {
   grid-column: 3 /span 9;
   grid-row: 1;
diff --git a/web/themes/custom/quartiers_de_demain/images/noun-arrow-download.png b/web/themes/custom/quartiers_de_demain/images/noun-arrow-download.png
new file mode 100644
index 0000000..35d582d
Binary files /dev/null and b/web/themes/custom/quartiers_de_demain/images/noun-arrow-download.png differ
diff --git a/web/themes/custom/quartiers_de_demain/images/noun-arrow-download.svg b/web/themes/custom/quartiers_de_demain/images/noun-arrow-download.svg
new file mode 100644
index 0000000..6aa4b7e
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/images/noun-arrow-download.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="296.99997mm"
+   viewBox="0 0 210 296.99997"
+   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(-102.65834,-91.281253)">
+    <circle
+       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+       id="path3"
+       cx="107.9243"
+       cy="96.547218"
+       r="5.0013819" />
+    <g
+       id="g3"
+       transform="matrix(0.20537675,0,0,0.20537675,101.21124,91.670331)">
+      <path
+         d="m 41.028293,36.984814 h -16.69492 a 0.702944,0.702944 0 0 0 0,1.405888 h 16.69492 a 0.702944,0.702944 0 1 0 0,-1.405888 z"
+         id="path1"
+         style="fill:#ffffff;stroke-width:0.292893" />
+      <path
+         d="m 42.46347,24.507558 -9.079693,8.874668 V 9.804313 a 0.702944,0.702944 0 1 0 -1.405888,0 v 23.577913 l -9.079693,-8.874668 a 0.70294398,0.70294398 0 0 0 -0.966548,0 0.73223332,0.73223332 0 0 0 0,0.995837 l 10.251267,10.046241 a 0.79081198,0.79081198 0 0 0 0.995837,0 L 43.430018,25.503395 a 0.70294398,0.70294398 0 0 0 0,-0.995837 0.70294398,0.70294398 0 0 0 -0.966548,0 z"
+         id="path2"
+         style="fill:#ffffff;stroke-width:0.292893" />
+    </g>
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss b/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss
index e44c86c..9cfeb2d 100644
--- a/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss
+++ b/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss
@@ -5,7 +5,8 @@
     grid-template-columns: repeat(12, 1fr);
     grid-gap: 10px;
     .layout-content{
-        grid-column: 3 / 11;
+        // grid-column: 3 / 11;
+        grid-row: 1;
         order: 2;
         padding-top: 3rem;
         padding-bottom: 6rem;
@@ -26,7 +27,9 @@
             article.node-type-static{
                 width: 100%;
     
-                div.field_body{
+                .field_body{
+                    padding-left: 20%;
+                    width: 80%;
                     h2{
                         font-size: $font-medium;
                         font-weight: 600;
@@ -36,28 +39,122 @@
                         margin-top: 0;
                     }
                 }
+                .paragraph{
+                    padding-top: 1rem;
+                    padding-bottom: 1rem;
+                    padding-left: 20%;
+                    padding-right: 20%;
+
+                }
+                .field_field_textes{
+                    .field_field_title{
+                        text-transform: uppercase;
+                        font-size: $font-big;
+                        font-weight: 300;
+                    }
+                    #paragraph-id--1, #paragraph-id--2, #paragraph-id--6, #paragraph-id--7,  #paragraph-id--8{
+                        .field_field_title{
+                            color: $blue_QDD;
+                        }
+                    }
+                    #paragraph-id--3, #paragraph-id--4{
+                        .field_field_title{
+                            color: $red_QDD;
+                        }
+                    }
+                    #paragraph-id--1, #paragraph-id--2, #paragraph-id--3, #paragraph-id--4,  #paragraph-id--6, #paragraph-id--8{
+                        background-color: $bleu_fond_header;
+                    }
+                    #paragraph-id--7, #paragraph-id--8{
+                        text-align: center;
+                    }
+                    
+                    #paragraph-id--7{
+                        display: flex;
+                        flex-direction: column;
+                        .field_field_title{
+                            width: 60%;
+                            margin: auto;
+                        }
+                        .field_field_texte div:nth-child(2){
+                            display: flex;
+                            flex-direction: row;
+                            p{
+                                padding-right: 30px;
+                                text-align: left;
+                                color: $blue_QDD;
+                            }
+                    }
+                    }
+
+                    #paragraph-id--8{
+                        .field_field_texte div:nth-child(2){
+                                display: flex;
+                                flex-direction: row;
+                                p{
+                                    padding-right: 30px;
+                                    text-align: left;
+                                }
+                        }
+                    }
+                    p{
+                        margin-bottom: 0;
+                        // padding-bottom: 1.5rem;
+                    }    
+                    .field_field_picto{
+                        height: auto;
+                        float: inline-start;
+                        padding-right: 0.5rem;
+                        img{
+                            width: 50px;
+                            height: auto;
+                        }
+                    }
+                }
             }
         }
     }    
-    aside{
-        grid-column: 1 /span 2;
-        // width: 80%;
-        order: 1;
-        margin-top: 5rem;
-        // margin-left: 10%;
-        // margin-right: 1rem;
-        @media(max-width:891px){
-            margin-left: 5%;
-            margin-top: 9rem;
+        aside{
+            position: relative;
+            grid-column: 1 /span 2;
+            grid-row: 1;
+            z-index: 100;
+            // width: 80%;
+            order: 1;
+            margin-top: 5rem;
+            // margin-left: 10%;
+            // margin-right: 1rem;
+            @media(max-width:891px){
+                margin-left: 5%;
+                margin-top: 9rem;
+            }
+            @media (max-width:500px) {
+                width: 80%;
+                margin-top: 3rem;
+            }
+            .sidebar_first_container{
+                // display: flex;
+                // justify-content: flex-end;
+                position: -webkit-sticky;
+                position: sticky;
+                top: 10rem;
+                @media (max-width: 810px){
+                    display: none;
+                }
+            }
+            .views-field-field-pieces-jointes{
+                .field-content{
+                    .file--application-pdf{
+                        &::before{
+                            content: url(../images/noun-arrow-download.png);
+                        }
+                    }
+                }
+            }
         }
-        @media (max-width:500px) {
-            width: 80%;
-            margin-top: 3rem;
-        }
-    }
-}
-        
-        
+    
+            
+}       
         
     
 
diff --git a/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss b/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss
index dffe3cf..227327c 100644
--- a/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss
+++ b/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss
@@ -26,7 +26,8 @@
 
 
 /*pages*/
-@import "pages/presentation";
+
 @import "pages/partenaires";
+@import "pages/presentation";
 @import "pages/static";