/* ============================================================================
   QLOA — DESIGN TOKENS (couche fondation, chargée APRÈS design-system.css)
   Source de vérité des variables réutilisables pour toutes les pages.
   N'override PAS les tokens existants de design-system.css (bg/text/glass/blur).
   Réf : docs/DESIGN_SYSTEM_QLOA.md
   ============================================================================ */
:root {
  /* ── Rayons ── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: var(--radius-card);
  --radius-pill: 999px;
  --radius-card: 10px;   /* TOKEN CANON : cartes / fenêtres / panels / side-panels — tout à 10px. Source unique. */

  /* ── Espacements (base 4) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Ombres ── */
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-panel: 0 8px 40px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-pop: 0 8px 30px rgba(0,0,0,0.18);
  --shadow-float: 0 4px 12px rgba(0,0,0,0.2);

  /* ── Glass (niveaux) ── */
  --glass-blur-strong: 40px;
  --glass-blur-md: 20px;
  --glass-sat: 180%;

  /* ── Z-index (couches canon) ── */
  --z-sticky: 30;
  --z-launcher: 50;
  --z-backdrop: 1199;
  --z-panel: 1200;
  --z-panel-2: 1210;
  --z-overlay: 1300;
  --z-toast: 1400;

  /* ── Couleurs canal (omnicanal) ── */
  --ch-email: #2563eb;
  --ch-whatsapp: #16a34a;
  --ch-instagram: #c13584;
  --ch-sms: #f97316;
  --ch-chat: #6b7280;
  --ch-voice: #9333ea;
  --ch-tiktok: #000000;

  /* ── Sémantique / états ── */
  --accent: #2563eb;
  --success: #16a34a;
  --warning: #f97316;
  --danger: #dc2626;
  --info: #2563eb;
  --muted: var(--text-secondary, #6B7280);

  /* ── Typo canon ── */
  --font-title-size: 24px;
  --font-title-weight: 900;
  --font-title-tracking: -0.02em;
  --font-subtitle-size: 12px;

  /* ── Surfaces ── */
  --surface-1: rgba(255,255,255,0.85);
  --surface-2: rgba(0,0,0,0.03);
  --surface-hover: rgba(0,0,0,0.06);

  /* ── Surface BLOC canon (réf : contact_detail .glass-panel) — réutilisée par tous les blocs ── */
  --panel-bg: rgba(255,255,255,0.55);
  --panel-border: rgba(255,255,255,0.6);
  --panel-blur: blur(20px) saturate(180%);
  --panel-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
/* ── Harmonisation FORMES boutons + menus (unicité globale) ──
   Boutons = rounded-rect (pas pill) + hauteurs fixes. Pills réservées aux badges/tags/statuts. */
:root { --btn-radius: 10px; --btn-h-sm: 28px; --btn-h: 34px; }
.crm-btn, .dash-btn, .ent-btn, .ls-btn, .pipe-btn,
.crm-btn-primary, .dash-btn-primary, .ent-btn-primary,
.btn, .v3-newconv-btn, .qec-send {
  border-radius: var(--btn-radius) !important;
}
.crm-btn, .dash-btn, .ent-btn, .ls-btn, .pipe-btn, .v3-newconv-btn,
.crm-btn-primary, .dash-btn-primary, .ent-btn-primary {
  min-height: var(--btn-h); display: inline-flex; align-items: center;
}
.btn { min-height: var(--btn-h); display: inline-flex; align-items: center; }
.btn-sm { min-height: var(--btn-h-sm); }

/* Menus top : conteneur 12px, onglets 8px — uniforme partout */
.q-tabs, .sub-tabs, .tools-tabs, .tools-cfg-tabs, .tl-tabs { border-radius: 12px !important; }
.q-tabs > button, .q-tabs > a,
.sub-tab, .tab-status, .tkt-sub-tab, .fb-sub-tab, .reviews-sub-tab,
.crm-sub-tab, .ent-sub-tab, .ls-tab, .tkt-tools-tab, .tools-cfg-tab,
.tl-tab, .pipe-view-tabs > button {
  border-radius: 8px !important;
}
/* Onglets/filtres MÊME dimension partout — pagehead, inbox, fiche détail ET tous les *-sub-tab / tab-status */
.q-tabs > button, .q-tabs > a, .v3-filters > .v3-ftab, .tl-tabs > .tl-tab,
[class*="-sub-tab"]:not([class*="-sub-tabs"]), .sub-tab, .tab-status {
  padding: 6px 11px !important; min-height: 30px; font-size: 12px; font-weight: 600;
  display: inline-flex !important; align-items: center; gap: 6px; border: none; background: transparent;
  color: var(--text-secondary); cursor: pointer; white-space: nowrap; border-radius: 8px !important;
}
.q-tabs > button.active, .q-tabs > a.active, .v3-filters > .v3-ftab.active,
[class*="-sub-tab"]:not([class*="-sub-tabs"]).active, .sub-tab.active, .tab-status.active {
  background: #fff !important; color: #000 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.dark .q-tabs > button.active, .dark .q-tabs > a.active, .dark .v3-filters > .v3-ftab.active,
.dark [class*="-sub-tab"]:not([class*="-sub-tabs"]).active, .dark .sub-tab.active, .dark .tab-status.active {
  background: rgba(255,255,255,0.12) !important; color: #fff !important; }
/* Actions d'en-tête : même hauteur que les boutons (pas de btn-sm rétréci dans le header) */
.q-actions > button, .q-actions > a, .q-actions > select { min-height: var(--btn-h) !important; }

/* Breadcrumb fiches détail = MÊME design que le menu top (conteneur gris 12px, chips 8px transparents, courant = blanc) */
.bc-wrap { display: inline-flex; align-items: center; gap: 2px !important; padding: 4px !important; background: rgba(0,0,0,0.03) !important; border-radius: 12px !important; flex-wrap: wrap; max-width: 100%; }
.dark .bc-wrap { background: rgba(255,255,255,0.05) !important; }
.bc-chip, .bc-chip-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px !important; border-radius: 8px !important; font-size: 11.5px; font-weight: 600; background: transparent !important; border: none !important; box-shadow: none !important; color: var(--text-secondary) !important; text-decoration: none; white-space: nowrap; cursor: pointer; }
.bc-chip:hover, .bc-chip-pill:hover { background: rgba(0,0,0,0.05) !important; color: #000 !important; }
.bc-chip.active, .bc-chip-pill.active { background: #fff !important; color: #000 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; font-weight: 700; }
.dark .bc-chip.active, .dark .bc-chip-pill.active { background: rgba(255,255,255,0.12) !important; color: #fff !important; }
/* Dropdowns / selects : même forme + hauteur que les boutons */
select, .dash-select, .panel-select, .v3-canal-select, .crm-select, .ent-select {
  border-radius: var(--btn-radius) !important;
  min-height: var(--btn-h);
}
select.btn-sm, .btn-sm select { min-height: var(--btn-h-sm) !important; }
/* Menus déroulants ouverts (popovers) : coins cohérents */
.tb-dropdown, .qec-pop, .presence-menu, .dropdown-menu, .tcm-pop, .nc-card { border-radius: 12px !important; }

/* Pills légitimes (NE PAS arrondir comme boutons) : badges/tags/statuts/chips restent 999px (déjà définis ailleurs). */

/* ── Carte KPI / stat canon (réf page Tickets .tkt-kpi) ──
   Classes canon .q-kpi* + harmonisation des classes existantes (définies inline par page). */
.q-kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 900px) { .q-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .q-kpi-grid { grid-template-columns: 1fr; } }
.q-kpi { background: var(--panel-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur);
  border: 1px solid var(--panel-border); border-radius: var(--radius-lg); box-shadow: var(--panel-shadow); padding: 14px 16px; }
.q-kpi-label, .q-kpi-value, .q-kpi-sub { margin: 0; }
/* Harmonisation TOUTES variantes KPI (convention *-kpi-value/label/card/sub + stat-*) → canon.
   Sélecteur attribut = catche tracking-kpi-value, bk-kpi-value, fb-kpi-value, etc. en 1 règle.
   page-inline → besoin de !important pour gagner. */
[class*="-kpi-card"], .stat-card, .kpi-card, .tkt-kpi, .q-kpi { padding: 14px 16px !important; }
[class*="-kpi-value"], .stat-value, .kpi-value, .q-kpi-value {
  font-size: 22px !important; font-weight: 900 !important; letter-spacing: -0.02em !important; line-height: 1.1 !important; }
[class*="-kpi-label"], .stat-label, .kpi-label, .q-kpi-label {
  font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important;
  color: var(--text-secondary) !important; font-weight: 700 !important; }
[class*="-kpi-sub"], .stat-sub, .kpi-sub, .q-kpi-sub { font-size: 10px !important; color: var(--text-secondary) !important; }

/* ── Pagination canon (composant QloaPager, réf page « Mes tâches ») ── */
.q-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0; }
.q-pager-info { font-size: 11px; color: var(--text-secondary); font-weight: 600; }
.q-pager-btn { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card, #fff); cursor: pointer; font-size: 11px; color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; }
.q-pager-btn:disabled { opacity: 0.35; cursor: default; }
.q-pager-btn:not(:disabled):hover { background: var(--surface-hover); }

/* ── Composant en-tête de page (macro partials/_pagehead.html) ── */
.q-pagehead { margin-bottom: var(--space-5); }
.q-section { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin: 4px 0 10px; }
.q-tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; padding: 5px; background: rgba(0,0,0,0.03); border-radius: 14px; margin-bottom: var(--space-3); overflow-x: auto; }
.dark .q-tabs { background: rgba(255,255,255,0.04); }
/* Conteneur sub-tabs (L2/L3 dans le contenu) = MÊME fond full-width que .q-tabs du pagehead */
div.sub-tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; padding: 5px; background: rgba(0,0,0,0.03); border-radius: 14px; overflow-x: auto; }
.dark div.sub-tabs { background: rgba(255,255,255,0.04); }
.q-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.q-titlewrap { min-width: 0; }
.q-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; flex-shrink: 0; }

.dark {
  --shadow-card: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-panel: 0 8px 40px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  --shadow-float: 0 4px 12px rgba(0,0,0,0.45);
  --surface-1: rgba(255,255,255,0.06);
  --surface-2: rgba(255,255,255,0.05);
  --surface-hover: rgba(255,255,255,0.09);
  --ch-tiktok: #ffffff;
  /* Surface bloc canon — variante sombre */
  --panel-bg: rgba(28,28,30,0.6);
  --panel-border: rgba(255,255,255,0.1);
}

/* ── Harmonisation SURFACE DES BLOCS (réutilise le glass canon de contact_detail partout) ──
   On n'override QUE le fond/bordure/flou/ombre — le radius & padding restent propres à chaque carte. */
.glass-panel, .glass-card, .v3-card, .v2-card, .tkt-side-card, .stat-card, .kpi-card, .tkt-kpi, [class*="-kpi-card"],
.ent-card, .ls-card, .pipe-card, .deal-card, .kb-card, .rail-panel, .trigger-card,
.fb-panel, .cfg-panel, .integ-panel {
  background: var(--panel-bg) !important;
  backdrop-filter: var(--panel-blur) !important;
  -webkit-backdrop-filter: var(--panel-blur) !important;
  border-color: var(--panel-border) !important;
  box-shadow: var(--panel-shadow) !important;
}

/* ── SIDE PANELS CANON « QSide » (.lg-slide-panel) — source unique (2026-07-23) ──
   Panneau PLEINE HAUTEUR ancré à droite, AU-DESSUS du contenu :
   - largeur 480px, plafonnée à 38.2vw (part mineure du nombre d'or 1−1/φ, jamais dépassée)
   - glass 0.94 + blur(28), border-left fine, ombre portée gauche
   - backdrop (.lg-panel-backdrop) grise le contenu SAUF le menu gauche (left: var(--qside-left))
   - slide-in droite .32s cubic-bezier(.32,.72,.24,1)
   Structure : header / body / footer. Helper réutilisable : static/js/qside.js (QSide.open). */
.lg-slide-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 38.2vw;
  z-index: 1200; border-radius: 0;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: none; border-left: 1px solid rgba(0,0,0,0.08);
  box-shadow: -16px 0 48px rgba(0,0,0,0.14);
  display: flex; flex-direction: column; transform: translateX(105%); opacity: 0;
  transition: transform .32s cubic-bezier(0.32,0.72,0.24,1), opacity .22s ease; pointer-events: none; overflow: hidden; }
.dark .lg-slide-panel { background: rgba(28,28,30,0.92); border-left-color: rgba(255,255,255,0.12);
  box-shadow: -16px 0 48px rgba(0,0,0,0.5); }
@media (max-width: 768px) { .lg-slide-panel { width: 100vw; max-width: 100vw; border-left: none; } }
.lg-slide-panel.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
/* Compat : panels ouverts via inline style.transform=translateX(0) (dashboard templates/catalog/edit)
   sans classe .open → garder visibles (sinon opacity:0 du défaut = panel positionné mais invisible). */
.lg-slide-panel[style*="translateX(0)"] { opacity: 1; pointer-events: auto; }
.lg-slide-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid rgba(0,0,0,0.07); flex-shrink: 0; }
.dark .lg-slide-panel-header { border-bottom-color: rgba(255,255,255,0.07); }
.lg-slide-panel-title { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: #000; display: flex; align-items: center; gap: 8px; }
.dark .lg-slide-panel-title { color: #fff; }
.lg-slide-panel-close { width: 32px; height: 32px; border-radius: 9.8px; border: none; background: transparent; color: rgba(0,0,0,0.5); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all .15s; }
.lg-slide-panel-close:hover { background: #000; color: #fff; }
.dark .lg-slide-panel-close { background: rgba(28,28,30,0.55); color: #fff; }
.lg-slide-panel-body { flex: 1; overflow-y: auto; padding: 18px 20px; scrollbar-width: none; -ms-overflow-style: none; }
.lg-slide-panel-body::-webkit-scrollbar { display: none; width: 0; }
/* Canon : les listes/scrollables (panels, tables full-bleed) masquent leur scrollbar — le scroll reste actif */
.crm-table-scroll, .cd-side-panel-body, .qtop-pop, .lg-slide-panel .overflow-y-auto,
.ent-table-scroll, .vis-table-scroll, .vis-rail, #task-sections, .tk-rail, .hm-frame-wrap, .dash-main-wrap { scrollbar-width: none; -ms-overflow-style: none; }
.crm-table-scroll::-webkit-scrollbar, .cd-side-panel-body::-webkit-scrollbar, .qtop-pop::-webkit-scrollbar,
.lg-slide-panel .overflow-y-auto::-webkit-scrollbar,
.ent-table-scroll::-webkit-scrollbar, .vis-table-scroll::-webkit-scrollbar, .vis-rail::-webkit-scrollbar,
#task-sections::-webkit-scrollbar, .tk-rail::-webkit-scrollbar, .hm-frame-wrap::-webkit-scrollbar, .dash-main-wrap::-webkit-scrollbar { display: none; width: 0; }
/* Messagerie interne : s'efface dès qu'un side panel est ouvert — les panels passent TOUJOURS au-dessus
   (retour user 2026-07-24 : l'icône restait peinte par-dessus les panels malgré z45 < 1200) */
body:has(.lg-slide-panel.open) .tc-topbtn,
body:has(.edit-panel.open) .tc-topbtn,
body:has(.cd-side-panel.open) .tc-topbtn,
body:has(.fent-sp.open) .tc-topbtn { opacity: 0 !important; pointer-events: none !important; transition: opacity .15s; }

/* CTA noirs : JAMAIS de border — un 1px noir sur fond noir est invisible mais épaissit le bouton d'1px
   vs les items 32px voisins (retour user 2026-07-24) */
.btn-primary, .crm-btn-primary, .ent-btn-primary, .fent-btn-primary, .qtop-cta, .cd-ctx-cta { border: none !important; }

/* html/body/main : scroll actif, scrollbar invisible — avec « scrollbars toujours visibles » macOS, le track
   classique peignait une bande blanche de 15px pleine hauteur à droite (variable selon largeur/contenu) */
html, body, main { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, main::-webkit-scrollbar { display: none; width: 0; height: 0; }
.lg-slide-panel-footer { padding: 14px 20px; border-top: 1px solid rgba(0,0,0,0.07); display: flex; gap: 8px; flex-shrink: 0; }
.dark .lg-slide-panel-footer { border-top-color: rgba(255,255,255,0.07); }
/* Backdrop : grise le contenu SAUF le menu gauche — démarre au bord droit de la sidebar.
   --qside-left maintenu par base.html (0 mobile · 55px replié · largeur sidebar sinon). */
.lg-panel-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: var(--qside-left, 233px); z-index: 1199; background: rgba(20,20,22,0.22); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.lg-panel-backdrop.open { opacity: 1; pointer-events: auto; }

/* ── TOP MENU CANON « QTop » (2026-07-23) — barre unique 55px (= largeur menu replié) ──
   [Titre] [tabs Lucide 400, sans compteurs][⋯ favoris] · [icônes ghost (filtres, import/export…)] · [+ CTA noir] [🔍 recherche tout à droite]
   - zone haute EXACTE 0→55px (pas de padding au-dessus), items 32px centrés, corners 9.8px
   - data/KPIs → barre BASSE 55px : datas à gauche · pagination centrée · info à droite
   - tabs poids 400 (actif inclus) ; PAS de 2e ligne ; icônes Lucide stroke 2
   - tout dropdown de la barre = PORTAL body position:fixed (backdrop-filter piège les z-index)
   - ⋯ = favoris épinglables par user/page (qtop.js) ; réserve 44px à droite (messagerie globale)
   Helper : static/js/qtop.js */
.qtop { height: 55px; min-height: 55px; display: flex; align-items: center; gap: 2px; width: auto;
  align-self: stretch; margin: 0 12px; position: relative; z-index: 400;
  background: transparent !important; padding: 0 52px 0 0 !important;  /* §fix #227 : 44→52 (8px d'air recherche↔messagerie) */
  /* Règle absolue 2026-08-11 : une barre ne fait JAMAIS scroller la PAGE horizontalement —
     débord (libellés + icônes) = clip côté barre + scroll INTERNE de la zone tabs ci-dessous.
     clip ≠ scroll container : les fixed/sticky et le layout ne bougent pas ; pops = portalisés body. */
  overflow-x: clip; }
/* Zone tabs des barres : seul élément qui scrolle en interne quand ça déborde (scrollbar masquée) */
.qtop .fent-tabbar, .qtop .qtop-tabs, .tl-tabs .fent-tabbar {
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.qtop .fent-tabbar::-webkit-scrollbar, .qtop .qtop-tabs::-webkit-scrollbar,
.tl-tabs .fent-tabbar::-webkit-scrollbar { display: none; }
/* Dark : la barre QTop reste TRANSPARENTE (design-system pose un fond blanc/5% sur .tl-tabs — jamais sur une QTop) */
.dark .qtop, .dark .tl-tabs.crm-unibar, .dark .tl-tabs[class*="unibar"], .dark .bc-wrap.qtop { background: transparent !important; }
.qtop .qtop-item, .qtop .tl-tab { height: 32px; min-height: 32px; border-radius: 9.8px; display: inline-flex;
  align-items: center; gap: 8px; font-size: 13px; font-weight: 400 !important; }
.qtop .tl-tab .tl-lab, .qtop .tl-tab span { font-weight: 400 !important; }
.qtop .tl-tab .tl-lab { position: relative; top: 1px; }  /* compensation optique baseline */
.qtop svg { display: block; flex-shrink: 0; }
/* Mode « libellés visibles » (toggle dans le pop ⋯, sinon libellé au survol/actif) */
.qtop-labels .tl-tab .tl-lab { max-width: 130px !important; opacity: 1 !important; }
/* Libellés ON → aussi sur les ghosts de la barre (droite + actions contextuelles) — demande user 2026-07-27 */
.qtop-labels .qtop-ghost .tl-lab { max-width: 110px !important; opacity: 1 !important; margin-left: 6px; }
.qtop-ghost { min-width: 32px; width: auto; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 9.8px; color: rgba(0,0,0,0.55); cursor: pointer; transition: color .15s; box-sizing: border-box; }
.qtop-ghost:hover { color: #000; }
/* Libellé au survol : MÊME système que les tabs (.tl-lab déplié dans le bouton) — span injecté par
   base.html depuis le title au 1er survol (le title est retiré → pas de tooltip natif) */
.qtop-ghost .tl-lab { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width .2s, opacity .15s; font-size: 12px; font-weight: 400; }
.qtop-ghost:hover .tl-lab { max-width: 110px; opacity: 1; margin-left: 6px; }
.dark .qtop-ghost { color: rgba(255,255,255,0.55); } .dark .qtop-ghost:hover { color: #fff; }
.qtop-cta { height: 32px !important; min-height: 32px !important; padding: 0 14px !important; border-radius: 9.8px !important;
  display: inline-flex; align-items: center; gap: 6px; background: #000 !important; color: #fff !important;
  border: none !important; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.dark .qtop-cta { background: #fff !important; color: #000 !important; }
.qtop-search { height: 32px; border-radius: 9.8px; width: 210px; max-width: 24vw; padding: 0 12px;
  margin-left: 8px;  /* air CTA ↔ recherche (retour user 2026-07-31) */
  border: 1px solid rgba(0,0,0,0.1); background: rgba(255,255,255,0.7); font-size: 12.5px; transition: width .2s; }
.qtop-search:focus { width: 280px; outline: none; border-color: rgba(0,0,0,0.25); }
.dark .qtop-search { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #fff; }
.qtop-pop { position: fixed; z-index: 2147482000; background: rgba(255,255,255,0.97); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(0,0,0,0.08); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14); padding: 6px; min-width: 170px; }
.dark .qtop-pop { background: rgba(28,28,30,0.97); border-color: rgba(255,255,255,0.12); }
.qtop-pop-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 12px;
  border: none; background: transparent; border-radius: 8px; font-size: 12.5px; cursor: pointer; color: inherit; }
.qtop-pop-item:hover { background: rgba(0,0,0,0.05); }
.dark .qtop-pop-item:hover { background: rgba(255,255,255,0.08); }

/* Outils des headers historiques : originaux chez leur owner, commandes via le +. */
.qtop-page-tool-source.qtop-page-tool-source { display: none !important; }
.qtop-page-tools-trigger { flex-shrink: 0; border-radius: 9.8px; }
.qtop-page-tools-trigger[hidden] { display: none !important; }
.qtop-page-tools-pop { min-width: 220px; max-width: min(360px, calc(100vw - 16px)); max-height: calc(100dvh - 72px); overflow-y: auto; }
.qtop-page-tools-pop .qtop-pop-item { min-height: 40px; white-space: normal; }
.qtop-page-tools-pop .qtop-pop-item[hidden] { display: none !important; }
.qtop-page-tools-pop .qtop-pop-item:disabled { opacity: .45; cursor: not-allowed; }
.qtop-page-tools-pop .qtop-pop-item:focus-visible, .qtop-page-tools-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.qtop-page-tools-pop .qtop-pop-item svg, .qtop-page-tools-pop .qtop-pop-item i { flex-shrink: 0; width: 16px; }
@media (max-width: 768px) {
  .qm-header .qtop-page-tools-trigger { min-width: 44px; min-height: 44px; margin-left: auto; }
}
/* Masquage pins/doublons : CLASSE !important obligatoire — la règle display:inline-flex !important
   des *-sub-tab (harmonisation tabs) écrase tout style.display inline */
.qtop-unpinned.qtop-unpinned.qtop-unpinned { display: none !important; }  /* (0,3,0) > (0,2,0) de la règle harmonisation [class*=-sub-tab]:not(...) */
/* ⋯ favoris générique (qtop.js autoPins) : vit dans la zone droite FIXE de la barre, jamais
   dans une rangée qui scrolle, jamais migré au sur-bandeau (classe exclue par migratePageGhosts). */
.qtop-more { flex-shrink: 0; }
/* Lignes filtrées par une recherche de barre déclarative ([data-qtop-search-target]) —
   CLASSE (jamais un style.display inline : les règles tabs/cartes posent des display !important) */
.qtop-filtered-out.qtop-filtered-out { display: none !important; }
.qtop-pin { margin-left: auto; opacity: 0.35; cursor: pointer; flex-shrink: 0; padding: 5px; box-sizing: content-box; border-radius: 6px; }
.qtop-pin:hover { opacity: 0.8; background: rgba(0,0,0,0.06); }
.qtop-pin.pinned { opacity: 1; color: #f59e0b; }
/* Barre basse : datas gauche · pagination centre · info droite.
   Fond glass GLOBAL (retour user 2026-07-24 « comme sur Mes tâches ») — toutes les barres basses. */
.qbottom { height: 55px; min-height: 55px; display: flex; align-items: center; gap: 8px; position: relative;
  padding-right: 12px;  /* l'étoile Qloa Vision se dock EN FLEX en fin de barre (voice_copilot.html) */
  background: var(--glass-bg, rgba(255,255,255,0.55)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border, rgba(0,0,0,0.08)); }
.dark .qbottom { background: rgba(24,24,27,0.55); border-top-color: rgba(255,255,255,0.08); }
/* ⚠️ Le wrapper de page .animate-fade-in (base.html) animait transform:translateY → le transform
   fait du wrapper le CONTAINING BLOCK de tout position:fixed descendant : footers locaux décalés
   de 55px vers le haut + page décalée de 10px (vécu LDB inbox 2026-07-27). Fade conservé en
   OPACITY SEULE — plus jamais de transform sur un wrapper contenant des fixed. */
main > .animate-fade-in { animation-name: qloaFadeInSafe !important; }
@keyframes qloaFadeInSafe { 0% { opacity: 0; } 100% { opacity: 1; } }

/* Footers LOCAUX = même géométrie que le global (réf tasks, validée user 2026-07-24) :
   fixed collé en bas, pleine largeur du bord du menu au bord droit du navigateur.
   Les pages réservent 55px (padding-bottom) puisque la barre sort du flux. */
@media (min-width: 769px) {
  .qbottom:not(#qbottom-global) { position: fixed; bottom: 0; right: 0;
    left: var(--qbottom-left, 233px); z-index: 20; margin: 0 !important; width: auto; }
}

/* Headers (barres uniques) = MÊME fond glass que les footers (retour user 2026-07-24
   « réutiliser le même fond pour le header, ça uniformisera ») — full-bleed latéral,
   respiration déplacée en padding interne. Spécificité (0,2,0)+!important pour battre
   les `background: transparent !important` locaux des pages. */
@media (min-width: 769px) {
  .tl-tabs[class*="unibar"], .qtop {
    background: var(--glass-bg, rgba(255,255,255,0.55)) !important;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
    border-radius: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 12px !important;
    /* §fix #227 : tue le legs design-system (.tl-tabs padding:4px + margin-bottom:16px !important)
       pour les 11 unibars — fini les re-déclarations locales obligatoires */
    padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important;
    width: 100% !important;  /* design-system .tl-tabs = width:fit-content → barre courte SHRINK (fond glass tronqué, vécu visitors 2026-07-27) — les barres canon sont TOUJOURS pleine largeur */
  }
  .dark .tl-tabs[class*="unibar"], .dark .qtop {
    background: rgba(24,24,27,0.55) !important;
    border-bottom-color: rgba(255,255,255,0.08);
  }
}
.qbottom .qbottom-kpis { display: flex; align-items: center; gap: 8px; }
.qbottom .qbottom-kpis > * { height: 32px; display: inline-flex; align-items: center; gap: 5px;
  padding: 0 12px; font-size: 10.5px; border-radius: 9.8px; }
/* Alignement vertical interne des chips data : line-height 1 partout (les tailles mixtes flottaient) */
.qbottom .crm-kpi-chip, .qbottom .crm-kpi-chip * { line-height: 1 !important; align-items: center; }
.qbottom .crm-kpi-chip svg { display: block; }
/* CANON mobile : .tl-tabs est display:flex !important SANS media query (design-system.css:233)
   → toute nouvelle unibar FUIT sur mobile par défaut. Une barre qui a un fallback mobile dédié
   (qm-header/sheet) pose la classe .qtop-desktop-only — plus de media query locale par page. */
@media (max-width: 768px) { .tl-tabs.qtop-desktop-only { display: none !important; } }

/* CANON #227 : sous-navigation L2 dockée DANS la barre 55px via QTop.dockL2 (qtop.js).
   La rangée garde sa classe .sub-tabs d'origine ; une fois enfant d'une .tl-tabs elle
   devient un conteneur nu : séparateur en tête, pills 32px corners 9.8, nowrap, jamais
   de 2e ligne. Le display none/.active éventuel de la page (ex .cfg-l2) reste maître
   (ses !important gagnent sur le display:flex ci-dessous). */
.tl-tabs .sub-tabs, .tl-tabs .qtop-l2 { display: flex; background: transparent !important;
  padding: 0 !important; margin: 0 !important; gap: 2px; flex-wrap: nowrap;
  border-radius: 0 !important; flex-shrink: 1; min-width: 0; align-items: center;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.tl-tabs .sub-tabs::-webkit-scrollbar, .tl-tabs .qtop-l2::-webkit-scrollbar { display: none; }
.tl-tabs .sub-tabs::before, .tl-tabs .qtop-l2::before { content: ''; width: 1px; height: 20px;
  background: rgba(0,0,0,0.12); margin: 0 6px; flex-shrink: 0; }
.dark .tl-tabs .sub-tabs::before, .dark .tl-tabs .qtop-l2::before { background: rgba(255,255,255,0.14); }
.tl-tabs .sub-tab, .tl-tabs .qtop-l2 > button { height: 32px; min-height: 32px;
  border-radius: 9.8px !important; font-weight: 400; white-space: nowrap; flex-shrink: 0; }

/* CANON : datas/KPIs de page = TOUJOURS dans le footer QBottom (#qbottom-global-kpis),
   JAMAIS en cartes au-dessus de la liste. Chip canon réutilisable : */
.qbottom-kpi { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; line-height: 1; }
.qbottom-kpi .v { font-weight: 700; font-size: 12.5px; color: var(--text-primary, #000); }
.qbottom-kpi .l { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-secondary, rgba(0,0,0,0.5)); font-weight: 600; }
.qbottom-kpi + .qbottom-kpi { margin-left: 14px; }
.qbottom-kpi .v.warn { color: #d97706; } .qbottom-kpi .v.urgent { color: #dc2626; } .qbottom-kpi .v.ok { color: #16a34a; }
.dark .qbottom-kpi .v { color: #fff; } .dark .qbottom-kpi .l { color: rgba(255,255,255,0.5); }
.qbottom .qbottom-pager { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 4px; align-items: center; }
.qbottom .qbottom-pager button { height: 32px; min-width: 32px; border-radius: 9.8px; }
.qbottom .qbottom-info { margin-left: auto; font-size: 11px; color: var(--text-secondary, rgba(0,0,0,0.5));
  padding-right: 44px; }  /* réserve le slot étoile Qloa Vision bas-droite (canon 44px) */

/* ── CONFIG FORM CANON (vocabulaire partagé panels Paramètres) ──
   Promu depuis config_tab_abtest (local) → global. Tous les side panels config
   réutilisent .cfg-field-label + .cfg-input. Boutons = .cfg-btn / .cfg-btn-primary
   (radius 10px token, JAMAIS pill 999px — les pills sont réservées aux badges/chips). */
.cfg-field-label { display: block; font-size: 11.5px; font-weight: 700; color: #000; margin-bottom: 4px; }
.dark .cfg-field-label { color: #fff; }
.cfg-input { width: 100%; padding: 8px 12px; font-size: 12.5px; border: 1px solid rgba(0,0,0,0.12); border-radius: var(--radius-md, 10px); background: rgba(255,255,255,0.7); color: #000; box-sizing: border-box; }
.cfg-input:focus { outline: none; border-color: rgba(0,0,0,0.4); }
.dark .cfg-input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #fff; }
.dark .cfg-input:focus { border-color: rgba(255,255,255,0.4); }
.cfg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; font-size: 12.5px; font-weight: 700; border-radius: var(--btn-radius, 10px); border: 1px solid rgba(0,0,0,0.10); background: rgba(255,255,255,0.7); color: #000; cursor: pointer; transition: all .15s; }
.cfg-btn:hover { background: rgba(0,0,0,0.05); }
.dark .cfg-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #fff; }
.cfg-btn-primary { background: #000; color: #fff; border-color: #000; }
.cfg-btn-primary:hover { background: #1f1f1f; }
.dark .cfg-btn-primary { background: #fff; color: #000; border-color: #fff; }