From 79df032f1030f242f0891fc24443767c441c029b Mon Sep 17 00:00:00 2001
From: IliesAllali <pro.allali.ilies@gmail.com>
Date: Sat, 7 Nov 2026 01:54:19 +0100
Subject: [PATCH] Revert "Merge pull request #220 from
 IliesAllali/feat/reglages-arbre-onglets"

This reverts commit 97966054ac339c466e76a61509a8e078dd3dbbcc, reversing
changes made to 4544edde6f97ab169e48c3305826bf425bf97bbf.
---
 frontend/src/App.jsx                          |   8 +-
 frontend/src/components/AdminPanel.jsx        |   8 +-
 frontend/src/components/Galaxy.css            |   8 +-
 frontend/src/components/Galaxy.jsx            |  83 ++++---
 frontend/src/components/SettingsPanels.css    |   2 -
 frontend/src/components/galaxy/blockLayout.js | 206 ++++++++++++++++--
 .../components/galaxy/dessinComplet.test.js   |  60 -----
 frontend/src/components/galaxy/elkLayout.js   |   2 +-
 frontend/src/components/galaxy/renderers.js   |  24 ++
 .../galaxy/useGalaxyInteractions.js           |  13 +-
 frontend/src/i18n/en/arbre.js                 |   3 +-
 11 files changed, 284 insertions(+), 133 deletions(-)
 delete mode 100644 frontend/src/components/galaxy/dessinComplet.test.js

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index b1ecb97..2f315c6 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -570,7 +570,7 @@ function App() {
   })
 
   const [adminPanelVisible, setAdminPanelVisible] = useState(false)
-  // Onglet de famille ouvert : l'adresse de la page le porte (?famille=<ancêtre de la branche>), et le lien à envoyer à la
+  // Onglet de famille ouvert : l'adresse de la page le porte (?famille=<charnière>), et le lien à envoyer à la
   // famille aussi, pour qu'il ouvre l'arbre sur cette famille
   const [initialFamilyKey] = useState(() => new URLSearchParams(window.location.search).get('famille'))
   const [openFamily, setOpenFamily] = useState(null)
@@ -588,9 +588,6 @@ function App() {
   // Onglets par nom : nombre de porteurs d'un nom à partir duquel il a son onglet (8 par défaut, Patch, 07/11)
   const [tabMinCount, setTabMinCountState] = useState(() => { try { const v = Number(localStorage.getItem('parenthese.tabMinCount')); return v >= 2 && v <= 30 ? v : 8 } catch { return 8 } })
   const setTabMinCount = useCallback((n) => { setTabMinCountState(n); try { localStorage.setItem('parenthese.tabMinCount', String(n)) } catch { /* navigateur sans stockage */ } }, [])
-  // Onglet « Tout l'arbre » en tête de la barre : coupé par défaut (Patch, 07/11)
-  const [showAllTab, setShowAllTabState] = useState(() => { try { return localStorage.getItem('parenthese.showAllTab') === 'on' } catch { return false } })
-  const setShowAllTab = useCallback((on) => { setShowAllTabState(on); try { localStorage.setItem('parenthese.showAllTab', on ? 'on' : 'off') } catch { /* navigateur sans stockage */ } }, [])
   const [fullNames, setFullNamesState] = useState(() => { try { return localStorage.getItem('parenthese.fullNames') === 'on' } catch { return false } })
   const setFullNames = useCallback((on) => { setFullNamesState(on); try { localStorage.setItem('parenthese.fullNames', on ? 'on' : 'off') } catch { /* navigateur sans stockage */ } }, [])
   // Premiers visages : fenêtre ouverte après un import GEDCOM, ou depuis les paramètres de l'arbre
@@ -3578,7 +3575,6 @@ function App() {
         onReorderSiblings={handleReorderSiblings}
         familyTabs={familyTabs}
         tabMinCount={tabMinCount}
-        showAllTab={showAllTab}
         fullNames={fullNames}
         annotationViewRef={annotationViewRef}
         onAnnotationsAnchored={persistAnnotationAnchors}
@@ -3762,8 +3758,6 @@ function App() {
         onFamilyTabsChange={setFamilyTabs}
         tabMinCount={tabMinCount}
         onTabMinCountChange={setTabMinCount}
-        showAllTab={showAllTab}
-        onShowAllTabChange={setShowAllTab}
         fullNames={fullNames}
         onFullNamesChange={setFullNames}
       />
diff --git a/frontend/src/components/AdminPanel.jsx b/frontend/src/components/AdminPanel.jsx
index ed3ba6d..fa0ece3 100644
--- a/frontend/src/components/AdminPanel.jsx
+++ b/frontend/src/components/AdminPanel.jsx
@@ -44,8 +44,6 @@ const AdminPanel = ({
   onFamilyTabsChange = null,
   tabMinCount = 8,
   onTabMinCountChange = null,
-  showAllTab = false,
-  onShowAllTabChange = null,
   fullNames = false,
   onFullNamesChange = null,
   visible,
@@ -560,7 +558,7 @@ const AdminPanel = ({
                       />
                       <span className="ts-choice-text">
                         <strong>{t('Un onglet par nom de famille')}</strong>
-                        <small>{t('Chaque nom porté par assez de personnes reliées entre elles a son onglet, avec les conjoints.')}</small>
+                        <small>{t("Chaque nom porté par assez de personnes reliées entre elles a son onglet, avec les conjoints. Le premier onglet montre tout l'arbre.")}</small>
                       </span>
                     </label>
                     {familyTabs && (
@@ -580,10 +578,6 @@ const AdminPanel = ({
                             ? tabPreview.map((tb) => <span key={tb.key} className="pz-tag">{tb.label} <small>{tb.count}</small></span>)
                             : t("Aucun onglet à ce seuil : tout l'arbre sur une seule page.")}
                         </p>
-                        <label className="ts-check">
-                          <input type="checkbox" checked={showAllTab} onChange={(event) => onShowAllTabChange?.(event.target.checked)} />
-                          {t("Ajouter un onglet « Tout l'arbre » en premier")}
-                        </label>
                       </div>
                     )}
                     <label className={`ts-choice ${familyTabs ? '' : 'is-active'}`}>
diff --git a/frontend/src/components/Galaxy.css b/frontend/src/components/Galaxy.css
index 20d4a2c..4115444 100644
--- a/frontend/src/components/Galaxy.css
+++ b/frontend/src/components/Galaxy.css
@@ -58,7 +58,7 @@
   left: 16px;
   z-index: 500;
   display: flex;
-  gap: 16px;
+  gap: 6px;
   max-width: calc(100vw - 120px);
   overflow-x: auto;
   scrollbar-width: none;
@@ -120,3 +120,9 @@
   .family-tab { font-size: 14px; padding: 6px 12px 7px; }
 }
 
+/* Trait d'union entre deux onglets voisins quand le second part du premier (planche A, variante 2) */
+.family-tabs { gap: 0; }
+.family-tab + .family-tab:not([style]) { margin-left: 6px; }
+.family-tab--suite { position: relative; }
+.family-tab--suite::before { content: ""; position: absolute; right: 100%; top: 50%; width: 10px; height: 1.3px; transform: translateY(-50%); background: #E3A590; pointer-events: none; }
+.family-tab--trait-on::before { background: #D2694A; }
diff --git a/frontend/src/components/Galaxy.jsx b/frontend/src/components/Galaxy.jsx
index ffceb67..45a8e87 100644
--- a/frontend/src/components/Galaxy.jsx
+++ b/frontend/src/components/Galaxy.jsx
@@ -51,35 +51,49 @@ const centerX = (node) => node.x + node.width / 2
 const easeOutQuint = (t) => 1 - (1 - t) ** 5
 const prefersReducedMotion = () => typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
 
-// L'onglet ouvert (Patch, 07/11 : « le système d'onglets sans le Tout l'arbre, sauf s'il est coché ») : celui
-// choisi, sinon « Tout l'arbre » s'il est affiché, sinon la famille de la personne de départ, sinon la plus
-// grande. Moins de deux familles : l'arbre entier, sans barre.
-function resolveTab(list, key, showAll, homeId) {
-  if (!list.length) return null
-  const chosen = key != null ? list.find((tb) => tb.key === key) : null
-  if (chosen) return chosen
-  if (showAll || list.length < 3) return list[0]
-  const id = homeId != null ? String(homeId) : null
-  return (id && list.find((tb) => tb.personIds?.has(id))) || list[1]
+// Barre des familles rangée comme l'arbre (Patch, 28/10, planche A variante 2 « le trait d'union ») : chaque
+// famille juste après celle par laquelle on y entre, la famille de départ en tête. Les onglets d'une même branche
+// (sous-arbre d'un enfant direct de la famille de départ) se serrent à 10 px, 16 px entre les branches ; un trait
+// relie deux voisins quand le second part du premier (jamais vers la famille de départ, sa place en tête suffit).
+// Le trait qui mène à l'onglet ouvert est terracotta, les autres couleur fil.
+function barTabs(tabs, activeKey) {
+  if (!tabs.length) return []
+  const root = tabs[0]
+  const kids = new Map()
+  for (const tb of tabs.slice(1)) { const pk = tabs.some((x) => x.key === tb.parentKey) ? tb.parentKey : root.key; if (!kids.has(pk)) kids.set(pk, []); kids.get(pk).push(tb) }
+  const order = []
+  const visit = (tb) => { order.push(tb); for (const c of kids.get(tb.key) || []) visit(c) }
+  visit(root)
+  for (const tb of tabs) if (!order.includes(tb)) order.push(tb)
+  const byKey = new Map(tabs.map((tb) => [tb.key, tb]))
+  const pathTo = (tb) => { const out = []; for (let t = tb; t; t = byKey.get(t.parentKey)) out.unshift(t.key); return out }
+  const branchOf = (tb) => { const p = pathTo(tb); return p[1] || p[0] }
+  const active = byKey.get(activeKey) || root
+  const lit = new Set(pathTo(active))
+  return order.map((tb, i) => {
+    const prev = order[i - 1]
+    const gap = i === 0 ? 0 : (prev !== root && branchOf(tb) === branchOf(prev) ? 10 : 16)
+    const trait = i > 0 && prev !== root && tb.parentKey === prev.key ? (lit.has(tb.key) ? 'on' : 'off') : null
+    return { tb, gap, trait }
+  })
 }
-const barTabsOf = (list, showAll) => (showAll ? (list.length > 1 ? list : []) : (list.length > 2 ? list.slice(1) : []))
 
-const Galaxy = ({ onPersonSelect, onMediaSelect, selectedPersonId, searchHighlightIds = [], graphRevision = 0, annotationHandlers = null, transformReadRef = null, zoomApiRef = null, focusPersonId = null, assetRevision = 0, reorderEnabled = false, onReorderSiblings = null, familyTabs = true, tabMinCount = 8, showAllTab = false, fullNames = false, annotationViewRef = null, onAnnotationsAnchored = null, selfPersonId = null, ghosts = null, initialFamilyKey = null, onFamilyChange = null }) => {
+const Galaxy = ({ onPersonSelect, onMediaSelect, selectedPersonId, searchHighlightIds = [], graphRevision = 0, annotationHandlers = null, transformReadRef = null, zoomApiRef = null, focusPersonId = null, assetRevision = 0, reorderEnabled = false, onReorderSiblings = null, familyTabs = true, tabMinCount = 8, fullNames = false, annotationViewRef = null, onAnnotationsAnchored = null, selfPersonId = null, ghosts = null, initialFamilyKey = null, onFamilyChange = null }) => {
   const canvasRef = useRef(null)
   const layoutDataRef = useRef(null)
-  // Onglets de familles (réglage `familyTabs`, galaxy/nameTabs.js) : « Tout l'arbre » puis un onglet par nom de
-  // famille assez porté, calculés une fois par version du graphe et par seuil, et l'onglet ouvert
+  // Onglets de familles (réglage `familyTabs`) : la liste des familles de l'arbre, calculée une fois par
+  // version du graphe et par personne de départ, et l'onglet ouvert. Un onglet est le sous-arbre d'une
+  // grande belle-famille, posé avec le conjoint charnière comme référence.
   const [tabs, setTabs] = useState([])
   const [activeKey, setActiveKey] = useState(null)
-  const [openKey, setOpenKey] = useState(null) // onglet réellement ouvert (resolveTab), allumé dans la barre
   const tabsCacheRef = useRef({ rev: -1, min: null, tabs: [] })
   const pendingFocusRef = useRef(null) // personne cherchée dans un autre onglet, visée après le changement
   const pendingFrameRef = useRef(null) // personnes à cadrer une fois l'arbre reposé (ajout de plusieurs prénoms)
-  // Lien d'un onglet (?famille=<ancêtre de la branche>) : ouvert dès que l'arbre et ses onglets sont connus, et de nouveau si
+  // Lien d'un onglet (?famille=<charnière>) : ouvert dès que l'arbre et ses onglets sont connus, et de nouveau si
   // la personne de départ arrive après (visiteur), tant qu'on n'a pas soi-même changé d'onglet
   const linkFamilyRef = useRef(initialFamilyKey != null ? String(initialFamilyKey) : null)
   const pendingFamilyRef = useRef(initialFamilyKey != null ? String(initialFamilyKey) : null)
-  // Famille du lien sans onglet dans ce navigateur (onglets coupés, ancien lien) : l'arbre entier s'ouvre sur cette personne
+  // Famille du lien sans onglet dans ce navigateur (onglets coupés) : l'arbre entier s'ouvre sur sa charnière
   const frameOnRef = useRef(null)
   const onFamilyChangeRef = useRef(onFamilyChange)
   useEffect(() => { onFamilyChangeRef.current = onFamilyChange }, [onFamilyChange])
@@ -152,6 +166,7 @@ const Galaxy = ({ onPersonSelect, onMediaSelect, selectedPersonId, searchHighlig
     return () => window.removeEventListener('resize', updateTabsEdges)
   }, [activeKey, tabs, updateTabsEdges])
   // Clic sur un badge : l'onglet de cette famille (ou, depuis un onglet, celui d'où l'on vient)
+  const openFamily = useCallback((tabKey) => { if (tabKey != null) chooseTab(String(tabKey)) }, [chooseTab])
   // Propriétaire : un portrait vide survolé montre « + photo »
   const [layoutReady, setLayoutReady] = useState(false)
   const transformRef = useRef({ x: 0, y: 0, scale: 1 })
@@ -245,7 +260,7 @@ const Galaxy = ({ onPersonSelect, onMediaSelect, selectedPersonId, searchHighlig
     canvasRef, transformRef, targetTransformRef,
     layoutDataRef, nodeRandomDataRef, entranceRef,
     hoveredNodeIdRef: hoveredNodeId, hoveredMediaKeyRef: hoveredMediaKey, mouseWorldPosRef: mouseWorldPos,
-    getAnimatedPos, onPersonSelect, onMediaSelect,
+    getAnimatedPos, onPersonSelect, onMediaSelect, onOpenFamily: openFamily,
     annotationHandlers,
     minScale: MIN_SCALE,
     maxScale: MAX_SCALE,
@@ -298,7 +313,7 @@ const Galaxy = ({ onPersonSelect, onMediaSelect, selectedPersonId, searchHighlig
       unions: src.unions,
       filiations: filiationsWithOrder(src.filiations, src.unions, group.source, order),
     }
-    const result = computeBlockLayout(graph, focusPersonIdRef.current)
+    const result = computeBlockLayout(graph, focusPersonIdRef.current, { familyTabs: false })
     const baseSource = base.children.find((n) => n.id === group.source)
     const source = result.children.find((n) => n.id === group.source)
     const shift = baseSource && source ? baseSource.x - source.x : 0
@@ -488,7 +503,7 @@ const Galaxy = ({ onPersonSelect, onMediaSelect, selectedPersonId, searchHighlig
       if (!node && familyTabsRef.current) {
         const id = String(personId)
         const all = tabsCacheRef.current.tabs
-        const home = all.find((tb) => tb.personIds?.has(id)) || all[0]
+        const home = all.find((tb) => tb.personIds?.has(id) && !(tb.hinges || []).map(String).includes(id)) || all.find((tb) => tb.personIds?.has(id)) || all[0]
         if (home && home.key !== activeTabRef.current?.key) { pendingFocusRef.current = id; chooseTab(home.key) }
         return
       }
@@ -580,7 +595,7 @@ const Galaxy = ({ onPersonSelect, onMediaSelect, selectedPersonId, searchHighlig
       setTabs(list)
     }
     if (!familyTabs && cache.tabs.length) { tabsCacheRef.current = { rev: -1, min: null, tabs: [] }; setTabs([]) }
-    // La famille du lien : son onglet s'il existe dans ce navigateur, sinon l'arbre entier ouvert sur cette personne
+    // La famille du lien : son onglet s'il existe dans ce navigateur, sinon l'arbre entier ouvert sur sa charnière
     if (pendingFamilyRef.current != null && graphPersons.length) {
       const key = pendingFamilyRef.current
       pendingFamilyRef.current = null
@@ -589,9 +604,8 @@ const Galaxy = ({ onPersonSelect, onMediaSelect, selectedPersonId, searchHighlig
         if (key !== activeKey) { setActiveKey(key); return }
       } else frameOnRef.current = key
     }
-    const tab = familyTabs ? resolveTab(tabsCacheRef.current.tabs, activeKey, showAllTab, selfPersonId ?? startRefRef.current) : null
+    const tab = familyTabs ? (tabsCacheRef.current.tabs.find((tb) => tb.key === activeKey) || tabsCacheRef.current.tabs[0] || null) : null
     activeTabRef.current = tab
-    setOpenKey(tab?.key ?? null)
     // La personne de départ (ou l'ancêtre de la branche ouverte) sert de référence aux rangées
     focusPersonIdRef.current = tab?.referenceId ?? startRefRef.current
     // Dans l'onglet d'une autre famille, la personne commune (« C'est moi », sinon la personne de départ) reste
@@ -606,8 +620,8 @@ const Galaxy = ({ onPersonSelect, onMediaSelect, selectedPersonId, searchHighlig
     // Annotations d'avant l'ancrage (x, y seuls) : rattachées une fois à la personne la plus proche dans le
     // placement de l'onglet de départ, puis enregistrées. Calculé avant l'arbre affiché (coupleBarMeta, voir plus haut)
     const legacy = annotationData.some((a) => !readAnchor(a))
-    const departure = legacy && USE_BLOCK_LAYOUT && graph ? computeBlockLayout(null, startRefRef.current) : null
-    const result = USE_BLOCK_LAYOUT ? computeBlockLayout(graph, focusPersonIdRef.current) : computeLayout(null, focusPersonIdRef.current)
+    const departure = legacy && USE_BLOCK_LAYOUT && graph ? computeBlockLayout(null, startRefRef.current, { familyTabs: false }) : null
+    const result = USE_BLOCK_LAYOUT ? computeBlockLayout(graph, focusPersonIdRef.current, { familyTabs: false }) : computeLayout(null, focusPersonIdRef.current)
     if (legacy) {
       const anchored = anchorLegacy(annotationData, layoutCenters(departure || result))
       for (const ann of anchored) updateAnnotationInStore(ann.id, { style: ann.style })
@@ -783,16 +797,14 @@ const Galaxy = ({ onPersonSelect, onMediaSelect, selectedPersonId, searchHighlig
       pendingFrameRef.current = null
       requestAnimationFrame(() => zoomApiRef?.current?.focusPersons?.(ids))
     }
-  }, [graphRevision, activeKey, familyTabs, tabMinCount, showAllTab, selfPersonId, ghosts])
+  }, [graphRevision, activeKey, familyTabs, tabMinCount, selfPersonId, ghosts])
 
   // Onglet ouvert, remonté pour l'adresse de la page et le lien de partage ; null pour la famille de départ
   useEffect(() => {
     if (pendingFamilyRef.current != null) return
-    const home = selfPersonId ?? startRefRef.current
-    const open = familyTabs && barTabsOf(tabs, showAllTab).length ? resolveTab(tabs, activeKey, showAllTab, home) : null
-    const byDefault = resolveTab(tabs, null, showAllTab, home)
-    onFamilyChangeRef.current?.(open && open !== byDefault && !open.all ? { key: open.key, label: open.label } : null)
-  }, [activeKey, tabs, familyTabs, showAllTab, selfPersonId])
+    const open = familyTabs && tabs.length > 1 ? tabs.find((tb) => tb.key === activeKey) : null
+    onFamilyChangeRef.current?.(open && open !== tabs[0] ? { key: open.key, label: open.label } : null)
+  }, [activeKey, tabs, familyTabs])
 
   // Sync selectedPersonId
   useEffect(() => {
@@ -1256,15 +1268,16 @@ const Galaxy = ({ onPersonSelect, onMediaSelect, selectedPersonId, searchHighlig
     {displayLabel && (
       <div className="path-label-overlay">{displayLabel}</div>
     )}
-    {familyTabs && barTabsOf(tabs, showAllTab).length > 0 && (
+    {familyTabs && tabs.length > 1 && (
       <nav ref={tabsBarRef} onScroll={updateTabsEdges} className={`family-tabs${annotationHandlers ? ' family-tabs--lowered' : ''}${tabsEdges}`} aria-label={tr('Familles')}>
-        {barTabsOf(tabs, showAllTab).map((tb) => {
-          const active = tb.key === openKey
+        {barTabs(tabs, activeKey).map(({ tb, gap, trait }) => {
+          const active = tb.key === (tabs.some((x) => x.key === activeKey) ? activeKey : tabs[0].key)
           return (
             <button
               key={tb.key}
               type="button"
-              className={`family-tab${active ? ' is-active' : ''}`}
+              style={gap ? { marginLeft: gap } : undefined}
+              className={`family-tab${active ? ' is-active' : ''}${trait ? ` family-tab--suite family-tab--trait-${trait}` : ''}`}
               aria-current={active ? 'page' : undefined}
               onClick={() => chooseTab(tb.key)}
               onMouseEnter={() => { if (!active) hoverTab(tb.key) }}
diff --git a/frontend/src/components/SettingsPanels.css b/frontend/src/components/SettingsPanels.css
index c4dc54b..ec5f104 100644
--- a/frontend/src/components/SettingsPanels.css
+++ b/frontend/src/components/SettingsPanels.css
@@ -309,5 +309,3 @@
 .ts-min-count input[type=range] { width: 100%; max-width: 320px; accent-color: var(--pz-a500); }
 .ts-tab-preview { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; color: var(--pz-faint); }
 .ts-tab-preview small { font-variant-numeric: tabular-nums; opacity: 0.7; }
-.ts-check { display: flex; align-items: center; gap: 8px; color: var(--pz-ink); cursor: pointer; }
-.ts-check input { accent-color: var(--pz-a500); width: 16px; height: 16px; }
diff --git a/frontend/src/components/galaxy/blockLayout.js b/frontend/src/components/galaxy/blockLayout.js
index 750ca3d..bb6faf4 100644
--- a/frontend/src/components/galaxy/blockLayout.js
+++ b/frontend/src/components/galaxy/blockLayout.js
@@ -42,6 +42,18 @@ const RENVOI_FAR_PX = 1440
 const PARENT_SHIFT_PX = 400
 // Côté d'une belle-famille : le côté extérieur de la branche, sauf si l'autre côté la rapproche d'au moins ça
 const SIDE_SWITCH_PX = 1440
+// Carte de famille et pont (maquette A, retenue le 19/10). Une belle-famille plus large que ça ne se colle pas à
+// son enfant : elle devient un cluster dessiné à part, et une carte prend sa place au-dessus du conjoint
+// Une belle-famille plus large que ça n'est pas dessinée dans cet arbre : elle devient un onglet (son propre
+// arbre, calculé avec le conjoint comme référence) et le conjoint porte un badge vers elle.
+const FAMILY_TAB_PX = 2880
+// Une belle-famille poussée plus loin que ça de son enfant ne se colle pas : seuls les parents du conjoint
+// restent au-dessus de lui, le reste devient un onglet
+const FAMILY_FIT_PX = 480
+// Une belle-famille qui grimpe au-dessus des parents du conjoint reste dessinée si elle est toute petite
+const FAMILY_INLINE_MAX = 6
+// En dessous, une famille sortie de l'arbre ne fait pas d'onglet : elle reste dessinée
+const FAMILY_TAB_MIN = 10
 
 // Le fil d'une filiation union → enfant : une personne d'une autre famille, sur la ligne de l'enfant,
 // entre l'aplomb de l'union et l'enfant, est croisée. Frères et sœurs et leurs conjoint(e)s ne comptent pas
@@ -85,34 +97,50 @@ const overlaps = (l, r, list, gap) => list.some(([a, b]) => l < b + gap && r > a
 // Règle globale (Patch, 19/10) : l'arbre s'ouvre à partir de la personne de référence. Toute belle-famille,
 // grosse ou petite, part du côté opposé à la référence (à droite pour un conjoint à sa droite), le couple se
 // tourne vers elle. Ce côté ne se connaît qu'une fois la lignée posée, d'où une seconde passe.
-export function computeBlockLayout(graphData = null, referenceId = null) {
+// `familyTabs` : vrai, une belle-famille trop large devient un onglet ; faux, tout l'arbre est dessiné d'un
+// tenant (mode « tout l'arbre »), les grandes familles sont seulement signalées dans `families`.
+export function computeBlockLayout(graphData = null, referenceId = null, { familyTabs = true } = {}) {
   const forced = new Map()
-  let result = layoutOnce(graphData, referenceId, forced)
+  let result = layoutOnce(graphData, referenceId, forced, familyTabs)
   // Chaque passe fixe le côté des belles-familles d'après la passe précédente ; on s'arrête dès que plus rien
   // ne change, ou après quatre passes (les positions bougent d'une passe à l'autre)
   for (let pass = 0; pass < 4 && result._inlaws?.length; pass++) {
     const byId = new Map(result.children.map(n => [n.id, n]))
     const persons = result.children.filter(n => n._type === 'person')
     // Pivot : le centre de la famille dessinée. La référence elle-même, souvent au bord (dernière génération,
-    // ou un conjoint), enverrait toutes les belles-familles du même côté (Patch, 19/10 : « moins clair »)
+    // charnière d'un onglet), enverrait toutes les belles-familles du même côté (Patch, 19/10 : « moins clair »)
     const pivot = persons.length ? (Math.min(...persons.map(n => n.x)) + Math.max(...persons.map(n => n.x + n.width))) / 2 : 0
     let changed = false
     for (const { anchorId, side } of result._inlaws) {
       const a = byId.get(anchorId)
-      if (!a) continue
+      if (!a) continue // conjoint d'une famille devenue onglet : pas dans cet arbre
       const want = a.x + a.width / 2 < pivot ? -1 : 1
       if (want !== side && forced.get(anchorId) !== want) { forced.set(anchorId, want); changed = true }
     }
     if (!changed) break
-    result = layoutOnce(graphData, referenceId, forced)
+    result = layoutOnce(graphData, referenceId, forced, familyTabs)
   }
   return result
 }
 
-function layoutOnce(graphData, referenceId, forcedSide) {
+function layoutOnce(graphData, referenceId, forcedSide, familyTabs = true) {
   const result = computeLayout(graphData, referenceId)
   const nodes = result.children
   const byId = new Map(nodes.map(n => [n.id, n]))
+  // Nom d'une famille : celui que portent le plus ses membres (nom de naissance, sinon nom), pas celui de la seule
+  // personne de référence. Ex. : 175 personnes dont 5 portent le nom de la référence. Égalité : le nom
+  // de secours (celui de la référence) s'il est parmi les premiers, sinon le premier rencontré.
+  const nomMajoritaire = (ids, secours = '') => {
+    const n = new Map()
+    for (const id of ids) {
+      const d = byId.get(id)?._type === 'person' ? byId.get(id)._data : null
+      const nom = (d?.birthName || d?.lastName || '').trim()
+      if (nom) n.set(nom, (n.get(nom) || 0) + 1)
+    }
+    let best = '', max = 0
+    for (const [nom, c] of n) if (c > max) { best = nom; max = c }
+    return secours && n.get(secours) === max ? secours : (best || secours)
+  }
 
   // Chaînes de couples (composantes d'une rangée) telles que computeLayout les a ordonnées
   const chainOf = new Map()
@@ -218,6 +246,10 @@ function layoutOnce(graphData, referenceId, forcedSide) {
   const placed = new Set()
   const externalEdges = new Set() // `${union}>${enfant}` : enfant dessiné sous une autre lignée
   const detached = [] // familles qu'on n'a pas pu coller à leur enfant (trop loin) : posées à part, renvoi
+  const tabs = [] // belles-familles trop larges pour cet arbre, devenues onglets : { anchorId, pu, label, count, members }
+  const hiddenChains = new Set() // chaînes des familles devenues onglets : pas dessinées dans cet arbre
+  const tabOfChain = new Map() // chaîne cachée → son onglet : un second conjoint de la même famille renvoie au même onglet
+  const bigFamilies = [] // mode « tout l'arbre » : les familles qui seraient des onglets, dessinées quand même
   const attachedEdges = new Set() // `${union}>${enfant}` : fil d'une famille collée à son enfant, toujours dessiné
 
   // Imbrique des blocs de gauche à droite, rangée par rangée
@@ -288,8 +320,25 @@ function layoutOnce(graphData, referenceId, forcedSide) {
 
   // `outer` : côté extérieur hérité de la lignée (−1 gauche, +1 droite). Les belles-familles d'une branche vont
   // toutes du même côté, celui où la branche est au bord de l'arbre, pour ne pas se poser entre deux familles.
+  // Défaire ce qu'une construction a posé : chaînes, onglets nés pendant elle, arêtes externes notées
+  const chainsOf = (members) => new Set([...members].map(m => chainOf.get(m)).filter(Boolean))
+  const unplace = (members) => { for (const ch of chainsOf(members)) { placed.delete(ch); hiddenChains.delete(ch); tabOfChain.delete(ch) } }
+  const forgetTabs = (from, to) => {
+    const nested = new Set()
+    for (const tb of tabs.splice(from, to - from)) {
+      unplace(tb.members)
+      for (const m of tb.members) nested.add(m)
+      for (const h of tb.hinges) { byId.get(h)._familyTab = null; nested.add(h) }
+      byId.get(tb.anchorId)._familyTab = null
+    }
+    return nested
+  }
+  const forgetExternal = (before, after) => { for (const e of after) if (!before.has(e)) externalEdges.delete(e) }
+  const registerTab = (tab) => { tabs.push(tab); for (const ch of chainsOf(tab.members)) { hiddenChains.add(ch); tabOfChain.set(ch, tab) } }
 
-  function buildBlock(chain, ownerUnion = null, outer = 0) {
+  // `parentsOnly` : la chaîne est au milieu de sa fratrie, les belles-familles de ses conjoints se réduisent
+  // aux parents au-dessus du conjoint, le reste devient un onglet
+  function buildBlock(chain, ownerUnion = null, outer = 0, parentsOnly = false) {
     placed.add(chain)
     const gen = genOf(chain)
     const childBlocks = []
@@ -312,6 +361,8 @@ function layoutOnce(graphData, referenceId, forcedSide) {
       // Belle-famille en construction : une chaîne dont aucun membre du sang n'est enfant de cette union, mais
       // dont un membre du sang a ses parents ailleurs, ira sous ces parents-là (le sang de la référence gagne)
       const duSang = anchor && !kc.some(id => blood.has(id) && parentUnionOf.get(id) === unionId) && kc.some(id => blood.has(id) && byId.get(id)._type === 'person' && parentUnionOf.has(id))
+      // Un enfant parti dans un onglet ne laisse pas de place vide : ses parents se centrent sur les enfants dessinés
+      if (tabOfChain.has(kc)) return
       if (placed.has(kc) || duSang) {
         external.push({ kid, unionId })
         externalEdges.add(`${unionId}>${kid}`)
@@ -319,8 +370,10 @@ function layoutOnce(graphData, referenceId, forcedSide) {
         return
       }
       const side = sideOfUnion(unionId) || outer || (i < (kidsOfChain.length - 1) / 2 ? -1 : 1)
+      const snap = { tabsBefore: tabs.length, externalBefore: new Set(externalEdges) }
       const b = buildBlock(kc, unionId, side)
-      childBlocks.push({ ...b, unionId, kid, side })
+      snap.tabsAfter = tabs.length; snap.externalAfter = new Set(externalEdges)
+      childBlocks.push({ ...b, unionId, kid, side, snap })
     })
     // Un enfant dont le conjoint amène sa famille va au bout de la fratrie, de son côté : sa belle-famille,
     // qui fait partie de son bloc, se retrouve au bord, sans survoler ses frères et sœurs. L'ordre de
@@ -339,6 +392,20 @@ function layoutOnce(graphData, referenceId, forcedSide) {
       const i = kids.findIndex(b => b.kid != null && anchor.path.has(chainOf.get(b.kid)))
       if (i >= 0) { const [b] = kids.splice(i, 1); if (anchor.end === 'right') kids.push(b); else kids.unshift(b) }
     }
+    // Règle du bout (Patch, 19/10 soir) : seule une belle-famille au bout de la fratrie est dessinée entière.
+    // Un enfant marié au milieu de sa fratrie est rebâti avec les seuls parents de son conjoint au-dessus de
+    // lui, le reste de la belle-famille devient un onglet. Ainsi aucun fil ne passe sous une autre famille.
+    const middle = kids.map((b, i) => ({ b, i })).filter(({ b, i }) => i > 0 && i < kids.length - 1 && !b.ghost && b.attachBig)
+    middle.sort((x, y) => y.b.snap.tabsBefore - x.b.snap.tabsBefore)
+    for (const { b, i } of middle) {
+      forgetTabs(b.snap.tabsBefore, b.snap.tabsAfter)
+      unplace(b.members)
+      forgetExternal(b.snap.externalBefore, b.snap.externalAfter)
+      const snap = { tabsBefore: tabs.length, externalBefore: new Set(externalEdges) }
+      const nb = buildBlock(chainOf.get(b.kid), b.unionId, b.side, true)
+      snap.tabsAfter = tabs.length; snap.externalAfter = new Set(externalEdges)
+      kids[i] = { ...nb, unionId: b.unionId, kid: b.kid, side: b.side, snap }
+    }
     childBlocks.length = 0
     childBlocks.push(...kids)
     const packed = packBlocks(childBlocks, FAMILY_GAP)
@@ -350,6 +417,33 @@ function layoutOnce(graphData, referenceId, forcedSide) {
     // déjà dessinée (reliée deux fois) ne l'est pas une seconde fois : la filiation reste externe, renvoi si
     // son fil croise une autre famille.
     const built = []
+    // Réduire une belle-famille à ses seuls parents : frères, sœurs et ancêtres du conjoint deviennent un onglet
+    // dont les parents sont les charnières (badge sur eux), puis les parents seuls sont rebâtis au-dessus du conjoint
+    function reduceToParents(entry) {
+      const { block, anchorId: id, side, pu, pc, snap } = entry
+      const pcPersons = pc.filter(x => byId.get(x)._type === 'person')
+      const keep = new Set(pcPersons)
+      const extra = [...block.members].filter(m => byId.get(m)?._type === 'person' && !keep.has(m) && chainOf.get(m) !== pc)
+      // Une famille de FAMILY_TAB_MIN personnes ou moins reste dessinée : pas d'onglet pour si peu (Patch, 20/10)
+      if (extra.length <= FAMILY_TAB_MIN) return block
+      const nested = forgetTabs(snap.tabsBefore, snap.tabsAfter)
+      unplace(block.members)
+      forgetExternal(snap.externalBefore, snap.externalAfter)
+      const A = byId.get(id)
+      const members = new Set([...extra, ...nested].filter(m => !keep.has(m)))
+      const label = nomMajoritaire(members, A._data?.birthName || byId.get(pcPersons[0])?._data?.lastName || A._data?.lastName || '')
+      registerTab({ anchorId: pcPersons[0], pu: parentUnionOf.get(pcPersons[0]) || pu, label, count: members.size, members, hinges: pcPersons.slice(1), hingeEdges: [] })
+      for (const x of pcPersons) byId.get(x)._familyTab = { anchorId: pcPersons[0], label, count: members.size, tabKey: pcPersons[0].replace(/^p-/, ''), place: 'above' }
+      const saved = anchor
+      anchor = { kid: id, end: side < 0 ? 'right' : 'left', path: pathOf(id) }
+      snap.tabsBefore = tabs.length
+      snap.externalBefore = new Set(externalEdges)
+      const nb = buildBlock(pc, null, side)
+      snap.tabsAfter = tabs.length
+      snap.externalAfter = new Set(externalEdges)
+      anchor = saved
+      return nb
+    }
     // L'enfant de la lignée dans cette chaîne (celui dont les parents sont ownerUnion), s'il est seul
     const kidsHere = chain.filter(id => byId.get(id)._type === 'person' && ownerUnion && parentUnionOf.get(id) === ownerUnion)
     const kidOfChain = kidsHere.length === 1 ? kidsHere[0] : null
@@ -361,14 +455,65 @@ function layoutOnce(graphData, referenceId, forcedSide) {
       if (placed.has(pc)) continue
       const top = topChainOf(pc)
       if (placed.has(top)) continue
+      const owner = tabOfChain.get(top) || tabOfChain.get(pc)
+      if (owner) {
+        // Sa famille est déjà un onglet (un autre conjoint l'a amenée) : même badge, même onglet
+        const A = byId.get(id)
+        A._familyTab = { anchorId: owner.anchorId, label: owner.label, count: owner.count, tabKey: owner.anchorId.replace(/^p-/, ''), place: 'above' }
+        owner.hinges.push(id)
+        owner.hingeEdges.push([pu, id])
+        continue
+      }
       // Le côté extérieur de la branche prime : une branche au bout de sa fratrie pose ses belles-familles au-delà,
       // jamais dans la fratrie des aînés (Patch, 20/10 : la branche de Paul à droite d'Eugénie)
       const side = (chain.length === 3 && outer) ? outer : (forcedSide.get(id) ?? (chain.length > 3 ? (chain.indexOf(id) < chain.length / 2 ? -1 : 1) : (chain.indexOf(id) < chain.length / 2 ? -1 : 1)))
       const saved = anchor
+      const tabsBefore = tabs.length
+      const externalBefore = new Set(externalEdges)
       anchor = { kid: id, end: side < 0 ? 'right' : 'left', path: pathOf(id) }
-      const block = buildBlock(top, null, side)
+      let block = buildBlock(top, null, side)
       anchor = saved
-      const entry = { block, anchorId: id, side, pu, pc }
+      if (block.width > FAMILY_TAB_PX && !familyTabs) {
+        const A = byId.get(id)
+        bigFamilies.push({ anchorId: id, label: nomMajoritaire(block.members, A._data?.birthName || A._data?.lastName || ''), count: [...block.members].filter(m => byId.get(m)?._type === 'person').length })
+      }
+      if (block.width > FAMILY_TAB_PX && familyTabs) {
+        // Trop large pour cet arbre : la famille devient un onglet et n'est pas dessinée ici. Sa construction ne
+        // laisse aucune trace (onglets imbriqués, chaînes posées, arêtes externes), et le fil de ses parents
+        // vers le conjoint est caché : c'est le badge du conjoint qui dit où est sa famille.
+        // Les onglets nés pendant cette construction (familles emboîtées) rejoignent celle-ci : son onglet les
+        // retrouvera en se dessinant, avec ses propres onglets
+        const nested = forgetTabs(tabsBefore, tabs.length)
+        unplace(block.members)
+        forgetExternal(externalBefore, new Set(externalEdges))
+        const A = byId.get(id)
+        const partners = [byId.get(pu)?._data?.p1Key, byId.get(pu)?._data?.p2Key].map(k => byId.get(k)?._data).filter(Boolean)
+        const members = new Set([...[...block.members].filter(m => byId.get(m)?._type === 'person'), ...nested])
+        const label = nomMajoritaire(members, A._data?.birthName || partners.find(d => d.lastName)?.lastName || A._data?.lastName || '')
+        registerTab({ anchorId: id, pu, label, count: members.size, members, hinges: [], hingeEdges: [[pu, id]] })
+        A._familyTab = { anchorId: id, label, count: members.size, tabKey: id.replace(/^p-/, ''), place: 'above' }
+        continue
+      }
+      const entry = { block, anchorId: id, side, pu, pc, snap: { tabsBefore, tabsAfter: tabs.length, externalBefore, externalAfter: new Set(externalEdges) } }
+      // Une belle-famille collée ne déborde pas, au-dessus de la rangée des parents du conjoint, de la place de
+      // ces parents : des ancêtres plus larges grimperaient dans les rangées des aînés de la lignée et s'y
+      // glisseraient entre deux frères (Patch, 20/10, Marc et Sophie entre Anaïs et Germaine). Les parents
+      // restent, le reste devient un onglet. Des ancêtres en colonne au-dessus des parents restent dessinés.
+      // Une toute petite famille (jusqu'à FAMILY_INLINE_MAX personnes au-delà des parents) reste dessinée,
+      // à condition que ce qui est au-dessus des parents tienne dans leur largeur (une colonne d'ancêtres),
+      // sinon elle déborderait dans les rangées des aînés (Paul et ses frères dans la fratrie de Catherine)
+      const deep = [...block.rows.keys()].some(g => g < gen - 1)
+      const beyondParents = deep ? [...block.members].filter(m => byId.get(m)?._type === 'person' && chainOf.get(m) !== pc).length : 0
+      // Au-dessus des parents, seuls les ancêtres en ligne directe du conjoint sont admis : des oncles ou tantes
+      // élargiraient ces rangées et la famille se glisserait dans la fratrie des aînés de la lignée
+      const ancestors = new Set()
+      for (const stack = [id]; stack.length;) {
+        const u = parentUnionOf.get(stack.pop())
+        if (!u) continue
+        for (const k of [byId.get(u)?._data?.p1Key, byId.get(u)?._data?.p2Key]) if (k && !ancestors.has(k)) { ancestors.add(k); stack.push(k) }
+      }
+      const collaterals = deep && [...block.members].some(m => { const n = byId.get(m); return n?._type === 'person' && n._generation < gen - 1 && !ancestors.has(m) })
+      if (parentsOnly || (deep && (beyondParents > FAMILY_INLINE_MAX || collaterals))) entry.block = reduceToParents(entry)
       built.push(entry)
       orient(chain, kidOfChain ?? (chain.length === 3 ? (chain[0] === id ? chain[2] : chain[0]) : null), side)
     }
@@ -494,7 +639,14 @@ function layoutOnce(graphData, referenceId, forcedSide) {
       }
       return res
     }
-    const result = placeBest()
+    let result = placeBest()
+    // 3) Une belle-famille qui ne se colle pas à son enfant (poussée de plus de FAMILY_FIT_PX) se réduit aux
+    //    parents du conjoint, le reste devient un onglet, et tout se pose à nouveau
+    const tooFar = result.list.map((a, i) => ({ a, p: built[i] })).filter(({ a, p }) => Math.abs(a.x - a.ideal) > FAMILY_FIT_PX && p.block.rows.size > 1)
+    if (tooFar.length) {
+      for (const { p } of [...tooFar].sort((u, v) => v.p.snap.tabsBefore - u.p.snap.tabsBefore)) p.block = reduceToParents(p)
+      result = placeBest()
+    }
     rows.clear()
     for (const [g, l] of result.rows) rows.set(g, l)
     const attachments = result.list.map(a => ({ block: a.block, x: a.x }))
@@ -502,6 +654,8 @@ function layoutOnce(graphData, referenceId, forcedSide) {
       attachedEdges.add(`${parentUnionOf.get(a.anchorId)}>${a.anchorId}`)
     }
     const attachSide = built.length ? (built.every(p => p.side < 0) ? -1 : built.every(p => p.side > 0) ? 1 : 0) : 0
+    // Une belle-famille attachée qui dépasse les seuls parents (frères et sœurs ou ancêtres du conjoint)
+    const attachBig = attachments.some(a => a.block.rows.size > 1)
     for (const p of built) inlaws.push({ anchorId: p.anchorId, side: p.side })
 
     const members = new Set(chain)
@@ -534,7 +688,7 @@ function layoutOnce(graphData, referenceId, forcedSide) {
       return null
     }
     return {
-      rows, members, external, gen, rel, attachSide,
+      rows, members, external, gen, rel, attachSide, attachBig,
       chain: [rowX, rowX + rowW],
       width: extentOf(rows)[1],
       place(x0) {
@@ -573,11 +727,27 @@ function layoutOnce(graphData, referenceId, forcedSide) {
     (isBloodChain(b) - isBloodChain(a)) || countDesc(b) - countDesc(a) || genOf(a) - genOf(b) || birthYearOf(a) - birthYearOf(b) || String(a[0]).localeCompare(String(b[0]))
   ))
   const free = []
-  for (const r of roots) if (!placed.has(r)) free.push(buildBlock(r))
-  for (const c of chains) if (!placed.has(c)) free.push(buildBlock(c))
+  for (const r of roots) if (!placed.has(r) && !hiddenChains.has(r)) free.push(buildBlock(r))
+  for (const c of chains) if (!placed.has(c) && !hiddenChains.has(c)) free.push(buildBlock(c))
   free.push(...detached)
   const forest = packBlocks(free, FAMILY_GAP * 2)
   free.forEach((b, i) => b.place(forest.xs[i]))
+  const referenceNode = result.referenceId != null ? byId.get(`p-${result.referenceId}`) : null
+  // Le fil des parents d'un conjoint dont la famille est un onglet n'est pas dessiné : son badge dit où elle est
+  for (const tb of tabs) for (const [pu, id] of tb.hingeEdges) for (const e of result.edges) if (e.sources[0] === pu && e.targets[0] === id) e._hidden = true
+
+  // Les familles devenues onglets sortent de cet arbre : leurs nœuds et leurs arêtes ne sont pas dessinés
+  if (hiddenChains.size) {
+    const hidden = new Set([...hiddenChains].flatMap(ch => ch))
+    for (const n of nodes) if (n._type === 'unknown' && hidden.has(n.id.replace(/^unknown-/, 'p-'))) hidden.add(n.id)
+    result.children = nodes.filter(n => !hidden.has(n.id))
+    // Un onglet se propose depuis le badge d'un conjoint dessiné : ceux dont le conjoint est caché avec sa famille tombent
+    for (let i = tabs.length - 1; i >= 0; i--) if (hidden.has(tabs[i].anchorId)) tabs.splice(i, 1)
+    for (const tb of tabs) tb.hinges = tb.hinges.filter(h => !hidden.has(h))
+    result.edges = result.edges.filter(e => !hidden.has(e.sources[0]) && !hidden.has(e.targets[0]))
+    nodes.length = 0
+    nodes.push(...result.children)
+  }
   // Réinjecter le X, normalisé à 0 ; Y inchangé (rangées)
   let minX = Infinity
   for (const n of nodes) if (pos.has(n.id)) minX = Math.min(minX, pos.get(n.id))
@@ -658,6 +828,14 @@ function layoutOnce(graphData, referenceId, forcedSide) {
     for (const r of list) byId.get(r.id)._railLift = Math.min(4, liftOf(r.id))
   }
 
+  // Les familles de cet arbre : la lignée dessinée, puis chaque belle-famille devenue onglet. Galaxy en fait
+  // la barre d'onglets ; un onglet est le même arbre recalculé avec le conjoint comme référence.
+  const drawn = nodes.filter(n => n._type === 'person')
+  result.families = [
+    { id: 'main', label: nomMajoritaire(drawn.map(n => n.id), referenceNode?._data?.lastName || drawn[0]?._data?.lastName || ''), count: drawn.length, referenceId: result.referenceId ?? null },
+    ...tabs.map(tb => ({ id: tb.anchorId, anchorId: tb.anchorId, label: tb.label, count: tb.count, members: [...tb.members].map(m => m.replace(/^p-/, '')), hinges: [tb.anchorId, ...tb.hinges].map(m => m.replace(/^p-/, '')) })),
+    ...bigFamilies.map(f => ({ id: f.anchorId, anchorId: f.anchorId, label: f.label, count: f.count, members: [], drawn: true })),
+  ]
   result._inlaws = inlaws
 
   return result
diff --git a/frontend/src/components/galaxy/dessinComplet.test.js b/frontend/src/components/galaxy/dessinComplet.test.js
deleted file mode 100644
index a93242a..0000000
--- a/frontend/src/components/galaxy/dessinComplet.test.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { computeBlockLayout } from './blockLayout'
-import { generate } from '../../../../tools/layout-bench/gen-fr.mjs'
-
-// « Tout l'arbre » (onglets par nom) et « Pas d'onglets » dessinent l'arbre sans onglet par largeur : chaque
-// personne est là, aucune pastille, et deux personnes ne se chevauchent pas
-function overlaps(people) {
-  const boxes = people.map((n) => [n.x, n.y, n.x + n.width, n.y + n.height]).sort((a, b) => a[0] - b[0])
-  let n = 0
-  for (let i = 0; i < boxes.length; i++) {
-    for (let j = i + 1; j < boxes.length && boxes[j][0] < boxes[i][2] - 1; j++) {
-      if (boxes[j][1] < boxes[i][3] - 1 && boxes[i][1] < boxes[j][3] - 1) n++
-    }
-  }
-  return n
-}
-const cas = [['desc', 3], ['desc', 7], ['asc', 3], ['asc', 7]]
-describe('dessin complet, sans onglets par largeur', () => {
-  for (const [kind, seed] of cas) {
-    it(`${kind} graine ${seed}`, () => {
-      const tree = generate(kind, seed)
-      const { graph } = tree
-      const result = computeBlockLayout(graph, tree.rootPersonId)
-      const people = result.children.filter((n) => n._type === 'person')
-      expect(people.length).toBe(graph.persons.length)
-      expect(overlaps(people)).toBe(0)
-    })
-  }
-})
-
-// Une lignée (Duval) et la très grande famille d'un conjoint (Garnier : onze frères et sœurs en couple, trois
-// enfants chacun). Le placement par largeur la réduisait aux parents du conjoint, le reste caché derrière une
-// pastille, même en dessin complet (« Tout l'arbre 211 » qui n'était pas tout l'arbre, Patch, 07/11)
-function belleFamille() {
-  const persons = [], unions = [], filiations = []
-  const P = (id, firstName, lastName, y) => persons.push({ id, firstName, lastName, birthDate: `${y}-01-01` })
-  const U = (id, a, b) => unions.push({ id, partner1Id: a, partner2Id: b })
-  const L = (child, unionId) => filiations.push({ childId: child, unionId })
-  P('henri', 'Henri', 'Duval', 1920); P('odette', 'Odette', 'Duval', 1924); U('uA', 'henri', 'odette')
-  for (const k of ['paul', 'marc', 'julie']) { P(k, k, 'Duval', 1948); L(k, 'uA') }
-  P('jean', 'Jean', 'Garnier', 1925); P('marthe', 'Marthe', 'Garnier', 1927); U('uG', 'jean', 'marthe')
-  P('aieul', 'Aïeul', 'Garnier', 1895); P('aieule', 'Aïeule', 'Garnier', 1897); U('uAG', 'aieul', 'aieule'); L('jean', 'uAG')
-  P('oncle', 'Oncle', 'Garnier', 1922); L('oncle', 'uAG')
-  P('elodie', 'Élodie', 'Garnier', 1952); L('elodie', 'uG'); U('uM', 'marc', 'elodie')
-  for (const k of ['lola', 'noe']) { P(k, k, 'Duval', 1980); L(k, 'uM') }
-  for (let i = 0; i < 11; i++) {
-    P(`g${i}`, `G${i}`, 'Garnier', 1950 + i); L(`g${i}`, 'uG'); P(`c${i}`, `C${i}`, 'Martin', 1950 + i); U(`ug${i}`, `g${i}`, `c${i}`)
-    for (const k of [1, 2, 3]) { P(`k${i}${k}`, `K${i}${k}`, 'Garnier', 1978 + i); L(`k${i}${k}`, `ug${i}`) }
-  }
-  return { persons, unions, filiations }
-}
-describe('dessin complet, grande belle-famille', () => {
-  it('tout le monde est dessiné, sans pastille', () => {
-    const graph = belleFamille()
-    const result = computeBlockLayout(graph, 'henri')
-    const people = result.children.filter((n) => n._type === 'person')
-    expect(people.length).toBe(graph.persons.length)
-    expect(overlaps(people)).toBe(0)
-  })
-})
diff --git a/frontend/src/components/galaxy/elkLayout.js b/frontend/src/components/galaxy/elkLayout.js
index e794ddc..482db33 100644
--- a/frontend/src/components/galaxy/elkLayout.js
+++ b/frontend/src/components/galaxy/elkLayout.js
@@ -852,7 +852,7 @@ export function computeLayout(graphData = null, referenceId = null) {
 export function generateNodeRandomData(children, edges = []) {
   const data = new Map()
   // Enfant d'un renvoi : la pastille « Voir les parents » occupe le haut du portrait, l'orbite reste sur les côtés
-  const renvoiChildren = new Set(edges.filter(e => e._renvoi).map(e => e.targets[0]))
+  const renvoiChildren = new Set([...edges.filter(e => e._renvoi).map(e => e.targets[0]), ...children.filter(n => n._familyTab).map(n => n.id)])
   const deg = (d) => d * Math.PI / 180
   // Partenaire d'un conjoint isolé : ses souvenirs en orbite passent du côté opposé au petit portrait
   const compactSide = new Map()
diff --git a/frontend/src/components/galaxy/renderers.js b/frontend/src/components/galaxy/renderers.js
index f7eb56c..c02f0ee 100644
--- a/frontend/src/components/galaxy/renderers.js
+++ b/frontend/src/components/galaxy/renderers.js
@@ -206,7 +206,10 @@ export function drawCoupleLinks(ctx, coupleBarMeta, posMap, nodeMap, nodeRandomD
 // useGalaxyInteractions.
 // ============================================================
 export const renvoiHitAreas = []
+// Badges « Famille X » sous les conjoints dont la famille est un onglet : { x0, y0, x1, y1, anchorId }
+export const familyHitAreas = []
 const renvoiPills = []
+const familyPills = [] // badges « Famille X » : { text, cx, cy, anchorId, tabKey, alpha }
 const RENVOI_FONT = '500 11px "DM Sans", system-ui, sans-serif'
 // Pastilles collées aux personnes : juste sous le couple, juste au-dessus du portrait de l'enfant
 const RENVOI_PARENT_DY = 38
@@ -239,6 +242,11 @@ function drawRenvoiPill(ctx, { text, cx, cy, target, alpha }) {
   if (alpha > 0.5) renvoiHitAreas.push({ x0: cx - w / 2, y0: cy - h / 2, x1: cx + w / 2, y1: cy + h / 2, ...target })
 }
 
+function drawFamilyPill(ctx, { text, cx, cy, anchorId, tabKey, alpha }) {
+  const { w, h } = drawPillShape(ctx, text, cx, cy, alpha)
+  if (alpha > 0.5) familyHitAreas.push({ x0: cx - w / 2, y0: cy - h / 2, x1: cx + w / 2, y1: cy + h / 2, anchorId, tabKey })
+}
+
 function drawRenvoi(ctx, edge, sourcePos, targetPos, targetNode, childR, view) {
   const scale = view?.scale ?? 1
   const labelAlpha = Math.min(1, Math.max(0, (scale - LOD_LABEL_FADE_OUT) / (LOD_LABEL_FADE_IN - LOD_LABEL_FADE_OUT)))
@@ -260,6 +268,7 @@ function drawRenvoi(ctx, edge, sourcePos, targetPos, targetNode, childR, view) {
 
 // Après drawNodes : les pastilles passent au-dessus des portraits et des souvenirs
 export function drawRenvoiPills(ctx) {
+  for (const p of familyPills) drawFamilyPill(ctx, p)
   renvoiPills.forEach(p => drawRenvoiPill(ctx, p))
   renvoiPills.length = 0
 }
@@ -270,6 +279,8 @@ export function drawRenvoiPills(ctx) {
 export function drawFiliations(ctx, edges, posMap, nodeMap, nodeRandomData, entrance, entranceActive, elapsed, view = null) {
   renvoiHitAreas.length = 0
   renvoiPills.length = 0
+  familyPills.length = 0
+  familyHitAreas.length = 0
   if (!edges) return
   const sibships = new Map()
 
@@ -680,6 +691,19 @@ function drawPersonNode(ctx, node, pos, nodeProgress, {
   }
 
   ctx.restore()
+
+  // Sa famille est un onglet : une pastille le dit, un clic l'ouvre. Au-dessus du portrait, à la place de ses
+  // parents (l'orbite des souvenirs évite le haut). Même place pour le retour vers la famille d'où l'on vient :
+  // la charnière peut avoir des enfants dessous, jamais rien au-dessus que le fil de ses parents.
+  if (withDetail && node._familyTab) {
+    const tab = node._familyTab
+    // Retour vers la famille d'où l'on vient : même place que la pastille de l'aller (la charnière ne bouge pas),
+    // flèche retournée (Patch, 28/10, planche D)
+    const name = tab.label ? t('Famille {name}', { name: tab.label }) : t('Famille')
+    const text = tab.back ? `‹ ${name} · ${tab.count}` : `${name} · ${tab.count} ›`
+    const py = cy - PERSON_R * personScale - RENVOI_CHILD_GAP
+    familyPills.push({ text, cx, cy: py, anchorId: tab.anchorId, tabKey: tab.tabKey, alpha: nodeProgress * labelAlpha })
+  }
 }
 
 // ============================================================
diff --git a/frontend/src/components/galaxy/useGalaxyInteractions.js b/frontend/src/components/galaxy/useGalaxyInteractions.js
index 6ed3949..dd89f19 100644
--- a/frontend/src/components/galaxy/useGalaxyInteractions.js
+++ b/frontend/src/components/galaxy/useGalaxyInteractions.js
@@ -1,9 +1,10 @@
 import { useRef, useCallback } from 'react'
 import { getPersonMedias } from '../../data/mockData'
 import { MAX_ORBIT_MEDIAS, ORBIT_MEDIA_SIZE } from './constants'
-import { nodeRadius, renvoiHitAreas } from './renderers'
+import { nodeRadius, renvoiHitAreas, familyHitAreas } from './renderers'
 
 const hitRenvoi = (x, y) => renvoiHitAreas.find(a => x >= a.x0 && x <= a.x1 && y >= a.y0 && y <= a.y1)
+const hitFamily = (x, y) => familyHitAreas.find(a => x >= a.x0 && x <= a.x1 && y >= a.y0 && y <= a.y1)
 import { getEntranceProgress } from './utils'
 
 const CURSOR_GRAB = 'default'
@@ -21,7 +22,7 @@ export function useGalaxyInteractions({
   canvasRef, transformRef, targetTransformRef,
   layoutDataRef, nodeRandomDataRef, entranceRef,
   hoveredNodeIdRef, hoveredMediaKeyRef, mouseWorldPosRef,
-  getAnimatedPos, onPersonSelect, onMediaSelect,
+  getAnimatedPos, onPersonSelect, onMediaSelect, onOpenFamily = null,
   annotationHandlers,
   minScale = 0.2,
   maxScale = 4,
@@ -137,7 +138,7 @@ export function useGalaxyInteractions({
           break
         }
       }
-      if (!isOverClickable && (hitRenvoi(mouseWorldPosRef.current.x, mouseWorldPosRef.current.y))) isOverClickable = true
+      if (!isOverClickable && (hitRenvoi(mouseWorldPosRef.current.x, mouseWorldPosRef.current.y) || hitFamily(mouseWorldPosRef.current.x, mouseWorldPosRef.current.y))) isOverClickable = true
       hoveredNodeIdRef.current = newHoveredNode
       hoveredMediaKeyRef.current = newHoveredMedia
 
@@ -276,6 +277,10 @@ export function useGalaxyInteractions({
       }
     }
 
+    // Badge de famille : ouvre l'onglet de cette famille
+    const fam = hitFamily(clickX, clickY)
+    if (fam) { onOpenFamily?.(fam.tabKey); return }
+
     // Renvoi : on glisse vers l'autre extrémité (parents ou enfant), sans dézoomer en dessous de la lecture des prénoms
     const renvoi = hitRenvoi(clickX, clickY)
     if (renvoi) {
@@ -287,7 +292,7 @@ export function useGalaxyInteractions({
         y: rect2.height / 2 - renvoi.targetY * scale,
       }
     }
-  }, [canvasRef, transformRef, targetTransformRef, layoutDataRef, nodeRandomDataRef, entranceRef, getAnimatedPos, onPersonSelect, onMediaSelect, annotationHandlers])
+  }, [canvasRef, transformRef, targetTransformRef, layoutDataRef, nodeRandomDataRef, entranceRef, getAnimatedPos, onPersonSelect, onMediaSelect, onOpenFamily, annotationHandlers])
 
   return {
     isDragging, isZooming, zoomTimeoutRef, hasDragged,
diff --git a/frontend/src/i18n/en/arbre.js b/frontend/src/i18n/en/arbre.js
index be5f58c..b260ab2 100644
--- a/frontend/src/i18n/en/arbre.js
+++ b/frontend/src/i18n/en/arbre.js
@@ -7,8 +7,7 @@ export default {
   'Affichage': 'Display',
   'Réglages de ce navigateur.': 'Saved in this browser.',
   'Un onglet par nom de famille': 'One tab per last name',
-  'Chaque nom porté par assez de personnes reliées entre elles a son onglet, avec les conjoints.': 'Each last name carried by enough related people gets its own tab, with their spouses.',
-  "Ajouter un onglet « Tout l'arbre » en premier": 'Add a « Whole tree » tab first',
+  "Chaque nom porté par assez de personnes reliées entre elles a son onglet, avec les conjoints. Le premier onglet montre tout l'arbre.": 'Each last name carried by enough related people gets its own tab, with their spouses. The first tab shows the whole tree.',
   'À partir de {n} personnes au même nom': 'From {n} people with the same name',
   "Aucun onglet à ce seuil : tout l'arbre sur une seule page.": 'No tab at this threshold: the whole tree on one page.',
   "Pas d'onglets": 'No tabs',