style(app): mobile-native layout with safe areas and grouped list

src/components/NoteList.tsx

@@ -12,14 +12,14 @@ function NoteList({ notes, onSelect }: NoteListProps) {
   }
 
   return (
-    <ul className="flex flex-col divide-y divide-gray-100">
+    <ul className="flex flex-col divide-y divide-gray-100 overflow-hidden rounded-2xl bg-white shadow-sm">
       {notes.map((note) => (
         <li key={note.id}>
           <button
             type="button"
             onClick={() => onSelect(note.id)}
             aria-label={note.title ? `Ouvrir la note ${note.title}` : 'Ouvrir la note Sans titre'}
-            className="flex w-full items-center justify-between gap-3 px-2 py-4 text-left text-base hover:bg-gray-50 active:bg-gray-100"
+            className="flex w-full min-h-14 items-center justify-between gap-3 px-4 py-5 text-left text-base active:bg-gray-50"
           >
             <span className={note.title ? 'text-gray-800' : 'italic text-gray-400'}>
               {note.title || 'Sans titre'}