fix: barre commune pleine largeur, palier mobile v0.1.2, animation latérale fluide (#28)

static/css/draco-barre.css

@@ -1,4 +1,5 @@
-/* Barre d'apps commune dracodev — v0.1.0 (bloc 0, ACC-0.2)
+/* 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).
    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. */
@@ -120,8 +121,18 @@
   .draco-bar-droite { justify-content: flex-end; }
 }
 @media (max-width: 700px) {
-  /* Mobile : la barre du haut se condense ; la navigation d'apps passe
-     en barre basse propre à chaque app (patron du prototype v5+). */
-  .draco-apptabs, .draco-domaines-lbl { display: none; }
-  .draco-bar { height: 52px; }
+  /* Mobile (spec des barres, § Mobile) : la barre se resserre sur
+     l'essentiel — marque, onglet de l'app courante, alertes, Spark,
+     avatar. Le rail, la recherche, les domaines et le menu « ••• »
+     disparaissent : chaque app garde ses contrôles natifs (barre
+     basse, en-tête) — un seul hamburger visible, celui de l'app.
+     (v0.1.2 — avant, les onglets entiers et les pastilles domaines
+     restaient affichés et la barre débordait sur téléphone.) */
+  .draco-bar { height: 52px; grid-template-columns: auto 1fr auto; }
+  .draco-bar-centre, .draco-domaines, .draco-bar .draco-icon-btn { display: none; }
+  .draco-apptab { display: none; }
+  .draco-bar[data-current="obsigate"] .draco-apptab[data-app="obsigate"],
+  .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"] { display: flex; }
 }

static/css/style.css

@@ -1210,16 +1210,22 @@ footer {
 }
 
 /* ── Barre latérale (0.16.0, #16 refonte) ── */
-body.with-sidebar { padding-left: 238px; transition: padding-left 0.18s ease; }
+/* Fluidité (0.23.1) : durée et courbe UNIFIÉES entre le padding du
+   corps et la largeur de la barre (avant : 0.18 s ease des deux
+   côtés mais transform à 0.22 s — mouvements désynchronisés), et
+   retrait du backdrop-filter : le fond est déjà opaque à 96 %,
+   le flou forçait un re-rendu coûteux à chaque image de l'animation
+   de largeur, d'où l'effet « lent et saccadé » signalé par Bruno. */
+body.with-sidebar { padding-left: 238px; transition: padding-left 0.26s cubic-bezier(0.4, 0, 0.2, 1); }
 body.with-sidebar.sidebar-collapsed { padding-left: 68px; }
 .sidebar {
     position: fixed; left: 0; top: 0; bottom: 0; z-index: 200;
     width: 238px; box-sizing: border-box;
     display: flex; flex-direction: column; gap: 6px;
     padding: 16px 12px 12px; overflow-y: auto; overflow-x: hidden;
-    background: rgba(13, 16, 24, 0.96); backdrop-filter: blur(14px);
+    background: rgba(13, 16, 24, 0.96);
     border-right: 1px solid var(--border);
-    transition: width 0.18s ease, transform 0.22s ease;
+    transition: width 0.26s cubic-bezier(0.4, 0, 0.2, 1), transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
 }
 body.sidebar-collapsed .sidebar { width: 68px; }
 .side-logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; color: var(--text); font-size: 1.18rem; font-weight: 700; white-space: nowrap; }
@@ -1619,6 +1625,14 @@ a.ms-title:hover { text-decoration: underline; }
 .login-foot { margin: 18px 0 0; text-align: center; color: var(--text-3, #8b94a5); font-size: 0.8rem; }
 
 /* ── Fusion ACC-1 (kanbante#28) : cohabitation avec la barre commune ──
-   La barre d'apps (60 px, en flux en haut du body) repousse la barre
-   latérale fixe sous elle ; le reste du cadre suit le flux. */
+   La barre d'apps est FIXE et pleine largeur (0.23.1 — en flux, le
+   padding-left du cadre la repoussait à droite de la barre latérale,
+   constat de Bruno sur capture) ; le cadre entier est décalé de sa
+   hauteur, et la barre latérale fixe démarre sous elle. */
+body.has-draco-bar { padding-top: 60px; }
+body.has-draco-bar .draco-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 250; }
 body.has-draco-bar .sidebar { top: 60px; }
+@media (max-width: 700px) {
+    body.has-draco-bar { padding-top: 52px; }
+    body.has-draco-bar .sidebar { top: 52px; }
+}