chore: fix icones

frontend-prep/src/components/ProductCard.css

@@ -404,9 +404,10 @@ div[data-category="gros&semi"] .success-message {
     transform: scale(1.05);
 }
 
-.media-indicator i {
+.media-indicator svg {
     color: #ffffff;
-    font-size: 18px;
+    width: 18px;
+    height: 18px;
     animation: cameraPulse 2s ease-in-out infinite;
 }
 
@@ -453,7 +454,7 @@ div[data-category="zipette&co"] .media-indicator:hover {
     border-color: #f5f5f0;
 }
 
-div[data-category="zipette&co"] .media-indicator i {
+div[data-category="zipette&co"] .media-indicator svg {
     color: #1a1a1a;
 }
 
@@ -621,8 +622,9 @@ div[data-category="gros&semi"] .details-button:hover {
     transform: scale(0.95);
 }
 
-.video-close-btn i {
-    font-size: 18px;
+.video-close-btn svg {
+    width: 18px;
+    height: 18px;
 }
 
 .video-player {
@@ -670,8 +672,9 @@ div[data-category="gros&semi"] .details-button:hover {
         height: 36px;
     }
 
-    .video-close-btn i {
-        font-size: 16px;
+    .video-close-btn svg {
+        width: 16px;
+        height: 16px;
     }
 
     .video-player {
@@ -702,8 +705,9 @@ div[data-category="gros&semi"] .details-button:hover {
         right: 10px;
     }
 
-    .media-indicator i {
-        font-size: 16px;
+    .media-indicator svg {
+        width: 16px;
+        height: 16px;
     }
 }
 

frontend-prep/src/components/ProductCard.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useCart } from "../context/useCart";
+import { Camera, Info, X } from "lucide-react";
 import "./ProductCard.css";
 
 function getTextColor(hex: string): string {
@@ -139,7 +140,7 @@ function ProductCard({
                             onClick={handleVideoToggle}
                             aria-label="Voir la vidéo du produit"
                         >
-                            <i className="fas fa-camera"></i>
+                            <Camera size={18} />
                         </button>
                     )}
                     {/* ✨ Bouton "Détails" */}
@@ -148,7 +149,7 @@ function ProductCard({
                         onClick={handleDetailsClick}
                         aria-label="Voir les détails du produit"
                     >
-                        <i className="fas fa-info-circle"></i>
+                        <Info size={14} />
                         <span>Détails</span>
                     </button>
                     {isOutOfStock && (
@@ -229,7 +230,7 @@ function ProductCard({
                             onClick={handleCloseVideo}
                             aria-label="Fermer la vidéo"
                         >
-                            <i className="fas fa-times"></i>
+                            <X size={18} />
                         </button>
                         <video
                             src={videoUrl}