chore: build

frontend-prep/src/components/Navbar.css

@@ -48,7 +48,6 @@
     border-bottom-color: var(--border);
 }
 
-
 /* ============================================================
    Body offset
    ============================================================ */
@@ -113,7 +112,11 @@ body {
     font-size: 1rem;
     font-weight: 700;
     letter-spacing: 0.02em;
-    background: linear-gradient(135deg, var(--title-gradient-from), var(--title-gradient-to));
+    background: linear-gradient(
+        135deg,
+        var(--title-gradient-from),
+        var(--title-gradient-to)
+    );
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -223,13 +226,21 @@ body {
     padding: 6px;
     gap: 2px;
     border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
+    box-shadow:
+        0 8px 40px rgba(0, 0, 0, 0.45),
+        0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
 [data-theme="light"] .bottom-nav {
-    background: color-mix(in srgb, var(--primary) 14%, rgba(245, 242, 255, 0.94));
+    background: color-mix(
+        in srgb,
+        var(--primary) 14%,
+        rgba(245, 242, 255, 0.94)
+    );
     border-color: rgba(0, 0, 0, 0.06);
-    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
+    box-shadow:
+        0 8px 40px rgba(0, 0, 0, 0.12),
+        0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 /* ── Tabs ── */
@@ -321,8 +332,12 @@ body {
 
 /* Hide labels on very narrow screens */
 @media (max-width: 380px) {
-    .bottom-tab-label { display: none; }
+    .bottom-tab-label {
-    .bottom-tab { padding: 10px 4px; }
+        display: none;
+    }
+    .bottom-tab {
+        padding: 10px 4px;
+    }
 }
 
 /* Logout button — couleur rouge subtile */
@@ -364,8 +379,12 @@ body {
 }
 
 @keyframes slideUp {
-    from { transform: translateY(100%); }
+    from {
-    to   { transform: translateY(0); }
+        transform: translateY(100%);
+    }
+    to {
+        transform: translateY(0);
+    }
 }
 
 .notif-modal-header {
@@ -410,8 +429,13 @@ body {
     scrollbar-color: var(--border) transparent;
 }
 
-.notif-modal-body::-webkit-scrollbar { width: 4px; }
+.notif-modal-body::-webkit-scrollbar {
-.notif-modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+    width: 4px;
+}
+.notif-modal-body::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 2px;
+}
 
 .notif-empty {
     display: flex;
@@ -425,7 +449,9 @@ body {
     height: 100%;
 }
 
-.notif-empty p { margin: 0; }
+.notif-empty p {
+    margin: 0;
+}
 
 .notif-item {
     display: flex;
@@ -437,7 +463,9 @@ body {
     transition: background var(--transition);
 }
 
-.notif-item:last-child { border-bottom: none; }
+.notif-item:last-child {
+    border-bottom: none;
+}
 
 .notif-unread {
     background: var(--primary-soft);
@@ -459,11 +487,34 @@ body {
     font-size: 0.74rem;
 }
 
+/* ============================================================
+   Safe-area utilitaire — à appliquer au conteneur scrollable
+   d'une page (ou directement à son bouton d'action principal)
+   pour garantir qu'aucun contenu ne se cache sous la bottom-nav
+   flottante (ex: bouton "Commander" du panier, "Valider" d'un
+   formulaire, etc.). Hauteur de la pilule + son offset + une
+   marge de confort.
+   ============================================================ */
+.page-bottomnav-safe-area {
+    padding-bottom: calc(
+        var(--bottomnav-h) + var(--bottomnav-offset) + 16px
+    ) !important;
+}
+
 /* ============================================================
    Responsive — touch devices
    ============================================================ */
 @media (hover: none) {
-    .bottom-tab:hover { background: transparent; color: rgba(255, 255, 255, 0.45); }
+    .bottom-tab:hover {
-    .bottom-tab.active:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
+        background: transparent;
-    .topbar-icon-btn:hover { background: transparent; border-color: transparent; }
+        color: rgba(255, 255, 255, 0.45);
+    }
+    .bottom-tab.active:hover {
+        background: rgba(255, 255, 255, 0.14);
+        color: #fff;
+    }
+    .topbar-icon-btn:hover {
+        background: transparent;
+        border-color: transparent;
+    }
 }