feat: menu des applications par la marque ✦ (barre commune v0.1.3) (7.74.2)

static/css/draco-barre.css

@@ -1,5 +1,7 @@
 /* Barre d'apps commune dracodev — v0.1.0 (bloc 0, ACC-0.2) ;
-   v0.1.2 : palier mobile resserré selon la spec (voir @media 700px).
+   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).
    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. */
@@ -8,6 +10,7 @@
   --bg: #f2f2f0; --surface: #ffffff; --surface-2: #e9eae6; --surface-3: #f6f6f3;
   --ink: #1b1d1a; --ink-2: #5c615a; --ink-3: #787d75; --line: #dedfd9;
   --agent: #c2437e; --danger: #cf4444;
+  position: relative;
   height: 60px; box-sizing: border-box;
   display: grid; grid-template-columns: auto minmax(200px, 520px) auto;
   align-items: center; gap: 16px; padding: 0 12px;
@@ -25,9 +28,29 @@
 .draco-bar-centre { justify-content: center; }
 .draco-bar-droite { justify-content: flex-end; }
 
-/* Marque */
-.draco-brand { display: flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; font-weight: 800; }
-.draco-brand-mark { color: var(--agent); }
+/* Marque — bouton du menu des applications (v0.1.3) */
+.draco-brand { display: flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; font-weight: 800; cursor: pointer; border-radius: 10px; padding: 4px 6px; margin: -4px -6px; }
+.draco-brand:hover { background: var(--surface-2); }
+.draco-brand-mark { color: var(--agent); font-size: 24px; line-height: 1; }
+
+/* Menu des applications — construit par le JS depuis les onglets */
+.draco-apps-menu {
+  position: absolute; top: calc(100% + 6px); left: 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-apps-menu[hidden] { display: none; }
+.draco-apps-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 10px; border-radius: 10px;
+  color: var(--ink); text-decoration: none;
+}
+.draco-apps-item:hover, .draco-apps-item:focus-visible { background: var(--surface-2); }
+.draco-apps-item[data-active="true"] { background: var(--surface-3); box-shadow: inset 2px 0 0 var(--agent); }
+.draco-apps-item-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.draco-apps-item-nom { font-weight: 700; font-size: 14px; }
+.draco-apps-item-role { font-size: 12px; color: var(--ink-2); }
 
 /* Onglets d'apps — accordéon : seule l'app courante est déployée */
 .draco-apptabs { display: flex; gap: 6px; }