From f72a96cdd8bb13f360c99282c63f1344fa18ce7e Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Wed, 10 Jul 2024 14:02:30 +0200
Subject: [PATCH] fix design with sandrine

---
 .../dist/assets/css/bundle.css                | 303 ++++++++++++------
 .../dist/assets/img/date-actu.svg             |   6 +-
 .../dist/assets/img/next.svg                  |   4 +-
 .../dist/assets/img/prev.svg                  |   4 +-
 .../dist/assets/img/type-actu.svg             |   6 +-
 .../src/assets/scss/global/_fonts.scss        |  29 +-
 .../scss/global/variables/_typography.scss    |   9 +-
 .../src/assets/scss/pages/consultation.scss   |  35 +-
 .../src/assets/scss/pages/home.scss           | 163 +++++++---
 .../scss/partials/actu-caroussel-home.scss    |  59 +++-
 .../src/assets/scss/partials/header.scss      |  12 -
 .../src/assets/scss/partials/slick-theme.scss |   2 +-
 .../src/assets/scss/partials/timeline.scss    |  14 +-
 13 files changed, 429 insertions(+), 217 deletions(-)

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 9efec31..2906587 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
@@ -3,13 +3,21 @@
 /*global*/
 /* Colors used for quartiers_de_demain */
 p {
-  font-size: 0.6rem;
+  font-size: 0.8rem;
 }
 
 h3 {
   font-size: 1.2rem;
 }
 
+h1 {
+  font-family: "gilroy-bold";
+}
+
+h2 {
+  font-family: "gilroy-semibold";
+}
+
 @media (min-width: 48rem) {
   :root {
     font-size: calc(1rem + (1vw - 0.48rem) * 1.389);
@@ -26,43 +34,43 @@ h3 {
 /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 4, 2024 */
 @font-face {
   font-family: "gilroy-semiboldita";
-  src: url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-semibolditalic-webfont.woff2") format("woff2"), url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-semibolditalic-webfont.woff") format("woff");
+  src: url("../fonts/Gilroy/gilroy-semibolditalic-webfont.woff2") format("woff2"), url("../fonts/Gilroy/gilroy-semibolditalic-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: "gilroy-semibold";
-  src: url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-semibold-webfont.woff2") format("woff2"), url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-semibold-webfont.woff") format("woff");
+  src: url("../fonts/Gilroy/gilroy-semibold-webfont.woff2") format("woff2"), url("../fonts/Gilroy/gilroy-semibold-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: "gilroy-regularita";
-  src: url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-regularitalic-webfont.woff2") format("woff2"), url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-regularitalic-webfont.woff") format("woff");
+  src: url("../fonts/Gilroy/gilroy-regularitalic-webfont.woff2") format("woff2"), url("../fonts/Gilroy/gilroy-regularitalic-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: "gilroy-regular";
-  src: url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-regular-webfont.woff2") format("woff2"), url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-regular-webfont.woff") format("woff");
+  src: url("../fonts/Gilroy/gilroy-regular-webfont.woff2") format("woff2"), url("../fonts/Gilroy/gilroy-regular-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: "gilroy-bolditalic";
-  src: url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-bolditalic-webfont.woff2") format("woff2"), url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-bolditalic-webfont.woff") format("woff");
+  src: url("../fonts/Gilroy/gilroy-bolditalic-webfont.woff2") format("woff2"), url("../fonts/Gilroy/gilroy-bolditalic-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: "gilroy-bold";
-  src: url("../fonts/Gilroy/gilroy-bold-webfont.woff2") format("woff2"), url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-bold-webfont.woff") format("woff");
+  src: url("../fonts/Gilroy/gilroy-bold-webfont.woff2") format("woff2"), url("../fonts/Gilroy/gilroy-bold-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: "gilroy-mediumital";
-  src: url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-mediumitalic-webfont.woff2") format("woff2"), url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-mediumitalic-webfont.woff") format("woff");
+  src: url("../fonts/Gilroy/gilroy-mediumitalic-webfont.woff2") format("woff2"), url("../fonts/Gilroy/gilroy-mediumitalic-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }
@@ -314,7 +322,7 @@ header .header_right_container .language-switcher-language-url {
 header .header_right_container .language-switcher-language-url ul {
   display: flex;
   flex-direction: row;
-  font-size: 0.6rem;
+  font-size: 0.8rem;
   padding: 0;
 }
 @media (max-width: 660px) {
@@ -792,7 +800,7 @@ footer {
 }
 @media (max-width: 810px) {
   .slick-prev {
-    left: 36%;
+    left: 29%;
   }
 }
 [dir=rtl] .slick-prev {
@@ -1002,9 +1010,8 @@ footer {
 #home .__container-deroulement h2 {
   width: fit-content;
   margin: auto;
-  padding-top: 3rem;
+  padding-top: 4rem;
   font-size: 1.7rem;
-  font-weight: bold;
 }
 #home .timeline {
   white-space: nowrap;
@@ -1097,10 +1104,10 @@ footer {
   margin: auto;
   align-items: flex-start;
   padding-right: 1rem;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
 }
 #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_jour {
-  font-size: 2rem;
+  font-size: 2.5rem;
   line-height: 0.3rem;
 }
 @media (max-width: 550px) {
@@ -1112,7 +1119,7 @@ footer {
 #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi {
   padding-right: 0.2rem;
   text-transform: uppercase;
-  font-size: 3rem;
+  font-size: 4rem;
   display: inline-flex;
 }
 @media (max-width: 550px) {
@@ -1167,7 +1174,7 @@ footer {
   min-width: 65%;
 }
 #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
-  font-size: 0.5rem;
+  font-size: 0.6rem;
   font-weight: 800;
 }
 @media (max-width: 1090px) {
@@ -1176,7 +1183,7 @@ footer {
   }
 }
 #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p {
-  font-size: 0.5rem !important;
+  font-size: 0.6rem !important;
   margin: 0;
 }
 @media (max-width: 1090px) {
@@ -1196,11 +1203,11 @@ footer {
 }
 #actus-caroussel h2 {
   width: fit-content;
-  padding-bottom: 0.4rem;
-  margin-top: 3rem;
+  padding-bottom: 1.5rem;
+  margin-top: 4rem;
   margin-bottom: 3rem;
   font-size: 1.7rem;
-  font-weight: bold;
+  font-family: "gilroy-semibold";
 }
 #actus-caroussel .content-actus .view {
   display: flex;
@@ -1209,8 +1216,8 @@ footer {
   width: 100vw;
 }
 #actus-caroussel .content-actus .views-row {
-  width: 500px !important;
-  padding: 2rem;
+  width: 650px !important;
+  padding: 1rem;
 }
 @media (max-width: 550px) {
   #actus-caroussel .content-actus .views-row {
@@ -1222,11 +1229,12 @@ footer {
   flex-direction: column;
 }
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images {
+  background-color: black;
   -moz-border-radius: 9px; /* pour Mozilla */
   -khtml-border-radius: 9px; /* pour Safari et Chrome */
   -webkit-border-radius: 9px; /* pour Safari sur Mac */
   border-radius: 9px; /* CSS3 */
-  height: 250px;
+  height: 350px;
   margin-bottom: 0.6rem;
 }
 @media (max-width: 550px) {
@@ -1234,10 +1242,33 @@ footer {
     height: 170px;
   }
 }
+#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images div {
+  height: 100%;
+}
+#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images div div {
+  height: 100%;
+}
+#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images div div a {
+  display: block;
+  height: 100%;
+}
+#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images div div a img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  -moz-border-radius: 9px; /* pour Mozilla */
+  -khtml-border-radius: 9px; /* pour Safari et Chrome */
+  -webkit-border-radius: 9px; /* pour Safari sur Mac */
+  border-radius: 9px; /* CSS3 */
+}
+@media (max-width: 550px) {
+  #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images div div a img {
+    max-height: 170px;
+  }
+}
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images img {
   width: 100%;
-  height: fit-content;
-  max-height: 250px;
+  height: 100%;
   object-fit: cover;
   -moz-border-radius: 9px; /* pour Mozilla */
   -khtml-border-radius: 9px; /* pour Safari et Chrome */
@@ -1252,31 +1283,37 @@ footer {
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_type_d_actualite {
   text-transform: uppercase;
   color: red;
-  font-size: 0.6rem;
-  font-weight: 600;
+  font-size: 0.8rem;
+  font-family: "gilroy-bold";
   display: inline-flex;
   align-items: center;
 }
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_type_d_actualite::before {
   content: url("../img/type-actu.svg");
-  padding-right: 0.2rem;
+  padding-right: 0.3rem;
+  padding-bottom: 0.2rem;
 }
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_date {
   color: red;
   display: inline-flex;
   align-items: center;
-  font-size: 0.6rem;
+  font-size: 0.8rem;
+  font-family: "gilroy-bold";
 }
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_date::before {
   content: url("../img/date-actu.svg");
-  padding-right: 0.2rem;
+  padding-right: 0.3rem;
+}
+#actus-caroussel .content-actus .views-row article.node-type-actualite .field_title {
+  padding-top: 0.5rem;
 }
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_title h2 {
   margin: 0;
   line-height: 0.4;
+  padding-bottom: 0.8rem;
 }
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_title h2 a {
-  font-size: 0.8rem;
+  font-size: 1rem;
   color: rgb(7, 50, 194);
 }
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_body {
@@ -1285,6 +1322,7 @@ footer {
 }
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_body p {
   margin: 0;
+  font-size: 0.9rem;
 }
 #actus-caroussel .content-actus .views-row:nth-child(odd) {
   position: relative;
@@ -1342,7 +1380,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   display: none;
 }
 #home .paragraph--type--static-parts {
-  padding-top: 2rem;
+  padding-top: 4rem;
   padding-bottom: 2rem;
 }
 #home article.node-type-static .field_body {
@@ -1352,6 +1390,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   flex-direction: row;
   flex-wrap: wrap;
 }
+@media (max-width: 1090px) {
+  #home article.node-type-static .field_body {
+    flex-direction: column;
+  }
+}
 #home article.node-type-static .field_body > p:nth-child(1) {
   margin-bottom: 0;
   flex: 1 100%;
@@ -1382,21 +1425,30 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
     padding-left: 0;
   }
 }
+@media (max-width: 1090px) {
+  #home article.node-type-static .field_body > p:nth-child(3) {
+    padding-top: 0;
+    margin-top: 0;
+  }
+}
 #home article.node-type-static .field_field_title {
   width: fit-content;
   margin: auto;
   font-size: 2rem;
-  font-weight: 800;
+  font-family: "gilroy-bold";
   padding-bottom: 1rem;
 }
 #home article.node-type-static #paragraph-id--1 {
   background-color: #edefe8;
 }
+#home article.node-type-static #paragraph-id--1 .field_field_title {
+  font-family: "gilroy-bold";
+}
 #home article.node-type-static #paragraph-id--1 .field_field_picto {
   display: none;
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte {
-  width: 50%;
+  width: 65%;
   margin: auto;
 }
 @media (max-width: 1090px) {
@@ -1409,19 +1461,26 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
+  padding-left: 6rem;
+}
+@media (max-width: 1090px) {
+  #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto {
+    padding-left: 1.5rem;
+  }
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto h3 {
-  flex: 1 100%;
+  flex: 0 80%;
   color: #0833c2;
   display: flex;
   flex-direction: column;
+  font-size: 1rem;
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto h3:nth-of-type(2) {
   padding-top: 3rem;
   border-top: solid 1px #0833c2;
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p {
-  padding-right: 2rem;
+  padding-right: 1rem;
   padding-bottom: 1rem;
   flex: 1 30%;
   max-width: 30%;
@@ -1438,11 +1497,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(1)::before {
   background-image: url("../img/fanion.svg");
-  background-size: 60px 80px;
+  background-size: 90px 100px;
   background-repeat: no-repeat;
   display: inline-block;
-  width: 80px;
-  height: 80px;
+  width: 100px;
+  height: 100px;
   content: "";
   padding-bottom: 1rem;
 }
@@ -1455,11 +1514,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(2)::before {
   background-image: url("../img/pouce.svg");
-  background-size: 60px 80px;
+  background-size: 90px 100px;
   background-repeat: no-repeat;
   display: inline-block;
-  width: 80px;
-  height: 80px;
+  width: 100px;
+  height: 100px;
   content: "";
   padding-bottom: 1rem;
 }
@@ -1472,11 +1531,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(3)::before {
   background-image: url("../img/planete.svg");
-  background-size: 60px 80px;
+  background-size: 90px 100px;
   background-repeat: no-repeat;
   display: inline-block;
-  width: 80px;
-  height: 80px;
+  width: 100px;
+  height: 100px;
   content: "";
   padding-bottom: 1rem;
 }
@@ -1489,11 +1548,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(4)::before {
   background-image: url("../img/puzzle.svg");
-  background-size: 60px 80px;
+  background-size: 90px 100px;
   background-repeat: no-repeat;
   display: inline-block;
-  width: 80px;
-  height: 80px;
+  width: 100px;
+  height: 100px;
   content: "";
   padding-bottom: 1rem;
 }
@@ -1506,11 +1565,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(5)::before {
   background-image: url("../img/cube.svg");
-  background-size: 70px 80px;
+  background-size: 100px 100px;
   background-repeat: no-repeat;
   display: inline-block;
-  width: 80px;
-  height: 80px;
+  width: 100px;
+  height: 100px;
   content: "";
   padding-bottom: 1rem;
 }
@@ -1523,11 +1582,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(6)::before {
   background-image: url("../img/ampoule.svg");
-  background-size: 60px 80px;
+  background-size: 90px 100px;
   background-repeat: no-repeat;
   display: inline-block;
-  width: 80px;
-  height: 80px;
+  width: 100px;
+  height: 100px;
   content: "";
   padding-bottom: 1rem;
 }
@@ -1540,11 +1599,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(7)::before {
   background-image: url("../img/bonhome.svg");
-  background-size: 60px 80px;
+  background-size: 90px 100px;
   background-repeat: no-repeat;
   display: inline-block;
-  width: 80px;
-  height: 80px;
+  width: 100px;
+  height: 100px;
   content: "";
   padding-bottom: 1rem;
 }
@@ -1557,11 +1616,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(8)::before {
   background-image: url("../img/feuilles.svg");
-  background-size: 60px 80px;
+  background-size: 90px 100px;
   background-repeat: no-repeat;
   display: inline-block;
-  width: 80px;
-  height: 80px;
+  width: 100px;
+  height: 100px;
   content: "";
   padding-bottom: 1rem;
 }
@@ -1574,11 +1633,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(9)::before {
   background-image: url("../img/calendrier.svg");
-  background-size: 60px 80px;
+  background-size: 90px 100px;
   background-repeat: no-repeat;
   display: inline-block;
-  width: 80px;
-  height: 80px;
+  width: 100px;
+  height: 100px;
   content: "";
   padding-bottom: 1rem;
 }
@@ -1591,11 +1650,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(10)::before {
   background-image: url("../img/crayons.svg");
-  background-size: 48px 80px;
+  background-size: 60px 100px;
   background-repeat: no-repeat;
   display: inline-block;
-  width: 80px;
-  height: 80px;
+  width: 100px;
+  height: 100px;
   content: "";
   padding-bottom: 1rem;
 }
@@ -1611,7 +1670,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   flex-direction: column;
   margin: auto;
   align-items: center;
-  width: 70%;
   padding-bottom: 2rem;
 }
 @media (max-width: 500px) {
@@ -1620,30 +1678,47 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
     text-align: center;
   }
 }
+#home article.node-type-static #paragraph-id--6 .field_field_title {
+  padding-top: 4rem;
+  padding-bottom: 2rem;
+}
+@media (max-width: 500px) {
+  #home article.node-type-static #paragraph-id--6 .field_field_title {
+    padding-top: 0;
+  }
+}
 #home article.node-type-static #paragraph-id--6 .field_field_texte {
+  width: 50%;
   margin: auto;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static #paragraph-id--6 .field_field_texte {
+    width: 90%;
+  }
+}
 #home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto {
   display: flex;
   flex-direction: column;
 }
 #home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(1) {
   color: #0833c2;
-  font-size: 1.5rem;
+  font-size: 1rem;
   font-weight: 800;
 }
 #home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(2) {
   width: 60%;
-  font-size: 1.2rem;
+  font-size: 0.8rem;
   align-self: center;
+  padding-top: 1.5rem;
 }
 @media (max-width: 500px) {
   #home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(2) {
     width: 80%;
+    padding-top: 0;
   }
 }
 #home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(3) {
-  width: 80%;
+  width: 90%;
   align-self: center;
   margin-top: 0;
 }
@@ -1661,10 +1736,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   color: white;
 }
 #home article.node-type-static #paragraph-id--7 .field_field_title {
-  width: 50%;
+  width: 48%;
   text-transform: lowercase;
   padding-top: 3rem;
   text-align: center;
+  font-size: 1.8rem;
 }
 @media (max-width: 550px) {
   #home article.node-type-static #paragraph-id--7 .field_field_title {
@@ -1674,11 +1750,18 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 #home article.node-type-static #paragraph-id--7 .field_field_texte {
   width: 80%;
 }
+@media (max-width: 700px) {
+  #home article.node-type-static #paragraph-id--7 .field_field_texte {
+    position: relative;
+    top: -80px;
+  }
+}
 #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto {
   margin-top: 2rem;
+  padding-left: 4rem;
   display: grid;
   grid-template-columns: repeat(6 auto);
-  grid-template-rows: repeat(3 1fr);
+  grid-template-rows: repeat(3 auto);
 }
 @media (max-width: 700px) {
   #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto {
@@ -1695,6 +1778,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(1) {
   grid-row: 2;
   grid-column: 1;
+  padding-left: 1rem;
 }
 #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(2) {
   grid-row: 2;
@@ -1705,6 +1789,8 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
     grid-row: 4;
     grid-column: 2;
     margin: auto;
+    top: -50px;
+    position: relative;
   }
 }
 #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) {
@@ -1715,58 +1801,85 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) {
     grid-row: 8;
     grid-column: 1;
+    padding-left: 1rem;
   }
 }
 #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p {
-  font-size: 1rem;
+  font-size: 0.8rem;
   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;
 }
+@media (max-width: 700px) {
+  #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p {
+    font-size: 1.2rem;
+  }
+}
 #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;
+  padding: 1rem;
 }
 @media (max-width: 700px) {
   #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(1) {
-    width: 315px;
+    width: 260px;
+    top: 50px;
+    position: relative;
   }
 }
 #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) {
   grid-row: 3;
   grid-column: inherit;
+  padding: 1rem;
+  padding-left: 0;
 }
 @media (max-width: 700px) {
   #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) {
     grid-row: 4;
     grid-column: 1/span 2;
-    width: 315px;
+    width: 260px;
+    padding-left: 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;
+  padding: 1rem;
+  padding-left: 0;
+  position: relative;
+  left: -0.5rem;
 }
 @media (max-width: 700px) {
   #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) {
     grid-row: 8;
     grid-column: 1/span 2;
-    width: 315px;
+    width: 260px;
+    top: -50px;
+    left: 0rem;
+    padding-left: 1rem;
+    position: relative;
   }
 }
 #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;
+  padding-left: 1rem;
 }
 #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(2) {
+  display: block;
   grid-row: 1;
+  height: fit-content;
+  padding-top: 0%;
 }
 @media (max-width: 700px) {
   #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(2) {
     grid-row: 7;
     grid-column: 1/span 2;
+    padding: 1rem;
+    top: -60px;
+    position: relative;
   }
 }
 #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) {
@@ -1777,6 +1890,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) {
     grid-row: 9;
     grid-column: 1/span 2;
+    padding-left: 1rem;
+    top: -80px;
+    position: relative;
   }
 }
 #home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
@@ -1799,7 +1915,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   text-transform: none;
   color: black;
   font-size: 2rem;
-  font-weight: 500;
 }
 #consultation .layout-content .content_container .node-type-static {
   width: 80%;
@@ -1811,6 +1926,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   width: 80%;
   margin: auto;
 }
+#consultation .layout-content .content_container .node-type-static .field_field_title {
+  font-family: "gilroy-semibold";
+}
 #consultation .layout-content .content_container .node-type-static .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
   display: none;
 }
@@ -1823,7 +1941,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   padding: 1rem;
   color: rgb(7, 50, 194);
   font-size: 2.5rem;
-  font-weight: 500;
 }
 @media (max-width: 500px) {
   #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .field_field_title {
@@ -1853,7 +1970,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   content: "";
   display: block;
   border-left: solid 1px rgb(7, 50, 194);
-  height: 30%;
+  height: 20%;
   margin-bottom: 0.5rem;
 }
 @media (max-width: 500px) {
@@ -1865,6 +1982,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   color: black;
   width: 55%;
   padding-top: 2rem;
+  margin-top: 2rem;
   margin: auto;
 }
 @media (max-width: 500px) {
@@ -1873,7 +1991,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   }
 }
 #consultation .layout-content .content_container .node-type-static #paragraph-id--11 {
-  width: 65%;
+  width: 70%;
   background-color: white;
   margin: auto;
   display: flex;
@@ -1890,7 +2008,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .field_field_title {
   color: rgb(7, 50, 194);
   font-size: 1.2rem;
-  font-weight: 500;
 }
 @media (max-width: 500px) {
   #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .field_field_title {
@@ -1903,28 +2020,27 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   grid-template-rows: auto auto;
   padding: 1rem;
 }
-@media (max-width: 500px) {
-  #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
 #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p {
-  flex: 1 15%;
   padding: 0rem;
   margin: 0;
 }
 #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p:nth-of-type(1) {
   grid-column: 1;
   grid-row: 2;
+  padding-right: 5rem;
+}
+@media (max-width: 500px) {
+  #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p:nth-of-type(1) {
+    padding-right: 1rem;
+  }
 }
 #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p:nth-of-type(2) {
   grid-column: 2;
   grid-row: 2;
 }
 #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto h5 {
-  font-size: 3rem;
-  font-weight: 500;
+  font-size: 3.5rem;
+  font-family: "gilroy-semibold";
   color: rgb(7, 50, 194);
   margin: 0;
   height: fit-content;
@@ -1957,7 +2073,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   color: rgb(7, 50, 194);
   font-size: 1.2rem;
   font-weight: 500;
-  padding-bottom: 1.5rem;
+  padding-bottom: 1rem;
 }
 @media (max-width: 500px) {
   #consultation .layout-content .content_container .node-type-static #paragraph-id--12 .field_field_title,
@@ -1965,6 +2081,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
     padding-bottom: 0.8rem;
   }
 }
+#consultation .layout-content .content_container .node-type-static #paragraph-id--12 .field_field_texte {
+  width: 80%;
+}
 #consultation .layout-content .content_container .node-type-static #paragraph-id--12::after {
   content: "";
   display: block;
@@ -2054,7 +2173,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   grid-column: 3/span 4;
   grid-row: 1;
   font-weight: 500;
-  font-size: 0.6rem;
+  font-size: 0.8rem;
   margin-left: 1rem;
 }
 @media (max-width: 810px) {
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/date-actu.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/date-actu.svg
index b22c37b..de7d496 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/img/date-actu.svg
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/date-actu.svg
@@ -4,8 +4,8 @@
 <svg
    version="1.1"
    id="svg1"
-   width="22"
-   height="22"
+   width="30"
+   height="30"
    viewBox="0 0 31.925354 31.926757"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
@@ -26,7 +26,7 @@
     <path
        id="path412"
        d="m 0,0 c 0,6.372 5.166,11.538 11.538,11.538 6.371,0 11.537,-5.166 11.537,-11.538 0,-6.372 -5.166,-11.538 -11.537,-11.538 C 5.166,-11.538 0,-6.372 0,0 Z m 11.114,0.606 c 0.281,0.281 0.736,0.281 1.017,0 0.281,-0.28 0.281,-0.735 0,-1.016 -0.281,-0.28 -0.736,-0.28 -1.017,0 -0.28,0.281 -0.28,0.736 0,1.016 z m 0.424,-0.521 6.218,6.219 m -6.218,-6.219 4.945,-4.946"
-       style="fill:none;stroke:#f7002b;stroke-width:0.869;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       style="fill:none;stroke:#f7002b;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
        transform="matrix(1.3333333,0,0,-1.3333333,881.07533,11164.68)"
        clip-path="url(#clipPath413)" />
   </g>
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/next.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/next.svg
index c6f4d2b..8e11e64 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/img/next.svg
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/next.svg
@@ -4,8 +4,8 @@
 <svg
    version="1.1"
    id="svg1"
-   width="55"
-   height="55"
+   width="75"
+   height="75"
    viewBox="0 0 90.491943 90.492186"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg
index c930ac7..2ee4c56 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg
@@ -4,8 +4,8 @@
 <svg
    version="1.1"
    id="svg1"
-   width="55"
-   height="55"
+   width="75"
+   height="75"
    viewBox="0 0 90.490723 90.492186"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/type-actu.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/type-actu.svg
index a3c98cf..5c9b6ed 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/img/type-actu.svg
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/type-actu.svg
@@ -4,8 +4,8 @@
 <svg
    version="1.1"
    id="svg1"
-   width="22"
-   height="22"
+   width="30"
+   height="30"
    viewBox="0 0 33.440002 38.374023"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
@@ -26,7 +26,7 @@
     <path
        id="path410"
        d="M 0,0 V 2.406 L 9.495,12.03 11.868,9.624 2.374,0 Z M 7.121,9.624 9.495,7.218 M 7.596,13.474 V 23.82 c 0,0.665 -0.532,1.203 -1.187,1.203 H 3.086 m -10.682,0 h -3.56 c -0.656,0 -1.187,-0.538 -1.187,-1.203 V 1.203 C -12.343,0.539 -11.812,0 -11.156,0 h 8.308 m 3.797,26.948 h -1.986 c -0.196,0.559 -0.717,0.963 -1.337,0.963 -0.619,0 -1.14,-0.404 -1.337,-0.963 h -1.986 c -1.048,0 -1.899,-0.862 -1.899,-1.925 V 24.061 H 2.848 v 0.962 c 0,1.063 -0.85,1.925 -1.899,1.925 z"
-       style="fill:none;stroke:#f7002b;stroke-width:0.869;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       style="fill:none;stroke:#f7002b;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
        transform="matrix(1.3333333,0,0,-1.3333333,897.53253,11134.014)"
        clip-path="url(#clipPath411)" />
   </g>
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_fonts.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_fonts.scss
index fa4a756..c1485d0 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_fonts.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_fonts.scss
@@ -6,8 +6,8 @@
 
 @font-face {
     font-family: 'gilroy-semiboldita';
-    src: url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-semibolditalic-webfont.woff2') format('woff2'),
-         url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-semibolditalic-webfont.woff') format('woff');
+    src: url('../fonts/Gilroy/gilroy-semibolditalic-webfont.woff2') format('woff2'),
+         url('../fonts/Gilroy/gilroy-semibolditalic-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 
@@ -18,8 +18,8 @@
 
 @font-face {
     font-family: 'gilroy-semibold';
-    src: url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-semibold-webfont.woff2') format('woff2'),
-         url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
+    src: url('../fonts/Gilroy/gilroy-semibold-webfont.woff2') format('woff2'),
+         url('../fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 
@@ -30,8 +30,8 @@
 
 @font-face {
     font-family: 'gilroy-regularita';
-    src: url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-regularitalic-webfont.woff2') format('woff2'),
-         url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-regularitalic-webfont.woff') format('woff');
+    src: url('../fonts/Gilroy/gilroy-regularitalic-webfont.woff2') format('woff2'),
+         url('../fonts/Gilroy/gilroy-regularitalic-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 
@@ -42,8 +42,8 @@
 
 @font-face {
     font-family: 'gilroy-regular';
-    src: url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-regular-webfont.woff2') format('woff2'),
-         url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-regular-webfont.woff') format('woff');
+    src: url('../fonts/Gilroy/gilroy-regular-webfont.woff2') format('woff2'),
+         url('../fonts/Gilroy/gilroy-regular-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 
@@ -51,23 +51,20 @@
 
 
 
-
 @font-face {
     font-family: 'gilroy-bolditalic';
-    src: url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-bolditalic-webfont.woff2') format('woff2'),
-         url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-bolditalic-webfont.woff') format('woff');
+    src: url('../fonts/Gilroy/gilroy-bolditalic-webfont.woff2') format('woff2'),
+         url('../fonts/Gilroy/gilroy-bolditalic-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 
 }
 
 
-
-
 @font-face {
     font-family: 'gilroy-bold';
     src: url('../fonts/Gilroy/gilroy-bold-webfont.woff2') format('woff2'),
-         url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-bold-webfont.woff') format('woff');
+         url('../fonts/Gilroy/gilroy-bold-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 
@@ -76,8 +73,8 @@
 
 @font-face {
     font-family: 'gilroy-mediumital';
-    src: url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-mediumitalic-webfont.woff2') format('woff2'),
-         url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-mediumitalic-webfont.woff') format('woff');
+    src: url('../fonts/Gilroy/gilroy-mediumitalic-webfont.woff2') format('woff2'),
+         url('../fonts/Gilroy/gilroy-mediumitalic-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/variables/_typography.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/variables/_typography.scss
index 60cddde..24a8bbd 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/variables/_typography.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/variables/_typography.scss
@@ -8,7 +8,7 @@ $font-extra: 2.3rem;
 $font-large: 1.6rem;
 $font-big: 1.2rem;
 $font-medium: .8rem;
-$font-normal: .6rem;
+$font-normal: .8rem;
 $font-small: .45rem;
 
 
@@ -18,4 +18,11 @@ p{
 
 h3{
     font-size: $font-big;
+}
+
+h1{
+    font-family: 'gilroy-bold';
+}
+h2{
+    font-family: 'gilroy-semibold';
 }
\ No newline at end of file
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss
index b93bd60..e3d2072 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss
@@ -8,6 +8,7 @@
             display: flex;
             flex-direction: column;
             align-items: center;
+
             #block-quartiers-de-demain-titredepage{
                 margin-top: 1rem;
                 width: fit-content;
@@ -15,7 +16,6 @@
                     text-transform: none;
                     color: black;
                     font-size: 2rem;
-                    font-weight: 500;
                 }
                 
 
@@ -29,7 +29,9 @@
                     width: 80% ;
                     margin: auto;
                 }
-                
+                .field_field_title{
+                    font-family: 'gilroy-semibold';
+                }
                 width: 80%;
                 .paragraph--type--static-parts:not(#paragraph-id--7){
                     #svg1{
@@ -44,7 +46,6 @@
                         padding: 1rem;
                         color: $blue_QDD;
                         font-size: 2.5rem;
-                        font-weight: 500;
                         @media(max-width: 500px){
                             font-size: 2.2rem;
                             padding: 0rem;
@@ -69,7 +70,7 @@
                                 content:"";
                                 display: block;
                                 border-left: solid 1px $blue_QDD;
-                                height: 30%;
+                                height: 20%;
                                 margin-bottom: 0.5rem;
                                 @media(max-width: 500px){
                                     height: 15%;
@@ -82,6 +83,7 @@
                             // flex: 1 80%;
                             width: 55%;
                             padding-top: 2rem;
+                            margin-top: 2rem;
                             margin: auto;
                             @media(max-width: 500px){
                                 width: 80%;
@@ -91,7 +93,7 @@
                     }                 
                 }  
                 #paragraph-id--11{
-                    width: 65%;
+                    width: 70%;
                     background-color: white;
                     margin: auto;
                     display: flex;
@@ -105,7 +107,6 @@
                     .field_field_title{
                         color: $blue_QDD;
                         font-size: 1.2rem;
-                        font-weight: 500;
                         @media(max-width: 500px){
                             width: 80%;
                         }
@@ -115,18 +116,18 @@
                         grid-template-columns: auto auto;
                         grid-template-rows: auto auto;
                         padding: 1rem;
-                        @media(max-width: 500px){
-                            padding-left: 0;
-                            padding-right: 0;
-                        }
+
                         p{
-                            flex: 1 15%;
                             padding: 0rem;
                             margin: 0;
                             
                             &:nth-of-type(1){
                                 grid-column: 1;
                                 grid-row: 2;
+                                padding-right: 5rem;
+                                @media(max-width: 500px){
+                                    padding-right: 1rem;
+                                }
                             }
                             &:nth-of-type(2){
                                 grid-column: 2;
@@ -135,8 +136,8 @@
                         }
                         h5{
                             
-                            font-size: 3rem;
-                            font-weight: 500;
+                            font-size: 3.5rem;
+                            font-family: 'gilroy-semibold';
                             color: $blue_QDD;
                             margin: 0;
                             height: fit-content;
@@ -167,14 +168,18 @@
                         color: $blue_QDD;
                         font-size: 1.2rem;
                         font-weight: 500;
-                        padding-bottom: 1.5rem;
+                        padding-bottom: 1rem;
                         @media(max-width: 500px){
                             padding-bottom: 0.8rem;
                         }
 
                     }
                 }
-
+                #paragraph-id--12{
+                    .field_field_texte{
+                        width: 80%;
+                    }
+                }
                 #paragraph-id--12::after{
                         content:"";
                         display: block;
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 72d10f0..4432bb6 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
@@ -5,7 +5,7 @@
         }
     }
     .paragraph--type--static-parts{
-        padding-top: 2rem;
+        padding-top: 4rem;
         padding-bottom: 2rem;
     }
     article.node-type-static{
@@ -15,6 +15,9 @@
             display: flex;
             flex-direction: row;
             flex-wrap: wrap ;
+            @media(max-width: 1090px){
+                flex-direction: column;
+            }
             > p:nth-child(1){
                 margin-bottom: 0;
                 flex: 1 100%;
@@ -38,21 +41,30 @@
                     padding-left: 0 ;
                 }
             }
+            > p:nth-child(3){
+                @media(max-width: 1090px){
+                    padding-top: 0 ;
+                    margin-top: 0;
+                }
+            }
         }
         .field_field_title{
             width: fit-content;
             margin: auto;
             font-size: 2rem;
-            font-weight: 800;
+            font-family: 'gilroy-bold';
             padding-bottom: 1rem;
         }
         #paragraph-id--1{  ///// Les enjeux
             background-color: #edefe8;
+            .field_field_title{
+                font-family: 'gilroy-bold';
+            }
             .field_field_picto{
                 display: none;
             }
             .field_field_texte{
-                width: 50%;
+                width: 65%;
                 margin: auto;
                 @media(max-width: 1090px){
                     width: 80%;
@@ -62,22 +74,24 @@
                     flex-direction: row;
                     flex-wrap: wrap;
                     justify-content: flex-start;
+                    padding-left: 6rem;
+                    @media(max-width: 1090px){
+                        padding-left: 1.5rem;
+                    }
                    
                     h3{
-                        flex: 1 100%;
+                        flex: 0 80%;
                         color: #0833c2ff;
-                        // width: 80%;
-                        // padding-right: 3rem;
                         display: flex;
                         flex-direction: column;
+                        font-size: 1rem;
                         &:nth-of-type(2){
-                            
                             padding-top: 3rem;
                             border-top: solid 1px #0833c2ff;
                         }
                     }
                     p{
-                        padding-right: 2rem;
+                        padding-right: 1rem;
                         padding-bottom: 1rem;
                         flex: 1 30%;
                         max-width: 30%;
@@ -91,11 +105,11 @@
                         }
                         &:nth-of-type(1)::before{
                             background-image: url("../img/fanion.svg");
-                            background-size: 60px 80px;
+                            background-size: 90px 100px;
                             background-repeat: no-repeat;
                             display: inline-block;
-                            width: 80px;
-                            height: 80px;
+                            width: 100px;
+                            height: 100px;
                             content: "";
                             padding-bottom: 1rem;
                             @media(max-width: 500px){
@@ -106,11 +120,11 @@
                         }
                         &:nth-of-type(2)::before{
                             background-image: url("../img/pouce.svg");
-                            background-size: 60px 80px;
+                            background-size: 90px 100px;
                             background-repeat: no-repeat;
                             display: inline-block;
-                            width: 80px;
-                            height: 80px;
+                            width: 100px;
+                            height: 100px;
                             content: "";
                             padding-bottom: 1rem;
                             @media(max-width: 500px){
@@ -121,11 +135,11 @@
                         }
                         &:nth-of-type(3)::before{
                             background-image: url("../img/planete.svg");
-                            background-size: 60px 80px;
+                            background-size: 90px 100px;
                             background-repeat: no-repeat;
                             display: inline-block;
-                            width: 80px;
-                            height: 80px;
+                            width: 100px;
+                            height: 100px;
                             content: "";
                             padding-bottom: 1rem;
                             @media(max-width: 500px){
@@ -137,11 +151,11 @@
                         }
                         &:nth-of-type(4)::before{
                             background-image: url("../img/puzzle.svg");
-                            background-size: 60px 80px;
+                            background-size: 90px 100px;
                             background-repeat: no-repeat;
                             display: inline-block;
-                            width: 80px;
-                            height: 80px;
+                            width: 100px;
+                            height: 100px;
                             content: "";
                             padding-bottom: 1rem;
                             @media(max-width: 500px){
@@ -152,11 +166,11 @@
                         }
                         &:nth-of-type(5)::before{
                             background-image: url("../img/cube.svg");
-                            background-size: 70px 80px;
+                            background-size: 100px 100px;
                             background-repeat: no-repeat;
                             display: inline-block;
-                            width: 80px;
-                            height: 80px;
+                            width: 100px;
+                            height: 100px;
                             content: "";
                             padding-bottom: 1rem;
                             @media(max-width: 500px){
@@ -167,11 +181,11 @@
                         }
                         &:nth-of-type(6)::before{
                             background-image: url("../img/ampoule.svg");
-                            background-size: 60px 80px;
+                            background-size: 90px 100px;
                             background-repeat: no-repeat;
                             display: inline-block;
-                            width: 80px;
-                            height: 80px;
+                            width: 100px;
+                            height: 100px;
                             content: "";
                             padding-bottom: 1rem;
                             @media(max-width: 500px){
@@ -182,11 +196,11 @@
                         }
                         &:nth-of-type(7)::before{
                             background-image: url("../img/bonhome.svg");
-                            background-size: 60px 80px;
+                            background-size: 90px 100px;
                             background-repeat: no-repeat;
                             display: inline-block;
-                            width: 80px;
-                            height: 80px;
+                            width: 100px;
+                            height: 100px;
                             content: "";
                             padding-bottom: 1rem;
                             @media(max-width: 500px){
@@ -197,11 +211,11 @@
                         }
                         &:nth-of-type(8)::before{
                             background-image: url("../img/feuilles.svg");
-                            background-size: 60px 80px;
+                            background-size: 90px 100px;
                             background-repeat: no-repeat;
                             display: inline-block;
-                            width: 80px;
-                            height: 80px;
+                            width: 100px;
+                            height: 100px;
                             content: "";
                             padding-bottom: 1rem;
                             @media(max-width: 500px){
@@ -212,11 +226,11 @@
                         }
                         &:nth-of-type(9)::before{
                             background-image: url("../img/calendrier.svg");
-                            background-size: 60px 80px;
+                            background-size: 90px 100px;
                             background-repeat: no-repeat;
                             display: inline-block;
-                            width: 80px;
-                            height: 80px;
+                            width: 100px;
+                            height: 100px;
                             content: "";
                             padding-bottom: 1rem;
                             @media(max-width: 500px){
@@ -227,11 +241,11 @@
                         }
                         &:nth-of-type(10)::before{
                             background-image: url("../img/crayons.svg");
-                            background-size: 48px 80px;
+                            background-size: 60px 100px;
                             background-repeat: no-repeat;
                             display: inline-block;
-                            width: 80px;
-                            height: 80px;
+                            width: 100px;
+                            height: 100px;
                             content: "";
                             padding-bottom: 1rem;
                             @media(max-width: 500px){
@@ -245,38 +259,50 @@
             }
         }
 
-
         #paragraph-id--6{  /////// quartier 2030
             display: flex;
             flex-direction: column;
             margin: auto;
             align-items: center;
-            width: 70%;
             padding-bottom: 2rem;
             @media(max-width: 500px){
                 width: 90%;
                 text-align: center;
             }
+            .field_field_title{
+                padding-top: 4rem;
+                padding-bottom: 2rem;
+                @media(max-width: 500px){
+                 padding-top: 0;
+                }
+
+            }
             .field_field_texte{
+                width: 50%;
                 margin: auto;
+                @media(max-width: 500px){
+                    width: 90%;
+                   }
                 .colone-picto{
                     display: flex;
                     flex-direction: column;
                     > p:nth-of-type(1){
                         color: #0833c2ff;
-                        font-size: 1.5rem;
+                        font-size: 1rem;
                         font-weight: 800
                     }
                     > p:nth-of-type(2){
                         width: 60%;
-                        font-size: 1.2rem;
+                        font-size: 0.8rem;
                         align-self: center;
+                        padding-top: 1.5rem;
                         @media(max-width: 500px){
                             width: 80%;
+                            padding-top: 0;
                         }
                     }
                     > p:nth-of-type(3){
-                        width: 80%;
+                        width: 90%;
                         align-self: center;
                         margin-top: 0 ;
                         img{
@@ -287,6 +313,7 @@
                 }
             }
         }
+
         #paragraph-id--7{ ///////// les piliers
             background-color: #0833c2ff;
             display: flex;
@@ -296,21 +323,27 @@
             padding-bottom: 2rem;
             color: white;
             .field_field_title{
-                width: 50%;
+                width: 48%;
                 text-transform: lowercase;
                 padding-top: 3rem;
                 text-align: center;
+                font-size: 1.8rem;
                 @media(max-width: 550px){
                     width: 90%;
                 }
             }
             .field_field_texte{
                 width: 80%;
+                @media(max-width: 700px){
+                position: relative;
+                top: -80px;
+                }
                 .colone-picto{
                     margin-top: 2rem;
+                    padding-left: 4rem;
                     display: grid;
                     grid-template-columns: repeat(6 auto);
-                    grid-template-rows: repeat(3 1fr);
+                    grid-template-rows: repeat(3 auto);
                     @media(max-width: 700px){
                         grid-template-rows: repeat(10 auto);
                         grid-template-columns: repeat(2 1fr);
@@ -325,6 +358,7 @@
                     h5:nth-of-type(1){
                         grid-row: 2;
                         grid-column: 1;
+                        padding-left: 1rem;
                         
                     }
                     h5:nth-of-type(2){
@@ -334,6 +368,8 @@
                             grid-row: 4;
                             grid-column: 2;
                             margin: auto;
+                            top: -50px;
+                            position: relative;
                         }
                     }
                     h5:nth-of-type(3){
@@ -342,50 +378,76 @@
                         @media(max-width: 700px){
                             grid-row: 8;
                             grid-column: 1;
+                            padding-left: 1rem;
                         }
                     }
                     p{
-                        font-size: 1rem;
+                        font-size: 0.8rem;
                         font-weight: 400;
                         margin: 0;
                         &:not(:last-of-type){
                             padding-right: 2rem;
                         }
+                        @media(max-width: 700px){
+                        font-size: 1.2rem;
+                        }
                     }
                     svg:nth-of-type(1){
                         grid-row: 1 /span 2;
                         grid-column: 1 /span 2;
+                        padding: 1rem;
                         @media(max-width: 700px){
-                           width: 315px;
+                           width: 260px;
+                           top: 50px;
+                            position: relative;
                         }
                     }
                     svg:nth-of-type(2){
                         grid-row: 3;
                         grid-column: inherit;
+                        padding: 1rem;
+                        padding-left: 0;
                         @media(max-width: 700px){
                             grid-row: 4;
                             grid-column: 1 /span 2 ;
-                            width: 315px;
+                            width: 260px;
+                            padding-left: 1rem;
+                            
                         }
                     }
                     svg:nth-of-type(3){
                         grid-row: 1 /span 2;
                         grid-column: 5 /span 6;
+                        padding: 1rem;
+                        padding-left: 0;
+                        position: relative;
+                        left: -0.5rem;
                         @media(max-width: 700px){
                             grid-row: 8 ;
                             grid-column: 1 /span 2;
-                            width: 315px;
+                            width: 260px;
+                            top: -50px;
+                            left: 0rem;
+                            padding-left: 1rem;
+                            position: relative;
                         }
                     }
                     p:nth-of-type(1){
                         grid-row: 3;
                         grid-column: 1 /span 2;
+                        padding-left: 1rem;
                     }
                     p:nth-of-type(2){
+                        display: block;
                         grid-row: 1;
+                        height: fit-content;
+                        padding-top: 0%;
                         @media(max-width: 700px){
                             grid-row: 7;
                             grid-column:  1 /span 2;
+                            padding: 1rem;
+                            top: -60px;
+                            position: relative;
                         }
                     }
                     p:nth-of-type(3){
@@ -394,6 +456,9 @@
                         @media(max-width: 700px){
                             grid-row: 9;
                             grid-column:  1 /span 2;
+                            padding-left: 1rem;
+                            top: -80px;
+                            position: relative;
                         }
                     }
                 }
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss
index 48d23af..c26a8ff 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss
@@ -5,11 +5,11 @@
     padding-bottom: 3rem;
     h2{
         width: fit-content;
-        padding-bottom: 0.4rem;
-        margin-top: 3rem;
+        padding-bottom: 1.5rem;
+        margin-top: 4rem;
         margin-bottom: 3rem;
         font-size: 1.7rem;
-        font-weight: bold;
+        font-family: 'gilroy-semibold';
     }
     .content-actus{
         .view{
@@ -20,8 +20,9 @@
             
         }
         .views-row{
-            width: 500px !important;
-            padding: 2rem;
+            width: 650px !important;
+            padding: 1rem;
+            
             @media(max-width: 550px){
                 width: 296px !important;
             }
@@ -29,19 +30,43 @@
                 display: flex;
                 flex-direction: column;
                 .field_field_images{
+                    background-color: black;
                     -moz-border-radius: 9px; /* pour Mozilla */
                     -khtml-border-radius: 9px; /* pour Safari et Chrome */
                     -webkit-border-radius: 9px; /* pour Safari sur Mac */
                     border-radius: 9px; /* CSS3 */
-                    height: 250px;
+                    height: 350px;
                     margin-bottom: 0.6rem;
                     @media(max-width: 550px){
                         height: 170px;
                     }
+                    div{
+                        height: 100%;
+                        div{
+                            height: 100%;
+
+                            a{
+                                display: block;
+                                height: 100%;
+                                img{
+                                    width: 100%;
+                                    height: 100%;
+                                    object-fit: cover;
+                                    -moz-border-radius: 9px; /* pour Mozilla */
+                                    -khtml-border-radius: 9px; /* pour Safari et Chrome */
+                                    -webkit-border-radius: 9px; /* pour Safari sur Mac */
+                                    border-radius: 9px; /* CSS3 */
+                                    @media(max-width: 550px){
+                                        max-height: 170px;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    
                     img{
                         width: 100%;
-                        height: fit-content;
-                        max-height: 250px;
+                        height: 100%;
                         object-fit: cover;
                         -moz-border-radius: 9px; /* pour Mozilla */
                         -khtml-border-radius: 9px; /* pour Safari et Chrome */
@@ -56,33 +81,38 @@
                 .field_field_type_d_actualite{
                     text-transform: uppercase;
                     color: red;
-                    font-size: 0.6rem;
-                    font-weight: 600;
+                    font-size: 0.8rem;
+                    font-family: 'gilroy-bold';
                     display: inline-flex;
                     align-items: center;
                     &::before{
                         content: url('../img/type-actu.svg');
-                        padding-right: 0.2rem;
+                        padding-right: 0.3rem;
+                        padding-bottom: 0.2rem;
                     }
                 }
                 .field_field_date{
                     color: red;
                     display: inline-flex;
                     align-items: center;
-                    font-size: 0.6rem;
+                    font-size: 0.8rem;
+                    font-family: 'gilroy-bold';
+
                     &::before{
                         content: url('../img/date-actu.svg');
-                        padding-right: 0.2rem;
+                        padding-right: 0.3rem;
                     }
                 }
             
 
                 .field_title{
+                    padding-top: 0.5rem;
                     h2{
                         margin: 0;
                         line-height: 0.4;
+                        padding-bottom: 0.8rem;
                         a{
-                            font-size: 0.8rem;
+                            font-size: 1rem;
                             color: $blue_QDD;
                         }
                     } 
@@ -93,6 +123,7 @@
                     transform: none !important;
                     p{
                         margin: 0;
+                        font-size: 0.9rem ;
                     }
                 }
             }
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
index d4eca10..a3d8995 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
@@ -223,15 +223,3 @@ header{
     }
 
 }
-// /* Initial state of SVG */
-// .qdd-animated{
-//     opacity: 1;
-//     transform: scale(0.5);
-//     transition: opacity 0.5s, transform 0.5s;
-//   }
-  
-//   /* Animated state of SVG */
-//   .header:not(.header--collapsed .header--collapsed-already) .qdd-animated {
-//     opacity: 1;
-//     transform: scale(1);
-//   }
\ No newline at end of file
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss
index 23b9f20..bd152fd 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss
@@ -115,7 +115,7 @@ $slick-opacity-not-active: 0.25 !default;
 .slick-prev {
     left: 46%;
     @media(max-width:810px){
-        left: 36%;
+        left: 29%;
     }
     [dir="rtl"] & {
         left: auto;
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
index 3a6c0a3..c61627a 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
@@ -16,9 +16,9 @@
     h2{
         width: fit-content;
         margin: auto;
-        padding-top: 3rem;
+        padding-top: 4rem;
         font-size: 1.7rem;
-        font-weight: bold;
+
     }
 
     }
@@ -112,9 +112,9 @@
                         margin: auto;
                         align-items: flex-start;
                         padding-right: 1rem;
-                        margin-bottom: 2rem;
+                        margin-bottom: 1rem;
                         .field_field_date_de_jour{
-                            font-size: 2rem;
+                            font-size: 2.5rem;
                             line-height: 0.3rem;
                             @media(max-width:550px){
                                 font-size: 3rem;
@@ -124,7 +124,7 @@
                         .field_field_date_de_moi{
                             padding-right: 0.2rem;
                             text-transform: uppercase;
-                            font-size: 3rem;
+                            font-size: 4rem;
                             display: inline-flex;
                             @media(max-width:550px){
                                 font-size: 4rem;
@@ -186,7 +186,7 @@
                         // width: fit-content;
                         min-width: 65%;
                         .field_field_titre{
-                            font-size: 0.5rem;
+                            font-size: 0.6rem;
                             font-weight: 800;
                             @media(max-width:1090px){
                                 font-size: 1rem;
@@ -194,7 +194,7 @@
                         }
                         .field_field_description{
                             p{
-                                font-size: 0.5rem !important;
+                                font-size: 0.6rem !important;
                                 margin: 0;  
                                 @media(max-width:1090px){
                                     font-size: 1rem !important;