{# Theme toggle (light/dark) — shared pill component for header and footer #}
{# variant: 'header' | 'footer' | 'light' — controls color scheme only, markup is identical #}
<div class="theme-toggle theme-toggle--{{ variant|default('header') }}">
    <button class="theme-toggle__btn" data-theme="light" aria-label="{{ app.request.locale == 'fr' ? 'Thème clair' : 'Light theme' }}">
        {% include 'components/_icon.html.twig' with {name: 'sun', class: 'theme-toggle__icon theme-toggle__icon--sun'} only %}
    </button>
    <button class="theme-toggle__btn" data-theme="dark" aria-label="{{ app.request.locale == 'fr' ? 'Thème sombre' : 'Dark theme' }}">
        {% include 'components/_icon.html.twig' with {name: 'snow', class: 'theme-toggle__icon theme-toggle__icon--snow'} only %}
    </button>
</div>