Merge pull request #175 from IliesAllali/fix/barre-edition-telephone

Téléphone, mode édition : onglets en haut, « Terminé » en toutes lettres, une seule sortie

frontend/src/components/EditModeOverlay.css

@@ -58,6 +58,10 @@
   .edit-mode-toast--contrib .edit-mode-toast-short { display: inline; }
 }
 
+/* « Terminé » dans la barre du bas fait déjà sortir de l'édition : pas de seconde croix dans la bulle (Patch, 27/10) */
+body:has(.nav-annot-exit) .edit-mode-toast-close { display: none; }
+body:has(.nav-annot-exit) .edit-mode-toast:not(.edit-mode-toast--with-submit) { padding-right: 16px; }
+
 /* 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) {

frontend/src/components/Galaxy.css

@@ -110,7 +110,10 @@
 
 @media (max-width: 768px) {
   .family-tabs { top: 10px; left: 10px; max-width: calc(100vw - 84px); }
-  .family-tabs--lowered { top: 64px; max-width: calc(100vw - 20px); }
+  /* Le message « Vous proposez » est sous la première ligne sur téléphone (EditModeOverlay.css, top: 68px) :
+     la barre reste en haut, à côté de la loupe, au lieu de passer dessous (Patch, 27/10) */
+  .family-tabs--lowered { top: 10px; max-width: calc(100vw - 84px); }
+  body:has(.edit-mode-toast):has(.expandable-search.expanded) .family-tabs { top: 124px; }
   /* Recherche ouverte sur téléphone : elle prend toute la largeur du haut, la barre passe dessous */
   body:has(.expandable-search.expanded) .family-tabs { top: 80px; max-width: calc(100vw - 20px); }
   .family-tab { font-size: 14px; padding: 6px 12px 7px; }

frontend/src/components/navbar/ContextualNavbar.css

@@ -180,29 +180,31 @@
 }
 
 /* --- Exit edit mode button --- */
+/* Même hauteur que le « + » à côté (46 px), zone de tap comprise (Patch, 27/10) */
 .nav-annot-exit {
-  width: 36px;
-  height: 36px;
+  height: 46px;
+  padding: 0 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
-  border-radius: 50%;
+  border-radius: 999px;
   background: rgba(42, 38, 34, 0.08);
-  color: #6B645D;
+  color: #2A2622;
+  font: 500 15px/1 var(--pz-sans);
+  white-space: nowrap;
   cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+  transition: background-color 160ms ease, transform 140ms var(--pz-ease);
   flex-shrink: 0;
+  -webkit-tap-highlight-color: transparent;
 }
 
-.nav-annot-exit:hover {
-  background: rgba(42, 38, 34, 0.16);
-  color: #2A2622;
-  transform: rotate(90deg);
+@media (hover: hover) and (pointer: fine) {
+  .nav-annot-exit:hover { background: rgba(42, 38, 34, 0.14); }
 }
 
 .nav-annot-exit:active {
-  transform: rotate(90deg) scale(0.88);
+  transform: scale(0.97);
 }
 
 /* --- Separator --- */

frontend/src/components/navbar/ContextualNavbar.jsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from 'react'
 import {
-  Brush, ImagePlus, Plus, UserPlus, User, X, MousePointer2, Pencil, Type, Star, Trash2, Image, ArrowLeft, Search,
+  Brush, ImagePlus, Plus, UserPlus, User, MousePointer2, Pencil, Type, Star, Trash2, Image, ArrowLeft, Search,
 } from 'lucide-react'
 import { NavMenu, NavMenuGroup, NavMenuItem } from './NavMenu'
 import AvatarMenu from './AvatarMenu'
@@ -292,13 +292,14 @@ function ContextualNavbar({
       <div className={`navbar-content${showMobileAnnot ? ' navbar-content--annot' : ''}`}>
         {showMobileAnnot && !annotMode ? (
           <>
+            {/* Sortie de l'édition en toutes lettres : une croix seule à côté du « + » ne disait pas ce qu'elle faisait (Patch, 27/10) */}
             <button
+              type="button"
               className="nav-annot-exit"
               onClick={onEditClick}
-              aria-label={t("Quitter l'édition")}
               title={t("Quitter l'édition")}
             >
-              <X size={18} strokeWidth={2.5} />
+              {t('Terminé')}
             </button>
 
             <button