From fe71921d1a4bbbef6e8365ddc1cd927c23ef253d Mon Sep 17 00:00:00 2001
From: Jules <contact@copydev.fr>
Date: Thu, 4 Jun 2026 09:14:40 +0200
Subject: [PATCH] =?UTF-8?q?Cadres=20choix=20:=20zoom=202.5x=20+=20fond=20p?=
 =?UTF-8?q?hoto=20simul=C3=A9,=20bordures=20bien=20visibles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/css/style.css | 19 ++++++++++++++++---
 frontend/js/app.js     |  2 +-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/css/style.css b/frontend/css/style.css
index fe4a53e..bd6b011 100644
--- a/frontend/css/style.css
+++ b/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;
 }
 
diff --git a/frontend/js/app.js b/frontend/js/app.js
index 9d58eff..e606052 100644
--- a/frontend/js/app.js
+++ b/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');