diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js
index eb5568d..aaaaa80 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js
@@ -36,7 +36,7 @@ eval("\nfunction setLogoContainerSize() {\n    let svgContainer = document.query
   \**********************************************/
 /***/ (() => {
 
-eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n    'use strict';\n  \n    Drupal.behaviors.quartiers_de_demain = {\n      attach: function (context, settings) {\n        console.log('It works!');\n      }\n    };\n  } (Drupal));\n\n  \n  jQuery(document).ready(function($){\n\n    $('.open-block').click(function(){\n      $(this).toggleClass('opened');\n\n      $('.header_nav_container').toggleClass('display-nav-opened');\n    \n      if(mobile == true){\n        $(\"body\").css(\"overflow\",\"hidden\");\n      }\n\n    });\n  \n    // Hide the header_nav_container when a link inside it is clicked\n    $('.header_nav_container li').click(function() {\n        $('.header_nav_container').fadeOut();\n    });\n\n\n\n\n});\n\n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n  var adjustAnchor = function() {\n      var $anchor = $('.sidebar_first_container'),\n              fixedElementHeight = 500;\n      if ($anchor.length > 0) {\n          $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n      }\n  };\n\n  $(window).on('hashchange', function() {\n      adjustAnchor();\n  });\n\n\n//////////////////////////////////////////// smooth apparition des textes\n\n\nfunction scrollReaveal(){\n\n  const nodes = {\n    logo : document.querySelectorAll('#logo-animated-container'),\n    chapeau :  document.querySelectorAll('.field_body'),\n    paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n  }\n\n  const showUp = {\n      origin: 'bottom',\n      delay: 100,\n      duration: 1000,\n      distance: '50px',\n      easing: 'cubic-bezier(0.5, 0, 0, 1)'\n  }\n\n  const Show = {\n    delay: 100,\n    duration: 600,\n    easing: 'cubic-bezier(0.5, 0, 0, 1)'\n  }\n\n  console.log(nodes);\n\n  ScrollReveal().reveal(nodes.logo, Show);\n  ScrollReveal().reveal(nodes.chapeau, showUp);\n  ScrollReveal().reveal(nodes.paragraph, showUp);\n}\n\n\n$( document ).ready(function() {\n  scrollReaveal();\n});\n\n\n\n//  slideshow home \n\n(function($, window) {\n  console.log('hello slick')\n  $(document).ready(function(){\n      $('.field_field_phase .__deroulement-container .paragraph--type--phase-deroulement').slick({\n        slidesToShow: 1,\n        // slidesToScroll: 1,\n        dots: false,\n        arrows: true,\n        centerMode: true,\n        adaptiveHeight: true,\n        // centerPadding: '100px',\n        responsive: [\n          {\n            breakpoint: 810,\n            settings: {\n              slidesToShow: 1,\n              adaptiveHeight: true,\n              arrows: false,\n              draggable: true,\n              centerMode: true,\n            }\n          }]\n      });\n      console.log('salut slick home');\n\n  });\n\n});\n\n\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?");
+eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n    'use strict';\n  \n    Drupal.behaviors.quartiers_de_demain = {\n      attach: function (context, settings) {\n        console.log('It works!');\n      }\n    };\n  } (Drupal));\n\n  \n  jQuery(document).ready(function($){\n\n    $('.open-block').click(function(){\n      $(this).toggleClass('opened');\n\n      $('.header_nav_container').toggleClass('display-nav-opened');\n    \n      if(mobile == true){\n        $(\"body\").css(\"overflow\",\"hidden\");\n      }\n\n    });\n  \n    // Hide the header_nav_container when a link inside it is clicked\n    $('.header_nav_container li').click(function() {\n        $('.header_nav_container').fadeOut();\n    });\n\n\n\n\n});\n\n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n  var adjustAnchor = function() {\n      var $anchor = $('.sidebar_first_container'),\n              fixedElementHeight = 500;\n      if ($anchor.length > 0) {\n          $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n      }\n  };\n\n  $(window).on('hashchange', function() {\n      adjustAnchor();\n  });\n\n\n//////////////////////////////////////////// smooth apparition des textes\n\n\nfunction scrollReaveal(){\n\n  const nodes = {\n    logo : document.querySelectorAll('#logo-animated-container'),\n    chapeau :  document.querySelectorAll('.field_body'),\n    paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n  }\n\n  const showUp = {\n      origin: 'bottom',\n      delay: 100,\n      duration: 1000,\n      distance: '50px',\n      easing: 'cubic-bezier(0.5, 0, 0, 1)'\n  }\n\n  const Show = {\n    delay: 100,\n    duration: 600,\n    easing: 'cubic-bezier(0.5, 0, 0, 1)'\n  }\n\n  console.log(nodes);\n\n  ScrollReveal().reveal(nodes.logo, Show);\n  ScrollReveal().reveal(nodes.chapeau, showUp);\n  ScrollReveal().reveal(nodes.paragraph, showUp);\n}\n\n\n$( document ).ready(function() {\n  scrollReaveal();\n});\n\n\n\n////////////////// Timeline ///////////////////////\n\n// let currentSlide = 0;\n\n// function showSlides(index) {\n//     const slides = document.querySelectorAll('.__timeline-content');\n//     const totalSlides = slides.length;\n//     const visibleSlides = 3; // Number of slides to show at a time\n//     const maxSlide = totalSlides - visibleSlides;\n    \n//     // Adjust the index to ensure it stays within bounds\n//     currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n//     // const offset = currentSlide * -40; // Calculate the offset for the transform\n//     document.querySelector('.paragraph--type--phase-deroulement').style.transform = `translateX(50%)`;\n\n//     // Enable/disable arrows based on the current slide\n//     document.querySelector('.arrow__prev').disabled = currentSlide === 0;\n//     document.querySelector('.arrow__next').disabled = currentSlide === maxSlide;\n// }\n\n// function prevSlide() {\n//     showSlides(currentSlide - 1);\n// }\n\n// function nextSlide() {\n//     showSlides(currentSlide + 1);\n// }\n\n// // Initialize\n// showSlides(currentSlide);\n\n\n\n\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?");
 
 /***/ })
 
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 b75fbae..9580d15 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
@@ -948,6 +948,98 @@ footer span.totop #toTop .arrow-up::before {
   display: none;
 }
 
+/* TIMELINE
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+#home * {
+  box-sizing: border-box;
+}
+#home .timeline {
+  white-space: nowrap;
+  overflow: hidden;
+  padding-top: 10rem;
+  padding-bottom: 10rem;
+}
+#home .timeline .__timeline-arrows {
+  width: fit-content;
+  margin: auto;
+  position: relative;
+  top: -220px;
+}
+#home .timeline .__timeline-arrows button {
+  background-color: white;
+  border: none;
+}
+#home .timeline .__timeline-arrows button:hover {
+  opacity: 0.5;
+}
+#home .timeline .__timeline-content {
+  width: 100vw;
+  padding: 250px 0;
+  transition: all 1s;
+}
+#home .timeline .__timeline-content .__paragraphs {
+  position: relative;
+  display: inline-block;
+  width: 500px;
+  height: 1px;
+  background: black;
+}
+#home .timeline .__timeline-content .__paragraphs:first-of-type {
+  height: 0px;
+}
+#home .timeline .__timeline-content .__paragraphs:last-child {
+  width: 20px;
+}
+#home .timeline .__timeline-content .__paragraphs:not(:first-child) {
+  margin-left: 14px;
+}
+#home .timeline .__timeline-content .__paragraphs:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 101%;
+  bottom: 0;
+  width: 12px;
+  height: 12px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  background: black;
+}
+#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement {
+  position: absolute;
+  left: 65%;
+  top: -16px;
+  transform: translateY(-100%);
+  width: 400px;
+  height: 300px;
+  font-size: 1rem;
+  white-space: normal;
+  color: black;
+  display: flex;
+  flex-direction: row;
+  padding-bottom: 1rem;
+}
+#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date {
+  width: 50%;
+}
+#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .moi-annee {
+  display: inline-flex;
+  font-size: 0.8rem;
+}
+#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .moi-annee .field_field_date_de_moi {
+  padding-right: 0.5rem;
+  text-transform: uppercase;
+}
+#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text {
+  border: solid rgb(7, 50, 194) 1px;
+  border-radius: 5%;
+  padding: 0.6rem 0.6rem;
+  width: 45%;
+}
+#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description .field--label-above {
+  display: none;
+}
+
 /*pages*/
 #home .content_container #block-quartiers-de-demain-titredepage {
   display: none;
@@ -1012,7 +1104,7 @@ footer span.totop #toTop .arrow-up::before {
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p {
   padding-right: 2rem;
   padding-bottom: 1rem;
-  width: 25%;
+  width: 30%;
   display: flex;
   flex-direction: column;
 }
@@ -1163,42 +1255,10 @@ footer span.totop #toTop .arrow-up::before {
   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;
 }
-#home .config_pages--type--deroulement .field_field_phase .__deroulement-container {
-  display: flex;
-  flex-direction: row;
-}
-#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement {
-  width: 30%;
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-template-rows: auto auto auto;
-}
-#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement .field_field_date_de_jour {
-  grid-row: 1/span 3;
-  grid-column: 1;
-}
-#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement .field_field_date_de_moi {
-  grid-row: 2/span 3;
-  grid-column: 1;
-}
-#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement .field_field_date_de_annee {
-  grid-row: 3;
-  grid-column: 1;
-}
-#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement .field_field_titre {
-  grid-column: 2;
-  grid-row: 1;
-}
-#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement .field_field_description {
-  grid-row: 2/span 3;
-  grid-column: 2;
-}
+
 #consultation {
   background-color: #f6f7f3;
 }
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/grandes_fleches_next.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/grandes_fleches_next.svg
new file mode 100644
index 0000000..5ae3ad1
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/grandes_fleches_next.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="17.028627mm"
+   height="34.876175mm"
+   viewBox="0 0 17.028627 34.876175"
+   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(-137.03258,-135.34556)">
+    <path
+       style="color:#000000;fill:#000000;stroke-width:0.488961;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+       d="m 137.65113,135.34577 a 0.48896116,0.48896116 0 0 0 -0.34953,0.13274 0.48896116,0.48896116 0 0 0 -0.02,0.69142 l 15.61906,16.54541 -15.73557,16.68294 a 0.48896116,0.48896116 0 0 0 0.021,0.69046 0.48896116,0.48896116 0 0 0 0.69046,-0.02 l 16.05168,-17.01814 a 0.48901006,0.48901006 0 0 0 0,-0.67042 l -15.93517,-16.88156 a 0.48896116,0.48896116 0 0 0 -0.34189,-0.15281 z"
+       id="path1" />
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/grandes_fleches_prev.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/grandes_fleches_prev.svg
new file mode 100644
index 0000000..006ceaa
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/grandes_fleches_prev.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="17.028627mm"
+   height="34.876175mm"
+   viewBox="0 0 17.028627 34.876175"
+   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(-137.03258,-135.34556)">
+    <path
+       style="color:#000000;fill:#000000;stroke-width:0.488961;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+       d="m 153.44264,135.34577 a 0.48896116,0.48896116 0 0 1 0.34953,0.13274 0.48896116,0.48896116 0 0 1 0.02,0.69142 l -15.61906,16.54541 15.73557,16.68294 a 0.48896116,0.48896116 0 0 1 -0.021,0.69046 0.48896116,0.48896116 0 0 1 -0.69046,-0.02 L 137.16554,153.0506 a 0.48901006,0.48901006 0 0 1 0,-0.67042 l 15.93517,-16.88156 a 0.48896116,0.48896116 0 0 1 0.34189,-0.15281 z"
+       id="path1" />
+  </g>
+</svg>
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
new file mode 100644
index 0000000..a6c15ee
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/next.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="90.491943"
+   height="90.492188"
+   viewBox="0 0 90.491943 90.492186"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath390">
+      <path
+         d="M 0,0 H 1920 V 9000 H 0 Z"
+         transform="translate(-1010.0718,-2163.9844)"
+         id="path390" />
+    </clipPath>
+  </defs>
+  <g
+     id="g1"
+     transform="translate(-1301.517,-9024.7618)">
+    <g
+       id="g697">
+      <path
+         id="path389"
+         d="M 0,0 C 18.507,0 33.51,15.003 33.51,33.51 33.51,52.016 18.507,67.019 0,67.019 -18.507,67.019 -33.509,52.016 -33.509,33.51 -33.509,15.003 -18.507,0 0,0 Z"
+         style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,1346.7623,9114.6875)"
+         clip-path="url(#clipPath390)" />
+      <path
+         id="path391"
+         d="M 0,0 9.997,-8.944 0,-17.887"
+         style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,1342.4113,9058.0833)" />
+    </g>
+  </g>
+</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
new file mode 100644
index 0000000..9dbe20e
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="90.490723"
+   height="90.492188"
+   viewBox="0 0 90.490723 90.492186"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath393">
+      <path
+         d="M 0,0 H 1920 V 9000 H 0 Z"
+         transform="translate(-918.03445,-2163.9844)"
+         id="path393" />
+    </clipPath>
+  </defs>
+  <g
+     id="g1"
+     transform="translate(-1178.8005,-9024.7618)">
+    <g
+       id="g696">
+      <path
+         id="path392"
+         d="m 0,0 c -18.507,0 -33.509,15.003 -33.509,33.51 0,18.506 15.002,33.509 33.509,33.509 18.507,0 33.509,-15.003 33.509,-33.509 C 33.509,15.003 18.507,0 0,0 Z"
+         style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,1224.0459,9114.6875)"
+         clip-path="url(#clipPath393)" />
+      <path
+         id="path394"
+         d="M 0,0 -9.997,-8.944 0,-17.887"
+         style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,1228.3967,9058.0833)" />
+    </g>
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/package-lock.json b/web/themes/custom/quartiers_de_demain/package-lock.json
index ad59641..759ba0f 100644
--- a/web/themes/custom/quartiers_de_demain/package-lock.json
+++ b/web/themes/custom/quartiers_de_demain/package-lock.json
@@ -31,6 +31,7 @@
         "async-done": "^2.0.0",
         "async-settle": "^2.0.0",
         "atob": "^2.1.2",
+        "babel": "^6.23.0",
         "bach": "^2.0.1",
         "balanced-match": "^1.0.2",
         "bare-events": "^2.2.2",
@@ -1180,6 +1181,18 @@
         "node": ">= 4.5.0"
       }
     },
+    "node_modules/babel": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/babel/-/babel-6.23.0.tgz",
+      "integrity": "sha512-ZDcCaI8Vlct8PJ3DvmyqUz+5X2Ylz3ZuuItBe/74yXosk2dwyVo/aN7MCJ8HJzhnnJ+6yP4o+lDgG9MBe91DLA==",
+      "deprecated": "In 6.x, the babel package has been deprecated in favor of babel-cli. Check https://opencollective.com/babel to support the Babel maintainers",
+      "license": "MIT",
+      "bin": {
+        "babel": "lib/cli.js",
+        "babel-external-helpers": "lib/cli.js",
+        "babel-node": "lib/cli.js"
+      }
+    },
     "node_modules/bach": {
       "version": "2.0.1",
       "license": "MIT",
diff --git a/web/themes/custom/quartiers_de_demain/package.json b/web/themes/custom/quartiers_de_demain/package.json
index 69c1bb9..bd6f0fe 100644
--- a/web/themes/custom/quartiers_de_demain/package.json
+++ b/web/themes/custom/quartiers_de_demain/package.json
@@ -25,6 +25,7 @@
     "async-done": "^2.0.0",
     "async-settle": "^2.0.0",
     "atob": "^2.1.2",
+    "babel": "^6.23.0",
     "bach": "^2.0.1",
     "balanced-match": "^1.0.2",
     "bare-events": "^2.2.2",
@@ -439,6 +440,7 @@
     "sass-loader": "^14.2.1",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4"
+ 
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/img/grandes_fleches_next.svg b/web/themes/custom/quartiers_de_demain/src/assets/img/grandes_fleches_next.svg
new file mode 100644
index 0000000..5ae3ad1
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/src/assets/img/grandes_fleches_next.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="17.028627mm"
+   height="34.876175mm"
+   viewBox="0 0 17.028627 34.876175"
+   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(-137.03258,-135.34556)">
+    <path
+       style="color:#000000;fill:#000000;stroke-width:0.488961;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+       d="m 137.65113,135.34577 a 0.48896116,0.48896116 0 0 0 -0.34953,0.13274 0.48896116,0.48896116 0 0 0 -0.02,0.69142 l 15.61906,16.54541 -15.73557,16.68294 a 0.48896116,0.48896116 0 0 0 0.021,0.69046 0.48896116,0.48896116 0 0 0 0.69046,-0.02 l 16.05168,-17.01814 a 0.48901006,0.48901006 0 0 0 0,-0.67042 l -15.93517,-16.88156 a 0.48896116,0.48896116 0 0 0 -0.34189,-0.15281 z"
+       id="path1" />
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/img/grandes_fleches_prev.svg b/web/themes/custom/quartiers_de_demain/src/assets/img/grandes_fleches_prev.svg
new file mode 100644
index 0000000..006ceaa
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/src/assets/img/grandes_fleches_prev.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="17.028627mm"
+   height="34.876175mm"
+   viewBox="0 0 17.028627 34.876175"
+   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(-137.03258,-135.34556)">
+    <path
+       style="color:#000000;fill:#000000;stroke-width:0.488961;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+       d="m 153.44264,135.34577 a 0.48896116,0.48896116 0 0 1 0.34953,0.13274 0.48896116,0.48896116 0 0 1 0.02,0.69142 l -15.61906,16.54541 15.73557,16.68294 a 0.48896116,0.48896116 0 0 1 -0.021,0.69046 0.48896116,0.48896116 0 0 1 -0.69046,-0.02 L 137.16554,153.0506 a 0.48901006,0.48901006 0 0 1 0,-0.67042 l 15.93517,-16.88156 a 0.48896116,0.48896116 0 0 1 0.34189,-0.15281 z"
+       id="path1" />
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/img/next.svg b/web/themes/custom/quartiers_de_demain/src/assets/img/next.svg
new file mode 100644
index 0000000..a6c15ee
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/src/assets/img/next.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="90.491943"
+   height="90.492188"
+   viewBox="0 0 90.491943 90.492186"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath390">
+      <path
+         d="M 0,0 H 1920 V 9000 H 0 Z"
+         transform="translate(-1010.0718,-2163.9844)"
+         id="path390" />
+    </clipPath>
+  </defs>
+  <g
+     id="g1"
+     transform="translate(-1301.517,-9024.7618)">
+    <g
+       id="g697">
+      <path
+         id="path389"
+         d="M 0,0 C 18.507,0 33.51,15.003 33.51,33.51 33.51,52.016 18.507,67.019 0,67.019 -18.507,67.019 -33.509,52.016 -33.509,33.51 -33.509,15.003 -18.507,0 0,0 Z"
+         style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,1346.7623,9114.6875)"
+         clip-path="url(#clipPath390)" />
+      <path
+         id="path391"
+         d="M 0,0 9.997,-8.944 0,-17.887"
+         style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,1342.4113,9058.0833)" />
+    </g>
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/img/prev.svg b/web/themes/custom/quartiers_de_demain/src/assets/img/prev.svg
new file mode 100644
index 0000000..9dbe20e
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/src/assets/img/prev.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="90.490723"
+   height="90.492188"
+   viewBox="0 0 90.490723 90.492186"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath393">
+      <path
+         d="M 0,0 H 1920 V 9000 H 0 Z"
+         transform="translate(-918.03445,-2163.9844)"
+         id="path393" />
+    </clipPath>
+  </defs>
+  <g
+     id="g1"
+     transform="translate(-1178.8005,-9024.7618)">
+    <g
+       id="g696">
+      <path
+         id="path392"
+         d="m 0,0 c -18.507,0 -33.509,15.003 -33.509,33.51 0,18.506 15.002,33.509 33.509,33.509 18.507,0 33.509,-15.003 33.509,-33.509 C 33.509,15.003 18.507,0 0,0 Z"
+         style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,1224.0459,9114.6875)"
+         clip-path="url(#clipPath393)" />
+      <path
+         id="path394"
+         d="M 0,0 -9.997,-8.944 0,-17.887"
+         style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,1228.3967,9058.0833)" />
+    </g>
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
index aa95399..73976f3 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
+++ b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
@@ -95,36 +95,39 @@ $( document ).ready(function() {
 
 
 
-//  slideshow home 
+////////////////// Timeline ///////////////////////
 
-(function($, window) {
-  console.log('hello slick')
-  $(document).ready(function(){
-      $('.field_field_phase .__deroulement-container .paragraph--type--phase-deroulement').slick({
-        slidesToShow: 1,
-        // slidesToScroll: 1,
-        dots: false,
-        arrows: true,
-        centerMode: true,
-        adaptiveHeight: true,
-        // centerPadding: '100px',
-        responsive: [
-          {
-            breakpoint: 810,
-            settings: {
-              slidesToShow: 1,
-              adaptiveHeight: true,
-              arrows: false,
-              draggable: true,
-              centerMode: true,
-            }
-          }]
-      });
-      console.log('salut slick home');
+// let currentSlide = 0;
+
+// function showSlides(index) {
+//     const slides = document.querySelectorAll('.__timeline-content');
+//     const totalSlides = slides.length;
+//     const visibleSlides = 3; // Number of slides to show at a time
+//     const maxSlide = totalSlides - visibleSlides;
+    
+//     // Adjust the index to ensure it stays within bounds
+//     currentSlide = Math.max(0, Math.min(index, maxSlide));
+
+//     // const offset = currentSlide * -40; // Calculate the offset for the transform
+//     document.querySelector('.paragraph--type--phase-deroulement').style.transform = `translateX(50%)`;
+
+//     // Enable/disable arrows based on the current slide
+//     document.querySelector('.arrow__prev').disabled = currentSlide === 0;
+//     document.querySelector('.arrow__next').disabled = currentSlide === maxSlide;
+// }
+
+// function prevSlide() {
+//     showSlides(currentSlide - 1);
+// }
+
+// function nextSlide() {
+//     showSlides(currentSlide + 1);
+// }
+
+// // Initialize
+// showSlides(currentSlide);
 
-  });
 
-});
 
 
 
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 3a60aeb..afefb63 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
@@ -65,7 +65,7 @@
                     p{
                         padding-right: 2rem;
                         padding-bottom: 1rem;
-                        width: 25%;
+                        width: 30%;
                         display: flex;
                         flex-direction: column;
                         &:nth-of-type(1)::before{
@@ -114,7 +114,7 @@
         }
 
 
-        #paragraph-id--6{
+        #paragraph-id--6{  /////// quartier 2030
             display: flex;
             flex-direction: column;
             margin: auto;
@@ -221,7 +221,6 @@
                 }
             }
         }
-        #paragraph-id--9{display: none;}
     }
 
     .paragraph--type--static-parts:not(#paragraph-id--7){
@@ -230,44 +229,44 @@
         }
     }
 
-    .config_pages--type--deroulement{
-        .field_field_phase{
-            .__deroulement-container{
-                display: flex;
-                flex-direction: row;
-                .paragraph--type--phase-deroulement{
-                    width: 30%;
-                    display: grid;
-                    grid-template-columns: auto auto;
-                    grid-template-rows: auto auto auto;
-                    .field_field_date_de_jour{
-                        grid-row: 1 /span 3;
-                        grid-column: 1;
-                    }
-                    .field_field_date_de_moi{
-                        grid-row: 2 /span 3;
-                        grid-column: 1;
+    // .config_pages--type--deroulement{
+    //     .field_field_phase{
+    //         .__timeline{
+    //             display: flex;
+    //             flex-direction: row;
+    //             .paragraph--type--phase-deroulement{
+    //                 width: 30%;
+    //                 display: grid;
+    //                 grid-template-columns: auto auto;
+    //                 grid-template-rows: auto auto auto;
+    //                 .field_field_date_de_jour{
+    //                     grid-row: 1 /span 3;
+    //                     grid-column: 1;
+    //                 }
+    //                 .field_field_date_de_moi{
+    //                     grid-row: 2 /span 3;
+    //                     grid-column: 1;
 
-                    }
-                    .field_field_date_de_annee{
-                        grid-row: 3;
-                        grid-column: 1;
-                    }
-                    .field_field_titre{
-                        grid-column: 2;
-                        grid-row: 1;
-                    }
-                    .field_field_description{
-                        grid-row: 2 /span 3;
-                        grid-column: 2;
-                    }
-                }
-                #paragraph-id--16{
+    //                 }
+    //                 .field_field_date_de_annee{
+    //                     grid-row: 3;
+    //                     grid-column: 1;
+    //                 }
+    //                 .field_field_titre{
+    //                     grid-column: 2;
+    //                     grid-row: 1;
+    //                 }
+    //                 .field_field_description{
+    //                     grid-row: 2 /span 3;
+    //                     grid-column: 2;
+    //                 }
+    //             }
+    //             #paragraph-id--16{
 
-                }
-            }
+    //             }
+    //         }
             
-        }
-    }
+    //     }
+    // }
 
 }
\ No newline at end of file
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
new file mode 100644
index 0000000..71cd864
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
@@ -0,0 +1,96 @@
+
+/* TIMELINE
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+#home{
+    * { box-sizing: border-box; }
+    .timeline {
+        white-space: nowrap;
+        overflow: hidden;
+        padding-top: 10rem;
+        padding-bottom: 10rem;
+        .__timeline-arrows{
+            width: fit-content;
+            margin: auto;
+            position: relative;
+            top: -220px;
+            button{
+                background-color: white;
+                border: none; 
+                &:hover{
+                    opacity: 0.5;
+                }           }
+        }
+        .__timeline-content{
+            // font-size: 0;
+            width: 100vw;
+            padding: 250px 0;
+            transition: all 1s;
+            .__paragraphs{
+                position: relative;
+                display: inline-block;
+                width: 500px;
+                height: 1px;
+                background: black;
+                &:first-of-type{
+                    height: 0px;
+                }
+                &:last-child {
+                    width: 20px;
+                }
+                &:not(:first-child) {
+                    margin-left: 14px;
+                }
+                &:not(:last-child)::after {
+                    content: "";
+                    position: absolute;
+                    top: 50%;
+                    left: 101%;
+                    bottom: 0;
+                    width: 12px;
+                    height: 12px;
+                    transform: translateY(-50%);
+                    border-radius: 50%;
+                    background: black;
+                }
+                .paragraph--type--phase-deroulement{
+                    position: absolute;
+                    left: 65%;
+                    top: -16px;
+                    transform: translateY(-100%);
+                    width: 400px;
+                    height: 300px;
+                    font-size: 1rem;
+                    white-space: normal;
+                    color: black;
+                    display: flex;
+                    flex-direction: row;
+                    padding-bottom: 1rem;
+                    .date{
+                        width: 50%;
+                        .moi-annee{
+                            display: inline-flex;
+                            font-size: 0.8rem;
+                            .field_field_date_de_moi{
+                                padding-right: 0.5rem;
+                                text-transform: uppercase;
+                                
+                            }
+                        }
+
+                    }
+
+                    .text{
+                        border: solid $blue_QDD 1px;
+                        border-radius: 5%;
+                        padding: 0.6rem 0.6rem;
+                        width: 45%;
+   
+                            .field_field_description{
+                                .field--label-above{display: none;}
+                            }
+                        }        
+                }   
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss
index 93ed613..4dfbed5 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss
@@ -27,6 +27,8 @@
 @import "partials/animation-logo";
 @import "partials/slick-theme";
 @import "partials/slick";
+@import "partials/timeline";
+
 // @import "partials/slick_custom";
 
 
diff --git a/web/themes/custom/quartiers_de_demain/templates/field--config-pages--deroulement.html.twig b/web/themes/custom/quartiers_de_demain/templates/field--config-pages--deroulement.html.twig
index 06b3552..4f8a59b 100644
--- a/web/themes/custom/quartiers_de_demain/templates/field--config-pages--deroulement.html.twig
+++ b/web/themes/custom/quartiers_de_demain/templates/field--config-pages--deroulement.html.twig
@@ -51,6 +51,7 @@
   set ancre_href = '#paragraph-id--' ~ paragraph.id()
 %}
 {% if label_hidden %}
+
   {% if multiple %}
     <div{{ attributes }}>
       {% for item in items %}
@@ -65,14 +66,24 @@
 {% else %}
   <div{{ attributes }}>
     <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
-    {% if multiple %}
-      <div class='__deroulement-container'>
-    {% endif %}
-    {% for item in items %}
-      <div{{ item.attributes }}>{{ item.content }}</div>
-    {% endfor %}
-    {% if multiple %}
+    <div class='timeline'>
+      <div class="__timeline-arrows">
+        <button class="arrow arrow__prev">
+          {% include active_theme_path() ~ '/dist/assets/img/prev.svg' %}
+        </button>
+        <button class="arrow arrow__next">
+          {% include active_theme_path() ~ '/dist/assets/img/next.svg' %}
+        </button>
       </div>
-    {% endif %}
-  </div>
+      <div class="__timeline-content">
+        {% if multiple %}
+        {% endif %}
+        {% for item in items %}
+          <div class="__paragraphs"{{ item.attributes }}>{{ item.content }}</div>
+        {% endfor %}
+        {% if multiple %}
+        {% endif %}
+      </div>
+      </div>
+    </div>
 {% endif %}
diff --git a/web/themes/custom/quartiers_de_demain/templates/paragraph--phase-deroulement.html.twig b/web/themes/custom/quartiers_de_demain/templates/paragraph--phase-deroulement.html.twig
new file mode 100644
index 0000000..e62792c
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/templates/paragraph--phase-deroulement.html.twig
@@ -0,0 +1,75 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a paragraph.
+ *
+ * Available variables:
+ * - paragraph: Full paragraph entity.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - paragraph.getCreatedTime() will return the paragraph creation timestamp.
+ *   - paragraph.id(): The paragraph ID.
+ *   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
+ *   - paragraph.getOwnerId(): The user ID of the paragraph author.
+ *   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
+ *   and methods for the paragraph object.
+ * - content: All paragraph items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - paragraphs: The current template type (also known as a "theming hook").
+ *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
+ *     "Image" it would result in "paragraphs--type--image". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
+ *     preview would result in: "paragraphs--view-mode--preview", and
+ *     default: "paragraphs--view-mode--default".
+ * - view_mode: View mode; for example, "preview" or "full".
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_paragraph()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'paragraph',
+    'paragraph--type--' ~ paragraph.bundle|clean_class,
+    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
+    not paragraph.isPublished() ? 'paragraph--unpublished'
+  ]
+%}
+
+{% block paragraph %}
+  {# <div{{ attributes.addClass(classes) }}> #}
+    <div{{ attributes.addClass(classes).setAttribute('id', 'paragraph-id--' ~ paragraph.id()) }}>
+
+{% block content %}
+      {# {{ content }} #}
+      <div class="date">
+        {{ content.field_date_de_jour}}
+        <div class="moi-annee">
+          {{ content.field_date_de_moi}}
+          {{ content.field_date_de_annee}}
+        </div>
+        {{ content.field_date_a_jour}}
+        <div class="moi-annee">
+          {{ content.field_date_a_moi}}
+          {{ content.field_date_a_annee}}
+        </div>
+      </div>
+
+      <div class="text">
+        {{ content.field_description}}
+        {{ content.field_titre}}
+      </div>
+    {% endblock %}
+  </div>
+{% endblock paragraph %}
diff --git a/web/themes/custom/quartiers_de_demain/webpack.config.js b/web/themes/custom/quartiers_de_demain/webpack.config.js
index 8a8c053..711d590 100644
--- a/web/themes/custom/quartiers_de_demain/webpack.config.js
+++ b/web/themes/custom/quartiers_de_demain/webpack.config.js
@@ -47,7 +47,9 @@ let config = {
                     }
                   }
                 ]
-            }
+            },
+
+            
         ],
     }
 }