fix: figcaption dans figure, loop swiper, max-height images investigation

- investigation.php : figcaption déplacé à l'intérieur des <figure>
  (correction HTML + meilleure capture par la lightbox)
- swipers.js : loop: true sur toutes les galeries
- _investigation_content.scss : max-height 75vh sur les images
- _figures.scss : reformatage indentation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/css/components/_figures.scss

@@ -1,26 +1,23 @@
-
 @mixin figure-16-9 {
   & > figure {
     aspect-ratio: 16/9;
     display: flex;
     overflow: hidden;
-        img, picture{
+    img,
+    picture {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
-
     }
   }
 }
 
-
+figcaption,
-  figcaption, .caption{
+.caption {
-        font-size: var(--fs-small);
+  font-size: var(--fs-small) !important;
   color: var(--color-txt-light);
   font-weight: 500;
   line-height: 1.1;
   margin: calc(var(--spacing) * 0.5) 0 !important;
 }
-
-

assets/css/style.css

@@ -939,8 +939,9 @@ button.sort[data-sort-type=up] .arrow {
     opacity: 0 !important;
   }
 }
-figcaption, .caption {
+figcaption,
-  font-size: var(--fs-small);
+.caption {
+  font-size: var(--fs-small) !important;
   color: var(--color-txt-light);
   font-weight: 500;
   line-height: 1.1;
@@ -1651,7 +1652,8 @@ figcaption, .caption {
   display: flex;
   overflow: hidden;
 }
-.card--article > figure img, .card--article > figure picture {
+.card--article > figure img,
+.card--article > figure picture {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
@@ -1818,7 +1820,8 @@ figcaption, .caption {
   display: flex;
   overflow: hidden;
 }
-.card--package > figure img, .card--package > figure picture,
+.card--package > figure img,
+.card--package > figure picture,
 .card--article-small > figure img,
 .card--article-small > figure picture {
   width: 100%;
@@ -2032,7 +2035,8 @@ figcaption, .caption {
   display: flex;
   overflow: hidden;
 }
-.card--block > figure img, .card--block > figure picture {
+.card--block > figure img,
+.card--block > figure picture {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
@@ -2405,6 +2409,80 @@ figcaption, .caption {
   justify-content: center;
 }
 
+#lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--z-header) + 10);
+  background-color: rgba(0, 0, 0, 0.92);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+body.lightbox-open #lightbox {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+#lightbox-close {
+  position: absolute;
+  top: var(--padding-body);
+  right: var(--padding-body);
+  background: none;
+  border: none;
+  color: var(--color-txt);
+  cursor: pointer;
+  padding: 8px;
+  z-index: 1;
+  line-height: 0;
+}
+#lightbox-close svg {
+  width: 30px;
+  fill: var(--color-txt);
+  transition: fill 0.2s ease;
+}
+#lightbox-close:hover svg {
+  fill: var(--grey-400);
+}
+
+#lightbox-swiper {
+  width: 90vw;
+}
+#lightbox-swiper .swiper-slide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+#lightbox-swiper .swiper-slide figure {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: default;
+}
+#lightbox-swiper .swiper-slide figure img {
+  max-width: 90vw;
+  max-height: calc(90dvh - 100px);
+  width: auto;
+  height: auto;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+#lightbox-swiper .swiper-slide figure figcaption {
+  margin-top: calc(var(--spacing) * 0.5);
+  color: var(--color-txt-light);
+  font-size: var(--fs-small);
+  text-align: center;
+}
+
+@media (min-width: 1080px) {
+  figure[data-lightbox] {
+    cursor: zoom-in;
+  }
+}
 .slider-before-after {
   width: 100%;
   max-width: 700px;
@@ -3434,7 +3512,8 @@ main .page__header ul.list-nav li:hover {
   display: flex;
   overflow: hidden;
 }
-.main__single .page__header > figure img, .main__single .page__header > figure picture {
+.main__single .page__header > figure img,
+.main__single .page__header > figure picture {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
@@ -3521,6 +3600,11 @@ main .page__header ul.list-nav li:hover {
 #investigation__content .subsection-txt {
   max-width: var(--max-w-content);
 }
+#investigation__content img {
+  max-height: 75vh;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
 @media screen and (min-width: 768px) {
   #investigation__content .section-content {
     margin-bottom: calc(var(--spacing) * 4);

assets/css/template/_investigation_content.scss

@@ -20,6 +20,11 @@
     max-width: var(--max-w-content);
   }
 
+  img {
+    max-height: 75vh;
+    object-fit: cover;
+  }
+
   @media #{$small-up} {
     .section-content {
       margin-bottom: calc(var(--spacing) * 4);

assets/js/swipers.js

@@ -18,6 +18,7 @@ export function initSwipers(container = document) {
       slidesPerView: 1,
       spaceBetween: 20,
       speed: 600,
+      loop: true,
 
       // Touch/Swipe settings
       touchRatio: 1,

site/templates/investigation.php

@@ -56,12 +56,12 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
                 'srcsetName' => 'cover-hero',
                 'lazy'       => false,
             ]) ?>
-        </figure>
         <?php if ($page->heroCaption()->isNotEmpty()): ?>
             <figcaption><?= $page->heroCaption()->inline() ?></figcaption>
         <?php elseif ($cover->caption()->isNotEmpty()): ?>
             <figcaption><?= $cover->caption() ?></figcaption>
         <?php endif ?>
+        </figure>
     </div>
 
 <?php endif ?>
@@ -212,10 +212,10 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
                                             'srcsetName' => 'body-full',
                                             'lazy'       => true,
                                         ]) ?>
-                                    </figure>
                                     <?php if ($image->caption()->isNotEmpty()): ?>
-                                        <p class="caption"><?= $image->caption()->html() ?></p>
+                                        <figcaption><?= $image->caption()->html() ?></p>
                                     <?php endif ?>
+                                    </figure>
                                 <?php endif ?>
                             </div>
 
@@ -261,10 +261,10 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
                                                     'srcsetName' => 'body-half',
                                                     'lazy'       => true,
                                                 ]) ?>
-                                            </figure>
                                             <?php if ($image->caption()->isNotEmpty()): ?>
-                                                <p class="caption"><?= $image->caption()->html() ?></p>
+                                                <figcaption><?= $image->caption()->html() ?></figcaption>
                                             <?php endif ?>
+                                            </figure>
                                         <?php endif ?>
                                     </div>