diff --git a/apps/web/cypress/e2e/layout.cy.ts b/apps/web/cypress/e2e/layout.cy.ts
index 0672284..ceaa09d 100644
--- a/apps/web/cypress/e2e/layout.cy.ts
+++ b/apps/web/cypress/e2e/layout.cy.ts
@@ -186,7 +186,7 @@ describe("Responsive breakpoint — the sidebar becomes a bottom tab bar under 6
     cy.intercept("GET", /\/planning\?/, { statusCode: 200, body: null });
   });
 
-  it("renders the bottom nav instead of the sidebar, with every route tab legible and a working Plus tab", () => {
+  it("renders the bottom nav instead of the sidebar, icon-only, with a working Plus tab", () => {
     cy.setViewport("phone");
     cy.visit("/");
 
@@ -202,11 +202,15 @@ describe("Responsive breakpoint — the sidebar becomes a bottom tab bar under 6
       expect(getComputedStyle($nav[0]).position).to.equal("fixed");
     });
 
-    // Every route tab keeps its icon *and* label legible — this bar never
-    // falls back to icon-only or horizontal scroll, unlike the old
-    // squashed sidebar treatment it replaces (only 4 short tabs, always
-    // fits).
-    cy.contains(".app-bottom-nav a", "Planning").find("span.label").should("be.visible");
+    // Issue #105 — icon-only bar: each tab's `span.label` stays in the DOM
+    // (accessible name for the link) but is visually hidden, only the icon
+    // shows. Same treatment as the desktop collapsed rail (sidebar.cy.ts).
+    cy.contains(".app-bottom-nav a", "Planning")
+      .should("have.attr", "href", "/")
+      .within(() => {
+        cy.get("span.label").should("exist").and("not.be.visible");
+        cy.get("svg").should("be.visible");
+      });
     cy.contains(".app-bottom-nav a", "Recettes").should("have.attr", "href", "/recettes");
     cy.contains(".app-bottom-nav a", "Liste de courses").should(
       "have.attr",
diff --git a/apps/web/src/layouts/AppLayout.scss b/apps/web/src/layouts/AppLayout.scss
index b91fca7..d30ce4a 100644
--- a/apps/web/src/layouts/AppLayout.scss
+++ b/apps/web/src/layouts/AppLayout.scss
@@ -415,13 +415,28 @@
     cursor: pointer;
 
     svg {
-      width: 1.375rem;
-      height: 1.375rem;
+      width: 1.5rem;
+      height: 1.5rem;
     }
 
+    // Icon-only bar (issue #105): the visible label is dropped. "Liste de
+    // courses" (16 chars) wrapped to two lines in a ~90px tab while the
+    // others stayed on one, so its icon+label block was taller and its
+    // icon sat visibly higher than the rest. Kept in the DOM, visually
+    // hidden the accessibility-safe way, so a screen reader still announces
+    // each tab by name and the `<NavLink>`/button keeps its accessible
+    // label (no `aria-label` to duplicate the i18n string).
     .label {
-      font-size: var(--font-size-xs);
-      font-weight: 600;
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border: 0;
     }
 
     // Applied by NavLink itself (see AppLayout.tsx's `className` prop) for