{#
 # ============================================================================
 # ORGANISM: MARQUEE
 # ============================================================================
 #
 # Bande défilante horizontale (stats, chiffres clés, labels).
 # Pause au survol. Duplique automatiquement le contenu pour un loop infini.
 # Rendu côté client via JS.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre | Type   | Défaut         | Description                        |
 # |-----------|--------|----------------|------------------------------------|
 # | items     | array  | []             | [{value: '80+', label: 'formateurs'}] |
 # | bgColor   | string | '#1281E4'      | Couleur de fond (hex)              |
 # | id        | string | 'marquee-track'| ID du conteneur (pour le JS)       |
 # | class     | string | ''             | Classes additionnelles             |
 #
 # ============================================================================
 # JAVASCRIPT REQUIS
 # ============================================================================
 #
 # Le HTML de la piste est généré par JS (passé depuis le template parent)
 # via document.getElementById(id) pour permettre la duplication.
 # Exemple dans le bloc javascripts :
 #
 #   var items = [{v:'80+',l:'formateurs'}, ...];
 #   var mq = document.getElementById('marquee-track');
 #   var html = items.map(s => '<div style="...">'+s.v+'</div>...').join('');
 #   mq.innerHTML = html + html;
 #
 # ============================================================================
 #}

{% set items   = items   ?? [] %}
{% set bgColor = bgColor ?? '#1281E4' %}
{% set id      = id      ?? 'marquee-track' %}
{% set class   = class   ?? '' %}

<style>
    #{{ id }} {
        display: flex;
        align-items: center;
        gap: 56px;
        padding: 28px 0;
        animation: marqueeScroll 22s linear infinite;
        white-space: nowrap;
    }
    #{{ id }}:hover { animation-play-state: paused; }
    @keyframes marqueeScroll { to { transform: translateX(-50%); } }
</style>

<div class="overflow-hidden {{ class }}" style="background: {{ bgColor }};" aria-hidden="true">
    <div id="{{ id }}"></div>
</div>