soulignement header

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

@@ -436,6 +436,7 @@ header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-o
   display: block;
   border-bottom: solid white 1px;
   padding-bottom: 0.3rem;
+  width: 60%; /* Réduit la largeur du soulignement à 50% */
 }
 header .header_nav_container.hidden {
   transform: translateX(30%);
@@ -1654,6 +1655,7 @@ body {
   justify-content: center;
   align-items: center;
   z-index: 999;
+  flex-direction: column;
 }
 
 .lightbox img {
@@ -1661,6 +1663,15 @@ body {
   max-height: 80%;
 }
 
+#lightbox .caption {
+  color: white;
+  font-size: 1rem;
+  text-align: center;
+  margin-top: 10px;
+  max-width: 90%;
+  margin: 10px auto;
+}
+
 .lightbox .close {
   position: absolute;
   top: 20px;

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

@@ -442,66 +442,101 @@
 
 //////////////// start lightbox galerie image page site////////////////////////
 
-  // Sélectionne uniquement les images à l'intérieur de '.paragraph--type--site-diapo'
+// Sélection des images et de leurs légendes dans la galerie
-  let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
+let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
-  let currentIndex;
+let currentIndex;
 
-  // Créer le lightbox et ses éléments
+// Création de la lightbox et de ses éléments
-  const lightbox = document.createElement('div');
+const lightbox = document.createElement('div');
-  lightbox.id = 'lightbox';
+lightbox.id = 'lightbox';
-  lightbox.classList.add('lightbox');
+lightbox.classList.add('lightbox');
-  document.body.appendChild(lightbox);
+document.body.appendChild(lightbox);
 
-  const img = document.createElement('img');
+const img = document.createElement('img');
-  lightbox.appendChild(img);
+lightbox.appendChild(img);
 
-  const closeBtn = document.createElement('span');
+// Élément pour afficher la légende
-  closeBtn.classList.add('close');
+const caption = document.createElement('p');
-  closeBtn.innerHTML = '×';
+caption.classList.add('caption');
-  lightbox.appendChild(closeBtn);
+lightbox.appendChild(caption);
 
-  const prevBtn = document.createElement('a');
+const closeBtn = document.createElement('span');
-  prevBtn.classList.add('prev');
+closeBtn.classList.add('close');
-  prevBtn.innerHTML = '❮';
+closeBtn.innerHTML = '×';
-  lightbox.appendChild(prevBtn);
+lightbox.appendChild(closeBtn);
 
-  const nextBtn = document.createElement('a');
+const prevBtn = document.createElement('a');
-  nextBtn.classList.add('next');
+prevBtn.classList.add('prev');
-  nextBtn.innerHTML = '❯';
+prevBtn.innerHTML = '❮';
-  lightbox.appendChild(nextBtn);
+lightbox.appendChild(prevBtn);
 
-  // Ajouter un écouteur d'événement sur chaque image pour ouvrir le lightbox
+const nextBtn = document.createElement('a');
-  images.forEach((image, index) => {
+nextBtn.classList.add('next');
-    image.addEventListener('click', () => {
+nextBtn.innerHTML = '❯';
-      lightbox.style.display = 'flex';
+lightbox.appendChild(nextBtn);
-      img.src = image.src;
+
-      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');
+
+  // 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);
   });
+});
 
-  // Fermer le lightbox
+// Fermer le lightbox
-  closeBtn.addEventListener('click', () => {
+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';
-  });
+  }
+});
 
-  // Naviguer vers l'image précédente
+// Ajout des contrôles clavier (Échap, flèches gauche/droite)
-  prevBtn.addEventListener('click', () => {
+document.addEventListener('keydown', (e) => {
-    currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
+  if (lightbox.style.display === 'flex') {
-    img.src = images[currentIndex].src;
+    if (e.key === 'Escape') {
-  });
-
-  // Naviguer vers l'image suivante
-  nextBtn.addEventListener('click', () => {
-    currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
-    img.src = images[currentIndex].src;
-  });
-
-  // Fermer le lightbox quand on clique en dehors de l'image
-  lightbox.addEventListener('click', (e) => {
-    if (e.target === lightbox) {
       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////////////////////////
 

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

@@ -131,26 +131,17 @@ header{
                 display: none;
             }
             ul {
-                
                 display: flex;
                 flex-direction: column;
                 align-items: flex-start;
                 position: relative;
-                // top: calc($header-height / 4 );
                 padding-left: 1rem;
                 padding-right: 1rem;
-                // margin-top: 2rem;
-                
-                // @media(max-width: 1200px){
-                //    top:0;
-                // }
                 @media(max-width: 1025px){
                     top: 0;
                     align-items: center;
-                    // margin: 1rem;
                 }
                 @media(max-width: 1090px){
-                    // top: calc($header-height-pad / 10);
                 }
                 li{
                     width: 100%;
@@ -158,9 +149,6 @@ header{
                     @media(max-width: 1090px){
                         padding-top: 0.3rem;
                     }
-                    // @media(max-width: 500px){
-                    //     padding-top: 0.5rem;
-                    // }
                     a{
                         text-transform: uppercase;
                         color: white;
@@ -180,9 +168,10 @@ header{
                         ::after{
                             content: "";
                             display: block;
-                            // width: 80px;
                             border-bottom: solid white 1px;
                             padding-bottom: 0.3rem;
+                            width: 60%; /* Réduit la largeur du soulignement à 50% */
+                            // margin: 0 auto; /* Centre le soulignement sous l'élément */
                         }
 
                     }

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

@@ -23,12 +23,21 @@ body {
     justify-content: center;
     align-items: center;
     z-index: 999;
+    flex-direction: column;
   }
   
   .lightbox img {
     max-width: 90%;
     max-height: 80%;
   }
+  #lightbox .caption {
+    color: white;
+    font-size: 1rem;
+    text-align: center;
+    margin-top: 10px;
+    max-width: 90%;
+    margin: 10px auto;
+  }
   
   .lightbox .close {
     position: absolute;