Actualiser css/public.css

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)