diff --git a/frontend/package.json b/frontend/package.json
index 696e7c0..0ecdecd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "homehub-frontend",
   "private": true,
-  "version": "0.5.0",
+  "version": "0.5.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/frontend/src/components/BottomSheet.tsx b/frontend/src/components/BottomSheet.tsx
index 58b2de0..74e4652 100644
--- a/frontend/src/components/BottomSheet.tsx
+++ b/frontend/src/components/BottomSheet.tsx
@@ -1,9 +1,32 @@
+import { useState, useEffect } from 'react'
+
 interface BottomSheetProps {
   onClose: () => void
   children: React.ReactNode
 }
 
 export default function BottomSheet({ onClose, children }: BottomSheetProps) {
+  const [keyboardOffset, setKeyboardOffset] = useState(0)
+
+  useEffect(() => {
+    const vv = window.visualViewport
+    if (!vv) return
+
+    function update() {
+      // keyboard height = différence entre la hauteur totale et la hauteur visible
+      const offset = Math.max(0, window.innerHeight - vv!.height - vv!.offsetTop)
+      setKeyboardOffset(offset)
+    }
+
+    vv.addEventListener('resize', update)
+    vv.addEventListener('scroll', update)
+    update()
+    return () => {
+      vv.removeEventListener('resize', update)
+      vv.removeEventListener('scroll', update)
+    }
+  }, [])
+
   return (
     <>
       <div
@@ -17,19 +40,23 @@ export default function BottomSheet({ onClose, children }: BottomSheetProps) {
       <div
         style={{
           position: 'fixed',
-          bottom: 0,
+          bottom: keyboardOffset,
           left: '50%',
           transform: 'translateX(-50%)',
           width: '100%',
           maxWidth: 600,
-          maxHeight: '92dvh',
+          // quand le clavier est ouvert, on réduit la hauteur max pour laisser de l'air en haut
+          maxHeight: keyboardOffset > 0
+            ? `calc(100dvh - ${keyboardOffset}px - 56px)`
+            : '92dvh',
           background: 'var(--bg-2)',
-          borderRadius: '16px 16px 0 0',
+          borderRadius: keyboardOffset > 0 ? 16 : '16px 16px 0 0',
           boxShadow: '0 -4px 24px rgba(0,0,0,0.4)',
           zIndex: 70,
           display: 'flex',
           flexDirection: 'column',
           overflow: 'hidden',
+          transition: 'bottom 0.15s ease, max-height 0.15s ease, border-radius 0.15s ease',
         }}
       >
         {children}
diff --git a/frontend/src/pages/ShoppingPage.tsx b/frontend/src/pages/ShoppingPage.tsx
index 981d765..0a2693d 100644
--- a/frontend/src/pages/ShoppingPage.tsx
+++ b/frontend/src/pages/ShoppingPage.tsx
@@ -643,6 +643,7 @@ export default function ShoppingPage() {
           <div style={{ padding: '0 16px 10px', flexShrink: 0 }}>
             <input
               style={inputStyle}
+              type="search"
               placeholder="Rechercher ou saisir un article…"
               value={itemSearch}
               onChange={e => setItemSearch(e.target.value)}
@@ -650,6 +651,7 @@ export default function ShoppingPage() {
               autoCorrect="off"
               autoCapitalize="off"
               spellCheck={false}
+              autoFocus
             />
           </div>