<section id="services-libres" class="fediverse">
    <div class="section-container">
        <h2>{{ t.services.section_title }} <span class="accent-text">{{ t.services.section_title_accent }}</span></h2>
        <p class="section-subtitle">
            {{ t.services.section_subtitle }}
        </p>

        <div class="services-grid">
            {% for service in t.services.items %}
            <div class="service-card">
                <div class="service-icon">{{ service.icon }}</div>
                <h3>{{ service.name }}</h3>
                <div class="service-platform">{{ service.platform }}</div>
                <p class="service-description">
                    {{ service.description }}
                </p>
                <a href="{{ service.url }}" target="_blank" class="service-link">
                    {{ service.linkText }} →
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
