fix(ux): bottom sheet au-dessus du clavier iOS + suppression URL suggestion

BottomSheet.tsx
- visualViewport API : calcule la hauteur du clavier en temps réel
- bottom: keyboardOffset → le sheet monte exactement au-dessus du clavier
- maxHeight s'adapte à l'espace visible restant
- border-radius passe à 16px partout quand le clavier est ouvert
- Transition douce 0.15s sur bottom/maxHeight/border-radius

ShoppingPage.tsx
- type="search" sur le champ de recherche → supprime la suggestion URL iOS
  dans la barre QuickType du clavier
- autoFocus → clavier s'ouvre automatiquement à l'ouverture du sheet

v0.5.1

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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",

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}

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>