{# Bannière publicitaire Izibrick pour les sites avec plan Starter gratuit #}
<div class="izibrick-ad-banner" style="
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 20px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1000;
">
    <div style="max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;">
        <span style="display: flex; align-items: center; gap: 8px;">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
                <path d="M12 2L2 7L12 12L22 7L12 2Z" fill="white" fill-opacity="0.9"/>
                <path d="M2 17L12 22L22 17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 12L12 17L22 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <strong style="font-weight: 600;">Site créé avec Izibrick</strong>
        </span>
        <span style="opacity: 0.9;">•</span>
        <span style="opacity: 0.95;">Créez votre site professionnel en quelques clics</span>
        <a href="{{ app.request.scheme }}://{{ base_host }}/price"
           style="
               background: white;
               color: #667eea;
               padding: 6px 16px;
               border-radius: 20px;
               text-decoration: none;
               font-weight: 600;
               display: inline-flex;
               align-items: center;
               gap: 6px;
               transition: all 0.3s ease;
               box-shadow: 0 2px 8px rgba(0,0,0,0.15);
           "
           onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(0,0,0,0.2)';"
           onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 8px rgba(0,0,0,0.15)';"
           target="_blank"
           rel="noopener">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            Créer mon site gratuitement
        </a>
    </div>
</div>

{# Version mobile optimisée #}
<style>
    @media (max-width: 768px) {
        .izibrick-ad-banner {
            font-size: 13px;
            padding: 12px 15px;
        }
        .izibrick-ad-banner > div {
            flex-direction: column;
            gap: 8px;
        }
    }
</style>