/* 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.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.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. */

.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;
  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;
  background: var(--surface); border-bottom: 1px solid var(--line);
  font: 500 14px/1.3 system-ui, "Segoe UI", sans-serif; color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .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;
  --ink:#eceee9; --ink-2:#a6aba2; --ink-3:#8b9089; --line:#2e302c; }

.draco-bar-zone { display: flex; align-items: center; gap: 8px; min-width: 0; }
.draco-bar-centre { justify-content: center; }
.draco-bar-droite { justify-content: flex-end; }

/* 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; }

/* 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;
  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; }
.draco-apptab {
  position: relative; display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 9px; border-radius: 12px;
  color: var(--ink); text-decoration: none; background: transparent;
  transition: background .18s ease;
}
.draco-apptab:hover { background: var(--surface-2); }
.draco-apptab-ico {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 9px; background: var(--app); color: #fff; font-size: 15px;
}
.draco-apptab-txt { display: none; flex-direction: column; line-height: 1.15; }
.draco-apptab-txt strong { font-size: 14px; font-weight: 700; }
.draco-apptab-txt small { font-size: 11.5px; color: var(--ink-2); }
.draco-apptab[data-active="true"] { background: var(--surface-3); box-shadow: inset 0 -2px 0 var(--app, var(--agent)); }
.draco-apptab[data-active="true"] .draco-apptab-txt { display: flex; }

/* Pastilles compteurs — petites, rouges, coin bas-droit (standard v7.1) */
.draco-badge {
  position: absolute; right: -4px; bottom: -4px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 9px; box-sizing: border-box;
  background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--surface);
}
.draco-badge[hidden] { display: none; }

/* Recherche */
.draco-search {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 38px;
  padding: 0 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-3); color: var(--ink-3); cursor: pointer; font: inherit;
}
.draco-search kbd {
  margin-left: auto; font: 600 11px system-ui; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px;
}

/* Domaines — contrôle segmenté */
.draco-domaines { display: flex; align-items: center; gap: 2px; background: var(--surface-3); border-radius: 10px; padding: 3px; }
.draco-domaines-lbl { font-size: 10.5px; letter-spacing: .06em; color: var(--ink-3); padding: 0 6px; text-transform: uppercase; }
.draco-domaines button {
  border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 13px;
  height: 30px; padding: 0 10px; border-radius: 8px; cursor: pointer;
}
.draco-domaines button[data-on="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgb(0 0 0 / .18); }

/* 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);
  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;
}
.draco-spark .draco-badge { border-color: var(--agent); }

.draco-icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--ink-2); font: inherit; cursor: pointer;
}
.draco-icon-btn:hover { background: var(--surface-2); }
.draco-avatar {
  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) */
.draco-bar-rappel {
  position: fixed; top: 0; left: 16px; z-index: 60; cursor: pointer;
  background: var(--surface, #1a1c1a); border: 1px solid var(--line, #2e302c); border-top: 0;
  border-radius: 0 0 10px 10px; padding: 5px 12px; font: 600 12px system-ui; color: var(--ink-2, #a6aba2);
}

/* Paliers — les zones latérales cèdent, la barre ne casse jamais */
@media (max-width: 1440px) {
  .draco-brand-name, .draco-domaines-lbl { display: none; }
  .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 { width: 38px; padding: 0; justify-content: center; }
  .draco-bar { grid-template-columns: auto auto 1fr; }
  .draco-bar-droite { justify-content: flex-end; }
}
@media (max-width: 900px) {
  /* 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.
     Le changement d'app passe par le menu du ✦ (v0.1.3).
     (v0.1.2 — avant, les onglets entiers et les pastilles domaines
     restaient affichés et la barre débordait sur téléphone.
     v0.1.4 — palier élargi de 700 à 900 px : entre les deux, la
     barre complète ne tenait pas (fenêtres réduites, tablettes,
     webviews) alors que les apps sont déjà en mise en page mobile.) */
  .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; }
}