Corrections index projets et diaporama

- Vidéo en média d'en-tête de la fiche projet quand elle existe
  (comme la vignette d'index), sinon première image. La grille inclut
  la 1re image quand l'en-tête est une vidéo pour ne pas la perdre.
- Diaporama : images en HD (srcset @Nx via jquery.lazy) au lieu de la
  version SD 640px ; affichage plein écran sans rognage (object-fit
  contain, dimensions viewport).
- Diaporama : clic sur le fond ferme, navigation clavier (flèches +
  Échap). Indexation robuste par URL (data-src/src) corrigeant
  l'ouverture systématique sur l'image d'en-tête.
- Cartes projet mobile/tablette : titre ferré à gauche sous l'image
  au lieu d'être centré.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

user/themes/figureslibres-v2/js/script.js

@@ -718,26 +718,47 @@ function displayReader() {
     },
   
   });
+  // l'url réelle d'une image : data-src si pas encore chargée (lazy), sinon src (jquery.lazy retire data-src au chargement)
+  function imageSrc(img) {
+    return img.getAttribute('data-src') || img.getAttribute('src')
+  }
   $('#cover-image img, .project-image').click( function(event) {
-    const totalImg = $('img')
+    // retrouver le slide correspondant à l'image cliquée par son url (robuste avec/sans vidéo d'en-tête, lazy chargé ou non)
+    const clickedSrc = imageSrc(event.target)
+    const slides = swiper.el.querySelectorAll('.swiper-slide img')
     let indexImg = 0
-    for (let img of totalImg) {
-      if (event.target === img) { break }
-      indexImg++
-    }
-    swiper.slideToLoop(indexImg - 1)
+    slides.forEach((img, i) => {
+      if (imageSrc(img) === clickedSrc) { indexImg = i }
+    })
+    swiper.slideToLoop(indexImg)
     $('body').css('overflow-y', 'hidden');
     swiper.el.style.display = "block";
     setTimeout(() => {
       swiper.el.style.opacity = "1";
     }, 10);
   })
-  $('#close-carousel').click( () => {
+  function closeCarousel() {
     $('body').css('overflow-y', 'auto');
     swiper.el.style.opacity = "0";
     setTimeout(() => {
       swiper.el.style.display = "none";
     }, 300);
+  }
+  $('#close-carousel').click(closeCarousel)
+  // un clic sur le fond (hors image, flèches et croix) ferme le diaporama
+  $('.swiper').click( function(event) {
+    if (event.target === this || $(event.target).hasClass('swiper-wrapper') || $(event.target).hasClass('swiper-slide')) {
+      closeCarousel()
+    }
+  })
+  // navigation clavier dans le diaporama (uniquement quand il est ouvert)
+  $(document).off('keydown.carousel').on('keydown.carousel', function(event) {
+    if (swiper.el.style.display !== 'block') { return }
+    switch (event.key) {
+      case 'Escape':     closeCarousel(); break
+      case 'ArrowRight': swiper.slideNext(); break
+      case 'ArrowLeft':  swiper.slidePrev(); break
+    }
   })
 
 
@@ -763,6 +784,7 @@ function displayReader() {
 
 function leaveReader() {
   $(window).off('scroll')
+  $(document).off('keydown.carousel')
   $('header').fadeIn()
   if (!$('nav li a[href$=projets]').parent().hasClass('selected')) {
     changeNavSelected('projets')