From 1f7ed7d96fde64b93838391c6d05ea0820c08016 Mon Sep 17 00:00:00 2001
From: IliesAllali <pro.allali.ilies@gmail.com>
Date: Mon, 26 Oct 2026 00:12:26 +0100
Subject: [PATCH] =?UTF-8?q?Fiche=20:=20les=20=C2=AB=20+=20=C2=BB=20des=20p?=
 =?UTF-8?q?roches=20en=20pastilles,=20comme=20=C2=AB=20+=20Surnom=20=C2=BB?=
 =?UTF-8?q?=20en=20modification?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/components/PersonCard.css |  3 ---
 frontend/src/components/PersonCard.jsx | 11 ++++++-----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/PersonCard.css b/frontend/src/components/PersonCard.css
index bbd24b4..035e51a 100644
--- a/frontend/src/components/PersonCard.css
+++ b/frontend/src/components/PersonCard.css
@@ -305,9 +305,6 @@
 .pc-quick-edit:focus-visible { outline: 2px solid var(--pz-a500); outline-offset: 2px; }
 @media (hover: hover) and (pointer: fine) { .pc-quick-edit:hover { background: var(--pz-line-soft); } }
 
-/* Ajouter un proche depuis la fiche en lecture (1.5.1) */
-.pc-quick-add { display: flex; flex-wrap: wrap; gap: 6px; }
-.pc-quick-add .pz-btn { gap: 4px; }
 /* « Créer « Jeanne » comme parent » sous la recherche d'un proche */
 .pc-search-create .pc-rel-avatar { color: var(--pz-a700); background: var(--pz-a50); }
 .pc-search-create em { color: var(--pz-muted); font-style: normal; }
diff --git a/frontend/src/components/PersonCard.jsx b/frontend/src/components/PersonCard.jsx
index a848160..8efd1d5 100644
--- a/frontend/src/components/PersonCard.jsx
+++ b/frontend/src/components/PersonCard.jsx
@@ -1054,12 +1054,13 @@ const PersonCard = ({
 
             {/* Ajouter un proche sans passer par « Modifier » puis l'onglet Relations (1.5.1) */}
             {!editMode && onCreateRelative && (
-              <div className="pc-quick-add" role="group" aria-label={t('Ajouter un proche')}>
-                <button type="button" className="pz-btn pz-btn--ghost pz-btn--sm" onClick={() => onCreateRelative('parent', '')}><Plus size={14} strokeWidth={2} />{t('Parent')}</button>
-                <button type="button" className="pz-btn pz-btn--ghost pz-btn--sm" onClick={() => onCreateRelative('spouse', '')}><Plus size={14} strokeWidth={2} />{t('Conjoint·e')}</button>
-                <button type="button" className="pz-btn pz-btn--ghost pz-btn--sm" onClick={() => onCreateRelative('child', '')}><Plus size={14} strokeWidth={2} />{t('Enfant')}</button>
+              // Les mêmes pastilles que « + Surnom », « + Métier » en modification (Patch, 26/10)
+              <div className="pc-fill-chips pc-quick-add" role="group" aria-label={t('Ajouter un proche')}>
+                <button type="button" className="pc-fill-chip" onClick={() => onCreateRelative('parent', '')}>+ {t('Parent')}</button>
+                <button type="button" className="pc-fill-chip" onClick={() => onCreateRelative('spouse', '')}>+ {t('Conjoint·e')}</button>
+                <button type="button" className="pc-fill-chip" onClick={() => onCreateRelative('child', '')}>+ {t('Enfant')}</button>
                 {parentsList.length > 0 && (
-                  <button type="button" className="pz-btn pz-btn--ghost pz-btn--sm" onClick={() => onCreateRelative('sibling', '')}><Plus size={14} strokeWidth={2} />{t('Frère ou sœur')}</button>
+                  <button type="button" className="pc-fill-chip" onClick={() => onCreateRelative('sibling', '')}>+ {t('Frère ou sœur')}</button>
                 )}
               </div>
             )}