{% load traduction_tags config_tags cms_tags %}
<!-- Top Bar -->
<div class="bg-gray-50 text-gray-700 py-4 text-base border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-wrap items-center justify-between gap-2">
            <div class="flex items-center space-x-1">
                <a href="/" class="flex items-center space-x-3">
                    <img src="{{ settings.logo }}" alt="{{ settings.site_name }}" class="h-10 max-h-10 w-auto object-contain">
                    <span class="font-bold text-xl">{{ settings.site_name }}</span>
                </a>
            </div>
            <div class="flex items-center space-x-5">
                <a href="tel:{{ settings.phone }}" class="flex items-center hover:text-primary transition">
                    <svg class="w-7 h-7 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                    </svg>
                    <span>{{ settings.phone }}</span>
                </a>
                <a href="mailto:{{ settings.email }}" class="flex items-center hover:text-primary transition">
                    <svg class="w-7 h-7 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                    </svg>
                    <span>{{ settings.email }}</span>
                </a>
            </div>
            <div class="flex items-center space-x-4">
                {# Logo partenaire financier depuis les Settings #}
                {% if settings.financial_partner %}
                <div class="flex items-center space-x-2">
                    <span class="text-sm text-gray-500">{{ settings.topbar_partner_label }}</span>
                    <img src="{{ settings.financial_partner }}" alt="Partenaire financier" class="h-12 max-h-12 w-auto object-contain">
                </div>
                {% elif main_partner and main_partner.logo %}
                <img src="{{ main_partner.logo.url }}" alt="{{ main_partner.name }}" class="h-12 max-h-12 w-auto object-contain">
                {% endif %}
            </div>
        </div>
    </div>
</div>