media querry /ressources

web/themes/custom/quartiers_de_demain/dist/assets/img/fleche-bas.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="34.876163mm"
+   height="17.028625mm"
+   viewBox="0 0 34.876163 17.028626"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="fleche-bas.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm">
+    <inkscape:page
+       x="0"
+       y="0"
+       width="34.876163"
+       height="17.028625"
+       id="page2"
+       margin="0"
+       bleed="0" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="rotate(-90,9.3578179,144.70338)">
+    <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>

web/themes/custom/quartiers_de_demain/quartiers_de_demain.theme

@@ -60,6 +60,7 @@ function quartiers_de_demain_preprocess_field(&$variables) {
   if (isset($variables['field_name'])) {
     $variables['attributes']['class'][] = 'field_'.$variables['field_name']; 
   }
+
 }
 
 /**
@@ -132,4 +133,7 @@ function quartiers_de_demain_preprocess_block__block_region_second(&$variables)
     unset($variables['content']['field_title']);
     unset($variables['content']['field_field_sous_titre']);
   }
-}
+}
+
+
+

web/themes/custom/quartiers_de_demain/src/assets/img/fleche-bas.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="34.876163mm"
+   height="17.028625mm"
+   viewBox="0 0 34.876163 17.028626"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="grandes_fleches_prev.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm">
+    <inkscape:page
+       x="0"
+       y="0"
+       width="34.876163"
+       height="17.028625"
+       id="page2"
+       margin="0"
+       bleed="0" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="rotate(-90,9.3578179,144.70338)">
+    <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>

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

@@ -357,65 +357,50 @@ $( document ).ready(function() {
 
 ///////////////////  caracteres  body actus/////////////////////////
 
-document.addEventListener('DOMContentLoaded', function() {
-  // Maximum number of characters to display
-  const maxChars = 140; // Adjust this value as needed
+// 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;
-    }
-  });
-});
+//   document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body').forEach(function(paragraph) {
+//     let text = paragraph.textContent.trim();
+//     if (text.length > maxChars) {
+//       let truncatedText = text.slice(0, maxChars) + '...';
+//       paragraph.textContent = truncatedText;
+//     }
+//   });
+// });
 
 
-//////////// start slideshow home  ////////////////////////// 
-
-
-
-$(document).ready(function(){
-    let actuview = $('.content-actus .view ')
-    if (actuview) {
-      actuview.slick({
-        slidesToShow: 3,
-        // slidesToScroll: 1,
-        dots: false,
-        arrows: true,
-        // centerMode: true,
-        adaptiveHeight: false,
-        autoplay: false,
-        // autoplaySpeed: 1500,
-        // infinite: true,
-        // centerPadding: '100px',
-        responsive: [
-          {
-            breakpoint: 810,
-            settings: {
-              slidesToShow: 1,
-              // slidesToScroll: 1,
-              adaptiveHeight: false,
-              arrows: true,
-              draggable: true,
-              // centerMode: true,
-              // centerPadding: '100px',
-              autoplay: false,
-              // autoplaySpeed: 2000,
-            }
-          }]
-      });
-      console.log('salut slick home');
+//////////// start slideshow actus home  ////////////////////////// 
+// $(document).ready(function(){
+//     let actuview = $('.content-actus .view .view-rows-wrapper')
+//     if (actuview) {
+//       actuview.slick({
+//         slidesToShow: 3,
+//         dots: false,
+//         arrows: true,
+//         adaptiveHeight: false,
+//         autoplay: false,
+//         responsive: [
+//           {
+//             breakpoint: 810,
+//             settings: {
+//               slidesToShow: 1,
+//               adaptiveHeight: false,
+//               arrows: true,
+//               draggable: true,
+//               autoplay: false,
+//             }
+//           }]
+//       });
+//       console.log('salut slick home');
       
-    }
-    $('.slick-carousel').slick({
-      lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive'
-    });
-
-});
-
-
+//     }
+//     $('.slick-carousel').slick({
+//       lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive'
+//     });
 
+// });
 
 $(document).ready(function () {
   let diapohome = $('.config_pages--type--diaporama-home .diaporama');
@@ -448,105 +433,142 @@ $(document).ready(function () {
 
 }
 });
+////////////  end slideshow actus home  ////////////////////////// 
+
+
+//////////// start slideshow /actualites  ////////////////////////// 
+$(document).ready(function(){
+    // Vérifier si on N'EST PAS sur la page #home
+    // if (!$("#home").length) {
+        let actuview2 = $('.content-wrapper-actu .field_field_images .actu-diaporama');
+
+        if (actuview2.length > 0) {
+            actuview2.slick({
+                slidesToShow: 1,
+                dots: false,
+                arrows: true,
+                adaptiveHeight: true,
+                autoplay: false,
+                responsive: [
+                    {
+                        breakpoint: 810,
+                        settings: {
+                            slidesToShow: 1,
+                            adaptiveHeight: true,
+                            arrows: true,
+                            draggable: true,
+                            autoplay: false,
+                        }
+                    }
+                ]
+            });
+            console.log('Slick activé sur les actualités');
+    //     }
+    // } else {
+        console.log('Slick désactivé sur la page Home');
+    }
+});
+
+////////////  end slideshow /actualites  ////////////////////////// 
+
 
-////////////  end slideshow home  ////////////////////////// 
 
 //////////////// start lightbox galerie image page site////////////////////////
 
-// Sélection des images et de leurs légendes dans la galerie
-let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
-let currentIndex;
+    // Sélection des images et de leurs légendes dans la galerie
+    let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
+    let currentIndex;
 
-// Création de la lightbox et de ses éléments
-const lightbox = document.createElement('div');
-lightbox.id = 'lightbox';
-lightbox.classList.add('lightbox');
-document.body.appendChild(lightbox);
+    // Création de la lightbox et de ses éléments
+    const lightbox = document.createElement('div');
+    lightbox.id = 'lightbox';
+    lightbox.classList.add('lightbox');
+    document.body.appendChild(lightbox);
 
-const img = document.createElement('img');
-lightbox.appendChild(img);
+    const img = document.createElement('img');
+    lightbox.appendChild(img);
 
-// Élément pour afficher la légende
-const caption = document.createElement('p');
-caption.classList.add('caption');
-lightbox.appendChild(caption);
+    // Élément pour afficher la légende
+    const caption = document.createElement('p');
+    caption.classList.add('caption');
+    lightbox.appendChild(caption);
 
-const closeBtn = document.createElement('span');
-closeBtn.classList.add('close');
-closeBtn.innerHTML = '×';
-lightbox.appendChild(closeBtn);
+    const closeBtn = document.createElement('span');
+    closeBtn.classList.add('close');
+    closeBtn.innerHTML = '×';
+    lightbox.appendChild(closeBtn);
 
-const prevBtn = document.createElement('a');
-prevBtn.classList.add('prev');
-prevBtn.innerHTML = '❮';
-lightbox.appendChild(prevBtn);
+    const prevBtn = document.createElement('a');
+    prevBtn.classList.add('prev');
+    prevBtn.innerHTML = '❮';
+    lightbox.appendChild(prevBtn);
 
-const nextBtn = document.createElement('a');
-nextBtn.classList.add('next');
-nextBtn.innerHTML = '❯';
-lightbox.appendChild(nextBtn);
+    const nextBtn = document.createElement('a');
+    nextBtn.classList.add('next');
+    nextBtn.innerHTML = '❯';
+    lightbox.appendChild(nextBtn);
 
-// Fonction pour afficher l'image et la légende à l'index donné
-function showImage(index) {
-if (index < 0) index = images.length - 1;
-if (index >= images.length) index = 0;
-currentIndex = index;
+    // Fonction pour afficher l'image et la légende à l'index donné
+    function showImage(index) {
+    if (index < 0) index = images.length - 1;
+    if (index >= images.length) index = 0;
+    currentIndex = index;
 
-// Mettre à jour l'image
-img.src = images[currentIndex].getAttribute('src');
+    // Mettre à jour l'image
+    img.src = images[currentIndex].getAttribute('src');
 
-// Récupérer la légende associée (le paragraphe dans blockquote suivant l'image)
-const captionText = images[currentIndex]
-  .closest('.cadre-img-zoom')
-  .nextElementSibling.querySelector('.image-field-caption p')
-  .textContent;
-  
-caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente
-lightbox.style.display = 'flex';
-}
+    // Récupérer la légende associée (le paragraphe dans blockquote suivant l'image)
+    const captionText = images[currentIndex]
+      .closest('.cadre-img-zoom')
+      .nextElementSibling.querySelector('.image-field-caption p')
+      .textContent;
+      
+    caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente
+    lightbox.style.display = 'flex';
+    }
 
-// Événements de clic sur chaque image pour ouvrir le lightbox avec la légende
-images.forEach((image, index) => {
-image.addEventListener('click', () => {
-  showImage(index);
-});
-});
+    // Événements de clic sur chaque image pour ouvrir le lightbox avec la légende
+    images.forEach((image, index) => {
+    image.addEventListener('click', () => {
+      showImage(index);
+    });
+    });
 
-// Fermer le lightbox
-closeBtn.addEventListener('click', () => {
-lightbox.style.display = 'none';
-});
-
-// Navigation pour images précédente et suivante
-prevBtn.addEventListener('click', (e) => {
-e.stopPropagation();
-showImage(currentIndex - 1);
-});
-
-nextBtn.addEventListener('click', (e) => {
-e.stopPropagation();
-showImage(currentIndex + 1);
-});
-
-// Fermer le lightbox en cliquant en dehors de l'image
-lightbox.addEventListener('click', (e) => {
-if (e.target === lightbox) {
-  lightbox.style.display = 'none';
-}
-});
-
-// Ajout des contrôles clavier (Échap, flèches gauche/droite)
-document.addEventListener('keydown', (e) => {
-if (lightbox.style.display === 'flex') {
-  if (e.key === 'Escape') {
+    // Fermer le lightbox
+    closeBtn.addEventListener('click', () => {
     lightbox.style.display = 'none';
-  } else if (e.key === 'ArrowLeft') {
+    });
+
+    // Navigation pour images précédente et suivante
+    prevBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
     showImage(currentIndex - 1);
-  } else if (e.key === 'ArrowRight') {
+    });
+
+    nextBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
     showImage(currentIndex + 1);
-  }
-}
-});
+    });
+
+    // Fermer le lightbox en cliquant en dehors de l'image
+    lightbox.addEventListener('click', (e) => {
+    if (e.target === lightbox) {
+      lightbox.style.display = 'none';
+    }
+    });
+
+    // Ajout des contrôles clavier (Échap, flèches gauche/droite)
+    document.addEventListener('keydown', (e) => {
+    if (lightbox.style.display === 'flex') {
+      if (e.key === 'Escape') {
+        lightbox.style.display = 'none';
+      } else if (e.key === 'ArrowLeft') {
+        showImage(currentIndex - 1);
+      } else if (e.key === 'ArrowRight') {
+        showImage(currentIndex + 1);
+      }
+    }
+    });
 
 
 //////////////// end lightbox galerie image page site////////////////////////
@@ -578,12 +600,9 @@ if (container) {
   }
 }
 });
-
-
 //////////////////// end wrapper views-row  lessites /////////////////////////
 
 
-
 ////////////////////  start div infos site  ////////////////////////
 
 // Vérifie si la page a la classe 'node-type-site' dans le <body>
@@ -627,6 +646,36 @@ if (elementsToWrap.length > 0) {
 }
 ////////////////////  end div infos site  ////////////////////////
 
+
+////////////////////  start div infos actualité  ////////////////////////
+
+$(document).ready(function () {
+  // Vérifier si .layout-container A l'ID #page-node (et non un élément enfant)
+  if ($(".layout-container").attr("id") === "page-node") {
+      $("article.node-type-actualite").each(function () {
+          let article = $(this);
+          let dateField = article.find(".field_field_date");
+          let typeField = article.find(".field_field_type_d_actualite");
+
+          // Vérifier si les deux éléments existent
+          if (dateField.length > 0 && typeField.length > 0) {
+              // Vérifier si l'encapsulation n'existe pas déjà
+              if (article.find(".infos-actu").length === 0) {
+                  // Créer un conteneur et y insérer les éléments
+                  let infosActu = $("<div>").addClass("infos-actu").append(dateField, typeField);
+                  
+                  // Ajouter ce conteneur après les champs existants
+                  article.append(infosActu);
+              }
+          }
+      });
+  }
+});
+
+////////////////////  end div infos actualité  ////////////////////////
+
+//////////////////////////////////////////////////////////////////
+
 document.addEventListener("DOMContentLoaded", function() {
 // Sélectionner les éléments à déplacer
 const documentsField = document.querySelector(".field_field_documents");
@@ -684,6 +733,110 @@ moveLanguageSwitcher();
 window.addEventListener("resize", moveLanguageSwitcher);
 });
 
+///////////////////////////////////////////////////////////////
+
+/////////////// start class à view-rows-ressources ////////
+$(document).ready(function () {
+  $(".view-rows-wrapper").each(function () {
+      let h3Container = $(this).prev("h3").find("div[class^='type-']");
+      let classToAdd = h3Container.attr("class"); // Récupère la classe complète (ex: "type-Documentation")
+
+      if (classToAdd) {
+          $(this).addClass(classToAdd); // Ajoute cette classe à .view-rows-wrapper
+      }
+  });
+});
+////////////////// end class à view-rows-wrapper ////////////////
+
+
+
+/////////////////// start voir plus...  ressources ////////////////////
+
+$(document).ready(function () {
+  // Vérifier si on est sur la page avec l'ID #ressources
+  if ($("#ressources").length > 0) {
+      $(".view-rows-wrapper").each(function () {
+          let container = $(this); // Cible uniquement cette section
+          let items = container.find(".views-row"); // Les éléments à afficher progressivement
+          let visibleCount = 4; // Nombre d'éléments visibles au départ (par défaut)
+
+          // Récupérer la classe `type-XXX`
+          let typeClass = container.attr("class").split(" ").find(cls => cls.startsWith("type-"));
+          let typeName = typeClass ? typeClass.replace("type-", "").replace(/-/g, " ") : "contenu"; // Nettoyer le nom
+
+          // Ajuster le nombre d'éléments visibles en fonction du type
+          if (typeClass === "type-podcast" || typeClass.toLowerCase() === "type-vidéo") {
+              visibleCount = 2; // Pour Podcast et Vidéo
+          } else if (typeClass === "type-kit-de-communication") {
+              visibleCount = 1; // Pour Kit de Communication
+          }
+
+          // Si le nombre total d'éléments est inférieur ou égal à la limite, ne pas ajouter le bouton
+          if (items.length <= visibleCount) {
+              return; // Sortir de la boucle
+          }
+
+          // Ajouter le bouton dynamiquement après chaque `.view-rows-wrapper`
+          let button = $("<button>")
+              .addClass("voir-plus")
+              .text("Voir plus de " + typeName)
+              .insertAfter(container);
+
+          // Cacher tous les éléments sauf ceux définis par `visibleCount`
+          items.hide().slice(0, visibleCount).show();
+
+          // Action sur le bouton
+          button.on("click", function () {
+              let hiddenItems = container.find(".views-row:hidden").slice(0, 4); // Prochains éléments à afficher
+
+              if ($(this).text().includes("Voir plus")) {
+                  hiddenItems.slideDown(); // Afficher avec un effet de glissement
+
+                  if (container.find(".views-row:hidden").length === 0) {
+                      $(this).text("Voir moins de " + typeName); // Changer le texte du bouton si tout est affiché
+                  }
+              } else {
+                  container.find(".views-row").slice(visibleCount).slideUp(); // Replier les éléments
+                  $(this).text("Voir plus de " + typeName); // Revenir à l'état initial
+              }
+          });
+      });
+  }
+});
+
+
+///////////////////  end voir plus...  ressources ////////////////////
+
+
+
+/////////////////// start voir plus...  actualite dans /actualites & /home ////////////////////
+$(document).ready(function () {
+  // if ($("#actualites").length > 0) {
+    $(".node-type-actualite").each(function () {
+      let article = $(this);
+
+      let body = article.find(".field_body");
+      let links = article.find(".field_field_liens");
+
+      body.hide();
+      links.hide();
+
+      let toggleButton = $("<button>")
+          .addClass("toggle-actualite")
+          .insertAfter(article);
+
+      toggleButton.on("click", function () {
+          body.slideToggle();
+          links.slideToggle();
+          $(this).toggleClass("open");
+      });
+  });
+  // }
+});
+
+
+///////////////////  end voir plus...  actualite dans /actualites & /home ////////////////////
+
 
 })(jQuery, window);
 

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

@@ -33,9 +33,69 @@
             .node-type-actualite{
                 width: 100%;
                 padding-bottom: 7rem;
-                a{
+                display: flex;
+                flex-direction: column;
+                div{
+                    order: 2;
                     display: flex;
                     flex-direction: column;
+                    .field_body {
+                        order: 2;
+                        padding-bottom: 2rem;
+                        p{
+                        font-size: 0.8rem;
+                        }
+                    }
+                    .field_field_liens{
+                        order: 3;
+                        padding-bottom: 2rem;
+                        padding-top: 2rem;
+                        width: fit-content;
+
+                        a{  
+                            display: flex;
+                            flex-direction: row;
+                            padding-left: 0.5rem;
+                            display: inline-flex;
+                            align-items: center;
+                            color: white;
+                            background: black;
+                            text-transform: uppercase;
+                            font-size: 0.6rem;
+                            svg{
+                                display: none;
+                            }
+                            &::after{
+                                display: inline-flex;
+                                content: url("../img/noun-arrow-to-right.svg");
+                                padding-right: 0.2rem;
+                                padding-left: 0.2rem;
+                                
+                            }
+
+                        }
+                        
+                        a:not(.ext){
+                            display: none;
+                        }
+                    }
+    
+                    .field_field_images{
+                        order: 5;
+                        img{
+                            width: 100%;
+                            height: auto;
+                        }
+                        blockquote.image-field-caption{
+                            margin-left: 0;
+                            margin-top: 0;
+                            p{
+                                margin-top: 0;
+                                font-size: 0.4rem;
+                            }
+    
+                        }
+                    }
                 }
 
                 .infos-actu{
@@ -51,8 +111,8 @@
                         color: red;
                         font-size: 0.6rem;
                         font-weight: 600;
-                        display: inline-flex;
-                        align-items: center;
+                        display: flex;
+                        flex-direction: row;
                         &::before{
                             content: url('../img/type-actu.svg');
                             padding-right: 0.4rem;
@@ -60,9 +120,10 @@
                     }
                     .field_field_date{
                         color: red;
-                        display: inline-flex;
-                        align-items: center;
+                        display: flex;
+                        flex-direction: row;
                         margin-left: 1rem;
+                        padding-right: 1rem;
                         &::before{
                             content: url('../img/date-actu.svg');
                             padding-right: 0.4rem;
@@ -70,60 +131,7 @@
                     }
         
                 }
-                .field_body {
-                    order: 2;
-                    padding-bottom: 2rem;
-                    p{
-                    font-size: 0.8rem;
-                    }
-                }
-                .field_field_liens{
-                    order: 3;
-                    padding-bottom: 2rem;
-                    padding-top: 2rem;
-                    a{  
-                        display: flex;
-                        flex-direction: row;
-                        padding-left: 0.5rem;
-                        display: inline-flex;
-                        align-items: center;
-                        color: white;
-                        background: black;
-                        text-transform: uppercase;
-                        font-size: 0.6rem;
-                        svg{
-                            display: none;
-                        }
-                        &::after{
-                            display: inline-flex;
-                            content: url("../img/noun-arrow-to-right.svg");
-                            padding-right: 0.2rem;
-                            padding-left: 0.2rem;
-                            
-                        }
-                    }
-                    
-                    a:not(.ext){
-                        display: none;
-                    }
-                }
 
-                .field_field_images{
-                    order: 5;
-                    img{
-                        width: 100%;
-                        height: auto;
-                    }
-                    blockquote.image-field-caption{
-                        margin-left: 0;
-                        margin-top: 0;
-                        p{
-                            margin-top: 0;
-                            font-size: 0.4rem;
-                        }
-
-                    }
-                }
             }
 
         

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

@@ -0,0 +1,277 @@
+
+#actualites{
+    background-color: #f6f7f3;
+
+    .layout-content{
+        // padding-top: 1rem;
+        .content_container{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            #block-quartiers-de-demain-titredepage{
+                margin-top: 3rem;
+                margin-left: 15%;
+                margin-bottom: 4rem;
+                width: 70%;
+                @media(max-width: 810px){
+                    margin-top: 14rem;
+                }
+                h1{
+                    width: fit-content;
+                    margin: auto;
+                    text-transform: none;
+                    color: black;
+                    font-size: 2rem;
+                    font-family: "gilroy-medium"
+                }
+                
+                
+            }
+            .views-element-container{
+                margin-left: 20%;
+                width: 65%;
+
+                .view-rows-wrapper{
+                    display: flex;
+                    flex-direction: column;
+                    flex-wrap: wrap;
+                    
+                    
+                    .views-row{
+                        width: 100%;
+                        font-size: 0.5rem;
+                        margin-bottom: 2rem;
+                        padding-bottom: 1rem;
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+                        border-bottom: solid black 0.5px;
+                        .node-type-actualite{
+                            width: 85%;
+                            // padding-bottom: 2rem;
+                            
+                            .content-wrapper-actu{
+                                display: grid;
+                                grid-template-columns: 1fr 2fr;
+                                grid-template-rows: repeat(5 1fr);
+                                .field_field_images{
+                                   grid-column: 1;
+                                   grid-row: 1 /span 5;
+                                   width: 250px;
+                                //    display: flex;
+                                //    margin: auto;
+                                    margin-right: 1rem;
+
+                                   .actu-diaporama{
+                                        // height: 150px;
+                                        width: 100%;
+                                        display: flex;
+                                        flex-direction: row;
+                                        align-items: center !important;
+                                        margin:auto;
+                                        margin-right: 1rem;
+                                        .slick-list{
+                                            margin: auto;
+                                            padding-top: 0 !important;
+                                            .cadre-img-zoom{
+                                                display: flex;
+                                                margin: auto;
+                                                width: 250px;
+                                                height: auto;
+                                                img{
+                                                    width: 100%;
+                                                    height: auto;
+                                                    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 */
+                                                }
+                                            }
+                                            blockquote.image-field-caption{
+                                                margin: 0;
+                                                p{
+                                                    margin-top: 0;
+                                                    font-size: 0.4rem;
+                                                }
+                        
+                                            }
+                                        }
+                                        button{
+                                            margin: auto;
+                                            transform: none;
+                                            top: 30%;
+                                            height: 0;
+                                            width: 0;
+                                            &:before{
+                                                transform: scale(0.4) !important;
+                                                &:hover{
+                                                    filter: brightness(1.75);
+                                                }
+                                            }
+                                        }
+                                        button.slick-next{
+                                            right: 15% ;
+                                            padding: 0;
+                                        }
+                                        button.slick-prev{
+                                            left: 5%;
+                                            padding: 0;
+                                        }
+                                    }
+                                }
+                                .field_field_type_d_actualite,
+                                .field_field_date,
+                                .field_field_site,
+                                .field_title,
+                                .field_body,
+                                .field_field_liens{
+                                   grid-column: 2;
+                                   
+                                }
+                                .field_field_type_d_actualite{
+                                    order: 2;
+                                    a{
+                                    text-transform: uppercase;
+                                    color: red;
+                                    font-size: 0.6rem;
+                                    font-weight: 600;
+                                    display: inline-flex;
+                                    align-items: center;
+                                        &::before{
+                                            content: "";
+                                            display: inline-block;
+                                            width: 16px; /* Ajuste la largeur */
+                                            height: 16px; /* Ajuste la hauteur */
+                                            background-image: url('../img/type-actu.svg');
+                                            background-size: contain;
+                                            background-repeat: no-repeat;
+                                            // margin-right: 0.4rem;
+                                            padding-right: 0.4rem;
+                                        }
+                                    }
+                                }
+                                .field_field_date{
+                                    order: 3;
+                                    color: red;
+                                    font-size: 0.6rem;
+                                    font-weight: 600;
+                                    display: inline-flex;
+                                    align-items: center;
+                                    // margin-left: 1rem;
+                                    &::before{
+                                        content: "";
+                                        display: inline-block;
+                                        width: 16px; /* Ajuste la largeur */
+                                        height: 16px; /* Ajuste la hauteur */
+                                        background-image: url('../img/date-actu.svg');
+                                        background-size: contain;
+                                        background-repeat: no-repeat;
+                                        // margin-right: 0.4rem;
+                                        padding-right: 0.4rem;
+                                    }
+                                }
+                                .field_field_site{
+                                    order: 4;
+                                    a{
+                                        color: red;
+                                        font-size: 0.6rem;
+                                        font-weight: 600;
+                                        display: inline-flex;
+                                        align-items: center;
+                                        // margin-left: 1rem;
+                                        padding-left: 0.2rem;
+                                        
+                                        &::before{
+                                            content: "";
+                                            display: inline-block;
+                                            width: 10px; /* Ajuste la largeur */
+                                            height: 10px; /* Ajuste la hauteur */
+                                            background-image: url("../img/map_pointer.svg");
+                                            background-size: contain;
+                                            background-repeat: no-repeat;
+                                            // margin-right: 0.4rem;
+                                            padding-right: 0.5rem;
+                                        }
+                                    }
+                                }
+                                .field_title{
+                                    order: 5;
+                                    a{
+                                    color: $blue_QDD;
+                                    font-size: 1.2rem;
+                                    }
+                                }
+                            
+                                .field_body {
+                                    order: 6;
+                                    padding-bottom: 2rem;
+                                    opacity: 1 !important;
+                                    transform:none !important;
+                                    font-family: 'gilroy-light';
+
+                                    p{
+                                    font-size: 0.8rem;
+                                    }
+                                }
+                                .field_field_liens{
+                                    order: 7;
+                                    padding:0;
+                                    width: fit-content;
+                                    a{  
+                                        display: flex;
+                                        flex-direction: row;
+                                        padding-left: 0.5rem;
+                                        display: inline-flex;
+                                        align-items: center;
+                                        color: white;
+                                        background: black;
+                                        text-transform: uppercase;
+                                        font-size: 0.6rem;
+                                        svg{
+                                            display: none;
+                                        }
+                                        &::after{
+                                            display: inline-flex;
+                                            content: url("../img/noun-arrow-to-right.svg");
+                                            padding-right: 0.2rem;
+                                            padding-left: 0.2rem;
+                                            
+                                        }
+                                    }
+                                    
+                                }
+                
+
+                            }
+                        }
+                        .toggle-actualite {
+                            display: block;
+                            width: 40px;
+                            height: 40px;
+                            margin: 10px auto;
+                            border: none;
+                            background-color: transparent;
+                            background-image: url("../img/fleche-bas.svg");
+                            background-size: contain;
+                            background-repeat: no-repeat;
+                            background-position: center;
+                            cursor: pointer;
+                            transition: transform 0.3s ease;
+                        }
+                        
+                        .toggle-actualite.open {
+                            transform: rotate(180deg);
+                        }
+                    
+
+                    }
+
+                }
+                
+            }
+            
+        }
+    }
+}

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

@@ -1,9 +1,6 @@
 #home{
-
-   
     .config_pages--type--diaporama-home{
         position: relative;
-        
         .diaporama{
             .slick-list{
                 padding: 0 !important;   
@@ -11,7 +8,7 @@
                         max-height: 1281px;
                         overflow:hidden;
                         img{
-                            width: 100%;
+                            width: 100% !important;
                             height: auto;
                             object-fit: cover;
                             // transform: scale(1.2);
@@ -19,14 +16,9 @@
                             // animation-duration: 4.5s;
                             // animation-name: zoomOut;
                             // animation-iteration-count: infinite;
-                            
                         }
-
                     }
                     
-                     
-                            
-                    
                     blockquote{
                             position: relative;
                             top: -30px;

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

@@ -0,0 +1,296 @@
+
+#ressources{
+    background-color: #f6f7f3;
+
+
+    .layout-content{
+        // padding-top: 1rem;
+        .content_container{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            #block-quartiers-de-demain-titredepage{
+                margin-top: 3rem;
+                margin-left: 15%;
+                margin-bottom: 1rem;
+                width: 70%;
+                @media(max-width: 810px){
+                    margin-top: 14rem;
+                }
+                h1{
+                    width: fit-content;
+                    margin: auto;
+                    text-transform: none;
+                    color: black;
+                    font-size: 2rem;
+                    font-family: "gilroy-medium"
+                }
+                
+                
+            }
+            .views-element-container{
+                margin-left: 15%;
+                width: 65%;
+                h3{
+                    &::before{
+                        content:"";
+                        display: block;
+                        border-bottom: solid 2px $blue_QDD;
+                        // width: 80% ;
+                        margin: auto;
+                    }
+                    text-align: center;
+                    div{
+                        .field_name{
+                            h2{
+                                margin-bottom: 0.6rem;
+                                a{
+                                    font-family: "gilroy-light";
+                                    color: $blue_QDD;
+                                    font-size: 1.2rem;
+                                }
+                            }
+                        }
+                        .field_description{
+                            margin-left: 10%;
+                            margin-right: 10%;
+                            font-family: "gilroy-light";
+                            p{
+                                margin-top: 0.6rem;
+                            }
+                        }
+                    }
+                    .type-Kit-de-communication{
+                        background-color: $blue_QDD;
+                        .field_name h2 {
+                            margin: 0;
+                            a{
+                                color: white;
+                            }
+                        }
+                        
+                    }
+                    
+                }
+                h3:has(div.type-Kit-de-communication){
+                    margin-bottom: 0;
+                    .field_name{
+                        padding-top: 1rem;
+                    }
+                }
+                button.voir-plus{
+                    background-color: transparent;
+                    color: $blue_QDD;
+                    border: solid $blue_QDD 0.5px;
+                    padding: 0.3rem;
+                    display: flex;
+                    margin: auto;
+                }
+                .view-rows-wrapper{
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: wrap;
+                    
+                    
+                    .views-row{
+                        // width: 30%;
+                        font-size: 0.5rem;
+                        margin-bottom: 1rem;
+                        h2{
+                            font-family: "gilroy-semibold";
+                            color: $blue_QDD;
+                            font-size: 00.6rem;
+                        } 
+                        p{
+                            font-size: 0.5rem;
+                        }  
+                        .field_field_mots_clefs{
+                            div{
+                                display: flex;
+                                flex-direction: row !important;
+                                div{
+                                    border: solid 1px $blue_QDD;
+                                    margin-right: 0.2rem;
+                                    padding: 1.3%;
+                                    padding-bottom: 0.2%;
+                                    padding-top: 0.2%;
+                                    font-size: 0.4rem;
+                                    font-family: "gilroy-semibold";
+                                    a{
+                                        color: $blue_QDD;
+                                    }
+                                }
+                            }
+
+                        }  
+                        .field_field_site{
+                            div {
+                                
+                                a {
+                                    position: relative;
+                                    padding-left: 20px; // Ajuster selon la taille de l'icône
+                        
+                                    &:before {
+                                        content: "";
+                                        position: absolute;
+                                        left: 0;
+                                        top: 50%;
+                                        transform: translateY(-50%);
+                                        width: 1em;
+                                        height: 1em;
+                                        background-image: url("../img/map_pointer.svg");
+                                        background-size: contain;
+                                        background-repeat: no-repeat;
+                                    }
+                                    
+                                    color: $red_QDD;
+                                    font-family: "gilroy-semibold";
+                                }
+                            }
+
+                        }  
+                        
+                        .type-documentation{
+                            .field_body,
+                            .field_field_images{
+                                display: none;
+                            }
+                        }
+
+
+                        .type-podcast{
+                            .content-ressource{
+                                display: grid;
+                                grid-template-columns: 1fr 1.2fr;
+                                grid-template-rows: repeat(5 1fr);
+                                margin-top: 1rem;
+                                .field_field_images{
+                                   grid-column: 1;
+                                   grid-row: 1 /span 5;
+                                   padding: 0 1rem 1rem 1rem;
+                                    img{
+                                        width: 100%;
+                                        height: auto;
+                                        aspect-ratio: 1 / 1;
+                                        object-fit: cover;
+                                        border-radius: 9px;
+                                    }
+                                }
+                                .field_title, h2{
+                                    margin-top: 0;
+                                }
+                                .field_title,
+                                .field_field_sous_titre,
+                                .field_field_author,
+                                .field_field_date_ressource,
+                                .field_body,
+                                .field_field_mots_clefs,
+                                .field_field_site,
+                                .field_field_documents,
+                                .field_field_liens{
+                                   grid-column: 2;
+                                   
+                                }
+
+                            }
+                           
+                        }
+                        .type-vidéo{
+                            .content-ressource{
+                                margin: 1rem;
+                            }
+                            .field_body{
+                                opacity: 1 !important;
+                                transform: none !important;
+                            }
+                            a img{
+                                max-width: 100%;
+                                height: auto;
+                                object-fit: cover;
+                                border-radius: 9px;
+                            }
+                        }
+                        .type-kit-de-communication{
+                           div.content-ressource{
+                                display: flex;
+                                flex-direction: column;
+                                align-items: center;
+                                background-color: $blue_QDD;
+                                color: white;
+                                padding: 1rem 3rem;
+                                
+                                .field_title{
+                                    display: none;
+                                }
+                                .field_field_sous_titre{
+                                    text-align: center;
+                                    font-size: 0.9rem;
+                                    font-family: 'gilroy-light';
+                                }
+                                .field_body{
+                                    text-align: center;
+                                    font-size: 0.7rem;
+                                    font-family: 'gilroy-light';
+                                }
+                                .field_field_liens{
+                                    width: fit-content;
+                                    a{  
+                                        display: flex;
+                                        flex-direction: row;
+                                        padding-left: 0.5rem;
+                                        display: inline-flex;
+                                        align-items: center;
+                                        color: white;
+                                        background: black;
+                                        text-transform: uppercase;
+                                        font-size: 0.6rem;
+                                        svg{
+                                            display: none;
+                                        }
+                                        &::after{
+                                            display: inline-flex;
+                                            content: url("../img/noun-arrow-to-right.svg");
+                                            padding-right: 0.2rem;
+                                            padding-left: 0.2rem;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                   
+
+                    .views-row:has(.type-podcast){
+                        width: 50%;
+                        @media(max-width: 810px){
+                            width: 100%;
+                        }
+                    }
+                    .views-row:has(.type-documentation){
+                        width: 25%;
+                        @media(max-width: 810px){
+                            width: 50%;
+                        }
+                    }
+                    .views-row:has(.type-vidéo){
+                        width: 50%;
+                        @media(max-width: 810px){
+                            width: 100%;
+                        }
+                    }
+                    .views-row:has(.type-Kit-de-communication){
+                        width: 100%;
+                    }
+
+                }
+
+
+
+                // }
+                
+            }
+            
+        }
+    }
+}

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

@@ -27,181 +27,252 @@
                 padding-bottom: 0rem;
             }
         }
-        .view{
+
+        .view-rows-wrapper{
+            margin-left: 20%;
+            width: 65%;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: wrap;    
+        }
+
+        .views-row{
+            display: flex;
+            margin: auto;
+            width: 100%;
+            font-size: 0.5rem;
+            margin-top: 1rem;
+            margin-bottom: 1rem;
+            padding-bottom: 1rem;
             display: flex;
             flex-direction: row;
-            flex-wrap: nowrap;
-            width: 100vw;
-        }
-        .views-row{
-            // width: 500px !important;
-            padding: 1rem;
-            
-            @media(max-width: 550px){
-                width: 296px !important;
-                padding-top: 3rem;
-            }
-            article.node-type-actualite{
-                a{
-                display: flex;
-                flex-direction: column;
-                h2{
-                    display: none;
-                }
-                .field_field_images{
-                    order: 1;
-                    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;
-                    margin-bottom: 0.6rem;
-                    @media(max-width: 550px){
-                        height: 170px;
-                    }
-                    div{
-                        height: 100%;
-                        div{
-                            // height: 600px;
+            align-items: center;
+            border-bottom: solid black 0.5px;
+            .node-type-actualite{
+                width: 85%;
+                // padding-bottom: 2rem;
+                
+                .content-wrapper-actu{
+                    display: grid;
+                    grid-template-columns: 1fr 2fr;
+                    grid-template-rows: repeat(5 1fr);
+                    .field_field_images{
+                       grid-column: 1;
+                       grid-row: 1 /span 5;
+                       width: 250px;
+                    //    display: flex;
+                    //    margin: auto;
+                        margin-right: 1rem;
 
-                            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;
+                       .actu-diaporama{
+                            // height: 150px;
+                            width: 100%;
+                            display: flex;
+                            flex-direction: row;
+                            align-items: center !important;
+                            margin:auto;
+                            margin-right: 1rem;
+                            .slick-list{
+                                margin: auto;
+                                padding-top: 0 !important;
+                                .cadre-img-zoom{
+                                    display: flex;
+                                    margin: auto;
+                                    width: 250px;
+                                    height: auto;
+                                    img{
+                                        width: 100%;
+                                        height: auto;
+                                        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 */
+                                    }
+                                }
+                                blockquote.image-field-caption{
+                                    margin: 0;
+                                    p{
+                                        margin-top: 0;
+                                        font-size: 0.4rem;
+                                    }
+            
+                                }
+                            }
+                            button{
+                                margin: auto;
+                                transform: none;
+                                top: 30%;
+                                height: 0;
+                                width: 0;
+                                &:before{
+                                    transform: scale(0.4) !important;
+                                    &:hover{
+                                        filter: brightness(1.75);
                                     }
                                 }
                             }
+                            button.slick-next{
+                                right: 15% ;
+                                padding: 0;
+                            }
+                            button.slick-prev{
+                                left: 5%;
+                                padding: 0;
+                            }
                         }
                     }
-                    
-                    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;
-                        }
+                    .field_field_type_d_actualite,
+                    .field_field_date,
+                    .field_field_site,
+                    .field_title,
+                    .field_body,
+                    .field_field_liens{
+                       grid-column: 2;
+                       
                     }
-                }
-
-                .field_field_type_d_actualite{
-                    text-transform: uppercase;
-                    color: red;
-                    font-size: 0.5rem;
-                    font-family: 'gilroy-bold';
-                    display: inline-flex;
-                    align-items: center;
-                    &::before{
-                        content: url('../img/type-actu.svg');
-                        padding-right: 0.3rem;
-                        padding-bottom: 0.2rem;
-                    }
-                }
-                .infos-actu{
-                    order: 2;
-                    h2{
-                        font-family: 'gilroy-semibold';
-                    }
-                }
-                .field_field_date{
-                    
-                    color: red;
-                    display: inline-flex;
-                    align-items: center;
-                    font-size: 0.5rem;
-                    font-family: 'gilroy-bold';
-
-                    &::before{
-                        content: url('../img/date-actu.svg');
-                        padding-right: 0.3rem;
-                    }
-                }
-            
-
-                .field_title{
-                    order: 3;
-                    padding-top: 0.2rem;
-                    h2{
-                        margin: 0;
-                        line-height: 0.4;
-                        padding-bottom: 0.6rem;
+                    .field_field_type_d_actualite{
+                        order: 2;
                         a{
-                            font-size: 0.8rem;
-                            color: $blue_QDD;
-                        }
-                    } 
-                }
-                .field_body{
-                    order: 4;
-                    // visibility: visible;
-                    opacity: 1 !important;
-                    transform: none !important;
-                    font-family: 'gilroy-regular';
-                    p{
-                        margin: 0;
-                        margin-bottom: 1rem;
-                        font-size: 0.7rem ;
-                    }
-                    a{
-                        color: $blue_QDD;
-                    }
-                }
-                .field_field_liens{
-                    order: 5;
-                    width: fit-content;
-                    padding-left: 0.5rem;
-                    // padding-bottom: 0.2rem;
-                    // padding-top: 0.2rem;
-                    background: black;
-                    @media (max-width:810px) {  
-                        margin-left: 0;
-                    }
-
-                    a{
+                        text-transform: uppercase;
+                        color: red;
+                        font-size: 0.6rem;
+                        font-weight: 600;
                         display: inline-flex;
                         align-items: center;
-                        color: white;
-                        text-transform: uppercase;
+                            &::before{
+                                content: "";
+                                display: inline-block;
+                                width: 16px; /* Ajuste la largeur */
+                                height: 16px; /* Ajuste la hauteur */
+                                background-image: url('../img/type-actu.svg');
+                                background-size: contain;
+                                background-repeat: no-repeat;
+                                // margin-right: 0.4rem;
+                                padding-right: 0.4rem;
+                            }
+                        }
+                    }
+                    .field_field_date{
+                        order: 3;
+                        color: red;
                         font-size: 0.6rem;
-                        
-                        svg{
-                            display: none;
+                        font-weight: 600;
+                        display: inline-flex;
+                        align-items: center;
+                        // margin-left: 1rem;
+                        &::before{
+                            content: "";
+                            display: inline-block;
+                            width: 16px; /* Ajuste la largeur */
+                            height: 16px; /* Ajuste la hauteur */
+                            background-image: url('../img/date-actu.svg');
+                            background-size: contain;
+                            background-repeat: no-repeat;
+                            // margin-right: 0.4rem;
+                            padding-right: 0.4rem;
                         }
-                        &::after{
+                    }
+                    .field_field_site{
+                        order: 4;
+                        a{
+                            color: red;
+                            font-size: 0.6rem;
+                            font-weight: 600;
                             display: inline-flex;
-                            content: url("../img/noun-arrow-to-right.svg");
-                            padding-right: 0.2rem;
+                            align-items: center;
+                            // margin-left: 1rem;
                             padding-left: 0.2rem;
-                            // padding-bottom: 0.2rem;
+                            
+                            &::before{
+                                content: "";
+                                display: inline-block;
+                                width: 10px; /* Ajuste la largeur */
+                                height: 10px; /* Ajuste la hauteur */
+                                background-image: url("../img/map_pointer.svg");
+                                background-size: contain;
+                                background-repeat: no-repeat;
+                                // margin-right: 0.4rem;
+                                padding-right: 0.5rem;
+                            }
                         }
-                    }   
+                    }
+                    .field_title{
+                        order: 5;
+                        line-height: 1rem;
+                        a{
+                        color: $blue_QDD;
+                        font-size: 1.2rem;
+                        }
+                        h2{
+                            margin: 0;
+                            padding-left: 0;
+                        }
+                    }
+                
+                    .field_body {
+                        order: 6;
+                        padding-bottom: 1rem;
+                        opacity: 1 !important;
+                        transform:none !important;
+                        font-family: 'gilroy-light';
+
+                        p{
+                        font-size: 0.8rem;
+                        }
+                    }
+                    .field_field_liens{
+                        order: 7;
+                        padding:0;
+                        width: fit-content;
+                        a{  
+                            display: flex;
+                            flex-direction: row;
+                            padding-left: 0.5rem;
+                            display: inline-flex;
+                            align-items: center;
+                            color: white;
+                            background: black;
+                            text-transform: uppercase;
+                            font-size: 0.6rem;
+                            svg{
+                                display: none;
+                            }
+                            &::after{
+                                display: inline-flex;
+                                content: url("../img/noun-arrow-to-right.svg");
+                                padding-right: 0.2rem;
+                                padding-left: 0.2rem;
+                                
+                            }
+                        }
+
+                    }
+    
+
                 }
             }
+            .toggle-actualite {
+                display: block;
+                width: 40px;
+                height: 40px;
+                margin: 10px auto;
+                border: none;
+                background-color: transparent;
+                background-image: url("/themes/custom/quartiers_de_demain/dist/assets/img/fleche-bas.svg");
+                background-size: contain;
+                background-repeat: no-repeat;
+                background-position: center;
+                cursor: pointer;
+                transition: transform 0.3s ease;
             }
+            
+            .toggle-actualite.open {
+                transform: rotate(180deg);
+            }
+            
 
         }
-        .views-row:nth-child(odd){
-            position: relative;
-            top: 60px;
-            @media(max-width: 550px){
-                top: 0;
-            }
-        } 
-
 
     }
 }

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

@@ -201,6 +201,9 @@ footer{
             flex-direction: column;
         }
     }
+    button.voir-plus{
+        display: none;
+    }
 
 }
 

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

@@ -48,6 +48,7 @@
 @import "pages/actualite";
 @import "pages/node-type-site";
 @import "pages/lessites.scss";
-
+@import "pages/ressources";
+@import "pages/actualites";
 
 @import "/home/ouidade/Developer/docker-quartiersdedemain/src/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css";

web/themes/custom/quartiers_de_demain/templates/field--node--field-images--actualite.html.twig

@@ -0,0 +1,78 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set title_classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+{%
+  set ancre_href = '#paragraph-id--' ~ paragraph.id()
+%}
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes }}>
+      {% for item in items %}
+        <div{{ item.attributes }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes }}>{{ item.content }}</div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes }}>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+    {% if multiple %}
+      <div class="actu-diaporama">
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

web/themes/custom/quartiers_de_demain/templates/node--actualite--teaser.html.twig

@@ -88,8 +88,8 @@
     </footer>
   {% endif %}
 
-  {# <div{{ content_attributes }}> #}
+  <div{{ content_attributes }}>
     {{ content }}
-  {# </div> #}
+  </div>
 
 </article>

web/themes/custom/quartiers_de_demain/templates/node--actualite.html.twig

@@ -88,11 +88,11 @@
     </footer>
   {% endif %}
 
-  {# <div{{ content_attributes }}> #}
-    {# {{ content }} #}
-  {# </div> #}
-  {% block content %}
-  <a href="{{ url }}" rel="bookmark">{{ label }}
+  <div class="content-wrapper-actu"{{ content_attributes }}>
+    {{ content }}
+  </div>
+
+  {# {% block content %}
   {{content.field_images}}
   <div class="infos-actu">
     {{content.field_type_d_actualite}}
@@ -100,9 +100,5 @@
   </div>
     {{content.body}}
    {{content.field_liens}}
-    
-   
-</a>
-  {% endblock %}
-
+  {% endblock %} #}
 </article>

web/themes/custom/quartiers_de_demain/templates/node--ressource--teaser.html.twig

@@ -0,0 +1,103 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: (optional) The title of the node.
+ * - content: All node 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.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: (optional) Themed creation date field.
+ * - author_name: (optional) Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node 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.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - 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_node()
+ *
+ * @ingroup themeable
+ */
+#}
+{# <pre>{{ dump(node) }}</pre> #}
+
+{% set ressource_class = '' %}
+{% if node.field_type_de_ressource.entity %}
+  {% set ressource_class = 'type-' ~ node.field_type_de_ressource.entity.name.value|clean_class %}
+{% endif %}
+
+<article{{ attributes.addClass(ressource_class) }}>
+  {{ title_prefix }}
+  {% if label and not page %}
+    <h2{{ title_attributes }}>
+      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+    </h2>
+  {% endif %}
+  {{ title_suffix }}
+
+  {% if display_submitted %}
+    <footer>
+      {{ author_picture }}
+      <div{{ author_attributes }}>
+        {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
+        {{ metadata }}
+      </div>
+    </footer>
+  {% endif %}
+
+  <div class="content-ressource"{{ content_attributes }}>
+    {{ content }}
+  </div>
+</article>
+
+
+

web/themes/custom/quartiers_de_demain/templates/page--actualites.html.twig

@@ -0,0 +1,97 @@
+{#
+/**
+ * @file
+ * Claro's theme implementation to display a single Drupal page.
+ *
+ * The doctype, html, head, and body tags are not in this template. Instead
+ * they can be found in the html.html.twig template normally located in the
+ * core/modules/system directory.
+ *
+ * Available variables:
+ *
+ * General utility variables:
+ * - base_path: The base URL path of the Drupal installation. Will usually be
+ *   "/" unless you have installed Drupal in a sub-directory.
+ * - is_front: A flag indicating if the current page is the front page.
+ * - logged_in: A flag indicating if the user is registered and signed in.
+ * - is_admin: A flag indicating if the user has permission to access
+ *   administration pages.
+ *
+ * Site identity:
+ * - front_page: The URL of the front page. Use this instead of base_path when
+ *   linking to the front page. This includes the language domain or prefix.
+ *
+ * Page content (in order of occurrence in the default page.html.twig):
+ * - node: Fully loaded node, if there is an automatically-loaded node
+ *   associated with the page and the node ID is the second argument in the
+ *   page's path (e.g. node/12345 and node/12345/revisions, but not
+ *   comment/reply/12345).
+ *
+ * Regions:
+ * - page.header: Items for the header region.
+ * - page.pre_content: Items for the pre-content region.
+ * - page.breadcrumb: Items for the breadcrumb region.
+ * - page.highlighted: Items for the highlighted region.
+ * - page.help: Dynamic help text, mostly for admin pages.
+ * - page.content: The main content of the current page.
+ *
+ * @see template_preprocess_page()
+ * @see html.html.twig
+ */
+#}
+<div class="layout-container " id="actualites">
+
+  <header role="banner">
+    {{ page.header_left }}
+    {{ page.header_right }}
+    {{ page.header_nav }}
+  </header>
+
+  {{ page.primary_menu }}
+  {{ page.secondary_menu }}
+
+  {{ page.breadcrumb }}
+
+  {{ page.highlighted }}
+
+  {{ page.help }}
+
+  <main role="main">
+    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
+
+    <div class="layout-content">
+            
+     {{ page.content }}
+    </div>{# /.layout-content #}
+
+    {% if page.sidebar_first %}
+      <aside class="layout-sidebar-first" role="complementary">
+        {{ page.sidebar_first }}
+      </aside>
+    {% endif %}
+
+    {% if page.sidebar_second %}
+      <aside class="layout-sidebar-second" role="complementary">
+        {{ page.sidebar_second }}
+      </aside>
+    {% endif %}
+
+  </main>
+  {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
+    <footer role="contentinfo">
+      {# <section id="footer-top"> #}
+          <span class="totop"><a href="#" id="toTop"><i class="arrow-up"></i></a></span>
+      {# </section>  #}
+      <div class="footer">
+        <section id="footer-left">{{ page.footer_left }}</section> 
+        <div class='first-row'>
+          <section id="footer-middle">{{ page.footer_middle }}</section> 
+          <section id="footer-right">{{ page.footer_right }}</section> 
+        </div>
+
+      </div> 
+      {# <section id="footer-bottom">{{ page.footer_bottom }}</section>  #}
+    </footer>
+  {# {% endif %} #}
+
+</div>{# /.layout-container #}

web/themes/custom/quartiers_de_demain/templates/page--ressources.html.twig

@@ -0,0 +1,97 @@
+{#
+/**
+ * @file
+ * Claro's theme implementation to display a single Drupal page.
+ *
+ * The doctype, html, head, and body tags are not in this template. Instead
+ * they can be found in the html.html.twig template normally located in the
+ * core/modules/system directory.
+ *
+ * Available variables:
+ *
+ * General utility variables:
+ * - base_path: The base URL path of the Drupal installation. Will usually be
+ *   "/" unless you have installed Drupal in a sub-directory.
+ * - is_front: A flag indicating if the current page is the front page.
+ * - logged_in: A flag indicating if the user is registered and signed in.
+ * - is_admin: A flag indicating if the user has permission to access
+ *   administration pages.
+ *
+ * Site identity:
+ * - front_page: The URL of the front page. Use this instead of base_path when
+ *   linking to the front page. This includes the language domain or prefix.
+ *
+ * Page content (in order of occurrence in the default page.html.twig):
+ * - node: Fully loaded node, if there is an automatically-loaded node
+ *   associated with the page and the node ID is the second argument in the
+ *   page's path (e.g. node/12345 and node/12345/revisions, but not
+ *   comment/reply/12345).
+ *
+ * Regions:
+ * - page.header: Items for the header region.
+ * - page.pre_content: Items for the pre-content region.
+ * - page.breadcrumb: Items for the breadcrumb region.
+ * - page.highlighted: Items for the highlighted region.
+ * - page.help: Dynamic help text, mostly for admin pages.
+ * - page.content: The main content of the current page.
+ *
+ * @see template_preprocess_page()
+ * @see html.html.twig
+ */
+#}
+<div class="layout-container " id="ressources">
+
+  <header role="banner">
+    {{ page.header_left }}
+    {{ page.header_right }}
+    {{ page.header_nav }}
+  </header>
+
+  {{ page.primary_menu }}
+  {{ page.secondary_menu }}
+
+  {{ page.breadcrumb }}
+
+  {{ page.highlighted }}
+
+  {{ page.help }}
+
+  <main role="main">
+    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
+
+    <div class="layout-content">
+            
+     {{ page.content }}
+    </div>{# /.layout-content #}
+
+    {% if page.sidebar_first %}
+      <aside class="layout-sidebar-first" role="complementary">
+        {{ page.sidebar_first }}
+      </aside>
+    {% endif %}
+
+    {% if page.sidebar_second %}
+      <aside class="layout-sidebar-second" role="complementary">
+        {{ page.sidebar_second }}
+      </aside>
+    {% endif %}
+
+  </main>
+  {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
+    <footer role="contentinfo">
+      {# <section id="footer-top"> #}
+          <span class="totop"><a href="#" id="toTop"><i class="arrow-up"></i></a></span>
+      {# </section>  #}
+      <div class="footer">
+        <section id="footer-left">{{ page.footer_left }}</section> 
+        <div class='first-row'>
+          <section id="footer-middle">{{ page.footer_middle }}</section> 
+          <section id="footer-right">{{ page.footer_right }}</section> 
+        </div>
+
+      </div> 
+      {# <section id="footer-bottom">{{ page.footer_bottom }}</section>  #}
+    </footer>
+  {# {% endif %} #}
+
+</div>{# /.layout-container #}

web/themes/custom/quartiers_de_demain/templates/taxonomy-term.html.twig

@@ -0,0 +1,41 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a taxonomy term.
+ *
+ * Available variables:
+ * - url: URL of the current term.
+ * - name: (optional) Name of the current term.
+ * - content: Items for the content of the term (fields and description).
+ *   Use 'content' to print them all, or print a subset such as
+ *   'content.description'. Use the following code to exclude the
+ *   printing of a given child element:
+ *   @code
+ *   {{ content|without('description') }}
+ *   @endcode
+ * - attributes: HTML attributes for the wrapper.
+ * - page: Flag for the full page state.
+ * - term: The taxonomy term entity, including:
+ *   - id: The ID of the taxonomy term.
+ *   - bundle: Machine name of the current vocabulary.
+ * - view_mode: View mode, e.g. 'full', 'teaser', etc.
+ *
+ * @see template_preprocess_taxonomy_term()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{%
+  set ressource_class = 'type-' ~ term.name()|replace({' ': '-'})
+%}
+
+
+<div{{ attributes.addClass(ressource_class) }}>
+  {{ title_prefix }}
+  {% if name and not page %}
+    <h2><a href="{{ url }}">{{ name }}</a></h2>
+  {% endif %}
+  {{ title_suffix }}
+  {{ content }}
+</div>

web/themes/custom/quartiers_de_demain/templates/views-view-unformatted.html.twig

@@ -0,0 +1,54 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a view of unformatted rows.
+ *
+ * Available variables:
+ * - title: The title of this group of rows. May be empty.
+ * - rows: A list of the view's row items.
+ *   - attributes: The row's HTML attributes.
+ *   - content: The row's content.
+ * - view: The view object.
+ * - default_row_class: A flag indicating whether default classes should be
+ *   used on rows.
+ *
+ * @see template_preprocess_views_view_unformatted()
+ *
+ * @ingroup themeable
+ */
+#}
+{# 
+{% if title %}
+{%
+  set view_ressource_class = [
+    'view-rows-ressources',
+    title ? 'type-' ~ title.field_name.term.name(),
+
+  ]
+%}
+{% endif %} #}
+
+
+{%
+  set view_wrapper_class = [
+    'view-rows-wrapper',
+  ]
+%}
+
+
+{% if title %}
+  <h3>{{ title }}  </h3>
+{% endif %}
+<div {{ attributes.addClass(view_wrapper_class) }}>
+{% for row in rows %}
+  {%
+    set row_classes = [
+      default_row_class ? 'views-row',
+    ]
+  %}
+  <div{{ row.attributes.addClass(row_classes) }}>
+    {{- row.content -}}
+  </div>
+{% endfor %}
+</div>
+

web/themes/custom/quartiers_de_demain/webpack.config.js

@@ -5,6 +5,7 @@ let config = {
     mode: 'development',
     entry: [
         "./src/assets/js/quartiers_de_demain.js",
+       
         // "./src/assets/js/animated_logo.js",
         "./src/assets/js/animated_formes.js",
         "./src/assets/scss/quartiers_de_demain.scss",