{# Bandeau d'annonce global (campagnes gérées dans /gestion/bandeaux).
   Rendu uniquement si une campagne est active — texte échappé par Twig,
   fermeture mémorisée par session (sessionStorage). #}
{% set vaBanner = active_banner() %}
{% if vaBanner %}
    <div id="va-banner"
         class="va-banner va-banner--{{ vaBanner.type.value }}{{ vaBanner.mode.value == 'defilant' ? ' va-banner--defilant' }}"
         data-banner-id="{{ vaBanner.id }}"
         role="region" aria-label="Annonce">
        <div class="va-banner-inner">
            {% if vaBanner.mode.value == 'defilant' %}
                <div class="va-banner-track">
                    <span class="va-banner-msg">{{ vaBanner.message }}</span>
                    <span class="va-banner-msg" aria-hidden="true">{{ vaBanner.message }}</span>
                </div>
            {% else %}
                <p class="va-banner-msg">{{ vaBanner.message }}</p>
            {% endif %}
        </div>
        <button type="button" class="va-banner-close" aria-label="Fermer l'annonce">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M5 5l14 14M19 5L5 19"/></svg>
        </button>
    </div>
    <script src="{{ asset('scripts/ds-v2-banner.js') }}"></script>
    <script>
    (function () {
        'use strict';
        var banner = document.getElementById('va-banner');
        var key = 'vaBannerDismiss-' + banner.getAttribute('data-banner-id');
        try {
            if (sessionStorage.getItem(key)) { banner.remove(); return; }
        } catch (e) {}
        var apply = function () {
            document.body.classList.add('has-va-banner');
            document.documentElement.style.setProperty('--va-banner-h', banner.offsetHeight + 'px');
        };
        apply();
        if (window.vaBannerMarquee) { window.vaBannerMarquee(banner); }
        window.addEventListener('resize', function () {
            if (document.body.contains(banner)) { apply(); }
        });
        // La bande fait 95 % de la largeur (soudée au header) : un message long
        // peut passer sur deux lignes une fois les polices chargées. On remesure
        // pour que le header descende de la bonne hauteur.
        if (document.fonts && document.fonts.ready) {
            document.fonts.ready.then(function () {
                if (document.body.contains(banner)) { apply(); }
            });
        }
        banner.querySelector('.va-banner-close').addEventListener('click', function () {
            try { sessionStorage.setItem(key, '1'); } catch (e) {}
            banner.remove();
            document.body.classList.remove('has-va-banner');
            document.documentElement.style.setProperty('--va-banner-h', '0px');
        });
    })();
    </script>
{% endif %}