From da6de52198bcbbe7f26370cd9d5de1c90b921f65 Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Wed, 28 Oct 2026 10:32:06 -0400
Subject: [PATCH] barre-apps v0.1.6 : CSS vendange (menus, avatar bouton)

---
 frontend/draco-barre.css | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/frontend/draco-barre.css b/frontend/draco-barre.css
index 2aaa71f..f6c6acb 100644
--- a/frontend/draco-barre.css
+++ b/frontend/draco-barre.css
@@ -2,7 +2,9 @@
    v0.1.2 : palier mobile resserré selon la spec (voir @media 700px) ;
    v0.1.3 : la marque ✦ (plus grande) ouvre le menu des applications —
    c'est LE changement d'app en mobile (choix de Bruno, 2026-10-21) ;
-   v0.1.4 : palier mobile élargi de 700 à 900 px (zone morte comblée).
+   v0.1.4 : palier mobile élargi de 700 à 900 px (zone morte comblée) ;
+   v0.1.6 : menus « ••• » et compte (construits par le JS, mêmes jetons
+   que le menu des applications) ; l'avatar est un vrai <button>.
    Jetons repris du prototype validé Console v7.2.
    Thème : clair par défaut, sombre via [data-theme="dark"] sur <html>
    ou prefers-color-scheme si l'app intégratrice ne force rien. */
@@ -42,6 +44,29 @@
   box-shadow: 0 16px 44px rgb(0 0 0 / .28);
 }
 .draco-apps-menu[hidden] { display: none; }
+
+/* Menus « ••• » et compte (v0.1.6) — même boîte que le menu des apps,
+ * ancrés à droite ; leurs items réutilisent .draco-apps-item. */
+.draco-more-menu, .draco-compte-menu {
+  position: absolute; top: calc(100% + 6px); right: 10px; z-index: 400;
+  min-width: 248px; padding: 6px;
+  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
+  box-shadow: 0 16px 44px rgb(0 0 0 / .28);
+}
+.draco-more-menu[hidden], .draco-compte-menu[hidden] { display: none; }
+.draco-menu-item {
+  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
+  padding: 8px 10px; border: 0; border-radius: 10px;
+  background: transparent; color: var(--ink); font: inherit; text-align: left;
+  text-decoration: none; cursor: pointer;
+}
+.draco-menu-item:hover, .draco-menu-item:focus-visible { background: var(--surface-2); }
+.draco-menu-sep { height: 1px; margin: 6px 10px; background: var(--line); }
+.draco-compte-nom {
+  padding: 8px 10px 10px; font-weight: 700; font-size: 14px;
+  border-bottom: 1px solid var(--line); margin-bottom: 6px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
 .draco-apps-item {
   display: flex; align-items: center; gap: 10px;
   padding: 8px 10px; border-radius: 10px;
@@ -122,8 +147,10 @@
 }
 .draco-icon-btn:hover { background: var(--surface-2); }
 .draco-avatar {
-  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
-  background: #2f6fed; color: #fff; font-weight: 700;
+  width: 34px; height: 34px; border: 0; padding: 0; border-radius: 50%;
+  display: grid; place-items: center; flex: none;
+  background: #2f6fed; color: #fff; font: inherit; font-weight: 700;
+  cursor: pointer;
 }
 
 /* Rappel de l'en-tête masqué — onglet ancré au bord supérieur (v6) */