carroussel thumbnial vertical

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

@@ -5841,12 +5841,14 @@ svg.ext {
   width: 80%;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel {
-  display: block;
+  display: flex;
   margin: auto;
   text-align: center;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container {
   position: relative;
+  flex: 1;
+  max-width: 600px;
   overflow: hidden;
   width: 100%;
   object-fit: contain;
@@ -5865,10 +5867,10 @@ svg.ext {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  background: #818181;
+  background: none;
   border-radius: 50%;
   padding: 5px 10px;
-  color: white;
+  color: black;
   cursor: pointer;
 }
 content .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container .arrow.left {
@@ -5882,36 +5884,21 @@ content .page-node-type-ressource .type-les-projets-en-images.layout__region--to
   font-family: sans-serif;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper {
-  position: relative;
-  max-width: 100%;
-  overflow: hidden;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-}
-.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow {
-  cursor: pointer;
-  padding: 5px 10px;
-  background: #00aaff;
-  color: white;
-  border-radius: 50%;
-  user-select: none;
-  z-index: 2;
-}
-.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow.left {
-  margin-right: 10px;
-}
-.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow.right {
-  margin-left: 10px;
+  max-height: 500px;
+  overflow: hidden;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails {
   display: flex;
+  flex-direction: column;
   gap: 10px;
-  overflow-x: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
   scroll-behavior: smooth;
-  max-width: 100%;
+  max-height: 400px;
   padding: 10px 0;
-  scrollbar-width: none;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails::-webkit-scrollbar {
   display: none;
@@ -5926,6 +5913,18 @@ content .page-node-type-ressource .type-les-projets-en-images.layout__region--to
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails img.active {
   border-color: #00aaff;
 }
+.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow {
+  cursor: pointer;
+  padding: 5px;
+  background: #00aaff;
+  color: white;
+  border-radius: 50%;
+  user-select: none;
+  margin: 5px 0;
+}
+.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow.left, .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow.right {
+  margin: 0;
+}
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .field__items {
   display: none;
 }

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

@@ -17,7 +17,7 @@
         order: 7;
         width: 80%;
         .carousel {
-            display: block;
+            display: flex;
             // max-width: 60vw;
             margin: auto;
             text-align: center;
@@ -27,6 +27,8 @@
             //   background: #e0f5ff;
               // height: 500px;
               // max-height: 500px;
+              flex: 1; // prend l’espace restant
+              max-width: 600px;
               overflow: hidden;
               width: 100%;
               object-fit: contain;
@@ -47,10 +49,10 @@
                 position: absolute;
                 top: 50%;
                 transform: translateY(-50%);
-                background: #818181;
+                background:none;
                 border-radius: 50%;
                 padding: 5px 10px;
-                color: white;
+                color: black;
                 cursor: pointer;
                 content
         
@@ -82,60 +84,109 @@
               margin-top: 10px;
               font-family: sans-serif;
             }
-        
             .thumbnails-wrapper {
-              position: relative;
-              max-width: 100%;
-              overflow: hidden;
               display: flex;
+              flex-direction: column;
               align-items: center;
-              justify-content: center;
-        
-              .thumb-arrow {
-                cursor: pointer;
-                padding: 5px 10px;
-                background: #00aaff;
-                color: white;
-                border-radius: 50%;
-                user-select: none;
-                z-index: 2;
-                // font-weight: bold;
-        
-                &.left {
-                  margin-right: 10px;
-                }
-        
-                &.right {
-                  margin-left: 10px;
-                }
-              }
-        
+              max-height: 500px;
+              overflow: hidden;
+            
               .thumbnails {
                 display: flex;
+                flex-direction: column;
                 gap: 10px;
-                overflow-x: auto;
+                overflow-y: auto;
+                overflow-x: hidden;
                 scroll-behavior: smooth;
-                max-width: 100%;
+                max-height: 400px;
                 padding: 10px 0;
-                scrollbar-width: none; // Firefox
-        
+            
                 &::-webkit-scrollbar {
-                  display: none; // Chrome, Safari
+                  display: none;
                 }
-        
+            
                 img {
                   width: 60px;
                   height: 60px;
                   object-fit: cover;
                   border: 2px solid transparent;
                   cursor: pointer;
-        
+            
                   &.active {
                     border-color: #00aaff;
                   }
                 }
               }
+            
+              .thumb-arrow {
+                cursor: pointer;
+                padding: 5px;
+                background: #00aaff;
+                color: white;
+                border-radius: 50%;
+                user-select: none;
+                margin: 5px 0;
+            
+                &.left, &.right {
+                  // on ne les utilise plus horizontalement
+                  margin: 0;
+                }
+              }
             }
+        
+            // .thumbnails-wrapper {
+            //   position: relative;
+            //   max-width: 100%;
+            //   overflow: hidden;
+            //   display: flex;
+            //   align-items: center;
+            //   justify-content: center;
+        
+            //   .thumb-arrow {
+            //     cursor: pointer;
+            //     padding: 5px 10px;
+            //     background: #00aaff;
+            //     color: white;
+            //     border-radius: 50%;
+            //     user-select: none;
+            //     z-index: 2;
+            //     // font-weight: bold;
+        
+            //     &.left {
+            //       margin-right: 10px;
+            //     }
+        
+            //     &.right {
+            //       margin-left: 10px;
+            //     }
+            //   }
+        
+            //   .thumbnails {
+            //     display: flex;
+            //     gap: 10px;
+            //     overflow-x: auto;
+            //     scroll-behavior: smooth;
+            //     max-width: 100%;
+            //     padding: 10px 0;
+            //     scrollbar-width: none; // Firefox
+        
+            //     &::-webkit-scrollbar {
+            //       display: none; // Chrome, Safari
+            //     }
+        
+            //     img {
+            //       width: 60px;
+            //       height: 60px;
+            //       object-fit: cover;
+            //       border: 2px solid transparent;
+            //       cursor: pointer;
+        
+            //       &.active {
+            //         border-color: #00aaff;
+            //       }
+            //     }
+            //   }
+            // }
         }
         // Masquer les images Drupal originales (facultatif)
         .field__items {