fix(settings): merge Bébé + Bébés into single section

Each baby row is tappable; inline edit form expands under the selected
baby. Passes baby data directly to avoid stale context on first click.

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

src/app/(app)/settings/page.tsx

@@ -152,12 +152,13 @@ export default function SettingsPage() {
     setExportLoading(false);
   }
 
-  function startEditBaby() {
+  function startEditBaby(b?: { name: string; birthDate: string; gender?: string }) {
-    if (!selectedBaby) return;
+    const src = b ?? selectedBaby;
+    if (!src) return;
     setBabyForm({
-      name: selectedBaby.name,
+      name: src.name,
-      birthDate: selectedBaby.birthDate.slice(0, 10),
+      birthDate: src.birthDate.slice(0, 10),
-      gender: selectedBaby.gender ?? "",
+      gender: src.gender ?? "",
     });
     setEditingBaby(true);
   }
@@ -252,11 +253,28 @@ export default function SettingsPage() {
       <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-6">Réglages</h1>
 
       <div className="space-y-4">
-        {/* Baby info */}
+        {/* Babies */}
-        {selectedBaby && (
+        <Section title="Bébés">
-          <Section title="Bébé">
+          <div className="divide-y divide-slate-100 dark:divide-slate-700">
-            {editingBaby ? (
+            {family?.babies.map((b) => (
-              <form onSubmit={saveBaby} className="p-4 space-y-3">
+              <div key={b.id}>
+                <button
+                  onClick={() => { setSelectedBabyId(b.id); startEditBaby(b); }}
+                  className="w-full flex items-center gap-3 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-800 transition text-left"
+                >
+                  <div className="w-8 h-8 bg-indigo-50 dark:bg-indigo-950 rounded-full flex items-center justify-center flex-shrink-0">
+                    <Baby className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
+                  </div>
+                  <div className="flex-1">
+                    <p className="text-sm font-medium text-slate-700 dark:text-slate-200">{b.name}</p>
+                    <p className="text-xs text-slate-400 dark:text-slate-500">
+                      {new Date(b.birthDate).toLocaleDateString("fr-FR", { day: "numeric", month: "long", year: "numeric" })}
+                    </p>
+                  </div>
+                  <ChevronRight className="w-4 h-4 text-slate-400 dark:text-slate-500" />
+                </button>
+                {editingBaby && selectedBaby?.id === b.id && (
+                  <form onSubmit={saveBaby} className="px-4 pb-4 space-y-3 bg-slate-50 dark:bg-slate-800/60 border-t border-slate-100 dark:border-slate-700 pt-3">
                     <div>
                       <label className="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1.5">Prénom</label>
                       <input type="text" value={babyForm.name} onChange={(e) => setBabyForm((f) => ({ ...f, name: e.target.value }))}
@@ -276,43 +294,13 @@ export default function SettingsPage() {
                       </select>
                     </div>
                     <div className="flex gap-2">
-                  <button type="button" onClick={() => setEditingBaby(false)} className="flex-1 py-2 border border-slate-200 dark:border-slate-700 rounded-lg text-sm text-slate-600 dark:text-slate-400">Annuler</button>
+                      <button type="button" onClick={() => setEditingBaby(false)} className="flex-1 py-2 border border-slate-200 dark:border-slate-700 rounded-lg text-sm text-slate-600 dark:text-slate-400 bg-white dark:bg-slate-700">Annuler</button>
                       <button type="submit" disabled={savingBaby} className="flex-1 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium">
                         {savingBaby ? "..." : "Enregistrer"}
                       </button>
                     </div>
                   </form>
-            ) : (
-              <button onClick={startEditBaby} className="w-full flex items-center gap-3 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-800 transition text-left">
-                <div className="w-10 h-10 bg-indigo-50 dark:bg-indigo-950 rounded-xl flex items-center justify-center flex-shrink-0">
-                  <Baby className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
-                </div>
-                <div className="flex-1">
-                  <p className="text-sm font-semibold text-slate-800 dark:text-slate-100">{selectedBaby.name}</p>
-                  <p className="text-xs text-slate-500 dark:text-slate-400">
-                    {new Date(selectedBaby.birthDate).toLocaleDateString("fr-FR", { day: "numeric", month: "long", year: "numeric" })}
-                  </p>
-                </div>
-                <ChevronRight className="w-4 h-4 text-slate-400 dark:text-slate-500" />
-              </button>
                 )}
-          </Section>
-        )}
-
-        {/* Add baby */}
-        <Section title="Bébés">
-          <div className="divide-y divide-slate-100 dark:divide-slate-700">
-            {family?.babies.map((b) => (
-              <div key={b.id} className="flex items-center gap-3 px-4 py-3">
-                <div className="w-8 h-8 bg-indigo-50 dark:bg-indigo-950 rounded-full flex items-center justify-center">
-                  <Baby className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
-                </div>
-                <div className="flex-1">
-                  <p className="text-sm font-medium text-slate-700 dark:text-slate-200">{b.name}</p>
-                  <p className="text-xs text-slate-400 dark:text-slate-500">
-                    {new Date(b.birthDate).toLocaleDateString("fr-FR", { day: "numeric", month: "long", year: "numeric" })}
-                  </p>
-                </div>
               </div>
             ))}
             <div className="px-4 py-3">