chore: V2

frontend-prep/src/components/ProductCard.css

@@ -554,7 +554,7 @@ div[data-category="gros&semi"] .details-button:hover {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 20px;
+    padding: 8px;
     animation: fadeIn 0.3s ease;
 }
 
@@ -570,9 +570,12 @@ div[data-category="gros&semi"] .details-button:hover {
 .video-modal-content {
     position: relative;
     width: 100%;
-    max-width: 900px;
+    max-width: 98vw;
+    max-height: calc(100vh - 16px);
+    display: flex;
+    flex-direction: column;
     background: #000;
-    border-radius: 12px;
+    border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
     animation: scaleIn 0.3s ease;
@@ -625,9 +628,10 @@ div[data-category="gros&semi"] .details-button:hover {
 .video-player {
     width: 100%;
     height: auto;
-    max-height: 80vh;
+    max-height: calc(100vh - 16px);
     display: block;
     object-fit: contain;
+    background: #000;
 }
 
 /* ===== RESPONSIVE ===== */
@@ -650,12 +654,13 @@ div[data-category="gros&semi"] .details-button:hover {
     }
 
     .video-modal {
-        padding: 10px;
+        padding: 0;
     }
 
     .video-modal-content {
         max-width: 100%;
-        border-radius: 8px;
+        max-height: 100vh;
+        border-radius: 0;
     }
 
     .video-close-btn {
@@ -670,7 +675,7 @@ div[data-category="gros&semi"] .details-button:hover {
     }
 
     .video-player {
-        max-height: 70vh;
+        max-height: 100vh;
     }
 }