/* Disposition des logos */
.brands-row{
  display:flex; gap: clamp(16px,3vw,40px); align-items:center; justify-content:space-between;
}
.brands-box{
  position:relative; display:flex; align-items:center; justify-content:center;
  isolation:isolate; /* pour que l'ombre du tooltip ne se mélange pas */
}

/* Effet hover sur l’image */
.brands-box img{
  display:block; max-width:100%; height:auto;
  transition: transform .25s ease, filter .25s ease;
}
.brands-box:hover img,
.brands-box:focus-within img{
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.12));
}

/* Effet texte animé au-dessus du logo */
.brands-box::after {
  content: attr(data-alt);
  position: absolute;
  left: 50%;
  bottom: 100%; /* positionné au-dessus de l'image */
  transform: translate(-50%, -12px);
  color: #9ca3af;
  font: 600 14px/1.2 Inter, system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  animation: none;
  transition: opacity .3s ease;
}

/* Apparition au hover */
.brands-box:hover::after {
  opacity: 1;
  animation: wave 1.5s ease-in-out infinite;
}

/* Animation type wave/pulse */
@keyframes wave {
  0%, 100% { transform: translate(-50%, -12px) scale(1); }
  50%      { transform: translate(-50%, -16px) scale(1.05); }
}


/* Petite flèche du tooltip */
.brands-box::before{
  content:""; position:absolute; left:50%; bottom:-6px; transform: translateX(-50%) rotate(45deg);
  width:10px; height:10px; background: rgba(17,19,24,.92); opacity:0; z-index:1;
  transition: opacity .25s ease;
}

/* Affichage au survol ET au focus clavier du lien */
.brands-box:hover::after,
.brands-box:focus-within::after{ opacity:1; transform: translate(-50%, 0); }
.brands-box:hover::before,
.brands-box:focus-within::before{ opacity:1; }

/* Option: cacher le tooltip si pas de data-alt */
.brands-box:not([data-alt])::after,
.brands-box:not([data-alt])::before{ display:none; }

/* Responsive: sur mobile, éviter de sortir de l’écran */
@media (max-width: 600px){
  .brands-row{ gap:16px; }
  .brands-box::after{ font-size:13px; max-width:80vw; text-overflow:ellipsis; overflow:hidden; }
}