{# Section "Les secteurs industriels que nous servons" — réutilisable
   sur homepage + à propos.

   Pattern : section grise avec eyebrow + h2 + lead, puis marquee
   pleine largeur en pétrole avec termes Kaelia uppercase et 3
   séparateurs cyclants (diamant gold / plus / disque).

   Liste des secteurs : confirmée par TCA (batch 2026).
#}
<section class="tca-section tca-section--gray tca-reveal">
    <div class="tca-container">
        <div class="tca-section-head">
            <span class="tca-eyebrow">Nos clients</span>
            <h2>Les secteurs industriels que nous servons</h2>
            <p class="tca-lead">Depuis 1983, nous accompagnons les industriels d'Auvergne et du Massif Central qui ont besoin d'équipements mécaniques fiables et d'un service réactif. Nos clients viennent en particulier des secteurs suivants.</p>
        </div>
    </div>

    {% set sectors = ['Scieries', 'Carrières', 'Sablières', 'Centrales à béton', 'Travaux publics', 'Agricole', 'Industries', 'Agroalimentaire'] %}
    <div class="tca-sectors-marquee" role="list" aria-label="Secteurs industriels servis (défilement)">
        <div class="tca-sectors-marquee__track">
            {% for s in sectors %}
                <span class="tca-sectors-marquee__item" role="listitem">{{ s }}</span>
                <span class="tca-sectors-marquee__sep tca-sectors-marquee__sep--{{ (loop.index0 % 3) + 1 }}" aria-hidden="true">
                    {% if (loop.index0 % 3) == 0 %}
                        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2 L22 12 L12 22 L2 12 Z"/></svg>
                    {% elseif (loop.index0 % 3) == 1 %}
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" aria-hidden="true"><line x1="12" y1="4" x2="12" y2="20"/><line x1="4" y1="12" x2="20" y2="12"/></svg>
                    {% else %}
                        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="6"/></svg>
                    {% endif %}
                </span>
            {% endfor %}
            {# Duplicate pour boucle seamless #}
            {% for s in sectors %}
                <span class="tca-sectors-marquee__item" aria-hidden="true">{{ s }}</span>
                <span class="tca-sectors-marquee__sep tca-sectors-marquee__sep--{{ (loop.index0 % 3) + 1 }}" aria-hidden="true">
                    {% if (loop.index0 % 3) == 0 %}
                        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2 L22 12 L12 22 L2 12 Z"/></svg>
                    {% elseif (loop.index0 % 3) == 1 %}
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" aria-hidden="true"><line x1="12" y1="4" x2="12" y2="20"/><line x1="4" y1="12" x2="20" y2="12"/></svg>
                    {% else %}
                        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="6"/></svg>
                    {% endif %}
                </span>
            {% endfor %}
        </div>
    </div>
</section>