chore: build

frontend-prep/src/components/Navbar.css

@@ -2,42 +2,42 @@
    Tokens
    ============================================================ */
 :root {
-    --topbar-h:      60px;
+    --topbar-h: 60px;
-    --sidebar-w:     260px;
+    --sidebar-w: 260px;
-    --bg:            #09090b;
+    --bg: #09090b;
-    --surface:       #111115;
+    --surface: #111115;
-    --surface-2:     #1c1c22;
+    --surface-2: #1c1c22;
-    --border:        rgba(255, 255, 255, 0.07);
+    --border: rgba(255, 255, 255, 0.07);
-    --primary:       #8b5cf6;
+    --primary: #8b5cf6;
-    --primary-soft:  rgba(139, 92, 246, 0.12);
+    --primary-soft: rgba(139, 92, 246, 0.12);
-    --primary-glow:  rgba(139, 92, 246, 0.25);
+    --primary-glow: rgba(139, 92, 246, 0.25);
-    --cyan:          #22d3ee;
+    --cyan: #22d3ee;
-    --cyan-soft:     rgba(34, 211, 238, 0.1);
+    --cyan-soft: rgba(34, 211, 238, 0.1);
-    --red:           #ef4444;
+    --red: #ef4444;
-    --text:          #f4f4f5;
+    --text: #f4f4f5;
-    --text-muted:    #71717a;
+    --text-muted: #71717a;
-    --radius:        10px;
+    --radius: 10px;
-    --transition:    0.22s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
     --title-gradient-from: #a78bfa;
-    --title-gradient-to:   #22d3ee;
+    --title-gradient-to: #22d3ee;
 }
 
 /* ============================================================
    Light theme overrides
    ============================================================ */
 [data-theme="light"] {
-    --bg:           #f4f4f8;
+    --bg: #f4f4f8;
-    --surface:      #ffffff;
+    --surface: #ffffff;
-    --surface-2:    #ebebf2;
+    --surface-2: #ebebf2;
-    --border:       rgba(0, 0, 0, 0.08);
+    --border: rgba(0, 0, 0, 0.08);
-    --primary:      #7c3aed;
+    --primary: #7c3aed;
     --primary-soft: rgba(124, 58, 237, 0.08);
     --primary-glow: rgba(124, 58, 237, 0.18);
-    --cyan:         #0891b2;
+    --cyan: #0891b2;
-    --cyan-soft:    rgba(8, 145, 178, 0.1);
+    --cyan-soft: rgba(8, 145, 178, 0.1);
-    --red:          #dc2626;
+    --red: #dc2626;
-    --text:         #18181b;
+    --text: #18181b;
-    --text-muted:   #52525b;
+    --text-muted: #52525b;
 }
 
 /* ============================================================
@@ -48,12 +48,11 @@
     border-bottom-color: var(--border);
 }
 
-
 /* ============================================================
    Body offset
    ============================================================ */
 :root {
-    --bottomnav-h:      66px;
+    --bottomnav-h: 66px;
     --bottomnav-offset: 15px;
 }
 
@@ -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;
+    }
 }