.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;
      }
      @media screen and (max-width: 810px) {
        margin-left: 0;
      }
      .block {
        margin-left: 0;
      }
      .block-entity-fieldnodefield-images{
        margin-top: 5rem;
        padding: 0;
        order: 7;
        width: 85%;
        .carousel {
          display: grid;
          // flex-direction: row;
          grid-template-columns: 10fr 1fr;
          gap: 4rem;
          // align-items: flex-start;
          justify-content: center;
          margin: auto;
          .main-image-block {
            display: flex;
            align-items: center;
            position: relative;
            width: 100%;
            margin: 0 auto;
          }
          
          .main-image-container {
            flex: 1;
            text-align: center;
          
            img {
              width: 100%;
              height: auto;
              object-fit: contain;
              max-height: 550px;
              border: none;
            }
          
            .caption {
              margin-top: 1rem;
              font-family: sans-serif;
              text-align: center;
              font-size: 1rem;
              color: #444;
            }
          }
          
          .arrow {
            // display: none;
            font-size: 2rem;
            color: #333;
            background: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
            user-select: none;
            transition: background 0.3s ease;
          
            &:hover {
              background: #bbb;
            }
          
            &.left {
              margin-right: 10px;
            }
          
            &.right {
              margin-left: 10px;
            }
          }
          
        
            .caption {
              margin-top: 10px;
              font-family: sans-serif;
              grid-column: 2;
              grid-row: 2;
            }
            .thumbnails-wrapper {
              grid-column: 2;
              display: flex;
              flex-direction: column;
              align-items: center;
              max-height: 60vh;
              grid-row: 1 / span 2;
              top: 0px;
              position: relative;
              overflow: hidden;
            
              // Dégradé haut
              // &::before,
              // &::after {
              //   content: "";
              //   position: absolute;
              //   left: 0;
              //   right: 0;
              //   height: 50px;
              //   z-index: 1;
              //   pointer-events: none;
              // }
            
              // &::before {
              //   top: 0;
              //   background: linear-gradient(to bottom, white, transparent);
              // }
            
              // &::after {
              //   bottom: 0;
              //   background: linear-gradient(to top, white, transparent);
              // }
            
              .thumb-arrow {
                cursor: pointer;
                padding: 5px 10px;
                background: #00aaff;
                color: white;
                border-radius: 50%;
                user-select: none;
                z-index: 2;
                position: relative;
            
                &.up {
                  transform: rotate(90deg);
                }
            
                &.down {
                  transform: rotate(90deg);
                }
              }
            
              .thumbnails {
                display: flex;
                flex-direction: column;
                gap: 6px;
                overflow-y: auto;
                max-height: 100%;
                scroll-behavior: smooth;
                position: relative;
                z-index: 0;
                // padding: 5px 0;
            
                &::-webkit-scrollbar {
                  display: none;
                }
            
                img {
                  width: 80px;
                  height: 60px;
                  object-fit: contain;
                  border: 2px solid transparent;
                  cursor: pointer;
                  opacity: 0.3;
                  transition: transform 0.3s ease, opacity 0.3s ease;
            
                  &.active {
                    transform: scale(1.3);
                    margin-top: 0.8rem;
                    margin-bottom: 0.8rem;
                    opacity: 1;
                    z-index: 1;
                  }
                }
              }
            }
            
            
        }
        @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%;
        }
      }
    }      
  }

}    
body.type-media-reportage-photos{
  .block-region-third{
    .block-entity-fieldnodefield-projets-liee{
      transform: translateY(-45.5rem);
    }
    .block-entity-fieldnodefield-liens,
    .block-entity-fieldnodefield-fichiers,
    .block-entity-fieldnodefield-ress{
      transform: translateY(-16rem);
    }
  }
  
}