From 1a6016604db516abe916ba800409ae79173c1b78 Mon Sep 17 00:00:00 2001
From: Cedric <cedric.chagnaud@gmail.com>
Date: Tue, 23 Jun 2026 15:52:27 +0200
Subject: [PATCH] Actualiser css/public.css

---
 css/public.css | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/css/public.css b/css/public.css
index 7263368..cb4aa2c 100644
--- a/css/public.css
+++ b/css/public.css
@@ -1023,6 +1023,37 @@ footer {
     font-weight: 600;
 }
 
+/* ══════════════════════════════════════════════════════════════
+   FIX : Empêcher le tronquage des jaquettes dans la grille (index)
+   ══════════════════════════════════════════════════════════════ */
+
+/* 1. On cible le conteneur de l'image dans la grille pour lui donner une taille fixe uniforme */
+#grid .movie-poster,
+#grid .card-poster,
+#grid .poster-wrap,
+#grid .card-image {
+    aspect-ratio: 2 / 3 !important; /* Conserve une grille parfaitement alignée */
+    background-color: #151515 !important; /* Fond sombre esthétique pour combler les bords des formats atypiques */
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    overflow: hidden !important;
+    border-radius: 8px;
+}
+
+/* 2. On force l'image de la grille à s'afficher à 100% EN ENTIER sans être rognée */
+#grid img {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: contain !important; /* ✅ REGLAGE CLÉ : l'image n'est plus jamais coupée */
+    transition: transform 0.3s ease;
+}
+
+/* Optionnel : Un léger effet de zoom au survol propre qui ne bave pas hors de la carte */
+#grid .card:hover img, 
+#grid .movie-card:hover img {
+    transform: scale(1.03);
+}
 
 /* ══════════════════════════════════════════════════════════════
    RESPONSIVE MOBILE (index.html)