actus caroussel overflow....

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

@@ -732,7 +732,7 @@ footer {
   cursor: pointer;
   background: transparent;
   color: transparent;
-  top: -1rem;
+  top: -2rem;
   -webkit-transform: translate(0, -1rem);
   -ms-transform: translate(0, -1rem);
   transform: translate(0, -1rem);
@@ -977,7 +977,7 @@ footer {
 #home * {
   box-sizing: border-box;
 }
-#home .config_pages--type--deroulement {
+#home .__container-deroulement {
   background-color: #f3f5fc;
   background-image: url(../../../dist/assets/img/pillier-1.svg);
   background-repeat: no-repeat;
@@ -985,14 +985,21 @@ footer {
   background-position-x: -20%;
 }
 @media (max-width: 1090px) {
-  #home .config_pages--type--deroulement {
+  #home .__container-deroulement {
     cursor: grab;
   }
 }
+#home .__container-deroulement h2 {
+  width: fit-content;
+  margin: auto;
+  padding-top: 3rem;
+  font-size: 1.7rem;
+  font-weight: bold;
+}
 #home .timeline {
   white-space: nowrap;
   overflow: hidden;
-  padding-top: 10rem;
+  padding-top: 5rem;
   padding-bottom: 4rem;
 }
 @media (max-width: 1090px) {
@@ -1006,6 +1013,7 @@ footer {
   margin: auto;
   position: relative;
   top: -115px;
+  padding-bottom: 2rem;
 }
 @media (max-width: 1090px) {
   #home .timeline .__timeline-arrows {
@@ -1020,9 +1028,6 @@ footer {
 #home .timeline .__timeline-arrows button:hover {
   opacity: 0.5;
 }
-#home .timeline .__timeline-arrows button svg {
-  padding: 0.5rem;
-}
 #home .timeline .__timeline-content {
   width: 100vw;
   padding-top: 7rem;
@@ -1153,8 +1158,9 @@ footer {
 }
 #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
   font-size: 0.5rem;
+  font-weight: 800;
 }
-@media (max-width: 10900px) {
+@media (max-width: 1090px) {
   #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
     font-size: 1rem;
   }
@@ -1176,10 +1182,11 @@ footer {
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-bottom: 3rem;
 }
 #actus-caroussel h2 {
   width: fit-content;
-  padding-bottom: 0.6rem;
+  padding-bottom: 0.4rem;
   margin-top: 3rem;
   margin-bottom: 3rem;
   font-size: 1.7rem;
@@ -1193,7 +1200,7 @@ footer {
 }
 #actus-caroussel .content-actus .views-row {
   width: 500px !important;
-  padding: 1rem;
+  padding: 2rem;
 }
 @media (max-width: 550px) {
   #actus-caroussel .content-actus .views-row {
@@ -1248,6 +1255,7 @@ footer {
   color: red;
   display: inline-flex;
   align-items: center;
+  font-size: 0.6rem;
 }
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_date::before {
   content: url("../img/date-actu.svg");
@@ -1261,6 +1269,10 @@ footer {
   font-size: 0.8rem;
   color: rgb(7, 50, 194);
 }
+#actus-caroussel .content-actus .views-row article.node-type-actualite .field_body {
+  opacity: 1 !important;
+  transform: none !important;
+}
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_body p {
   margin: 0;
 }

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

@@ -276,7 +276,23 @@ document.addEventListener('DOMContentLoaded', function() {
 
 
 
-//  slideshow home 
+  ///////////////////  caracteres  body actus/////////////////////////
+
+  document.addEventListener('DOMContentLoaded', function() {
+    // Maximum number of characters to display
+    const maxChars = 140; // Adjust this value as needed
+  
+    document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body p').forEach(function(paragraph) {
+      let text = paragraph.textContent.trim();
+      if (text.length > maxChars) {
+        let truncatedText = text.slice(0, maxChars) + '...';
+        paragraph.textContent = truncatedText;
+      }
+    });
+  });
+  
+
+ ////////////  slideshow home  ////////////////////////// 
 
   $(document).ready(function(){
       $('.content-actus .view').slick({

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

@@ -1,5 +1,4 @@
 #page-node{
-    // .node-id-11{
         .content_container{
             width: 60%;
             display: flex;

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss

@@ -2,9 +2,10 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding-bottom: 3rem;
     h2{
         width: fit-content;
-        padding-bottom: 0.6rem;
+        padding-bottom: 0.4rem;
         margin-top: 3rem;
         margin-bottom: 3rem;
         font-size: 1.7rem;
@@ -20,10 +21,10 @@
         }
         .views-row{
             width: 500px !important;
+            padding: 2rem;
             @media(max-width: 550px){
                 width: 296px !important;
             }
-            padding: 1rem;
             article.node-type-actualite{
                 display: flex;
                 flex-direction: column;
@@ -68,6 +69,7 @@
                     color: red;
                     display: inline-flex;
                     align-items: center;
+                    font-size: 0.6rem;
                     &::before{
                         content: url('../img/date-actu.svg');
                         padding-right: 0.2rem;
@@ -86,7 +88,9 @@
                     } 
                 }
                 .field_body{
-                  
+                    // visibility: visible;
+                    opacity: 1 !important;
+                    transform: none !important;
                     p{
                         margin: 0;
                     }
@@ -99,5 +103,6 @@
             top: 60px;
         } 
 
+
     }
 }

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss

@@ -76,7 +76,7 @@ $slick-opacity-not-active: 0.25 !default;
     cursor: pointer;
     background: transparent;
     color: transparent;
-    top: -1rem;
+    top: -2rem;
     -webkit-transform: translate(0, -1rem);
     -ms-transform: translate(0, -1rem);
     transform: translate(0, -1rem);

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

@@ -4,7 +4,7 @@
 #home{
    
     * { box-sizing: border-box; }
-    .config_pages--type--deroulement{
+    .__container-deroulement{
         background-color: #f3f5fcff;
         background-image: url(../../../dist/assets/img/pillier-1.svg);
         background-repeat: no-repeat;
@@ -13,12 +13,19 @@
         @media(max-width:1090px){
             cursor:grab;
     }
+    h2{
+        width: fit-content;
+        margin: auto;
+        padding-top: 3rem;
+        font-size: 1.7rem;
+        font-weight: bold;
+    }
 
     }
     .timeline {
         white-space: nowrap;
         overflow: hidden;
-        padding-top: 10rem;
+        padding-top: 5rem;
         padding-bottom: 4rem;
         @media(max-width:1090px){
             padding-top: 18rem;
@@ -29,6 +36,7 @@
             margin: auto;
             position: relative;
             top: -115px;
+            padding-bottom: 2rem;
             @media(max-width:1090px){
                 top: -211px;
                 display: none;
@@ -39,10 +47,10 @@
                 &:hover{
                     opacity: 0.5;
                 } 
-                svg{
+                // svg{
-                    padding: 0.5rem;
+                //     padding: 0.5rem;
 
-                }
+                // }
             }
         }
         .__timeline-content{
@@ -179,7 +187,8 @@
                         min-width: 65%;
                         .field_field_titre{
                             font-size: 0.5rem;
-                            @media(max-width:10900px){
+                            font-weight: 800;
+                            @media(max-width:1090px){
                                 font-size: 1rem;
                             }
                         }

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

@@ -0,0 +1,40 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="__container-deroulement"{{ attributes }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>