header sans animation

initial slide timeline
2025-12-09 13:15:40 +01:00 · 2025-12-09 12:54:21 +01:00 · 2025-12-01 23:40:54 +01:00 · 2025-12-01 23:29:54 +01:00 · 2025-12-01 22:09:06 +01:00 · 2025-12-01 21:45:16 +01:00
19 changed files with 2533 additions and 1686 deletions
--- a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css
+++ b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css
@@ -18,18 +18,19 @@
@media (max-width: 810px) {
  #sites-map-container {
    width: 80%;
+    
  }
 }
@media (max-width: 530px) {
  #sites-map-container {
    width: 100%;
-    height: 485px;
+    height:396px;
  }
 }
@media (max-width: 400px) {
  #sites-map-container {
    width: 100%;
-    height: 430px;
+    
  }
 }
 #sites-map-container .site-link:hover {
--- a/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
+++ b/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
@@ -163,25 +163,58 @@ svgElement.addEventListener('mouseout', function(event) {
 });


-// Gérer les clics pour la page node-type-site uniquement
-svgElement.addEventListener('click', function(event) {
-    if (isNodeTypeSitePage) {
-        if (event.target.classList.contains('site-link')) {
-            const targetUrl = event.target.getAttribute('data-url');
-            if (targetUrl) {
-                window.location.href = targetUrl;  // Redirige vers le data-url correspondant
-            }
+
+// Gérer les clics sur les cercles de la carte
+if (svgElement) {
+    svgElement.addEventListener('click', function(event) {
+      const target = event.target;
+  
+      if (!target.classList || !target.classList.contains('site-link')) {
+        return;
+      }
+  
+      // On récupère les URLs
+      const missionUrl  = target.getAttribute('data-mission-photo-url');
+      const fallbackUrl = target.getAttribute('data-url');
+  
+      // 1) Page RESSOURCE : priorité à la mission photo
+      if (isNodeTypeRessourcePage) {
+        event.preventDefault(); // empêche le <a href="..."> d'agir
+  
+        if (missionUrl) {
+          window.location.href = missionUrl;          // Aller directement à la mission photo
+        } else if (fallbackUrl) {
+          window.location.href = fallbackUrl;         // Sinon, on garde le comportement actuel
        }
-    }
-    if (isNodeTypeProjetPage) {
-        if (event.target.classList.contains('site-link')) {
-            const targetUrl = event.target.getAttribute('data-url');
-            if (targetUrl) {
-                window.location.href = targetUrl;  // Redirige vers le data-url correspondant
-            }
+        return;
+      }
+  
+      // 2) Page SITE : comportement actuel
+      if (isNodeTypeSitePage) {
+        if (fallbackUrl) {
+          event.preventDefault();
+          window.location.href = fallbackUrl;
        }
-    }
-});
+        return;
+      }
+  
+      // 3) Page PROJET : comportement actuel
+      if (isNodeTypeProjetPage) {
+        if (fallbackUrl) {
+          event.preventDefault();
+          window.location.href = fallbackUrl;
+        }
+        return;
+      }
+  
+      // 4) Autres pages : si tu veux un comportement par défaut
+      // if (fallbackUrl) {
+      //   event.preventDefault();
+      //   window.location.href = fallbackUrl;
+      // }
+    });
+  }
+  

 // Fonction pour gérer l'agrandissement de views-row au survol des cercles
 if (isLessitesPage) {
--- a/web/modules/custom/q2d_mod/src/Plugin/Block/GaleriePhotoMap.php
+++ b/web/modules/custom/q2d_mod/src/Plugin/Block/GaleriePhotoMap.php
@@ -34,6 +34,34 @@ class GaleriePhotoMap extends BlockBase {
    $vp_w = 600;
    $vp_h = 600;

+    // Charger toutes les ressources de type "Mission photo" (type de ressource = 17)
+    $all_mission_photos = \Drupal::entityTypeManager()
+      ->getStorage('node')
+      ->loadByProperties([
+        'type' => 'ressource',         // adapte si ton type machine est différent
+        'status' => 1,
+        'field_type_de_ressource' => 17, // même ID que dans la query de la vue
+      ]);
+
+      // Indexer les missions photo par ID de site
+      $mission_by_site = [];
+
+      foreach ($all_mission_photos as $mission) {
+      if (!$mission->hasField('field_site') || $mission->get('field_site')->isEmpty()) {
+        continue;
+      }
+
+      // Un même node peut être lié à plusieurs sites : on en prend un par site
+      foreach ($mission->get('field_site') as $ref) {
+        $site_id = $ref->target_id;
+
+        if (!isset($mission_by_site[$site_id])) {
+          $mission_by_site[$site_id] = $mission;
+        }
+      }
+    }
+
+
    // Coordonnées géographiques des coins de la carte (France)
    $latTop = 52.0; // Nord-Ouest (coin supérieur gauche)
    $lonLeft = -6.0;
@@ -60,6 +88,24 @@ class GaleriePhotoMap extends BlockBase {
      // $subtitle = $site->get('field_sous_titre')->getString();
      $subtitle = $site->hasTranslation($language) ? $site->getTranslation($language)->get('field_sous_titre')->getString() : $site->get('field_sous_titre')->getString();

+      // URL directe de la mission photo liée à ce site (si trouvée)
+      $mission_photo_url = '';
+
+      if (isset($mission_by_site[$site->id()])) {
+        $mission_node = $mission_by_site[$site->id()];
+
+        // Respecter la langue courante si traduction existe
+        if ($mission_node->hasTranslation($language)) {
+          $mission_node = $mission_node->getTranslation($language);
+        }
+
+        $mission_photo_url = $mission_node->toUrl('canonical', [
+          'absolute' => TRUE,
+          'language' => \Drupal::languageManager()->getLanguage($langcode),
+        ])->toString();
+      }
+
+
      $link_options = ['absolute' => TRUE, 'attributes' => ['class' => 'ressource-link'], 'language' => \Drupal::languageManager()->getLanguage($langcode)]; // Passer 'absolute' à TRUE
      // $site_url = $site->toUrl('canonical', $link_options)->toString(); // URL absolue pour le data-url
      $site_link_object = Link::createFromRoute(t("Voir le site"), 'entity.node.canonical', ['node' => $site->id()], $link_options);
@@ -93,6 +139,7 @@ class GaleriePhotoMap extends BlockBase {
            class="site-link"
            data-content="$datacontent" 
            data-url="$url"
+            data-mission-photo-url="$mission_photo_url"
            cx="0" cy="0" r="$r"
            style="fill-opacity:1;fill-rule:nonzero;" />
          <path
--- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js
--- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js.map
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js.map
--- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
--- a/web/themes/custom/quartiers_de_demain/src/assets/js/header.js
+++ b/web/themes/custom/quartiers_de_demain/src/assets/js/header.js
@@ -1,205 +1,347 @@
-//////// start header ////////////
-document.addEventListener('DOMContentLoaded', function() {

-    const header = document.querySelector('header[role="banner"]');
-    const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');
-    const headerNavContainer = document.querySelector('.header_nav_container');
-    const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
-    const isTargetPath = window.location.pathname === '/';
-  
-    // Fonction pour démarrer l'animation du logo SVG
-    function startLogoAnimation() {
-      logo.classList.add('animated');
-    }
-  
-    // Fonction pour arrêter l'animation du logo SVG
-    function stopLogoAnimation() {
-      logo.classList.remove('animated');
-    }
-  
-    // Vérifier si le header a la classe header--collapse
-    function checkHeaderCollapse() {
-      if (header.classList.contains('header--collapsed')) {
-        stopLogoAnimation();
-      } else if (header.classList.contains('header--collapsed-already'))  {
-          stopLogoAnimation();
-        } else {
-        startLogoAnimation();
-      }
-  
-    }
-  
-    // Appeler la fonction au chargement initial
-    checkHeaderCollapse();
-  
-    // Observer les changements de classe sur le header
-    const observer = new MutationObserver(function(mutations) {
-      mutations.forEach(function(mutation) {
-        if (mutation.attributeName === 'class') {
-          checkHeaderCollapse();
-        }
-      });
-    });
-    observer.observe(header, { attributes: true });
-  
-  
-    // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
-    if (!isFirstLoad || !isTargetPath) {
-      header.classList.add('header--collapsed-already');
-      // logo.classList.remove('animated');
-      stopLogoAnimation();
-    // } else {
-    //   // Sinon, appliquer la transition après un délai
-    //   setTimeout(() => {
-    //       header.classList.add('header--collapsed');
-    //   }, 5000);
-    // }
+
+
+// // document.addEventListener('DOMContentLoaded', function() {
+
+// //   const header = document.querySelector('header[role="banner"]');
+// //   const headerNavContainer = document.querySelector('.header_nav_container');
+
+// //   const threshold = 100;
+// //   let lastScrollTop = 0;
+// //   let isHidden = false;
+// //   let introDone = true; // ✅ plus d'intro, donc on considère qu'elle est "déjà finie"
+
+// //   /* -------------------
+// //      Animations nav
+// //   ------------------- */
+
+// //   function slideOut() {
+// //     headerNavContainer.animate([
+// //       { transform: 'translateX(0)' },
+// //       { transform: 'translateX(-100%)' }
+// //     ], {
+// //       duration: 300,
+// //       fill: 'forwards'
+// //     });
+// //     isHidden = true;
+// //   }
+
+// //   function slideIn() {
+// //     headerNavContainer.animate([
+// //       { transform: 'translateX(-100%)' },
+// //       { transform: 'translateX(0)' }
+// //     ], {
+// //       duration: 300,
+// //       fill: 'forwards'
+// //     });
+// //     isHidden = false;
+// //   }
+
+// //   function slideDown() {
+// //     headerNavContainer.animate([
+// //       { transform: 'translateY(-100%)' },
+// //       { transform: 'translateY(0%)' }
+// //     ], {
+// //       duration: 300,
+// //       fill: 'forwards'
+// //     });
+// //     isHidden = false;
+// //   }
+
+// //   function slideUp() {
+// //     headerNavContainer.animate([
+// //       { transform: 'translateY(0%)' },
+// //       { transform: 'translateY(-100%)' }
+// //     ], {
+// //       duration: 300,
+// //       fill: 'forwards'
+// //     });
+// //     isHidden = true;
+// //   }
+
+// //   function initNavPosition() {
+// //     if (window.pageYOffset <= threshold) {
+// //       if (window.innerWidth < 811) {
+// //         slideDown();
+// //       } else {
+// //         slideIn();
+// //       }
+// //     } else {
+// //       if (window.innerWidth < 811) {
+// //         slideUp();
+// //       } else {
+// //         slideIn();
+// //       }
+// //     }
+// //   }
+
+// //   /* -------------------
+// //      Scroll / resize header
+// //   ------------------- */
+
+// //   function adjustHeaderHeight() {
+// //     if (window.scrollY > 0) {
+// //       header.classList.add('shrink');
+// //     } else {
+// //       header.classList.remove('shrink');
+// //     }
+// //   }
+
+// //   function handleScroll() {
+// //     if (!introDone) return; // ici ça passe, introDone = true
+
+// //     let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+// //     const isMobile = window.innerWidth < 811;
+
+// //     if (scrollTop > threshold && !isHidden) {
+// //       if (isMobile) {
+// //         slideUp();
+// //       } else {
+// //         slideOut();
+// //       }
+// //     } else if (scrollTop <= threshold && isHidden) {
+// //       if (isMobile) {
+// //         slideDown();
+// //       } else {
+// //         slideIn();
+// //       }
+// //     }
+
+// //     lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+// //   }
+
+// //   function handleTouchAndMouseEnter() {
+// //     if (!introDone) return;
+
+// //     if (isHidden) {
+// //       if (window.innerWidth < 811) {
+// //         slideDown();
+// //       } else {
+// //         slideIn();
+// //       }
+// //     }
+// //   }
+
+// //   function handleTouchAndMouseLeave() {
+// //     if (!introDone) return;
+
+// //     if (lastScrollTop > threshold && !isHidden) {
+// //       if (window.innerWidth < 811) {
+// //         slideUp();
+// //       } else {
+// //         slideOut();
+// //       }
+// //     }
+// //   }
+
+// //   // ✅ on n'a plus besoin de masquer la nav au début
+// //   if (headerNavContainer) {
+// //     headerNavContainer.style.visibility = 'visible';
+// //   }
+
+// //   window.addEventListener('scroll', handleScroll);
+// //   window.addEventListener('scroll', adjustHeaderHeight);
+
+// //   header.addEventListener('mouseenter', handleTouchAndMouseEnter);
+// //   header.addEventListener('mouseleave', handleTouchAndMouseLeave);
+
+// //   header.addEventListener('touchstart', handleTouchAndMouseEnter);
+// //   header.addEventListener('touchend', handleTouchAndMouseLeave);
+
+// //   // ✅ position initiale de la nav
+// //   initNavPosition();
+
+// // });
+
+
+// document.addEventListener('DOMContentLoaded', function() {
+
+//   const header = document.querySelector('header[role="banner"]');
+//   const headerNavContainer = document.querySelector('.header_nav_container');
+
+//   if (!header || !headerNavContainer) return;
+
+//   const threshold = 100;
+//   let lastScrollTop = 0;
+//   let isHidden = false;
+//   let introDone = true; // ✅ pas d'intro, donc direct prêt
+
+//   /* -------------------
+//      Helpers show / hide
+//   ------------------- */
+
+//   function hideNav() {
+//     headerNavContainer.classList.add('nav-hidden');
+//     isHidden = true;
+//   }
+
+//   function showNav() {
+//     headerNavContainer.classList.remove('nav-hidden');
+//     isHidden = false;
+//   }
+
+//   function isMobile() {
+//     return window.innerWidth < 811;
+//   }
+
+//   /* -------------------
+//      Position initiale
+//   ------------------- */
+
+//   function initNavPosition() {
+//     if (window.pageYOffset <= threshold) {
+//       showNav();   // en haut de page → nav visible
+//     } else {
+//       if (isMobile()) {
+//         hideNav(); // mobile scrollé → nav cachée
+//       } else {
+//         showNav(); // desktop : nav visible même en bas
+//       }
+//     }
+//   }
+
+//   /* -------------------
+//      Scroll / resize header
+//   ------------------- */
+
+//   function adjustHeaderHeight() {
+//     if (window.scrollY > 0) {
+//       header.classList.add('shrink');
+//     } else {
+//       header.classList.remove('shrink');
+//     }
+//   }
+
+//   function handleScroll() {
+//     if (!introDone) return;
+
+//     let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+//     if (scrollTop > threshold && !isHidden) {
+//       // on cache la nav
+//       hideNav();
+//     } else if (scrollTop <= threshold && isHidden) {
+//       // on ré-affiche la nav
+//       showNav();
+//     }
+
+//     lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+//   }
+
+//   function handleTouchAndMouseEnter() {
+//     if (!introDone) return;
+//     if (isHidden) {
+//       showNav();
+//     }
+//   }
+
+//   function handleTouchAndMouseLeave() {
+//     if (!introDone) return;
+
+//     if (lastScrollTop > threshold && !isHidden) {
+//       hideNav();
+//     }
+//   }
+
+//   // Rendre la nav visible (plus de visibility:hidden)
+//   headerNavContainer.style.visibility = 'visible';
+
+//   window.addEventListener('scroll', handleScroll);
+//   window.addEventListener('scroll', adjustHeaderHeight);
+
+//   header.addEventListener('mouseenter', handleTouchAndMouseEnter);
+//   header.addEventListener('mouseleave', handleTouchAndMouseLeave);
+
+//   header.addEventListener('touchstart', handleTouchAndMouseEnter);
+//   header.addEventListener('touchend', handleTouchAndMouseLeave);
+
+//   // Position de départ
+//   initNavPosition();
+//   adjustHeaderHeight();
+// });
+
+
+
+document.addEventListener('DOMContentLoaded', function () {
+  const header = document.querySelector('header[role="banner"]');
+  const headerNavContainer = document.querySelector('.header_nav_container');
+
+  if (!header || !headerNavContainer) return;
+
+  const threshold = 100;
+  let lastScrollTop = 0;
+  let isHidden = false; // au chargement : nav visible
+
+  function isMobile() {
+    return window.innerWidth < 811;
+  }
+
+  /* --- helpers --- */
+
+  function hideNav() {
+    headerNavContainer.classList.add('nav-hidden');
+    isHidden = true;
+  }
+
+  function showNav() {
+    headerNavContainer.classList.remove('nav-hidden');
+    isHidden = false;
+  }
+
+  /* --- init : nav visible au chargement --- */
+
+  headerNavContainer.style.visibility = 'visible';
+  showNav();
+
+  /* --- shrink header --- */
+
+  function adjustHeaderHeight() {
+    if (window.scrollY > 0) {
+      header.classList.add('shrink');
    } else {
-      // Sinon, appliquer la transition après un délai, sauf si scroll
-      let collapseTimeout = setTimeout(() => {
-        header.classList.add('header--collapsed');
-      }, 5000);
-  
-      function interruptCollapseOnScroll() {
-        if (!header.classList.contains('header--collapsed')) {
-          clearTimeout(collapseTimeout); // annule l'animation
-          header.classList.add('header--collapsed');
-        }
-        window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
-      }
-  
-      window.addEventListener('scroll', interruptCollapseOnScroll);
+      header.classList.remove('shrink');
    }
-    //////////////////////////////////////
-  
-    let lastScrollTop = 0;
-    let threshold = 100; // Change this value as needed
-    let isHidden = false;
-  
-    function slideOut() {
-      headerNavContainer.animate([
-        { transform: 'translateX(0)' },
-        { transform: 'translateX(-100%)' }
-      ], {
-        duration: 300,
-        fill: 'forwards'
-      });
-      isHidden = true;
+  }
+
+  /* --- scroll : cache / montre la nav --- */
+
+  function handleScroll() {
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+    if (scrollTop > threshold && !isHidden) {
+      // on cache la nav (desktop & mobile)
+      hideNav();
+    } else if (scrollTop <= threshold && isHidden) {
+      // on la remonte en haut de page
+      showNav();
    }
-  
-    function slideIn() {
-      headerNavContainer.animate([
-        { transform: 'translateX(-100%)' },
-        { transform: 'translateX(0)' }
-      ], {
-        duration: 300,
-        fill: 'forwards'
-      });
-      isHidden = false;
+
+    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+  }
+
+  /* --- hover / touch sur le header : on montre la nav --- */
+
+  function handleEnter() {
+    if (isHidden) {
+      showNav();
    }
-    
-    function slideDown() {
-      // headerNavContainer.style.display = 'block';
-      headerNavContainer.animate([
-        { transform: 'translateY(0%)' },
-        { transform: 'translateY(+100%)' }
-      ], {
-        duration: 300,
-        fill: 'forwards'
-      });
-      isHidden = false;
+  }
+
+  function handleLeave() {
+    if (lastScrollTop > threshold && !isHidden) {
+      hideNav();
    }
-  
-    function slideUp() {
-      headerNavContainer.animate([
-        { transform: 'translateY(100%)' },
-        { transform: 'translateY(0%)' }
-      ], {
-        duration: 300,
-        fill: 'forwards'
-      }).onfinish = function() {
-        // headerNavContainer.style.display = 'none';
-      };
-      isHidden = true;
-    }
-      // Fonction pour ajuster la hauteur du header lors du défilement
-      function adjustHeaderHeight() {
-        if (window.scrollY > 0) {
-          header.classList.add('shrink');
-        } else {
-          header.classList.remove('shrink');
-        }
-      }
-  
-    function handleScroll() {
-      let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-      const isMobile = window.innerWidth < 811;
-  
-      if (scrollTop > threshold && !isHidden) {
-        if (isMobile) {
-          slideUp();
-        } else {
-          slideOut();
-        }
-      } else if (scrollTop <= threshold && isHidden) {
-        if (isMobile) {
-          slideDown();
-        } else {
-          slideIn();
-        }
-      }
-  
-  
-      lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
-    }
-  
-    function handleTouchAndMouseEnter() {
-      if (isHidden) {
-        if (window.innerWidth < 811) {
-          slideDown();
-        } else {
-          slideIn();
-        }
-      }
-    }
-  
-    function handleTouchAndMouseLeave() {
-      if (lastScrollTop > threshold && !isHidden) {
-        if (window.innerWidth < 811) {
-          slideUp();
-        } else {
-          slideOut();
-        }
-      }
-    }
-  
-    window.addEventListener('scroll', handleScroll);
-    window.addEventListener('scroll', adjustHeaderHeight);
-  
-    // Mouse events for desktop
-    header.addEventListener('mouseenter', handleTouchAndMouseEnter);
-    header.addEventListener('mouseleave', handleTouchAndMouseLeave);
-  
-    // Touch events for tablets and mobile devices
-    header.addEventListener('touchstart', handleTouchAndMouseEnter);
-    header.addEventListener('touchend', handleTouchAndMouseLeave);
-  
-    // Initial check to see if we're at the top of the page
-    if (window.pageYOffset <= threshold) {
-      if (window.innerWidth < 811) {
-        slideDown();
-      } else { 
-        slideIn();
-      } 
-    } else {
-      if (window.innerWidth < 811) {
-        slideUp();
-      } else {
-        slideIn();
-      }
-    }
-  
-  });
-  
-  //////// end header ////////////
-  
+  }
+
+  window.addEventListener('scroll', handleScroll, { passive: true });
+  window.addEventListener('scroll', adjustHeaderHeight, { passive: true });
+
+  header.addEventListener('mouseenter', handleEnter);
+  header.addEventListener('mouseleave', handleLeave);
+
+  header.addEventListener('touchstart', handleEnter);
+  header.addEventListener('touchend', handleLeave);
+
+  // init
+  adjustHeaderHeight();
+});
--- a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
+++ b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
@@ -294,6 +294,8 @@ if (documentsLiensWrapper && blockRegionThird) {
 }
 });

+
+
 /////////////////// start langswitcher position responsive//////////////////////
 document.addEventListener("DOMContentLoaded", function () {
 // Fonction pour déplacer le bloc en fonction de la taille de l'écran
@@ -320,109 +322,7 @@ window.addEventListener("resize", moveLanguageSwitcher);
 /////////////////// end langswitcher position responsive///////////////////////////////////////////////////////////


-/////////////// 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 ////////////////////
-
-
-  // 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
-
-          // >>> Exception : tout afficher pour type-Galerie-photos (pas de bouton)
-          if (typeClass && typeClass.toLowerCase() === "type-mission-photo") {
-            items.show(); // aucun masquage
-            return;       // on sort : pas de "voir plus"
-          }
-
-          // Ajuster le nombre d'éléments visibles en fonction du type
-          if (typeClass && (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
-              }
-          });
-      });
-
-
-    // slimselect
-    let ressource_type_select = new SlimSelect({
-      select: '#edit-field-type-de-ressource-target-id--2',
-      settings:{
-        placeholderText: 'choisir',
-        searchPlaceholder: 'choisir'
-      }
-    })
-    let ressource_motscles_select = new SlimSelect({
-      select: '#edit-field-mots-clefs-target-id--2',
-      settings:{
-        placeholderText: 'choisir',
-        searchPlaceholder: 'choisir'
-      }
-    })
-    let ressource_sites_select = new SlimSelect({
-      select: '#edit-field-site-target-id-verf--2',
-      settings:{
-        placeholderText: 'choisir',
-        searchPlaceholder: 'choisir'
-      }
-    })
-    // console.log(('sites_select'), sites_select);
-    
-  }
-  
-
-///////////////////  end voir plus...  ressources ////////////////////
-


 /////////////////// start voir plus...  actualite dans /actualites & /home ////////////////////
@@ -430,38 +330,45 @@ $(document).ready(function () {
  if ($("#actualites" ).length > 0 || $("#home").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 () {
+  
+      // Fonction de toggle (à utiliser partout)
+      function toggleActu() {
          body.slideToggle();
          links.slideToggle();
-          $(this).toggleClass("open");
-      });
-      
-         // Clic sur la flèche
+          toggleButton.toggleClass("open");
+      }
+  
+      // Clic sur le bouton
      toggleButton.on("click", function (e) {
-        e.stopPropagation(); // évite des conflits éventuels
-        toggleActu();
+          e.stopPropagation();
+          toggleActu();
      });
-
-      // Clic n'importe où sur le node
+  
+      // Clic sur le node entier sauf liens
      article.on("click", function (e) {
-        // Optionnel : ne pas toggle si on clique sur un lien
-        if ($(e.target).closest("a").length) {
-          return;
-        }
-        toggleActu();
+          if ($(e.target).closest("a").length) {
+              return;
+          }
+          toggleActu();
      });
-    });
+  
+      // 👉 Clic aussi sur le H2
+      article.find("h2").on("click", function (e) {
+          e.stopPropagation();
+          toggleActu();
+      });
+  });
+  
    // slimselect
    // duplicated due to embeded view (archives)
    let actu_type_select = new SlimSelect({
@@ -497,17 +404,6 @@ $(document).ready(function () {
 ///////////////////  end voir plus...  actualite dans /actualites & /home ////////////////////


-/////////////// start class à view-rows-ressources ////////
-
-  $(".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 toggle partenaire //////////////////

@@ -537,42 +433,6 @@ $(document).ready(function () {


 ////////////// start toggle page node projet //////////////////
-// document.addEventListener('DOMContentLoaded', function () {
-
-//   const photo = document.querySelector('.field_field_equipe_photo');
-//   const pres  = document.querySelector('.field_field_equipe_presentation');
-
-//   if (!pres) return;
-
-//   // Création du bouton
-//   const btn = document.createElement('button');
-//   btn.className = 'btn-equipe-toggle';
-//   btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE";
-//   btn.setAttribute('aria-expanded', false);
-
-//   // Insertion du bouton juste après le bloc présentation
-//   pres.insertAdjacentElement('afterend', btn);
-
-//   // 3. Ajout de la ligne après le bouton
-// const separator = document.createElement('div');
-// separator.className = 'equipe-separator';
-// btn.insertAdjacentElement('afterend', separator);
-
-//   // Toggle
-//   btn.addEventListener('click', function () {
-//     const isOpen = pres.classList.toggle('is-open');
-
-//     if (photo) photo.classList.toggle('is-open');
-
-//     btn.textContent = isOpen
-//       ? "FERMER LA PRÉSENTATION DE L'ÉQUIPE"
-//       : "EN SAVOIR PLUS SUR L'ÉQUIPE";
-
-//     btn.setAttribute('aria-expanded', isOpen);
-//   });
-
-// });
-

 document.addEventListener('DOMContentLoaded', function () {

@@ -581,6 +441,10 @@ document.addEventListener('DOMContentLoaded', function () {

  if (!photo || !pres) return;

+  // 🔒 Forcer l'état FERMÉ au chargement
+  photo.classList.remove('is-open');
+  pres.classList.remove('is-open');
+
  // 1. Créer un wrapper autour de photo + présentation
  const panel = document.createElement('div');
  panel.className = 'equipe-panel';
@@ -649,13 +513,13 @@ document.addEventListener('DOMContentLoaded', function () {

 });

-
-
 //////////////end toggle page node projet //////////////////




+
+
 })(jQuery, window);


--- a/web/themes/custom/quartiers_de_demain/src/assets/js/ressources.js
+++ b/web/themes/custom/quartiers_de_demain/src/assets/js/ressources.js
@@ -0,0 +1,151 @@
+/**
+ * @file
+ * quartiers_de_demain behaviors.
+ */
+ (function (Drupal) {
+
+    'use strict';
+  
+    Drupal.behaviors.quartiers_de_demain = {
+      attach: function (context, settings) {
+        console.log('It works!');
+      }
+    };
+  } (Drupal));
+  
+
+  
+(function($, window) { 
+    $(document).ready(function () {
+        /////////////// start class à view-rows-ressources ////////
+        $(".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 ////////////////////
+
+
+        // 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
+
+            // >>> Exception : tout afficher pour type-Galerie-photos (pas de bouton)
+            if (typeClass && typeClass.toLowerCase() === "type-mission-photo") {
+                items.show(); // aucun masquage
+                return;       // on sort : pas de "voir plus"
+            }
+
+            // Ajuster le nombre d'éléments visibles en fonction du type
+            if (typeClass && (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
+                }
+            });
+        });
+
+
+        // slimselect
+        let ressource_type_select = new SlimSelect({
+        select: '#edit-field-type-de-ressource-target-id--2',
+        settings:{
+            placeholderText: 'choisir',
+            searchPlaceholder: 'choisir'
+        }
+        })
+        let ressource_motscles_select = new SlimSelect({
+        select: '#edit-field-mots-clefs-target-id--2',
+        settings:{
+            placeholderText: 'choisir',
+            searchPlaceholder: 'choisir'
+        }
+        })
+        let ressource_sites_select = new SlimSelect({
+        select: '#edit-field-site-target-id-verf--2',
+        settings:{
+            placeholderText: 'choisir',
+            searchPlaceholder: 'choisir'
+        }
+        })
+        // console.log(('sites_select'), sites_select);
+
+        }
+
+        ///////////////////  end voir plus...  ressources ////////////////////
+
+        ///////////////////////// start ressource img clicable mission photo //////////////////////
+        $('.view-rows-wrapper.type-Mission-photo .views-row').each(function () {
+            var $row = $(this);
+
+            // Lien cible : d'abord le titre, sinon "Voir la gallerie photo"
+            var $link = $row.find('.views-field-views-conditional-field-1 a, .views-field-views-conditional-field a').first();
+
+            // L'image
+            var $img = $row.find('.views-field-field-images img').first();
+
+            if ($link.length && $img.length && !$img.data('missionPhotoBound')) {
+            console.log('→ Bind click sur image pour', $link.attr('href'));
+
+            $img.css('cursor', 'pointer');
+            $img.on('click', function () {
+                window.location.href = $link.attr('href');
+            });
+
+            // éviter de binder plusieurs fois (si AJAX / re-init)
+            $img.data('missionPhotoBound', true);
+            }
+        });
+        ///////////////////////// end ressource img clicable mission photo //////////////////////
+
+    });
+
+
+
+  
+
+})(jQuery, window);  
--- a/web/themes/custom/quartiers_de_demain/src/assets/js/timeline.js
+++ b/web/themes/custom/quartiers_de_demain/src/assets/js/timeline.js
@@ -53,10 +53,10 @@
  $(document).ready(function(){
 //   ////////////////////// start  calendrier home   /////////////////////////////////

-  // Aller au 9e élément à l'initialisation
-  $('.__timeline-content').on('init', function(event, slick){
-    slick.slickGoTo(11); // Index 8 = 9e item
-  });
+  // // Aller au 9e élément à l'initialisation
+  // $('.__timeline-content').on('init', function(event, slick){
+  //   slick.slickGoTo(11); // Index 8 = 9e item
+  // });

    $('.__timeline-content').slick({
      slidesToShow: 3,
@@ -66,6 +66,7 @@
      centerMode: false,
      draggable: true,
      infinite: false,
+      initialSlide: 13,
      responsive: [
        {
          breakpoint: 810,
@@ -76,6 +77,7 @@
            draggable: true,
            centerMode: false,
            infinite: false,
+            initialSlide: 13,
          }
        }]
    });
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss
@@ -59,6 +59,9 @@ main{
                    margin-bottom: 2rem;
                    font-size: 0.4rem;
                    position: relative;
+                    @media(max-width: 810px){
+                        font-size: 1rem;   
+                    }
                    transition: transform 0.4s ease-in-out; 
                    &:hover {
                        transform: scale(1.05); 
@@ -220,6 +223,9 @@ main{
                                        margin-bottom: 0.3rem;
                                        margin-top: 0.3rem;
                                        font-family: "gilroy-bold";
+                                        @media(max-width: 810px){
+                                            font-size: 1rem;   
+                                        }
                                    }
                                    .field_field_nom_de_l_equipe{
                                        order: 4;
@@ -227,6 +233,9 @@ main{
                                            font-size: 0.5rem;
                                            margin: 0;
                                            text-transform: uppercase;
+                                            @media(max-width: 810px){
+                                                font-size: 0.8rem;   
+                                            }
                                        }
                                    }
                                    .field_field_intro{
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-projet.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-projet.scss
@@ -44,9 +44,9 @@
                        display: none;
                    }
                    @media(max-width: 810px){
-                        width: 50% !important;
+                        // width: 50% !important;
                        margin: auto;
-                
+                        margin-top: 3rem;
                    }
                }
                .field_field_site_projet{
@@ -54,10 +54,20 @@
                        width: 65%;
                        margin: auto;
                        padding-left: 2rem;
+                        @media(max-width: 810px){
+                            padding-left: 0rem;
+                            width: 80%;
+                            margin-bottom: 1rem;
+                        }
                        .field_title{
                            h2{
                                text-transform: none;
                                font-size: 0.60rem;
+                                @media(max-width: 810px){
+                                    font-size:1rem;
+                                    margin: 0;
+                                    margin-bottom: 0.5rem;
+                                }
                                a{
                                    color: $blue_QDD;
                                    font-weight: 700;
@@ -67,6 +77,11 @@
                        .field_field_sous_titre{
                            p{
                                font-size: 0.55rem;
+                                @media(max-width: 810px){
+                                    font-size:0.8rem ;
+                                    margin: 0;
+                                    margin-bottom: 0.5rem;
+                                }
                            }
                        }
                        .more-link{
@@ -76,6 +91,7 @@
                            background: black;
                            @media (max-width:810px) {  
                                margin-left: 0;
+                               
                            }
                            a{
                                display: inline-flex;
@@ -85,6 +101,9 @@
                                text-transform: uppercase;
                                font-size: 0.5rem;
                                padding-left: 0.5rem;
+                                @media(max-width: 810px){
+                                    font-size:0.7rem;
+                                }

                                svg{
                                    display: none;
@@ -123,8 +142,7 @@
                flex-direction: column;
                padding-left: 2rem;
                @media(max-width: 810px){
-                    // margin-left: 2rem;
-                    // margin-top: 3rem;
+                   padding-left: 0rem;
                }
                .field_field_laureats{

@@ -141,6 +159,10 @@
                        background-position: center;
                        background-size: contain;
                        z-index: 0;
+                        @media(max-width: 810px){
+                            left: -1.5rem;
+                            top:0.5rem;
+                         }
                        
                    }

@@ -148,10 +170,18 @@
                       font-size: 0;
                   } 
                }
+                .field_title{
+                    @media(max-width: 810px){
+                        font-size: 1.3rem;
+                    }
+                }
                .field_field_nom_de_l_equipe{
                    border-top: solid black 1px;
                    padding-bottom: 0.5rem;
                    text-transform: uppercase;
+                    @media(max-width: 810px){
+                        font-size: 1.3rem;
+                    }
                }
                .field_field_infos{
                    column-count: 3; 
@@ -164,10 +194,16 @@
                            margin: 0;
                            font-size: 0.7em;
                            font-family: 'gilroy-light';
+                            @media(max-width: 810px){
+                                font-size:0.8rem;
+                            }
                        }
                        .field_field_contenu{
                            font-size: 0.8em;
                            font-family: 'gilroy-bold';
+                            @media(max-width: 810px){
+                                font-size:0.8rem;
+                            }
                        }
                    }
                }
@@ -183,9 +219,15 @@
                        margin-left: 0;
                        font-size: 0.5rem;
                        font-family: "gilroy-light";
+                        @media(max-width: 810px){
+                            font-size:0.8rem;
+                        }
                        p{
                            margin-top: 0;
                            font-size: 0.5rem;
+                            @media(max-width: 810px){
+                                font-size:0.8rem;
+                            }
                        }
                    }
                }
@@ -193,6 +235,9 @@
                    p{
                        font-family: "gilroy-light";
                        font-size: 0.6rem;
+                        @media(max-width: 810px){
+                            font-size:0.8rem;
+                        }
                    }
                }
                .equipe-panel  {
@@ -223,6 +268,9 @@
                    display: flex;
                    border: none;
                    // margin-top: 1rem;
+                    @media(max-width: 810px){
+                        font-size:0.8rem;
+                    }

                    svg{
                        display: none;
@@ -262,6 +310,9 @@
                            p{
                                font-family: "gilroy-light";
                                font-size: 0.6rem;
+                                @media(max-width: 810px){
+                                    font-size:0.8rem;
+                                }
                            }
                        }
                    }
@@ -284,6 +335,10 @@
                                        object-fit: cover;
                                        width: 220px;
                                        height: 145px;
+                                        @media (max-width:810px){
+                                            width: 100%;
+                                            height: auto;
+                                        }
                                    }
                                }
                                .image-field-caption{
@@ -293,6 +348,9 @@
                                        margin-top: 0;
                                        font-size: 0.5rem;
                                        font-family: 'gilroy-light';
+                                        @media(max-width: 810px){
+                                            font-size:0.8rem;
+                                        }
                                    }
    
                            }
@@ -316,6 +374,9 @@
                        color: white;
                        text-transform: uppercase;
                        font-size: 0.5rem;
+                        @media(max-width: 810px){
+                            font-size:0.8rem;
+                        }
                        svg{
                            display: none;
                        }
@@ -363,120 +424,125 @@
            flex: 0 1 24%;
            .block-region-third{
                position:relative;
-                // width: 23% !important;
                margin-top: 4.5rem;
                margin-left: 2rem;
                @media(max-width: 810px){
                    position: relative;
+                    margin-left: 0;
+                    margin-top: 2rem;
                }
                div{
                    display: flex;
                    flex-direction: column;
                    @media(max-width: 810px){
                        justify-content: center;
-                        margin: auto;
-                        margin-bottom: 1rem;
-                        width: fit-content;
-                    }
-                    @media(max-width: 500px){
-                        justify-content: center;
-                        margin: auto;
-                        margin-bottom: 1rem;
-                        width: fit-content;
+                        margin-bottom: 0rem;
                    }
                    h2{
+
                        font-family: "gilroy-light";
                        text-transform: uppercase;
                        font-size: 0.6rem;
+                        @media(max-width: 810px){
+                            font-size:0.8rem;
+                            margin: auto;
+                            margin-bottom: 1rem;
+                            width: 80%;
+                        }
                        &::after{
                            content: " :";
                        }
                    }
-                    .views-row{
-                        width: 80%;
-                        border-bottom: solid black 1px;
-                        padding-bottom: 0.5rem;
-                        padding-top: 0.5rem;
-                        transition: transform 0.4s ease-in-out;
-                            &:hover {
-                                transform: scale(1.05); 
-                            }
-                        .is-laureat{
-                            position: relative;
-                            padding-top: 1.5rem;
-                            ::before {
-                                content: "";
-                                position: absolute;
-                                top: 0.5rem;
-                                left: -1.4rem;
-                                width: 2.5rem;
-                                height: 2.5rem;
-                                background-image: url("../img/laureat-ouvert.svg");
-                                background-repeat: no-repeat;
-                                background-position: center;
-                                background-size: contain;
-                                z-index: 0;
-                                margin-top: 0.2rem;
-                            }
-                            .field-content{
-                                font-size: 0;
-                            }
+                    .view-rows-wrapper{
+                        @media(max-width: 810px){
+                            width: 80%;
+                            margin: auto;
                        }
-
-                        .views-field-title {
-                            h2 {
-                            font-size: 0.5rem;
-                            margin-bottom: 0rem;
-                            // margin-top: 0.3rem;
-                            text-transform: none;
-                            font-family: "gilroy-regular";
-                                &::after{
+                        .views-row{
+                            width: 80%;
+                            border-bottom: solid black 1px;
+                            padding-bottom: 0.5rem;
+                            padding-top: 0.5rem;
+                            @media(max-width: 810px){
+                                width: 80%;
+                                justify-content: start;
+                                padding-top: 1rem;
+                            }
+                            transition: transform 0.4s ease-in-out;
+                                &:hover {
+                                    transform: scale(1.05); 
+                                }
+                            .is-laureat{
+                                position: relative;
+                                padding-top: 1.5rem;
+                                ::before {
                                    content: "";
+                                    position: absolute;
+                                    top: 0.5rem;
+                                    left: -1.4rem;
+                                    width: 2.5rem;
+                                    height: 2.5rem;
+                                    background-image: url("../img/laureat-ouvert.svg");
+                                    background-repeat: no-repeat;
+                                    background-position: center;
+                                    background-size: contain;
+                                    z-index: 0;
+                                    margin-top: 0.2rem;
+                                    @media(max-width: 810px){
+                                        top: 0rem;
+                                        // left: -11.4rem;
+                                    }
+                                }
+                                .field-content{
+                                    font-size: 0;
                                }
                            }
-                        }
-                        .views-field-field-nom-de-l-equipe{
-                            h3 {
-                                margin-bottom: 0.3rem;
-                                margin-top:0.3rem;
-                                text-transform: uppercase;
+    
+                            .views-field-title {
+                                @media (max-width:810px){
+                                    width: fit-content;
+                                    margin: 0;
+                                }
+                                h2 {
+                                    font-size: 0.5rem;
+                                    margin-bottom: 0rem;
+                                    text-transform: none;
+                                    font-family: "gilroy-regular";
+                                        &::after{
+                                            content: "";
+                                        }
+                                    @media(max-width: 810px){
+                                        font-size:0.8rem;
+                                        width: 100% !important;
+                                    }
+                                }
                            }
-                            font-size: 0.4rem;
-                            p{
-                                font-family: "gilroy-semibold";
-                                margin-bottom: 0.5rem;
+                            .views-field-field-nom-de-l-equipe{
+                                @media (max-width:810px){
+                                    width: fit-content;
+                                    margin: 0;
+                                }
+                                h3 {
+                                    margin-bottom: 0.3rem;
+                                    margin-top:0.3rem;
+                                    text-transform: uppercase;
+                                }
+                                font-size: 0.4rem;
+                                @media(max-width: 810px){
+                                    font-size:0.7rem;
+                                }
+                                p{
+                                    font-family: "gilroy-semibold";
+                                    margin-bottom: 0.5rem;
+                                }
+                               
+                            }
+                            .views-field-view-node{
+                                display: none;  
                            }
-                           
-                        }
-                        .views-field-view-node{
-                            display: none;
-                            // width: fit-content;
-                            // padding-left: 0.5rem;
-                            // background: black;
-                            // @media (max-width:810px) {  
-                            //     margin-left: 0;
-                            // }
-                            // a{
-                            //     display: inline-flex;
-                            //     justify-content: space-between;
-                            //     align-items: center;
-                            //     color: white;
-                            //     text-transform: uppercase;
-                            //     font-size: 0.5rem;
-                            //     svg{
-                            //         display: none;
-                            //     }
-                            //     &::after{
-                            //         display: inline-flex;
-                            //         content: url("../img/noun-arrow-to-right.svg");
-                            //         padding-right: 0.2rem;
-                            //         padding-left: 0.2rem;
-                            //         // padding-bottom: 0.2rem;
-                            //         height: 25px;
-                            //     }
-                            // }   
                        }
                    }
+
                    
                    .field_field_laureats{
                        color: red;
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-ressource.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-ressource.scss
@@ -13,8 +13,12 @@
            display: flex;
            flex-direction: column;
            width: 100%;
+
        }
        .layout__region--first{
+            @media(max-width: 810px){
+                order:2   
+            }
            .block-region-first{
                #sites-map-container{
                    width: 100% !important;
@@ -27,6 +31,9 @@
                        &::after{
                            content: " :";
                        }
+                        @media(max-width: 810px){
+                            font-size: 1rem;   
+                        }
                    }
                }                

@@ -47,6 +54,9 @@
                        padding-bottom: 0.2rem;
                        padding-top: 0.2rem;
                        padding-left: 0.2rem;
+                        @media(max-width: 810px){
+                            font-size: 1rem;   
+                        }

                        // svg{
                        //     display: none;
@@ -71,15 +81,21 @@
            margin-top: 3rem;
            margin-right: 2rem;
            // width: 60%;
+            @media(max-width: 810px){
+                order:1;  
+                margin-top: 3rem;
+                margin-right: 0;
+            }
            .block-region-second{
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                margin-left: 2rem;
                margin-right: 3rem;
-                @media(max-width: 500px){
-                    margin-left: 0.5rem;
-                    margin-top: 1rem;
+                @media(max-width: 810px){
+                    margin-left: 00rem;
+                    margin-top: 0rem;
+                    margin-right: 0rem;
                }
                .field_title, 
                .field_field_sous_titre{
@@ -219,6 +235,7 @@
                div:has(.field_field_images){
                    order: 10;
                    width: 100%;
+                   
                    .diaporama{
                        display: flex !important;
                        flex-direction: row !important;
@@ -231,10 +248,17 @@
                        }
                        .images{
                        //    margin: auto;
+                        @media (max-width:810px){
+                            margin: auto;
+                        }
                            img{
                                object-fit: cover;
                                width: 220px !important;
                                height: 145px;
+                                @media (max-width:810px){
+                                    width: 100% !important;
+                                    height: auto;
+                                }
                            }
                        }
                        .image-field-caption{
@@ -244,6 +268,9 @@
                                margin-top: 0;
                                font-size: 0.5rem;
                                font-family: 'gilroy-light';
+                                @media (max-width:810px){
+                                    font-size: 1rem;
+                                }
                            }
                        } 
                    }                           
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss
@@ -317,7 +317,7 @@
                            gap: 20px;
                            flex-wrap: wrap;
                            margin-bottom: 2rem;
-                            @media(max-width: 500px){
+                            @media(max-width: 810px){
                                flex-direction: column !important;
                            }
                            .cadre-img-zoom{
@@ -326,6 +326,10 @@
                                    object-fit: cover;
                                    width: 220px;
                                    height: 145px;
+                                    @media(max-width: 810px){
+                                        width: 100%;
+                                        height: auto;
+                                    }
                                }
                            }
                            .image-field-caption{
@@ -335,6 +339,9 @@
                                    margin-top: 0;
                                    font-size: 0.5rem;
                                    font-family: 'gilroy-light';
+                                    @media(max-width: 810px){
+                                     font-size: 0.8rem;
+                                    }
                                }
                            } 
                        }                           
@@ -391,24 +398,13 @@
                // width: 80%;
                @media(max-width: 810px){
                    position: relative;
+                    margin-left: 1rem;
+                    margin-top: 3rem;
                }
                div{
                    display: flex;
                    flex-direction: column;
                    
-                    // margin-bottom: 1rem;
-                    @media(max-width: 810px){
-                        justify-content: center;
-                        margin: auto;
-                        margin-bottom: 1rem;
-                        width: fit-content;
-                    }
-                    @media(max-width: 500px){
-                        justify-content: center;
-                        margin: auto;
-                        margin-bottom: 1rem;
-                        width: fit-content;
-                    }
                    div:has(h2){
                        border-bottom: solid black 1px;
                        padding-left: 0.3rem;
@@ -423,80 +419,110 @@
                        border-bottom: solid black 1px;
                        margin-left: 0.5rem;
                        padding-bottom: 0.5rem;
+                        @media(max-width: 810px){
+                            font-size:0.8rem;
+                            margin: 0;
+                            margin-bottom: 1rem;
+                        }
                        &::after{
                            content: " :";
                        }
                    }
-                    .node-type-projet {
-                        position: relative;
-                        transition: transform 0.4s ease-in-out; 
-                        &.is-laureat{
-                            padding-top: 1.2rem;
-                        }
-                        &:hover {
-                            transform: scale(1.05); 
-                        }
-                        .node-projet-title{
+                    .field_field_projets_lie{
+                        @media(max-width: 810px){
                            width: 80%;
-                            padding-left: 0.5rem;
-                            font-size: 0.5rem;
-                            margin: 0;
-                            background-color: #f6f7f3;
-                            font-family: "gilroy-regular";
+                            justify-content: start;
+                            // padding-top: 1rem;
+                            
                        }
-                        .field_field_nom_de_l_equipe{
-                            width: 80%;
-                            padding-left: 0.5rem;
-                            font-size: 0.4rem;
-                            background-color: #f6f7f3;
-                            text-transform: uppercase;
-                            div{
-                                border-bottom: solid black 1px;
-                                margin-bottom: 0.5rem;
+                        .node-type-projet {
+                            position: relative;
+                            transition: transform 0.4s ease-in-out; 
+                           
+                            &.is-laureat{
+                                padding-top: 1.2rem;
                            }
-                            p{
-                                font-family: "gilroy-semibold";
-                                margin-bottom: 0.5rem;
+                            &:hover {
+                                transform: scale(1.05); 
+                            }
+                            .node-projet-title{
+                                width: 80%;
+                                padding-left: 0.5rem;
                                font-size: 0.5rem;
-                                margin-top: 0.2rem;
-                            }
-                            div.more-link{
-                                display: none;
-                                margin-bottom: 1rem;
-                                padding-left: 0rem;
-                                a{
-                                    font-size: 0.5rem;
+                                margin: 0;
+                                background-color: #f6f7f3;
+                                font-family: "gilroy-regular";
+                                @media(max-width: 810px){
+                                    font-size:0.8rem;
+                                    width: 100% !important;
                                }
                            }
-                        }
-    
-                        .field_field_laureats{
-                            color:$red_QDD;
-                            text-transform: uppercase; 
-                            display: inline-flex;
-                            align-items: flex-start;    
-                            height: auto;   
-                            font-size: 0px;  
-                            &.is-laureat{
-                                position: relative;
+                            .field_field_nom_de_l_equipe{
+                                width: 80%;
+                                padding-left: 0.5rem;
+                                font-size: 0.4rem;
+                                background-color: #f6f7f3;
+                                text-transform: uppercase;
+                                @media(max-width: 810px){
+                                    font-size:0.8rem;
+                                    width: 100% !important;
+                                }
+                                div{
+                                    border-bottom: solid black 1px;
+                                    margin-bottom: 0.5rem;
+                                }
+                                p{
+                                    font-family: "gilroy-semibold";
+                                    margin-bottom: 0.5rem;
+                                    font-size: 0.5rem;
+                                    margin-top: 0.2rem;
+                                    @media(max-width: 810px){
+                                        font-size:0.8rem;
+                                        width: 100% !important;
+                                    }
+                                }
+                                div.more-link{
+                                    display: none;
+                                    margin-bottom: 1rem;
+                                    padding-left: 0rem;
+                                    a{
+                                        font-size: 0.5rem;
+                                    }
+                                }
                            }
-                            &.is-laureat::before {
-                                content: "";
-                                position: absolute;
-                                top: -4.2rem;        
-                                left: -1rem;
-                                width: 2.5rem;
-                                height: 2.5rem;
-                                background-image: url("../img/laureat-ouvert.svg");
-                                background-repeat: no-repeat;
-                                background-position: center;
-                                background-size: contain;
-                                z-index: 0;
-                                margin-top: 0.3rem;
+        
+                            .field_field_laureats{
+                                color:$red_QDD;
+                                text-transform: uppercase; 
+                                display: inline-flex;
+                                align-items: flex-start;    
+                                height: auto;   
+                                font-size: 0px;  
+                                &.is-laureat{
+                                    position: relative;
+                                }
+                                &.is-laureat::before {
+                                    content: "";
+                                    position: absolute;
+                                    top: -4.2rem;        
+                                    left: -1rem;
+                                    width: 2.5rem;
+                                    height: 2.5rem;
+                                    background-image: url("../img/laureat-ouvert.svg");
+                                    background-repeat: no-repeat;
+                                    background-position: center;
+                                    background-size: contain;
+                                    z-index: 0;
+                                    margin-top: 0.3rem;
+                                    @media(max-width: 810px){
+                                        top: -6rem;
+                                    }
+                                }
+        
                            }
-    
-                        }
-                    }    
+                        } 
+                    }
+                      
                }
                .prevnext{
                    display: none;
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-logo-header.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-logo-header.scss
@@ -3,39 +3,42 @@ header{
        .field_field_logo{
            .qdd-header{
                opacity: 0;
+                animation-delay: 0.9s;
+                animation-name: scale;
+                animation-duration: 2.8s;
                &.animated{
                    opacity: 1;
-                    transform: scale(2);   
+                    transform: scale(2); 
                    @media(max-width:820px) {
                        transform: scale(1);
                    }
                    .blink-blue {
                        opacity: 0;
                        // animation: blink 3s 3;
-                        animation-delay: 0.2s;
+                        animation-delay: 0.1s;
                        animation-name: blink;
-                        animation-duration: 10s;
+                        animation-duration: 5s;
                    }
    
                    .blink-red {
                        opacity: 0;
-                        animation-delay: 0.8s;
+                        animation-delay: 0.3s;
                        animation-name: blink;
-                        animation-duration: 10s;
+                        animation-duration: 5s;
                    }
    
                    .blink-black {
                        opacity: 0;
-                        animation-delay: 1.5s;
+                        animation-delay: 0.5s;
                        animation-name: blink;
-                        animation-duration: 10s;        
+                        animation-duration: 5s;        
                    }
    
                    .blink-black2 {
                        opacity: 0;
-                        animation-delay: 2s;
+                        animation-delay: 0.7s;
                        animation-name: blink;
-                        animation-duration: 10s;
+                        animation-duration: 5s;
                    }
                    @keyframes blink {
                        0%, 100% {
@@ -49,8 +52,8 @@ header{
                    .consultation{
                        display: none;
                        animation-name: slideIn;
-                        animation-delay: 1s;
-                        animation-duration: 3s;
+                        animation-delay: 0.5s;
+                        animation-duration: 1s;
                    } 

                    @keyframes slideIn {
@@ -62,15 +65,14 @@ header{
                        }
                    } 

-                    // @keyframes scale {
-                    //     0%{
-                    //         transform: scale(2);
-                    //     }
-                    //     90%{transform: scale(2);}
-                    //     100% {
-                    //         transform: scale(1);
-                    //     }
-                    // }
+                    @keyframes scale {
+                        0%{
+                            transform: scale(2);
+                        }
+                        100% {
+                            transform: scale(1);
+                        }
+                    }
    
                           
                }
@@ -78,4 +80,6 @@ header{

        }
    }
-}
+}
+
+
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss
@@ -15,6 +15,7 @@
@import "global/layout";
@import "global/reset";
@import "global/mediaquerries";
+
 // @import "global/_animated-logo";


@@ -24,12 +25,12 @@
@import "partials/header";
@import "partials/footer";
@import "partials/aside";
-@import "partials/animation-logo";
+// @import "partials/animation-logo";
@import "partials/slick-theme";
@import "partials/slick";
@import "partials/timeline";
@import "partials/actu-caroussel-home";
-@import "partials/animation-logo-header";
+// @import "partials/animation-logo-header";
@import "partials/formes-animees";
@import "partials/animation-pilliers";
@import "partials/map";
--- a/web/themes/custom/quartiers_de_demain/templates/field--block-content--logo-link.html.twig
+++ b/web/themes/custom/quartiers_de_demain/templates/field--block-content--logo-link.html.twig
@@ -432,9 +432,9 @@

  {% for item in items %}
    <div{{ item.attributes }}>
-      <a class='logo-qdd' href="{{ ancre_href1 }}">
+      {# <a class='logo-qdd' href="{{ ancre_href1 }}">
        {{ svg_icon|raw }}
-      </a>
+      </a> #}
      
      <a clas='other-logo' href="{{ ancre_href }}">
        {{ item.content }}
--- a/web/themes/custom/quartiers_de_demain/webpack.config.js
+++ b/web/themes/custom/quartiers_de_demain/webpack.config.js
@@ -12,6 +12,7 @@ let config = {
        "./src/assets/js/lightbox.js",
        "./src/assets/js/header.js",
        "./src/assets/js/timeline.js",
+        "./src/assets/js/ressources.js",
        "./src/assets/scss/quartiers_de_demain.scss", 
        // "./src/assets/fonts/*",
        // "./src/assets/css/animated_logo.css",
Author	SHA1	Message	Date
ouidade	0f233d9309	header sans animation	2025-12-09 13:15:40 +01:00
ouidade	9986179153	header sans animation	2025-12-09 12:54:21 +01:00
ouidade	ee51632b85	initial slide timeline	2025-12-01 23:40:54 +01:00
ouidade	04a47789f7	anim header	2025-12-01 23:29:54 +01:00
ouidade	ff4fabba70	toggle actu sur H2	2025-12-01 22:09:06 +01:00
ouidade	fa2352b00f	animation header plus rappide	2025-12-01 21:45:16 +01:00
ouidade	6fe9fe1a54	animation header plus rappide	2025-12-01 20:38:17 +01:00
ouidade	4e8fe4fb2d	carte ressources va directement sur mission photo	2025-12-01 14:04:26 +01:00
ouidade	ad9c0349c7	new fichier ressuorces.je	2025-12-01 13:35:51 +01:00
ouidade	b266b73176	responsive node site	2025-12-01 12:54:44 +01:00
ouidade	b1d2acd246	responsive node site	2025-12-01 12:52:32 +01:00
ouidade	1f0f540268	responsive force presenteaiton femré	2025-12-01 12:29:02 +01:00
ouidade	5edb071b35	responsive node projet	2025-12-01 12:16:35 +01:00
ouidade	1f377f9b60	responsive node projet	2025-12-01 12:14:39 +01:00
ouidade	446a8f2288	responsive node projet	2025-12-01 12:03:02 +01:00
ouidade	53b935bd07	responsive node projet	2025-12-01 11:44:53 +01:00
ouidade	c53e9461dd	responsive /lesprojets	2025-12-01 10:47:35 +01:00
ouidade	8a8ecbb3e4	responsive node ressource	2025-12-01 10:43:44 +01:00