Flowdeck 7.84.8 : barre v0.1.10, rouge Spark, avatar flottant, Alertes cloche (static/css/draco-barre.css)

static/css/draco-barre.css

@@ -7,6 +7,9 @@
    menu des applications) ; l'avatar est un vrai <button>.
    Correctif fusion #70 (SANS bump) : bouton trois points et menu par
    défaut supprimés ; le menu de la marque gagne « Console Spark ».
+   v0.1.10 : rose --agent → rouge Spark #c00000 ; marque = logo Spark ;
+   bouton Spark supprimé (remplacé par l'avatar flottant bas-centre) ;
+   Alertes icône seule.
    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. */
@@ -14,7 +17,7 @@
 .draco-bar {
   --bg: #f2f2f0; --surface: #ffffff; --surface-2: #e9eae6; --surface-3: #f6f6f3;
   --ink: #1b1d1a; --ink-2: #5c615a; --ink-3: #787d75; --line: #dedfd9;
-  --agent: #c2437e; --danger: #cf4444;
+  --agent: #c00000; --danger: #cf4444;
   position: relative;
   height: 60px; box-sizing: border-box;
   display: grid; grid-template-columns: auto minmax(200px, 520px) auto;
@@ -37,7 +40,8 @@
 .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:focus-visible { outline: 2px solid var(--agent); outline-offset: 2px; }
-.draco-brand-mark { color: var(--agent); font-size: 24px; line-height: 1; }
+.draco-brand-mark { line-height: 0; }
+.draco-brand-mark img { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; display: block; }
 
 /* Menu des applications — construit par le JS depuis les onglets */
 .draco-apps-menu {
@@ -138,18 +142,23 @@
 
 /* Alertes — la cloche ne disparaît JAMAIS (correctif v7.2) */
 .draco-alertes {
-  position: relative; display: flex; align-items: center; gap: 7px; height: 38px;
-  padding: 0 11px; border-radius: 10px; border: 1px solid var(--line);
+  position: relative; display: flex; align-items: center; height: 38px;
+  padding: 0 9px; border-radius: 10px; border: 1px solid var(--line);
   background: transparent; color: var(--ink); font: inherit; cursor: pointer;
 }
 
-/* Spark */
-.draco-spark {
-  position: relative; display: flex; align-items: center; gap: 7px; height: 38px;
-  padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer;
-  background: var(--agent); color: #fff; font: inherit; font-weight: 700;
+/* Bouton avatar Spark flottant — bas-centre, ouvre le panneau Spark
+   de l'hôte via data-act="spark" (délégation globale existante).
+   La console Spark ne l'inclut pas : son fragment est propre. */
+.draco-spark-flottant {
+  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
+  z-index: 65; width: 64px; height: 64px; padding: 0; border: 0;
+  border-radius: 50%; background: transparent; cursor: pointer;
+  box-shadow: 0 8px 28px rgb(0 0 0 / .45);
 }
-.draco-spark .draco-badge { border-color: var(--agent); }
+.draco-spark-flottant img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; }
+.draco-spark-flottant:hover { transform: translateX(-50%) scale(1.05); }
+.draco-spark-flottant:focus-visible { outline: 2px solid var(--agent); outline-offset: 3px; }
 
 .draco-icon-btn {
   width: 38px; height: 38px; border-radius: 10px; border: 1px solid transparent;
@@ -176,7 +185,7 @@
   .draco-bar { grid-template-columns: auto minmax(200px, 440px) auto; }
 }
 @media (max-width: 1200px) {
-  .draco-search-txt, .draco-search kbd, .draco-alertes-txt, .draco-spark-txt { display: none; }
+  .draco-search-txt, .draco-search kbd { display: none; }
   .draco-search { width: 38px; padding: 0; justify-content: center; }
   .draco-bar { grid-template-columns: auto auto 1fr; }
   .draco-bar-droite { justify-content: flex-end; }