/* =========================================================================
   WEBCRAFT — confiance-flux.css · 23/10/2026 · Hugo
   « Ils nous ont fait confiance » : UNE seule ligne qui défile, sans coupure.
   Deux copies de la liste côte à côte dans la même piste, largeur = contenu,
   translation de -50 % en boucle ; les bords sont fondus par un masque.
   Chaque nom reste sur une seule ligne (white-space:nowrap), même hauteur
   optique, et un reflet de métal le traverse au survol.
   ========================================================================= */

.confiance .bandeau-logos{
  overflow:hidden!important;
  max-width:100%!important;
  padding-block:14px!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)!important;
}
.confiance .bandeau-logos__piste{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  width:max-content!important;
  max-width:none!important;
  gap:clamp(38px,4.4vw,76px)!important;
  animation:webcraftFluxMetal 52s linear infinite!important;
  will-change:transform;
}
.confiance .bandeau-logos:hover .bandeau-logos__piste{
  animation-play-state:paused!important;
}
@keyframes webcraftFluxMetal{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

.confiance .bandeau-logos__item{
  position:relative!important;
  flex:0 0 auto!important;
  display:inline-block!important;
  width:auto!important;
  max-width:none!important;
  padding:0!important;
  margin:0!important;
  font-family:"Instrument Sans","Public Sans",system-ui,sans-serif!important;
  font-size:15px!important;
  line-height:1.2!important;
  font-weight:600!important;
  letter-spacing:.17em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow:visible!important;
  text-overflow:clip!important;
  -webkit-box-reflect:none!important;
  /* mono clair lisible sur la nuit : mercure, arête haute légère */
  color:rgba(232,239,250,.88)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.10)!important;
  background-image:linear-gradient(100deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.95) 46%,
    rgba(247,250,255,.95) 52%,
    rgba(255,255,255,0) 68%)!important;
  background-size:280% 100%!important;
  background-position:180% 0!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:currentColor;
  transition:color .4s ease!important;
}
/* Reflet de métal qui passe sur le nom survolé */
.confiance .bandeau-logos__item:hover{
  color:#FFFFFF!important;
  animation:webcraftNomReflet 1.5s ease-out forwards!important;
}
@keyframes webcraftNomReflet{
  0%{background-position:180% 0}
  100%{background-position:-60% 0}
}
@media (prefers-reduced-motion:reduce){
  .confiance .bandeau-logos__piste{animation:none!important}
  .confiance .bandeau-logos__item:hover{animation:none!important}
}
/* 24/10 (Raphaël : « pas aligné à gauche ») : la bande défile dans la largeur du contenu, sous le titre,
   avec un fondu sur les deux bords. */
.confiance .enveloppe .bandeau-logos{margin-left:0;margin-right:0;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}