/* Inter — sous-ensemble latin, self-hosted (zéro CDN, charte). Police VARIABLE :
   une seule déclaration couvre tout l'axe wght. Elle était auparavant inlinée en
   base64 QUATRE fois (400/500/600/700, payloads identiques) — 257 Ko dont 193 de
   pur doublon, que gzip ne dédupliquait pas (fenêtre 32 Ko, copies espacées de 64).
   Extraite en fichier : cachable séparément, et le CSS ne la retransporte plus à
   chaque livraison. Ticket 07, 2026-08-07. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-variable-latin.woff2) format('woff2-variations');}




/* =====================================================
   Dashboard Q&A Pablo — v3.0 · Vackelys claire
   1. Design tokens consolidés (light/dark unifiés)
   ===================================================== */
:root {
    /* Familles — Inter self-hostée en fichier (/fonts/, zéro CDN), fallback system-ui */
    --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
    --font-body:    var(--font-ui);

    /* Échelle typographique */
    --fs-2xs:   10.5px;
    --fs-xs:    11.5px;
    --fs-sm:    12.5px;
    --fs-base:  13.5px;
    --fs-md:    15px;
    --fs-lg:    17px;
    --fs-xl:    20px;
    --fs-2xl:   25px;
    --fs-3xl:   30px;
    --fs-display: 42px;
    /* H-11 (audit CSS, lot C) : tokens créés pour les valeurs hors échelle rencontrées
       en dur dans le fichier (nommage littéral, pas de convention sémantique existante
       pour ces paliers). */
    --fs-9:  9px;
    --fs-10: 10px;
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-22: 22px;
    --fs-28: 28px;

    /* Échelle d'espacement */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

    /* Marque Vackelys — charte officielle */
    --brand-blue:   #046BD2;
    --brand-cyan:   #0CC0DF;
    --brand-navy:   #004EAE;
    --brand-grad:   linear-gradient(135deg, #0CC0DF, #046BD2, #004EAE);

    /* Alias charte → tokens hérités (rétro-compat) */
    --cyan:        #0CC0DF;
    --cyan-dark:   #046BD2;
    --cyan-deeper: #0459AC;  /* Ticket 02 item 3/I-6 : assombri (ex. #046BD2) pour ≥4.5:1 en clair */
    --cyan-light:  #0CC0DF;
    --cyan-glow:   rgba(12, 192, 223, 0.42);
    /* violet/pink conservés pour le widget Pablito uniquement */
    --violet:      #A78BFA;
    --violet-soft: #C4B5FD;
    --violet-glow: rgba(167, 139, 250, 0.38);
    --pink:        #F472B6;
    --cyan-50:     rgba(12,192,223,0.06);
    --cyan-100:    rgba(12,192,223,0.12);
    --cyan-200:    rgba(12,192,223,0.22);

    /* Encre — LIGHT */
    /* a11y : --ink-400 relevé de #717E92 (~3.5:1) → #5E6A7D (~4.6:1) pour ≥4.5:1 sur #FFFFFF (WCAG AA) */
    --ink-900: #0B1220; --ink-800: #1A2333; --ink-700: #2F3A4F; --ink-600: #4B5668;
    --ink-500: #5A6678; --ink-400: #5E6A7D; --ink-300: #B7C1D1; --ink-200: #D4DBE6;
    --ink-100: #E6EBF2; --ink-50:  #F2F5FA;

    /* Surfaces — LIGHT (charte claire Vackelys) */
    --page-bg:        #F8FAFC;
    --page-bg-warm:   #FFFFFF;
    --surface:        rgba(255, 255, 255, 0.72);
    --surface-strong: rgba(255, 255, 255, 0.88);
    --surface-soft:   rgba(255, 255, 255, 0.55);
    --card:           rgba(255, 255, 255, 0.74);
    --border:         rgba(255, 255, 255, 0.65);
    --border-soft:    rgba(15, 23, 42, 0.06);
    --border-hi:      rgba(15, 23, 42, 0.11);
    --hairline:       rgba(15, 23, 42, 0.08);

    /* Aliases rétro-compat (référencés par du markup hérité) */
    --text:      var(--ink-900);
    --accent:    var(--cyan);
    --panel-bg:  var(--surface-strong);

    /* Sidebar — sombre dans les deux thèmes */
    --sb-hover:   rgba(255, 255, 255, 0.05);
    --sb-text:    #97A4B8;
    --sb-text-hi: #ECF1F8;

    /* Sémantique */
    --success: #047857; --success-soft: rgba(16,185,129,0.12);
    --danger:  #C81E1E; --danger-soft:  rgba(239,68,68,0.10);
    --warn:    #9C4708;  --warn-50: rgba(245,158,11,0.08); --warn-200: rgba(245,158,11,0.30);  /* Ticket 02 item 3/I-6 : assombri (ex. #B45309) pour ≥4.5:1 en clair */
    --info:    #1D4ED8;

    /* Ombres */
    --sh-xs:    0 1px 2px rgba(15,23,42,0.05);
    --sh-card:  0 1px 0 rgba(255,255,255,0.55) inset, 0 0 0 1px rgba(15,23,42,0.04), 0 6px 20px -10px rgba(15,23,42,0.12);
    --sh-float: 0 1px 0 rgba(255,255,255,0.6) inset, 0 0 0 1px rgba(15,23,42,0.06), 0 22px 50px -16px rgba(15,23,42,0.22);
    --sh-pop:   0 0 0 1px rgba(15,23,42,0.06), 0 14px 36px -12px rgba(15,23,42,0.28);

    /* Rayons */
    --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px;

    /* Mouvement */
    --ease-out:    cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.3, .64, 1);
    --d-fast: 130ms; --d-base: 200ms; --d-slow: 320ms;

    /* Focus — a11y : bleu charte #046BD2 ≥3:1 sur blanc et fond sombre (ex-cyan #0CC0DF = 1.9:1, échec WCAG 3.1.1) */
    --focus: #046BD2;
    --ring:  rgba(4, 107, 210, 0.40);

    /* Layout — app-shell-3 */
    --sb-w:          256px;
    --sb-w-collapsed: 48px;
    --topbar-h:      56px;
    --topbar-clear:  56px;  /* padding-top des panels = hauteur topbar */

    /* Glass — allégé v2.1 (blur réduit, moins de couches) */
    --glass-blur:        saturate(145%) blur(16px);
    --glass-blur-strong: saturate(160%) blur(22px);
}

:root[data-theme="dark"] {
    --page-bg:        #060914;
    --page-bg-warm:   #0A0F1F;
    --surface:        rgba(20, 28, 46, 0.62);
    --surface-strong: rgba(24, 33, 54, 0.86);
    --surface-soft:   rgba(20, 28, 46, 0.42);
    --card:           rgba(21, 29, 48, 0.66);
    --border:         rgba(255, 255, 255, 0.085);
    --border-soft:    rgba(255, 255, 255, 0.05);
    --border-hi:      rgba(255, 255, 255, 0.15);
    --hairline:       rgba(255, 255, 255, 0.07);
    --panel-bg:       rgba(24, 33, 54, 0.94);

    --ink-900: #ECF1F8; --ink-800: #D6DEEA; --ink-700: #B6C2D2; --ink-600: #95A3B8;
    --ink-500: #8492A8; --ink-400: #7A8AA0; --ink-300: #3D4D64; --ink-200: #2A3950;  /* ink-400 : Ticket 02 item 4, remonté d'un cran (ex. #6A798F, 4.49:1 à 10.5px) pour ≥4.6:1 (headers colonnes, .dr-meta) */
    --ink-100: #1B2640; --ink-50:  #131C32;

    --cyan-50:  rgba(11,181,197,0.10);
    --cyan-100: rgba(11,181,197,0.18);
    --cyan-200: rgba(11,181,197,0.32);
    --warn-50:  rgba(245,158,11,0.10);
    --warn-200: rgba(245,158,11,0.35);

    --success: #2BD49B; --danger: #F26464; --warn: #F0A93A; --info: #60A5FA;
    /* H-5 (ticket 14 item 2) : vert « succès » texte unique en dark — remplace
       #6EE7B7/#86EFAC/#34D399 dispersés sur badges/chips/statuts (valeur
       reprise de #6EE7B7, la plus répandue des 3 et la mieux contrastée). */
    --success-dark-text: #6EE7B7;

    --sh-xs:    0 1px 2px rgba(0,0,0,0.30);
    --sh-card:  0 1px 0 rgba(255,255,255,0.04) inset, 0 0 0 1px rgba(255,255,255,0.06), 0 16px 34px -16px rgba(0,0,0,0.55);
    --sh-float: 0 1px 0 rgba(255,255,255,0.06) inset, 0 0 0 1px rgba(255,255,255,0.08), 0 28px 64px -16px rgba(0,0,0,0.68);
    --sh-pop:   0 0 0 1px rgba(255,255,255,0.07), 0 18px 42px -14px rgba(0,0,0,0.62);

    /* Ticket 02 item 5 : .sb-item-label inactifs mesurés à 2.68:1 en sombre (--sb-text
       hérite sinon de la valeur base #97A4B8) → override dédié plus clair, ≥4.5:1,
       tout en restant nettement sous --sb-text-hi (#ECF1F8) pour garder la hiérarchie
       actif/hover. Impacte aussi .sb-logo-sub/.sb-status-sub (même token, cohérent). */
    --sb-text: #AEB9CC;
}

/* =====================================================
   2. Reset & base
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    font-family: var(--font-ui);
    background: var(--page-bg);
    color: var(--ink-900);
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv11', 'ss01';
}
body { font-size: var(--fs-base); line-height: 1.5; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.014em; font-weight: 600; }
.mono, code, pre, .qa-id { font-family: var(--font-mono); font-feature-settings: 'zero'; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Focus visible — anneau unifié sur tout élément interactif */
:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Utilitaires conservés (référencés par du markup hérité) */
.u-text-cyan    { color: var(--cyan-deeper); }
:root[data-theme="dark"] .u-text-cyan { color: var(--cyan-light); }
.u-text-ink-400 { color: var(--ink-400); }
.u-text-ink-500 { color: var(--ink-500); }
.u-text-ink-600 { color: var(--ink-600); }
.u-text-success { color: var(--success); }
.u-text-danger  { color: var(--danger); }
.u-text-warn    { color: var(--warn); }
.u-fs-11 { font-size: var(--fs-xs); }
.u-fs-12 { font-size: var(--fs-sm); }
.hidden  { display: none !important; }

/* =====================================================
   GARDE-FOU [hidden] OBLIGATOIRE (piège #20)
   Tout conteneur display:flex/grid piloté par JS via
   l'attribut [hidden] doit être listé ici.
   ===================================================== */
/* Panels onglets */
#tab-overview[hidden], #tab-llm[hidden], #tab-pending[hidden],
#tab-library[hidden], #tab-mails[hidden], #tab-conversations[hidden],
#tab-anomalies[hidden], #tab-export[hidden], #tab-chat[hidden],
#tab-pablito[hidden], #tab-billing[hidden], #tab-forum-drafts[hidden] { display: none !important; }

/* Drawers (billing, conv, anomalies) */
.billing-drawer[hidden], .billing-drawer-backdrop[hidden],
.conv-drawer[hidden], .conv-drawer-backdrop[hidden],
.anom-drawer[hidden], .anom-drawer-backdrop[hidden] { display: none !important; }

/* Pablito */
.pbl-ctx-bar[hidden] { display: none !important; }
/* Pablito — bascule Chat | Documents (Lot 3, ADR 0029) : 2 panes flex frères
   pilotés par [hidden] (pdocSwitchTo(), tabs/pablito-docs.js). */
.pablito-layout[hidden], .pdoc-pane[hidden] { display: none !important; }

/* Sous-panneaux mails/llm */
.msub[hidden], .llm-pane[hidden] { display: none !important; }

/* Fil forum draft */
.fd-thread-body[hidden], .fd-card[hidden], #fd-list-container[hidden] { display: none !important; }

/* Bulkbars */
.conv-bulkbar[hidden] { display: none !important; }
.fd-bulkbar[hidden]   { display: none !important; }

/* =====================================================
   DRAWER UNIFIÉ — classe partagée .drawer
   (conv, billing, anomalies héritent tous de .drawer)
   ===================================================== */
.drawer {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    background: var(--panel-bg);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    border-left: 1px solid var(--border-hi);
    z-index: 999;
    display: flex; flex-direction: column;
    box-shadow: -8px 0 32px rgba(7,11,22,0.18);
    animation: drawer-slide-in var(--d-base) var(--ease-out);
    overflow: hidden;
}
.drawer[hidden] { display: none !important; }
.drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(7,11,22,0.50);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 998;
}
.drawer-backdrop[hidden] { display: none !important; }
@keyframes drawer-slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* =====================================================
   ÉTATS VISUELS DISTINCTS — chargement / vide / erreur
   ===================================================== */
/* Chargement */
.state-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-8) var(--sp-6);
    color: var(--ink-500);
    font-size: var(--fs-base);
    min-height: 120px;
}
.state-loading::before {
    content: '';
    display: block;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2.5px solid var(--cyan-100);
    border-top-color: var(--brand-cyan);
    animation: state-spin 0.8s linear infinite;
}
@keyframes state-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .state-loading::before { animation: none; border-top-color: var(--brand-cyan); }
}

/* État vide */
.state-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-8) var(--sp-6);
    color: var(--ink-400);
    font-size: var(--fs-base);
    text-align: center;
    min-height: 120px;
    border: 1px dashed var(--border-hi);
    border-radius: var(--r-lg);
    background: var(--surface-soft);
}
.state-empty-icon {
    font-size: var(--fs-2xl);
    opacity: 0.45;
    margin-bottom: var(--sp-1);
}
.state-empty-title {
    font-weight: 600;
    color: var(--ink-600);
    font-size: var(--fs-md);
}

/* Erreur réseau */
.state-error {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-6);
    color: var(--danger);
    font-size: var(--fs-base);
    text-align: center;
    min-height: 120px;
    border: 1px solid var(--danger-soft);
    border-radius: var(--r-lg);
    background: rgba(224,52,52,0.04);
}
.state-error-title {
    font-weight: 600;
    font-size: var(--fs-md);
}
.state-error-sub {
    font-size: var(--fs-sm);
    color: var(--ink-500);
    max-width: 42ch;
    line-height: 1.5;
}
.state-error .btn { margin-top: var(--sp-2); }

/* Classe kpi-skeleton supprimée ici (Lot B vague 2, 2026-07-18, ticket 15
   pt.6) — 0 usage HTML/JS confirmé (re-vérifié par grep exhaustif). @keyframes
   shimmer conservé : encore utilisé par session-skeleton (§ Skeleton de
   chargement, ~l.1760, index.html:965,1013 — actif). */

/* =====================================================
   3. Wallpaper — mesh Vackelys clair
   ===================================================== */
body::before {
    content: '';
    position: fixed; inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 640px 400px at 10% 6%,  rgba(12,192,223,0.10), transparent 60%),
        radial-gradient(ellipse 560px 420px at 90% 10%, rgba(4,107,210,0.08),  transparent 62%),
        linear-gradient(180deg, var(--page-bg-warm) 0%, var(--page-bg) 100%);
}
:root[data-theme="dark"] body::before {
    background:
        radial-gradient(ellipse 800px 500px at 10% 6%,  rgba(12,192,223,0.20), transparent 60%),
        radial-gradient(ellipse 700px 540px at 92% 12%, rgba(4,107,210,0.22),  transparent 62%),
        linear-gradient(180deg, #060d1a 0%, #080f20 100%);
}
/* Grain : statique, opacité réduite, sans mix-blend (coûteux) */
body::after {
    content: '';
    position: fixed; inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.4;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
}
:root[data-theme="dark"] body::after { opacity: 0.28; }

/* =====================================================
   4. App layout + scrollbars
   ===================================================== */
.app {
    display: flex;
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    position: relative;
}
* { scrollbar-width: thin; scrollbar-color: rgba(120,135,160,0.32) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(120,135,160,0.28);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(120,135,160,0.5); background-clip: padding-box; }

/* =====================================================
   5. Sidebar — collapsible (~256px ↔ ~48px icônes)
   ===================================================== */
.sidebar {
    width: var(--sb-w);
    min-width: var(--sb-w);
    background:
        radial-gradient(ellipse 360px 240px at 50% -10%, rgba(12,192,223,0.14), transparent 65%),
        radial-gradient(ellipse 300px 200px at 90% 100%, rgba(4,107,210,0.10), transparent 60%),
        linear-gradient(180deg, #060d1a 0%, #080f20 100%);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 20;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: inset -1px 0 0 rgba(12,192,223,0.10);
    /* Transition collapsible */
    transition: width var(--d-base) var(--ease-out),
                min-width var(--d-base) var(--ease-out);
    flex-shrink: 0;
}
.sidebar > * { position: relative; z-index: 1; }

/* Mode icônes — sidebar collapsed */
.sidebar.collapsed {
    width: var(--sb-w-collapsed);
    min-width: var(--sb-w-collapsed);
}
/* Masquer les textes/labels en mode collapsed */
.sidebar.collapsed .sb-item-label,
.sidebar.collapsed .sb-logo-text,
.sidebar.collapsed .sb-logo-sub,
.sidebar.collapsed .sb-section-label,
.sidebar.collapsed .sb-badge,
.sidebar.collapsed .sb-status-text,
.sidebar.collapsed .sb-status-sub {
    opacity: 0;
    pointer-events: none;
    width: 0;
    overflow: hidden;
    transition: opacity var(--d-base) var(--ease-out),
                width var(--d-base) var(--ease-out);
}
.sidebar:not(.collapsed) .sb-item-label,
.sidebar:not(.collapsed) .sb-logo-text,
.sidebar:not(.collapsed) .sb-section-label,
.sidebar:not(.collapsed) .sb-badge,
.sidebar:not(.collapsed) .sb-status-text,
.sidebar:not(.collapsed) .sb-status-sub {
    opacity: 1;
    width: auto;
}
/* En mode collapsed, centrer les icônes */
.sidebar.collapsed .sb-item {
    justify-content: center;
    padding: 10px 0;
}
.sidebar.collapsed .sb-item[aria-current="page"]::before {
    left: 0;
}
/* Fix 13 : en collapsed, masquer COMPLÈTEMENT les badges et annuler le gap.
   Le badge gardait opacity:0 mais width:22 + le gap:12px du flex restaient,
   donc justify-content:center poussait l'icône hors du rail (x≈-8). */
.sidebar.collapsed .sb-item { gap: 0; }
/* le label garde flex:1 (= grow) même à width:0 → il consommait l'espace et
   plaquait l'icône à gauche ; flex:none le neutralise pour centrer l'icône. */
.sidebar.collapsed .sb-item-label { flex: none; }
.sidebar.collapsed .sb-badge,
.sidebar.collapsed .sb-badge--amber { display: none; }
/* Hauteur du sb-logo alignée sur topbar 56px */
.sb-logo {
    height: var(--topbar-h);
    padding: 0 var(--sp-3);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
}

.sb-logo-mark {
    flex-shrink: 0;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 6px 14px rgba(11,181,197,0.40));
}
.sb-logo-mark svg { width: 38px; height: 38px; display: block; }
.sb-logo-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.sb-logo-brand {
    font-family: var(--font-display);
    font-size: var(--fs-md); font-weight: 600;
    /* Fix M2 (/diagnose 2026-07-06) : color était #F3F7FC codé en dur (blanc fixe),
       jamais décliné pour le thème clair → texte "Pablo" invisible sur le fond
       clair de .sidebar (#EDF1F7, cf. :root[data-theme="light"] .sidebar ligne ~4162).
       var(--sb-text-hi) est déjà le token utilisé par .sb-status-text (ligne ~658)
       pour ce même besoin — il vaut #ECF1F8 (quasi blanc) en sombre et #0B1220
       (encre) en clair, donc theme-aware par construction sans règle dupliquée. */
    color: var(--sb-text-hi);
    letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-logo-sub {
    font-size: var(--fs-2xs);
    font-weight: 500;
    color: var(--sb-text);
    margin-top: var(--sp-1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sb-nav { padding: var(--sp-2) var(--sp-2) var(--sp-1); }
.sb-section { padding: var(--sp-3) 0 2px; }
.sb-section-label {
    font-size: var(--fs-10); font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(150,163,184,0.6);
    padding: 0 12px;
    margin-bottom: var(--sp-2);
}

/* Items de navigation — désormais de vrais <button> */
.sb-item {
    display: flex; align-items: center; gap: var(--sp-3);
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    color: var(--sb-text);
    font-size: var(--fs-base); font-weight: 500;
    font-family: var(--font-ui);
    text-align: left;
    transition: color var(--d-fast) var(--ease-out),
                background var(--d-fast) var(--ease-out);
    position: relative;
    margin-bottom: 2px;
    letter-spacing: -0.005em;
}
.sb-item:hover { background: var(--sb-hover); color: var(--sb-text-hi); }
.sb-item:focus-visible { outline-offset: -2px; }
.sb-item[aria-current="page"] {
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--tab-c2, var(--cyan)) 22%, transparent),
        color-mix(in oklab, var(--tab-c2, var(--cyan)) 11%, transparent));
    color: color-mix(in oklab, var(--tab-c, var(--cyan-light)) 82%, white);
    box-shadow:
        inset 0 0 0 1px color-mix(in oklab, var(--tab-c2, var(--cyan)) 30%, transparent),
        0 0 16px -7px color-mix(in oklab, var(--tab-c, var(--cyan-light)) 80%, transparent);
}
.sb-item[aria-current="page"]::before {
    content: '';
    position: absolute; left: -12px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 22px;
    background: linear-gradient(180deg, var(--tab-c, var(--cyan-light)), var(--tab-c2, var(--cyan)));
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 12px color-mix(in oklab, var(--tab-c, var(--cyan-light)) 65%, transparent);
}
.sb-ico {
    width: 18px;
    text-align: center;
    font-size: var(--fs-md);
    opacity: 0.7;
    flex-shrink: 0;
    transition: opacity var(--d-fast);
}
.sb-item:hover .sb-ico,
.sb-item[aria-current="page"] .sb-ico { opacity: 1; }
.sb-item[aria-current="page"] .sb-ico { color: var(--tab-c, var(--cyan-light)); }
.sb-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Accent par onglet — charte Vackelys */
.sb-item[data-tab="tab-overview"]      { --tab-c: #0CC0DF; --tab-c2: #046BD2; }
.sb-item[data-tab="tab-llm"]           { --tab-c: #34D399; --tab-c2: #10B981; }
.sb-item[data-tab="tab-billing"]       { --tab-c: #EA580C; --tab-c2: #C2410C; }
.sb-item[data-tab="tab-pending"]       { --tab-c: #FCD34D; --tab-c2: #F59E0B; }
.sb-item[data-tab="tab-library"]       { --tab-c: #0CC0DF; --tab-c2: #046BD2; }
.sb-item[data-tab="tab-mails"]         { --tab-c: #94A3B8; --tab-c2: #64748B; }
.sb-item[data-tab="tab-conversations"] { --tab-c: #0CC0DF; --tab-c2: #046BD2; }
.sb-item[data-tab="tab-anomalies"]     { --tab-c: #FCA5A5; --tab-c2: #EF4444; }
.sb-item[data-tab="tab-export"]        { --tab-c: #0CC0DF; --tab-c2: #046BD2; }
.sb-item[data-tab="tab-chat"]          { --tab-c: #0CC0DF; --tab-c2: #046BD2; }
.sb-item[data-tab="tab-pablito"]       { --tab-c: var(--violet); --tab-c2: var(--pbl-accent); }
.sb-item[data-tab="tab-forum-drafts"]  { --tab-c: #86EFAC; --tab-c2: #22C55E; }

.sb-badge {
    margin-left: auto;
    font-size: var(--fs-10);
    font-weight: 700;
    background: rgba(11,181,197,0.20);
    color: var(--cyan-light);
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--font-mono);
    min-width: 22px;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(11,181,197,0.20);
}
.sb-badge:empty { display: none; }
.sb-badge--amber {
    background: rgba(245,158,11,0.22);
    color: #FCD34D;
    box-shadow: inset 0 0 0 1px rgba(245,158,11,0.28);
}
.sb-item[data-tab="tab-pending"][aria-current="page"] .sb-badge--amber {
    background: rgba(245,158,11,0.32); color: #FEF3C7;
}
/* Règle orpheline supprimée ici (Lot B vague 2, 2026-07-18) : sb-item
   [data-tab="tab-library"][aria-current="page"] sb-badge — le badge de
   l'item sidebar Bibliothèque a été retiré en vague 1 (0 span.sb-badge sur
   tab-library dans index.html, confirmé). */

.sb-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    margin: var(--sp-2) 12px;
}

.sb-footer {
    margin-top: auto;
    padding: var(--sp-3) var(--sp-2) var(--sp-4);
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; gap: var(--sp-2);
}
.sb-status {
    flex: 1;
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 10px 11px;
    border-radius: var(--r-sm); /* ticket 23 : ex-11px, ±1px invisible */
    background: rgba(255,255,255,0.035);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.sb-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(16,185,129,0.35);
    /* Vague 2 : animation très discrète (réduite depuis pulse-green agressif) */
    animation: pulse-green-calm 4s ease-in-out infinite;
}
@keyframes pulse-green-calm {
    0%   { box-shadow: 0 0 3px rgba(16,185,129,0.3); }
    50%  { box-shadow: 0 0 6px rgba(16,185,129,0.5); }
    100% { box-shadow: 0 0 3px rgba(16,185,129,0.3); }
}
@media (prefers-reduced-motion: reduce) {
    .sb-status-dot { animation: none; }
}
/* Ancienne animation conservée comme alias (no-op si jamais référencée) */
@keyframes pulse-green {
    0%   { box-shadow: 0 0 3px rgba(16,185,129,0.3); }
    50%  { box-shadow: 0 0 6px rgba(16,185,129,0.5); }
    100% { box-shadow: 0 0 3px rgba(16,185,129,0.3); }
}
.sb-status-text { font-size: var(--fs-sm); font-weight: 600; color: var(--sb-text-hi); }
.sb-status-sub  { font-size: var(--fs-2xs); color: var(--sb-text); margin-top: 2px; }

.sb-theme-toggle {
    background: rgba(255,255,255,0.06);
    color: var(--sb-text-hi);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--r-sm);
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-md);
    flex-shrink: 0;
    transition: color var(--d-fast), background var(--d-fast), border-color var(--d-fast);
}
.sb-theme-toggle:hover {
    color: var(--cyan-light);
    background: rgba(11,181,197,0.16);
    border-color: rgba(34,211,238,0.35);
}
:root[data-theme="dark"] .sb-theme-toggle .theme-ico-light { display: none; }
:root:not([data-theme="dark"]) .sb-theme-toggle .theme-ico-dark { display: none; }

/* Hamburger mobile */
.sb-toggle {
    display: none;
    background: var(--surface-strong);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-sm);
    width: 42px; height: 42px;
    color: var(--ink-700);
    align-items: center; justify-content: center;
    font-size: var(--fs-md);
}
.sb-backdrop {
    display: none;
    position: fixed; inset: 0;
    z-index: 40;
    background: rgba(7,10,20,0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* =====================================================
   6. Topbar — barre sticky 56px alignée avec sb-logo
   ===================================================== */
.topbar {
    height: var(--topbar-h);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 0 var(--sp-6) 0 var(--sp-4);
    background: var(--surface-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--sh-xs);
}
/* Titre de page (breadcrumb simple) */
.topbar-title {
    flex: 1;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ink-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Toggle sidebar dans la topbar */
.topbar-sb-toggle {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-xs);
    color: var(--ink-500);
    transition: color var(--d-fast), background var(--d-fast);
    flex-shrink: 0;
}
.topbar-sb-toggle:hover { color: var(--brand-cyan); background: var(--cyan-50); }
.topbar-sep {
    width: 1px; height: 22px;
    background: var(--hairline);
    flex-shrink: 0;
}
.topbar-actions {
    display: flex; align-items: center; gap: var(--sp-2);
    /* Fix prod-ready 2026-07-19 : sans flex-shrink:0, ce conteneur se compressait sous
       sa taille naturelle avant que .topbar-title (flex:1) ne tronque via son ellipsis
       — .topbar-sep juste au-dessus l'avait déjà. */
    flex-shrink: 0;
}
.topbar-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: var(--fs-sm); font-weight: 600;
    color: var(--ink-700);
    padding: 8px 13px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    font-family: var(--font-ui);
    letter-spacing: -0.005em;
    transition: color var(--d-fast), background var(--d-fast), border-color var(--d-fast);
}
.topbar-btn:hover {
    border-color: var(--border-hi);
    color: var(--cyan-deeper);
    background: var(--surface-soft);
}
:root[data-theme="dark"] .topbar-btn { color: var(--ink-600); }
/* Ticket 02 item 1 : le label héritait en théorie de .topbar-btn, mais mesuré à
   rgb(47,58,79) (= --ink-700 clair) dans les 2 thèmes → override explicite dédié. */
:root[data-theme="dark"] .topbar-btn-label { color: var(--ink-600); }
:root[data-theme="dark"] .topbar-btn:hover {
    color: var(--cyan-light);
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}
.topbar-drafts-counter {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: var(--fs-sm); font-weight: 600;
    color: var(--cyan-deeper);
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(11,181,197,0.1);
    border: 1px solid rgba(11,181,197,0.24);
}
:root[data-theme="dark"] .topbar-drafts-counter {
    color: var(--cyan-light);
    background: rgba(11,181,197,0.16);
    border-color: rgba(34,211,238,0.3);
}

/* =====================================================
   7. Onglets & panneaux
   ===================================================== */
/* Un seul conteneur scrollable — le tab-panel lui-même */
.tab-viewport { flex: 1; overflow: hidden; position: relative; }
.tab-panel {
    position: absolute;
    inset: 0;
    padding: var(--sp-6) var(--sp-7) var(--sp-7);
    overflow-y: auto;
    display: none;
    flex-direction: column;
    gap: var(--sp-6);
}
.tab-panel.active {
    display: flex;
    animation: panel-in var(--d-base) var(--ease-out);
}
@keyframes panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Couleurs d'accent par panneau (charte + sémantique) */
#tab-overview      { --panel-c: #0CC0DF; --panel-c2: #046BD2; }
#tab-llm           { --panel-c: #34D399; --panel-c2: #10B981; }
#tab-pending       { --panel-c: #FCD34D; --panel-c2: #D97706; }
#tab-library       { --panel-c: #0CC0DF; --panel-c2: #046BD2; }
#tab-mails         { --panel-c: #94A3B8; --panel-c2: #64748B; }
#tab-conversations { --panel-c: #0CC0DF; --panel-c2: #046BD2; }
#tab-anomalies     { --panel-c: #FCA5A5; --panel-c2: #DC2626; }
#tab-export        { --panel-c: #0CC0DF; --panel-c2: #046BD2; }
#tab-chat          { --panel-c: #0CC0DF; --panel-c2: #046BD2; }
#tab-pablito       { --panel-c: var(--violet); --panel-c2: var(--pbl-accent); }
#tab-billing       { --panel-c: #EA580C; --panel-c2: #C2410C; }
#tab-forum-drafts  { --panel-c: #34D399; --panel-c2: #10B981; }

.panel-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-6);
    flex-wrap: wrap;
}
.panel-title {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -0.022em;
    line-height: 1.15;
}
.panel-title::after {
    content: '';
    display: block;
    width: 52px; height: 3px;
    margin-top: var(--sp-2);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--panel-c2, var(--cyan)), var(--panel-c, var(--cyan-light)) 65%, transparent);
}
.panel-lead {
    font-size: var(--fs-base);
    color: var(--ink-500);
    max-width: 60ch;
    line-height: 1.55;
    margin-top: var(--sp-3);
}

/* =====================================================
   8. Overview — cartes KPI
   ===================================================== */
.ov-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
}
.ov-card {
    position: relative;
    background: var(--card);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    overflow: hidden;
    box-shadow: var(--sh-card);
    transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
    isolation: isolate;
    min-height: 150px;
}
.ov-card::after {
    content: '';
    position: absolute;
    right: -40px; bottom: -40px;
    width: 150px; height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--card-halo, var(--cyan-glow)) 0%, transparent 70%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}
.ov-card > * { position: relative; z-index: 1; }
.ov-card:hover { transform: translateY(-3px); box-shadow: var(--sh-float); }
.ov-card .spark {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%; height: 56%;
    z-index: 0;
    opacity: 0.5;
    color: var(--cyan);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%);
    mask-image: linear-gradient(180deg, transparent, #000 35%);
    pointer-events: none;
}
.ov-card--warn { --card-halo: rgba(245,158,11,0.42); }
.ov-card--cyan { --card-halo: rgba(11,181,197,0.42); }
.ov-card--info { --card-halo: rgba(167,139,250,0.42); }
.ov-card--ok   { --card-halo: rgba(16,185,129,0.38); }
.ov-card--warn .spark { color: var(--warn); }
.ov-card--cyan .spark { color: var(--cyan); }
.ov-card--info .spark { color: var(--violet); }
.ov-card--ok   .spark { color: var(--success); }

.ov-card-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--ink-600);
    border: 1px solid var(--border-hi);
    align-self: flex-start;
}
.ov-card--warn .ov-card-chip { background: rgba(245,158,11,0.12); color: var(--warn); border-color: rgba(245,158,11,0.3); }
.ov-card--cyan .ov-card-chip { background: rgba(11,181,197,0.12); color: var(--cyan-deeper); border-color: rgba(11,181,197,0.28); }
.ov-card--info .ov-card-chip { background: rgba(167,139,250,0.14); color: #6D28D9; border-color: rgba(167,139,250,0.32); }
.ov-card--ok   .ov-card-chip { background: rgba(16,185,129,0.12); color: var(--success); border-color: rgba(16,185,129,0.28); }
:root[data-theme="dark"] .ov-card-chip { color: var(--ink-600); }
:root[data-theme="dark"] .ov-card--warn .ov-card-chip { color: #FCD34D; }
:root[data-theme="dark"] .ov-card--cyan .ov-card-chip { color: var(--cyan-light); }
:root[data-theme="dark"] .ov-card--info .ov-card-chip { color: var(--violet-soft); }
:root[data-theme="dark"] .ov-card--ok   .ov-card-chip { color: var(--success-dark-text); }

.ov-value {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1;
    margin-top: var(--sp-3);
    color: var(--ink-900);
    font-feature-settings: 'tnum';
}
.ov-value--date { font-size: var(--fs-3xl); letter-spacing: -0.02em; }
.ov-card--warn .ov-value { color: var(--warn); }
.ov-card--cyan .ov-value { color: var(--cyan-deeper); }
.ov-card--info .ov-value { color: #6D28D9; }
:root[data-theme="dark"] .ov-card--warn .ov-value { color: #FBBF24; }
:root[data-theme="dark"] .ov-card--cyan .ov-value { color: var(--cyan-light); }
:root[data-theme="dark"] .ov-card--info .ov-value { color: var(--violet-soft); }

.ov-label { font-size: var(--fs-sm); color: var(--ink-600); font-weight: 500; margin-top: 2px; }
.ov-trend {
    font-size: var(--fs-xs);
    color: var(--ink-500);
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: var(--sp-2);
    font-weight: 500;
}
.ov-trend i { font-size: var(--fs-10); opacity: 0.85; }

/* KPIs LLM compacts (overview) */
.kpis-llm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-3);
}
.kpi-llm-card {
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--card);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--sh-card);
}
.kpi-llm-card--clickable { cursor: pointer; transition: transform var(--d-fast), box-shadow var(--d-base); }
.kpi-llm-card--clickable:hover { transform: translateY(-2px); box-shadow: var(--sh-float); }
.kpi-llm-label { font-size: var(--fs-xs); color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.kpi-llm-value { font-size: var(--fs-2xl); font-weight: 600; margin: 6px 0 4px; color: var(--ink-900); font-feature-settings: 'tnum'; }
.kpi-llm-value--mono { font-family: var(--font-mono); font-size: var(--fs-md); }
.kpi-llm-sub { font-size: var(--fs-xs); color: var(--ink-500); }

/* Overview — bas de page */
.ov-bottom {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-5);
    min-height: 0;
}
/* Fix H1-quater (trouvé en vérifiant le fix H1-bis/H1-ter par mesure live,
   getBoundingClientRect — pas de capture d'écran lisible dans cet environnement) :
   les 2 wrappers directs de .ov-bottom (colonne "Dernières conversations" /
   "Dernières indexations") sont des items de grille SANS min-width déclaré — leur
   valeur par défaut (min-width:auto) prend le min-content de leur contenu (la grille
   interne dense-head/dense-row, colonnes fixes + 1fr) au lieu de la piste 1.4fr/1fr
   assignée. Mesuré : 408-468px de large dans une piste de 296px à 320px de fenêtre
   (débordement absorbé silencieusement par le scroll-x du .tab-panel, jamais un vrai
   recouvrement, mais un widget qui déborde de sa colonne). Même recette que
   min-height:0 juste au-dessus (même intention, axe perpendiculaire) — pattern
   standard grid/flexbox pour empêcher un enfant à contenu large de forcer sa piste. */
.ov-bottom > div { min-width: 0; }
.ov-block-title {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--sp-3);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--ink-800);
}
.ov-block-title > span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.ov-block-title > span i { color: var(--cyan); font-size: var(--fs-base); }
.ov-block-title button {
    font-size: var(--fs-sm); font-weight: 600;
    color: var(--cyan-deeper);
    padding: 5px 9px;
    border-radius: var(--r-xs);
    display: inline-flex; align-items: center; gap: 4px;
    transition: background var(--d-fast), color var(--d-fast);
}
.ov-block-title button:hover { background: var(--cyan-50); color: var(--cyan-dark); }
:root[data-theme="dark"] .ov-block-title button { color: var(--cyan-light); }

.ov-recent-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.ov-recent-item {
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--card);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--sh-card);
    display: flex; flex-direction: column; gap: var(--sp-2);
    transition: transform var(--d-fast), border-color var(--d-fast), box-shadow var(--d-base);
}
.ov-recent-item:hover {
    transform: translateY(-1px);
    border-color: rgba(11,181,197,0.3);
    box-shadow: var(--sh-float);
}
.ov-recent-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ov-recent-question {
    font-size: var(--fs-base);
    color: var(--ink-800);
    line-height: 1.5;
    font-weight: 500;
}

.ov-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.ov-action {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: 13px 15px;
    background: var(--card);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-align: left;
    width: 100%;
    color: inherit;
    box-shadow: var(--sh-card);
    transition: transform var(--d-base) var(--ease-out), border-color var(--d-fast), box-shadow var(--d-base);
}
.ov-action:hover {
    border-color: rgba(11,181,197,0.42);
    transform: translateY(-2px);
    box-shadow: var(--sh-float);
}
.ov-action:hover .chev { transform: translateX(3px); color: var(--cyan); }
.ov-action-ico {
    width: 38px; height: 38px;
    border-radius: var(--r-sm); /* ticket 23 : ex-11px, ±1px invisible */
    background: linear-gradient(180deg, rgba(11,181,197,0.16), rgba(11,181,197,0.06));
    color: var(--cyan-deeper);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: var(--fs-md);
    border: 1px solid rgba(11,181,197,0.22);
}
:root[data-theme="dark"] .ov-action-ico { color: var(--cyan-light); }
.ov-action-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ov-action-title { font-size: var(--fs-base); font-weight: 600; color: var(--ink-900); }
.ov-action-sub { font-size: var(--fs-xs); color: var(--ink-500); }
.ov-action .chev { color: var(--ink-400); font-size: var(--fs-xs); transition: transform var(--d-base) var(--ease-spring), color var(--d-fast); }

/* =====================================================
   9. Carte générique
   ===================================================== */
.card {
    background: var(--card);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
    position: relative;
    overflow: hidden;
}
.card-padded { padding: var(--sp-5) var(--sp-6); }

/* =====================================================
   10. Boutons
   ===================================================== */
.btn {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 9px 16px;
    font-size: var(--fs-base);
    font-weight: 600;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    font-family: var(--font-ui);
    letter-spacing: -0.005em;
    line-height: 1;
    white-space: nowrap;
    transition: transform var(--d-fast) var(--ease-out),
                box-shadow var(--d-base) var(--ease-out),
                background var(--d-fast), border-color var(--d-fast), color var(--d-fast);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-sm { padding: 7px 11px; font-size: var(--fs-sm); }

.btn-primary {
    color: #fff;
    /* Fix prod-ready 2026-07-19 : stop clair #0CC0DF ≈2.2:1 sur blanc (échec AA) —
       assombri vers la famille --cyan-deeper (#0459AC, ≈6.9:1) ; stop foncé #046BD2
       déjà ≈5.2:1, inchangé. */
    background: linear-gradient(135deg, #0459AC 0%, #046BD2 100%);
    border-color: rgba(4,107,210,0.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 16px -7px rgba(4,107,210,0.40);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 10px 24px -8px rgba(4,107,210,0.50);
}
.btn-primary[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost {
    color: var(--ink-700);
    background: var(--surface-strong);
    border-color: var(--border-hi);
    box-shadow: var(--sh-xs);
}
.btn-ghost:hover {
    color: var(--ink-900);
    background: var(--surface);
    border-color: var(--ink-300);
    transform: translateY(-1px);
}
:root[data-theme="dark"] .btn-ghost { background: rgba(30,40,62,0.7); border-color: rgba(255,255,255,0.1); }
:root[data-theme="dark"] .btn-ghost:hover { background: rgba(38,50,76,0.85); border-color: rgba(255,255,255,0.18); }

.btn-danger {
    color: #fff;
    /* Fix prod-ready 2026-07-19 : stop clair #F26F6F ≈2.9:1 sur blanc (échec AA) —
       assombri vers --danger (#C81E1E, ≈5.7:1) ; stop foncé #DC2626 déjà ≈4.8:1, inchangé. */
    background: linear-gradient(180deg, #C81E1E 0%, #DC2626 100%);
    border-color: rgba(220,38,38,0.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 16px -7px rgba(220,38,38,0.5);
}
.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 11px 24px -8px rgba(220,38,38,0.55);
}

.btn-icon {
    width: 34px; height: 34px;
    padding: 0;
    justify-content: center;
    background: var(--surface-strong);
    color: var(--ink-500);
    border: 1px solid var(--border-hi);
}
.btn-icon:hover {
    color: var(--cyan-dark);
    background: rgba(11,181,197,0.1);
    border-color: rgba(11,181,197,0.35);
    transform: translateY(-1px);
}
:root[data-theme="dark"] .btn-icon { background: rgba(30,40,62,0.7); border-color: rgba(255,255,255,0.1); }
:root[data-theme="dark"] .btn-icon:hover { color: var(--cyan-light); background: rgba(11,181,197,0.18); border-color: rgba(34,211,238,0.4); }
.btn-icon i { font-size: var(--fs-sm); }
.btn-icon-sm { width: 32px; height: 32px; }
.btn-icon-sm i { font-size: var(--fs-xs); }
.btn-icon--danger { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 35%, transparent); }
.btn-icon--danger:hover { color: #fff; background: var(--danger); border-color: var(--danger); }

/* =====================================================
   11. Badges
   ===================================================== */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.5;
    border: 1px solid transparent;
}
.badge i { font-size: var(--fs-9); }
.badge--ok      { background: rgba(16,185,129,0.12); color: var(--success);          border-color: rgba(16,185,129,0.3); }
.badge--pending { background: rgba(245,158,11,0.12); color: var(--warn);          border-color: rgba(245,158,11,0.3); }
.badge--draft   { background: rgba(11,181,197,0.12); color: var(--cyan-deeper);border-color: rgba(11,181,197,0.3); }
.badge--info    { background: rgba(167,139,250,0.14);color: #6D28D9;          border-color: rgba(167,139,250,0.34); }
.badge--danger  { background: rgba(239,68,68,0.1);   color: #B91C1C;          border-color: rgba(239,68,68,0.3); }
.badge--neutral { background: rgba(107,120,140,0.1); color: var(--ink-600);   border-color: rgba(107,120,140,0.22); }
:root[data-theme="dark"] .badge--ok      { color: var(--success-dark-text); }
:root[data-theme="dark"] .badge--pending { color: #FCD34D; }
:root[data-theme="dark"] .badge--draft   { color: var(--cyan-light); }
:root[data-theme="dark"] .badge--info    { color: var(--violet-soft); }
:root[data-theme="dark"] .badge--danger  { color: #FCA5A5; }
:root[data-theme="dark"] .badge--neutral { color: var(--ink-500); }

/* =====================================================
   12. Champs de saisie
   ===================================================== */
.vk-input, .vk-textarea, .vk-select,
input[type="text"], input[type="email"], input[type="number"], input[type="search"],
select, textarea {
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    color: var(--ink-900);
    background: var(--surface-strong);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-sm);
    padding: 9px 12px;
    width: 100%;
    transition: border-color var(--d-fast), background var(--d-fast), box-shadow var(--d-fast);
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.03);
    letter-spacing: -0.005em;
}
.vk-textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.vk-textarea--warn { background: var(--warn-50); border-color: var(--warn-200); }
.vk-input:focus, .vk-textarea:focus, .vk-select:focus,
select:focus, textarea:focus, input:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px var(--ring);
}
:root[data-theme="dark"] .vk-input,
:root[data-theme="dark"] .vk-textarea,
:root[data-theme="dark"] .vk-select,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background: rgba(12, 19, 38, 0.7);
    border-color: rgba(255,255,255,0.1);
}
input::placeholder, textarea::placeholder { color: var(--ink-400); }

/* Classe vk-textarea--question supprimée ici (Lot B vague 2, 2026-07-18) —
   champ #pqedit-{id} du cluster C-8 (pendingCardHtml, supprimée), 0 usage
   restant (grep exhaustif). */
.is-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 22%, transparent) !important; }

/* Select stylé */
.vk-select, select.qa-filter, .conv-sort, .llm-period-select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' stroke='%237685A0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}

/* Cases à cocher / radios custom */
.vk-check {
    -webkit-appearance: none;
    appearance: none;
    width: 17px; height: 17px;
    border-radius: 5px;
    border: 1.5px solid var(--ink-300);
    background: var(--surface-strong);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background var(--d-fast), border-color var(--d-fast);
}
.vk-check:hover { border-color: var(--cyan); }
.vk-check:checked { background: var(--cyan); border-color: var(--cyan); }
.vk-check:checked::after {
    content: '';
    position: absolute;
    left: 5px; top: 2px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.form-group { margin-bottom: var(--sp-4); }
.form-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-600);
    margin-bottom: 7px;
}
.form-label .opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-400); }
.form-help { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 6px; }
.req { color: var(--danger); }

/* =====================================================
   13. Barre de recherche Q&A
   ===================================================== */
.qa-toolbar { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.qa-search { flex: 1; min-width: 200px; position: relative; }
/* /diagnose 2026-07-19 : le sélecteur `> i` datait de l'icon-font — le markup émet
   `<svg class="ico">` depuis la migration sprite (#ico-search) → loupe en flux,
   rendue AU-DESSUS du champ. `.ico` couvre le svg (et un éventuel <i> legacy). */
.qa-search > i,
.qa-search > .ico {
    position: absolute;
    left: 13px; top: 50%;
    transform: translateY(-50%);
    color: var(--ink-400);
    font-size: var(--fs-base);
    pointer-events: none;
}
.qa-search .vk-input { padding-left: 38px; }
.qa-filter { width: auto; min-width: 190px; }

/* =====================================================
   14. Cartes Q&A (pending / library)
   ===================================================== */
.qa-list { display: flex; flex-direction: column; gap: var(--sp-3); }
/* Shell complet de pendingCardHtml() supprimé ici (Lot B vague 2, 2026-07-18,
   cluster C-8, ticket 13 pt.2 étendu à tout le shell) : qa-card (+editing/
   done), qa-head(-left/-actions), qa-question, qa-fields, qa-field-label
   (+ i)/qa-field-hint, qa-view(--muted), qa-foot, qa-actions, qa-meta.
   pendingCardHtml() (app-core.js) était le SEUL générateur de ce markup et a
   été supprimée avec le reste du cluster ; ni pending.js:_pendingRowHtml ni
   library.js:libraryCardHtml (pattern dense-row actif dans les deux) ne les
   utilisent. 0 usage confirmé par grep exhaustif (littéral, tout src/js
   récursif + index.html). qa-id/qa-date/qa-status(+.ok/.err/.loading)
   restent actives (réutilisées par le pattern dense-row) — conservées
   ci-dessous. */
.qa-id {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-500);
    background: rgba(107,120,140,0.1);
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid rgba(107,120,140,0.16);
}
.qa-date { font-size: var(--fs-xs); color: var(--ink-500); display: inline-flex; align-items: center; gap: 4px; }

.qa-status {
    font-size: var(--fs-sm);
    font-weight: 500;
    min-height: 18px;
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink-500);
}
.qa-status.ok { color: var(--success); }
.qa-status.err { color: var(--danger); }
.qa-status.loading { color: var(--cyan-dark); }

/* Sélecteur de masse */
.qa-select {
    -webkit-appearance: none;
    appearance: none;
    width: 17px; height: 17px;
    border-radius: 5px;
    border: 1.5px solid var(--ink-300);
    background: var(--surface-strong);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background var(--d-fast), border-color var(--d-fast);
}
.qa-select:hover { border-color: var(--cyan); }
.qa-select:checked { background: var(--cyan); border-color: var(--cyan); }
.qa-select:checked::after {
    content: '';
    position: absolute; left: 5px; top: 2px;
    width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
:root[data-theme="dark"] .qa-select { background: rgba(20,28,46,0.6); }
/* UX-11 (ticket 09 item 6) : zone de clic 17px → ~44px effectifs, sans changer
   le rendu (pattern déjà utilisé pour .btn dans build/v1.2.4_patches.css). */
.qa-select::before { content: ''; position: absolute; inset: -13.5px; pointer-events: auto; }

/* Aperçu Markdown : classes qa-preview-wrap / qa-preview-wrap.show /
   qa-preview-empty supprimées ici (Lot B vague 2, 2026-07-18, cluster C-8,
   ticket 13 pt.2) — servaient uniquement togglePreview (app-core.js/
   overview.js, supprimées, dead code) via #preview-wrap-{id} généré par
   pendingCardHtml (supprimée) ; le markup réel (pending.js:_pendingRowHtml)
   n'a pas de bouton Aperçu. */

/* États vides */
.qa-empty, .mails-empty, .attempts-list .empty, .conv-empty {
    text-align: center;
    padding: var(--sp-8) var(--sp-6); /* ticket 23 : padding empty-states unifié (ex-56px 24px) */
    background: var(--card);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px dashed var(--border-hi);
    border-radius: var(--r-lg);
    color: var(--ink-500);
    font-size: var(--fs-base);
}
.qa-empty-icon {
    width: 56px; height: 56px;
    margin: 0 auto var(--sp-4);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(11,181,197,0.12), rgba(167,139,250,0.12));
    color: var(--cyan-deeper);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xl);
    border: 1px solid rgba(11,181,197,0.18);
}
:root[data-theme="dark"] .qa-empty-icon { color: var(--cyan-light); }
.qa-empty-title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--ink-900); margin-bottom: 6px; }
.qa-empty-sub { font-size: var(--fs-base); color: var(--ink-500); max-width: 42ch; margin: 0 auto; line-height: 1.55; }

.qa-link-from-mail {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--fs-xs); font-weight: 600;
    color: #6D28D9;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(167,139,250,0.1);
    border: 1px solid rgba(167,139,250,0.25);
    transition: background var(--d-fast);
}
.qa-link-from-mail:hover { background: rgba(167,139,250,0.2); }

/* Pagination */
.qa-paging {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); flex-wrap: wrap;
    padding: 6px 2px 2px;
}
.qa-paging-count { font-size: var(--fs-sm); color: var(--ink-500); font-family: var(--font-mono); }
/* Audit 2026-07-19 : état dégradé de la recherche bibliothèque (repli mémoire). */
.qa-paging-count--warn { color: var(--warn); }
:root[data-theme="dark"] .qa-paging-count--warn { color: #FDBA74; }

/* =====================================================
   15. Barre d'action de masse
   ===================================================== */
.bulk-bar {
    position: fixed;
    left: 50%; bottom: 24px;
    transform: translate(-50%, 32px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-spring);
    z-index: 90;
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 9px 13px;
    background: var(--surface-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
    box-shadow: var(--sh-float);
    flex-wrap: wrap;
    max-width: calc(100vw - 32px);
}
.bulk-bar.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
/* Garde-fou hidden — priorité absolue sur display:flex */
#bulk-bar[hidden], .bulk-bar[hidden] { display: none !important; }
.bulk-bar-left {
    display: flex; align-items: center; gap: 9px;
    padding-right: var(--sp-3);
    border-right: 1px solid var(--hairline);
}
.bulk-bar-count { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); }
.bulk-bar-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* =====================================================
   16. Modales (système unifié)
   ===================================================== */
.modal-overlay, .mmodal, .conv-modal-backdrop {
    position: fixed; inset: 0;
    z-index: 100;
    background: rgba(7,11,22,0.55);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.modal-overlay { display: none; opacity: 0; transition: opacity var(--d-base) var(--ease-out); }
.modal-overlay.visible { display: flex; opacity: 1; }
.mmodal { z-index: 110; animation: overlay-in var(--d-base) var(--ease-out); }
.conv-modal-backdrop { z-index: 1000; animation: overlay-in var(--d-base) var(--ease-out); }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
.mmodal[hidden], .conv-modal-backdrop[hidden] { display: none !important; }

.modal, .mmodal-content, .conv-modal {
    background: var(--surface-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-xl);
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--sh-float);
    color: var(--ink-900);
    position: relative;
}
.modal { max-width: 560px; padding: 26px 26px 0; transform: translateY(12px) scale(0.98); transition: transform var(--d-base) var(--ease-spring); }
.modal-overlay.visible .modal { transform: translateY(0) scale(1); }
.modal--lg { max-width: 720px; }
.mmodal-content { max-width: 720px; padding: 24px 26px 0; animation: dialog-in var(--d-base) var(--ease-spring); }
.mmodal-content--sm { max-width: 480px; }
.conv-modal { max-width: 460px; padding: 24px; animation: dialog-in var(--d-base) var(--ease-spring); }
@keyframes dialog-in {
    from { transform: translateY(12px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.modal h2, .modal h3, .mmodal-content h3, .conv-modal h3 {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -0.018em;
    margin-bottom: var(--sp-2);
    display: flex; align-items: center; gap: 9px;
}
.modal p, .mmodal-content > p, .conv-confirm-text {
    font-size: var(--fs-base);
    color: var(--ink-600);
    margin-bottom: var(--sp-4);
    line-height: 1.55;
}
.modal h3 .req, .modal p code, .mmodal-content code {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}
.modal code, .mmodal-content code {
    background: var(--cyan-50);
    color: var(--cyan-deeper);
    padding: 1px 6px;
    border-radius: 4px;
}
:root[data-theme="dark"] .modal code { color: var(--cyan-light); }

.modal-actions, .conv-modal-actions {
    display: flex; gap: var(--sp-3); justify-content: flex-end;
    flex-wrap: wrap;
}
.modal-actions {
    position: sticky; bottom: 0;
    margin: var(--sp-4) -26px 0;
    padding: var(--sp-4) 26px var(--sp-5);
    background: var(--surface-strong);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    border-top: 1px solid var(--hairline);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.conv-modal-actions { margin-top: var(--sp-5); }

.modal-close, .mmodal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border-radius: var(--r-xs);
    background: rgba(15,23,42,0.05);
    border: 1px solid var(--border-hi);
    color: var(--ink-500);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xl);
    line-height: 1;
    z-index: 5;
    transition: background var(--d-fast), color var(--d-fast);
}
.modal-close:hover, .mmodal-close:hover { background: rgba(15,23,42,0.1); color: var(--ink-900); }
:root[data-theme="dark"] .modal-close, :root[data-theme="dark"] .mmodal-close { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.09); }
:root[data-theme="dark"] .modal-close:hover, :root[data-theme="dark"] .mmodal-close:hover { background: rgba(255,255,255,0.12); }

.mmodal-content form { display: flex; flex-direction: column; }
.mmodal-content form > .modal-actions { margin: var(--sp-3) -26px 0; }
.modal h3#deleteModalTitle { color: var(--danger); }

/* Suggestions de doublons (modale d'ajout) */
.add-suggestions {
    display: none;
    margin-top: var(--sp-3);
    padding: 12px 14px;
    background: rgba(245,158,11,0.06);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: var(--r-md);
    color: var(--ink-700);
    font-size: var(--fs-sm);
    line-height: 1.55;
}
.add-suggestions.show { display: block; }
.add-suggestions-title {
    font-weight: 600; color: #B45309;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-2xs); /* ticket 23 : rôle 3 (sous-titre/label) — ex-fs-xs */
    text-transform: uppercase; letter-spacing: 0.06em;
    display: flex; align-items: center; gap: 6px;
}
:root[data-theme="dark"] .add-suggestions { background: rgba(245,158,11,0.1); border-color: rgba(252,211,77,0.3); }
:root[data-theme="dark"] .add-suggestions-title { color: #FCD34D; }
.add-suggestions-empty { color: var(--success); font-weight: 500; }
.add-suggestions-loading { color: var(--ink-400); font-style: italic; }
.add-suggestion {
    display: flex; flex-direction: column; gap: 4px;
    padding: var(--sp-2) 0;
    border-top: 1px dashed rgba(245,158,11,0.2);
}
.add-suggestion:first-of-type { border-top: 0; padding-top: 0; }
.add-suggestion-head { display: flex; align-items: center; gap: var(--sp-2); }
.add-suggestion-q { font-weight: 600; word-break: break-word; }
.add-suggestion-a { color: var(--ink-500); font-size: var(--fs-sm); }
.add-suggestion-score {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--warn);
    background: rgba(245,158,11,0.12);
    padding: 2px 6px;
    border-radius: 5px;
}

/* =====================================================
   17. Toast
   ===================================================== */
#toast {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 200;
    display: none;
    align-items: center;
    gap: var(--sp-3);
    padding: 12px 16px;
    background: var(--surface-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
    box-shadow: var(--sh-float);
    color: var(--ink-900);
    font-size: var(--fs-base);
    font-weight: 500;
    max-width: 420px;
    transform: translateY(20px);
    opacity: 0;
    transition: transform var(--d-base) var(--ease-spring), opacity var(--d-base) var(--ease-out);
}
#toast.show { display: inline-flex; transform: translateY(0); opacity: 1; }
#toast .toast-ico {
    width: 22px; height: 22px;
    border-radius: var(--r-xs); /* ticket 23 : ex-7px, ±1px invisible */
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm);
    color: #fff;
    flex-shrink: 0;
    background: var(--success);
}
#toast.toast--danger .toast-ico { background: var(--danger); }
#toast.toast--warn .toast-ico   { background: var(--warn); }
#toast.toast--info .toast-ico   { background: var(--cyan); }
#toast button {
    border: 1px solid var(--border-hi);
    color: var(--ink-700);
    padding: 4px 10px;
    border-radius: var(--r-xs); /* ticket 23 : ex-7px, ±1px invisible */
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-left: 4px;
    transition: border-color var(--d-fast), color var(--d-fast), background var(--d-fast);
}
#toast button:hover { border-color: var(--cyan); color: var(--cyan-dark); background: rgba(11,181,197,0.06); }
/* Fix prod-ready 2026-07-19 : #toast-close hérite de #toast button (padding 4px 10px)
   → ~20-22px de haut, sous le plancher tactile 24px. */
#toast #toast-close { padding: 7px 10px; }

/* Skeleton de chargement */
/* H-16 (ticket 14 item 7) : recette unifiée avec l'ancien kpi-skeleton —
   mêmes stops, même ordre thème (base = clair, override [data-theme="dark"]),
   au lieu de l'ancien base = sombre + override :not([data-theme="dark"]).
   kpi-skeleton lui-même a été supprimé (Lot B vague 2, 2026-07-18, dead
   code, 0 usage) — cette note historique reste pour comprendre le choix de
   recette ci-dessous, désormais la seule survivante de la paire. */
.session-skeleton {
    display: inline-block;
    width: 110px; height: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--ink-100), var(--ink-50), var(--ink-100));
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
:root[data-theme="dark"] .session-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.14), rgba(255,255,255,0.06));
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
}

/* =====================================================
   18. Onglet Export
   ===================================================== */
.export-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-5); }
.export-hero {
    padding: var(--sp-6);
    display: flex; flex-direction: column; gap: var(--sp-4);
    background:
        linear-gradient(135deg, rgba(11,181,197,0.1) 0%, rgba(167,139,250,0.1) 100%),
        var(--card);
}
.export-hero h3 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; color: var(--ink-900); }
.export-hero h3 i { color: var(--cyan); }
.export-hero p { font-size: var(--fs-base); color: var(--ink-600); line-height: 1.55; max-width: 56ch; }
.export-stats { display: flex; gap: var(--sp-3); margin: var(--sp-1) 0; }
.export-stat {
    flex: 1;
    padding: 12px 14px;
    background: var(--surface-soft);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
}
.export-stat .lbl { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); margin-bottom: 4px; }
.export-stat .val { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; color: var(--ink-900); }
.export-info ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-base); color: var(--ink-700); line-height: 1.55; }
.export-info strong { color: var(--ink-900); }
.export-info code { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--cyan-deeper); }
:root[data-theme="dark"] .export-info code { color: var(--cyan-light); }

/* =====================================================
   19. Tooltips
   ===================================================== */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    background: #0E1729;
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 5px 9px;
    border-radius: var(--r-xs); /* ticket 23 : ex-7px, ±1px invisible */
    white-space: nowrap;
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 24px -10px rgba(0,0,0,0.45);
    transition: opacity var(--d-fast), transform var(--d-fast);
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
[data-tooltip][data-tooltip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); }
[data-tooltip][data-tooltip-pos="left"]::after {
    bottom: 50%; left: auto; right: calc(100% + 8px);
    transform: translateY(50%) translateX(3px);
}
[data-tooltip][data-tooltip-pos="left"]:hover::after { transform: translateY(50%) translateX(0); }
[data-tooltip][data-tooltip-pos="right"]::after {
    bottom: 50%; left: calc(100% + 8px);
    transform: translateY(50%) translateX(-3px);
}
[data-tooltip][data-tooltip-pos="right"]:hover::after { transform: translateY(50%) translateX(0); }

/* =====================================================
   20. Mails — sous-onglets, tentatives, filtres
   ===================================================== */
.mails-subtabs, .llm-subtabs {
    display: inline-flex;
    gap: 4px;
    background: var(--surface);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
    padding: 4px;
    box-shadow: var(--sh-xs);
}
.mails-subtab, .llm-subtab {
    padding: 8px 14px;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ink-600);
    border-radius: var(--r-xs);
    transition: color var(--d-fast), background var(--d-fast), box-shadow var(--d-fast);
}
.mails-subtab:hover, .llm-subtab:hover { color: var(--ink-900); }
.mails-subtab[aria-selected="true"] {
    background: var(--surface-strong);
    color: var(--cyan-deeper);
    box-shadow: inset 0 0 0 1px rgba(11,181,197,0.24);
}
.llm-subtab[aria-selected="true"] {
    background: var(--surface-strong);
    color: var(--success);
    box-shadow: inset 0 0 0 1px rgba(16,185,129,0.26);
}
:root[data-theme="dark"] .mails-subtab[aria-selected="true"] { background: rgba(11,181,197,0.2); color: var(--cyan-light); }
:root[data-theme="dark"] .llm-subtab[aria-selected="true"] { background: rgba(16,185,129,0.2); color: var(--success-dark-text); }

.msub { display: flex; flex-direction: column; gap: var(--sp-3); }
.msub[hidden], .llm-pane[hidden] { display: none; }

.mails-radio-bar {
    display: flex; flex-wrap: wrap; gap: 6px;
    background: var(--surface);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
    padding: 6px;
    box-shadow: var(--sh-xs);
}
.mails-radio-bar label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-600);
    padding: 6px 11px;
    border-radius: var(--r-xs);
    cursor: pointer;
    transition: color var(--d-fast), background var(--d-fast);
}
.mails-radio-bar label:hover { color: var(--ink-900); background: rgba(11,181,197,0.06); }
.mails-radio-bar label:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.mails-radio-bar input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 1.5px solid var(--ink-300);
    background: var(--surface-strong);
    cursor: pointer;
}
.mails-radio-bar input[type="radio"]:checked {
    border-color: var(--cyan);
    background: var(--cyan);
    box-shadow: inset 0 0 0 3px var(--surface-strong);
}

.attempts-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.attempt-card {
    background: var(--card);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-card);
    padding: var(--sp-4) var(--sp-5);
    cursor: pointer;
    transition: transform var(--d-fast), border-color var(--d-fast), box-shadow var(--d-base);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-5);
    align-items: center;
}
.attempt-card:hover {
    transform: translateY(-1px);
    border-color: rgba(11,181,197,0.3);
    box-shadow: var(--sh-float);
}
.attempt-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.att-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.att-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.att-head strong {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--ink-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 320px;
}
.att-subj {
    font-size: var(--fs-base);
    color: var(--ink-700);
    font-weight: 500;
    min-width: 0; flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.att-excerpt {
    font-size: var(--fs-base);
    color: var(--ink-500);
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.att-meta {
    font-size: var(--fs-sm);
    color: var(--ink-500);
    font-family: var(--font-mono);
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 2px;
}
.att-side { flex-shrink: 0; }

.attempt-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
    border: 1px solid;
    white-space: nowrap;
}
.attempt-status.pending           { background: rgba(245,158,11,0.12); color: var(--warn); border-color: rgba(245,158,11,0.3); }
.attempt-status.refused           { background: rgba(239,68,68,0.1);   color: #B91C1C; border-color: rgba(239,68,68,0.3); }
.attempt-status.accepted_not_sent { background: rgba(16,185,129,0.12); color: var(--success); border-color: rgba(16,185,129,0.3); }
.attempt-status.filtered          { background: rgba(107,120,140,0.1); color: var(--ink-600); border-color: rgba(107,120,140,0.22); }
.attempt-status.classified_out    { background: rgba(167,139,250,0.14);color: #6D28D9; border-color: rgba(167,139,250,0.32); }
.attempt-status.ignored           { background: rgba(244,114,182,0.1); color: #BE185D; border-color: rgba(244,114,182,0.3); }
.attempt-status.expired           { background: rgba(107,120,140,0.06);color: var(--ink-500); border-color: rgba(107,120,140,0.2); }
:root[data-theme="dark"] .attempt-status.pending           { color: #FCD34D; }
:root[data-theme="dark"] .attempt-status.refused           { color: #FCA5A5; }
:root[data-theme="dark"] .attempt-status.accepted_not_sent { color: var(--success-dark-text); }
:root[data-theme="dark"] .attempt-status.classified_out    { color: var(--violet-soft); }
:root[data-theme="dark"] .attempt-status.ignored           { color: #F9A8D4; }

.filters-toolbar { display: flex; gap: var(--sp-3); justify-content: flex-end; }
.filters-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-card);
    font-size: var(--fs-base);
}
.filters-table th {
    text-align: left;
    padding: 12px 14px;
    background: var(--surface-soft);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-500);
    border-bottom: 1px solid var(--hairline);
}
.filters-table td { padding: 11px 14px; border-bottom: 1px solid var(--hairline); color: var(--ink-800); }
.filters-table tr:last-child td { border-bottom: none; }
.filters-table tr:hover td { background: rgba(11,181,197,0.04); }
.filters-table th:last-child, .filters-table td:last-child { text-align: right; }
td.editable { cursor: text; border-radius: 4px; transition: background var(--d-fast); }
td.editable:hover { background: rgba(11,181,197,0.07); }

/* Modale détail mail */
.mm-header { padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--hairline); }
.mm-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-md); /* ticket 23 : rôle 2 (titre de carte/section) — ex-fs-lg */
    color: var(--ink-900);
    line-height: 1.3;
    margin: 0 0 12px;
    padding-right: 40px;
    word-break: break-word;
}
.mm-meta-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: var(--fs-base); }
.mm-meta-label {
    font-weight: 600; color: var(--ink-500);
    font-size: var(--fs-xs);
    text-transform: uppercase; letter-spacing: 0.04em;
    align-self: center;
}
.mm-meta-value { font-weight: 500; color: var(--ink-800); word-break: break-word; align-self: center; }
.mm-section { margin: var(--sp-4) 0; }
.mm-section--links {
    display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--hairline);
}
.mm-section-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-2xs); /* ticket 23 : rôle 3 (sous-titre/label) — ex-fs-xs */
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--sp-2);
}
.mm-mail-body {
    background: var(--surface-soft);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 16px 18px;
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--ink-800);
    word-break: break-word;
    overflow-wrap: anywhere;
}
.mm-mail-body a { color: var(--cyan-dark); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
:root[data-theme="dark"] .mm-mail-body a { color: var(--cyan-light); }
.mm-empty-body {
    font-size: var(--fs-base);
    color: var(--ink-500);
    font-style: italic;
    padding: 14px 16px;
    background: var(--surface-soft);
    border: 1px dashed var(--hairline);
    border-radius: var(--r-sm);
}
.mm-img-inline {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-sm);
    color: #6D28D9;
    background: rgba(167,139,250,0.1);
    border: 1px dashed rgba(167,139,250,0.35);
    border-radius: var(--r-xs);
    padding: 4px 9px;
    margin: 4px 2px;
    font-style: italic;
}
:root[data-theme="dark"] .mm-img-inline { color: var(--violet-soft); }
.mm-rag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-rag-chip {
    display: inline-flex; align-items: center;
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(11,181,197,0.08);
    color: var(--cyan-deeper);
    border: 1px solid rgba(11,181,197,0.22);
}
:root[data-theme="dark"] .mm-rag-chip { color: var(--cyan-light); }
.mm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--sp-3); }
.mm-kpi {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: var(--surface-soft);
    border: 1px solid var(--hairline);
}
.mm-kpi-label { font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.05em; }
.mm-kpi-value { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--ink-900); }
.mm-action-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--cyan-dark);
    background: rgba(11,181,197,0.08);
    border: 1px solid rgba(11,181,197,0.25);
    padding: 6px 12px;
    border-radius: 999px;
    text-decoration: none;
    transition: background var(--d-fast), border-color var(--d-fast);
}
.mm-action-link:hover { background: rgba(11,181,197,0.14); border-color: rgba(11,181,197,0.4); }
:root[data-theme="dark"] .mm-action-link { color: var(--cyan-light); }
.mm-rule-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-sm);
    color: var(--ink-700);
    background: rgba(107,120,140,0.07);
    border: 1px solid var(--hairline);
    padding: 5px 11px;
    border-radius: 999px;
}





/* Bouton export Facturation Client (Slice 03) */
.billing-export-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    background: white; color: #C2410C;
    border: 1.5px solid #EA580C;
    border-radius: var(--r-sm);
    font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
    cursor: pointer;
    transition: all 180ms ease;
    margin-left: auto;
}
.billing-export-btn:hover { background: #EA580C; color: white; box-shadow: 0 4px 14px rgba(234,88,12,0.30); }
.billing-export-btn:disabled { opacity: 0.6; cursor: wait; }

/* Bouton facturation CSV (Slice 03c) — accent vert pour la facturation Vackelys */
.billing-export-btn--accent { background: #047857; color: white; border-color: #047857; }
.billing-export-btn--accent:hover { background: #065F46; border-color: #065F46; box-shadow: 0 4px 14px rgba(4,120,87,0.30); }

.billing-export-btn .fa-spinner { animation: spin 0.9s linear infinite; }
/* =====================================================
   22. Module Facturation Client (orange)
   ===================================================== */
.billing-toolbar {
    display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end;
    margin-bottom: var(--sp-5);
}
.billing-toolbar label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: var(--fs-xs); font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.06em;
}
.billing-toolbar input[type="date"] {
    font-family: var(--font-mono); font-size: var(--fs-sm);
    padding: 8px 10px; border-radius: var(--r-xs);
    border: 1px solid rgba(234,88,12,0.25);
    background: rgba(234,88,12,0.04);
    color: var(--ink-900);
    min-width: 150px;
}
.billing-toolbar input[type="date"]:focus {
    outline: 2px solid rgba(234,88,12,0.45); outline-offset: 1px;
}
.billing-quickpicks { display: flex; gap: 6px; flex-wrap: wrap; }
.billing-quickpicks button {
    padding: 7px 12px; font-size: var(--fs-xs); font-weight: 600;
    border-radius: 999px; cursor: pointer;
    background: rgba(234,88,12,0.08); color: #C2410C;
    border: 1px solid rgba(234,88,12,0.25);
    font-family: var(--font-ui);
}
.billing-quickpicks button:hover { background: rgba(234,88,12,0.18); }
.billing-quickpicks button[aria-pressed="true"] { background: #EA580C; color: white; border-color: #C2410C; }

/* Ticket 02 item 8 : auto-fit calculait jusqu'à 5 tracks potentiels pour 3 cartes
   réelles (.billing-kpi, cf. index.html) → 2 tracks fantômes collabsés à 0px. Aligné
   sur le nombre réel de cartes ; minmax garde le rétrécissement proportionnel. */
.billing-kpis { display: grid; grid-template-columns: repeat(3, minmax(140px,1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.billing-kpi {
    background: linear-gradient(155deg, rgba(234,88,12,0.10), rgba(234,88,12,0.02));
    border: 1px solid rgba(234,88,12,0.20);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5);
    backdrop-filter: blur(8px);
}
.billing-kpi-label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.billing-kpi-value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); color: #C2410C; line-height: 1.1; }
.billing-kpi-sub   { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 4px; }

.billing-table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--ink-200, rgba(15,23,42,0.08)); background: var(--panel-bg, white); }
.billing-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.billing-table thead th {
    background: rgba(234,88,12,0.05); color: #9A3412;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--fs-2xs);
    text-align: left; padding: 10px 14px; border-bottom: 1px solid rgba(234,88,12,0.15);
}
.billing-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--ink-100, rgba(15,23,42,0.05)); vertical-align: middle; }
.billing-table tbody tr:hover td { background: rgba(234,88,12,0.04); cursor: pointer; }
.billing-table .num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.billing-table .cost { color: #C2410C; font-weight: 700; }
.billing-table .orga { font-weight: 600; color: var(--ink-900); }
.billing-empty { padding: var(--sp-8) var(--sp-6); /* ticket 23 : unifié (ex-sp-7) */ text-align: center; color: var(--ink-500); }
.billing-loading { padding: var(--sp-6); text-align: center; color: var(--ink-500); }
/* =====================================================
   21. Module Coût LLM
   ===================================================== */
.llm-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--sp-3);
}
.llm-toolbar-left, .llm-toolbar-right { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.llm-period-select { width: auto; min-width: 130px; }
.llm-pane { display: flex; flex-direction: column; gap: var(--sp-4); }
.llm-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.llm-kpi-spark {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 56px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}
.llm-kpi-spark svg { width: 100%; height: 100%; display: block; }
.llm-breakdown-wrap {
    background: var(--card);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-card);
    padding: var(--sp-4);
    overflow-x: auto;
}
.llm-breakdown-table, .llm-pricing-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.llm-breakdown-table th, .llm-breakdown-table td,
.llm-pricing-table th, .llm-pricing-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--hairline);
}
.llm-breakdown-table th, .llm-pricing-table th {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.llm-breakdown-table td, .llm-pricing-table td { color: var(--ink-800); }
.llm-breakdown-table tr:last-child td, .llm-pricing-table tr:last-child td { border-bottom: none; }
.llm-breakdown-table tbody tr:hover td, .llm-pricing-table tbody tr:hover td { background: rgba(16,185,129,0.05); }
.llm-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.llm-model-name { font-weight: 600; color: var(--ink-900); }
.llm-bar-stack {
    position: relative;
    width: 100%; min-width: 80px; height: 10px;
    background: rgba(16,185,129,0.1);
    border-radius: 6px;
    overflow: hidden;
}
.llm-bar-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #34D399, #10B981);
    border-radius: 6px;
    transition: width var(--d-slow) var(--ease-out);
}
.llm-bar-fill--null {
    background: repeating-linear-gradient(45deg, rgba(148,163,184,0.3) 0 6px, transparent 6px 12px);
}
.llm-chip-missing {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: #C2410C;
    background: rgba(251,146,60,0.14);
    border: 1px solid rgba(234,88,12,0.32);
    border-radius: 999px;
}
:root[data-theme="dark"] .llm-chip-missing { color: #FDBA74; }

/* Chips partagés « Tarif manquant » — coût NULL (modèle absent de llm_pricing).
   Palette alignée sur .llm-chip-missing ci-dessus.
   Contrat visuel : mockups/2026-07-09-tarif-manquant.html (ADR 0021). */
.chip-unpriced {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px 3px 6px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: #C2410C;
    background: rgba(251,146,60,0.14);
    border: 1px solid rgba(234,88,12,0.32);
    border-radius: 999px;
    white-space: nowrap;
    cursor: help;
}
:root[data-theme="dark"] .chip-unpriced { color: #FDBA74; }
.chip-unpriced-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 13px; height: 13px; border-radius: 50%;
    background: rgba(234,88,12,0.24);
    font-size: var(--fs-9); font-weight: 800; line-height: 1;
    flex-shrink: 0;
}
:root[data-theme="dark"] .chip-unpriced-ico { background: rgba(253,186,116,0.28); }
.chip-unpriced--micro {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    font-size: var(--fs-9); font-weight: 800; line-height: 1;
    color: #C2410C;
    background: rgba(251,146,60,0.16);
    border: 1px solid rgba(234,88,12,0.34);
    cursor: help;
    flex-shrink: 0;
}
:root[data-theme="dark"] .chip-unpriced--micro { color: #FDBA74; }
.v-unknown { color: var(--ink-400); font-family: var(--font-mono); }
.v-partial { font-family: var(--font-mono); }

.llm-empty { text-align: center; color: var(--ink-500); padding: var(--sp-8) var(--sp-6); /* ticket 23 : unifié (ex-40px 20px) */ font-size: var(--fs-base); }
.llm-pricing-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.llm-pricing-toolbar h4 { font-size: var(--fs-md); font-weight: 700; color: var(--ink-700); display: flex; align-items: center; gap: 8px; }
.llm-pricing-toolbar h4 i { color: var(--success); }
.llm-pricing-actions { display: flex; gap: 6px; justify-content: flex-end; }
.llm-pricing-notes { color: var(--ink-600); font-size: var(--fs-sm); max-width: 280px; }
.llm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.llm-form-grid .full { grid-column: 1 / -1; }

/* =====================================================
   22. Module Conversations
   ===================================================== */
.conv-toolbar {
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-3);
    background: var(--card);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-card);
    /* La liste .dense-wrap (backdrop-filter = contexte d'empilement, plus bas
       dans le DOM) recouvrait le menu .status-multi-menu (z-index:50 piégé dans
       le contexte de la toolbar). On élève la toolbar pour que son popover passe
       au-dessus de la liste. */
    position: relative;
    z-index: 20;
}
.conv-search { flex: 1; min-width: 200px; }
.conv-sort, .llm-period-select { width: auto; }
.conv-min-tokens { width: 110px; }
.conv-range-bar {
    display: inline-flex; gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
    padding: 4px;
}
.conv-range {
    padding: 7px 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-600);
    border-radius: var(--r-xs);
    transition: color var(--d-fast), background var(--d-fast);
}
.conv-range:hover { color: var(--ink-900); }
.conv-range.active {
    background: var(--surface-strong);
    color: var(--cyan-deeper);
    box-shadow: inset 0 0 0 1px rgba(11,181,197,0.24);
}
:root[data-theme="dark"] .conv-range.active { color: var(--cyan-light); background: rgba(11,181,197,0.18); }
.conv-include-label {
    display: inline-flex; gap: 6px; align-items: center;
    font-size: var(--fs-sm);
    color: var(--ink-600);
    cursor: pointer;
}
.conv-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.conv-card {
    position: relative;
    padding: var(--sp-4) var(--sp-4) var(--sp-4) 44px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--card);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--sh-card);
    cursor: pointer;
    transition: transform var(--d-fast), border-color var(--d-fast), box-shadow var(--d-base);
}
.conv-card:hover { transform: translateY(-1px); border-color: rgba(59,130,246,0.4); box-shadow: var(--sh-float); }
.conv-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.conv-checkbox {
    position: absolute;
    top: 16px; left: 14px;
    width: 17px; height: 17px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 5px;
    border: 1.5px solid var(--ink-300);
    background: var(--surface-strong);
    cursor: pointer;
}
.conv-checkbox:checked { background: var(--info); border-color: var(--info); }
.conv-checkbox:checked::after {
    content: '';
    position: absolute; left: 5px; top: 2px;
    width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* UX-11 (ticket 09 item 6) : zone de clic 17px → ~44px effectifs, sans changer
   le rendu (pattern déjà utilisé pour .btn dans build/v1.2.4_patches.css). */
.conv-checkbox::before { content: ''; position: absolute; inset: -13.5px; pointer-events: auto; }
.conv-card-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
.conv-card-main { flex: 1; min-width: 240px; }
.conv-card-head { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.conv-session-id { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-500); cursor: copy; }
.conv-session-id:hover { color: var(--cyan-deeper); }
.conv-card-q { font-weight: 500; font-size: var(--fs-md); line-height: 1.45; color: var(--ink-800); }
.conv-card-stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 4px 16px;
    font-size: var(--fs-sm);
    color: var(--ink-500);
    text-align: right;
}
.conv-card-stats > span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.conv-stat-value { color: var(--ink-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.conv-card-footer { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-500); }

.conv-status {
    display: inline-flex; align-items: center;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: var(--fs-xs);
    font-weight: 600;
    border: 1px solid;
}
/* alias legacy → status-fr--* (fusion ticket 23, décision Roy 2026-07-17) :
   la taxonomie canonique des COULEURS de statut est .status-fr--* (l. ~3800) —
   statusFrBadge (app-core.js) n'émet plus .conv-status--*. Règles conservées
   À L'IDENTIQUE (clair + dark) pour tout HTML résiduel. La base .conv-status
   ci-dessus RESTE émise (géométrie du badge, hors taxonomie de couleurs). */
.conv-status--answered   { background: rgba(16,185,129,0.13); color: var(--success); border-color: rgba(16,185,129,0.4); }
.conv-status--clarify    { background: rgba(245,158,11,0.13); color: var(--warn); border-color: rgba(245,158,11,0.4); }
.conv-status--fallback   { background: rgba(239,68,68,0.13);  color: #B91C1C; border-color: rgba(239,68,68,0.4); }
.conv-status--escalate   { background: rgba(168,85,247,0.13); color: #7E22CE; border-color: rgba(168,85,247,0.4); }
.conv-status--commercial { background: rgba(59,130,246,0.13); color: var(--info); border-color: rgba(59,130,246,0.4); }
.conv-status--chat       { background: rgba(107,120,140,0.13);color: var(--ink-600); border-color: rgba(107,120,140,0.4); }
:root[data-theme="dark"] .conv-status--answered   { color: var(--success-dark-text); }
:root[data-theme="dark"] .conv-status--clarify    { color: #FCD34D; }
:root[data-theme="dark"] .conv-status--fallback   { color: #FCA5A5; }
:root[data-theme="dark"] .conv-status--escalate   { color: #D8B4FE; }
:root[data-theme="dark"] .conv-status--commercial { color: #93C5FD; }
.conv-status-nil { color: var(--ink-400); }
.conv-empty--error { color: var(--danger); }
.conv-loadmore { align-self: center; }

.conv-chip {
    display: inline-flex; align-items: center;
    padding: 1px 8px;
    border-radius: 5px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    border: 1px solid;
    background: rgba(11,181,197,0.12);
    color: var(--cyan-deeper);
    border-color: rgba(11,181,197,0.32);
}
.conv-chip--conf-hi  { background: rgba(16,185,129,0.13); color: var(--success); border-color: rgba(16,185,129,0.4); }
.conv-chip--conf-mid { background: rgba(245,158,11,0.13); color: var(--warn); border-color: rgba(245,158,11,0.4); }
.conv-chip--conf-lo  { background: rgba(239,68,68,0.13);  color: #B91C1C; border-color: rgba(239,68,68,0.4); }
:root[data-theme="dark"] .conv-chip { color: var(--cyan-light); }
:root[data-theme="dark"] .conv-chip--conf-hi  { color: var(--success-dark-text); }
:root[data-theme="dark"] .conv-chip--conf-mid { color: #FCD34D; }
:root[data-theme="dark"] .conv-chip--conf-lo  { color: #FCA5A5; }



/* Drawer Facturation Client (orange) */

/* hotfix1 : forcer hidden sur billing-drawer (l'attribut HTML hidden est écrasé par display:flex) */
.billing-drawer[hidden],
.billing-drawer-backdrop[hidden] { display: none !important; }

.billing-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(7,11,22,0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 998;
}
.billing-drawer {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: 520px; max-width: 100vw;
    background: var(--panel-bg);
    border-left: 3px solid #EA580C;
    z-index: 999;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: -12px 0 32px rgba(7,11,22,0.18);
    animation: billing-slide-in 280ms cubic-bezier(0.16,1,0.3,1);
}
@keyframes billing-slide-in {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.billing-drawer-head {
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--ink-100, rgba(15,23,42,0.06));
    background: linear-gradient(180deg, rgba(234,88,12,0.08), transparent);
}
.billing-drawer-eyebrow { font-size: var(--fs-2xs); font-weight: 700; color: #C2410C; text-transform: uppercase; letter-spacing: 0.08em; }
.billing-drawer-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); color: var(--ink-900); margin: 4px 0 6px; line-height: 1.1; }
.billing-drawer-period { font-size: var(--fs-sm); color: var(--ink-500); font-family: var(--font-mono); }
.billing-drawer-close {
    position: absolute; top: var(--sp-4); right: var(--sp-4);
    background: rgba(234,88,12,0.08); color: #C2410C;
    border: 1px solid rgba(234,88,12,0.20);
    width: 32px; height: 32px; border-radius: var(--r-xs);
    cursor: pointer; font-size: var(--fs-14);
}
.billing-drawer-close:hover { background: rgba(234,88,12,0.20); }
.billing-drawer-body { padding: var(--sp-5) var(--sp-6); overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: var(--sp-5); }

.billing-drawer-kpis { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3); }
.billing-drawer-kpi { background: rgba(234,88,12,0.04); border: 1px solid rgba(234,88,12,0.15); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); }
.billing-drawer-kpi-label { font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.06em; }
.billing-drawer-kpi-value { font-family: var(--font-mono); font-size: var(--fs-md); color: #C2410C; font-weight: 700; margin-top: 4px; }

.billing-sparkline-wrap { background: rgba(234,88,12,0.03); border: 1px solid rgba(234,88,12,0.12); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); }
.billing-sparkline-title { font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.billing-sparkline svg { width: 100%; height: 60px; display: block; }

.billing-section-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--ink-900); margin: 0 0 var(--sp-2); }
.billing-bmodel-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.billing-bmodel-table th { text-align: left; padding: 6px 8px; color: var(--ink-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--fs-2xs); }
.billing-bmodel-table td { padding: 8px; border-top: 1px solid var(--ink-100,rgba(15,23,42,0.05)); }
.billing-bmodel-table td.num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.billing-pct-bar { background: rgba(234,88,12,0.10); height: 6px; border-radius: 3px; overflow: hidden; position: relative; min-width: 40px; }
.billing-pct-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; background: #EA580C; width: var(--pct, 0%); border-radius: 3px; }

.billing-top-sessions { display: flex; flex-direction: column; gap: 6px; }
.billing-top-session { display: flex; justify-content: space-between; padding: 8px 10px; background: var(--panel-bg-soft, rgba(15,23,42,0.03)); border-radius: var(--r-xs); font-size: var(--fs-xs); }
.billing-top-session .sid { font-family: var(--font-mono); color: var(--ink-700,var(--ink-900)); }
.billing-top-session .cost { font-family: var(--font-mono); color: #C2410C; font-weight: 700; }
/* Drawer Conversations */
.conv-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(7,11,22,0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 998;
}
.conv-drawer {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: 600px; max-width: 100vw;
    background: var(--panel-bg);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    border-left: 1px solid var(--border-hi);
    z-index: 999;
    display: flex; flex-direction: column;
    box-shadow: var(--sh-float);
    animation: drawer-in var(--d-slow) var(--ease-out);
}
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.conv-drawer[hidden], .conv-drawer-backdrop[hidden], .conv-bulkbar[hidden], .fd-bulkbar[hidden] { display: none !important; }
.conv-drawer-head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--hairline);
    display: flex; align-items: flex-start; gap: var(--sp-3);
}
.conv-drawer-titlewrap { flex: 1; min-width: 0; }
.conv-drawer-title { font-size: var(--fs-md); font-weight: 600; color: var(--ink-900); margin-bottom: 6px; }
.conv-drawer-meta { font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.6; display: flex; flex-direction: column; gap: 2px; }
.conv-drawer-meta .conv-status { margin-left: 4px; }
.conv-drawer-actions { display: flex; gap: 6px; }
.conv-drawer-btn { font-size: var(--fs-xs); padding: 6px 10px; }
.conv-drawer-close {
    width: 32px; height: 32px;
    border-radius: var(--r-xs);
    background: rgba(127,127,127,0.1);
    color: var(--ink-500);
    font-size: var(--fs-xl);
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.conv-drawer-close:hover { color: var(--ink-900); background: rgba(127,127,127,0.18); }
.conv-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: var(--sp-4); }
.conv-bubble {
    max-width: 92%;
    padding: 10px 14px;
    border-radius: var(--r-md);
    font-size: var(--fs-base);
    line-height: 1.55;
}
.conv-bubble--user {
    align-self: flex-end;
    background: rgba(147,197,253,0.14);
    border: 1px solid rgba(147,197,253,0.3);
    border-bottom-right-radius: 4px;
    white-space: pre-wrap;
}
.conv-bubble--pablo {
    align-self: flex-start;
    background: rgba(34,211,238,0.08);
    border: 1px solid rgba(34,211,238,0.24);
    border-bottom-left-radius: 4px;
    --md-accent: var(--cyan-deeper);
    --md-code-bg: rgba(11,181,197,0.12);
    --md-pre-bg: rgba(15,23,42,0.06);
}
:root[data-theme="dark"] .conv-bubble--pablo { --md-accent: var(--cyan-light); }
.conv-meta {
    margin-top: 8px; padding-top: 6px;
    border-top: 1px solid var(--hairline);
    font-size: var(--fs-2xs);
    color: var(--ink-500);
    display: flex; flex-wrap: wrap; gap: 6px 10px;
    align-items: center;
}

/* Bulkbar Conversations */
.conv-bulkbar {
    position: fixed;
    left: 50%; bottom: 24px;
    transform: translate(-50%, 32px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--d-base), transform var(--d-base) var(--ease-spring);
    background: var(--surface-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
    box-shadow: var(--sh-float);
    padding: 9px 13px;
    display: flex; align-items: center; gap: var(--sp-3);
    z-index: 95;
    flex-wrap: wrap;
    max-width: calc(100vw - 32px);
}
.conv-bulkbar.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.conv-bulkbar-count { font-weight: 600; font-size: var(--fs-sm); color: var(--ink-700); }
.conv-bulk-cancel { margin-left: 4px; }
.conv-confirm-label { display: flex; gap: 8px; align-items: flex-start; margin-top: var(--sp-3); font-size: var(--fs-base); color: var(--ink-700); }
.conv-confirm-label code { font-family: var(--font-mono); font-size: var(--fs-sm); background: var(--cyan-50); padding: 1px 5px; border-radius: 4px; }

/* Bulkbar Brouillons Forum — miroir de .conv-bulkbar */
.fd-bulkbar {
    position: fixed;
    left: 50%; bottom: 24px;
    transform: translate(-50%, 32px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--d-base), transform var(--d-base) var(--ease-spring);
    background: var(--surface-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
    box-shadow: var(--sh-float);
    padding: 9px 13px;
    display: flex; align-items: center; gap: var(--sp-3);
    z-index: 95;
    flex-wrap: wrap;
    max-width: calc(100vw - 32px);
}
.fd-bulkbar.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fd-bulkbar-count { font-weight: 600; font-size: var(--fs-sm); color: var(--ink-700); white-space: nowrap; }
.fd-bulkbar-sep { width: 1px; height: 18px; background: var(--hairline); flex-shrink: 0; }
/* Toolbar Tout sélectionner forum-drafts */
.fd-bulk-toolbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0 var(--sp-2); }
.fd-bulk-toolbar-count { font-size: var(--fs-xs); color: var(--ink-500); }
@media (prefers-reduced-motion: reduce) {
    .fd-bulkbar { transition: opacity var(--d-fast); transform: translate(-50%, 0) !important; }
}

/* =====================================================
   23. Widget Chat Vackelys (composant autonome, thème clair)
   ===================================================== */
.vackelys-chat {
    --vk-primary: #0CC0DF;
    /* H-7 (ticket 14 item 9, décidé 2026-07-17) : redéfinition scopée #5B7FFF
       supprimée — hérite désormais de --vk-secondary:#046BD2 (:root, "Fix 14"
       2026-06-14) au lieu de la masquer. */
    --vk-navy: #060914;
    --vk-text: #ECF1F8;
    --vk-muted: #8492A8;
    --vk-soft: rgba(20, 28, 46, 0.42);
    --vk-border: rgba(255, 255, 255, 0.085);
    --vk-bot-bubble: rgba(20, 28, 46, 0.66);
    --vk-bot-border: rgba(255, 255, 255, 0.10);
    font-family: var(--font-ui);
    color: var(--vk-text);
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
    background: rgba(21, 29, 48, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-float);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.vackelys-chat *, .vackelys-chat *::before, .vackelys-chat *::after { box-sizing: border-box; }
.vackelys-chat svg { display: block; flex-shrink: 0; }
.vackelys-chat__header {
    min-height: 64px; padding: 14px 16px;
    background:
        radial-gradient(circle at 88% -20%, rgba(12,192,223,.28), transparent 38%),
        linear-gradient(145deg, var(--vk-navy) 0%, #0B2554 60%, var(--vk-secondary) 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-shrink: 0;
}
.vackelys-chat__identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vackelys-chat__avatar-wrap { position: relative; flex-shrink: 0; }
.vackelys-chat__avatar {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--vk-secondary) 0%, var(--vk-primary) 100%);
    color: #fff; font-weight: 700; font-size: var(--fs-lg);
}
.vackelys-chat__status {
    position: absolute; right: -1px; bottom: -1px;
    width: 11px; height: 11px;
    background: #2DD879; border: 2.5px solid var(--vk-navy); border-radius: 50%;
}
.vackelys-chat__title { font-size: var(--fs-md); font-weight: 700; color: #fff; }
.vackelys-chat__subtitle { margin-top: 2px; color: rgba(255,255,255,.78); font-size: var(--fs-xs); font-weight: 500; }
/* Fix M3 (/diagnose 2026-07-06) : color était #fff / rgba(255,255,255,.78) codés en
   dur sans déclinaison clair (mêmes classes pour "Pablo — Test chatbot public" et
   "Pablito / Assistant interne · session…"). Le sombre marche (fond dégradé navy/
   violet toujours foncé sur .vackelys-chat__header, cf. règle ci-dessus + ligne
   ~3898 pour .pbl-chat) — on ne touche pas ces couleurs blanches par défaut, on
   ajoute seulement l'override clair scopé, même patron que la ligne ~2945
   (:root:not([data-theme="dark"]) .vackelys-chat) pour ce même composant. */
:root:not([data-theme="dark"]) .vackelys-chat__title { color: var(--ink-900); }
:root:not([data-theme="dark"]) .vackelys-chat__subtitle { color: var(--ink-700); }
.vackelys-chat__hbtn {
    width: 36px; height: 36px; border-radius: var(--r-sm);
    background: rgba(255,255,255,.1); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--d-fast);
}
.vackelys-chat__hbtn:hover { background: rgba(255,255,255,.2); }
.vackelys-chat__messages {
    flex: 1; min-height: 0;
    padding: 18px 14px 12px;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(11, 16, 30, 0.50) 0%, rgba(15, 22, 40, 0.40) 100%);
    display: flex; flex-direction: column; gap: 16px;
}
.vackelys-chat__message { display: flex; align-items: flex-end; gap: 10px; }
.vackelys-chat__message--user { justify-content: flex-end; }
.vackelys-chat__message--bot, .vackelys-chat__message--error { justify-content: flex-start; align-items: flex-start; }
.vackelys-chat__msg-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vk-secondary), var(--vk-primary));
    color: #fff; font-weight: 700; font-size: var(--fs-base);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.vackelys-chat__bubble {
    max-width: 78%;
    padding: 12px 15px;
    border-radius: var(--r-lg);
    font-size: var(--fs-14); line-height: 1.65;
    overflow-wrap: anywhere;
}
.vackelys-chat__message--bot .vackelys-chat__bubble,
.vackelys-chat__message--error .vackelys-chat__bubble { max-width: 90%; }
.vackelys-chat__message--bot .vackelys-chat__bubble {
    background: var(--vk-bot-bubble); color: var(--vk-text);
    border: 1px solid var(--vk-bot-border);
    border-top-left-radius: 6px;
    --md-accent: var(--vk-primary);
    --md-code-bg: rgba(12, 192, 223, 0.12);
    --md-pre-bg: rgba(6, 9, 20, 0.60);
}
.vackelys-chat__message--user .vackelys-chat__bubble {
    background: linear-gradient(135deg, #1A3080 0%, #0CC0DF 130%);
    color: #fff; border-top-right-radius: 6px;
    white-space: pre-wrap;
}
.vackelys-chat__message--error .vackelys-chat__bubble { background: rgba(242, 100, 100, 0.12); color: var(--danger); border: 1px solid rgba(242, 100, 100, 0.30); }
.vackelys-chat__typing { display: inline-flex; align-items: center; gap: 4px; }
.vackelys-chat__typing-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(12, 192, 223, 0.70); animation: vkTyping 1.4s infinite ease-in-out; }
.vackelys-chat__typing-dot:nth-child(2) { animation-delay: .18s; }
.vackelys-chat__typing-dot:nth-child(3) { animation-delay: .36s; }
@keyframes vkTyping { 0%,75%,100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-5px); } }
.vackelys-chat__actions-inline { display: flex; gap: 8px; flex-wrap: wrap; margin-left: 42px; }
.vackelys-chat__choice {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; min-height: 40px;
    border-radius: 999px;
    background: rgba(20, 28, 46, 0.60); color: var(--vk-primary);
    border: 1.5px solid rgba(12, 192, 223, 0.28);
    font-size: var(--fs-13); font-weight: 600;
    font-family: inherit;
    transition: border-color var(--d-fast), background var(--d-fast), color var(--d-fast);
}
.vackelys-chat__choice:hover:not(:disabled) { border-color: var(--vk-primary); background: rgba(12, 192, 223, 0.10); color: var(--vk-primary); }
.vackelys-chat__choice:disabled { opacity: .5; cursor: not-allowed; }
.vackelys-chat__starters { margin-left: 42px; }
.vackelys-chat__starters-label { margin-bottom: 8px; font-size: var(--fs-11); font-weight: 600; color: var(--vk-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.vackelys-chat__starters-grid { display: flex; flex-direction: column; gap: 6px; }
.vackelys-chat__starter {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 11px 13px; min-height: 42px;
    border-radius: 12px; background: rgba(20, 28, 46, 0.60);
    border: 1px solid rgba(255, 255, 255, 0.085); color: var(--vk-text);
    font-size: var(--fs-13); font-weight: 500; text-align: left;
    font-family: inherit;
    transition: border-color var(--d-fast), background var(--d-fast);
}
.vackelys-chat__starter:hover { border-color: var(--vk-primary); background: rgba(12, 192, 223, 0.08); }
.vackelys-chat__starter-icon {
    width: 28px; height: 28px; border-radius: var(--r-xs);
    background: linear-gradient(135deg, rgba(12,192,223,.12), rgba(0,78,174,.1));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-14); flex-shrink: 0;
}
.vackelys-chat__form {
    padding: 11px 14px;
    background: rgba(15, 22, 40, 0.90); border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex; align-items: flex-end; gap: 8px; flex-shrink: 0;
}
.vackelys-chat__input-wrap {
    flex: 1; min-width: 0;
    background: rgba(20, 28, 46, 0.60);
    border: 1.5px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    padding: 2px 4px;
    transition: border-color var(--d-fast), background var(--d-fast);
}
.vackelys-chat__input-wrap:focus-within { background: rgba(20, 28, 46, 0.85); border-color: var(--vk-primary); }
.vackelys-chat__input {
    width: 100%; border: 0; background: transparent;
    resize: none; overflow: hidden;
    padding: 9px 13px; font-size: var(--fs-14); line-height: 1.5;
    color: #ECF1F8; min-height: 24px; max-height: 120px;
    outline: none; font-family: inherit;
    box-shadow: none;
    scrollbar-width: none;
}
.vackelys-chat__input::-webkit-scrollbar { display: none; }
.vackelys-chat__input::placeholder { color: #5B718A; }
.vackelys-chat__send {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, var(--vk-secondary), var(--vk-primary));
    color: #fff; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; position: relative;
    transition: transform var(--d-fast), box-shadow var(--d-fast);
}
.vackelys-chat__send:hover:not(:disabled):not(.is-loading) { transform: scale(1.06); box-shadow: 0 8px 20px rgba(0,78,174,.32); }
.vackelys-chat__send:disabled:not(.is-loading) { background: rgba(12,192,223,0.10); color: rgba(12,192,223,0.30); cursor: not-allowed; }
.vackelys-chat__send .vk-send-icon {
    width: 18px; height: 18px;
    transition: transform var(--d-fast) ease;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
}
.vackelys-chat__send:hover:not(:disabled):not(.is-loading) .vk-send-icon { transform: translateX(2px); }
.vackelys-chat__send.is-loading {
    cursor: progress;
    background: linear-gradient(135deg, var(--vk-secondary), var(--vk-primary));
    color: #fff;
}
.vackelys-chat__send.is-loading::before,
.vackelys-chat__send.is-loading::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--vk-primary); opacity: 0; pointer-events: none;
    animation: vkSendHalo 1.6s cubic-bezier(.16,.84,.44,1) infinite;
}
.vackelys-chat__send.is-loading::after { animation-delay: .8s; }
.vackelys-chat__send.is-loading .vk-send-icon { animation: vkSendPulse 1.4s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes vkSendHalo {
    0%   { transform: scale(.85); opacity: .55; border-width: 2.5px; }
    70%  { transform: scale(1.55); opacity: 0; border-width: 1px; }
    100% { transform: scale(1.55); opacity: 0; border-width: 1px; }
}
@keyframes vkSendPulse {
    0%, 100% { transform: scale(.84); opacity: .55; }
    50%      { transform: scale(1.08); opacity: 1; }
}
/* Curseur streaming pour les deux widgets */
/* Fix prod-ready 2026-07-19 : sélecteur mort (.vackelys-chat__bubble) — la bulle réelle
   (pablito-widget.js) porte la classe .bubble, pas la classe BEM historique. */
.bubble.is-streaming::after {
    content: '\25AE';
    display: inline-block;
    margin-left: 2px;
    vertical-align: text-bottom;
    color: var(--vk-primary);
    animation: vkCursor 0.9s steps(1) infinite;
}
@keyframes vkCursor {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .bubble.is-streaming::after { animation: none; opacity: 1; }
}
.vackelys-chat .vackelys-chat__avatar-icon {
    width: 60%; height: 60%; color: #fff;
}
.vackelys-chat__thinking {
    display: inline-flex; align-items: center; gap: 10px; min-width: 0;
}
.vackelys-chat__thinking-label {
    font-size: var(--fs-13); font-weight: 500; color: var(--vk-muted);
    font-style: italic; line-height: 1.3; white-space: nowrap;
    opacity: 0; transform: translateY(2px);
    transition: opacity .28s ease, transform .28s ease;
    background: linear-gradient(90deg, var(--vk-muted) 0%, var(--vk-secondary) 50%, var(--vk-muted) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: vkThinkingShimmer 3.2s linear infinite;
}
.vackelys-chat__thinking-label.is-visible { opacity: 1; transform: translateY(0); }
@keyframes vkThinkingShimmer {
    0%   { background-position: 200% 50%; }
    100% { background-position: -200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .vackelys-chat__send.is-loading::before,
    .vackelys-chat__send.is-loading::after,
    .vackelys-chat__send.is-loading .vk-send-icon { animation: none; }
    .vackelys-chat__thinking-label {
        animation: none; background: none;
        -webkit-text-fill-color: var(--vk-muted);
    }
}
.vackelys-chat__char-count {
    font-size: var(--fs-10); color: var(--vk-muted);
    text-align: right; padding: 1px 16px 0;
    opacity: 0; transition: opacity .2s ease;
    pointer-events: none;
}
.vackelys-chat__char-count.is-visible { opacity: 1; }
.vackelys-chat__char-count.is-warn { color: var(--warn); }
.vackelys-chat__char-count.is-danger { color: var(--danger); }
.vackelys-chat__notice {
    padding: 6px 16px 10px; background: rgba(15, 22, 40, 0.90);
    color: var(--vk-muted); font-size: var(--fs-2xs);
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.vackelys-chat__timestamp { font-size: var(--fs-10); color: rgba(255,255,255,0.28); margin-top: 4px; }
.vackelys-chat__timestamp--user  { text-align: right; padding-right: 4px; }
.vackelys-chat__timestamp--bot, .vackelys-chat__timestamp--error { text-align: left; padding-left: 42px; }
/* vackelys-chat : thème dark natif (Aurora Glass). Override pour mode clair. */
:root:not([data-theme="dark"]) .vackelys-chat__send:disabled:not(.is-loading) { background: #DDE7F0; color: #94A8BC; }
:root:not([data-theme="dark"]) .vackelys-chat {
    background: rgba(255,255,255,0.78);
    --vk-text: var(--ink-900);
    --vk-muted: var(--ink-500);
    --vk-bot-bubble: rgba(255,255,255,0.88);
    --vk-bot-border: rgba(15,23,42,0.08);
    border-color: var(--border-hi);
}
:root:not([data-theme="dark"]) .vackelys-chat__messages {
    background: linear-gradient(180deg, rgba(245,247,252,0.60) 0%, rgba(238,242,252,0.50) 100%);
}
:root:not([data-theme="dark"]) .vackelys-chat__message--bot .vackelys-chat__bubble {
    background: rgba(255,255,255,0.88);
    color: var(--ink-900);
    border-color: rgba(15,23,42,0.08);
    --md-pre-bg: rgba(15,23,42,0.06);
}
:root:not([data-theme="dark"]) .vackelys-chat__typing-dot { background: rgba(12,192,223,0.80); }
/* Ticket 02 item 9/I-11 : le conteneur .vackelys-chat bascule sur fond quasi-blanc en
   clair (règle ci-dessus) mais .message--error n'avait pas d'override dédié comme ses
   voisins (bot bubble, form, input…) → #F26464 sur le fond rose clair tombait à 2.61:1. */
:root:not([data-theme="dark"]) .vackelys-chat__message--error .vackelys-chat__bubble {
    color: #B91C1C;
}
:root:not([data-theme="dark"]) .vackelys-chat__form {
    background: rgba(245,247,252,0.95);
    border-top-color: rgba(15,23,42,0.08);
}
:root:not([data-theme="dark"]) .vackelys-chat__input-wrap {
    background: rgba(255,255,255,0.80);
    border-color: rgba(15,23,42,0.12);
}
:root:not([data-theme="dark"]) .vackelys-chat__input { color: var(--ink-900); }
:root:not([data-theme="dark"]) .vackelys-chat__input::placeholder { color: var(--ink-400); }
:root:not([data-theme="dark"]) .vackelys-chat__send:disabled:not(.is-loading) { background: #DDE7F0; color: #94A8BC; }
:root:not([data-theme="dark"]) .vackelys-chat__notice {
    background: rgba(245,247,252,0.95);
    color: var(--ink-500);
}
:root:not([data-theme="dark"]) .vackelys-chat__char-count { color: var(--ink-400); }
/* Ticket 02 item 9/I-11 : is-warn/is-danger n'avaient pas d'override clair (oubli
   lot M2/M3) → héritaient des teintes sombres (#F0A93A/#F26464), illisibles en clair. */
:root:not([data-theme="dark"]) .vackelys-chat__char-count.is-warn { color: var(--warn); }
:root:not([data-theme="dark"]) .vackelys-chat__char-count.is-danger { color: #B91C1C; }
:root:not([data-theme="dark"]) .vackelys-chat__timestamp { color: rgba(15,23,42,0.35); }
:root:not([data-theme="dark"]) .vackelys-chat__starter {
    background: rgba(255,255,255,0.80);
    border-color: rgba(15,23,42,0.10);
    color: var(--ink-900);
}
:root:not([data-theme="dark"]) .vackelys-chat__choice {
    background: rgba(255,255,255,0.70);
    color: var(--vk-primary);
}

/* =====================================================
   24. Rendu Markdown unifié (.md)
   ===================================================== */
.md { line-height: 1.65; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0.5em 0; }
.md h1, .md h2, .md h3, .md h4 {
    font-family: var(--font-display);
    font-weight: 600; line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 1em 0 0.4em;
}
.md h1 { font-size: 1.35em; }
.md h2 { font-size: 1.18em; }
.md h3 { font-size: 1.06em; color: var(--md-accent, currentColor); }
.md h4 { font-size: 1em; color: var(--md-accent, currentColor); }
.md ul, .md ol { margin: 0.5em 0; padding-left: 1.5em; }
.md ul { list-style: disc; }
.md ol { list-style: decimal; }
.md li { margin: 0.25em 0; }
.md li > ul, .md li > ol { margin: 0.25em 0; }
.md li::marker { color: var(--md-accent, currentColor); }

/* Fix 12 : listes markdown HORS conteneurs .md — le reset global *{padding:0}
   retire l'indentation des <ul>/<ol> ; les bulles chat/conversations et les
   boîtes forum (sans classe .md) affichaient les puces collées/coupées. */
.bubble--pablo ul, .bubble--pablo ol,
.fd-draft-box ul, .fd-draft-box ol,
.fd-thread-post-body ul, .fd-thread-post-body ol {
    padding-left: 1.5em; margin: 0.45em 0;
}
.bubble--pablo ul, .fd-draft-box ul, .fd-thread-post-body ul { list-style: disc; }
.bubble--pablo ol, .fd-draft-box ol, .fd-thread-post-body ol { list-style: decimal; }
.bubble--pablo li, .fd-draft-box li, .fd-thread-post-body li { margin: 0.2em 0; }
.bubble--pablo li > ul, .bubble--pablo li > ol,
.fd-draft-box li > ul, .fd-draft-box li > ol,
.fd-thread-post-body li > ul, .fd-thread-post-body li > ol { margin: 0.2em 0; }
.md a { color: var(--md-accent, currentColor); text-decoration: underline; text-underline-offset: 2px; }
.md strong { font-weight: 700; }
.md em { font-style: italic; }
.md code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    padding: 1.5px 5px;
    border-radius: 5px;
    background: var(--md-code-bg, rgba(127,127,127,0.14));
    color: var(--md-accent, currentColor);
}
.md pre {
    background: var(--md-pre-bg, rgba(127,127,127,0.1));
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    overflow-x: auto;
    margin: 0.7em 0;
}
.md pre code { background: none; padding: 0; color: inherit; }
.md blockquote {
    border-left: 3px solid var(--md-accent, currentColor);
    padding: 2px 0 2px 12px;
    margin: 0.6em 0;
    font-style: italic;
    opacity: 0.85;
}
.md hr { border: 0; height: 1px; background: var(--hairline); margin: 1em 0; }
.md table { width: 100%; border-collapse: collapse; margin: 0.7em 0; font-size: 0.92em; }
.md th, .md td { padding: 7px 11px; border-bottom: 1px solid var(--hairline); text-align: left; }
.md th { font-weight: 600; }

/* Bloc « réponse proposée » (modale mail) */
.md-block--response {
    position: relative;
    background: linear-gradient(180deg, rgba(167,139,250,0.06), rgba(11,181,197,0.04)), var(--surface-soft);
    border: 1px solid rgba(167,139,250,0.2);
    border-radius: var(--r-md);
    padding: 18px 20px;
    margin: 14px 0 10px;
    font-size: var(--fs-base);
    color: var(--ink-800);
    --md-accent: var(--cyan-deeper);
    --md-code-bg: rgba(11,181,197,0.1);
    --md-pre-bg: rgba(15,23,42,0.05);
}
:root[data-theme="dark"] .md-block--response {
    background: linear-gradient(180deg, rgba(167,139,250,0.1), rgba(11,181,197,0.06)), var(--surface-soft);
    border-color: rgba(196,181,253,0.22);
    --md-accent: var(--cyan-light);
}
.md-block--response::before {
    content: '🤖 Pablo';
    position: absolute;
    top: -11px; left: 16px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    background: var(--surface-strong);
    border: 1px solid rgba(167,139,250,0.3);
    border-radius: 999px;
    padding: 3px 10px;
    color: var(--ink-600);
}

/* =====================================================
   25. Responsive
   ===================================================== */
@media (max-width: 1100px) {
    .tab-panel { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
    .panel-title { font-size: var(--fs-2xl); }
    .ov-grid, .llm-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .ov-bottom, .export-grid { grid-template-columns: 1fr; }
    /* qa-fields (override responsive) supprimée ici (Lot B vague 2,
       2026-07-18) — la règle de base n'existe plus (cluster C-8). */
}
@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 280px; min-width: 280px;
        transform: translateX(-100%);
        transition: transform var(--d-base) var(--ease-out);
        z-index: 50;
    }
    .sidebar.open { transform: translateX(0); }
    .sb-backdrop.show { display: block; }
    body.sb-open { overflow: hidden; }
    .sb-toggle {
        display: inline-flex;
        position: fixed;
        top: 16px; left: 16px;
        z-index: 25;
        box-shadow: var(--sh-card);
    }
    .topbar-actions { gap: 6px; }
    .topbar-btn-label { display: none; }
    .topbar-drafts-counter { display: none !important; }
    .tab-panel { padding: var(--sp-4) var(--sp-4) 88px; gap: var(--sp-4); }
    .panel-header { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
    .panel-header .btn { width: 100%; justify-content: center; }
    /* Pablito — panel-header étant maintenant en colonne + align-items:stretch,
       .pdoc-switch (inline-flex non stylé pour ce cas) hérite une largeur
       100% mais ses 2 boutons restent groupés à gauche : grand vide décoratif
       à droite de la pilule (mesuré en direct au test reflow 200%/640px). Les
       2 onglets se partagent l'espace, contenu centré — cohérent avec
       .panel-header .btn ci-dessus (même intention, cas .btn non applicable
       ici car pdoc-switch-btn n'a pas la classe .btn). */
    .pdoc-switch-btn { flex: 1 1 0; justify-content: center; }
    .panel-title { font-size: var(--fs-xl); }
    .ov-card { min-height: 128px; }
    .qa-toolbar { flex-direction: column; align-items: stretch; }
    .qa-search, .qa-filter { width: 100%; min-width: 0; }
    /* qa-actions (override responsive) supprimée ici (Lot B vague 2,
       2026-07-18) — la règle de base n'existe plus (cluster C-8). */
    .conv-card-row { flex-direction: column; }
    .conv-card-stats { text-align: left; grid-template-columns: repeat(3, 1fr); }
    .attempt-card { grid-template-columns: 1fr; gap: var(--sp-3); }
    .att-head strong { max-width: 100%; }
    .modal-overlay, .mmodal, .conv-modal-backdrop { padding: 0; align-items: flex-end; }
    .modal, .mmodal-content, .conv-modal {
        max-width: 100%;
        max-height: 92vh;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
    }
    .modal-actions { flex-direction: column-reverse; }
    .modal-actions .btn { width: 100%; justify-content: center; }
    .bulk-bar, .conv-bulkbar, .fd-bulkbar { left: 12px; right: 12px; transform: translate(0, 32px); max-width: none; }
    .bulk-bar.show, .conv-bulkbar.show, .fd-bulkbar.show { transform: translate(0, 0); }
    #toast { left: 12px; right: 12px; bottom: 80px; max-width: none; }
    /* Cibles tactiles */
    .btn { min-height: 42px; }
    .btn-icon { width: 40px; height: 40px; }
    .btn-icon-sm { width: 38px; height: 38px; }
    .sb-item { padding: 12px; }
    input, textarea, select, .vk-input, .vk-textarea { font-size: var(--fs-16); }
}
@media (max-width: 560px) {
    .ov-grid, .llm-kpi-grid { grid-template-columns: 1fr; }
    .tab-panel { padding: var(--sp-3) var(--sp-3) 88px; }
    .panel-title { font-size: var(--fs-lg); }
    .export-stats { flex-direction: column; }
    .llm-form-grid { grid-template-columns: 1fr; }
    .llm-breakdown-wrap { -webkit-overflow-scrolling: touch; }
    .llm-breakdown-table, .llm-pricing-table { min-width: 520px; }
    .filters-table { display: block; overflow-x: auto; }
}

/* =====================================================
   26. Mouvement réduit + impression
   ===================================================== */
/* a11y : règle globale prefers-reduced-motion (Phase A — brief 2026-06-12)
   Cible : animation-duration 0.01ms, transition-duration 0.01ms,
   animation-iteration-count 1, scroll-behavior auto — conformément au
   brief (valeur .01ms plutôt que 0.001ms pour rester détectable par JS
   mais imperceptible humainement). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:        .01ms !important;
        animation-iteration-count: 1     !important;
        transition-duration:       .01ms !important;
        scroll-behavior:           auto  !important;
    }
}
@media print {
    .sidebar, .topbar, .sb-backdrop, #toast, .bulk-bar, .conv-bulkbar, .fd-bulkbar { display: none !important; }
    .tab-panel { position: static; padding: 0; }
    body { overflow: visible; }
}
    
/* =====================================================
   COMPOSANT UNIFIÉ — Sélecteur de période (§5 brief)
   Remplace : .billing-quickpicks, .conv-range-bar/.conv-range,
              .anom-range-bar/.anom-range, #llm-period-select
   Usage : <div class="pbl-range-bar">
             <button class="pbl-range-btn [active]" data-range="7d">7 j</button>
           </div>
   ===================================================== */
.pbl-range-bar {
    display: inline-flex;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
    padding: 4px;
    box-shadow: var(--sh-xs);
    flex-wrap: wrap;
}
.pbl-range-btn {
    padding: 7px 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-600);
    border-radius: var(--r-xs);
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font-ui);
    transition: color var(--d-fast), background var(--d-fast), box-shadow var(--d-fast);
}
.pbl-range-btn:hover { color: var(--ink-900); background: rgba(11,181,197,0.06); }
.pbl-range-btn.active,
.pbl-range-btn[aria-pressed="true"] {
    background: var(--surface-strong);
    color: var(--cyan-deeper);
    box-shadow: inset 0 0 0 1px rgba(11,181,197,0.24);
}
:root[data-theme="dark"] .pbl-range-btn.active,
:root[data-theme="dark"] .pbl-range-btn[aria-pressed="true"] {
    color: var(--cyan-light);
    background: rgba(11,181,197,0.18);
}

/* Aliases rétro-compat : billing-quickpicks → pbl-range-bar */
.billing-quickpicks { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.billing-quickpicks button {
    padding: 7px 12px; font-size: var(--fs-sm); font-weight: 600;
    border-radius: var(--r-xs); cursor: pointer;
    background: rgba(234,88,12,0.08); color: #C2410C;
    border: 1px solid rgba(234,88,12,0.25);
    font-family: var(--font-ui);
    transition: color var(--d-fast), background var(--d-fast);
}
.billing-quickpicks button:hover { background: rgba(234,88,12,0.18); }
.billing-quickpicks button[aria-pressed="true"] { background: #EA580C; color: white; border-color: #C2410C; }

/* Alias : conv-range → pbl-range-btn (conservé pour compatibilité JS) */
.conv-range-bar { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--border-hi); border-radius: var(--r-md); padding: 4px; }
.conv-range { padding: 7px 12px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-600); border-radius: var(--r-xs); transition: color var(--d-fast), background var(--d-fast); }
.conv-range:hover { color: var(--ink-900); }
.conv-range.active { background: var(--surface-strong); color: var(--cyan-deeper); box-shadow: inset 0 0 0 1px rgba(11,181,197,0.24); }
:root[data-theme="dark"] .conv-range.active { color: var(--cyan-light); background: rgba(11,181,197,0.18); }

/* Alias : anom-range → pbl-range-btn (conservé pour compatibilité JS) */
.anom-range-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.anom-range { padding: 7px 12px; font-size: var(--fs-sm); font-weight: 600; border-radius: 999px; cursor: pointer; background: rgba(239,68,68,0.08); color: #B91C1C; border: 1px solid rgba(239,68,68,0.25); font-family: var(--font-ui); }
.anom-range:hover { background: rgba(239,68,68,0.18); }
.anom-range.active { background: #EF4444; color: #fff; border-color: #DC2626; }

/* Anomalies Pablo_Back (rouge) */

/* ─── Forum Drafts (prefix fd-) ─────────────────────────────── */
.fd-card[hidden], #fd-list-container[hidden]{display:none!important}
/* Fix 10 : fd-pane pleine largeur (max-width retiré) */
.fd-pane { padding: 0 var(--sp-5) var(--sp-6); width: 100%; box-sizing: border-box; }
.fd-empty { text-align:center; color:var(--text-muted); padding:var(--sp-8) var(--sp-6); /* ticket 23 : unifié (ex-60px 20px) */ font-size:var(--fs-sm); }
.fd-list { display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.fd-card {
    background: var(--glass-bg, rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-md);
    padding: 20px 24px;
    transition: border-color 0.18s;
}
.fd-card:hover { border-color: rgba(34,197,94,0.35); }
.fd-card-meta {
    display:flex; gap:10px; flex-wrap:wrap; align-items:center;
    font-size:var(--fs-xs); color:var(--text-muted); margin-bottom:10px;
}
.fd-badge-event {
    background: rgba(34,197,94,0.15); color:var(--success);
    border:1px solid rgba(34,197,94,0.3);
    border-radius:999px; padding:2px 10px; font-size:var(--fs-10); font-weight:700; white-space:nowrap;
}
/* Fix 9 : la version vive (ex-#86EFAC, illisible sur fond clair) reste dark
   uniquement. H-5 (ticket 14 item 2) : recolorée en --success-dark-text. */
:root[data-theme="dark"] .fd-badge-event { color:var(--success-dark-text); }
/* Audit 2026-07-19 : distinguer « Réponse » (fil engagé) de « Nouveau sujet »
   au premier coup d'œil — variante info, même pilule. */
.fd-badge-event--reply {
    background: rgba(59,130,246,0.13); color: var(--info);
    border-color: rgba(59,130,246,0.32);
}
:root[data-theme="dark"] .fd-badge-event--reply { color: #93C5FD; }
.fd-question {
    font-size:var(--fs-sm); color:var(--text-base);
    margin-bottom:10px; line-height:1.5;
    border-left:3px solid rgba(34,197,94,0.5); padding-left:12px;
}
.fd-sources {
    font-size:var(--fs-xs); color:var(--text-muted); margin-bottom:12px;
}
.fd-sources-label { font-weight:600; color:var(--text-base); margin-right:6px; }
.fd-draft-label { font-size:var(--fs-xs); font-weight:600; color: var(--success); margin-bottom:6px; }
.fd-textarea {
    width:100%; box-sizing:border-box;
    background: rgba(0,0,0,0.25); color:var(--text-base);
    border:1px solid rgba(255,255,255,0.12); border-radius:var(--r-xs);
    padding:12px 14px; font-size:var(--fs-sm); line-height:1.6;
    resize:vertical; min-height:120px; font-family:inherit;
    transition:border-color 0.15s;
}
.fd-textarea:focus { outline:none; border-color:rgba(34,197,94,0.5); }
.fd-actions { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.fd-btn-approve {
    background: rgba(34,197,94,0.18); color: var(--success);
    border:1px solid rgba(34,197,94,0.4);
    border-radius:var(--r-xs); padding:8px 18px; font-size:var(--fs-sm); font-weight:600;
    cursor:pointer; transition:background 0.15s;
}
.fd-btn-approve:hover { background:rgba(34,197,94,0.3); }
.fd-btn-approve:disabled { opacity:0.45; cursor:not-allowed; }
.fd-btn-reject {
    background: rgba(239,68,68,0.12); color: #B91C1C;
    border:1px solid rgba(239,68,68,0.3);
    border-radius:var(--r-xs); padding:8px 18px; font-size:var(--fs-sm); font-weight:600;
    cursor:pointer; transition:background 0.15s;
}
.fd-btn-reject:hover { background:rgba(239,68,68,0.24); }
.fd-btn-reject:disabled { opacity:0.45; cursor:not-allowed; }
.fd-spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,0.2); border-top-color:#86EFAC; border-radius:50%; animation:fd-spin 0.7s linear infinite; vertical-align:middle; margin-right:6px; }
@keyframes fd-spin { to { transform:rotate(360deg); } }
.fd-status-ok  { color: var(--success); font-size:var(--fs-xs); margin-top:8px; }
.fd-status-err { color: #B91C1C; font-size:var(--fs-xs); margin-top:8px; } .fd-status-ok { color:var(--success); font-size:var(--fs-xs); margin-top:8px; } :root{--text-muted:var(--ink-500);} [data-theme="dark"]{--text-muted:var(--ink-600);}

/* ─── Bascule Editer/Apercu (fd-toggle-) ──────────────────────── */
.fd-toggle-bar {
    display:flex; gap:0; margin-bottom:8px; border-radius:var(--r-xs); overflow:hidden;
    border:1px solid rgba(255,255,255,0.1); width:fit-content;
}
.fd-toggle-btn {
    padding:5px 14px; font-size:var(--fs-11); font-weight:600; cursor:pointer;
    background:transparent; color:var(--text-muted); border:none;
    transition:background 0.15s, color 0.15s;
}
.fd-toggle-btn.active {
    background:rgba(34,197,94,0.18); color: var(--success);
}
.fd-preview-pane {
    border:1px solid rgba(255,255,255,0.08); border-radius:var(--r-xs);
    padding:14px 16px; min-height:80px; font-size:var(--fs-sm); line-height:1.7;
    color:var(--text-base); background:rgba(0,0,0,0.15);
    overflow-wrap:break-word; word-break:break-word;
}
.fd-preview-pane img { max-width:100%; border-radius:6px; display:block; margin:8px 0; }
.fd-preview-pane del { opacity:0.7; }
/* ─── Fil du sujet (fd-thread-) ───────────────────────────────── */
.fd-thread-section { margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.07); }
.fd-thread-label { font-size:var(--fs-xs); font-weight:600; color:var(--text-muted); margin-bottom:10px; letter-spacing:0.04em; }
.fd-thread-toggle { display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid rgba(255,255,255,0.1); border-radius:6px; padding:4px 10px; font-size:var(--fs-10); font-weight:600; color:var(--text-muted); cursor:pointer; transition:color 0.15s, border-color 0.15s; font-family:inherit; }
.fd-thread-toggle:hover { color:var(--text-base); border-color:rgba(255,255,255,0.25); }
.fd-thread-toggle[aria-expanded="true"] { color: var(--success); border-color:rgba(34,197,94,0.4); } .fd-thread-toggle[aria-expanded="true"] i { transform:rotate(90deg); transition:transform .15s ease; }
.fd-thread-body { overflow:hidden; }
.fd-thread-body[hidden] { display:none!important; }
.fd-thread-loading { font-size:var(--fs-xs); color:var(--text-muted); }
.fd-thread-unavail { font-size:var(--fs-xs); color:#B91C1C; font-style:italic; }
:root[data-theme="dark"] .fd-thread-unavail { color:rgba(252,165,165,0.85); }
.fd-thread-post {
    padding:10px 14px; border-radius:var(--r-xs);
    background:rgba(255,255,255,0.03); border-left:3px solid rgba(255,255,255,0.12);
    margin-bottom:8px;
}
.fd-thread-post.is-topic { border-left-color:rgba(34,197,94,0.5); }
.fd-thread-post-meta {
    display:flex; gap:8px; flex-wrap:wrap; align-items:center;
    font-size:var(--fs-10); color:var(--text-muted); margin-bottom:6px;
}
.fd-thread-post-author { font-weight:700; color:var(--text-base); }
.fd-thread-post-body { font-size:var(--fs-xs); line-height:1.6; color:var(--text-base); }
.fd-thread-post-body img { max-width:100%; border-radius:4px; display:block; margin:4px 0; }
.anom-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:20px; }
.anom-range-bar { display:flex; gap:6px; flex-wrap:wrap; }
.anom-range { padding:7px 12px; font-size:var(--fs-12); font-weight:600; border-radius:999px; cursor:pointer; background:rgba(239,68,68,0.08); color:#B91C1C; border:1px solid rgba(239,68,68,0.25); font-family:inherit; }
.anom-range:hover { background:rgba(239,68,68,0.18); }
.anom-range.active { background:#EF4444; color:#fff; border-color:#DC2626; }
.anom-count { font-size:var(--fs-12); color:var(--ink-500,#94A3B8); margin-left:auto; }
.anom-table-wrap { overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--ink-200,rgba(15,23,42,0.08)); background:var(--panel-bg,transparent); }
.anom-table { width:100%; border-collapse:collapse; font-size:var(--fs-base); }
.anom-table thead th { background:rgba(239,68,68,0.05); color: #9B1C1C; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; font-size:var(--fs-11); text-align:left; padding:10px 14px; border-bottom:1px solid rgba(239,68,68,0.15); }
.anom-table tbody td { padding:11px 14px; border-bottom:1px solid var(--ink-100,rgba(15,23,42,0.05)); vertical-align:middle; }
.anom-table tbody tr:hover td { background:rgba(239,68,68,0.04); cursor:pointer; }
.anom-table tbody tr:focus-visible { outline:2px solid #EF4444; outline-offset:-2px; }
.anom-table .num { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--font-mono,monospace); }
.anom-cost { color: #B91C1C; font-weight:700; }
.anom-dim { color:var(--ink-500,#94A3B8); }
.anom-badge { display:inline-block; padding:2px 8px; border-radius:6px; font-size:var(--fs-11); font-weight:600; }
.anom-badge-err { background:rgba(239,68,68,0.14); color: #B91C1C; border:1px solid rgba(239,68,68,0.4); }
.anom-badge-enrich { background:rgba(16,185,129,0.14); color: var(--success); border:1px solid rgba(16,185,129,0.4); }
.anom-badge-fp { background:rgba(148,163,184,0.18); color: #475569; border:1px solid rgba(148,163,184,0.4); }
.anom-redmine { color: var(--info); font-weight:600; text-decoration:none; }
.anom-redmine:hover { text-decoration:underline; }
.anom-empty, .anom-loading { padding:var(--sp-8) var(--sp-6); /* ticket 23 : unifié (ex-36px) */ text-align:center; color:var(--ink-500,#94A3B8); }
.anom-drawer-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:998; }
.anom-drawer { position:fixed; top:0; right:0; height:100vh; width:640px; max-width:100vw; background:var(--panel-bg,#0F172A); border-left:1px solid var(--ink-200,#1F2D48); z-index:999; display:flex; flex-direction:column; animation:anomSlide .25s ease; box-shadow:-12px 0 40px rgba(0,0,0,.25); }
@media(max-width:560px){ .anom-drawer{ width:100vw; } }
@keyframes anomSlide { from{ transform:translateX(100%);} to{ transform:translateX(0);} }
.anom-drawer[hidden], .anom-drawer-backdrop[hidden] { display:none !important; }
.anom-drawer-head { padding:18px 20px; border-bottom:1px solid var(--ink-200,#1F2D48); display:flex; align-items:flex-start; gap:10px; }
.anom-drawer-title { margin:0 0 6px; font-size:var(--fs-md); font-weight:700; }
.anom-drawer-meta { font-size:var(--fs-xs); line-height:1.6; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; }
/* a11y : plancher cible tactile 24×24px (Phase A brief 2026-06-12) */
.anom-drawer-close {
    background: transparent; border: none; font-size: var(--fs-22); line-height: 1;
    color: var(--ink-500,#94A3B8); cursor: pointer;
    min-width: 24px; min-height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 4px;
}
.anom-drawer-close:hover { color:var(--ink-900,#fff); }
.anom-drawer-body { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:16px; }
.anom-thread-head { font-size:var(--fs-12); color:var(--ink-500,#94A3B8); }
.anom-thread { display:flex; flex-direction:column; gap:10px; }
.anom-bubble { max-width:92%; padding:10px 14px; border-radius:12px; font-size:var(--fs-base); line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.anom-bubble-user { align-self:flex-end; background:rgba(147,197,253,.15); border:1px solid rgba(147,197,253,.3); border-bottom-right-radius:4px; }
.anom-bubble-pablo { align-self:flex-start; background:rgba(239,68,68,.07); border:1px solid rgba(239,68,68,.22); border-bottom-left-radius:4px; }
.anom-bubble-meta { margin-top:6px; font-size:var(--fs-2xs); color:var(--ink-500,#94A3B8); }
.anom-state-card { border:1px solid var(--ink-200,rgba(15,23,42,0.1)); border-radius:12px; padding:14px 16px; background:rgba(239,68,68,0.03); }
.anom-state-title { margin:0 0 10px; font-size:var(--fs-12); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color: #9B1C1C; }
.anom-dl { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:var(--fs-13); }
.anom-kv { display:contents; }
.anom-kv dt { color:var(--ink-500,#94A3B8); font-weight:600; }
.anom-kv dd { margin:0; }
.anom-synth, .anom-late { margin-top:12px; }
.anom-synth-label { font-size:var(--fs-11); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-500,#94A3B8); margin-bottom:4px; }
.anom-synth-body { font-size:var(--fs-13); line-height:1.5; white-space:pre-wrap; }
.anom-late-list { margin:4px 0 0; padding-left:18px; font-size:var(--fs-sm); line-height:1.6; }

/* ===================================================
   PABLITO WIDGET — onglet interne équipe Cubiq
   =================================================== */

/* Layout général de l'onglet : flex column, chat en haut flex:1 */
#tab-pablito:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    min-height: 70vh;
}
#tab-pablito .panel-header { flex: 0 0 auto; }
#tab-pablito .vackelys-chat.pbl-chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#tab-pablito .vackelys-chat.pbl-chat .vackelys-chat__messages { flex: 1 1 auto; min-height: 0; }

/* Accordéon indexation */
.pbl-accord {
    flex: 0 0 auto;
    border: 1px solid rgba(167,139,250,.18);
    border-radius: var(--r-lg);
    background: rgba(167,139,250,.03);
    overflow: hidden;
}
.pbl-accord summary {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    user-select: none;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-700);
    list-style: none;
}
.pbl-accord summary::-webkit-details-marker { display: none; }
.pbl-accord summary:hover { background: rgba(167,139,250,.06); }
.pbl-accord-chevron {
    margin-left: auto;
    transition: transform var(--d-base) var(--ease-out);
    color: var(--ink-500);
    font-size: var(--fs-12);
}
.pbl-accord[open] .pbl-accord-chevron { transform: rotate(180deg); }
.pbl-accord-body { padding: var(--sp-1) var(--sp-4) var(--sp-4); }

.pbl-upload-zone {
    border: 2px dashed var(--border-hi);
    border-radius: var(--r-lg);
    background: rgba(167, 139, 250, 0.04);
    margin-bottom: 0;
    transition: border-color var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out);
}
.pbl-upload-zone.pbl-drag-over {
    border-color: rgba(167,139,250,.25);
    background: rgba(167, 139, 250, 0.10);
}
.pbl-upload-inner {
    padding: var(--sp-5) var(--sp-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    text-align: center;
}
.pbl-upload-label {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
}
.pbl-upload-ico {
    font-size: var(--fs-28);
    color: var(--violet);
    opacity: 0.85;
}
.pbl-upload-title {
    font-weight: 600;
    font-size: var(--fs-md);
    color: var(--ink-900);
}
.pbl-upload-sub {
    font-size: var(--fs-sm);
    color: var(--ink-500);
}
.pbl-file-input { display: none; }
.pbl-upload-status {
    font-size: var(--fs-sm);
    min-height: 20px;
    color: var(--ink-500);
}
.pbl-upload-status.pbl-ok   { color: var(--success); }
.pbl-upload-status.pbl-err  { color: var(--danger); }
.pbl-upload-status.pbl-busy { color: var(--violet); }

/* Chip fichier de conversation */
.pbl-ctx-bar:not([hidden]) {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3) 0;
    min-height: 0;
}
.pbl-ctx-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(167,139,250,.14);
    border: 1px solid rgba(167,139,250,.30);
    border-radius: 999px;
    padding: 3px 10px 3px 8px;
    font-size: var(--fs-xs);
    color: var(--violet-soft);
    max-width: 400px;
}
.pbl-ctx-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}
/* a11y : plancher cible tactile 24×24px (Phase A brief 2026-06-12) */
.pbl-ctx-chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--violet);
    font-size: var(--fs-14);
    line-height: 1;
    min-width: 24px; min-height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 2px;
    opacity: 0.8;
}
.pbl-ctx-chip-remove:hover { opacity: 1; }
.pbl-ctx-err {
    font-size: var(--fs-xs);
    color: var(--danger);
    padding: 0 var(--sp-3);
}

/* Trombone dans la barre de saisie */
.pbl-attach-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-500);
    padding: 0 6px;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    font-size: var(--fs-md);
    transition: color var(--d-fast) var(--ease-out);
}
.pbl-attach-btn:hover { color: var(--violet); }
.pbl-attach-btn.is-spinning { color: var(--violet); animation: pbl-spin 0.8s linear infinite; }
@keyframes pbl-spin { to { transform: rotate(360deg); } }

/* =====================================================
   COMPOSANT UNIFIÉ — Sélection de période (§5 brief)
   Remplace : billing-quickpicks, llm-period-select,
              conv-range-bar, anom-range-bar.
   Usage HTML : <div class="period-bar">
                  <button class="period-btn [active]" data-range="7d">7 j</button>
                  …
                </div>
   ===================================================== */
.period-bar {
    display: inline-flex;
    gap: 4px;
    background: var(--surface);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
    padding: 4px;
    box-shadow: var(--sh-xs);
    flex-wrap: wrap;
}
.period-btn {
    padding: 7px 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
    font-family: var(--font-ui);
    color: var(--ink-600);
    border-radius: var(--r-xs);
    border: none;
    background: transparent;
    cursor: pointer;
    /* a11y : plancher cible tactile 24×24px (Phase A brief 2026-06-12) */
    min-width: 24px;
    min-height: 24px;
    transition: color var(--d-fast) var(--ease-out),
                background var(--d-fast) var(--ease-out),
                box-shadow var(--d-fast);
    white-space: nowrap;
}
.period-btn:hover { color: var(--ink-900); background: var(--surface-soft); }
.period-btn.active,
.period-btn[aria-pressed="true"] {
    background: var(--surface-strong);
    color: var(--cyan-deeper);
    box-shadow: inset 0 0 0 1px rgba(11,181,197,0.24);
}
:root[data-theme="dark"] .period-btn.active,
:root[data-theme="dark"] .period-btn[aria-pressed="true"] {
    color: var(--cyan-light);
    background: rgba(11,181,197,0.18);
}
/* Variante accent billing (orange) */
.period-bar--billing .period-btn.active,
.period-bar--billing .period-btn[aria-pressed="true"] {
    background: #EA580C;
    color: #fff;
    border-color: #C2410C;
    box-shadow: none;
}
/* Variante accent LLM (vert) */
.period-bar--llm .period-btn.active,
.period-bar--llm .period-btn[aria-pressed="true"] {
    background: var(--surface-strong);
    color: var(--success);
    box-shadow: inset 0 0 0 1px rgba(16,185,129,0.26);
}
/* Variante select (période via <select>) */
.period-select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' stroke='%237685A0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
    width: auto;
    min-width: 130px;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-700);
    background-color: var(--surface-strong);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-sm);
    padding: 8px 32px 8px 12px;
    transition: border-color var(--d-fast), background var(--d-fast);
}
.period-select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--ring); }
:root[data-theme="dark"] .period-select { background-color: rgba(12,19,38,0.7); border-color: rgba(255,255,255,0.1); color: var(--ink-700); }

/* [hidden] override obligatoire */
.period-bar[hidden] { display: none !important; }

/* =====================================================
   COMPOSANT UNIFIÉ — Filtre par statut (§5 brief)
   Remplace : #pending-filter select, name=mstatus radios,
              .conv-status-cb checkboxes, #anom-phase select.
   Deux modes : select simple (.status-select) ou
                popover multi-choix (.status-multi).
   ===================================================== */

/* Mode select simple */
.status-select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' stroke='%237685A0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding: 8px 32px 8px 12px;
    cursor: pointer;
    width: auto;
    min-width: 190px;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-700);
    background-color: var(--surface-strong);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-sm);
    transition: border-color var(--d-fast), background var(--d-fast);
}
.status-select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--ring); }
:root[data-theme="dark"] .status-select { background-color: rgba(12,19,38,0.7); border-color: rgba(255,255,255,0.1); }
.status-select[hidden] { display: none !important; }

/* Mode multi-choix (popover <details>) */
.status-multi {
    position: relative;
}
.status-multi-summary {
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-700);
    padding: 9px 12px;
    border: 1px solid var(--border-hi);
    background: var(--surface-strong);
    border-radius: var(--r-sm);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: border-color var(--d-fast), background var(--d-fast);
}
.status-multi-summary::-webkit-details-marker { display: none; }
.status-multi[open] .status-multi-summary {
    border-color: rgba(11,181,197,0.35);
    background: var(--surface);
}
.status-multi-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--surface-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-pop);
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
    z-index: 50;
}
.status-multi-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-700);
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--d-fast), color var(--d-fast);
}
.status-multi-opt:hover { background: var(--surface-soft); color: var(--ink-900); }
/* Fix prod-ready 2026-07-19 : --ink-700 redéfini en sombre reste trop clair sur le
   fond du popover — remède éprouvé (cf. .topbar-btn-label, ticket 02 item 1). */
:root[data-theme="dark"] .status-multi-opt,
:root[data-theme="dark"] .status-multi-summary { color: var(--ink-600); }
.status-multi-opt input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--ink-300);
    background: var(--surface-strong);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--d-fast), border-color var(--d-fast);
}
.status-multi-opt input[type="checkbox"]:checked {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
}
.status-multi-opt input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    position: relative;
    left: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* Badge statut FR — classes sémantiques */
.status-fr {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}
.status-fr--answered   { background: rgba(16,185,129,0.12);  color: var(--success); border-color: rgba(16,185,129,0.35); }
.status-fr--clarify    { background: rgba(245,158,11,0.12);  color: var(--warn); border-color: rgba(245,158,11,0.35); }
.status-fr--fallback   { background: rgba(239,68,68,0.10);   color: #B91C1C; border-color: rgba(239,68,68,0.3); }
.status-fr--escalate   { background: rgba(168,85,247,0.12);  color: #7E22CE; border-color: rgba(168,85,247,0.35); }
.status-fr--commercial { background: rgba(59,130,246,0.12);  color: var(--info); border-color: rgba(59,130,246,0.3); }
/* fusion ticket 23 : valeur 'chat' absente de la taxonomie status-fr d'origine —
   couleurs reprises EXACTEMENT de l'ex-.conv-status--chat (aucun écart). */
.status-fr--chat       { background: rgba(107,120,140,0.13); color: var(--ink-600); border-color: rgba(107,120,140,0.4); }
/* Audit 2026-07-19 : « anomaly » sortait de la taxonomie (chip brut sans couleur).
   Accent orange famille unpriced — aucune nouvelle teinte. */
.status-fr--anomaly    { background: rgba(251,146,60,0.14); color: #C2410C; border-color: rgba(251,146,60,0.4); }
:root[data-theme="dark"] .status-fr--anomaly { color: #FDBA74; }
.status-fr--eliciting  { background: rgba(107,120,140,0.10); color: var(--ink-600); border-color: rgba(107,120,140,0.22); }
.status-fr--filed      { background: rgba(16,185,129,0.10);  color: var(--success); border-color: rgba(16,185,129,0.28); }
.status-fr--ready      { background: rgba(11,181,197,0.12);  color: var(--cyan-deeper); border-color: rgba(11,181,197,0.3); }
.status-fr--cancelled  { background: rgba(107,120,140,0.06); color: var(--ink-500); border-color: rgba(107,120,140,0.18); }
.status-fr--accepted   { background: rgba(16,185,129,0.12);  color: var(--success); border-color: rgba(16,185,129,0.3); }
.status-fr--classified { background: rgba(167,139,250,0.12); color: #6D28D9; border-color: rgba(167,139,250,0.3); }
:root[data-theme="dark"] .status-fr--answered   { color: var(--success-dark-text); }
:root[data-theme="dark"] .status-fr--clarify    { color: #FCD34D; }
:root[data-theme="dark"] .status-fr--fallback   { color: #FCA5A5; }
:root[data-theme="dark"] .status-fr--escalate   { color: #D8B4FE; }
:root[data-theme="dark"] .status-fr--commercial { color: #93C5FD; }
:root[data-theme="dark"] .status-fr--classified { color: var(--violet-soft); }
:root[data-theme="dark"] .status-fr--ready      { color: var(--cyan-light); }
/* --filed / --accepted : overrides dark manquants ajoutés ici (Lot B vague 2,
   2026-07-18, ticket 15 pt.6) — même couleur claire (#047857) que --answered,
   qui a déjà son override ; même token de destination. Fusion actée (ticket 23,
   décision Roy 2026-07-17) : la famille status-fr--* est désormais ÉMISE par
   statusFrBadge (app-core.js) pour les statuts de conversation (answered/
   clarify/fallback/escalate/commercial/chat) — conv-status--* = alias legacy. */
:root[data-theme="dark"] .status-fr--filed      { color: var(--success-dark-text); }
:root[data-theme="dark"] .status-fr--accepted   { color: var(--success-dark-text); }

.pbl-avatar {
    background: linear-gradient(135deg, var(--violet) 0%, var(--pbl-accent) 100%);
    color: #fff;
    font-size: var(--fs-11);
    font-weight: 700;
}
.pbl-chat .vackelys-chat__header {
    background:
        radial-gradient(circle at 88% -20%, rgba(167,139,250,.32), transparent 40%),
        linear-gradient(145deg, var(--vk-navy) 0%, #1A0A40 60%, var(--pbl-accent) 100%);
}
@media (prefers-reduced-motion: reduce) {
    .pbl-upload-zone,
    .pbl-accord-chevron,
    .pbl-attach-btn { transition: none; animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   ICÔNES SVG INLINE (sprite #ico-*) — dimensionnement OBLIGATOIRE
   Un <svg> sans width ni viewBox rend à 300×150 px (taille par défaut
   de la spec SVG) : sans ces règles, chaque icône explose la mise en
   page (régression constatée en prod le 2026-06-12).
   ════════════════════════════════════════════════════════════════════ */
svg.ico {
    width: 1.1em;
    height: 1.1em;
    flex: none;
    display: inline-block;
    vertical-align: -0.2em;
}
.sb-item svg.ico { width: 18px; height: 18px; }

/* Titres de section de la Vue d'ensemble (manquaient au CSS) */
.ov-section-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-500);
    margin: var(--sp-5, 20px) 0 var(--sp-3, 12px);
}
.ov-section-title svg.ico { width: 18px; height: 18px; color: var(--cyan); }
.ov-grid--usage { grid-template-columns: repeat(3, 1fr); }

/* ─── Carte Volume de conversations ─────────────────────────────── */
.ov-volume-card {
    background: var(--card);
    border: 1px solid var(--border-hi);
    border-radius: 12px;
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.ov-volume-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.ov-volume-title-group {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    flex-shrink: 0;
}
.ov-volume-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--ink-900);
}
:root[data-theme="dark"] .ov-volume-title { color: var(--ink-100); }
.ov-vol-kpi {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--cyan-deeper);
    background: var(--cyan-100);
    border-radius: 6px;
    padding: 2px 8px;
}
.ov-volume-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
/* Toggle métrique Conversations / Messages */
.ov-vol-metric-toggle {
    display: flex;
    background: var(--surface-soft);
    border-radius: var(--r-xs);
    padding: 2px;
    gap: 2px;
}
.ov-vol-metric-btn {
    font-size: var(--fs-xs);
    font-weight: 500;
    /* Fix prod-ready 2026-07-19 : 4px 10px → ~25px de haut, sous le plancher tactile
       24px — aligné sur .vk-period-btn (7px 12px) juste à côté. */
    padding: 7px 12px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--ink-500);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.ov-vol-metric-btn.active {
    background: var(--card);
    color: var(--cyan-dark);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.ov-vol-metric-btn:hover:not(.active) {
    background: var(--cyan-50);
    color: var(--ink-700);
}
:root[data-theme="dark"] .ov-vol-metric-btn.active {
    background: var(--surface-strong);
    color: var(--cyan-light);
}
/* Zone graphique SVG */
.ov-volume-chart {
    position: relative;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-900);
}
:root[data-theme="dark"] .ov-volume-chart { color: var(--ink-900); }
.ov-volume-chart svg { display: block; width: 100%; }
/* Barres — highlight au focus/survol */
.ov-volume-chart .vol-bar { outline: none; transition: filter 0.1s; }
.ov-volume-chart .vol-bar:hover,
.ov-volume-chart .vol-bar:focus { filter: brightness(1.18) drop-shadow(0 2px 4px rgba(12,192,223,0.3)); }
/* Tooltip */
.ov-vol-tooltip {
    position: absolute;
    background: var(--surface-strong);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-xs);
    padding: 8px 12px;
    font-size: var(--fs-xs);
    color: var(--ink-900);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    pointer-events: none;
    z-index: 20;
    white-space: nowrap;
    max-width: 220px;
}
.ov-vol-tooltip[hidden] { display: none !important; }
:root[data-theme="dark"] .ov-vol-tooltip { color: var(--ink-900); }
/* Barre de période dédiée à la carte volume */
.ov-vol-period { /* hérite vk-period-bar */ }
/* Override hidden pour drawers/tooltips dans la carte volume */
.ov-volume-card [hidden] { display: none !important; }

.ov-loading {
    padding: var(--sp-4, 16px);
    color: var(--ink-500);
    font-size: var(--fs-sm);
}

/* ── Vue d'ensemble : items « Dernières conversations » (mises en avant escalades) ── */
.ov-conv-item {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--card);
    box-shadow: var(--sh-card);
    display: flex; flex-direction: column; gap: var(--sp-2);
    cursor: pointer;
    transition: transform var(--d-fast), border-color var(--d-fast);
}
.ov-conv-item:hover, .ov-conv-item:focus-visible {
    transform: translateY(-1px);
    border-color: var(--cyan);
    outline: none;
}
.ov-conv-item--escalate { border-color: var(--danger); }
.ov-conv-escalate-banner {
    display: flex; align-items: center; gap: var(--sp-2);
    color: var(--danger);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ov-conv-head {
    display: flex; align-items: center; gap: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--ink-500);
}
.ov-conv-date { margin-left: auto; white-space: nowrap; }
.ov-conv-q { font-size: var(--fs-sm); color: var(--ink-700); }
.ov-convs-empty {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-4, 16px);
    color: var(--ink-500);
    font-size: var(--fs-sm);
}

/* =====================================================
   CORRECTIFS AUDIT VISUEL v3.4 — 2026-06-12
   TOP 10 HIGH + findings MEDIUM/LOW à coût faible
   ===================================================== */

/* ── (1) .ov-volume-title illisible en thème sombre ── */
/* La règle précédente utilisait --ink-100 (= #1B2640 en dark = couleur sombre).
   Correction : utiliser --ink-900 qui est clair en dark (#ECF1F8) et sombre en light (#0B1220). */
:root[data-theme="dark"] .ov-volume-title { color: var(--ink-900); }

/* ── (2) .ov-bottom hors viewport — compacter la Vue d'ensemble ── */
/* Réduire la min-height du graphique de 180 → 140px */
.ov-volume-chart { min-height: 140px; }
/* Réduire la hauteur des cartes KPI Q&A (ov-card) en limitant leur padding */
.ov-card {
    padding: var(--sp-3) var(--sp-4);
}
.ov-value { margin-top: var(--sp-2); }

/* ── (3) .conv-min-tokens plafonné — toolbar Conversations ── */
.conv-min-tokens { width: auto; max-width: 140px; }

/* ── (4) Toolbars — contrôles plafonnés max-width ~220px ── */
/* Anomalies toolbar */
.anom-toolbar select,
.anom-toolbar input:not([type="search"]),
#anom-phase,
#anom-org { max-width: 220px; flex: 0 0 auto; }
#anom-org { max-width: 220px; }
/* Mails toolbar */
#mstatus-filter { max-width: 220px; flex: 0 0 auto; }
/* Conversations toolbar */
.conv-sort { max-width: 180px; flex: 0 0 auto; }
/* Empêcher le select/input de s'étirer */
.conv-toolbar .vk-select,
.conv-toolbar select,
.anom-toolbar .vk-select { max-width: 220px; flex: 0 0 auto; }

/* ── (5) .fd-pane — déjà corrigé (max-width + margin auto) ── */
/* Vérifié : .fd-pane { max-width: 900px; margin: 0 auto } est déjà en place.
   Ajout d'une sécurité pour éviter tout débordement résiduel. */
.fd-pane { width: 100%; box-sizing: border-box; }

/* ── (6) .sb-item actif — fond visible dans les deux thèmes ── */
/* Le gradient color-mix actuel est transparent sur fond clair.
   On ajoute un fond solide minimal pour les deux thèmes. */
.sb-item[aria-current="page"] {
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--tab-c2, var(--cyan)) 28%, transparent),
        color-mix(in oklab, var(--tab-c2, var(--cyan)) 16%, transparent));
}
/* Thème clair : le fond gradient sur fond blanc est invisible → fond plus opaque */
:root[data-theme="light"] .sb-item[aria-current="page"] {
    background: color-mix(in oklab, var(--tab-c2, var(--cyan)) 15%, white);
    color: var(--tab-c2, var(--cyan));
}
:root[data-theme="light"] .sb-item:hover {
    background: color-mix(in oklab, var(--tab-c2, var(--cyan)) 8%, white);
    color: var(--ink-800);
}

/* ── (7) Thème clair — sidebar fond différencié + contrastes AA ── */
/* La sidebar est forcée en dark même en thème clair.
   On lui donne un fond clair mais distinct du page-bg (#F8FAFC). */
:root[data-theme="light"] .sidebar {
    background:
        radial-gradient(ellipse 280px 180px at 50% -5%, rgba(4,107,210,0.06), transparent 70%),
        #EDF1F7;
    box-shadow: inset -1px 0 0 rgba(4,107,210,0.12);
    /* Texte sombre pour le contraste ≥ 4.5:1 */
    --sb-text:    var(--ink-600);
    --sb-text-hi: var(--ink-900);
    --sb-hover:   rgba(4,107,210,0.07);
}
/* Section labels lisibles en clair */
:root[data-theme="light"] .sb-section-label { color: rgba(75,86,104,0.65); }
/* Status footer */
:root[data-theme="light"] .sb-status-text { color: var(--ink-700); }
:root[data-theme="light"] .sb-status-sub  { color: var(--ink-500); }
/* Thème-toggle icônes */
:root[data-theme="light"] .sb-theme-toggle { color: var(--ink-700); }
/* Fix prod-ready 2026-07-19 : .sb-badge oublié par le fix sidebar claire ci-dessus —
   --cyan-light pensé pour fond sombre, illisible sur #EDF1F7. */
:root[data-theme="light"] .sb-badge { color: var(--cyan-deeper); background: rgba(4,107,210,0.12); }

/* ── (8) Composant erreur réseau unifié ── */
/* Classe .net-error : icône + couleur danger + centré.
   Distinct de l'état vide (qui utilise .qa-empty / .billing-empty).
   Appliqué via JS sur : #llm-breakdown tbody, #billing-table-wrap, .anom-empty (variante erreur). */
.net-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: 48px 24px;
    color: var(--danger);
    font-size: var(--fs-base);
    font-weight: 500;
    text-align: center;
}
.net-error svg.ico { width: 32px; height: 32px; color: var(--danger); opacity: 0.85; }
.net-error-title { font-size: var(--fs-md); font-weight: 600; color: var(--danger); }
.net-error-sub { font-size: var(--fs-sm); color: var(--ink-500); max-width: 40ch; }
/* Version en-ligne pour les cellules <td> */
td .net-error { padding: 24px 12px; }

/* ── (9) .vk-period-btn.active — fond actif visible ── */
/* La barre de volume (#ov-vol-period-bar) utilise la classe vk-period-btn (non vk-period-bar/period-bar).
   renderPeriodBar() génère des period-btn dans les autres barres.
   On aligne les styles : vk-period-btn hérite de period-btn. */
.vk-period-bar {
    display: inline-flex;
    gap: 4px;
    background: var(--surface);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
    padding: 4px;
    box-shadow: var(--sh-xs);
    flex-wrap: wrap;
}
.vk-period-btn {
    padding: 7px 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
    font-family: var(--font-ui);
    color: var(--ink-600);
    border-radius: var(--r-xs);
    border: none;
    background: transparent;
    cursor: pointer;
    /* a11y : plancher cible tactile 24×24px (Phase A brief 2026-06-12) */
    min-width: 24px;
    min-height: 24px;
    transition: color var(--d-fast) var(--ease-out),
                background var(--d-fast) var(--ease-out),
                box-shadow var(--d-fast);
    white-space: nowrap;
}
.vk-period-btn:hover { color: var(--ink-900); background: var(--surface-soft); }
.vk-period-btn.active,
.vk-period-btn[aria-pressed="true"] {
    background: var(--surface-strong);
    color: var(--cyan-deeper);
    box-shadow: inset 0 0 0 1px rgba(11,181,197,0.24);
}
:root[data-theme="dark"] .vk-period-btn.active,
:root[data-theme="dark"] .vk-period-btn[aria-pressed="true"] {
    color: var(--cyan-light);
    background: rgba(11,181,197,0.18);
}
/* [hidden] override */
.vk-period-bar[hidden] { display: none !important; }

/* ── (10) Facturation — KPIs placeholder couleur neutre + fond card visible ── */
/* Le .billing-kpi-value montre — en orange-rouge avant chargement.
   Fix : couleur neutre par défaut, orange activé via classe JS .billing-kpis--loaded. */
.billing-kpi-value { color: var(--ink-500); }
.billing-kpis--loaded .billing-kpi-value { color: #C2410C; }
:root[data-theme="dark"] .billing-kpis--loaded .billing-kpi-value { color: #FB923C; }
/* Fond de card plus visible */
.billing-kpi {
    background: linear-gradient(155deg, rgba(234,88,12,0.13), rgba(234,88,12,0.05));
    border: 1px solid rgba(234,88,12,0.28);
}
:root[data-theme="dark"] .billing-kpi {
    background: linear-gradient(155deg, rgba(234,88,12,0.14), rgba(234,88,12,0.04));
    border: 1px solid rgba(234,88,12,0.32);
}

/* ─── Findings MEDIUM/LOW à coût faible ─────────────────────────── */

/* Vue d'ensemble : .ov-block-title espace-between déjà en place (alignement titre + "Voir tout") */
/* Vérification : .ov-block-title { display:flex; align-items:center; justify-content:space-between } — OK */

/* E-mails : respiration .mails-subtabs */
.mails-subtabs { padding: 8px 0; }

/* E-mails : #attempts-loadmore initialement caché via attribut hidden dans le HTML */
/* La règle [hidden] générique + #attempts-loadmore[hidden] couvrent le cas */

/* Anomalies : .anom-count rendu visible quand peuplé */
.anom-count:not(:empty) {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-500);
    background: var(--surface);
    border: 1px solid var(--border-hi);
    border-radius: 999px;
    padding: 2px 10px;
}

/* Chat public : border-bottom sur .vackelys-chat__header */
.vackelys-chat__header { border-bottom: 1px solid var(--border-hi); }

/* Sidebar footer : taille min 11.5px */
.sb-footer { font-size: var(--fs-xs); }

/* Modales : padding-bottom de #addModal */
#addModal .modal-body,
#addModal .modal-content { padding-bottom: var(--sp-6); }

/* Q&A : bouton Indexer — fond léger */
#qa-submit { background: rgba(4,107,210,0.15); }
#qa-submit:hover { background: rgba(4,107,210,0.22); }

/* [hidden] override global pour les conteneurs flex/grid pilotés par hidden */
/* Règle de sécurité : tout élément qui pourrait avoir un display flex/grid via CSS
   mais est piloté par l'attribut hidden doit être none. Ajouts préventifs : */
#conv-loadmore[hidden] { display: none !important; }
#attempts-loadmore[hidden] { display: none !important; }
.billing-kpis[hidden] { display: none !important; }
#billing-table-wrap[hidden] { display: none !important; }

/* =====================================================
   GARDE-FOUS [hidden] — OVERLAYS CORE-OVERLAY (Phase A)
   Coordination avec le composant core/overlay.js.
   Tout overlay/modal/drawer piloté via openOverlay/closeOverlay
   par le nouveau système unifié (dialog natif ou trapFocus)
   doit être listé ici pour que l'attribut [hidden] ne soit
   jamais écrasé par un display:flex|grid hérité du CSS.
   ===================================================== */
/* dialog natif (<dialog>) — ne s'affiche que via showModal() / close() ;
   [hidden] supplémentaire en sécurité si JS le pose avant showModal */
dialog[hidden] { display: none !important; }

/* Modaux existants migrés vers core-overlay */
#deleteModal[hidden]              { display: none !important; }
#reindexConfirmModal[hidden]      { display: none !important; }
#llmPricingModal[hidden]          { display: none !important; }
#addModal[hidden]                 { display: none !important; }
#new-filter-modal[hidden]         { display: none !important; }
.mail-detail-modal[hidden]        { display: none !important; }
.conv-confirm-modal[hidden]       { display: none !important; }
/* Modal confirmation rejet brouillon forum (Phase A Socle 2026-06-12) */
#fd-reject-confirm-modal[hidden]  { display: none !important; }

/* Backdrops associés aux modaux */
.modal-overlay[hidden]       { display: none !important; }
.mmodal[hidden]              { display: none !important; }
.conv-modal-backdrop[hidden] { display: none !important; }

/* Drawers migrés — garde-fous déjà présents plus haut, rappel ici pour cohérence doc */
/* .billing-drawer[hidden], .billing-drawer-backdrop[hidden] → déjà couverts ligne ~206 */
/* .conv-drawer[hidden], .conv-drawer-backdrop[hidden]       → déjà couverts ligne ~206 */
/* .anom-drawer[hidden], .anom-drawer-backdrop[hidden]       → déjà couverts ligne ~206 */

/* Zone de focus trap visible (si le composant overlay en ajoute une) */
.overlay-focus-guard[hidden] { display: none !important; }

/* =====================================================
   VAGUE 1 — Dense-row + Inline accordion
   Partagé par tabs/pending.js, tabs/library.js,
   tabs/conversations.js (refonte 2026-06-13)
   ===================================================== */

/* Conteneur global de la table dense */
.dense-wrap {
    background: var(--card);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-card);
}

/* En-tête de colonnes */
.dense-head {
    display: grid;
    gap: var(--sp-3);
    padding: 7px var(--sp-4);
    background: var(--surface-soft);
    border-bottom: 1px solid var(--hairline);
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-400);
}
/* Fix prod-ready 2026-07-19 : en-tête de colonne triable — zone de clic élargie
   (padding compensé par une marge négative égale) + feedback interactif léger. */
.dh-sort {
    padding: 6px 4px;
    margin: -6px -4px;
    cursor: pointer;
    border-radius: 4px;
}
.dh-sort:hover,
.dh-sort:focus-visible {
    background: var(--surface-soft);
}

/* Ligne dense — button reset + grid */
.dense-row {
    display: grid;
    gap: var(--sp-3);
    padding: 9px var(--sp-4);
    min-height: 40px;
    align-items: center;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink-900);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background var(--d-fast), opacity var(--d-slow), transform var(--d-slow);
}
.dense-row:last-of-type { border-bottom: none; }
.dense-row:hover { background: var(--surface-soft); }
.dense-row[aria-expanded="true"] {
    background: rgba(4,107,210,0.05);
    border-bottom: none;
}
:root[data-theme="dark"] .dense-row[aria-expanded="true"] {
    background: rgba(4,107,210,0.09);
}
.dense-row:focus-visible { outline-offset: -2px; }
/* UX-12 (ticket 08 item 2) : retrait ~300ms, gated par le bloc global
   prefers-reduced-motion (§26) — s'inspire de l'ancienne qa-card.done
   (supprimée, Lot B vague 2, 2026-07-18). Classe déjà posée par le JS
   (app-core.js/overview.js/library.js), règle manquante. */
.dense-row.done { opacity: 0.5; transform: scale(0.985); pointer-events: none; }

/* Cellules des lignes denses */
.dr-check  { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dr-id     {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    background: rgba(107,120,140,0.09);
    padding: 2px 6px;
    border-radius: 5px;
    color: var(--ink-500);
    display: inline-block;
    white-space: nowrap;
}
.dr-question {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--ink-800);
}
.dr-meta {
    font-size: var(--fs-2xs);
    color: var(--ink-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dr-date { font-size: var(--fs-2xs); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ticket 02 item 7 : .dr-from (mails) n'avait aucune règle → texte long non tronqué,
   déborde de sa colonne à 1080px. */
.dr-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* I-12 (ticket 15 item 3) : fusion des 2 déclarations .dr-caret (la 2e,
   "caret reset (button semantics)", vivait dupliquée en VAGUE 2 ~l.5043). */
.dr-caret {
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-400);
    transition: transform var(--d-fast) var(--ease-out), color var(--d-fast);
    flex-shrink: 0;
    margin-left: auto;
    background: none; border: none;
    cursor: pointer; padding: 0;
    position: relative;
}
/* Fix prod-ready 2026-07-19 : zone de clic élargie à ~32px — technique padding+marge
   négative écartée ici (.dr-caret vit dans des pistes de grille de largeur variable
   selon la table : 18px exact en conversations/anomalies, 24-40px avec marge en
   mails/anomalies ; élargir la boîte aurait redistribué margin-left:auto et décalé
   l'icône de plusieurs px, jusqu'à ~22px sur la piste 40px). Pseudo-élément invisible
   en overlay à la place (même recette que .fd-check::before, UX-11). */
.dr-caret::before { content: ''; position: absolute; inset: -7px; pointer-events: auto; }
.dense-row[aria-expanded="true"] .dr-caret {
    transform: rotate(180deg);
    color: var(--brand-blue);
}
@media (prefers-reduced-motion: reduce) {
    .dr-caret { transition: none; }
}
.dr-status { display: flex; align-items: center; }

/* Auteur (ADR 0032) — colonne liste Conversations + piste Vue d'ensemble
   (.dr-author-org réutilisée par .ov-conv-author, cf. tabs/overview.js).
   Contrat visuel : mockups/2026-07-30-auteur-messages.html. */
.dr-author { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-author-org { color: var(--ink-500); font-weight: 400; }
.dr-author--muted { color: var(--ink-400); font-weight: 400; }

/* Panneau de détail inline (accordéon).
   HISTORIQUE des pièges :
   - v5.5 : max-height:1200px + overflow:hidden → COUPAIT les fils longs.
   - v5.6 : grid-template-rows 0fr↔1fr → OK pour les bulles conversation, mais se
     résolvait à ~36px sur le détail « À valider » (contenu en textareas/flex)
     → question + réponse clippées à un filet invisible.
   FIX : reveal par display + fondu. Hauteur NATURELLE, JAMAIS de clip, quel que
   soit le contenu (bulles, textareas, fils Pablo_Back). On perd l'anim de
   hauteur au profit d'un fondu/translation — correctness > animation. */
.inline-detail {
    display: none;
    border-left: 3px solid var(--brand-blue);
    background: var(--surface-soft);
    border-bottom: 1px solid var(--hairline);
}
.inline-detail.open {
    display: block;
    animation: inline-detail-reveal 240ms var(--ease-out);
}
@keyframes inline-detail-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .inline-detail.open { animation: none; }
}

/* Contenu intérieur du panneau de détail (hauteur naturelle, aucun clip). */
.inline-detail-inner {
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* Bloc question + contexte */
.id-q-block {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ink-800);
    line-height: 1.5;
}
.id-q-label {
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--ink-400);
    margin-bottom: 4px;
}
.id-ctx-block {
    font-size: var(--fs-sm);
    color: var(--ink-600);
    line-height: 1.55;
}

/* Similaires dans la base — check-similar au dépliage (issue 18, F-9).
   Contrat visuel : mockups/2026-07-17-check-similar-pending.html (ADR 0021).
   Rempli par pending.js:_pendingLoadSimilar dans #psim-<id> — aucun bloc si
   0 similaire ≥60 % (zéro bruit), bandeau .sim-dup si le meilleur ≥85 %.
   Préfixe .sim-* dédié (cf. Anti-Patterns #14 — namespacer les classes SPA). */
.sim-slot:empty { display: none; } /* évite un gap flex parasite quand vide */
.sim {
    border: 1px solid rgba(4,89,172,.18);
    background: rgba(12,192,223,.045);
    border-radius: var(--r-xs);
    padding: 10px 12px;
}
.sim-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cyan-deeper);
    margin-bottom: var(--sp-2);
}
.sim-head svg { flex: none; }
.sim-dup {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    background: rgba(156,71,8,.08);
    border: 1px solid rgba(156,71,8,.25);
    border-radius: var(--r-xs); /* ticket 23 : ex-7px, ±1px invisible */
    padding: 7px 10px;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--warn);
    font-weight: 600;
}
.sim-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-radius: 6px;
    font-size: var(--fs-sm);
}
.sim-item + .sim-item { border-top: 1px dashed rgba(75,86,104,.14); }
.score {
    flex: none;
    min-width: 44px;
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    background: rgba(75,86,104,.10);
    color: var(--ink-600);
}
.score--hi { background: rgba(156,71,8,.14); color: var(--warn); }
.sim-q {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-700);
}
.sim-link {
    flex: none;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--cyan-deeper);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
}
.sim-link:hover, .sim-link:focus-visible { text-decoration: underline; }
.sim-loading {
    display: flex;
    align-items: center;
    font-size: var(--fs-xs);
    color: var(--ink-400);
    font-style: italic;
}
.spin {
    display: inline-block;
    width: 10px; height: 10px;
    border: 2px solid rgba(4,89,172,.25);
    border-top-color: var(--cyan-deeper);
    border-radius: 50%;
    vertical-align: -1px;
    margin-right: 6px;
    animation: sim-spin 0.9s linear infinite;
}
@keyframes sim-spin { to { transform: rotate(360deg); } }
/* prefers-reduced-motion : déjà couvert par la règle globale *,*::before,*::after
   (ligne ~3143) qui force animation-duration:.01ms !important — pas de règle
   dédiée nécessaire ici. */
:root[data-theme="dark"] .sim {
    border-color: rgba(12,192,223,.22);
    background: rgba(12,192,223,.06);
}
:root[data-theme="dark"] .sim-head { color: var(--cyan); }
:root[data-theme="dark"] .sim-dup {
    background: rgba(245,158,11,.10);
    border-color: rgba(245,158,11,.30);
    color: #FBBF24;
}
:root[data-theme="dark"] .score { background: rgba(122,138,160,.16); color: var(--sb-text); }
:root[data-theme="dark"] .score--hi { background: rgba(245,158,11,.16); color: #FBBF24; }
:root[data-theme="dark"] .sim-q { color: #C6D0DE; }
:root[data-theme="dark"] .sim-link { color: var(--cyan); }
:root[data-theme="dark"] .sim-item + .sim-item { border-top-color: rgba(122,138,160,.18); }

/* Bloc réponse / édition */
.id-answer-block {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.id-answer-label {
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--ink-400);
}

/* Réponse rendue en markdown */
.md-rendered {
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--ink-800);
}
.md-rendered p { margin-bottom: var(--sp-2); }
.md-rendered p:last-child { margin-bottom: 0; }
.md-rendered strong { font-weight: 700; color: var(--ink-900); }
.md-rendered ul, .md-rendered ol { padding-left: var(--sp-5); margin-bottom: var(--sp-2); }
.md-rendered li { margin-bottom: 4px; }
.md-rendered code {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    background: rgba(107,120,140,0.12);
    padding: 1px 5px;
    border-radius: 4px;
}

/* Textarea réponse (pending + library edit) */
.id-textarea {
    width: 100%;
    min-height: 120px;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    color: var(--ink-900);
    background: var(--surface-strong);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-sm);
    padding: var(--sp-3);
    resize: vertical;
    line-height: 1.55;
    transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.id-textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px var(--ring);
}
.id-edit-input {
    resize: vertical;
    min-height: 100px;
}

/* Instructions agent (fond ambre) */
.id-inst-block {
    background: rgba(217,122,6,0.04);
    border: 1px solid rgba(217,122,6,0.20);
    border-radius: var(--r-sm);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--ink-700);
    line-height: 1.55;
}
.id-inst-label {
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: #B45309;
    margin-bottom: 4px;
}
:root[data-theme="dark"] .id-inst-block {
    background: rgba(217,122,6,0.08);
    border-color: rgba(217,122,6,0.30);
}

/* Actions inline (bas du panneau de détail) */
.id-actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--hairline);
}
.id-actions--right {
    margin-left: auto;
    display: flex;
    gap: var(--sp-2);
}

/* Bouton warn (Brouillon) */
.btn-warn {
    color: #fff;
    /* Fix prod-ready 2026-07-19 : les DEUX stops échouaient sur blanc (#F59E0B ≈2.2:1,
       #D97706 ≈3.2:1) — assombris, cohérent avec --warn (#9C4708, ≈6.3:1) déjà créé
       pour ≥4.5:1 ; nouveau stop clair #B25508 ≈5.0:1. */
    background: linear-gradient(135deg, #B25508 0%, #9C4708 100%);
    border-color: rgba(217,119,6,0.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 5px 14px -6px rgba(217,119,6,0.45);
}
.btn-warn:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 9px 20px -7px rgba(217,119,6,0.55);
}

/* toast-region : supprimée ici (Lot B vague 2, 2026-07-18, ticket 15 pt.6) —
   0 usage HTML/JS confirmé (déjà noté « elle-même morte » par l'audit,
   annexe-interface.md I-10). Le #toast réel (index.html) est positionné par
   la règle .toast juste en dessous, indépendamment de ce wrapper. */
.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 12px 16px;
    background: var(--ink-800);
    color: #fff;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 500;
    box-shadow: var(--sh-pop);
    animation: toast-in 200ms var(--ease-out) both;
    min-width: 280px;
}
:root[data-theme="dark"] .toast {
    background: var(--ink-100);
    color: var(--ink-900);
}
.toast.toast--success { border-left: 3px solid var(--success); }
.toast.toast--danger  { border-left: 3px solid var(--danger); }
.toast.toast--warn    { border-left: 3px solid var(--warn); }
.toast-undo {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--brand-cyan);
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    padding: 2px 4px;
    text-decoration: underline;
    white-space: nowrap;
    flex-shrink: 0;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
}

/* Toast [hidden] garde-fou */
.toast[hidden] { display: none !important; }

/* ---- Conversations : bulles chat ---- */
.bubble-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
}
.bubble-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 78%;
}
.bubble-wrapper--user { align-self: flex-end; align-items: flex-end; }
.bubble-wrapper--pablo { align-self: flex-start; align-items: flex-start; }
.bubble-role {
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-400);
    padding: 0 4px;
}
.bubble {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-900);
}
.bubble--user {
    background: rgba(4,107,210,0.08);
    border: 1px solid rgba(4,107,210,0.15);
    border-bottom-right-radius: 4px;
    color: var(--ink-800);
}
.bubble--pablo {
    background: var(--page-bg-warm);
    border: 1px solid var(--border-hi);
    border-bottom-left-radius: 4px;
}
/* Tour sans réponse Pablo (output vide en base) — placeholder discret. */
.bubble--pablo.bubble--noreply {
    background: transparent;
    border: 1px dashed var(--border-hi);
    box-shadow: none;
}
.bubble-noreply { color: var(--ink-400); font-style: italic; }
:root[data-theme="dark"] .bubble--user {
    background: rgba(4,107,210,0.14);
    border-color: rgba(4,107,210,0.25);
}
:root[data-theme="dark"] .bubble--pablo {
    background: rgba(24,33,54,0.72);
}
.bubble-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: 0 4px;
    align-items: center;
}
.bubble-chip {
    font-size: var(--fs-10);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid;
    background: var(--surface-soft);
    color: var(--ink-500);
    border-color: var(--border-hi);
    white-space: nowrap;
}
.bubble-chip--conf-hi  { background: rgba(16,185,129,0.10); color: var(--success); border-color: rgba(16,185,129,0.28); }
.bubble-chip--conf-mid { background: rgba(245,158,11,0.10); color: var(--warn);    border-color: rgba(245,158,11,0.28); }
.bubble-chip--conf-low { background: rgba(239,68,68,0.09);  color: var(--danger);  border-color: rgba(239,68,68,0.25); }
/* Tarif manquant (cost_eur NULL) — palette .chip-unpriced, maquette 2026-07-09 */
.bubble-chip--unpriced { color: #C2410C; background: rgba(251,146,60,0.14); border-color: rgba(234,88,12,0.32); font-weight: 700; cursor: help; }
:root[data-theme="dark"] .bubble-chip--unpriced { color: #FDBA74; }

/* Header Auteur du détail conversation (ADR 0032) — email/nom · org, rôle en
   dim (.anom-dim, déjà existante). Contrat visuel : mockup 2026-07-30, Zone 2. */
.conv-detail-author { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); padding-bottom: var(--sp-2); margin-bottom: var(--sp-1); border-bottom: 1px solid var(--hairline); }
.conv-detail-author-id { font-weight: 700; color: var(--ink-800); }
.conv-detail-author-id--muted { font-weight: 500; color: var(--ink-400); }
.conv-detail-author-org { font-weight: 500; color: var(--ink-500); }

/* Session meta KPI grid */
.session-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    background: var(--surface-soft);
    border-radius: var(--r-sm);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
    border: 1px solid var(--hairline);
}
.session-kpi-label {
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--ink-400);
    margin-bottom: 4px;
}
.session-kpi-value {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink-800);
    /* flex : laisse le chip « Tarif manquant » s'aligner/wrapper (maquette 2026-07-09) */
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

/* Bannière escalade */
.escalade-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: rgba(217,122,6,0.07);
    border: 1px solid rgba(217,122,6,0.25);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--warn);
    font-weight: 600;
    margin-bottom: var(--sp-3);
}
:root[data-theme="dark"] .escalade-banner {
    background: rgba(217,122,6,0.12);
    border-color: rgba(217,122,6,0.35);
    color: var(--warn);
}

/* Conversations : grilles par onglet */
.dense-head--pending,
.dense-row--pending {
    /* Fix 6 : colonne réponse élargie 72px → 90px (badge tronqué) */
    grid-template-columns: 28px 1fr 110px 100px 90px 18px;
}
.dense-head--library,
.dense-row--library {
    grid-template-columns: 60px 1fr 120px 140px 18px;
}
/* 12 colonnes (check, session, question, statut, origine, auteur [ADR 0032],
   messages, tokens, coût, début, dernier message, caret) — colonne « Origine »
   puis « Auteur » ajoutées (Front/Back, puis identité déclarée du message).
   Fix H1 (/diagnose 2026-07-06) : colonne question en minmax() — en grid-template-columns,
   1fr seul retombe à 0 dès que les colonnes fixes (714px + gaps) dépassent la largeur
   dispo (zone morte 640-1150px, fenêtre réelle ~1080px) → texte de la question écrasé. */
.dense-head--conv,
.dense-row--conv {
    grid-template-columns: 40px 100px minmax(140px, 1fr) 110px 70px 170px 90px 70px 56px 80px 80px 18px;
}
/* Fix H1 — breakpoint intermédiaire : la media query existante (1100px, ligne ~3095)
   ne touchait pas cette grille. On masque les colonnes secondaires les moins critiques
   (origine, auteur, messages, tokens, dernier message) et on garde check/session/
   question/statut/coût/début/caret, pour rendre la question réellement lisible sur la
   fenêtre réelle observée (~1080px) sans attendre le palier mobile 768px. ADR 0032 :
   Auteur rejoint ce palier de masquage — colonne la moins critique du lot (arbitrage
   mockup 2026-07-30-auteur-messages.html). */
@media (max-width: 1200px) {
    /* 7 colonnes visibles restantes : check(32) session(90) question(1fr)
       statut(100) coût(56) début(80) caret(18). */
    .dense-head--conv,
    .dense-row--conv {
        grid-template-columns: 32px 90px minmax(140px, 1fr) 100px 56px 80px 18px;
    }
    /* Sélection par position : les 3 colonnes "messages/tokens/coût" partagent
       toutes la classe .dr-meta (cf. conversations.js) donc indiscernables par
       classe seule — on masque origine(5)/auteur(6)/messages(7)/tokens(8)/
       dernier-msg(11) et on garde check(1)/session(2)/question(3)/statut(4)/
       coût(9)/début(10)/caret(12). */
    .dense-head--conv > :nth-child(5),
    .dense-head--conv > :nth-child(6),
    .dense-head--conv > :nth-child(7),
    .dense-head--conv > :nth-child(8),
    .dense-head--conv > :nth-child(11),
    .dense-row--conv > :nth-child(5),
    .dense-row--conv > :nth-child(6),
    .dense-row--conv > :nth-child(7),
    .dense-row--conv > :nth-child(8),
    .dense-row--conv > :nth-child(11) { display: none; }
}

/* Badge origine Front / Back */
.conv-origin {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: var(--fs-xs);
    font-weight: 600;
    border: 1px solid;
    white-space: nowrap;
}
.conv-origin--front {
    background: rgba(59,130,246,0.10);
    color: var(--info);
    border-color: rgba(59,130,246,0.35);
}
.conv-origin--back {
    background: rgba(168,85,247,0.10);
    color: #7E22CE;
    border-color: rgba(168,85,247,0.35);
}
:root[data-theme="dark"] .conv-origin--front { color: #93C5FD; }
:root[data-theme="dark"] .conv-origin--back  { color: #D8B4FE; }

/* Confirm overlay pour suppression (library) */
.confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(7,11,22,0.52);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.confirm-overlay[hidden] { display: none !important; }
.confirm-box {
    background: var(--page-bg-warm);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    box-shadow: var(--sh-pop);
    max-width: 420px;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.confirm-box-title {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--ink-900);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.confirm-box-text {
    font-size: var(--fs-sm);
    color: var(--ink-600);
    line-height: 1.55;
}
.confirm-box-actions {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
}

/* Barre de filtres/toolbar dense (pending) */
.dense-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}
.dense-toolbar-count {
    font-size: var(--fs-sm);
    color: var(--ink-500);
    margin-left: auto;
}

/* Guard [hidden] pour overlays inline (confirm-overlay) */
.inline-confirm-overlay[hidden] { display: none !important; }

/* =====================================================
   VAGUE 2 — Dense-rows variants + Inline-detail components
   2026-06-13
   ===================================================== */

/* ── dense-head column layouts par onglet ───────────────────── */
/* Fix 5 : dense-head--conv unifié dans la section grilles (~l.4729), doublon 5-col supprimé */
.dense-head--anom {
    grid-template-columns: 20px 72px minmax(140px, 1fr) 120px 50px 100px 80px 40px;
}
.dense-head--billing {
    grid-template-columns: 20px minmax(140px, 1fr) 100px 90px 90px 90px 110px;
}
/* Fix I-1 (ticket 06, pattern H1/H2) : zone morte 700-1200px jamais traitée pour
   Anomalies/Facturation (colonnes fixes, pas de minmax() ni de breakpoint intermédiaire) —
   colonne Organisation écrasée à ~145-150px à 1080px (sidebar dépliée). On masque 2
   colonnes secondaires les moins critiques (Module+Tours / Tokens+Dernier log) pour
   rendre la colonne principale lisible, comme le fix H1 l'a fait pour Conversations. */
@media (max-width: 1200px) {
    .dense-head--anom,
    #anom-list .dense-row {
        grid-template-columns: 20px 72px minmax(140px, 1fr) 100px 80px 40px;
    }
    .dense-head--anom > :nth-child(4),
    .dense-head--anom > :nth-child(5),
    #anom-list .dr-module,
    #anom-list .dr-msgs { display: none; }

    .dense-head--billing,
    #billing-table-wrap .dense-row {
        grid-template-columns: 20px minmax(140px, 1fr) 100px 90px 90px;
    }
    .dense-head--billing > :nth-child(5),
    .dense-head--billing > :nth-child(7),
    .dr-tokens, .dr-spacer { display: none; }
}

/* ── dense-row column templates par onglet ──────────────────── */
/* Conversations (overview) */
#overview-conv-box .dense-row,
#ov-recent-convs .dense-row {
    grid-template-columns: 20px 96px 1fr 120px 90px;
}
/* Fix prod-ready 2026-07-19 : l'en-tête héritait des 11 pistes de la vraie table
   Conversations (.dense-head--conv générique) — écart ≈388px avec les 5 pistes
   réelles des lignes ci-dessus. */
#overview-conv-box .dense-head,
#ov-recent-convs .dense-head { grid-template-columns: 20px 96px 1fr 120px 90px; }
/* Anomalies */
#anom-list .dense-row {
    grid-template-columns: 20px 72px minmax(140px, 1fr) 120px 50px 100px 80px 40px;
}
/* Facturation */
#billing-table-wrap .dense-row {
    grid-template-columns: 20px minmax(140px, 1fr) 100px 90px 90px 90px 110px;
}
/* Brouillons forum — ligne cliquable « Auteur — Sujet » + badge sur 1 ligne */
/* I-2 (ticket 06) : plancher minmax() sur la colonne « Auteur — Sujet » (~270px
   restants à 1080px sans plancher). Ticket 02 item 6 : dernier track (date) 78→96px
   (78px trop juste pour ~95px nécessaires, clip sans ellipsis — .dr-date a maintenant
   aussi overflow/ellipsis en filet, cf. règle globale plus haut). */
#fd-list-container .dense-row {
    /* Fix prod-ready 2026-07-19 : plafond de lecture — 1fr seul absorbait tout à 2560px
       (colonne Sujet vide au centre, méta collée à droite). */
    grid-template-columns: 36px 20px minmax(140px, 640px) 120px 128px 96px;
    cursor: pointer;
}
/* I-2 : breakpoint intermédiaire — masque le nom du forum (moins critique que
   Auteur/Sujet/Statut/Date), pas d'en-tête ici (liste sans dense-head). */
@media (max-width: 1150px) {
    #fd-list-container .dense-row {
        grid-template-columns: 36px 20px minmax(140px, 1fr) 128px 96px;
    }
    .dr-forum { display: none; }
}
#fd-list-container .dense-row:hover { background: var(--surface-soft); }
#fd-list-container .dense-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Surbrillance ligne sélectionnée (maquette validée 2026-06-24) */
#fd-list-container .dense-row.is-selected,
#fd-list-container .dense-row:has(.fd-check:checked) { background: rgba(4,107,210,0.06); }
:root[data-theme="dark"] #fd-list-container .dense-row.is-selected,
:root[data-theme="dark"] #fd-list-container .dense-row:has(.fd-check:checked) { background: rgba(12,192,223,0.09); }
/* Auteur en tête de ligne (accent discret) */
.dr-topic-title .dr-fd-author { color: var(--cyan-deeper); font-weight: 700; }
:root[data-theme="dark"] .dr-topic-title .dr-fd-author { color: var(--cyan-light); }

/* Checkbox bulk-reject brouillons forum — design-system (miroir .conv-checkbox/.qa-select) */
.fd-check {
    -webkit-appearance: none;
    appearance: none;
    width: 17px; height: 17px;
    border-radius: 5px;
    border: 1.5px solid var(--ink-300);
    background: var(--surface-strong);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background var(--d-fast), border-color var(--d-fast);
}
.fd-check:hover { border-color: var(--cyan); }
.fd-check:checked { background: var(--info); border-color: var(--info); }
.fd-check:checked::after {
    content: '';
    position: absolute; left: 5px; top: 2px;
    width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.fd-check:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:root[data-theme="dark"] .fd-check { background: rgba(20,28,46,0.6); }
/* UX-11 (ticket 09 item 6) : zone de clic 17px → ~44px effectifs, sans changer
   le rendu (pattern déjà utilisé pour .btn dans build/v1.2.4_patches.css). */
.fd-check::before { content: ''; position: absolute; inset: -13.5px; pointer-events: auto; }

/* ── dense-row anomalies : couleur rouge au hover ──────────── */
#anom-list .dense-row[aria-expanded="true"] {
    background: rgba(224,52,52,0.03);
    border-bottom: none;
}
:root[data-theme="dark"] #anom-list .dense-row[aria-expanded="true"] {
    background: rgba(224,52,52,0.06);
}
#anom-list .dense-row[aria-expanded="true"] .dr-caret {
    color: var(--danger, #EF4444);
}
#anom-list .inline-detail {
    border-left-color: #EF4444;
}

/* ── Cellules inline spécifiques vague 2 ───────────────────── */
/* Anomalies */
.dr-phase {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 6px;
    font-size: var(--fs-2xs); font-weight: 600;
    background: rgba(148,163,184,0.15); color: var(--ink-500);
}
.dr-phase--init { background: rgba(16,185,129,0.14); color: var(--success); }
.dr-phase--back { background: rgba(239,68,68,0.14); color: #B91C1C; }
.dr-phase--rag  { background: rgba(59,130,246,0.14); color: var(--info); }

.dr-fp { font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-400); }
.dr-fp--yes { color: #B45309; }
/* Fix prod-ready 2026-07-19 : opacity:0 retiré — le dim de .dr-fp (--ink-400) suffit ;
   le JS pose un tiret « — » dans ce cas, opacity:0 le rendait invisible en plus d'être vide. */
.dr-fp--no  { pointer-events: none; }

/* Facturation */
.bill-cost { color: #C2410C; font-weight: 700; font-family: var(--font-mono); }

.bill-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 6px;
    font-size: var(--fs-2xs); font-weight: 600;
    white-space: nowrap;
}
.bill-badge--paid    { background: rgba(16,185,129,0.14); color: var(--success); border: 1px solid rgba(16,185,129,0.3); }
.bill-badge--pending { background: rgba(245,158,11,0.14); color: var(--warn); border: 1px solid rgba(245,158,11,0.3); }
.bill-badge--draft   { background: rgba(148,163,184,0.14); color: var(--ink-500); border: 1px solid rgba(148,163,184,0.25); }

/* Brouillons forum dense */
.dr-topic {
    display: flex; flex-direction: column; gap: 2px;
    overflow: hidden;
}
.dr-topic-title {
    font-weight: 600; font-size: var(--fs-sm);
    color: var(--ink-800);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dr-topic-excerpt {
    font-size: var(--fs-2xs); color: var(--ink-400);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dr-forum { font-size: var(--fs-2xs); color: var(--ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-badge { display: flex; align-items: center; }

/* Conversations overview dense */
.ov-conv-session-id {
    font-family: var(--font-mono); font-size: var(--fs-2xs);
    color: var(--ink-500); white-space: nowrap;
}
.ov-conv-q {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--fs-sm); color: var(--ink-700);
}
.ov-conv-date { font-size: var(--fs-2xs); color: var(--ink-400); white-space: nowrap; }
/* Auteur (ADR 0032) — empilé au-dessus du badge Origine/date (layout validé
   tel quel par Roy). .dr-author-org (main.css, section Conversations) est
   réutilisée ici, pas dupliquée. */
.ov-conv-author { font-size: var(--fs-2xs); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ov-conv-author--muted { color: var(--ink-400); }

/* Escalade highlight */
.dense-row--escalate {
    background: rgba(239,68,68,0.03);
}
/* I-4 (ticket 02) : cette règle s'appelait auparavant .escalade-banner, en collision
   de nom avec la vraie bannière pleine largeur (ligne ~4848, conversations.js:192) —
   la cascade fusionnait les 2 (hybride ni l'un ni l'autre). Renommée .escalade-tag ;
   overview.js:203 doit être mis à jour pour utiliser cette classe (cf. rapport agent). */
.escalade-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-2xs); font-weight: 600;
    color: #EF4444; white-space: nowrap;
}
/* #EF4444 reste lisible en sombre (non flaggé) ; en clair il tombait à 3.74:1 →
   override dédié ≥4.5:1, même rouge que .dr-phase--back/.mail-badge--error. */
:root:not([data-theme="dark"]) .escalade-tag { color: #B91C1C; }

/* ── inline-detail inner components ────────────────────────── */

/* Grille méta session (overview) */
.session-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.session-meta-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: var(--sp-2) var(--sp-3);
}
.session-meta-label {
    display: block;
    font-size: var(--fs-2xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-400); margin-bottom: 2px;
}
.session-meta-val {
    font-size: var(--fs-sm); font-weight: 600; color: var(--ink-800);
}

/* Bulles chat inline (overview) */
.chat-thread { display: flex; flex-direction: column; gap: var(--sp-2); }
.bubble-wrapper--user { display: flex; justify-content: flex-end; }
.bubble-wrapper--pablo { display: flex; justify-content: flex-start; }
.bubble--user {
    background: var(--brand-blue);
    color: #fff;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md) var(--r-md) 4px var(--r-md);
    font-size: var(--fs-sm); max-width: 85%;
    line-height: 1.5;
}
.bubble--pablo {
    background: var(--surface-strong);
    color: var(--ink-800);
    border: 1px solid var(--border);
    padding: var(--sp-2) var(--sp-3);
    border-radius: 4px var(--r-md) var(--r-md) var(--r-md);
    font-size: var(--fs-sm); max-width: 85%;
    line-height: 1.5;
}

/* Inline-detail anomalies */
.anom-thread { display: flex; flex-direction: column; gap: var(--sp-3); }
.anom-thread-head {
    font-size: var(--fs-xs); color: var(--ink-400);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--hairline);
}
.anom-thread-title {
    font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ink-400);
    margin-bottom: var(--sp-2);
}
.anom-msg { display: flex; flex-direction: column; gap: 2px; }
.anom-msg--user .anom-msg-text { background: var(--surface-strong); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); color: var(--ink-700); }
.anom-msg--pablo .anom-msg-text { background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.12); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); color: var(--ink-800); }
.anom-msg-author { font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-400); text-transform: uppercase; letter-spacing: 0.06em; }
.anom-msg-meta { font-size: var(--fs-2xs); color: var(--ink-400); margin-top: 2px; font-family: var(--font-mono); }
.anom-msg-text { font-size: var(--fs-sm); line-height: 1.5; }

/* Grille fields anomalie state */
.anom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
@media (max-width: 640px) { .anom-grid { grid-template-columns: 1fr; } }
.anom-field { display: flex; flex-direction: column; gap: 2px; }
.anom-field-label {
    font-size: var(--fs-2xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-400);
}
.anom-field-val { font-size: var(--fs-sm); color: var(--ink-800); }

.anom-synthese {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.anom-synth-label {
    font-size: var(--fs-2xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-400); margin-bottom: var(--sp-1);
}
.anom-synth-body { font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.6; }
.anom-state-card { margin-top: var(--sp-3); }
.anom-state-title {
    font-family: var(--font-display); font-weight: 700;
    /* ticket 23 : rôle 2 (titre de carte/section) — ex-fs-base. NB : 2e déf de
       .anom-state-title (1re ~l.3400) ; celle-ci gagne la cascade sur la taille. */
    font-size: var(--fs-md); color: var(--ink-900);
    margin-bottom: var(--sp-2);
}

.anom-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.anom-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-radius: var(--r-xs);
    font-size: var(--fs-xs); font-weight: 600;
    background: var(--surface-soft); border: 1px solid var(--border);
    color: var(--ink-700); cursor: pointer;
    text-decoration: none;
    transition: background var(--d-fast);
}
.anom-btn:hover { background: var(--surface-strong); }
.anom-btn--fp {
    background: rgba(245,158,11,0.12); color: var(--warn);
    border-color: rgba(245,158,11,0.3);
}

/* Inline-detail billing */
.detail-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.detail-section-title {
    /* ticket 23 : rôle 3 (sous-titre/label) — ex-fs-xs. NB : déf ÉCRASÉE par la
       2e déf (~l.5460, section LLM) qui gagne la cascade sur toutes les props. */
    font-size: var(--fs-2xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-400); margin-bottom: var(--sp-1);
}
.detail-grid { display: flex; flex-direction: column; gap: var(--sp-1); }
.detail-row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: var(--fs-sm); padding: 4px 0;
    border-bottom: 1px solid var(--hairline);
}
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--ink-500); font-size: var(--fs-xs); }
.detail-val { font-weight: 600; color: var(--ink-800); }
.detail-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Inline-detail brouillons forum */
.fd-section-label {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-2xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-400); margin-bottom: var(--sp-1);
}
.fd-question-box {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: var(--sp-3);
    font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.6;
    margin-bottom: var(--sp-2);
}
.fd-draft-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: var(--sp-3);
    font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.6;
    min-height: 80px;
}

/* dr-org / dr-plan / etc (billing cells) */
.dr-org { font-weight: 600; color: var(--ink-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-plan { display: flex; align-items: center; }
.dr-sessions, .dr-tokens, .dr-cost { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-600); text-align: right; }
.dr-spacer { font-size: var(--fs-2xs); color: var(--ink-400); white-space: nowrap; }
.dr-org-name { font-weight: 500; color: var(--ink-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-module { font-size: var(--fs-xs); color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-msgs { font-size: var(--fs-xs); color: var(--ink-400); text-align: right; font-family: var(--font-mono); }

/* Responsive dense-rows */
@media (max-width: 640px) {
    /* Fix H1-bis (retour n8n-ux 2026-07-30/31) : cette règle ne déclarait que 4 pistes
       alors que la ligne émet TOUJOURS 5 enfants (caret, session, question, statut/
       escalade, .ov-conv-date-wrap) — déjà vrai AVANT ADR 0032 (le wrapper fusionnait
       déjà origine+date en un seul nœud, cf. commentaire « P0 table-dense-conv-grid-
       mismatch » dans overview.js), donc latent, pas introduit par ce chantier. Sans
       5e piste déclarée, grid-auto-flow bascule ce dernier enfant sur une ligne de
       grille IMPLICITE, colonne 1 (20px, la largeur du caret) — le bloc Auteur/Origine/
       Date empilé (désormais 3 lignes avec ADR 0032) s'y retrouvait écrasé. .ov-conv-date
       est masqué juste en dessous (règle partagée avec le palier Conversations) : la
       piste n'a donc plus que Auteur + badge Origine à contenir, d'où une largeur plus
       modeste (78px) que le 90px desktop (qui includes aussi la date). */
    #overview-conv-box .dense-row,
    #ov-recent-convs .dense-row {
        grid-template-columns: 20px 80px 1fr 90px 78px;
    }
    /* Fix H1-ter (trouvé EN VÉRIFIANT le fix H1-bis ci-dessus, par mesure live —
       getBoundingClientRect, pas de capture d'écran lisible dans cet environnement) :
       le désaccord entre dense-HEAD (jamais réduit, toujours 20+96+120+90=326px fixes)
       et dense-ROW (268px fixes après H1-bis) forçait .dense-wrap à se dimensionner sur
       le PLUS LARGE des deux (l'en-tête) → 466-468px mesurés dans une piste .ov-bottom de
       296px à 320px de large, débordement absorbé silencieusement par le scroll-x du
       .tab-panel (pas de recouvrement visible, mais un débordement horizontal caché du
       widget entier — présent AVANT ADR 0032 aussi, cette règle n'ayant jamais eu de
       palier mobile). Mêmes 5 valeurs que dense-row juste au-dessus, pour un alignement
       colonne à colonne strict entre l'en-tête et les lignes. */
    #overview-conv-box .dense-head,
    #ov-recent-convs .dense-head {
        grid-template-columns: 20px 80px 1fr 90px 78px;
    }
    /* Fix prod-ready 2026-07-19 : palier incomplet (aucun masquage d'en-tête, grille à
       4 pistes) — complété sur le pattern des tables sœurs (pending/library ci-dessous) :
       5 pistes + en-tête et cellules Origine/Messages/Tokens/Coût/Début/Dernier message
       (5 à 10) masqués symétriquement. */
    .dense-head--conv,
    .dense-row--conv { grid-template-columns: 20px 80px 1fr 90px 18px; }
    .dense-head--conv > :nth-child(5),
    .dense-head--conv > :nth-child(6),
    .dense-head--conv > :nth-child(7),
    .dense-head--conv > :nth-child(8),
    .dense-head--conv > :nth-child(9),
    .dense-head--conv > :nth-child(10),
    .dense-head--conv > :nth-child(11),
    .dense-row--conv .dr-origin,
    .dense-row--conv .dr-author,
    .dense-row--conv .dr-meta,
    .dense-row--conv .dr-date { display: none; }
    .ov-conv-date { display: none; }

    #anom-list .dense-row {
        grid-template-columns: 20px 60px 1fr 80px 40px;
    }
    .dense-head--anom { grid-template-columns: 20px 60px 1fr 80px 40px; }
    .dr-msgs, .dr-fp { display: none; }

    #billing-table-wrap .dense-row {
        grid-template-columns: 20px 1fr 90px 90px;
    }
    .dense-head--billing { grid-template-columns: 20px 1fr 90px 90px; }
    .dr-tokens, .dr-spacer { display: none; }

    #fd-list-container .dense-row {
        grid-template-columns: 36px 20px 1fr 80px 70px;
    }
    .dr-forum { display: none; }

    /* I-3 (ticket 06) : Q&A à valider + Bibliothèque n'avaient aucune media query
       (0 palier intermédiaire, 0 mobile) — cassait ≤900px (sidebar overlay), colonnes
       fixes 346/338px + overflow:hidden = clip silencieux. Palier mobile calqué sur
       le pattern des autres listes denses ci-dessus. */
    .dense-row--pending {
        grid-template-columns: 28px 1fr 110px 18px;
    }
    .dense-head--pending { grid-template-columns: 28px 1fr 110px 18px; }
    .dense-head--pending > :nth-child(4),
    .dense-head--pending > :nth-child(5),
    .dense-row--pending .dr-date,
    .dense-row--pending .dr-meta { display: none; }

    .dense-row--library {
        grid-template-columns: 60px 1fr 18px;
    }
    .dense-head--library { grid-template-columns: 60px 1fr 18px; }
    .dense-head--library > :nth-child(3),
    .dense-head--library > :nth-child(4),
    .dense-row--library .dr-date,
    .dense-row--library .dr-meta { display: none; }

    /* Ticket 02 item 8, filet mobile : repli 1 colonne pour éviter que le
       repeat(3, minmax(140px,1fr)) desktop ne déborde sous ~450px cumulés. */
    .billing-kpis { grid-template-columns: 1fr; }

    /* Filet (ticket 06, dernier recours) : overflow:hidden rendait les colonnes
       débordantes invisibles au lieu de scrollables sous le plus petit palier. */
    .dense-wrap { overflow-x: auto; }
}

/* ── Vague 2 : fd-list reset (plus de gap card-by-card) ─────── */
.fd-list { gap: 0; }
/* Fix 10 : fd-pane max-width:960px retiré — pleine largeur comme les autres onglets denses */
.fd-pane { padding: 0 var(--sp-5) var(--sp-6); width: 100%; box-sizing: border-box; }

/* Fix prod-ready 2026-07-19 : le seul palier ≤640px laissait la colonne Auteur/Sujet
   à 25px effectifs (colonnes fixes + gaps ≈254px des ≈279px utiles) — testé par
   injection CSS réelle : 25→107px. */
@media (max-width: 480px) {
    #fd-list-container .dense-row { grid-template-columns: 36px 20px 1fr 80px; }
    #fd-list-container .dr-date { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   VAGUE 3 — Activité LLM, E-mails, Chat Pablo, Pablito
   ═══════════════════════════════════════════════════════════════ */

/* ── V3 shared ─────────────────────────────────────────────── */
:root { --r-lg: 18px; }

/* ── LLM dense-list columns ─────────────────────────────────── */
.dense-head--llm,
.dense-row--llm {
    grid-template-columns: minmax(140px, 1fr) 80px 90px 90px 90px 120px 24px;
}
/* Fix I-1 (ticket 06, pattern H1/H2) : zone morte 700-1200px jamais traitée. Masque
   Tok IN/Tok OUT (techniques, redondants avec Coût€ + la barre Répartition qui reste
   visible). nth-child obligatoire : Messages et Tok IN partagent la classe .dr-tok-in
   côté ligne (cf. llm.js), donc un sélecteur de classe seul masquerait les 2. */
@media (max-width: 1200px) {
    .dense-head--llm,
    .dense-row--llm {
        grid-template-columns: minmax(140px, 1fr) 80px 90px 120px 24px;
    }
    .dense-head--llm > :nth-child(3),
    .dense-head--llm > :nth-child(4),
    .dense-row--llm > :nth-child(3),
    .dense-row--llm > :nth-child(4) { display: none; }
}
/* bar cell */
.dr-bar-cell { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); }
.dr-usage-bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; min-width: 40px; }
.dr-usage-bar-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--vk-primary), var(--vk-secondary)); transition: width .3s ease; }
.dr-model-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary);
}
.dr-model-tag svg { flex-shrink: 0; opacity: .7; }

/* LLM detail grid → 3-col */
.detail-grid--llm { grid-template-columns: repeat(3, 1fr); }

/* LLM ventilation section */
.detail-section-title {
    /* ticket 23 : rôle 3 (sous-titre/label) — ex-fs-10. Déf GAGNANTE (cascade)
       de .detail-section-title, partout (billing + LLM). */
    font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--vk-muted); margin: 12px 0 6px;
    grid-column: 1 / -1;
}

/* ── Mails dense-list columns ───────────────────────────────── */
.dense-head--mails,
.dense-row--mails {
    /* Fix prod-ready 2026-07-19 : piste Statut 80→108px (« Accepté non envoyé »,
       19 car., débordait sw96>cw80). */
    grid-template-columns: 180px minmax(160px, 1fr) 200px 90px 108px 24px;
}
/* H2 fix (2026-07-06) : placé APRÈS la règle de base (la règle @media 1100px
   antérieure ligne ~3110 était écrasée par la base, plus tardive en source →
   sujet réduit à ~110px à 1080px). Ici : masque la colonne « Règle appliquée »
   (redondante avec le détail au clic) + resserre l'expéditeur → le sujet reste lisible. */
@media (max-width: 1150px) {
    .dense-head--mails,
    .dense-row--mails {
        /* Fix prod-ready 2026-07-19 : piste Statut 80→108px, cf. règle de base. */
        grid-template-columns: 120px minmax(200px, 1fr) 90px 108px 24px;
    }
    .dense-head--mails > :nth-child(3),
    .dense-row--mails .dr-regle { display: none; }
}

/* mail-badge (statut colonne) */
.mail-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-11); font-weight: 600; padding: 2px 8px;
    border-radius: 20px; white-space: nowrap;
}
.mail-badge--ok      { background: rgba(16,185,129,.13); color: var(--success); }
.mail-badge--ignored { background: rgba(148,163,184,.12); color: #475569; }
.mail-badge--error   { background: rgba(239,68,68,.13);   color: #B91C1C; }
.mail-badge--pending { background: rgba(251,191,36,.13);  color: #B45309; }

/* inline mail-chat thread */
.mail-chat-thread {
    padding: 16px; display: flex; flex-direction: column; gap: 10px;
    background: transparent;
}
.mc-bubble-wrap {
    display: flex; flex-direction: column; gap: 2px; max-width: 80%;
}
.mc-bubble-wrap--mail { align-self: flex-start; align-items: flex-start; }
.mc-bubble-wrap--pablo { align-self: flex-end; align-items: flex-end; }
.mc-speaker {
    font-size: var(--fs-10); font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--vk-muted); padding: 0 6px;
}
.mc-bubble {
    padding: 10px 14px; border-radius: var(--r-lg);
    font-size: var(--fs-13); line-height: 1.55; word-break: break-word;
}
.mc-bubble--mail {
    background: rgba(30,41,59,.9);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 4px;
    color: var(--text-primary);
}
.mc-bubble--pablo {
    background: linear-gradient(135deg, rgba(12,192,223,.18), rgba(0,78,174,.22));
    border: 1px solid rgba(12,192,223,.25);
    border-radius: var(--r-lg) var(--r-lg) 4px var(--r-lg);
    color: var(--text-primary);
}
.mc-bubble--err {
    background: rgba(239,68,68,.10);
    border: 1px solid rgba(239,68,68,.22);
    border-radius: var(--r-lg) var(--r-lg) 4px var(--r-lg);
    color: var(--text-primary);
}
.mc-bubble-subject {
    font-size: var(--fs-11); font-weight: 700; color: var(--vk-primary);
    margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em;
}
.mc-bubble-body { color: rgba(255,255,255,.85); }
.mc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.mc-chip {
    font-size: var(--fs-2xs); font-weight: 600; padding: 2px 8px;
    border-radius: 20px; letter-spacing: .02em;
}
.mc-chip--ok   { background: rgba(16,185,129,.15); color: #10B981; }
.mc-chip--warn { background: rgba(251,191,36,.15);  color: #FBBF24; }
.mc-chip--err  { background: rgba(239,68,68,.15);   color: #EF4444; }
.mc-chip--blue { background: rgba(59,130,246,.15);  color: #60A5FA; }
.mc-chip--gray { background: rgba(148,163,184,.12); color: #94A3B8; }

/* mail inline-detail header */
.detail-meta-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 16px 0;
}
.detail-chip {
    font-size: var(--fs-11); font-weight: 600; padding: 2px 9px;
    border-radius: 20px; background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.1);
}

/* loadmore (E-mails) */
.loadmore-wrap { padding: 12px 0; text-align: center; }
.btn-loadmore {
    font-size: var(--fs-sm); font-weight: 600; color: var(--vk-primary);
    padding: 6px 20px; border-radius: 20px;
    border: 1px solid rgba(12,192,223,.3);
    background: rgba(12,192,223,.07);
    cursor: pointer; transition: background var(--d-fast), border-color var(--d-fast);
}
.btn-loadmore:hover { background: rgba(12,192,223,.13); border-color: var(--vk-primary); }
/* Ticket 02 item 2 : var(--vk-primary) (cyan de marque, brillant) donnait 2.09:1 en
   clair — override vers le cyan foncé (≥4.5:1), le sombre garde --vk-primary intact. */
:root:not([data-theme="dark"]) .btn-loadmore { color: var(--cyan-deeper); }

/* ── Chat Pablo restyle ─────────────────────────────────────── */

/* Quick-starters restyle */
.starters-wrap {
    padding: 10px 14px 6px;
    display: flex; flex-direction: column; gap: 6px;
}
.starters-label {
    font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--vk-muted); margin-bottom: 2px;
}
.starters-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.starter-btn {
    display: flex; flex-direction: column; gap: 4px;
    padding: 9px 12px; border-radius: 12px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    cursor: pointer; text-align: left;
    transition: background var(--d-fast), border-color var(--d-fast), transform var(--d-fast);
}
.starter-btn:hover {
    background: rgba(12,192,223,.1); border-color: rgba(12,192,223,.3);
    transform: translateY(-1px);
}
.starter-icon { font-size: var(--fs-18); line-height: 1; }
.starter-text { font-size: var(--fs-12); color: rgba(255,255,255,.75); line-height: 1.35; }

/* New chat bubble style (chat Pablo) */
.msg-wrap { display: flex; flex-direction: column; gap: 2px; max-width: 80%; }
.msg-wrap--user { align-self: flex-end; align-items: flex-end; }
.msg-wrap--pablo { align-self: flex-start; align-items: flex-start; }
.pablo-row { display: flex; align-items: flex-start; gap: 8px; }
.pablo-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #22D3EE, #0C78D4);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-10); font-weight: 800; color: #fff; letter-spacing: -.02em;
}
.bubble--user {
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--vk-secondary), var(--vk-primary));
    color: #fff; border-radius: var(--r-lg) var(--r-lg) 4px var(--r-lg);
    font-size: var(--fs-base); line-height: 1.55; max-width: 100%;
}
.bubble--pablo {
    padding: 10px 14px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 4px;
    font-size: var(--fs-base); line-height: 1.55; color: var(--text-primary); max-width: 100%;
}
.msg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 4px; padding: 0 2px; }
.msg-ts { font-size: var(--fs-2xs); color: var(--vk-muted); }
/* msg-chip(+.ok/.err) : supprimées ici (Lot B vague 2, 2026-07-18, ticket 15
   pt.6) — 0 usage HTML/JS confirmé, déjà noté « CSS mort jamais référencé »
   par l'audit (annexe-interface.md, triage contraste, § faux positifs). */

/* Chat tab new input-bar style */
.chat-layout {
    display: flex; flex-direction: column; height: 100%; min-height: 0;
}
.chat-area {
    flex: 1; overflow-y: auto; padding: 14px;
    display: flex; flex-direction: column; gap: 12px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
}
.input-bar {
    padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.07);
    background: rgba(15,22,40,.9); display: flex; align-items: flex-end; gap: 8px;
    flex-shrink: 0;
}
.chat-input-wrap {
    flex: 1; min-width: 0;
    background: rgba(20,28,46,.6); border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px; padding: 8px 12px;
    transition: border-color var(--d-fast);
}
.chat-input-wrap:focus-within { border-color: var(--vk-primary); }
.chat-textarea {
    width: 100%; border: 0; background: transparent; resize: none; overflow: hidden;
    font-size: var(--fs-base); color: var(--text-primary); font-family: inherit; line-height: 1.5;
    min-height: 22px; max-height: 140px;
    scrollbar-width: none;
}
.chat-textarea::-webkit-scrollbar { display: none; }
.chat-textarea::placeholder { color: #5B718A; }
.send-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--vk-secondary), var(--vk-primary));
    color: #fff; border: 0; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--d-fast), box-shadow var(--d-fast);
}
.send-btn:hover:not(:disabled) { transform: scale(1.07); box-shadow: 0 6px 18px rgba(0,78,174,.35); }
.send-btn:disabled { background: rgba(12,192,223,.1); color: rgba(12,192,223,.3); cursor: not-allowed; }

/* ── Pablito violet accent restyle ──────────────────────────── */
:root {
    --pbl-accent: #7C3AED;
    --pbl-accent-soft: rgba(124,58,237,0.10);
    --pbl-accent-border: rgba(124,58,237,0.22);
}

.pbl-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--violet), var(--pbl-accent), #5B21B6);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-10); font-weight: 800; color: #fff; letter-spacing: -.02em;
}

/* Pablito bubble */
.bubble--pablito {
    padding: 10px 14px;
    background: rgba(124,58,237,.1); border: 1px solid var(--pbl-accent-border);
    border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 4px;
    font-size: var(--fs-base); line-height: 1.55; color: var(--text-primary);
}

/* Pablito starters violet hover */
#tab-pablito .starter-btn:hover {
    background: var(--pbl-accent-soft); border-color: var(--pbl-accent-border);
}

/* Pablito send button */
.btn-pablito, #tab-pablito .send-btn {
    background: linear-gradient(135deg, var(--violet), var(--pbl-accent));
}
#tab-pablito .send-btn:hover:not(:disabled) {
    box-shadow: 0 6px 18px rgba(124,58,237,.35);
}

/* Pablito accordéon indexation */
.index-accordion {
    margin-top: 14px;
    border: 1px solid var(--pbl-accent-border);
    border-radius: 12px; overflow: hidden;
    background: rgba(124,58,237,.04);
}
.acc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; cursor: pointer;
    font-size: var(--fs-base); font-weight: 600; color: var(--text-primary);
    background: rgba(124,58,237,.07); border: 0; width: 100%; text-align: left;
    transition: background var(--d-fast);
}
.acc-header:hover { background: rgba(124,58,237,.12); }
.acc-header-icon {
    width: 20px; height: 20px; color: var(--pbl-accent);
    transition: transform var(--d-normal);
}
.acc-header[aria-expanded="true"] .acc-header-icon { transform: rotate(180deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.4,0,.2,1); }
.acc-body.open { max-height: 600px; }
.acc-body-inner { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.acc-section-title {
    font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--pbl-accent); margin-bottom: 2px;
}
.acc-row { display: flex; flex-direction: column; gap: 4px; }
.acc-label { font-size: var(--fs-12); color: var(--vk-muted); font-weight: 500; }
.acc-input, .acc-textarea {
    width: 100%; padding: 8px 12px; border-radius: var(--r-xs);
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    color: var(--text-primary); font-size: var(--fs-13); font-family: inherit;
    transition: border-color var(--d-fast);
}
.acc-input:focus, .acc-textarea:focus {
    outline: none; border-color: var(--pbl-accent);
    background: rgba(124,58,237,.06);
}
.acc-textarea { resize: vertical; min-height: 80px; }
.acc-char-count { font-size: var(--fs-2xs); color: var(--vk-muted); text-align: right; }
.acc-file-zone {
    border: 2px dashed var(--pbl-accent-border); border-radius: var(--r-sm);
    padding: 20px 14px; text-align: center;
    color: var(--vk-muted); font-size: var(--fs-13);
    cursor: pointer; transition: border-color var(--d-fast), background var(--d-fast);
}
.acc-file-zone:hover { border-color: var(--pbl-accent); background: var(--pbl-accent-soft); }
.btn-pablito {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 20px; border-radius: 20px; border: 0; cursor: pointer;
    background: linear-gradient(135deg, var(--violet), var(--pbl-accent));
    color: #fff; font-size: var(--fs-13); font-weight: 700;
    transition: transform var(--d-fast), box-shadow var(--d-fast);
}
.btn-pablito:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(124,58,237,.35); }
.btn-pablito:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Pager (LLM) ─────────────────────────────────────────────── */
.pager {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 0; font-size: var(--fs-sm); color: var(--vk-muted);
}
.pager-btn {
    padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05); color: var(--text-primary);
    font-size: var(--fs-12); cursor: pointer;
    transition: background var(--d-fast), border-color var(--d-fast);
}
.pager-btn:hover:not(:disabled) { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.pager-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── Chat Pablo & Pablito : override starters → 3-col grid ── */
#tab-chat .vackelys-chat__starters,
#tab-pablito .vackelys-chat__starters {
    margin-left: 0; padding: 10px 14px 6px;
}
#tab-chat .vackelys-chat__starters-label,
#tab-pablito .vackelys-chat__starters-label {
    font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--vk-muted); margin-bottom: 6px;
    display: block;
}
#tab-chat .vackelys-chat__starters-grid,
#tab-pablito .vackelys-chat__starters-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
#tab-chat .vackelys-chat__starter,
#tab-pablito .vackelys-chat__starter {
    flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 9px 12px; border-radius: 12px; min-height: 0;
}
#tab-chat .vackelys-chat__starter-icon,
#tab-pablito .vackelys-chat__starter-icon {
    font-size: var(--fs-18); width: auto; height: auto;
    background: none; border-radius: 0;
}
#tab-chat .vackelys-chat__starter-text,
#tab-pablito .vackelys-chat__starter-text {
    font-size: var(--fs-12); line-height: 1.35;
}
/* Pablito starter violet hover */
#tab-pablito .vackelys-chat__starter:hover {
    border-color: var(--pbl-accent-border);
    background: var(--pbl-accent-soft);
}

/* Restyle user message bubble for chat tabs */
#tab-chat .vackelys-chat__message--user .vackelys-chat__bubble,
#tab-pablito .vackelys-chat__message--user .vackelys-chat__bubble {
    background: linear-gradient(135deg, var(--vk-secondary), var(--vk-primary));
    color: #fff; border-radius: var(--r-lg) var(--r-lg) 4px var(--r-lg);
    border: none;
}
/* Pablito user bubble violet tint */
#tab-pablito .vackelys-chat__message--user .vackelys-chat__bubble {
    background: linear-gradient(135deg, var(--violet), var(--pbl-accent));
}

/* Bot bubble override */
#tab-chat .vackelys-chat__message--bot .vackelys-chat__bubble,
#tab-pablito .vackelys-chat__message--bot .vackelys-chat__bubble {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 4px;
}
/* Pablito bot bubble violet tint */
#tab-pablito .vackelys-chat__message--bot .vackelys-chat__bubble {
    background: rgba(124,58,237,.1); border-color: var(--pbl-accent-border);
}

/* Pablo send button (violet for pablito) */
#tab-pablito .vackelys-chat__send,
#tab-pablito .pbl-send {
    background: linear-gradient(135deg, var(--violet), var(--pbl-accent));
    /* Fix prod-ready 2026-07-19 : ombre idle reportée depuis l'inline style HTML
       (retiré par ailleurs) — état repos non-plat, cohérent avec le hover ci-dessous. */
    box-shadow: 0 4px 12px -4px rgba(124,58,237,.4);
}
#tab-pablito .vackelys-chat__send:hover:not(:disabled),
#tab-pablito .pbl-send:hover:not(:disabled) {
    box-shadow: 0 8px 20px rgba(124,58,237,.32);
}
/* Fix prod-ready 2026-07-19 : état disabled scopé Pablito — mirroir du pattern cyan
   (main.css:5659/6004) ; l'inline style HTML sur le bouton gagnait sur .send-btn:disabled
   jusqu'ici. */
#tab-pablito .send-btn:disabled,
#tab-pablito .pbl-send:disabled {
    background: rgba(124,58,237,.12);
    color: rgba(124,58,237,.35);
    box-shadow: none;
}
/* Fix prod-ready 2026-07-19 : permutation flèche/spinner au chargement — pblSetSending()
   pose .is-loading sur le bouton mais aucune règle ne mappait .vk-send-icon/.vk-loading-icon
   côté classe vivante (déclarations existantes seulement sur le sélecteur mort
   .vackelys-chat__send.is-loading, ~l.2833). Reprend la même pulsation (vkSendPulse).
   !important nécessaire : le SVG loader porte style="display:none" en inline (index.html),
   qui bat sinon toute règle de feuille externe — à retirer côté HTML si l'inline est purgé. */
.send-btn.is-loading .vk-send-icon { display: none; }
.send-btn.is-loading .vk-loading-icon {
    display: block !important;
    animation: vkSendPulse 1.4s cubic-bezier(.4,0,.6,1) infinite;
}
@media (prefers-reduced-motion: reduce) {
    .send-btn.is-loading .vk-loading-icon { animation: none; }
}

/* Pablito accordéon — restyle existing <details> */
.pbl-accord {
    margin-top: 14px;
    border: 1px solid var(--pbl-accent-border);
    border-radius: 12px; overflow: hidden;
    background: rgba(124,58,237,.04);
}
.pbl-accord > summary {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; cursor: pointer;
    font-size: var(--fs-base); font-weight: 600; color: var(--text-primary);
    background: rgba(124,58,237,.07); list-style: none;
    transition: background var(--d-fast);
}
.pbl-accord > summary::-webkit-details-marker { display: none; }
.pbl-accord > summary:hover { background: rgba(124,58,237,.12); }
.pbl-accord .pbl-accord-chevron { margin-left: auto; transition: transform var(--d-normal); }
.pbl-accord[open] .pbl-accord-chevron { transform: rotate(180deg); }
.pbl-accord-body {
    padding: 14px 16px;
}

/* ── Responsive vague 3 ────────────────────────────────────── */
@media (max-width: 768px) {
    .dense-head--llm, .dense-row--llm {
        grid-template-columns: 1fr 70px 70px 24px;
    }
    .dense-head--llm :nth-child(3),
    .dense-head--llm :nth-child(4),
    .dense-row--llm .dr-tok-in,
    .dense-row--llm .dr-tok-out { display: none; }
    .dr-bar-cell { display: none; }

    /* Fix prod-ready 2026-07-19 : en-tête masquait les mauvaises colonnes (2/3 = Sujet/
       Règle) alors que le corps masque Règle/Date (3e/4e enfants) → décalage, plus une
       grille à 3 pistes pour 4 enfants visibles. En-tête aligné sur le corps (3e/4e) +
       grille à 4 pistes (Statut 108px, cf. règles de base/1150px). */
    .dense-head--mails, .dense-row--mails {
        grid-template-columns: 88px 1fr 108px 24px;
    }
    .dense-head--mails :nth-child(3),
    .dense-head--mails :nth-child(4),
    .dense-row--mails .dr-regle,
    .dense-row--mails .dr-date { display: none; }

    .starters-grid { grid-template-columns: 1fr; }
}

/* ── Pablito layout (remplace vackelys-chat/pbl-chat) ─────── */
.pablito-layout {
    display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
}
.pablito-layout .chat-area { flex: 1; }

/* Bubble bot violet pour Pablito (dans #tab-pablito) */
#tab-pablito .bubble--pablo {
    background: rgba(124,58,237,.1); border: 1px solid var(--pbl-accent-border);
}
#tab-pablito .bubble--user {
    background: linear-gradient(135deg, var(--violet), var(--pbl-accent));
}

/* Fix prod-ready 2026-07-19 : placeholder 2 lignes rogné (min-height:22px hérité de
   .chat-textarea) + double en-tête (panel-header + header chat) grignotant le fold. */
@media (max-width: 480px) {
    #tab-pablito .chat-textarea { min-height: 40px; }
    #tab-pablito .panel-lead { display: none; }
}

/* Accordéon indexation — éléments manquants */
.acc-title {
    display: flex; align-items: center; gap: 8px;
    /* ticket 23 : rôle 2 (titre de carte/section) — ex-fs-base */
    font-size: var(--fs-md); font-weight: 600; color: var(--text-primary);
}
.acc-title-ico { color: var(--pbl-accent); flex-shrink: 0; }
.acc-badge {
    font-size: var(--fs-10); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    background: var(--pbl-accent-soft); border: 1px solid var(--pbl-accent-border);
    color: var(--pbl-accent); padding: 2px 7px; border-radius: 20px; margin-left: 4px;
}
.acc-caret {
    flex-shrink: 0; transition: transform var(--d-normal);
    color: var(--vk-muted);
}
.acc-header[aria-expanded="true"] .acc-caret { transform: rotate(180deg); }
.acc-file-zone { position: relative; }
.acc-file-zone-label { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.acc-file-zone-hint { font-size: var(--fs-xs); color: var(--vk-muted); margin-top: 2px; }

/* Barre compteur caractères + notice en pied d'input-bar */
.char-count-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 4px 0; min-height: 18px;
}
.char-counter {
    font-size: var(--fs-11); color: var(--vk-muted); margin-left: auto;
    transition: color var(--d-fast);
}
.char-counter.is-warn { color: #B45309; }
.char-counter.is-danger { color: #B91C1C; }

/* ── Remédiation contraste thèmes (audit 2026-06-14) ── */
/* Composants stylés "dark-first" posés sur surface claire : la valeur de
   base ci-dessus est lisible en thème clair (≥4.5:1), ces overrides
   restaurent la version vive en thème sombre. Cadres sombres exclus. */
:root[data-theme="dark"] .fd-draft-label { color: var(--success-dark-text); }
:root[data-theme="dark"] .fd-btn-approve { color: var(--success-dark-text); }
:root[data-theme="dark"] .fd-btn-reject { color: #FCA5A5; }
:root[data-theme="dark"] .fd-status-ok { color: var(--success-dark-text); }
:root[data-theme="dark"] .fd-status-err { color: #FCA5A5; }
:root[data-theme="dark"] .fd-toggle-btn.active { color: var(--success-dark-text); }
:root[data-theme="dark"] .fd-thread-toggle[aria-expanded="true"] { color: var(--success-dark-text); }
:root[data-theme="dark"] .anom-cost { color: #F87171; }
:root[data-theme="dark"] .anom-badge-err { color: #FCA5A5; }
:root[data-theme="dark"] .anom-badge-enrich { color: var(--success-dark-text); }
:root[data-theme="dark"] .anom-badge-fp { color: #94A3B8; }
:root[data-theme="dark"] .anom-redmine { color: #93C5FD; }
:root[data-theme="dark"] .anom-btn--fp { color: #FBBF24; }
:root[data-theme="dark"] .anom-state-title { color: #FCA5A5; }
:root[data-theme="dark"] .anom-table thead th { color: #FCA5A5; }
:root[data-theme="dark"] .mail-badge--ok { color: var(--success-dark-text); }
:root[data-theme="dark"] .mail-badge--pending { color: #FCD34D; }
:root[data-theme="dark"] .mail-badge--ignored { color: #94A3B8; }
:root[data-theme="dark"] .mail-badge--error { color: #FCA5A5; }
:root[data-theme="dark"] .bill-badge--pending { color: #FBBF24; }
:root[data-theme="dark"] .bill-badge--paid { color: var(--success-dark-text); }
:root[data-theme="dark"] .dr-phase--init { color: var(--success-dark-text); }
:root[data-theme="dark"] .dr-phase--back { color: #FCA5A5; }
:root[data-theme="dark"] .dr-phase--rag { color: #93C5FD; }
:root[data-theme="dark"] .dr-fp--yes { color: #FBBF24; }
:root[data-theme="dark"] .char-counter.is-warn { color: #FBBF24; }
:root[data-theme="dark"] .char-counter.is-danger { color: #FCA5A5; }
:root[data-theme="dark"] .id-inst-label { color: #FBBF24; }
:root[data-theme="dark"] .qa-link-from-mail { color: var(--violet-soft); }
:root[data-theme="dark"] .mm-img-inline { color: var(--violet-soft); }

/* ── Remédiation contraste thèmes v2 (2026-06-14) ── */
:root[data-theme="dark"] .ov-vol-kpi { color: var(--cyan-light); }
:root[data-theme="dark"] .anom-range { color: #FCA5A5; }

/* ════════════════════════════════════════════════════════════════════
   Fix 14 (/diagnose 2026-06-14) — surfaces chat & détail mail theme-aware,
   barre d'envoi réparée, logo centré au collapse.
   La tab-chat utilise chat-layout, input-bar, bubble--pablo, msg- qui
   référençaient des tokens (vk-secondary, text-primary) scopés à
   .vackelys-chat (la tab est en chat-layout) : non résolus, d'où bulle user
   sans fond, texte sombre sur input-bar sombre en clair, et input empilé.
   ════════════════════════════════════════════════════════════════════ */

/* (4) Logo centré dans le rail collapsed (48px) */
.sidebar.collapsed .sb-logo { padding: 0; justify-content: center; gap: 0; }

/* (1) Tokens chat résolus GLOBALEMENT et theme-aware (étaient scopés .vackelys-chat) */
:root {
    --vk-primary: #0CC0DF;
    --vk-secondary: #046BD2;
    --text-primary: var(--ink-900);
    --text-base: var(--ink-900);   /* utilisé par forum (.fd-*), n'était défini nulle part */
    --d-normal: var(--d-base);     /* durée transition utilisée par l'accordéon, manquait */
}

/* (2) Barre d'envoi — le <form>.input-row n'avait aucun layout (le CSS ciblait
   l'ancienne classe .chat-input-wrap absente du HTML) → champ + bouton empilés. */
.input-inner { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.input-row { display: flex; align-items: flex-end; gap: 8px; width: 100%; }
.input-row .chat-textarea {
    flex: 1; min-width: 0;
    background: var(--surface-soft); border: 1px solid var(--border-hi);
    border-radius: 12px; padding: 9px 12px;
}
.input-row .chat-textarea:focus { outline: none; border-color: var(--vk-primary); box-shadow: 0 0 0 3px var(--ring); }

/* (1) Thème CLAIR — surfaces chat claires (miroir du widget .vackelys-chat) */
:root:not([data-theme="dark"]) .input-bar { background: var(--surface-strong); border-top-color: var(--border-hi); }
:root:not([data-theme="dark"]) .chat-area { scrollbar-color: rgba(15,23,42,.18) transparent; }
:root:not([data-theme="dark"]) .bubble--pablo { background: var(--surface-strong); border-color: var(--border-hi); }
:root:not([data-theme="dark"]) .bubble--pablito { background: var(--pbl-accent-soft); border-color: var(--pbl-accent-border); }
:root:not([data-theme="dark"]) .chat-textarea::placeholder { color: var(--ink-400); }
:root:not([data-theme="dark"]) .send-btn:disabled { background: rgba(4,107,210,.12); color: rgba(4,107,210,.45); }
:root:not([data-theme="dark"]) .starter-btn { background: var(--surface-soft); border-color: var(--border-hi); }
:root:not([data-theme="dark"]) .starter-text { color: var(--ink-700); }
:root:not([data-theme="dark"]) .msg-ts { color: var(--ink-500); }
:root:not([data-theme="dark"]) .acc-header { color: var(--ink-800); }
:root:not([data-theme="dark"]) .acc-section-title { color: var(--ink-500); }

/* (3) Thème CLAIR — détail mail .mc-* lisible (bulles claires + texte sombre) */
:root:not([data-theme="dark"]) .mc-bubble--mail { background: var(--surface-strong); border-color: var(--border-hi); }
:root:not([data-theme="dark"]) .mc-bubble--pablo { background: linear-gradient(135deg, var(--cyan-50), var(--surface-soft)); border-color: rgba(12,192,223,.30); }
:root:not([data-theme="dark"]) .mc-bubble--err { background: var(--danger-soft); border-color: rgba(239,68,68,.22); }
:root:not([data-theme="dark"]) .mc-bubble-body { color: var(--ink-800); }
:root:not([data-theme="dark"]) .mc-bubble-subject { color: var(--cyan-deeper); }
:root:not([data-theme="dark"]) .mc-speaker { color: var(--ink-600); }
:root:not([data-theme="dark"]) .detail-chip { background: var(--surface-soft); color: var(--ink-600); border-color: var(--border-hi); }
:root:not([data-theme="dark"]) .mc-chip--ok   { color: var(--success); }
:root:not([data-theme="dark"]) .mc-chip--warn  { color: #B45309; }
:root:not([data-theme="dark"]) .mc-chip--err   { color: #B91C1C; }
:root:not([data-theme="dark"]) .mc-chip--blue  { color: var(--info); }
:root:not([data-theme="dark"]) .mc-chip--gray  { color: #475569; }

/* ═══════════════════════════════════════════════════════════════════
   VUE LOGIN (v2.2.0 — 2026-06-15)
   Portée fidèlement depuis mockups/2026-06-15-login-1.html.
   Toutes les classes préfixées vk-login- pour éviter les collisions.
   NE PAS modifier : valider d'abord le mockup auprès de Roy.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Layout plein écran centré ── */
#vk-login-view {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

#vk-login-view[hidden] { display: none !important; }

.vk-login-page {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-4);
  gap: var(--sp-6);
  background:
    radial-gradient(ellipse 640px 400px at 10% 6%,  rgba(12,192,223,0.10), transparent 60%),
    radial-gradient(ellipse 560px 420px at 90% 10%, rgba(4,107,210,0.08),  transparent 62%),
    linear-gradient(180deg, var(--page-bg-warm, #FFFFFF) 0%, var(--page-bg, #F8FAFC) 100%);
}

/* ticket 23 : convention dark unifiée — ce bloc login utilisait la forme nue
   [data-theme="dark"] (9 sélecteurs) ; alignée sur la forme majoritaire du
   fichier :root[data-theme="dark"] (155 occurrences). AUCUNE valeur modifiée. */
:root[data-theme="dark"] .vk-login-page {
  background:
    radial-gradient(ellipse 800px 500px at 10% 6%,  rgba(12,192,223,0.20), transparent 60%),
    radial-gradient(ellipse 700px 540px at 92% 12%, rgba(4,107,210,0.22),  transparent 62%),
    linear-gradient(180deg, #060d1a 0%, #080f20 100%);
}

/* ── Logo bloc ── */
.vk-login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}

.vk-login-logo-mark {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #0CC0DF 0%, #046BD2 100%);
  box-shadow:
    0 0 0 1px rgba(4,107,210,0.4),
    0 8px 24px -8px rgba(4,107,210,0.45),
    0 0 32px -12px rgba(12,192,223,0.40);
}

.vk-login-logo-mark svg {
  width: 30px;
  height: 30px;
  fill: none;
}

.vk-login-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink-900);
  line-height: 1.15;
}

.vk-login-subtitle {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  font-weight: 450;
  letter-spacing: 0.005em;
}

/* ── Carte formulaire ── */
.vk-login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface-strong);
  backdrop-filter: var(--glass-blur-strong, saturate(160%) blur(22px));
  -webkit-backdrop-filter: var(--glass-blur-strong, saturate(160%) blur(22px));
  border-radius: var(--r-xl);
  box-shadow: var(--sh-float);
  border: 1px solid var(--border-hi);
  padding: var(--sp-8);
}

:root[data-theme="dark"] .vk-login-card {
  background: rgba(18, 26, 44, 0.82);
  border-color: rgba(255,255,255,0.10);
}

/* ── Formulaire ── */
.vk-login-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.vk-login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vk-login-field-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
  letter-spacing: -0.005em;
}

:root[data-theme="dark"] .vk-login-field-label { color: var(--ink-600); }

.vk-login-field-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.vk-login-field-input {
  width: 100%;
  padding: 10px 14px;
  font-size: var(--fs-base);
  font-family: var(--font-ui);
  color: var(--ink-900);
  background: var(--page-bg-warm, #FFFFFF);
  border: 1.5px solid var(--border-hi);
  border-radius: var(--r-sm);
  outline: none;
  transition:
    border-color var(--d-fast) var(--ease-out),
    box-shadow var(--d-fast) var(--ease-out),
    background var(--d-fast);
}

.vk-login-field-input.has-toggle { padding-right: 44px; }

:root[data-theme="dark"] .vk-login-field-input {
  background: rgba(10, 16, 32, 0.60);
  border-color: rgba(255,255,255,0.10);
  color: var(--ink-900);
}

.vk-login-field-input::placeholder { color: var(--ink-400); opacity: 1; }
:root[data-theme="dark"] .vk-login-field-input::placeholder { color: var(--ink-400); }

.vk-login-field-input:focus {
  border-color: var(--focus, #046BD2);
  box-shadow: 0 0 0 3px var(--ring, rgba(4,107,210,0.40));
}

.vk-login-field-input.is-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(200,30,30,0.14);
}

:root[data-theme="dark"] .vk-login-field-input.is-error {
  box-shadow: 0 0 0 3px rgba(242,100,100,0.18);
}

/* ── Toggle œil ── */
.vk-login-toggle-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  color: var(--ink-400);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--d-fast), background var(--d-fast);
  padding: 0;
}

.vk-login-toggle-eye:hover { color: var(--ink-700); background: var(--cyan-50); }
:root[data-theme="dark"] .vk-login-toggle-eye:hover { color: var(--ink-600); }

.vk-login-toggle-eye:focus-visible {
  outline: 2px solid var(--focus, #046BD2);
  outline-offset: 1px;
}

.vk-login-toggle-eye svg { width: 16px; height: 16px; }

/* ── Message erreur ── */
.vk-login-error {
  display: none;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 10px 14px;
  background: var(--danger-soft);
  border: 1px solid rgba(200,30,30,0.22);
  border-radius: var(--r-sm);
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.45;
}

:root[data-theme="dark"] .vk-login-error {
  border-color: rgba(242,100,100,0.28);
}

.vk-login-error.is-visible { display: flex; }

.vk-login-error-ico {
  flex-shrink: 0;
  margin-top: 1px;
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Bouton Se connecter ── */
.vk-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 11px 16px;
  font-size: var(--fs-md);
  font-weight: 600;
  font-family: var(--font-ui);
  letter-spacing: -0.01em;
  color: #fff;
  background: linear-gradient(135deg, #0CC0DF 0%, #046BD2 100%);
  border: 1px solid rgba(4,107,210,0.5);
  border-radius: var(--r-sm);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 6px 16px -7px rgba(4,107,210,0.40);
  cursor: pointer;
  transition:
    transform var(--d-fast) var(--ease-out),
    box-shadow var(--d-base) var(--ease-out),
    opacity var(--d-fast);
  margin-top: var(--sp-1);
  position: relative;
  overflow: hidden;
}

.vk-login-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 10px 24px -8px rgba(4,107,210,0.50);
}

.vk-login-btn:active { transform: translateY(1px) scale(0.99); }

.vk-login-btn:focus-visible {
  outline: 2px solid var(--focus, #046BD2);
  outline-offset: 2px;
}

.vk-login-btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

.vk-login-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 60%);
  pointer-events: none;
}

/* Spinner animation (réutilise vk-login-spin pour éviter collision avec spin existant) */
@keyframes vk-login-spin {
  to { transform: rotate(360deg); }
}

.vk-login-spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.30);
  border-top-color: #fff;
  border-radius: 50%;
}

.vk-login-btn.is-loading .vk-login-spinner { display: block; animation: vk-login-spin 0.75s linear infinite; }
.vk-login-btn.is-loading .vk-login-btn-label { opacity: 0.75; }

/* ── Footer muted ── */
.vk-login-footer {
  font-size: var(--fs-xs);
  color: var(--ink-400);
  text-align: center;
  line-height: 1.5;
}

:root[data-theme="dark"] .vk-login-footer { color: var(--ink-500); }

/* ── Bouton logout sidebar (v2.2.0) ── */
.sb-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.sb-logout-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  color: var(--ink-400);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--d-fast), background var(--d-fast);
  padding: 0;
  flex-shrink: 0;
}

.sb-logout-btn:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

.sb-logout-btn:focus-visible {
  outline: 2px solid var(--focus, #046BD2);
  outline-offset: 2px;
}

.sb-logout-btn .ico {
  width: 16px;
  height: 16px;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .vk-login-card {
    padding: var(--sp-6);
    border-radius: var(--r-lg);
    max-width: 100%;
    margin: 0;
  }
  .vk-login-page { padding: var(--sp-6) var(--sp-3); justify-content: flex-start; padding-top: 72px; }
  .vk-login-title { font-size: var(--fs-xl); }
}


/* ── Ticket 22 — Semblables dans la file (pending↔pending, lexical front) ──
   Complète le bloc .sim issue 18 : accent violet (famille badge--info) pour
   distinguer « dans la file » (lexical, 0 réseau) du cyan « dans la base »
   (sémantique, réseau). Flash de repérage déclenché par _pendingLexGoto. */
.sim--queue { border-color: rgba(167,139,250,.30); background: rgba(167,139,250,.05); }
.sim--queue .sim-head { color: #6D28D9; }
:root[data-theme="dark"] .sim--queue { border-color: rgba(167,139,250,.28); background: rgba(167,139,250,.07); }
:root[data-theme="dark"] .sim--queue .sim-head { color: var(--violet-soft); }

.dense-row--pending.lex-flash { animation: lex-flash-bg 1.6s ease-out 1; }
@keyframes lex-flash-bg {
    0%   { background: rgba(167,139,250,.30); box-shadow: inset 3px 0 0 var(--pbl-accent); }
    60%  { background: rgba(167,139,250,.14); box-shadow: inset 3px 0 0 var(--pbl-accent); }
    100% { background: transparent; box-shadow: inset 3px 0 0 transparent; }
}
:root[data-theme="dark"] .dense-row--pending.lex-flash { animation-name: lex-flash-bg-dark; }
@keyframes lex-flash-bg-dark {
    0%   { background: rgba(167,139,250,.22); box-shadow: inset 3px 0 0 var(--violet-soft); }
    60%  { background: rgba(167,139,250,.10); box-shadow: inset 3px 0 0 var(--violet-soft); }
    100% { background: transparent; box-shadow: inset 3px 0 0 transparent; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LEXIQUE MÉTIER — onglet « Lexique » (chantier 2026-07-22, contrat visuel
   build/mockup-lexique.html, gate ADR 0021). Préfixe lxq-* PARTOUT — jamais
   lex-* (voir .lex-flash juste au-dessus : collision réelle documentée,
   brief §8.1). Valeurs reprises À L'IDENTIQUE de la maquette ; sélecteurs
   reprojetés sur les classes RÉELLES (la maquette scopait tout sous un
   wrapper .lxq-app[data-theme] propre à sa page de preview autonome — cette
   feuille utilise directement :root[data-theme="dark"], comme le reste du
   fichier). Aucune couleur/ombre/rayon hors tokens existants : .badge--info,
   .mc-chip--blue, .qa-status, .inline-detail, .qa-empty-icon (accent, chip
   alias, statuts, barre d'accent accordéon, vide défensif) sont RÉUTILISÉS
   tels quels, non redéfinis ici — en particulier PAS de redéclaration de
   .mc-chip--blue : le token --info (#1D4ED8 clair / #60A5FA sombre, déjà
   correct en l.100/154) est la seule bonne source, la maquette avait un
   hex codé en dur (#2563EB) légèrement différent (micro-écart, à ignorer).
   Pas de .lxq-spin/@keyframes non plus : icon('spinner') (core/icons.js)
   embarque déjà .spin-anim, identique visuellement au spinner de la
   maquette — dupliquer une 2ᵉ animation aurait été une régression DRY.
   ═══════════════════════════════════════════════════════════════════════ */
.dense-head--lxq, .dense-row--lxq { grid-template-columns: 44px minmax(0,1fr) 262px 172px 18px; }
.lxq-dom { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-xs); background: rgba(107,120,140,0.12); border: 1px solid rgba(107,120,140,0.22); color: var(--ink-600); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; cursor: default; }
:root[data-theme="dark"] .lxq-dom { background: rgba(122,138,160,0.16); color: var(--ink-500); border-color: rgba(122,138,160,0.24); }
.lxq-term { font-weight: 600; color: var(--ink-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lxq-indics { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.lxq-note { display: flex; gap: 8px; align-items: flex-start; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.5; max-width: 104ch; }
.lxq-note svg { flex: none; margin-top: 1px; width: 14px; height: 14px; color: var(--ink-400); }
.lxq-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.lxq-dom-pill { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); }
.lxq-dom-pill .lxq-dom { width: 24px; height: 24px; font-size: var(--fs-xs); }
.lxq-alias-none { font-size: var(--fs-sm); color: var(--ink-400); font-style: italic; }
.lxq-reindex-note { display: flex; gap: 7px; align-items: center; font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.5; }
.lxq-reindex-note svg { flex: none; width: 13px; height: 13px; color: var(--cyan-deeper); }
:root[data-theme="dark"] .lxq-reindex-note svg { color: var(--cyan-light); }
.lxq-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.lxq-field-error { margin-top: 7px; font-size: var(--fs-sm); color: var(--danger); line-height: 1.5; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.lxq-link { font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--cyan-deeper); background: none; border: 0; padding: 0; text-decoration: none; cursor: pointer; }
:root[data-theme="dark"] .lxq-link { color: var(--cyan-light); }
.lxq-link:hover { text-decoration: underline; }
.lxq-foot-meta { font-size: var(--fs-xs); color: var(--ink-400); display: inline-flex; align-items: center; gap: 5px; }
.lxq-foot-meta svg { width: 13px; height: 13px; }

/* Intermédiaire — aligné sur le seuil de Conversations (H1, .dense-row--conv,
   l.4939 : @media 1200px, palier avant la vraie zone morte ~1080px) plutôt
   que le 1120px de la maquette (chiffre propre à son propre aperçu, jamais
   authentifié contre un breakpoint réel du fichier). Masque la colonne
   « Réindexé le », garde Dom./Terme/Indicateurs/caret. */
@media (max-width: 1200px) {
    .dense-head--lxq, .dense-row--lxq { grid-template-columns: 40px minmax(0,1fr) 150px 18px; }
    .dense-head--lxq > :nth-child(4), .dense-row--lxq .dr-date { display: none; }
}
/* Mobile — même breakpoint unifié que conv/anom/billing/forum-drafts/pending/
   library (l.5421) : Dom./Terme/caret seulement (Indicateurs masqué en plus). */
@media (max-width: 640px) {
    .dense-head--lxq, .dense-row--lxq { grid-template-columns: 40px 1fr 18px; }
    .dense-head--lxq > :nth-child(3), .dense-head--lxq > :nth-child(4),
    .dense-row--lxq .lxq-indics, .dense-row--lxq .dr-date { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PABLITO — sous-vue « Documents » de l'onglet Pablito (Lot 3, chantier
   ADR 0029, contrat visuel mockups/pablito-documents-v1.html, gate ADR 0021).
   Préfixe pdoc-* PARTOUT (jamais pd-* ou doc-* — Anti-Patterns #14). Sélecteurs
   reprojetés depuis la maquette : elle scopait tout sous un wrapper
   .pdoc-app[data-theme] propre à sa page de preview autonome — cette feuille
   utilise directement :root[data-theme="dark"] comme le reste du fichier
   (donc AUCUN sélecteur `.pdoc-app …` ci-dessous, contrairement à la
   maquette). Les container queries de la maquette (@container pdocapp)
   deviennent des @media sur la largeur fenêtre (comme Lexique/Conversations
   juste au-dessus). Réutilisés tels quels, non redéfinis ici : .dense-*,
   .inline-detail, .qa-empty, .qa-toolbar/.qa-search/.qa-filter/.qa-paging,
   .btn-icon, .mc-chip--*, .acc-badge, .id-answer-block/.id-actions,
   .mmodal/.mmodal-content/.mmodal-close (famille modale existante).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fix latent (pré-existant, révélé par ce chantier) ──────────────────
   icon('spinner') (core/icons.js) pose class="spin-anim" sur son <svg> ;
   plusieurs commentaires du fichier (ex. l.6567 ci-dessus, chantier Lexique)
   affirment que cette classe anime déjà le spinner — AUCUNE règle .spin-anim
   n'existe réellement (audit grep exhaustif, 2026-07-27). Sans ce fix, le
   badge--indexing ci-dessous (bleu « animé ») ne tournerait pas, ratant la
   fidélité maquette. Réutilise @keyframes state-spin (l.303) plutôt que
   d'en dupliquer une 2ᵉ — additif, ne régresse aucun usage existant
   (un <svg> immobile ne peut pas « re-régresser » en animé). */
.spin-anim { animation: state-spin 0.8s linear infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .spin-anim { animation: none; } }

/* Badge de statut « en cours » — bleu animé (manquant : seuls ok/pending/
   draft/info/danger/neutral existent l.1216-1221). Consommé via
   makeBadge('qa-state','indexing',{icon:icon('spinner'),label:'En cours'}). */
.badge--indexing { background: rgba(29,78,216,0.10); color: var(--info); border-color: rgba(29,78,216,0.28); }
:root[data-theme="dark"] .badge--indexing { background: rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.30); }

/* Rendu markdown — balises produites par renderMarkdown() (h1-h4, hr, em)
   mais jamais stylées par .md-rendered (l.4641) : gap constaté sur ce
   chantier (la visionneuse affiche des documents structurés, contrairement
   aux réponses Q&A courtes). Additif global (.md-rendered sert aussi le
   chat/lexique/mails) — aucun de ces éléments n'a de règle aujourd'hui,
   donc aucune régression possible, seulement un gap comblé partout. */
.md-rendered h1 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; color: var(--ink-900); margin: 0 0 var(--sp-3); letter-spacing: -0.018em; }
.md-rendered h2 { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--ink-900); margin: var(--sp-4) 0 var(--sp-2); }
.md-rendered h3, .md-rendered h4 { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600; color: var(--ink-900); margin: var(--sp-3) 0 var(--sp-2); }
.md-rendered em { color: var(--ink-600); }
.md-rendered hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--sp-4) 0; }

/* ── 1. Bascule Chat | Documents (panel-header, grammaire proche .period-bar) ── */
.pdoc-switch {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--surface); border: 1px solid var(--border-hi);
    border-radius: var(--r-md); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.pdoc-switch-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: 600; color: var(--ink-500);
    transition: background var(--d-fast), color var(--d-fast);
}
.pdoc-switch-btn:hover { color: var(--ink-800); background: var(--pbl-accent-soft); }
.pdoc-switch-btn[aria-selected="true"] {
    background: linear-gradient(135deg, var(--violet), var(--pbl-accent));
    color: #fff; box-shadow: 0 6px 16px -8px rgba(124,58,237,.55);
}
.pdoc-switch-btn svg { width: 14px; height: 14px; flex: none; }
.pdoc-switch-count {
    font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700;
    padding: 1px 7px; border-radius: 999px;
    background: rgba(124,58,237,.12); color: var(--pbl-accent);
    border: 1px solid var(--pbl-accent-border);
}
:root[data-theme="dark"] .pdoc-switch-count { color: var(--violet-soft); background: rgba(167,139,250,.14); border-color: rgba(167,139,250,.28); }
.pdoc-switch-btn[aria-selected="true"] .pdoc-switch-count {
    background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.32);
}

/* Pane Documents — Lot 4 : plus de scroll global de pane. La pane est une
   colonne figée (zone d'import + split), et le scroll vit DANS chacune des
   deux colonnes du split. Sans ça, la visionneuse ne peut pas avoir sa propre
   hauteur : elle s'étirerait indéfiniment et l'aperçu PDF pousserait la liste
   hors de l'écran. */
.pdoc-pane {
    display: flex; flex-direction: column; gap: var(--sp-4); flex: 1; min-height: 0; overflow: hidden;
    /* Couleurs de format — déclarées ICI et pas dans :root : elles ne servent
       qu'aux pastilles .pdoc-fmt de cette sous-vue, et les variables CSS
       héritent, donc tous les descendants les résolvent. Portée = le pane
       Documents, littéralement (contrainte de périmètre Roy 2026-07-29 :
       aucune modification visuelle hors Pablito › Documents). */
    --fmt-pdf:  #C81E1E; --fmt-pdf-bg:  rgba(200,30,30,0.09);
    --fmt-docx: #1D4ED8; --fmt-docx-bg: rgba(29,78,216,0.09);
    --fmt-md:   #7C3AED; --fmt-md-bg:   rgba(124,58,237,0.10);
    --fmt-txt:  #4B5668; --fmt-txt-bg:  rgba(75,86,104,0.09);
    /* Ombre des pages de PDF posées sur le fond gris de .pdoc-paper. Plus
       marquée que --sh-card (qui suppose une carte sur fond clair) : ici il
       faut détacher une feuille blanche d'un plan gris. */
    --sh-page: 0 0 0 1px rgba(15,23,42,0.06), 0 10px 26px -12px rgba(15,23,42,0.28);
}
:root[data-theme="dark"] .pdoc-pane {
    --fmt-pdf:  #F26464; --fmt-pdf-bg:  rgba(242,100,100,0.14);
    --fmt-docx: #60A5FA; --fmt-docx-bg: rgba(96,165,250,0.14);
    --fmt-md:   #C4B5FD; --fmt-md-bg:   rgba(167,139,250,0.16);
    --fmt-txt:  #95A3B8; --fmt-txt-bg:  rgba(149,163,184,0.14);
    --sh-page: 0 0 0 1px rgba(255,255,255,0.08), 0 14px 34px -14px rgba(0,0,0,0.7);
}

/* ── 2. Zone « Indexer un document » (bandeau permanent) ─────────────────
   Lot 4 : resserrée (padding, icône, bordure 1.5px) — elle n'est plus la
   vedette de l'écran, le document l'est. Le reste est inchangé. */
.pdoc-drop {
    position: relative; /* ancre l'input file transparent posé par-dessus */
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border: 1.5px dashed var(--pbl-accent-border);
    border-radius: var(--r-md);
    background: rgba(167,139,250,.05);
    transition: border-color var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out);
    flex-shrink: 0;
}
.pdoc-drop.is-over,
.pdoc-drop.pbl-drag-over { border-color: var(--pbl-accent); background: rgba(124,58,237,.10); }
.pdoc-drop-ico {
    width: 38px; height: 38px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
    background: var(--pbl-accent-soft); border: 1px solid var(--pbl-accent-border);
    color: var(--pbl-accent);
}
:root[data-theme="dark"] .pdoc-drop-ico { color: var(--violet); }
.pdoc-drop-ico svg { width: 19px; height: 19px; }
.pdoc-drop-txt { flex: 1; min-width: 0; }
.pdoc-drop-title {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    font-size: var(--fs-base); font-weight: 700; color: var(--ink-900);
}
.pdoc-drop-sub { margin-top: 3px; font-size: var(--fs-sm); color: var(--ink-500); }
.pdoc-drop-sub b { font-weight: 600; color: var(--ink-600); font-family: var(--font-mono); font-size: var(--fs-xs); }
/* Bouton d'action de la zone d'indexation (label[for=pbl-file-input] stylé) */
.btn-pablito {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 18px; border-radius: 20px; border: 0;
    background: linear-gradient(135deg, var(--violet), var(--pbl-accent));
    color: #fff; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap;
    box-shadow: 0 6px 16px -8px rgba(124,58,237,.55);
    cursor: pointer; position: relative; z-index: 0; /* sous l'input transparent (dernier enfant DOM) */
}
.btn-pablito svg { width: 14px; height: 14px; flex: none; }
.btn-pablito:hover { transform: translateY(-1px); }

/* États d'upload — statut inline sous la zone (#pbl-upload-status, JS
   pablito-widget.js::pblSetUploadStatus). Inchangé au Lot 4. */
.pbl-upload-status.pbl-busy, .pbl-upload-status.pbl-ok,
.pbl-upload-status.pbl-warn, .pbl-upload-status.pbl-err,
.pdoc-up {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 9px 13px; border: 1px solid; border-radius: var(--r-sm);
    font-size: var(--fs-sm); line-height: 1.45; min-height: 0;
}
.pbl-upload-status.pbl-busy svg, .pbl-upload-status.pbl-ok svg,
.pbl-upload-status.pbl-warn svg, .pbl-upload-status.pbl-err svg,
.pdoc-up svg { width: 15px; height: 15px; flex: none; }
.pbl-upload-status.pbl-busy, .pdoc-up--busy { background: var(--pbl-accent-soft); border-color: var(--pbl-accent-border); color: var(--pbl-accent); }
:root[data-theme="dark"] .pbl-upload-status.pbl-busy, :root[data-theme="dark"] .pdoc-up--busy { color: var(--violet-soft); }
.pbl-upload-status.pbl-ok, .pdoc-up--ok { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.30); color: var(--success); }
.pbl-upload-status.pbl-warn, .pdoc-up--skip { background: var(--warn-50); border-color: var(--warn-200); color: var(--warn); }
.pbl-upload-status.pbl-err, .pdoc-up--err { background: var(--danger-soft); border-color: rgba(239,68,68,.30); color: var(--danger); }
.pdoc-up-txt { flex: 1; min-width: 0; }
.pdoc-up-name { font-weight: 600; font-family: var(--font-mono); font-size: var(--fs-xs); }
.pdoc-progress { flex: 0 0 180px; height: 5px; border-radius: 999px; background: rgba(124,58,237,.15); overflow: hidden; }
.pdoc-progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--violet), var(--pbl-accent)); }
.pdoc-up-pct { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; flex: none; }

/* ═══ Lot 4 — split maître/détail ═══════════════════════════════════════
   Le dense-row + accordéon du Lot 3 disparaît : liste en cartes à gauche,
   visionneuse permanente à droite. Les .dense-head/.dense-row GÉNÉRIQUES
   restent intactes (Lexique, LLM, Anomalies, Conversations s'en servent) —
   seules les variantes --pdoc sont supprimées. */
.pdoc-split {
    flex: 1; min-height: 0; display: grid; gap: var(--sp-4);
    grid-template-columns: minmax(340px, 400px) 1fr;
}

/* ── 3. Colonne gauche : filtres + liste ────────────────────────────────── */
.pdoc-col { display: flex; flex-direction: column; min-height: 0; gap: var(--sp-3); }
/* La colonne fait 340-400 px : les 3 contrôles ne tiennent pas sur une ligne.
   .vk-select (partagée) est en width:100% et écrasait la recherche à 0 px de
   large — constaté en preview le 2026-07-29. On donne donc sa ligne à la
   recherche, et les 2 filtres se partagent la seconde. Override SCOPÉ sous
   .pdoc-filters : la classe partagée n'est pas touchée. */
.pdoc-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex: none; }
.pdoc-filters .vk-select { flex: 1 1 0; width: auto; min-width: 0; }
.pdoc-search { position: relative; flex: 1 1 100%; min-width: 0; }
.pdoc-search > svg {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; color: var(--ink-400); pointer-events: none;
}
.pdoc-search .vk-input { padding-left: 32px; }

/* overflow-x:hidden — une liste verticale de cartes ne doit jamais défiler
   latéralement : nom en ellipsis, méta en flex-wrap, rien ne peut légitimement
   dépasser. Chrome rapportait malgré tout un scrollWidth de 12 px supérieur au
   clientWidth (aucun descendant ne dépassant réellement la boîte, vérifié au
   DOM le 2026-07-29) et affichait une barre horizontale parasite. */
.pdoc-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 6px; padding-right: 3px; }
.pdoc-card {
    /* flex:none OBLIGATOIRE — parent en flex column scrollable : sans ça les
       cartes se compriment au lieu de déborder, et la ligne de méta se fait
       rogner (constaté en preview le 2026-07-29). Idem .pdoc-chunk/.pdoc-page. */
    display: grid; grid-template-columns: 38px minmax(0,1fr); gap: var(--sp-3);
    align-items: start; text-align: left; width: 100%; flex: none;
    padding: var(--sp-3); border-radius: var(--r-md); position: relative;
    background: var(--page-bg-warm); border: 1px solid var(--border-soft);
    transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.pdoc-card:hover { border-color: var(--ink-300); transform: translateY(-1px); box-shadow: var(--sh-xs); }
.pdoc-card[aria-selected="true"] {
    background: var(--pbl-accent-soft); border-color: var(--pbl-accent-border);
    box-shadow: inset 3px 0 0 0 var(--pbl-accent);
}
.pdoc-fmt {
    width: 38px; height: 44px; border-radius: var(--r-xs);
    display: grid; place-items: center; align-content: center; gap: 1px; flex: none;
    font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .04em;
    border: 1px solid currentColor;
}
.pdoc-fmt svg { width: 14px; height: 14px; }
.pdoc-fmt--pdf  { color: var(--fmt-pdf);  background: var(--fmt-pdf-bg); }
.pdoc-fmt--docx { color: var(--fmt-docx); background: var(--fmt-docx-bg); }
.pdoc-fmt--md   { color: var(--fmt-md);   background: var(--fmt-md-bg); }
.pdoc-fmt--txt  { color: var(--fmt-txt);  background: var(--fmt-txt-bg); }

.pdoc-card-main { min-width: 0; }
.pdoc-card-name { display: block; font-size: var(--fs-base); font-weight: 600; color: var(--ink-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdoc-card[aria-selected="true"] .pdoc-card-name { color: var(--ink-900); }
.pdoc-card-meta {
    margin-top: 5px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px;
    font-size: var(--fs-2xs); color: var(--ink-500); font-family: var(--font-mono);
}
.pdoc-sep { color: var(--ink-300); }
.pdoc-card-foot { margin-top: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }

.pdoc-pill {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
    font-size: var(--fs-2xs); font-weight: 700; border: 1px solid transparent; white-space: nowrap;
}
.pdoc-pill svg { width: 11px; height: 11px; flex: none; }
.pdoc-pill--ok     { color: var(--success); background: var(--success-soft); border-color: rgba(16,185,129,.28); }
.pdoc-pill--busy   { color: var(--pbl-accent); background: var(--pbl-accent-soft); border-color: var(--pbl-accent-border); }
:root[data-theme="dark"] .pdoc-pill--busy { color: var(--violet-soft); }
.pdoc-pill--err    { color: var(--danger); background: var(--danger-soft); border-color: rgba(239,68,68,.30); }
.pdoc-pill--warn   { color: var(--warn); background: var(--warn-50); border-color: var(--warn-200); }
.pdoc-pill--chunks { color: var(--ink-600); background: var(--ink-50); border-color: var(--border-hi); font-family: var(--font-mono); }

.pdoc-card-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity var(--d-fast) var(--ease-out); }
.pdoc-card:hover .pdoc-card-actions,
.pdoc-card:focus-within .pdoc-card-actions,
.pdoc-card[aria-selected="true"] .pdoc-card-actions { opacity: 1; }
.pdoc-card-actions .btn-icon { width: 26px; height: 26px; min-width: 26px; min-height: 26px; }
.pdoc-card-actions svg { width: 13px; height: 13px; }
/* Sur écran tactile il n'y a pas de survol : les actions restent visibles. */
@media (hover: none) { .pdoc-card-actions { opacity: 1; } }

.pdoc-list-foot {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding-top: var(--sp-2); border-top: 1px solid var(--hairline);
    font-size: var(--fs-2xs); color: var(--ink-500); font-family: var(--font-mono);
}

/* ── 4. Colonne droite : visionneuse ────────────────────────────────────── */
.pdoc-viewer {
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    background: var(--page-bg-warm); border: 1px solid var(--border-soft);
    border-radius: var(--r-lg); box-shadow: var(--sh-card);
}
.pdoc-vw-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--hairline); flex: none; }
.pdoc-vw-title { min-width: 0; flex: 1; }
.pdoc-vw-name { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdoc-vw-meta { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-2xs); color: var(--ink-500); font-family: var(--font-mono); }
.pdoc-vw-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

.pdoc-vw-tabs { display: flex; gap: var(--sp-1); padding: 0 var(--sp-4); border-bottom: 1px solid var(--hairline); flex: none; }
.pdoc-vw-tab {
    position: relative; padding: 10px 13px 11px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-500);
    display: inline-flex; align-items: center; gap: 7px; border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color var(--d-fast) var(--ease-out);
}
.pdoc-vw-tab svg { width: 14px; height: 14px; flex: none; }
.pdoc-vw-tab:hover { color: var(--ink-800); }
.pdoc-vw-tab[aria-selected="true"] { color: var(--pbl-accent); border-bottom-color: var(--pbl-accent); }
:root[data-theme="dark"] .pdoc-vw-tab[aria-selected="true"] { color: var(--violet-soft); border-bottom-color: var(--violet); }
.pdoc-cnt {
    font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700; padding: 1px 6px; border-radius: 999px;
    background: var(--ink-50); border: 1px solid var(--border-hi); color: var(--ink-600);
}
.pdoc-vw-tab[aria-selected="true"] .pdoc-cnt { color: var(--pbl-accent); background: var(--pbl-accent-soft); border-color: var(--pbl-accent-border); }
:root[data-theme="dark"] .pdoc-vw-tab[aria-selected="true"] .pdoc-cnt { color: var(--violet-soft); }

.pdoc-vw-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pdoc-pane-vw { flex: 1; min-height: 0; display: none; flex-direction: column; }
.pdoc-pane-vw.is-on { display: flex; }

/* ── 5. Aperçu — barre d'outils + « papier » ────────────────────────────── */
.pdoc-tools {
    flex: none; display: flex; align-items: center; gap: var(--sp-3); padding: 8px var(--sp-4);
    border-bottom: 1px solid var(--hairline); background: var(--surface);
    font-size: var(--fs-xs); color: var(--ink-500);
}
.pdoc-tools svg { width: 14px; height: 14px; flex: none; }
.pdoc-spacer { margin-left: auto; }
.pdoc-zoom { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border-hi); border-radius: 999px; padding: 2px; }
.pdoc-zoom button { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; color: var(--ink-600); }
.pdoc-zoom button:hover:not(:disabled) { background: var(--ink-50); color: var(--ink-900); }
.pdoc-zoom button:disabled { opacity: .4; cursor: not-allowed; }
.pdoc-zoom span { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700; padding: 0 6px; color: var(--ink-600); }

.pdoc-paper { flex: 1; min-height: 0; overflow-y: auto; background: var(--ink-50); padding: var(--sp-5); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
/* Les pages rendues par pdf.js sont des <canvas> : fond blanc quel que soit le
   thème (une page de PDF est blanche — l'inverser mentirait sur le document). */
.pdoc-page { flex: none; max-width: 100%; border-radius: 3px; background: #FFFFFF; box-shadow: var(--sh-page); }
.pdoc-page-lbl { flex: none; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-400); }

/* ── 6. Texte indexé ────────────────────────────────────────────────────── */
.pdoc-textbar { flex: none; display: flex; align-items: center; gap: var(--sp-3); padding: 8px var(--sp-4); border-bottom: 1px solid var(--hairline); background: var(--surface); }
.pdoc-textbar .pdoc-search { max-width: 280px; flex: none; }
.pdoc-hint { font-size: var(--fs-2xs); color: var(--ink-500); font-family: var(--font-mono); }
.pdoc-text { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-5) var(--sp-6); }
/* .md-rendered est PARTAGÉE (chat, lexique, mails…) : ces règles de mise en
   page de lecture sont scopées sous .pdoc-text — ne jamais les déscoper. */
.pdoc-text .md-rendered { max-width: 76ch; }
.pdoc-text .md-rendered p { margin-bottom: var(--sp-3); color: var(--ink-700); }
.pdoc-text .md-rendered ul, .pdoc-text .md-rendered ol { margin: 0 0 var(--sp-3) var(--sp-5); color: var(--ink-700); }
.pdoc-text .md-rendered li { margin-bottom: 4px; }
.pdoc-text mark { background: rgba(245,158,11,.35); color: inherit; border-radius: 3px; padding: 0 2px; }
:root[data-theme="dark"] .pdoc-text mark { background: rgba(245,158,11,.30); }

/* ── 7. Chunks ──────────────────────────────────────────────────────────── */
.pdoc-chunks { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.pdoc-chunk { flex: none; border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.pdoc-chunk-head {
    display: flex; align-items: center; gap: var(--sp-3); padding: 8px var(--sp-3);
    background: var(--ink-50); border-bottom: 1px solid var(--hairline);
    font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-500);
}
.pdoc-chunk-idx { font-weight: 800; color: var(--pbl-accent); }
:root[data-theme="dark"] .pdoc-chunk-idx { color: var(--violet-soft); }
.pdoc-chunk-txt { padding: var(--sp-3); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-700); white-space: pre-wrap; overflow-wrap: anywhere; }
.pdoc-chunk-meta { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 var(--sp-3) var(--sp-3); }
.pdoc-chip { font-family: var(--font-mono); font-size: var(--fs-2xs); padding: 2px 7px; border-radius: 999px; background: var(--ink-50); border: 1px solid var(--border-hi); color: var(--ink-500); }
.pdoc-chip--blue { color: var(--info); background: rgba(29,78,216,.08); border-color: rgba(29,78,216,.22); }
.pdoc-chunks-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-500); }

/* ── 8. États pleine surface de la visionneuse ──────────────────────────── */
.pdoc-state {
    flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: var(--sp-8) var(--sp-6); gap: var(--sp-3);
}
.pdoc-state-ico {
    width: 56px; height: 56px; flex: none; border-radius: var(--r-lg); display: grid; place-items: center;
    background: var(--ink-50); color: var(--ink-400); border: 1px solid var(--border-hi);
}
.pdoc-state-ico svg { width: 24px; height: 24px; }
.pdoc-state h3 { font-size: var(--fs-md); }
.pdoc-state p { font-size: var(--fs-sm); color: var(--ink-500); max-width: 46ch; }
.pdoc-state code { font-size: var(--fs-xs); background: var(--ink-50); border: 1px solid var(--border-hi); border-radius: var(--r-xs); padding: 3px 7px; color: var(--ink-700); overflow-wrap: anywhere; }
.pdoc-state--warn .pdoc-state-ico { background: var(--warn-50); border-color: var(--warn-200); color: var(--warn); }
.pdoc-state--err  .pdoc-state-ico { background: var(--danger-soft); border-color: rgba(239,68,68,.3); color: var(--danger); }
.pdoc-state--busy .pdoc-state-ico { background: var(--pbl-accent-soft); border-color: var(--pbl-accent-border); color: var(--pbl-accent); }
:root[data-theme="dark"] .pdoc-state--busy .pdoc-state-ico { color: var(--violet-soft); }
.pdoc-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); }

.pdoc-notice {
    flex: none; display: flex; align-items: flex-start; gap: var(--sp-3); margin: var(--sp-4) var(--sp-4) 0;
    padding: var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-sm);
    background: var(--warn-50); border: 1px solid var(--warn-200); color: var(--ink-700);
}
.pdoc-notice svg { width: 15px; height: 15px; flex: none; color: var(--warn); margin-top: 1px; }

/* ── 9. Repli responsive ────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    /* Le split passe en 2 rangées : liste au-dessus, visionneuse en dessous.
       minmax(240px, 38%) et pas un simple pourcentage : sous ~820px de haut,
       34 % ne laissait qu'UNE carte visible (mesuré en preview le 2026-07-29). */
    .pdoc-split { grid-template-columns: 1fr; grid-template-rows: minmax(240px, 38%) 1fr; }
}
@media (max-width: 860px) {
    .pdoc-filters { flex-wrap: wrap; }
    .pdoc-drop { flex-wrap: wrap; }
    .pdoc-text { padding: var(--sp-4); }
    .pdoc-paper { padding: var(--sp-3); }
    /* Le nom du fichier reste prioritaire : les actions passent sous le titre. */
    .pdoc-vw-head { flex-wrap: wrap; }
    .pdoc-vw-actions { width: 100%; justify-content: flex-end; }
}