/* =========================================
   Block: Gallery Slider
   ========================================= */

/* Couleurs converties :
   - Titre  #2D413C à 60%  → sur fond blanc : mix(#2D413C, #fff, 60%) ≈ #7E9691
     Calcul : R=45+(255-45)*0.4=129→81  G=65+(255-65)*0.4=141→8D  B=60+(255-60)*0.4=136→88
     → #81908C  (valeur opaque équivalente sur blanc)
   - Puce inactive #B2B2B1 à 34% → sur fond blanc : mix(#B2B2B1, #fff, 34%)
     R=178+(255-178)*0.66=228→E4  G=178+(255-178)*0.66=228→E4  B=177+(255-177)*0.66=228→E4
     → #E4E4E3
*/

.block-gallery-slider {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Pas d'overflow:hidden ici : les flèches doivent pouvoir dépasser.
       Le masquage des slides est géré par le .swiper lui-même. */
    overflow: visible;
    @apply pt-8 md:pt-[100px];
  }

  /* --- Viewport : ancre les flèches hors du .swiper --- */
  .gallery-slider__viewport {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* --- Swiper container --- */
  .gallery-slider-swiper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
    overflow: hidden; /* masque les slides hors-champ */
  }
  
  /* --- Slide / figure --- */
  .gallery-slider__figure {
    margin: 0;
    width: 100%;
  }
  
  .gallery-slider__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;

    aspect-ratio: 1267 / 585;
  }
  
  /* --- Caption / Titre --- */
  .gallery-slider__caption {
    /* font-primary — remplacez par votre variable ou classe si besoin */
    font-family: var(--font-primary, inherit);
    font-size: 18px;
    font-weight: 400; /* regular */
    color: #81908C; /* #2D413C à 60% opacité sur blanc */
    margin-top: 12px;
    line-height: 1.4;
  }
  
  /* --- Pagination (puces) --- */
  .gallery-slider-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    position: relative !important; /* override Swiper absolute */
    bottom: auto !important;
    @apply mt-4 md:!-mt-4 !pb-[50px] md:!pb-[75px];
  }
  
  /* Puce de base (inactive) */
  .gallery-slider-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #E4E4E3; /* #B2B2B1 à 34% sur blanc */
    opacity: 1; /* on ne laisse pas Swiper gérer l'opacité */
    transition: background-color 0.25s ease;
    cursor: pointer;
  }
  
  /* Puce active */
  .gallery-slider-pagination .swiper-pagination-bullet-active {
    background-color: #707070;
  }

  /* Lien cliquable (lightbox) */
  .gallery-slider__link {
    display: block;
    width: 100%;
    cursor: zoom-in;
  }

  /* --- Flèches de navigation --- */
  .gallery-slider__nav {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    transform: translateY(-50%);
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    color: #2D413C;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }

  .gallery-slider__nav:hover {
    background-color: #2D413C;
    color: #fff;
  }

  .gallery-slider__nav svg {
    width: 24px;
    height: 24px;
    display: block;
  }

  .gallery-slider__nav--prev {
    left: -32px;
  }

  .gallery-slider__nav--next {
    right: -32px;
  }
  .gallery-slider__nav--prev,
  .gallery-slider__nav--next {
    opacity: .5;
  }
  .gallery-slider__nav--prev:hover,
  .gallery-slider__nav--next:hover {
    opacity: .85;
  }
  .logo-slider-pagination {
    display: none;
  }
  
  .gallery-slider__nav.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
  }

  @media (max-width: 640px) {
    .gallery-slider__nav {
      width: 36px;
      height: 36px;
    }
    .gallery-slider__nav svg {
      width: 20px;
      height: 20px;
    }
    
    .gallery-slider__nav--prev { left: -36px; }
    .gallery-slider__nav--next { right: -36px; }
  }

/* =========================================
   Block: Logo Slider
   ========================================= */

.block-logo-slider {
    width: 100%;
    max-width: 100%;
    overflow: visible; 
    @apply py-0;
}

.logo-slider-swiper {
    width: 100%;
    position: relative;
    overflow: hidden; 
}

.logo-slider-swiper .swiper-wrapper {
  display: flex;
  align-items: center;

}

.logo-slider-swiper .swiper-wrapper .swiper-slide {
  max-width: 250px;
  max-height: 150px;
}

.logo-slider__figure {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-slider__img {
    max-width: 100%;
    height: auto;
    max-height: 150px;
    width: auto;
    display: block;
    object-fit: contain !important;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.logo-slider__img:hover {
    filter: grayscale(0%);
    opacity: 1;
}