/* quentyx-hora / LA BARRE FLOTTANTE, 2026-09-27. Voir barre.js.
 *
 * Le prolongement de la pastille « Chercher » de l accueil : meme matiere (jetons
 * --ico-* d Assets/accueil.css), meme arete eclairee, meme ombre portee. Elle flotte
 * au-dessus de la page, sous les menus (60) et les avis (70), a cote du rond de
 * l assistant (47). */
.barre-nav {
  position: fixed; z-index: 46; left: 50%; bottom: 20px;
  display: flex; align-items: center; gap: 2px; padding: 5px;
  border-radius: 999px; background: linear-gradient(165deg, var(--ico-haut), var(--ico-bas));
  box-shadow: inset 0 1px 0 var(--ico-arete), 0 12px 26px var(--ico-ombre), 0 2px 5px var(--ico-ombre);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
}
.barre-nav[hidden] { display: none; }
.barre-nav.glisse { cursor: grabbing; box-shadow: inset 0 1px 0 var(--ico-arete), 0 18px 34px var(--ico-ombre), 0 3px 6px var(--ico-ombre); }
.barre-nav button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: 0; padding: 0;
  border-radius: 999px; background: transparent; color: var(--encre-3); cursor: pointer; font: 500 15px var(--interface);
  transition: color .15s, background .15s; -webkit-tap-highlight-color: transparent;
}
.barre-nav button:hover, .barre-nav button:focus-visible { color: var(--encre); background: var(--voile); outline: none; }
.barre-nav button.actif { color: var(--encre); background: var(--voile); box-shadow: var(--creux); }
.barre-chercher { padding: 0 16px 0 14px !important; }
.barre-chercher svg { width: 17px; height: 17px; }
.barre-bouton { width: 44px; }
.barre-bouton svg { width: 19px; height: 19px; }
.barre-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--filet); }
/* L engrenage de l accueil, a l encre : le degrade grave disparait a cette taille. */
.barre-engrenage .acc-glyphe { width: 21px; height: 21px; }
.barre-engrenage .acc-glyphe-ombre path { fill: var(--gl-ombre); opacity: .6; }
.barre-engrenage .acc-glyphe-corps path { fill: currentColor; stroke: none; }

/* LES ANCIENNES PLACES SE VIDENT : les icones de la rangee du logo et l engrenage du haut
   restent dans la page (app.js s y branche au chargement), caches. */
.tete-rail .outil-rail, #bParametres { display: none !important; }
@media (min-width: 1080px) { .tete-rail .replie-rail { margin-left: auto; } }

/* Au telephone : l icone seule pour Chercher, la barre tient a 360 px avec le rond. */
@media (max-width: 480px) {
  .barre-chercher span { display: none; }
  /* 44 px : la taille d une cible au doigt (Vera, cible-petite). */
  .barre-chercher { width: 44px; padding: 0 !important; }
  .barre-bouton { width: 44px; }
  .barre-sep { margin: 0 2px; }
}

/* ── LE BOUTON DE LA NAVIGATION (2026-09-27) ────────────────────────────────
   Au bureau seulement, comme le repli lui-meme : au telephone la navigation vit
   derriere le menu. Il remplace « replier » (rangee du logo) et « deplier » (qui se
   posait sur le logo devant le titre), et leurs doubles de la page des conversations.
   Ouverte, son icone est a l encre ; fermee, discrete : un etat, pas une page. */
.barre-rail, .barre-sep-rail { display: none !important; }
.barre-nav .barre-rail[aria-pressed="true"] { color: var(--encre); }
@media (min-width: 1080px) {
  .barre-rail { display: inline-flex !important; }
  .barre-sep-rail { display: block !important; }
  #bReplier, #bDeplier, .conv-marque .replie-rail, .conv-deplier { display: none !important; }
}

/* ── HUIT BOUTONS A 360 PX (2026-09-28) ─────────────────────────────────────
   L icone Atelier a porte la barre a 390 px au telephone : elle sortait de l ecran.
   Sous 400 px, chaque bouton passe a 39 px de LARGE (44 de haut, la cible reste pleine au
   doigt dans le sens ou il vise), sans espace entre eux : 326 px, qui tiennent dans 336.
   A trancher par Anthony : garder ainsi, ou retirer une icone au telephone. */
@media (max-width: 400px) {
  .barre-nav { gap: 0; padding: 4px; }
  .barre-nav .barre-bouton, .barre-nav .barre-chercher { width: 39px; }
  .barre-sep { margin: 0 1px; }
}