{# ═══════════════════════════════════════════════════════════════════════════
   templates/partials/_cookie_banner.html.twig
   
   Bannière de consentement cookies — Conforme RGPD
   
   INTÉGRATION : Dans base.html.twig, juste avant </body> :
       {% include 'partials/_cookie_banner.html.twig' %}
   
   DÉPENDANCES :
       - CSS : public/css/cookie-consent.css
       - JS  : public/js/cookie-consent.js
   ═══════════════════════════════════════════════════════════════════════════ #}

{# ─── OVERLAY ASSOMBRI ─── #}
<div class="cookie-overlay" id="cookieOverlay"></div>

{# ─── BANNIÈRE COOKIE ─── #}
<div class="cookie-banner" id="cookieBanner" role="dialog" aria-label="Gestion des cookies" aria-modal="true">
    
    {# Barre d'accent supérieure (gradient bleu → vert NUM-ECARD) #}
    <div class="cookie-accent-bar"></div>

    <div class="cookie-inner">
        {# Icône #}
        <div class="cookie-icon" aria-hidden="true">🍪</div>

        <div class="cookie-content">
            {# Titre #}
            <div class="cookie-title">
                Gestion des cookies
                <span class="cookie-badge">RGPD</span>
            </div>

            {# Texte explicatif #}
            <p class="cookie-text">
                Nous utilisons des cookies pour améliorer votre expérience, analyser le trafic 
                et personnaliser les contenus. Vous pouvez accepter, refuser ou personnaliser 
                vos préférences à tout moment.
                <a href="{{ path('app_home') }}#cookies" class="cookie-link">Politique de confidentialité</a>
            </p>

            {# ─── BOUTONS D'ACTION ─── #}
            <div class="cookie-actions">
                <button type="button" class="cookie-btn cookie-btn--accept" id="cookieAcceptAll">
                    ✓ Tout accepter
                </button>
                <button type="button" class="cookie-btn cookie-btn--refuse" id="cookieRefuseAll">
                    ✕ Tout refuser
                </button>
                <button type="button" class="cookie-btn cookie-btn--settings" id="cookieToggleSettings">
                    Personnaliser mes choix
                </button>
            </div>
        </div>
    </div>

    {# ─── PANNEAU DE PERSONNALISATION (caché par défaut) ─── #}
    <div class="cookie-settings" id="cookieSettings">
        <h4 class="cookie-settings-title">⚙️ Paramétrer les cookies</h4>

        {# Cookie essentiel (toujours actif) #}
        <div class="cookie-option">
            <div class="cookie-option-info">
                <div class="cookie-option-label">
                    Cookies essentiels
                    <span class="cookie-required-tag">Obligatoire</span>
                </div>
                <div class="cookie-option-desc">
                    Nécessaires au fonctionnement du site (connexion, panier, sécurité). 
                    Ne peuvent pas être désactivés.
                </div>
            </div>
            <label class="cookie-toggle">
                <input type="checkbox" checked disabled data-cookie-category="essential">
                <span class="cookie-toggle-slider"></span>
            </label>
        </div>

        {# Cookies analytiques #}
        <div class="cookie-option">
            <div class="cookie-option-info">
                <div class="cookie-option-label">Cookies analytiques</div>
                <div class="cookie-option-desc">
                    Nous aident à comprendre comment vous utilisez le site 
                    (pages visitées, durée). Données anonymisées via Google Analytics.
                </div>
            </div>
            <label class="cookie-toggle">
                <input type="checkbox" id="cookieAnalytics" data-cookie-category="analytics">
                <span class="cookie-toggle-slider"></span>
            </label>
        </div>

        {# Cookies marketing #}
        <div class="cookie-option">
            <div class="cookie-option-info">
                <div class="cookie-option-label">Cookies marketing</div>
                <div class="cookie-option-desc">
                    Permettent d'afficher des publicités pertinentes et de mesurer 
                    l'efficacité des campagnes publicitaires.
                </div>
            </div>
            <label class="cookie-toggle">
                <input type="checkbox" id="cookieMarketing" data-cookie-category="marketing">
                <span class="cookie-toggle-slider"></span>
            </label>
        </div>

        {# Bouton enregistrer #}
        <div class="cookie-settings-save">
            <button type="button" class="cookie-btn cookie-btn--accept" id="cookieSavePreferences">
                Enregistrer mes préférences
            </button>
        </div>
    </div>
</div>

{# ─── BOUTON FLOTTANT pour ré-ouvrir les préférences (après choix) ─── #}
<button type="button" 
        class="cookie-reopen-btn" 
        id="cookieReopenBtn" 
        aria-label="Gérer les cookies"
        title="Gérer les cookies"
        style="display: none;">
    🍪
</button>