{% if articles|length > 0 %}
        {% for key, article in articles %}
            {%  if article.isActif %}
    <section class="article">
            <div class="textArticle">
                <div class="section-title">
                    <h1 class="sectionTitre">{{ article.translations[app.request.locale].name|default('')|replaceCoord() }}</h1>
                </div>
                <div class="descArt">{{ article.translations[app.request.locale].description|default('')|replaceCoord(article.translations[app.request.locale])|replaceSommaire(article.translations[app.request.locale])|replaceAlbum|replaceBeforeAfter|raw }}</div>
                {% if article.documents|length > 0 %}
                <div class="row padding">
                    {% for pdf in article.documents %}
                        <div class="col-2">
                            <a href="{{ asset(document ~ pdf.image) }}" target="_blank" class="center"><img src="{{ asset(elemGraph ~ getContent()['main']['pdf']) }}" loading="lazy" alt="{{ pdf.translations[app.request.locale].name|default('') }}" class="d-block mx-auto">{{ pdf.translations[app.request.locale].name|default('') }}</a>
                        </div>
                    {% endfor %}
                </div>
                {% endif %}
                {% if article.videos|length > 0 %}
                <div class="row padding gy-4 center justify-content-center">
                    {% for video in article.videos %}
                    <div class="col-xl-4 col-md-6 col-xs-12">
                        <div class="videos-name">{{ video.name }}</div>
                        <div class="embed-responsive embed-responsive-4by3">
                            {{ video.iframe|raw }}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
    </section>
            {% endif %}
        {% endfor %}
{% endif %}