/* ==========================================================================
   Bandeau défilant Habachiya — seul élément sans équivalent natif Flatsome.
   Les couleurs et la vitesse viennent des variables posées en style inline
   par le shortcode, donc réglables depuis UX Builder sans toucher au CSS.
   ========================================================================== */

.hb-marquee {
  --hbm-bg:     #1F1726;
  --hbm-color:  #F3EFF6;
  --hbm-accent: #D08A1E;
  --hbm-speed:  38s;

  overflow: hidden;
  background: var(--hbm-bg);
  padding: 22px 0;
}

.hb-marquee .hb-track {
  display: flex;
  gap: 56px;
  width: max-content;
  font-size: 17px;
  line-height: 1.4;
  color: var(--hbm-color);
  white-space: nowrap;
  animation: hbMarquee var(--hbm-speed) linear infinite;
}

.hb-marquee .hb-track > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hb-marquee .hb-sep { color: var(--hbm-accent); }

@keyframes hbMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 849px) {
  .hb-marquee { padding: 16px 0; }
  .hb-marquee .hb-track { font-size: 15px; gap: 36px; }
}

/* Accessibilité : pas de mouvement si l'utilisateur l'a désactivé —
   le bandeau devient alors une bande défilable à la main. */
@media (prefers-reduced-motion: reduce) {
  .hb-marquee { overflow-x: auto; }
  .hb-marquee .hb-track { animation: none; }
}