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

@@ -1165,34 +1165,32 @@ footer {
     height: fit-content;
   }
 }
+#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track.__paragraphs ::before {
+  content: ".";
+}
 #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement {
   display: flex;
   flex-direction: row;
   align-items: center;
   padding-right: 1rem;
+  padding-bottom: 1rem;
 }
 @media (max-width: 500px) {
   #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement {
     flex-direction: column;
     align-items: baseline;
-    padding-bottom: 1rem;
   }
 }
-#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
+#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement:before {
-  align-self: end;
+  content: ".";
-  font-size: 2.5rem;
+  font-size: 4rem;
-  display: inline-block; /* Permet d'utiliser height */
+  position: absolute;
-  line-height: 0; /* Assure que la hauteur est minimale */
+  top: 50%;
-  transform: translateX(1rem);
+  transform: translateY(-50%); /* Centrer parfaitement verticalement */
 }
-@media (max-width: 500px) {
+@media (max-width: 550px) {
-  #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
+  #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement:before {
-    align-self: center;
+    display: none;
-    font-size: 2.5rem;
-    display: inline-block;
-    line-height: 0;
-    transform: translateY(22.5rem);
-    padding-right: 3rem;
   }
 }
 #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date {
@@ -1275,7 +1273,6 @@ footer {
   width: 41%;
   min-width: 35%;
   height: 300px;
-  margin-bottom: 1rem;
 }
 @media (max-width: 1090px) {
   #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text {
@@ -1509,7 +1506,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 
 #home #background-animated {
-  display: none;
   position: absolute;
   top: 2000px;
   left: 350px;
@@ -1628,9 +1624,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 #home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom img {
   width: 100%;
   height: auto;
-  animation-duration: 4.5s;
+  animation: zoomOut 2.5s ease-in infinite;
-  animation-name: zoomOut;
-  animation-iteration-count: infinite;
 }
 #home .config_pages--type--diaporama-home .diaporama .slick-list blockquote {
   position: relative;
@@ -1643,10 +1637,10 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 @keyframes zoomOut {
   0% {
-    transform: scale(1.1);
+    transform: scale(1);
   }
   100% {
-    transform: scale(1.3);
+    transform: scale(1.05);
   }
 }
 #home .content_container #block-quartiers-de-demain-titredepage {

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

@@ -4,9 +4,9 @@
 <svg
    version="1.1"
    id="svg1"
-   width="1399.6859"
+   width="1440.5675"
-   height="4141.061"
+   height="6585.9683"
-   viewBox="0 0 1399.6859 4141.0611"
+   viewBox="0 0 1440.5675 6585.9684"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
   <defs
@@ -46,47 +46,51 @@
   </defs>
   <g
      id="g3"
-     transform="translate(-509.36305,-2803.6546)">
+     transform="translate(-509.36305,-2445.5661)">
     <g
        id="g2">
       <g
          id="g1"
          transform="translate(0.17944336,-2.9196463)">
+        <path
+           id="path148"
+           d="m 1544.4558,8077.9597 194.3574,-163.0856"
+           style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <path
+           id="path151"
+           d="m 1818.0282,2628.0978 v 160.571"
+           style="fill:none;stroke:#0833c2;stroke-width:78.092;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
         <path
            id="path254"
            d="M 0,0 C 0,205.098 -166.265,371.361 -371.362,371.361"
            style="fill:none;stroke:#000000;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-           transform="matrix(0.48783546,0,0,-0.48783546,1583.811,6947.6351)"
+           transform="matrix(0.91872984,0,0,-0.91872984,1649.0098,9034.4538)"
            clip-path="url(#clipPath255)" />
         <path
            id="path256"
            d="m 533.81621,3347.9845 163.08557,194.3583"
            style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-        <path
-           id="path256-3"
-           d="m 1652.1683,6058.9184 -163.0856,194.3583"
-           style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
         <path
            id="path257"
            d="M 0,0 C -205.098,0 -371.361,-166.265 -371.361,-371.362"
            style="fill:none;stroke:#f7002b;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-           transform="matrix(-0.47297787,0,0,-0.47297787,1700.711,2839.0872)"
+           transform="matrix(0.91872984,0,0,-0.91872984,1388.9577,2511.6402)"
            clip-path="url(#clipPath258)" />
         <path
            id="path300"
            d="M 0,0 C 0,-126.805 102.795,-229.6 229.6,-229.6"
            style="fill:none;stroke:#f7002b;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-           transform="matrix(0.72647042,0,0,-0.72647042,1636.7965,4238.0583)"
+           transform="matrix(0.91872984,0,0,-0.91872984,1738.8107,4755.9014)"
            clip-path="url(#clipPath301)" />
         <path
            id="path302"
            d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6"
            style="fill:none;stroke:#0833c2;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-           transform="matrix(0.82260013,0,0,-0.82260013,1865.1937,5133.4927)"
+           transform="matrix(0.91872984,0,0,-0.91872984,1874.1866,6246.5711)"
            clip-path="url(#clipPath303)" />
         <path
            id="path311"
-           d="M 552.65311,4967.771 V 4707.7705"
+           d="M 552.65311,6047.771 V 5787.7705"
            style="fill:none;stroke:#000000;stroke-width:78.092;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
       </g>
     </g>

web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js

@@ -3,7 +3,7 @@ document.addEventListener('scroll', function() {
     const background = document.getElementById('background-animated');
     if (background) {
       // Adjust this value to control the speed of the parallax effect
-      const parallaxSpeed = 0.5;
+      const parallaxSpeed = 0.2;
       background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';
     }
 });

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -561,36 +561,32 @@
 
   ////////////////////// end  diaporama home swiper /////////////////////////////////
 
-  $(document).ready(function () {
+  $(document).ready(function(){
     let diapohome = $('.config_pages--type--diaporama-home .diaporama');
-
+    if (diapohome) {
-    if (diapohome.length) {
+      diapohome.slick({
-        // Initialisation de Slick
+        slidesToShow: 1,
-        diapohome.slick({
+        dots: false,
-            slidesToShow: 1,
+        arrows: false,
-            dots: false,
+        centerMode: false,  // Désactivé pour éviter les sauts
-            arrows: false,
+        adaptiveHeight: false,  // Désactivé pour éviter les changements de hauteur
-            centerMode: true,
+        autoplay: true,
-            adaptiveHeight: true,
+        autoplaySpeed: 2000,
-            autoplay: true,  // Activer l'autoplay
+        infinite: true,
-            autoplaySpeed: 4000,  // Changement de slide toutes les 4 secondes
+        responsive: [
-            infinite: true,
+          {
-            pauseOnHover: false,  // Ne pas arrêter l'autoplay lors du survol
+            breakpoint: 810,
-            pauseOnFocus: false,
+            settings: {
-            responsive: [
+              slidesToShow: 1,
-                {
+              adaptiveHeight: false,
-                    breakpoint: 810,
+              arrows: true,
-                    settings: {
+              draggable: true,
-                        slidesToShow: 1,
+              centerMode: true,  // Désactivé seulement pour les petits écrans
-                        adaptiveHeight: false,
+            }
-                        arrows: false,
+          }]
-                        draggable: true,
+      });
-                        centerMode: false,
+      console.log('Diaporama initialisé');
-                    }
+    }
-                }]
-        });
-
-  }
 });
 
 

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss

@@ -13,11 +13,7 @@
                         img{
                             width: 100%;
                             height: auto;
-                            // animation: zoomOut infinite 4.3s ease-in-out;
+                            animation: zoomOut 2.5s ease-in infinite;
-                            animation-duration: 4.5s;
-                            animation-name: zoomOut;
-                            animation-iteration-count: infinite;
-                            
                         }
                     }
                     blockquote{
@@ -32,10 +28,10 @@
                     
                     @keyframes zoomOut {
                         0% {
-                            transform: scale(1.1);
+                            transform: scale(1);
                             }
                             100% {
-                            transform: scale(1.3);
+                            transform: scale(1.05);
                             }
                     }
                         

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss

@@ -1,7 +1,7 @@
 #home{
 
   #background-animated {
-    display: none;
+    // display: none;
       position: absolute;
       top: 2000px;
       left: 350px;

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss

@@ -41,48 +41,32 @@
                             }
 
                             &.__paragraphs{
-                            //    ::before{
+                               ::before{
-                            //        content: '\002022';
+                                   content: '.';
-                            //    } 
+                               } 
                             }
                             .paragraph--type--phase-deroulement{
                                 display: flex;
                                 flex-direction: row;
                                 align-items: center;
                                 padding-right: 1rem;
-                                // padding-bottom: 1rem;
+                                padding-bottom: 1rem;
                                 @media(max-width:500px){
                                     flex-direction: column;
                                     align-items: baseline;
-                                    padding-bottom: 1rem;
-                                }
-                                .border-symbol{
-                                    align-self: end;
-                                    font-size: 2.5rem;
-                                    display: inline-block; /* Permet d'utiliser height */
-                                    line-height: 0; /* Assure que la hauteur est minimale */
-                                    transform: translateX(1rem);
-                                    @media(max-width:500px){
-                                        align-self: center;
-                                        font-size: 2.5rem;
-                                        display: inline-block;
-                                        line-height: 0;
-                                        transform: translateY(22.5rem);
-                                        padding-right: 3rem;
-                                    }
                                 }
                                 // border-bottom: solid black 1px;
-                                // &:before{
+                                &:before{
-                                //     content:".";
+                                    content:".";
-                                //     font-size: 4rem;
+                                    font-size: 4rem;
-                                //     position: absolute;
+                                    position: absolute;
-                                //     top: 50%; 
+                                    top: 50%; 
-                                //     transform: translateY(-50%); /* Centrer parfaitement verticalement */
+                                    transform: translateY(-50%); /* Centrer parfaitement verticalement */
-                                //     @media(max-width:550px){
+                                    @media(max-width:550px){
-                                //         display: none;
+                                        display: none;
-                                //     }
+                                    }
  
-                                // }
+                                }
                                 
                                 .date{
                                     width: fit-content !important;
@@ -169,7 +153,7 @@
                                     width: 41%;
                                     min-width: 35%;
                                     height: 300px;
-                                    margin-bottom: 1rem;
+                                   
                                     
                                     @media(max-width:1090px){
                                         height: 200px;

web/themes/custom/quartiers_de_demain/templates/config-pages--diaporama-home.html.twig

@@ -18,4 +18,5 @@ set classes = [
 %}
 <div{{ attributes.addClass(classes) }}>
   {{ content }}
+  {# {% include active_theme_path() ~ '/dist/assets/img/formes-animees-1.svg' %} #}
 </div>

web/themes/custom/quartiers_de_demain/templates/field--config-pages--deroulement.html.twig

@@ -68,6 +68,14 @@
   <div{{ attributes }}>
     <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
     <div class='timeline'>
+      {# <div class="__timeline-arrows">
+        <button id='arrowPrev' class="arrow arrow__prev" aria-label="Previous" type="button"> 
+          {% include active_theme_path() ~ '/dist/assets/img/prev.svg' %}
+        </button>
+        <button id='arrowNext' class="arrow arrow__next" aria-label="Next" type="button">
+          {% include active_theme_path() ~ '/dist/assets/img/next.svg' %}
+        </button>
+      </div> #}
       <div class="__timeline-content">
         {% if multiple %}
         {% endif %}

web/themes/custom/quartiers_de_demain/templates/paragraph--phase-deroulement.html.twig

@@ -50,7 +50,7 @@
 {% block paragraph %}
   {# <div{{ attributes.addClass(classes) }}> #}
     <div{{ attributes.addClass(classes).setAttribute('id', 'paragraph-id--' ~ paragraph.id()) }}>
-    <span class="border-symbol">&#x2022;</span> <!-- Ajout du symbole -->
+
 {% block content %}
       {# {{ content }} #}
       <div class="date">