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

src/App.tsx

@@ -37,8 +37,8 @@ function App() {
   }
 
   return (
-    <main className="mx-auto w-full max-w-2xl flex flex-col min-h-dvh pb-28">
-      <header className="sticky top-0 z-10 bg-white/95 backdrop-blur border-b border-gray-200 px-4 py-3">
+    <main className="mx-auto flex w-full max-w-2xl min-h-dvh flex-col pb-[calc(env(safe-area-inset-bottom)+7rem)]">
+      <header className="sticky top-0 z-10 border-b border-gray-200 bg-white/95 px-4 pb-3 pt-[calc(env(safe-area-inset-top)+0.75rem)] backdrop-blur">
         {creating || selectedNote ? (
           <div className="flex items-center gap-1">
             <button

src/components/FloatingButton.tsx

@@ -6,7 +6,7 @@ function FloatingButton({ onClick, label = 'Créer une note' }: FloatingButtonPr
       type="button"
       onClick={onClick}
       aria-label={label}
-      className="fixed bottom-6 right-6 z-20 flex h-14 w-14 items-center justify-center rounded-full bg-blue-700 text-3xl text-white shadow-lg transition-transform hover:bg-blue-800 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-800 focus:ring-offset-2"
+      className="fixed bottom-[calc(env(safe-area-inset-bottom)+1.5rem)] right-6 z-20 flex h-14 w-14 items-center justify-center rounded-full bg-blue-700 text-3xl text-white shadow-lg transition-transform hover:bg-blue-800 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-800 focus:ring-offset-2"
     >
       +
     </button>

src/components/NoteEditor.tsx

@@ -17,7 +17,7 @@ function NoteForm({
 }: NoteFormProps) {
   return (
     <form
-      className="flex flex-col gap-4 rounded-xl border border-gray-200 bg-white p-4 shadow-sm"
+      className="flex flex-col gap-4 rounded-2xl border border-gray-200 bg-white p-4 shadow-sm"
       onSubmit={(event) => {
         event.preventDefault()
         onSubmit()
@@ -114,7 +114,7 @@ function NoteEditor(props: NoteEditorProps) {
 
   const { note } = props
   return (
-    <article className="flex flex-col gap-5 rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
+    <article className="flex flex-col gap-5 rounded-2xl border border-gray-200 bg-white p-4 shadow-sm">
       <div className="flex items-start justify-between gap-4">
         <h2 className="text-xl font-semibold leading-snug">{note.title || 'Sans titre'}</h2>
         <button

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'}

src/style.css

@@ -1,6 +1,16 @@
 @import 'tailwindcss';
 
 @layer base {
+  html {
+    -webkit-tap-highlight-color: transparent;
+    overscroll-behavior-y: none;
+  }
+
+  body {
+    min-height: 100dvh;
+    background-color: var(--color-neutral-500);
+  }
+
   button {
     touch-action: manipulation;
     cursor: pointer;