.carousel{display: none;}
.page-node-type-ressource{

        .type-les-projets-en-images.layout__region--top{
            .block-region-top{
            display: flex !important;
            flex-direction: column;
            margin-left: 11%;
            @media screen and (min-width:1100px) {
                display: flex;
            }
            .block {
                margin-left: 0;
            }
            .block-entity-fieldnodefield-images{
                padding: 0;
                order: 7;

                .carousel {
                    display: block;
                    max-width: 60vw;
                    margin: auto;
                    text-align: center;
                
                    .main-image-container {
                      position: relative;
                    //   background: #e0f5ff;
                      height: 500px;
                      max-height: 500px;
                      overflow: hidden;
                      width: 100%;
                      object-fit: contain;
                
                      img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                        transition: transform 0.3s ease-in-out;
                        // transition: opacity 0.4s ease-in-out; // à réactiver si fade souhaité
                        &.animate {
                          transform: scale(1.02); // léger effet smooth sur changement
                        }
                      }
                
                      .arrow {
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        background: #00aaff;
                        border-radius: 50%;
                        padding: 5px 10px;
                        color: white;
                        cursor: pointer;
                        content
                
                        &.left {
                          left: 10px;
                        }
                
                        &.right {
                          right: 10px;
                        }
                      }
                        // #prevArrow{
                        //     &::before{
                        //     content:url("../images/pictos/fleche-droite-dans-rond.png");
                        //     display: block;
                        //     transform: scaleX(-1);
                        //     width: 50px;
                        // }
                        // }
                        // #nextArrow{
                        //     &::before{
                        //         content:url("../images/pictos/fleche-droite-dans-rond.png");
                        //         display: block;
                        //     }
                        // }
                    }
                
                    .caption {
                      margin-top: 10px;
                      font-family: sans-serif;
                    }
                
                    .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 {
                    display: none;
                  }
            }
            
        }

    // }
    }
}    