Grille projet : images en pleine largeur de colonne servies en HD

Dans la grille d'images de la fiche projet, la dernière image d'un
total impair s'étale sur toute la largeur de colonne (grid-column:
span 2) en tablette/desktop. Elle était chargée en SD 640px, donc
pixelisée. Ajout d'un srcset (@Nx) avec sizes adapté à la largeur
d'affichage réelle : 100vw pour l'image pleine largeur, sinon
(min-width: 576px) 50vw, 100vw.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

user/themes/figureslibres-v2/templates/reader.html.twig

@@ -39,13 +39,15 @@
       </div>
 
       <div id="project-images-grid">
-        {% for image in page.media.images %}
+        {# images affichées dans la grille : toutes, ou toutes sauf la 1re (en-tête) s'il n'y a pas de vidéo #}
-            {# quand l'en-tête est une vidéo, la 1re image n'est pas affichée ailleurs : on l'inclut dans la grille #}
+        {% set grid_images = cover_video != null ? page.media.images : page.media.images|slice(1) %}
-            {% if cover_video != null or image != page.media.images | first %}
+        {% set grid_count = grid_images|length %}
+        {% for image in grid_images %}
+            {# dernière image d'un total impair : elle s'étale sur toute la largeur de colonne (grid-column: span 2) → sizes 100vw #}
+            {% set full_width = loop.last and grid_count is odd %}
             <figure class="{{ class_suffix }}">
-                <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ image.url }}" alt="{{ page.title }}" class="lazy loader project-image">
+              <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ image.url }}"{% if image.srcset %} data-srcset="{{ image.srcset }}" data-sizes="{{ full_width ? '100vw' : '(min-width: 576px) 50vw, 100vw' }}"{% endif %} alt="{{ page.title }}" class="lazy loader project-image">
             </figure>
-            {% endif %}
         {% endfor %}
       </div>