feat: update multiple tomtom keys and switch tomtom key and add comming soon button

frontend-prep/src/api/api.ts

@@ -817,6 +817,7 @@ export interface Product {
     stock: number;
     prices?: Array<{ quantity: number; price: number; active_price?: boolean }>;
     media?: MediaItem[]; // ✅ CHANGÉ: string[] → MediaItem[]
+    coming_soon?: boolean;
 }
 
 export interface Category {

frontend-prep/src/components/ProductCard.css

@@ -62,6 +62,29 @@
         0 0 10px rgba(255, 0, 0, 0.5);
 }
 
+.coming-soon-overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(-15deg);
+    text-align: center;
+    z-index: 5;
+    pointer-events: none;
+    background-color: rgba(245, 158, 11, 0.95);
+    color: white;
+    border: 6px solid white;
+    padding: clamp(0.5rem, 2vw, 0.8rem) clamp(1.5rem, 5vw, 2.5rem);
+    font-size: clamp(1.1rem, 4.5vw, 1.8rem);
+    font-weight: 900;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    white-space: nowrap;
+    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
+    text-shadow:
+        2px 2px 6px rgba(0, 0, 0, 0.6),
+        -2px -2px 6px rgba(0, 0, 0, 0.6);
+}
+
 .product-card.out-of-stock {
     opacity: 0.75;
 }

frontend-prep/src/components/ProductCard.tsx

@@ -26,6 +26,7 @@ interface ProductCardProps {
     hasVideo?: boolean;
     videoUrl?: string; // ✨ Nouveau prop pour l'URL de la vidéo
     categoryColor?: string;
+    coming_soon?: boolean;
 }
 
 function ProductCard({
@@ -40,6 +41,7 @@ function ProductCard({
     hasVideo = false,
     videoUrl,
     categoryColor,
+    coming_soon,
 }: ProductCardProps) {
     const navigate = useNavigate();
     const { addToCart } = useCart();
@@ -52,6 +54,7 @@ function ProductCard({
     const [showVideo, setShowVideo] = useState(false); // ✨ État pour afficher/masquer la vidéo
 
     const isOutOfStock = stock === 0;
+    const isComingSoon = coming_soon === true;
     const normalizedCategory = (category || "autre").toLowerCase().trim();
 
     const handleDetailsClick = (e: React.MouseEvent) => {
@@ -156,6 +159,9 @@ function ProductCard({
                     {isOutOfStock && (
                         <div className="sold-out-overlay">SOLD OUT</div>
                     )}
+                    {isComingSoon && !isOutOfStock && (
+                        <div className="coming-soon-overlay">À VENIR</div>
+                    )}
                 </div>
 
                 <div className="product-info">

frontend-prep/src/pages/User/Accueil.tsx

@@ -219,6 +219,7 @@ function UserAccueil() {
                                                 product.category?.toLowerCase(),
                                         )?.color
                                     }
+                                    coming_soon={product.coming_soon}
                                 />
                             </div>
                         ))}

frontend-prep/src/pages/User/ProductDetail.css

@@ -133,6 +133,40 @@
   }
 }
 
+/* Coming Soon Badge */
+.coming-soon-badge {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-15deg);
+  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  color: white;
+  border: 4px solid white;
+  padding: clamp(1rem, 4vw, 1.5rem) clamp(2.5rem, 8vw, 4rem);
+  font-size: clamp(2rem, 8vw, 3.5rem);
+  font-weight: 900;
+  letter-spacing: 6px;
+  text-transform: uppercase;
+  white-space: nowrap;
+  box-shadow:
+    0 0 40px rgba(245, 158, 11, 0.8),
+    0 8px 32px rgba(0, 0, 0, 0.6);
+  text-shadow:
+    2px 2px 12px rgba(0, 0, 0, 0.9),
+    0 0 20px rgba(255, 255, 255, 0.3);
+  z-index: 10;
+  animation: pulseAmber 2s infinite;
+}
+
+@keyframes pulseAmber {
+  0%, 100% {
+    transform: translate(-50%, -50%) rotate(-15deg) scale(1);
+  }
+  50% {
+    transform: translate(-50%, -50%) rotate(-15deg) scale(1.05);
+  }
+}
+
 /* Info Section */
 .product-info-section {
   display: flex;

frontend-prep/src/pages/User/ProductDetail.tsx

@@ -200,6 +200,7 @@ function ProductDetail() {
     }
 
     const isOutOfStock = product.stock === 0;
+    const isComingSoon = product.coming_soon === true;
     const hasValidPrices = product.prices && product.prices.length > 0;
 
     // Convertir la couleur hex en valeurs RGB pour les CSS rgba()
@@ -248,6 +249,7 @@ function ProductDetail() {
                             className="product-detail-image"
                         />
                         {isOutOfStock && <div className="sold-out-badge">SOLD OUT</div>}
+                        {isComingSoon && !isOutOfStock && <div className="coming-soon-badge">À VENIR</div>}
                     </div>
 
                     <div className="product-info-section">