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">