deroulement new css

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -1079,10 +1079,13 @@ footer {
   font-size: 1.7rem;
 }
 #home .timeline {
+  display: flex;
+  flex-direction: column;
   white-space: nowrap;
   overflow: hidden;
-  padding-top: 5rem;
+  padding-top: 2rem;
   padding-bottom: 8rem;
+  height: 950px;
 }
 @media (max-width: 1090px) {
   #home .timeline {
@@ -1093,8 +1096,7 @@ footer {
 #home .timeline .__timeline-arrows {
   width: fit-content;
   margin: auto;
-  position: relative;
-  top: -115px;
+  margin-top: 0;
   padding-bottom: 2rem;
 }
 @media (max-width: 1090px) {
@@ -1115,21 +1117,19 @@ footer {
   }
 }
 #home .timeline .__timeline-content {
-  width: 100vw;
+  width: fit-content;
   padding-top: 7rem;
   padding-bottom: 2rem;
+  padding-left: 3rem;
   transition: all 1s;
 }
 #home .timeline .__timeline-content .__paragraphs {
   position: relative;
   display: inline-flex;
-  width: 500px;
+  width: 700px;
   height: 1px;
   background: black;
 }
-#home .timeline .__timeline-content .__paragraphs:first-of-type {
-  height: 0px;
-}
 #home .timeline .__timeline-content .__paragraphs:not(:first-child) {
   margin-left: 14px;
 }
@@ -1137,7 +1137,7 @@ footer {
   content: "";
   position: absolute;
   top: 50%;
-  left: 100%;
+  left: -18px;
   bottom: 0;
   width: 17px;
   height: 17px;
@@ -1151,20 +1151,18 @@ footer {
   }
 }
 #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement {
+  display: flex;
+  flex-direction: row;
   position: absolute;
-  left: 65%;
+  padding-bottom: 1rem;
+  left: -18px;
   top: -16px;
   transform: translateY(-100%);
-  width: 400px;
+  width: 600px;
   height: 300px;
   font-size: 1rem;
   white-space: normal;
   color: black;
-  display: flex;
-  flex-direction: row;
-  padding-bottom: 1rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
 }
 @media (max-width: 550px) {
   #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement {
@@ -1249,7 +1247,8 @@ footer {
   border-radius: 5%;
   padding: 0.6rem 0.6rem;
   line-height: 1.1;
-  min-width: 65%;
+  width: fit-content;
+  min-width: 35%;
 }
 @media (max-width: 1090px) {
   #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text {

web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg

@@ -51,7 +51,7 @@
        id="path148"
        d="M 0,0 211.55,177.512"
        style="fill:none;stroke:#0833c2;stroke-width:70;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       transform="matrix(1.3333333,0,0,-1.3333333,1686.6035,8250)" />
+       transform="matrix(1.3333333,0,0,-1.3333333,1686.6035,8050)" />
     <path
        id="path151"
        d="M 0,0 V -174.775"