/**
 * Reassurance Section 1 - Logos de clients avec défilement automatique
 */

.reassurance-1-section {
  padding-top: var(--padding-top, 5rem);
  padding-bottom: var(--padding-bottom, 5rem);
  overflow: hidden;
}

.reassurance-intro {
  margin-bottom: var(--spacing-lg, 3rem) !important;
}

.reassurance-intro-text {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-secondary, #535862);
  margin: 0;
}

.reassurance-logos-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.reassurance-logos {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: max-content;
  animation: scroll-logos var(--carousel-duration, 50s) linear infinite;
}

.reassurance-logos:hover {
  animation-play-state: paused;
}

.reassurance-logo-item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reassurance-logo-img,
.reassurance-logo-img img {
  height: 48px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  display: block;
  filter: grayscale(100%) opacity(0.7);
  transition: filter 0.3s ease;
}

/* Imagify : <picture class="reassurance-logo-img"> — annuler le filtre sur le container */
picture.reassurance-logo-img {
  filter: none;
  transition: none;
}

.reassurance-logo-item:hover .reassurance-logo-img,
.reassurance-logo-item:hover .reassurance-logo-img img {
  filter: grayscale(0%) opacity(1);
}

picture.reassurance-logo-item:hover {
  filter: none;
}

@keyframes scroll-logos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Tablettes */
@media (max-width: 992px) {
  .reassurance-logos {
    gap: 3rem;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .reassurance-1-section {
    padding-top: var(--padding-top, 3rem);
    padding-bottom: var(--padding-bottom, 3rem);
  }

  .reassurance-intro-text {
    font-size: 0.875rem;
  }

  .reassurance-logos {
    gap: 2.5rem;
    animation-duration: calc(var(--carousel-duration, 50s) * 0.7) !important;
  }

  .reassurance-logo-img,
  .reassurance-logo-img img {
    height: 36px !important;
  }
}

/* Fond sombre — inversion logos.
   Filter appliqué uniquement sur <img>, pas sur <picture> (Imagify wrapper). */
.reassurance-1-section.bg-primary img.reassurance-logo-img,
.reassurance-1-section.bg-primary .reassurance-logo-img img,
.reassurance-1-section.bg-secondary img.reassurance-logo-img,
.reassurance-1-section.bg-secondary .reassurance-logo-img img,
.reassurance-1-section.bg-dark img.reassurance-logo-img,
.reassurance-1-section.bg-dark .reassurance-logo-img img,
.reassurance-1-section.bg-gray-dark img.reassurance-logo-img,
.reassurance-1-section.bg-gray-dark .reassurance-logo-img img {
  filter: grayscale(100%) opacity(0.8) brightness(0) invert(1);
}

.reassurance-1-section.bg-primary picture.reassurance-logo-img,
.reassurance-1-section.bg-secondary picture.reassurance-logo-img,
.reassurance-1-section.bg-dark picture.reassurance-logo-img,
.reassurance-1-section.bg-gray-dark picture.reassurance-logo-img {
  filter: none;
}

.reassurance-1-section.bg-primary .reassurance-logo-item:hover img.reassurance-logo-img,
.reassurance-1-section.bg-primary .reassurance-logo-item:hover .reassurance-logo-img img,
.reassurance-1-section.bg-secondary .reassurance-logo-item:hover img.reassurance-logo-img,
.reassurance-1-section.bg-secondary .reassurance-logo-item:hover .reassurance-logo-img img,
.reassurance-1-section.bg-dark .reassurance-logo-item:hover img.reassurance-logo-img,
.reassurance-1-section.bg-dark .reassurance-logo-item:hover .reassurance-logo-img img,
.reassurance-1-section.bg-gray-dark .reassurance-logo-item:hover img.reassurance-logo-img,
.reassurance-1-section.bg-gray-dark .reassurance-logo-item:hover .reassurance-logo-img img {
  filter: grayscale(0%) opacity(1) brightness(0) invert(1);
}

@media (prefers-reduced-motion: reduce) {
  .reassurance-logos {
    animation: none;
  }

  .reassurance-logo-img,
  .reassurance-logo-img img {
    transition: none;
  }
}