Cadres choix : zoom 2.5x + fond photo simulé, bordures bien visibles

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

frontend/css/style.css

@@ -1263,12 +1263,25 @@ h3 {
   transform: scale(0.95);
 }
 
-.cadre-choix-item img {
+.cadre-choix-item .cadre-thumb-wrap {
   width: 140px;
   height: 210px;
-  object-fit: cover;
   border-radius: 10px;
-  background: #111;
+  overflow: hidden;
+  position: relative;
+  /* Fond neutre qui simule une photo derrière le cadre transparent */
+  background: linear-gradient(135deg, #5a5a6a 0%, #3a3a4a 100%);
+}
+
+.cadre-choix-item .cadre-thumb-wrap img {
+  /* Image agrandie 2.5x et centrée — les bordures deviennent bien visibles */
+  position: absolute;
+  width: 350px;
+  height: 525px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 0;
   display: block;
 }
 

frontend/js/app.js

@@ -214,7 +214,7 @@ async function chargerCadresChoix() {
   for (const nom of data.disponibles) {
     const div = document.createElement('div');
     div.className = 'cadre-choix-item';
-    div.innerHTML = `<img src="/assets/cadres/${fmt}/${nom}" alt="${nom}"><span>${nom.replace('.png','')}</span>`;
+    div.innerHTML = `<div class="cadre-thumb-wrap"><img src="/assets/cadres/${fmt}/${nom}" alt="${nom}"></div><span>${nom.replace('.png','')}</span>`;
     div.onclick = () => {
       cadreChoisi = nom;
       allerA('capture');