{# Widget « Réseaux sociaux » — s'appuie sur le gabarit partagé #}
<div class="section section-social-links">
    {% if title or subtitle %}
        <div class="social-links-heading social-links-heading--{{ align }}">
            {% if title %}<h2 class="social-links-title">{{ title }}</h2>{% endif %}
            {% if subtitle %}<p class="social-links-subtitle">{{ subtitle }}</p>{% endif %}
        </div>
    {% endif %}

    {% if links is empty %}
        {# Rien de renseigné : on ne laisse pas un trou silencieux dans la page. #}
        <p class="social-links-empty">
            Aucun réseau social n'est renseigné. Ajoutez-les dans
            <strong>Paramètres généraux → Réseaux sociaux</strong>.
        </p>
    {% else %}
        {% include 'sections/partials/social-links.html.twig' with {
            links: links,
            variant: variant,
            shape: shape,
            size: size,
            colorMode: colorMode,
            align: align,
            label: title|default('Réseaux sociaux')
        } only %}
    {% endif %}
</div>

<style>
    .section-social-links {
        margin: 0 auto;
        padding: 0 20px;
    }

    .social-links-heading {
        margin-bottom: var(--spacing-md, 1.5rem);
    }

    .social-links-heading--center { text-align: center; }
    .social-links-heading--end    { text-align: right; }

    .social-links-title {
        margin: 0 0 0.5rem;
        font-size: var(--heading-h3, 1.75rem);
    }

    .social-links-subtitle {
        margin: 0;
        color: var(--color-text-light, #64748b);
        font-size: var(--text-lead, 1.125rem);
    }

    .social-links-empty {
        padding: 1.25rem;
        border: 2px dashed var(--color-border, #e2e8f0);
        border-radius: var(--radius-lg, 0.75rem);
        color: var(--color-text-light, #64748b);
        text-align: center;
    }
</style>