{% extends "base.html.twig" %}
{% block style %}
{{ parent() }}
{% include "css/une-page-thematique-critical-css.html.twig" %}
{% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'evenementavenir_css'} %}
{% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'splide_css'} %}
{% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'articles_css'} %}
{% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'previews_css'} %}
{% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'preview_thematique_css'} %}
{% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'sns_icons_css'} %}
{% if content.main_content|length > 0 %}
{% for content in content.main_content %}
{% if content.type == "fiche_thematique_section" %}
{% if content.content|length > 0 %}
{% for child_content in content.content %}
{% if child_content.type == "media" %}
{% if child_content.select == "youtube_link" %}
{% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'youtube_css'} %}
{% endif %}
{% endif %}
{% if child_content.type == "citation" %}
{% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'citation_css'} %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% if content.header_img is defined and content.header_img is not empty %}
<link rel="preload" fetchpriority="high" as="image" href="{{ content.header_img.formats['1000x.webp'] }}" type="image/webp">
{% endif %}
{% endblock %}
{% block content %}
{% if content.color is defined and content.color is not empty %}
{% set background_color = content.color %}
{% else %}
{% set background_color = "#354161" %}
{% endif %}
{% if content.fil_ariane %}
{% include "blocks/breadcrumb-normal.html.twig" %}
{% endif %}
<div class="main-container w100 plr-1em">
<div class="content fdc fiche-thematique">
<div class="{% if content.header_img is defined and content.header_img is not empty %}main-title{% else %}small-main-title{% endif %} dflex aic jcc prelative br8">
{% if content.header_img is defined and content.header_img is not empty %}
{# pas de loading=lazy ici car c'est le LPC (largest painted content) qui apparaît dès l'arrivée sur le site #}
<img src="{{ content.header_img.formats['1000x.webp'] }}" srcset="{{ content.header_img.formats['300x.webp'] }} 300w, {{ content.header_img.formats['600x.webp'] }} 600w, {{ content.header_img.formats['1000x.webp'] }} 1000w" sizes="1000px" alt="{{ content.header_img | copyright_or_description_or_title }}" width="{{ content.header_img.fileVersion.properties.width }}" height="{{ content.header_img.fileVersion.properties.height }}">
{% endif %}
<div class="zi1">
<h1 class="center{% if content.header_img is defined and content.header_img is not empty %} cwhite fiche-thematique-title{% endif %}">{{ content.page_title }}</h1>
</div>
{% if content.header_img is defined and content.header_img is not empty %}
<div class="background-color" style="background: {{ background_color }}"></div>
{% endif %}
</div>
<div class="dflex jcsb lh28 fwwrap">
<div>
{% if content.header_img is defined and content.header_img is not empty and content.header_img.credits is defined and content.header_img.credits is not empty %}
<div class="cgrey fs12 lh16 credit mt-8px">© Crédit Photo
{{ content.header_img.credits }}</div>
{% endif %}
<div class="date cgrey">
{% if authored is defined and authored is not empty %}
Publié le
{{ authored|format_datetime('short', 'none') }}
{% endif %}
</div>
</div>
<div class="taright">
{% include "articles-blocks/share-buttons.html.twig" with {url: content.url} %}
</div>
</div>
<div class="blocks w100 dflex fiche-thematique jcsb mt-20px">
<div class="main-content mb-40px pr-1em w100">
{% if content.chapo is defined and content.chapo is not empty %}
<div class="mt-20px fw500 fs20 text cgrey">{{ content.chapo|raw }}</div>
{% endif %}
{% if content.main_content is defined and content.main_content is not empty and content.main_content|length > 0 %}
{% for data in content.main_content %}
{% if data.type == "fiche_thematique_section" %}
{% include "articles-blocks/articles-content.html.twig" with {h2_in_list : true, main_h2_title: data.main_title, mobile_gray_theme: "thematique-mobile-gray"} %}
{% endif %}
{% endfor %}
{% endif %}
</div>
{% include "pages/aside-fiche-thematique.html.twig" %}
</div>
{% if content.main_content is defined and content.main_content is not empty and content.main_content|length > 0 %}
{% for data in content.main_content %}
{% if data.type == "linked_with" %}
{% include "articles-blocks/linked-with.html.twig" %}
{% endif %}
{% endfor %}
{% endif %}
<section class="evenementsavenir fiche-thematique mt-40px mb-40px prelative">
<h2 class="fs30 lh36 fw400">Découvrez nos derniers événements</h2>
{{ render(controller('App\\Controller\\Website\\ArticlesController::getIncomingEvents')) }}
</section>
</div>
</div>
{% endblock %}
{% block javascripts %}
{% if content.main_content|length > 0 %}
{% for content in content.main_content %}
{% if content.type == "fiche_thematique_section" %}
{% if content.content|length > 0 %}
{% for child_content in content.content %}
{% if child_content.type == "media" %}
{% if child_content.select == "youtube_link" %}
{{ encore_entry_script_tags('lite-youtube') }}
{{ encore_entry_script_tags('youtube_defer') }}
{% endif %}
{% endif %}
{% if child_content.type == "photo_report" %}
{{ encore_entry_script_tags('splide') }}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{{ encore_entry_script_tags('open_fiche_them_section') }}
{{ encore_entry_script_tags('splide') }}
{{ parent() }}
{% endblock %}