<section id="faq" class="faq">
    <div class="section-container">
        <h2>Questions <span class="accent-text">fréquentes</span></h2>
        <p class="section-subtitle">
            Tout ce que vous devez savoir pour commencer votre transition numérique
        </p>

        <div class="faq-container">
            {% for item in faq %}
            <div class="faq-item">
                <button class="faq-question" onclick="this.parentElement.classList.toggle('active')">
                    <span>{{ item.question }}</span>
                    <span class="faq-icon">+</span>
                </button>
                <div class="faq-answer">
                    <p>{{ item.answer }}</p>
                </div>
            </div>
            {% endfor %}
        </div>

        <div class="faq-footer">
            <p>
                Vous avez d'autres questions ?
            </p>
            <a href="#contact" class="btn btn-secondary">
                Contactez-nous →
            </a>
        </div>
    </div>
</section>
