chore: build

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

@@ -8,7 +8,9 @@
     padding-top: 60px;
     max-width: 640px;
     margin: 0 auto;
-    padding-bottom: 140px;
+    padding-bottom: calc(
+        var(--bottomnav-h, 66px) + var(--bottomnav-offset, 15px) + 150px
+    );
     background: var(--bg);
 }
 
@@ -177,7 +179,9 @@
     align-items: center;
     justify-content: center;
     opacity: 0.7;
-    transition: opacity 0.15s, background 0.15s;
+    transition:
+        opacity 0.15s,
+        background 0.15s;
     flex-shrink: 0;
 }
 
@@ -197,15 +201,22 @@
 
 .cart-footer {
     position: fixed;
-    bottom: 0;
+    /* Remonté au-dessus de la bottom-nav flottante (qui est en
+       bottom: var(--bottomnav-offset) avec z-index: 900), pour que
+       le bouton "Commander" ne soit jamais masqué par le menu. */
+    bottom: calc(
+        var(--bottomnav-h, 66px) + var(--bottomnav-offset, 15px) + 10px
+    );
     left: 50%;
     transform: translateX(-50%);
-    width: 100%;
+    width: calc(100% - 1.5rem);
     max-width: 640px;
     background: var(--surface);
-    border-top: 1px solid var(--border);
+    border: 1px solid var(--border);
-    padding: 1rem 1.25rem 1.25rem;
+    border-radius: 16px;
-    z-index: 100;
+    padding: 1rem 1.25rem 1.1rem;
+    z-index: 850;
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
 }
 
 .cart-footer-total {
@@ -236,7 +247,9 @@
     font-size: 1rem;
     font-weight: 700;
     cursor: pointer;
-    transition: opacity 0.2s, transform 0.15s;
+    transition:
+        opacity 0.2s,
+        transform 0.15s;
     letter-spacing: 0.3px;
 }
 
@@ -296,7 +309,9 @@
     font-size: 0.95rem;
     font-weight: 600;
     cursor: pointer;
-    transition: opacity 0.2s, transform 0.15s;
+    transition:
+        opacity 0.2s,
+        transform 0.15s;
 }
 
 .continue-shopping:hover {
@@ -320,8 +335,13 @@
 }
 
 @keyframes pulse {
-    0%, 100% { opacity: 0.5; }
+    0%,
-    50%       { opacity: 1; }
+    100% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 1;
+    }
 }
 
 /* ============================================
@@ -342,8 +362,12 @@
 }
 
 @keyframes fadeIn {
-    from { opacity: 0; }
+    from {
-    to   { opacity: 1; }
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 .modal-content2 {
@@ -357,8 +381,14 @@
 }
 
 @keyframes slideUp {
-    from { opacity: 0; transform: translateY(16px); }
+    from {
-    to   { opacity: 1; transform: translateY(0); }
+        opacity: 0;
+        transform: translateY(16px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .modal-icon-container {
@@ -404,7 +434,9 @@
     align-items: center;
     justify-content: center;
     gap: 0.4rem;
-    transition: opacity 0.15s, transform 0.15s;
+    transition:
+        opacity 0.15s,
+        transform 0.15s;
 }
 
 .modal-button:hover:not(:disabled) {
@@ -473,7 +505,9 @@
     cursor: pointer;
     z-index: 10;
     font-size: 1.1rem;
-    transition: background 0.2s, transform 0.2s;
+    transition:
+        background 0.2s,
+        transform 0.2s;
 }
 
 .video-close-btn:hover {