diff --git a/frontend/draco-barre.css b/frontend/draco-barre.css
index 08d574a..8c9927c 100644
--- a/frontend/draco-barre.css
+++ b/frontend/draco-barre.css
@@ -12,9 +12,18 @@
    Alertes icône seule.
    v0.1.11 : marque = étoile Spark monochrome (blanche barre foncée,
    noire barre claire) ; anneau rouge #c00000 autour de l'avatar flottant.
+   v0.2.0 : nouvel onglet « ShaarIt » (data-app="shaarit", --app émeraude
+   #059669, logo logos/shaarit.svg via {{LOGO_SHAARIT}}) avant l'onglet
+   agent ; GARDE data-theme : les blocs prefers-color-scheme ne
+   s'appliquent que si <html> n'a AUCUN attribut data-theme
+   (html:not([data-theme])) — avant ce correctif, un hôte ayant choisi
+   le clair via data-theme="light" héritait quand même du sombre
+   système (piège constaté dans les copies vendangées de
+   Kanbante/Flowdeck ; les re-vendanges de la v0.2.0 le corrigent).
    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. */
+   ou prefers-color-scheme si l'app intégratrice ne force rien
+   (aucun attribut data-theme sur <html>). */
 
 .draco-bar {
   --bg: #f2f2f0; --surface: #ffffff; --surface-2: #e9eae6; --surface-3: #f6f6f3;
@@ -27,8 +36,12 @@
   background: var(--surface); border-bottom: 1px solid var(--line);
   font: 500 14px/1.3 system-ui, "Segoe UI", sans-serif; color: var(--ink);
 }
+/* Garde data-theme (v0.2.0) : le sombre système ne s'applique QUE si
+ * l'hôte n'a posé aucun data-theme sur <html>. Sans cette garde, un
+ * hôte en data-theme="light" sur un système sombre affichait la barre
+ * sombre malgré son choix explicite. */
 @media (prefers-color-scheme: dark) {
-  .draco-bar { --bg:#101211; --surface:#1a1c1a; --surface-2:#242624; --surface-3:#20221f;
+  html:not([data-theme]) .draco-bar { --bg:#101211; --surface:#1a1c1a; --surface-2:#242624; --surface-3:#20221f;
     --ink:#eceee9; --ink-2:#a6aba2; --ink-3:#8b9089; --line:#2e302c; }
 }
 [data-theme="dark"] .draco-bar { --bg:#101211; --surface:#1a1c1a; --surface-2:#242624; --surface-3:#20221f;
@@ -48,7 +61,7 @@
    barre foncée (filtre annulé par les règles thème ci-dessous). */
 .draco-brand-mark img { width: 26px; height: 26px; object-fit: cover; display: block; filter: brightness(0); }
 @media (prefers-color-scheme: dark) {
-  .draco-bar .draco-brand-mark img { filter: none; }
+  html:not([data-theme]) .draco-bar .draco-brand-mark img { filter: none; }
 }
 [data-theme="dark"] .draco-bar .draco-brand-mark img { filter: none; }
 
@@ -218,6 +231,9 @@
   .draco-bar[data-current="flowdeck"] .draco-apptab[data-app="flowdeck"],
   .draco-bar[data-current="tiktak"] .draco-apptab[data-app="tiktak"],
   .draco-bar[data-current="kanbante"] .draco-apptab[data-app="kanbante"],
+  /* v0.2.0 : sur ShaarIt elle-même (data-current="shaarit"), c'est
+     l'onglet ShaarIt qui reste visible en mobile. */
+  .draco-bar[data-current="shaarit"] .draco-apptab[data-app="shaarit"],
   /* Chantier 5 : sur la console elle-même (data-current="agent",
      programme console #71), c'est l'onglet Console Spark qui reste
      visible en mobile — les 4 hôtes gardent leur propre courant. */