Update style/default/style.css

style/default/style.css

@@ -257,9 +257,8 @@ html, body { margin: 0; padding: 0; height: 100%; }
   color: #f0f0f0;
   border-radius: 14px;
   overflow: hidden;
-  width: 90%;
-  max-width: 400px;
-  max-height: 85%;
+  width: min(400px, 90vw);
+  max-height: min(560px, 85vh);
   display: flex;
   flex-direction: column;
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
@@ -372,32 +371,42 @@ html, body { margin: 0; padding: 0; height: 100%; }
   display: flex;
 }
 
-/* Conteneur relatif pour positionner le bouton fermer par rapport à l'image */
+/* Grid trick : image et bouton fermer partagent la même cellule →
+   le bouton se positionne dans le coin de l'image quelle que soit sa taille */
 .ann-lb-content-wrap {
   position: relative;
-  max-width: 90%;
-  max-height: 90%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  display: grid;
 }
 .ann-lightbox img {
-  max-width: 100%;
-  max-height: 100%;
+  display: block;
   object-fit: contain;
+  max-height: 90vh;
+  max-width: 90vw;
+  width: auto;
+  height: auto;
   border-radius: 8px;
-  display: block;
   box-shadow: 0 8px 40px rgba(0,0,0,0.6);
+  grid-area: 1 / 1;
+}
+/* Bouton fermer positionné par le grid, sans position: absolute */
+.ann-lb-close {
+  grid-area: 1 / 1;
+  align-self: start;
+  justify-self: end;
+  margin: 10px;
+  position: static !important;
+  top: unset !important;
+  right: unset !important;
 }
 
 /* ── Responsive — portrait mobile ── */
 @media (orientation: portrait) and (max-width: 768px) {
-  .ann-tooltip   { width: 93%; max-height: 83%; }
+  .ann-tooltip   { width: min(400px, 93vw); max-height: min(560px, 83vh); }
   .ann-img-wrap  { max-height: 180px; }
 }
 
 /* ── Responsive — paysage mobile ── */
 @media (orientation: landscape) and (max-height: 520px) {
-  .ann-tooltip   { width: 82%; max-height: 90%; }
+  .ann-tooltip   { width: min(400px, 82vw); max-height: 90vh; }
   .ann-img-wrap  { max-height: 130px; }
-}
+}