Corrections index projets et diaporama

- Vidéo en média d'en-tête de la fiche projet quand elle existe
  (comme la vignette d'index), sinon première image. La grille inclut
  la 1re image quand l'en-tête est une vidéo pour ne pas la perdre.
- Diaporama : images en HD (srcset @Nx via jquery.lazy) au lieu de la
  version SD 640px ; affichage plein écran sans rognage (object-fit
  contain, dimensions viewport).
- Diaporama : clic sur le fond ferme, navigation clavier (flèches +
  Échap). Indexation robuste par URL (data-src/src) corrigeant
  l'ouverture systématique sur l'image d'en-tête.
- Cartes projet mobile/tablette : titre ferré à gauche sous l'image
  au lieu d'être centré.

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

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

@@ -9,8 +9,13 @@
         </h2>
       </div>
       <a href="{{ page.parent.parent.url }}"><div id="close-project" class="picto" data-src="{{ url('theme://images/pictos/cross.svg') }}" aria-hidden="true"></div></a>
+      {% set cover_video = page.media.videos|first.url %}
       <figure id="cover-image-mobile" class="{{ class_suffix }}">
-        <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ page.media.images|first.url }}" alt="{{ page.title }}" class="lazy loader">
+        {% if cover_video != null %}
+          <video autoplay muted loop playsinline src="{{ cover_video }}" type="video/mp4"></video>
+        {% else %}
+          <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ page.media.images|first.url }}" alt="{{ page.title }}" class="lazy loader">
+        {% endif %}
       </figure>
       <div id="info-project" class="info-project-{{ class_suffix }}">
         <h2 id="main-project-title">{{ page.title }}</h2>
@@ -22,7 +27,11 @@
         </div>
       </div>
       <figure id="cover-image" class="{{ class_suffix }}">
-        <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ page.media.images|first.url }}" alt="{{ page.title }}" class="lazy loader">
+        {% if cover_video != null %}
+          <video autoplay muted loop playsinline src="{{ cover_video }}" type="video/mp4"></video>
+        {% else %}
+          <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ page.media.images|first.url }}" alt="{{ page.title }}" class="lazy loader">
+        {% endif %}
       </figure>
       <hr>
       <div id="project-description">
@@ -31,7 +40,8 @@
 
       <div id="project-images-grid">
         {% for image in page.media.images %}
-            {% if image != page.media.images | first %}
+            {# quand l'en-tête est une vidéo, la 1re image n'est pas affichée ailleurs : on l'inclut dans la grille #}
+            {% if cover_video != null or image != page.media.images | first %}
               <figure class="{{ class_suffix }}">
                 <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ image.url }}" alt="{{ page.title }}" class="lazy loader project-image">
               </figure>