/* === Barathonien – Marquee ===================================== */

/* Container global des 3 lignes */
.bar-marquee {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    overflow: hidden;
    padding-top: 40px;
    /* ton petit espace au-dessus des lignes */
}

/* Une ligne (1, 2 ou 3) */
.bar-marquee__row {
    position: relative;
    overflow: hidden;
}

/* Piste animée qui contient 2 groupes identiques */
.bar-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    /* force l’accélération GPU */
    backface-visibility: hidden;
}

/* Groupe de texte : le JS en crée 1, puis le clone une 2ᵉ fois */
.bar-marquee__group {
    display: flex;
    flex-shrink: 0;
}

/* Élément texte */
.bar-marquee__item {
    flex-shrink: 0;
    padding-right: 3rem;
    /* espace entre les répétitions */
    white-space: nowrap;

    font-family: "Tholes", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 6vw, 80px);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #ffffff;
}

/* Lignes vers la gauche : vitesse contrôlée via la variable CSS injectée depuis le shortcode */
.bar-marquee__row--left .bar-marquee__track {
    animation: bar-marquee-left var(--bar-marquee-speed, 48s) linear infinite;
}

/* Lignes vers la droite : idem */
.bar-marquee__row--right .bar-marquee__track {
    animation: bar-marquee-right var(--bar-marquee-speed, 60s) linear infinite;
}

/* Keyframes – boucle parfaite (0% et 100% identiques) */
@keyframes bar-marquee-left {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes bar-marquee-right {
    from {
        transform: translate3d(-50%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

/* OPTIONNEL : si tu veux que la section Elementor qui contient
     le shortcode aligne le contenu en haut seulement quand tu lui
     mets la classe CSS "bar-marquee-section" dans Elementor. */
.bar-marquee-section>.elementor-container {
    align-items: flex-start;
}

@media (prefers-reduced-motion: reduce) {
    .bar-marquee__track {
      animation: none !important;
      transform: none !important;
    }
  }