From ac3cd6aec2cf466b840a2d5a8393a129694665e0 Mon Sep 17 00:00:00 2001
From: IliesAllali <pro.allali.ilies@gmail.com>
Date: Sun, 18 Oct 2026 23:54:44 +0200
Subject: [PATCH 1/2] feat(invite): crayon pour proposer des changements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

L'invité a le crayon du propriétaire dans la barre du bas, avant « Plus ».
Le bandeau du mode contribution dit « Vous proposez » (« Vous proposez des
changements » sur ordinateur), sur une seule ligne, avec « Envoyer ».
Le propriétaire ne voit aucun changement.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
---
 frontend/src/components/EditModeOverlay.css      | 10 ++++++++--
 frontend/src/components/EditSessionBar.jsx       | 16 ++++++++++++----
 .../src/components/navbar/ContextualNavbar.jsx   | 11 +++++++++--
 frontend/src/i18n/en/compte.js                   |  2 --
 frontend/src/i18n/en/contribution.js             |  5 +++--
 5 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/EditModeOverlay.css b/frontend/src/components/EditModeOverlay.css
index 850e1fc..3df00d2 100644
--- a/frontend/src/components/EditModeOverlay.css
+++ b/frontend/src/components/EditModeOverlay.css
@@ -48,14 +48,20 @@
 .edit-mode-submit { flex: none; }
 .edit-mode-toast-close { width: 36px; min-height: 36px; flex: none; }
 
+/* Invité : la phrase complète sur ordinateur, « Vous proposez » sur téléphone, toujours sur une ligne */
+.edit-mode-toast-short { display: none; }
+
 @media (max-width: 768px) {
   .edit-mode-toast { top: 68px; max-width: calc(100vw - 24px); }
   .edit-mode-toast-text { font-size: 13px; }
+  .edit-mode-toast--contrib .edit-mode-toast-long { display: none; }
+  .edit-mode-toast--contrib .edit-mode-toast-short { display: inline; }
 }
 
-/* Téléphone : le texte se coupait en « Vous modifi… » à côté du bouton, qui suffit à lui seul */
+/* Téléphone : le texte de l'éditeur se coupait en « Vous modifi… » à côté du bouton, qui suffit à lui seul.
+   L'invité garde son texte court, qui tient sur une ligne. */
 @media (max-width: 480px) {
-  .edit-mode-toast--with-submit .edit-mode-toast-text { display: none; }
+  .edit-mode-toast--with-submit:not(.edit-mode-toast--contrib) .edit-mode-toast-text { display: none; }
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/frontend/src/components/EditSessionBar.jsx b/frontend/src/components/EditSessionBar.jsx
index 79f9647..b716069 100644
--- a/frontend/src/components/EditSessionBar.jsx
+++ b/frontend/src/components/EditSessionBar.jsx
@@ -11,8 +11,9 @@ function EditSessionBar({ active, hasDraft, role = 'contributor', onDeactivate,
   ), [isAdmin])
 
   // Libellés courts : ils doivent tenir sur un téléphone à côté du bouton
-  const toastLabel = isAdmin ? t("Vous modifiez l'arbre") : t('Vos propositions')
-  const submitLabel = isAdmin ? t("Mettre à jour l'arbre") : t('Envoyer mes ajouts')
+  // Invité : « Vous proposez » sur téléphone (une seule ligne), la phrase complète sur ordinateur
+  const toastLabel = isAdmin ? t("Vous modifiez l'arbre") : null
+  const submitLabel = isAdmin ? t("Mettre à jour l'arbre") : t('Envoyer')
   // La famille ne voit le bouton d'envoi que lorsqu'il y a quelque chose à envoyer
   const showSubmit = Boolean(onSubmit) && (isAdmin || hasDraft)
 
@@ -22,9 +23,16 @@ function EditSessionBar({ active, hasDraft, role = 'contributor', onDeactivate,
     <>
       <div className={borderClass} aria-hidden="true" />
 
-      <div className={`edit-mode-toast${isAdmin ? ' edit-mode-toast--admin' : ''}${showSubmit ? ' edit-mode-toast--with-submit' : ''}`} role="status" aria-live="polite">
+      <div className={`edit-mode-toast${isAdmin ? ' edit-mode-toast--admin' : ' edit-mode-toast--contrib'}${showSubmit ? ' edit-mode-toast--with-submit' : ''}`} role="status" aria-live="polite">
         <span className="edit-mode-toast-dot" aria-hidden="true" />
-        <span className="edit-mode-toast-text">{toastLabel}</span>
+        {isAdmin ? (
+          <span className="edit-mode-toast-text">{toastLabel}</span>
+        ) : (
+          <span className="edit-mode-toast-text">
+            <span className="edit-mode-toast-long">{t('Vous proposez des changements')}</span>
+            <span className="edit-mode-toast-short">{t('Vous proposez')}</span>
+          </span>
+        )}
 
         {showSubmit && (
           <button
diff --git a/frontend/src/components/navbar/ContextualNavbar.jsx b/frontend/src/components/navbar/ContextualNavbar.jsx
index fa18e99..aca6715 100644
--- a/frontend/src/components/navbar/ContextualNavbar.jsx
+++ b/frontend/src/components/navbar/ContextualNavbar.jsx
@@ -160,6 +160,13 @@ function ContextualNavbar({
   const isFamily = (navbarType === 'contributor_anon' || navbarType === 'contributor_auth') && Boolean(onAddSouvenirClick)
   const renderFamilyButtons = () => (
     <>
+      {/* Le même crayon que le propriétaire : proposer des changements sans passer par « Plus » */}
+      <NavButton
+        icon={<Edit3 size={20} strokeWidth={2} />}
+        label={t('Proposer des changements')}
+        onClick={onEditClick}
+        active={editModeActive}
+      />
       <button type="button" className="nav-family-btn nav-family-btn--primary" onClick={onAddSouvenirClick}>
         <ImagePlus size={20} strokeWidth={2} aria-hidden="true" />
         <span>{t('Ajouter un souvenir')}</span>
@@ -239,7 +246,7 @@ function ContextualNavbar({
           <>
             <NavButton
               icon={<Edit3 size={20} strokeWidth={2} />}
-              label={t('Contribuer')}
+              label={t('Proposer des changements')}
               onClick={onEditClick}
               active={editModeActive}
             />
@@ -258,7 +265,7 @@ function ContextualNavbar({
           <>
             <NavButton
               icon={<Edit3 size={20} strokeWidth={2} />}
-              label={t("Contribuer à l'arbre")}
+              label={t('Proposer des changements')}
               onClick={onEditClick}
               active={editModeActive}
             />
diff --git a/frontend/src/i18n/en/compte.js b/frontend/src/i18n/en/compte.js
index 2614bad..fc27741 100644
--- a/frontend/src/i18n/en/compte.js
+++ b/frontend/src/i18n/en/compte.js
@@ -190,8 +190,6 @@ export default {
   "Le mode d'emploi": "User guide",
   "Modifier l'arbre": "Edit the tree",
   "Contributions": "Contributions",
-  "Contribuer": "Contribute",
-  "Contribuer à l'arbre": "Contribute to the tree",
   "Contribuer (mot de passe contribution requis)": "Contribute (contribution password required)",
   "Modifier la démo": "Edit the demo",
   "Quitter l'édition": "Exit edit mode",
diff --git a/frontend/src/i18n/en/contribution.js b/frontend/src/i18n/en/contribution.js
index 27e06d3..1d22d87 100644
--- a/frontend/src/i18n/en/contribution.js
+++ b/frontend/src/i18n/en/contribution.js
@@ -176,9 +176,10 @@ export default {
   'Envoyer les modifications': 'Send changes',
   'Aucune modification à soumettre': 'No changes to submit',
   "Vous modifiez l'arbre": "You're editing the tree",
-  'Vos propositions': 'Your suggestions',
+  'Vous proposez des changements': 'You are suggesting changes',
+  'Vous proposez': 'You are suggesting',
+  'Proposer des changements': 'Suggest changes',
   "Mettre à jour l'arbre": 'Update the tree',
-  'Envoyer mes ajouts': 'Send my additions',
   "Aucune modification à envoyer pour l'instant": 'Nothing to send yet',
   'Quitter le mode édition': 'Exit edit mode',
 

From 6c5cacab0fdca49f8a7a8997cfe26e56afe0f028 Mon Sep 17 00:00:00 2001
From: IliesAllali <pro.allali.ilies@gmail.com>
Date: Mon, 19 Oct 2026 00:08:21 +0200
Subject: [PATCH 2/2] =?UTF-8?q?fix(invite):=20libell=C3=A9s=20courts=20de?=
 =?UTF-8?q?=20la=20barre=20famille=20sous=20420=20px?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sous 420 px, « Ajouter un souvenir » et « Ajouter une personne » passaient
sur deux lignes : « Souvenir » et « Personne » tiennent sur une ligne. Le
libellé complet reste en aria-label et en title.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
---
 frontend/src/components/navbar/ContextualNavbar.css |  6 ++++++
 frontend/src/components/navbar/ContextualNavbar.jsx | 11 +++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/navbar/ContextualNavbar.css b/frontend/src/components/navbar/ContextualNavbar.css
index 564c8c1..afa8203 100644
--- a/frontend/src/components/navbar/ContextualNavbar.css
+++ b/frontend/src/components/navbar/ContextualNavbar.css
@@ -355,6 +355,12 @@
     white-space: normal;
     text-align: center;
   }
+  .contextual-navbar--family .nav-family-label-short { display: none; }
+  /* Sous 420 px, trois libellés complets passent sur deux lignes : on prend les courts, sur une ligne */
+  @media (max-width: 419px) {
+    .contextual-navbar--family .nav-family-label-full { display: none; }
+    .contextual-navbar--family .nav-family-label-short { display: inline; white-space: nowrap; }
+  }
   .contextual-navbar--family .nav-more-wrapper { flex: 1; display: flex; }
   .contextual-navbar--family .nav-dropdown-wrapper { margin-left: 0; align-self: center; }
   /* Le zoom passe au-dessus de la barre pleine largeur */
diff --git a/frontend/src/components/navbar/ContextualNavbar.jsx b/frontend/src/components/navbar/ContextualNavbar.jsx
index aca6715..94ebbc1 100644
--- a/frontend/src/components/navbar/ContextualNavbar.jsx
+++ b/frontend/src/components/navbar/ContextualNavbar.jsx
@@ -167,13 +167,16 @@ function ContextualNavbar({
         onClick={onEditClick}
         active={editModeActive}
       />
-      <button type="button" className="nav-family-btn nav-family-btn--primary" onClick={onAddSouvenirClick}>
+      {/* Sous 420 px, un libellé court tient sur une ligne ; le libellé complet reste en aria-label et en title */}
+      <button type="button" className="nav-family-btn nav-family-btn--primary" onClick={onAddSouvenirClick} aria-label={t('Ajouter un souvenir')} title={t('Ajouter un souvenir')}>
         <ImagePlus size={20} strokeWidth={2} aria-hidden="true" />
-        <span>{t('Ajouter un souvenir')}</span>
+        <span className="nav-family-label-full">{t('Ajouter un souvenir')}</span>
+        <span className="nav-family-label-short" aria-hidden="true">{t('Souvenir')}</span>
       </button>
-      <button type="button" className="nav-family-btn" onClick={onAddPersonClick}>
+      <button type="button" className="nav-family-btn" onClick={onAddPersonClick} aria-label={t('Ajouter une personne')} title={t('Ajouter une personne')}>
         <UserPlus size={20} strokeWidth={2} aria-hidden="true" />
-        <span>{t('Ajouter une personne')}</span>
+        <span className="nav-family-label-full">{t('Ajouter une personne')}</span>
+        <span className="nav-family-label-short" aria-hidden="true">{t('Personne')}</span>
       </button>
       <div ref={moreRef} className="nav-more-wrapper">
         <button type="button" className={`nav-family-btn nav-family-btn--more${moreOpen ? ' is-open' : ''}`} onClick={() => setMoreOpen((v) => !v)} aria-expanded={moreOpen} aria-haspopup="menu">