/* ============================================================
   REASSURANCE LOGOS — "Ils nous font confiance"
   ============================================================ */

/* --- Section ---------------------------------------------- */
.rl {
  background:  var(--color-bg);
  border-top:  1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  transition:
    background   var(--transition-slow),
    border-color var(--transition-slow);
}

/* --- Container -------------------------------------------- */
.rl__container {
  width:         100%;
  max-width:     var(--container-xl);
  margin-inline: auto;
  padding:       var(--space-10) var(--space-6);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           var(--space-6);
}

@media (min-width: 768px) {
  .rl__container { padding: var(--space-12) var(--space-10); }
}

@media (min-width: 1280px) {
  .rl__container { padding-inline: var(--space-16); }
}

/* --- Label ------------------------------------------------ */
.rl__label {
  font-size:      var(--text-xs);
  font-weight:    var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color:          var(--color-text-muted);
  margin:         0;
  transition:     color var(--transition-slow);
}

/* --- Liste des logos -------------------------------------- */
.rl__list {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-8);
  list-style:      none;
  margin:          0;
  padding:         0;
  width:           100%;
}

@media (min-width: 768px)  { .rl__list { gap: var(--space-10); } }
@media (min-width: 1024px) { .rl__list { gap: var(--space-12); } }

/* --- Item ------------------------------------------------- */
.rl__item {
  display:     flex;
  align-items: center;
}

/* --- Logo image ------------------------------------------- */
.rl__logo {
  display:    block;
  height:     24px;       /* mobile */
  width:      auto;
  max-width:  140px;
  object-fit: contain;

  /* Gris par défaut */
  filter:     grayscale(100%) opacity(0.55);
  transition:
    filter    var(--transition-base),
    transform var(--transition-base);
}

@media (min-width: 768px)  { .rl__logo { height: 28px; } }
@media (min-width: 1024px) { .rl__logo { height: 32px; } }

/* Hover : passage en couleur + lift léger */
.rl__item:hover .rl__logo {
  filter:    grayscale(0%) opacity(1);
  transform: scale(1.06);
}

/* Dark mode : logos SVG noirs → les rendre blancs via invert */
[data-theme="dark"] .rl__logo,
:root .rl__logo {
  filter: grayscale(100%) opacity(0.45) invert(1);
}

[data-theme="dark"] .rl__item:hover .rl__logo,
:root .rl__item:hover .rl__logo {
  filter:    invert(1) opacity(1);
  transform: scale(1.06);
}

/* White mode : logos noirs, pas d'inversion */
[data-theme="white"] .rl__logo,
[data-theme="light"] .rl__logo {
  filter: grayscale(100%) opacity(0.55);
}

[data-theme="white"] .rl__item:hover .rl__logo,
[data-theme="light"] .rl__item:hover .rl__logo {
  filter:    grayscale(0%) opacity(1);
  transform: scale(1.06);
}

/* ============================================================
   ANIMATION D'ENTRÉE — scroll-triggered (IntersectionObserver)
   JS ajoute .rl--visible sur la section quand elle entre en vue
   ============================================================ */
.rl__item {
  opacity:   0;
  transform: translateY(12px);
  transition:
    opacity   0.45s ease,
    transform 0.45s ease;
}

/* Délai en cascade pour chaque item */
.rl__item:nth-child(1) { transition-delay: 0.00s; }
.rl__item:nth-child(2) { transition-delay: 0.07s; }
.rl__item:nth-child(3) { transition-delay: 0.14s; }
.rl__item:nth-child(4) { transition-delay: 0.21s; }
.rl__item:nth-child(5) { transition-delay: 0.28s; }
.rl__item:nth-child(6) { transition-delay: 0.35s; }

.rl--visible .rl__item {
  opacity:   1;
  transform: translateY(0);
}

/* Pas d'animation si l'utilisateur le préfère */
@media (prefers-reduced-motion: reduce) {
  .rl__item {
    opacity:   1 !important;
    transform: none !important;
    transition: none !important;
  }
}