@media caroussel ressouce image

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

@@ -5882,6 +5882,11 @@ svg.ext {
     display: flex;
   }
 }
+@media screen and (max-width: 810px) {
+  .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top {
+    margin-left: 0;
+  }
+}
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block {
   margin-left: 0;
 }
@@ -6007,9 +6012,65 @@ svg.ext {
   opacity: 1;
   z-index: 1;
 }
+@media screen and (max-width: 810px) {
+  .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    align-items: center;
+    width: 100vw;
+  }
+  .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-block {
+    width: 90%;
+  }
+  .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .thumbnails-wrapper {
+    width: 100%;
+    display: flex !important;
+    flex-direction: row !important; /* 👈 corrige l'orientation */
+    justify-content: center;
+    align-items: center;
+    overflow-x: auto;
+    overflow-y: hidden;
+    max-height: none;
+    padding: 1rem 0;
+    position: relative;
+  }
+  .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .thumbnails {
+    display: flex !important;
+    flex-direction: row !important; /* 👈 force l'alignement horizontal */
+    gap: 0.8 rem !important;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    padding: 0 1rem;
+    max-width: 100%;
+    flex-wrap: nowrap;
+  }
+  .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .thumbnails::-webkit-scrollbar {
+    display: none;
+  }
+  .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .thumbnails img {
+    width: 60px;
+    height: 45px;
+    flex-shrink: 0; /* évite l’écrasement */
+  }
+  .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .thumb-arrow {
+    display: none; /* inutile si scroll horizontal */
+  }
+}
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .field__items {
   display: none;
 }
+@media screen and (max-width: 810px) {
+  .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource,
+  .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodetitle,
+  .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-edition,
+  .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s-,
+  .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-date-de-parution,
+  .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs {
+    margin-left: 7%;
+  }
+}
 
 body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefield-projets-liee {
   transform: translateY(-45.5rem);

web/themes/custom/eql/scripts/main.js

@@ -209,6 +209,24 @@ document.addEventListener('DOMContentLoaded', function () {
 
 function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContainer }) {
   const images = [];
+  // Adapter l'orientation des vignettes si écran < 810px
+function applyResponsiveThumbnailsLayout() {
+  if (window.innerWidth < 810) {
+    thumbsContainer.style.flexDirection = 'row';
+    thumbsContainer.style.flexWrap = 'nowrap';
+    thumbsContainer.style.overflowX = 'auto';
+    thumbsContainer.style.overflowY = 'hidden';
+    thumbsContainer.style.display = 'flex';
+    thumbsContainer.style.justifyContent = 'center';
+  } else {
+    thumbsContainer.style.flexDirection = 'column';
+    thumbsContainer.style.overflowY = 'auto';
+    thumbsContainer.style.overflowX = 'hidden';
+  }
+}
+applyResponsiveThumbnailsLayout();
+window.addEventListener('resize', applyResponsiveThumbnailsLayout);
+
   document.querySelectorAll('.carousel-items .carousel-item img').forEach((img) => {
     images.push({
       src: img.getAttribute('src'),
@@ -220,17 +238,41 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
 
   let currentIndex = 0;
 
+  // function scrollThumbnailToCenter(index) {
+  //   const thumbnails = document.querySelectorAll('.thumbnails img');
+  //   const activeThumb = thumbnails[index];
+  //   if (activeThumb && thumbsContainer) {
+  //     const containerHeight = thumbsContainer.clientHeight;
+  //     const thumbOffsetTop = activeThumb.offsetTop;
+  //     const thumbHeight = activeThumb.offsetHeight;
+  //     const scrollTarget = thumbOffsetTop - (containerHeight / 2) + (thumbHeight / 2);
+  //     thumbsContainer.scrollTo({ top: scrollTarget, behavior: 'smooth' });
+  //   }
+  // }
   function scrollThumbnailToCenter(index) {
     const thumbnails = document.querySelectorAll('.thumbnails img');
     const activeThumb = thumbnails[index];
     if (activeThumb && thumbsContainer) {
-      const containerHeight = thumbsContainer.clientHeight;
-      const thumbOffsetTop = activeThumb.offsetTop;
-      const thumbHeight = activeThumb.offsetHeight;
-      const scrollTarget = thumbOffsetTop - (containerHeight / 2) + (thumbHeight / 2);
-      thumbsContainer.scrollTo({ top: scrollTarget, behavior: 'smooth' });
+      const isMobile = window.innerWidth < 810;
+  
+      if (isMobile) {
+        // Scroll horizontal
+        const containerWidth = thumbsContainer.clientWidth;
+        const thumbOffsetLeft = activeThumb.offsetLeft;
+        const thumbWidth = activeThumb.offsetWidth;
+        const scrollTarget = thumbOffsetLeft - (containerWidth / 2) + (thumbWidth / 2);
+        thumbsContainer.scrollTo({ left: scrollTarget, behavior: 'smooth' });
+      } else {
+        // Scroll vertical
+        const containerHeight = thumbsContainer.clientHeight;
+        const thumbOffsetTop = activeThumb.offsetTop;
+        const thumbHeight = activeThumb.offsetHeight;
+        const scrollTarget = thumbOffsetTop - (containerHeight / 2) + (thumbHeight / 2);
+        thumbsContainer.scrollTo({ top: scrollTarget, behavior: 'smooth' });
+      }
     }
   }
+  
 
   function showImage(index) {
     mainImage.src = images[index].src;

web/themes/custom/eql/scss/pages/_ressource-type-en-images.scss

@@ -8,6 +8,9 @@
       @media screen and (min-width:1100px) {
           display: flex;
       }
+      @media screen and (max-width: 810px) {
+        margin-left: 0;
+      }
       .block {
         margin-left: 0;
       }
@@ -176,12 +179,75 @@
             
             
         }
+        @media screen and (max-width: 810px) {
+          .carousel {
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+            align-items: center;
+            width: 100vw;
+            .main-image-block{
+              width: 90%;
+            }
+          }
+        
+          .thumbnails-wrapper {
+            width: 100%;
+            display: flex !important;
+            flex-direction: row !important; /* 👈 corrige l'orientation */
+            justify-content: center;
+            align-items: center;
+            overflow-x: auto;
+            overflow-y: hidden;
+            max-height: none;
+            padding: 1rem 0;
+            position: relative;
+          }
+        
+          .thumbnails {
+            display: flex !important;
+            flex-direction: row !important; /* 👈 force l'alignement horizontal */
+            gap: 0.8  rem !important;
+            overflow-x: auto;
+            overflow-y: hidden;
+            scroll-behavior: smooth;
+            padding: 0 1rem;
+            max-width: 100%;
+            flex-wrap: nowrap;
+        
+            &::-webkit-scrollbar {
+              display: none;
+            }
+        
+            img {
+              width: 60px;
+              height: 45px;
+              flex-shrink: 0; /* évite l’écrasement */
+            }
+          }
+        
+          .thumb-arrow {
+            display: none; /* inutile si scroll horizontal */
+          }
+        }
+        
+        
+        
         // Masquer les images Drupal originales (facultatif)
         .field__items {
           display: none;
         }
       }
-    
+      .block-entity-fieldnodefield-type-de-ressource,
+      .block-entity-fieldnodetitle,
+      .block-entity-fieldnodefield-edition,
+      .block-entity-fieldnodefield-auteur-s-,
+      .block-entity-fieldnodefield-date-de-parution,
+      .block-entity-fieldnodefield-mots-clefs{
+        @media screen and (max-width: 810px) {
+          margin-left: 7%;
+        }
+      }
     }      
   }