From 91ec8b5a5258a9a18c0bea8b9b2856a5e1659deb Mon Sep 17 00:00:00 2001
From: hugo LAMY <hugo.lamy@oskey.io>
Date: Sun, 15 Feb 2026 17:59:43 +0100
Subject: [PATCH] video and images ok

---
 www/css/styles.css      | 33 +++++++++++++++++++++++----------
 www/manifestations.html | 29 +++++++++++++++--------------
 2 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/www/css/styles.css b/www/css/styles.css
index 6e64088..1ad1368 100644
--- a/www/css/styles.css
+++ b/www/css/styles.css
@@ -65,7 +65,10 @@ body {
   float: left;
   height: 41px;
   width: 180px;
-  font-family: arial-bold, Arial Bold, sans-serif;
+  font-family:
+    arial-bold,
+    Arial Bold,
+    sans-serif;
   font-weight: 900;
   color: #cc3300;
   font-size: 18px;
@@ -73,14 +76,20 @@ body {
   margin-left: 43px;
 }
 .menu a {
-  font-family: arial-bold, Arial Bold, sans-serif;
+  font-family:
+    arial-bold,
+    Arial Bold,
+    sans-serif;
   font-weight: 900;
   text-decoration: none;
   color: #000000;
 }
 
 .menu a:hover {
-  font-family: arial-bold, Arial Bold, sans-serif;
+  font-family:
+    arial-bold,
+    Arial Bold,
+    sans-serif;
   font-weight: 900;
   text-decoration: none;
   color: #cc3300;
@@ -746,20 +755,24 @@ adresse1 td {
 }
 
 /**
- * visible invisible 3
+ * manifestation video poster
  */
-.video.visible-invisible-3 {
+.video.manifestation_poster {
   position: relative;
-  width: 480px; /* Match poster width */
-  height: 342.85px;
   background: black;
+  height: auto;
 }
-.video.visible-invisible-3 video {
+.video.manifestation_poster video {
   max-height: 100%;
   max-width: 100%;
-  object-fit: contain; /* Ensures black bars around the video */
+  object-fit: contain;
+  object-position: top;
 }
-.images.visible-invisible-3 {
+
+/**
+ * manifestations images flex
+ */
+.images.manifestation_flex {
   display: flex;
   justify-content: space-between;
 }
diff --git a/www/manifestations.html b/www/manifestations.html
index 8d8486e..0f79e81 100644
--- a/www/manifestations.html
+++ b/www/manifestations.html
@@ -359,10 +359,11 @@
                 <div class="Scroller-Container">
                   <!-- Start nouveau-->
 
-                  <!-- debut Un monde en Soi -->
-                  <div class="video un-monde-en-soi">
+                  <!-- debut un-monde-en-soi -->
+                  <div class="video manifestation_poster">
                     <video
                       width="480"
+                      height="485"
                       poster="images/manifestations/18_un-monde-en-soi/un-monde-en-soi_poster.jpg"
                       controls
                     >
@@ -372,12 +373,12 @@
                       />
                     </video>
                   </div>
-                  <div class="images un-monde-en-soi">
+                  <div class="images manifestation_flex">
                     <div class="vignette">
                       <a
                         href="images/manifestations/18_un-monde-en-soi/un-monde-en-soi_1-Christophe-Bogdan.jpg"
                         rel="lightbox[un-monde-en-soi]"
-                        title="Vue de l’exposition"
+                        title="1 Christophe Bogdan"
                         ><img
                           src="images/manifestations/18_un-monde-en-soi/un-monde-en-soi_1-Christophe-Bogdan.jpg"
                           alt="Image 1 Christophe Bogdan"
@@ -390,7 +391,7 @@
                       <a
                         href="images/manifestations/18_un-monde-en-soi/un-monde-en-soi_2-Jerome-Bouchez.jpg"
                         rel="lightbox[un-monde-en-soi]"
-                        title="Vue de l’exposition"
+                        title="2 Jerome Bouchez"
                         ><img
                           src="images/manifestations/18_un-monde-en-soi/un-monde-en-soi_2-Jerome-Bouchez.jpg"
                           alt="Image 2 Jerome Bouchez"
@@ -403,7 +404,7 @@
                       <a
                         href="images/manifestations/18_un-monde-en-soi/un-monde-en-soi_3-Rodolph-Baudouin.jpg"
                         rel="lightbox[un-monde-en-soi]"
-                        title="Vue de l’exposition"
+                        title="3 Rodolph Baudouin"
                         ><img
                           src="images/manifestations/18_un-monde-en-soi/un-monde-en-soi_3-Rodolph-Baudouin.jpg"
                           alt="Image 3 Rodolph Baudouin"
@@ -416,7 +417,7 @@
                       <a
                         href="images/manifestations/18_un-monde-en-soi/un-monde-en-soi_4-Sibel-Ceylan--Konstantinos-Berdeklis.jpg"
                         rel="lightbox[un-monde-en-soi]"
-                        title="les artistes organisateurs"
+                        title="4 Sibel Ceylan - Konstantinos Berdeklis"
                         ><img
                           src="images/manifestations/18_un-monde-en-soi/un-monde-en-soi_4-Sibel-Ceylan--Konstantinos-Berdeklis.jpg"
                           alt="Image 4 Sibel Ceylan - Konstantinos Berdeklis"
@@ -429,24 +430,23 @@
                       <a
                         href="images/manifestations/18_un-monde-en-soi/un-monde-en-soi_5-Stephane-Moreaux.jpg"
                         rel="lightbox[un-monde-en-soi]"
-                        title="Vue de l’exposition"
+                        title="5 Stéphane-Moreaux"
                         ><img
                           src="images/manifestations/18_un-monde-en-soi/un-monde-en-soi_5-Stephane-Moreaux.jpg"
-                          alt="Image 5 Stéphane-Moreaux"
+                          alt="Image 5 Stéphane-Moreaux"
                           width="70"
                           height="70"
                           border="0"
                       /></a>
                     </div>
-                    </div>
                     <div class="vignette">
                       <a
                         href="images/manifestations/18_un-monde-en-soi/un-monde-en-soi_6-Vincent-Pandelle.jpg"
                         rel="lightbox[un-monde-en-soi]"
-                        title="Vue de l’exposition"
+                        title="6 Vincent Pandellé"
                         ><img
                           src="images/manifestations/18_un-monde-en-soi/un-monde-en-soi_6-Vincent-Pandelle.jpg"
-                          alt="Image 5 Vincent-Pandelle"
+                          alt="Image 6 Vincent Pandellé"
                           width="70"
                           height="70"
                           border="0"
@@ -473,9 +473,10 @@
                   <!-- fin un-monde-en-soi -->
 
                   <!-- debut visible-invisible 3 -->
-                  <div class="video visible-invisible-3">
+                  <div class="video manifestation_poster">
                     <video
                       width="480"
+                      height="385"
                       poster="images/manifestations/17_Visible-invisible-3/Visible-invisible-3-poster-grand.jpg"
                       controls
                     >
@@ -491,7 +492,7 @@
                       />
                     </video>
                   </div>
-                  <div class="images visible-invisible-3">
+                  <div class="images manifestation_flex">
                     <div class="vignette">
                       <a
                         href="images/manifestations/17_Visible-invisible-3/Visible-invisible-3-1-grand.jpg"