js et css pages ressources

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

@@ -3816,4 +3816,166 @@ main {
   height: auto;
   aspect-ratio: 1/1;
   object-fit: cover;
+}
+
+#ressources {
+  background-color: #f6f7f3;
+}
+#ressources .layout-content .content_container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+#ressources .layout-content .content_container #block-quartiers-de-demain-titredepage {
+  margin-top: 3rem;
+  margin-left: 15%;
+  margin-bottom: 1rem;
+  width: 70%;
+}
+@media (max-width: 810px) {
+  #ressources .layout-content .content_container #block-quartiers-de-demain-titredepage {
+    margin-top: 14rem;
+  }
+}
+#ressources .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
+  width: fit-content;
+  margin: auto;
+  text-transform: none;
+  color: black;
+  font-size: 2rem;
+  font-family: "gilroy-medium";
+}
+#ressources .layout-content .content_container .views-element-container {
+  margin-left: 20%;
+  width: 65%;
+}
+#ressources .layout-content .content_container .views-element-container h3 {
+  text-align: center;
+}
+#ressources .layout-content .content_container .views-element-container h3::before {
+  content: "";
+  display: block;
+  border-bottom: solid 2px rgb(7, 50, 194);
+  margin: auto;
+}
+#ressources .layout-content .content_container .views-element-container h3 div .field_name h2 {
+  margin-bottom: 0.6rem;
+}
+#ressources .layout-content .content_container .views-element-container h3 div .field_name h2 a {
+  font-family: "gilroy-light";
+  color: rgb(7, 50, 194);
+  font-size: 1.2rem;
+}
+#ressources .layout-content .content_container .views-element-container h3 div .field_description {
+  margin-left: 10%;
+  margin-right: 10%;
+  font-family: "gilroy-light";
+}
+#ressources .layout-content .content_container .views-element-container h3 div .field_description p {
+  margin-top: 0.6rem;
+}
+#ressources .layout-content .content_container .views-element-container button.voir-plus {
+  background-color: transparent;
+  color: rgb(7, 50, 194);
+  border: solid rgb(7, 50, 194) 0.5px;
+  padding: 0.3rem;
+  display: flex;
+  margin: auto;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row {
+  width: 30%;
+  font-size: 0.5rem;
+  margin-bottom: 1rem;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row h2 {
+  font-family: "gilroy-semibold";
+  color: rgb(7, 50, 194);
+  font-size: 0.6rem;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row p {
+  font-size: 0.5rem;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .field_field_mots_clefs div {
+  display: flex;
+  flex-direction: row !important;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .field_field_mots_clefs div div {
+  border: solid 1px rgb(7, 50, 194);
+  margin-right: 0.2rem;
+  padding: 1.3%;
+  padding-bottom: 0.2%;
+  padding-top: 0.2%;
+  font-size: 0.4rem;
+  font-family: "gilroy-semibold";
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .field_field_mots_clefs div div a {
+  color: rgb(7, 50, 194);
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .field_field_site div a {
+  position: relative;
+  padding-left: 20px;
+  color: rgb(247, 0, 43);
+  font-family: "gilroy-semibold";
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .field_field_site div a: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;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-documentation .field_body,
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-documentation .field_field_images {
+  display: none;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr;
+  grid-template-rows: repeat(5 1fr);
+  margin-top: 1rem;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_images {
+  grid-column: 1;
+  grid-row: 1/span 5;
+  padding: 0 1rem 1rem 1rem;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_images img {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1/1;
+  object-fit: cover;
+  border-radius: 9px;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_title, #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource h2 {
+  margin-top: 0;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_title,
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_sous_titre,
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_author,
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_date_ressource,
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_body,
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_mots_clefs,
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_site,
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_documents,
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_liens {
+  grid-column: 2;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row:has(.type-podcast) {
+  width: 50%;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row:has(.type-documentation) {
+  width: 25%;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row:has(.type-vidéo) {
+  width: 50%;
 }

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/js/quartiers_de_demain.js

@@ -453,100 +453,100 @@ $(document).ready(function () {
 
 //////////////// 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 +578,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>
@@ -685,6 +682,72 @@ window.addEventListener("resize", moveLanguageSwitcher);
 });
 
 
+
+/////////////// start class à view-rows-ressources ////////
+$(document).ready(function () {
+  $(".view-rows-ressources").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-ressources
+      }
+  });
+});
+////////////////// end class à view-rows-ressources ////////////////
+
+/////////////////// start voir plus...  ressources ////////////////////
+
+$(document).ready(function () {
+  $(".view-rows-ressources").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
+     
+
+      // 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
+
+      if (typeClass === "type-podcast" || typeClass === "type-video") {
+        visibleCount = 2; // Pour Podcast et Vidéo
+      }
+
+      // Ajouter un bouton dynamiquement après chaque `.view-rows-ressources`
+      let button = $("<button>")
+          .addClass("voir-plus")
+          .text("Voir plus de " + typeName)
+          .insertAfter(container);
+
+      // Cacher tous les éléments sauf les 4 premiers
+      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 ////////////////////
+
+
+
+
+
 })(jQuery, window);
 
 

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

@@ -0,0 +1,205 @@
+
+#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: 20%;
+                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;
+                            }
+                        }
+                    }
+                    
+                }
+                button.voir-plus{
+                    background-color: transparent;
+                    color: $blue_QDD;
+                    border: solid $blue_QDD 0.5px;
+                    padding: 0.3rem;
+                    display: flex;
+                    margin: auto;
+                }
+                .view-rows-ressources{
+                    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;
+                                   
+                                }
+
+                            }
+                           
+                        }
+                    }
+
+                    .views-row:has(.type-podcast){
+                        width: 50%;
+                    }
+                    .views-row:has(.type-documentation){
+                        width: 25%;
+                    }
+                    .views-row:has(.type-vidéo){
+                        width: 50%;
+                    }
+                }
+
+
+     
+
+                // }
+                
+            }
+            
+        }
+    }
+}

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 "/home/ouidade/Developer/docker-quartiersdedemain/src/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css";

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--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--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()
+%}
+
+
+<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_ressource_class = [
+    'view-rows-ressources',
+  ]
+%}
+
+
+{% if title %}
+  <h3>{{ title }}  </h3>
+{% endif %}
+<div {{ attributes.addClass(view_ressource_class) }}>
+{% for row in rows %}
+  {%
+    set row_classes = [
+      default_row_class ? 'views-row',
+    ]
+  %}
+  <div{{ row.attributes.addClass(row_classes) }}>
+    {{- row.content -}}
+  </div>
+{% endfor %}
+</div>
+