/* ==========================================================================
   KSKLR v2 — ERP shell. Phase 13B: Darsy visual skin (see /darsy ERP).
   Open Sans, PSG navy/gold palette, grey-scale background, compact dense layout.
   The legacy KSKLR token names (--ink/--paper/--line/--grey-*) are remapped to
   Darsy values so the existing rules reskin; a "Darsy skin" override section at
   the end fine-tunes the sidebar / topbar / tabs / tables / cards / buttons /
   forms / modals to match Darsy comptabilite.php.
   ========================================================================== */

:root {
    /* PSG / Darsy palette */
    --psg-navy: #001a2f;
    --psg-navy-light: #002947;
    --psg-navy-dark: #000d1a;
    --psg-red: #DA291C;
    --psg-red-dark: #b21f15;
    --psg-gold: #40aef0;
    --psg-gold-light: #7ec3ec;
    --psg-gold-dark: #0f79b8;

    /* Darsy grey scale */
    --grey-50:  #f8fafc;
    --grey-100: #f1f5f9;
    --grey-200: #e2e8f0;
    --grey-300: #cbd5e1;
    --grey-400: #94a3b8;
    --grey-500: #64748b;
    --grey-600: #475569;
    --grey-700: #334155;
    --grey-800: #1e293b;
    --grey-900: #0f172a;

    /* Semantic */
    --success: #10b981;
    --warning: #f59e0b;
    --danger:  #ef4444;
    --info:    #3b82f6;

    /* Legacy KSKLR aliases → Darsy values (so existing rules reskin) */
    --ink:        var(--psg-navy);   /* sidebar bg, primary buttons, titles, refs */
    --ink-soft:   var(--psg-navy-light);
    --paper:      #ffffff;           /* cards / topbar */
    --paper-2:    var(--grey-100);   /* app background */
    --line:       #d9d9d9;           /* card / panel / divider borders (Darsy card) */
    --line-2:     var(--grey-300);   /* stronger control borders */

    --sidebar-w:  260px;
    --topbar-h:   60px;

    --font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-condensed: 'Open Sans', 'Arial Narrow', sans-serif;
    --mono: 'SF Mono', Menlo, Monaco, Consolas, monospace;

    --radius: 8px;       /* buttons / inputs (Darsy --radius-md) */
    --radius-lg: 12px;   /* cards / panels / tabs (Darsy --radius-lg) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; height: 100%; overflow: hidden; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--grey-800);
    background: var(--grey-100);
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ── Layout (full-height shell; scrolling happens inside the content) ──────── */
.app { display: flex; height: 100vh; overflow: hidden; }

.main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    margin-left: var(--sidebar-w);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-w);
    background: var(--ink);
    color: #f5f5f5;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 100;
}

.sidebar-header {
    padding: 20px 22px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

.sidebar-logo {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #fff;
}

.sidebar-logo .dot { color: var(--grey-400); }

.sidebar-subtitle {
    margin-top: 4px;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--grey-400);
}

.sidebar-nav { padding: 14px 12px; flex: 1; }

.nav-section { margin-bottom: 18px; }

.nav-section-title {
    padding: 0 10px 8px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--grey-500);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: #cfcfcf;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.nav-item:hover:not(:disabled) { background: rgba(255,255,255,0.07); color: #fff; }
.nav-item:focus-visible { outline: none; background: rgba(255,255,255,0.10); color: #fff; }

.nav-item.active {
    background: #fff;
    color: var(--ink);
    font-weight: 600;
}

.nav-icon { width: 17px; height: 17px; flex-shrink: 0; }

/* Disabled navigation items that are present but not available in the current flow. */
.nav-soon-item { cursor: default; opacity: 0.6; }
.nav-soon-item:disabled { color: var(--grey-500); }
.nav-soon {
    margin-left: auto; flex-shrink: 0;
    font-size: 0.54rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--grey-500); border: 1px solid rgba(255,255,255,0.16);
    padding: 1px 6px; border-radius: 999px;
}

/* Affaire-context section (revealed when an affaire is open) */
.nav-context { margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.10); padding-top: 14px; }
.nav-context.is-hidden { display: none; }
.nav-context .nav-section-title { color: #d6d6d6; }
.nav-item.nav-sub { font-size: 0.82rem; }
.nav-item.nav-sub .nav-icon { width: 15px; height: 15px; opacity: 0.85; }

/* Nested procedure list under "Procédures" */

.sidebar-footer {
    padding: 14px 22px;
    border-top: 1px solid rgba(255,255,255,0.10);
    font-size: 0.66rem;
    color: var(--grey-500);
    letter-spacing: 0.04em;
}

/* ── Topbar ───────────────────────────────────────────────────────────── */
.topbar {
    height: var(--topbar-h);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 90;
}

.topbar-title { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; }

/* Breadcrumb / current context (Phase 9A) */
.breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    min-width: 0; max-width: 46%;
}
.crumb {
    font-size: 0.82rem; color: var(--grey-500);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px;
}
.crumb-current { color: var(--ink); font-weight: 700; }
.crumb-sep { color: var(--grey-400); font-size: 0.85rem; }
.crumb-link {
    border: 0; background: transparent; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 0.82rem; color: var(--grey-600);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px;
}
.crumb-link:hover { color: var(--ink); text-decoration: underline; }
.crumb-link:focus-visible { outline: none; color: var(--ink); text-decoration: underline; }
@media (max-width: 720px) { .breadcrumb { max-width: 100%; } }

/* Brief highlight when a context-nav item scrolls a panel into view. */
@keyframes nav-flash-kf {
    0% { box-shadow: 0 0 0 2px var(--ink); }
    100% { box-shadow: 0 0 0 2px transparent; }
}
.nav-flash { animation: nav-flash-kf 0.9s ease-out; border-radius: var(--radius); }

.topbar-search {
    flex: 1;
    max-width: 460px;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 13px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--grey-500);
}

.topbar-search:focus-within { border-color: var(--ink); background: #fff; }
.topbar-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.topbar-search input {
    border: none; background: transparent; outline: none;
    font-family: inherit; font-size: 0.85rem; color: var(--ink); flex: 1; min-width: 0;
}

.topbar-spacer { flex: 1; }

.topbar-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--grey-600);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}
.topbar-btn:hover { border-color: var(--ink); color: var(--ink); }
.topbar-btn svg { width: 17px; height: 17px; }

.topbar-user {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 6px 5px 12px;
    border-left: 1px solid var(--line);
}
.topbar-account-summary {
    display: inline-flex; align-items: center; gap: 10px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.topbar-account-summary:hover .topbar-user-name { color: var(--ink); }
.topbar-account-summary:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
.topbar-user-name { font-size: 0.82rem; font-weight: 600; }
.topbar-user-role { font-size: 0.66rem; color: var(--grey-500); text-transform: uppercase; letter-spacing: 0.08em; }
.topbar-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--ink); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700;
}

/* ── Content ──────────────────────────────────────────────────────────── */
.content { padding: 24px; flex: 1; }

.workspace-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.workspace-eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--grey-500);
}

.workspace-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; margin-top: 4px; }
.workspace-meta  { margin-top: 6px; font-size: 0.8rem; color: var(--grey-500); }
.workspace-meta .ref { font-family: var(--mono); color: var(--grey-600); }

.workspace-actions { display: flex; gap: 8px; }

.btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 15px;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    background: var(--ink); color: #fff;
    font-family: inherit; font-size: 0.8rem; font-weight: 600;
    cursor: pointer;
}
.btn svg { width: 15px; height: 15px; }
.btn.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.btn.btn-ghost:hover { border-color: var(--ink); }

/* Workspace section grid */
.workspace-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 980px) { .workspace-grid { grid-template-columns: 1fr; } }

.panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

.panel-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}
.panel-head svg { width: 16px; height: 16px; color: var(--grey-600); }
.panel-title { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.panel-count {
    margin-left: auto;
    font-size: 0.68rem; font-weight: 700;
    color: var(--grey-500);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 1px 8px;
}

.panel-body { flex: 1; padding: 16px; }

/* Empty-state placeholder */
.empty {
    height: 100%;
    min-height: 150px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    gap: 8px;
    color: var(--grey-400);
    border: 1px dashed var(--line-2);
    border-radius: var(--radius);
    padding: 24px;
}
.empty svg { width: 26px; height: 26px; color: var(--grey-300); }
.empty-title { font-size: 0.82rem; font-weight: 600; color: var(--grey-600); }
.empty-hint  { font-size: 0.74rem; color: var(--grey-400); max-width: 280px; }

/* ==========================================================================
   Phase 5A — auth: boot splash, login screen, topbar user/logout
   ========================================================================== */

.is-hidden { display: none !important; }

/* Boot splash (shown until /auth/me resolves) */
.boot {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--paper-2);
}
.boot-spinner {
    width: 26px; height: 26px;
    border: 2px solid var(--line-2);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: boot-spin 0.7s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }

/* Login screen */
.login-view {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: var(--paper-2);
    padding: 24px;
}
.login-card {
    width: 100%; max-width: 360px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 26px 24px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.login-brand {
    font-size: 1.3rem; font-weight: 800; letter-spacing: 0.18em; color: var(--ink);
}
.login-brand .dot { color: var(--grey-400); }
.login-sub {
    margin-top: -8px; margin-bottom: 4px;
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--grey-500);
}
.login-field { display: flex; flex-direction: column; gap: 5px; }
.login-field > span {
    font-size: 0.72rem; font-weight: 700; color: var(--grey-600);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.login-field input {
    height: 38px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper-2); color: var(--ink);
    font-family: inherit; font-size: 0.9rem;
}
.login-field input:focus { outline: none; border-color: var(--ink); background: #fff; }
.login-error {
    border: 1px solid var(--ink);
    background: var(--grey-100);
    color: var(--ink);
    padding: 9px 12px; border-radius: var(--radius);
    font-size: 0.8rem; font-weight: 600;
}
.login-submit { width: 100%; justify-content: center; height: 40px; margin-top: 2px; }
.login-submit:disabled { opacity: 0.55; cursor: progress; }

/* Topbar user block + logout */
.topbar-user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.topbar-user-sub { display: flex; align-items: center; gap: 6px; font-size: 0.66rem; color: var(--grey-500); }
.topbar-user-sub:empty { display: none; }
.topbar-logout { margin-left: 4px; }
.topbar-logout:disabled { opacity: 0.5; cursor: progress; }

/* ==========================================================================
   Phase 5B — matters list + data-bound workspace identity (monochrome)
   ========================================================================== */

/* The authenticated shell fills the viewport; panes scroll independently. */
.app { height: 100vh; overflow: hidden; }

/* Phase 11B: holds the three stacked content modes (one visible). */
.workspace-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.aff-mode { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 24px; }
.aff-mode.is-hidden { display: none; }

/* Status / conflict chips */
.chip {
    display: inline-block; flex-shrink: 0;
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 8px;
    color: var(--grey-600); background: var(--paper); white-space: nowrap;
}
.chip-strong { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Affaire container identity header */
.workspace-id { min-width: 0; }
.workspace-title { overflow-wrap: anywhere; }
.workspace-meta { overflow-wrap: anywhere; }
.workspace-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; flex-shrink: 0; }
.workspace-desc {
    margin-top: 12px; font-size: 0.85rem; color: var(--grey-600);
    max-width: 74ch; white-space: pre-wrap; overflow-wrap: anywhere;
}
.workspace-desc:empty { display: none; }

/* Responsive: collapse the fixed sidebar above the stacked content modes. */
@media (max-width: 820px) {
    html, body { height: auto; overflow: visible; }
    .app { height: auto; overflow: visible; flex-direction: column; }
    .sidebar { position: static; width: 100%; height: auto; }
    .main { margin-left: 0; height: auto; overflow: visible; }
    .workspace-layout { flex-direction: column; }
}

/* ==========================================================================
   Phase 5C — affair timeline (Chronologie), monochrome, read-only
   ========================================================================== */

.panel-timeline .panel-body { display: flex; flex-direction: column; min-height: 0; }

/* Panel-level state lines (loading / error / unavailable) */
.tl-state { color: var(--grey-500); font-size: 0.82rem; }

/* Empty state fills the body like the other panels' placeholders */
.panel-timeline .panel-body > .empty { flex: 1; }

/* Scrollable, bounded event list — keeps the panel stable when long */
.timeline {
    flex: 1;
    min-height: 0;
    max-height: 440px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.tl-event {
    display: flex;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}
.tl-event:last-child { border-bottom: 0; }

.tl-date { flex-shrink: 0; width: 92px; display: flex; flex-direction: column; gap: 2px; }
.tl-date-main {
    font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
    color: var(--ink); overflow-wrap: anywhere;
}
.tl-date-note {
    font-size: 0.62rem; color: var(--grey-400);
    text-transform: uppercase; letter-spacing: 0.04em; overflow-wrap: anywhere;
}

.tl-main { flex: 1; min-width: 0; }
.tl-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.tl-title { font-size: 0.85rem; font-weight: 600; overflow-wrap: anywhere; }

.tl-body {
    margin-top: 5px; font-size: 0.8rem; color: var(--grey-600);
    white-space: pre-wrap; overflow-wrap: anywhere;
}

.tl-meta { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tl-meta:empty { display: none; }
.tl-tag { font-size: 0.66rem; color: var(--grey-600); overflow-wrap: anywhere; }
.tl-tag .tl-k { color: var(--grey-400); }

/* Narrow screens: stack the date above the event content */
@media (max-width: 560px) {
    .tl-event { flex-direction: column; gap: 5px; }
    .tl-date { width: auto; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
}

/* ==========================================================================
   Phase 5D — affair claims (Demandes), monochrome, read-only
   ========================================================================== */

.panel-claims .panel-body { display: flex; flex-direction: column; min-height: 0; }

/* Panel-level state lines (loading / error / unavailable) */
.cl-state { color: var(--grey-500); font-size: 0.82rem; }

/* Empty state fills the body like the other panels' placeholders */
.panel-claims .panel-body > .empty { flex: 1; }

/* Scrollable, bounded claims list — keeps the panel stable when long */
.claims {
    flex: 1;
    min-height: 0;
    max-height: 440px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.claim { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.claim:last-child { border-bottom: 0; }

.claim-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.claim-category {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--grey-500); overflow-wrap: anywhere;
}

.claim-statement {
    margin-top: 5px; font-size: 0.85rem; font-weight: 600; overflow-wrap: anywhere;
}

.claim-meta { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.claim-meta:empty { display: none; }

.claim-notes {
    margin-top: 6px; font-size: 0.8rem; color: var(--grey-600);
    white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ==========================================================================
   Phase 5E — affair evidence (Pièces), monochrome, read-only
   ========================================================================== */

.panel-evidence .panel-body { display: flex; flex-direction: column; min-height: 0; }

/* Panel-level state lines (loading / error / unavailable) */
.ev-state { color: var(--grey-500); font-size: 0.82rem; }

/* Empty state fills the body like the other panels' placeholders */
.panel-evidence .panel-body > .empty { flex: 1; }

/* Scrollable, bounded evidence list — keeps the panel stable when long */
.evidence {
    flex: 1;
    min-height: 0;
    max-height: 440px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.ev { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ev:last-child { border-bottom: 0; }

.ev-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.ev-ref {
    font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
    color: var(--grey-600); overflow-wrap: anywhere;
}

.ev-title { margin-top: 5px; font-size: 0.85rem; font-weight: 600; overflow-wrap: anywhere; }

.ev-desc {
    margin-top: 5px; font-size: 0.8rem; color: var(--grey-600);
    white-space: pre-wrap; overflow-wrap: anywhere;
}

.ev-meta { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ev-meta:empty { display: none; }

/* Attached-file metadata (safe fields only — never a storage path) */
.ev-file {
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.ev-file-name { font-size: 0.78rem; font-weight: 600; overflow-wrap: anywhere; }
.ev-file-meta { margin-top: 2px; font-size: 0.7rem; color: var(--grey-500); overflow-wrap: anywhere; }
.ev-file-hash {
    margin-top: 2px; font-family: var(--mono); font-size: 0.66rem; color: var(--grey-400);
    overflow-wrap: anywhere;
}

/* Attachment actions (Phase 8A): upload / download / replace / delete */
.ev-file-actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.ev-file-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 10px;
    border: 1px solid var(--line-2); border-radius: var(--radius);
    background: var(--paper); color: var(--grey-700);
    font-family: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}
.ev-file-btn:hover { border-color: var(--ink); color: var(--ink); }
.ev-file-btn:focus-visible { outline: none; border-color: var(--ink); color: var(--ink); }
.ev-file-btn svg { width: 14px; height: 14px; }

.file-drop-form {
    grid-template-columns: 1fr 1fr;
}
.file-drop-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 154px;
    padding: 18px;
    border: 2px dashed var(--grey-300);
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, var(--grey-50));
    color: var(--grey-600);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.14s, background 0.14s, color 0.14s, box-shadow 0.14s;
}
.file-drop-zone:hover,
.file-drop-zone:focus-within,
.file-drop-zone.is-dragging {
    border-color: var(--psg-navy);
    color: var(--psg-navy);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(64,174,240,0.12);
}
.file-drop-zone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.file-drop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--grey-100);
}
.file-drop-icon svg { width: 23px; height: 23px; }
.file-drop-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--psg-navy);
}
.file-drop-sub {
    max-width: 100%;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--grey-500);
    overflow-wrap: anywhere;
}
.file-manager-body {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: 16px;
    padding: 18px;
    overflow: auto;
}
.file-manager-section {
    min-width: 0;
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.file-preview-section {
    grid-column: 1 / -1;
    min-width: 0;
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.file-manager-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--grey-100);
}
.file-manager-section-head h3 {
    margin: 0;
    color: var(--psg-navy);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.file-version-list {
    display: flex;
    flex-direction: column;
    max-height: 440px;
    overflow: auto;
}
.file-version-state {
    padding: 20px 14px;
    color: var(--grey-500);
    font-size: 0.82rem;
    font-weight: 700;
}
.file-version-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--grey-100);
}
.file-version-row:last-child { border-bottom: 0; }
.file-version-row.is-primary {
    background: rgba(64,174,240,0.07);
}
.file-version-main {
    min-width: 0;
    display: grid;
    gap: 4px;
}
.file-version-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}
.file-version-head strong {
    color: var(--psg-navy);
    font-size: 0.86rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.file-version-number {
    font-family: var(--mono);
    color: var(--psg-gold-dark);
    font-size: 0.72rem;
    font-weight: 900;
}
.file-version-meta,
.file-version-notes,
.file-version-hash {
    color: var(--grey-500);
    font-size: 0.72rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.file-version-hash {
    font-family: var(--mono);
    color: var(--grey-400);
    font-size: 0.66rem;
}
.file-version-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}
.file-preview-body {
    min-height: 280px;
    max-height: 58vh;
    overflow: auto;
    background: #f7f7f8;
}
.file-preview-image {
    display: block;
    max-width: 100%;
    max-height: 58vh;
    margin: 0 auto;
    object-fit: contain;
}
.file-preview-frame {
    display: block;
    width: 100%;
    min-height: 58vh;
    border: 0;
    background: #fff;
}
.file-preview-text {
    margin: 0;
    padding: 14px;
    color: var(--grey-800);
    font-family: var(--mono);
    font-size: 0.76rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ── File-manager modal: full-screen, 6/12 left (versions + add-version) · 6/12 preview.
   The preview needs the room, so the card fills the viewport and each column scrolls. ── */
#file-manager-modal .modal-card {
    max-width: none; max-height: none;
    width: 100%; height: 100%;
}
#file-manager-modal .file-manager-body {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr);
    flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.fm-left {
    display: flex; flex-direction: column; gap: 14px;
    min-height: 0; min-width: 0;
}
.fm-left .file-manager-section {
    flex: 1 1 auto; display: flex; flex-direction: column; min-height: 140px;
}
.fm-left .file-version-list { flex: 1 1 auto; max-height: none; }
/* The add-version block sits under the versions, in the left column, as its own card. */
.fm-left #file-manager-form {
    flex: 0 0 auto; overflow: visible;
    padding: 12px 14px;
    border: 1px solid var(--grey-200); border-radius: 12px; background: #fff;
}
/* Smaller drop zone so the whole add block fits without scrolling. */
#file-manager-form .file-drop-zone { min-height: 88px; padding: 12px; }
#file-manager-form .file-drop-icon { width: 34px; height: 34px; }
#file-manager-form .file-drop-icon svg { width: 18px; height: 18px; }
#file-manager-form .file-drop-title { font-size: 0.82rem; }
/* Preview fills the right column. */
#file-manager-modal .file-preview-section {
    grid-column: auto; min-height: 0;
    display: flex; flex-direction: column;
}
#file-manager-modal .file-preview-body {
    flex: 1 1 auto; min-height: 0; max-height: none; height: auto;
}
#file-manager-modal .file-preview-image { max-height: 100%; }
#file-manager-modal .file-preview-frame { height: 100%; min-height: 0; }

@media (max-width: 860px) {
    .file-manager-body,
    #file-manager-modal .file-manager-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        overflow: auto;
    }
    #file-manager-modal .modal-card { width: 100%; height: 100%; }
    .fm-left .file-manager-section { min-height: 200px; }
    .file-version-row {
        flex-direction: column;
    }
    .file-version-actions {
        justify-content: flex-start;
    }
}

.ev-notes {
    margin-top: 6px; font-size: 0.8rem; color: var(--grey-600);
    white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ==========================================================================
   Phase 5F — Analyse (read-only law-matrix projection), monochrome
   ========================================================================== */

.panel-matrix .panel-body { display: flex; flex-direction: column; min-height: 0; }

/* Panel-level state lines (loading / error / unavailable) */
.mx-state { color: var(--grey-500); font-size: 0.82rem; }

/* Empty state fills the body like the other panels' placeholders */
.panel-matrix .panel-body > .empty { flex: 1; }

/* Full-height claim list — the Loi tab flows with the page, no inner scroll. */
.matrix {
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* Claim card */
.mx-claim { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.mx-claim:last-child { border-bottom: 0; }
.mx-claim-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* La rangée d'actions de l'en-tête : tout au gabarit pilule des boutons IA. */
.mx-claim-head .row-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mx-claim-head .bb-mini {
    display: inline-flex; align-items: center; gap: 5px;
    border-radius: 999px; padding: 4px 12px;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    color: var(--psg-navy); background: #fff; border: 1px solid var(--st-line);
}
.mx-claim-head .bb-mini:hover { border-color: var(--psg-navy); }
/* Le chef d'accusation est un TITRE — pas un libellé plus petit que sa description. */
.mx-cat {
    font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em;
    color: var(--psg-navy); overflow-wrap: anywhere;
}
.mx-statement { margin-top: 5px; font-size: 0.85rem; font-weight: 600; overflow-wrap: anywhere; }

/* Plain count tag (never a score) */
.mx-count-tag {
    margin-left: auto;
    display: inline-flex; align-items: center;
    font-size: .72rem; font-weight: 700; color: var(--grey-500);
    border: 1px solid var(--st-line); border-radius: 999px; height: 25px; padding: 0 12px; white-space: nowrap;
}

/* Requirement attachments nested under a claim */
.mx-reqs { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.mx-req {
    padding: 8px 10px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.mx-req-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mx-req-head .row-actions { margin-left: auto; }
.mx-desc { margin: 5px 0 0; font-size: 0.78rem; color: var(--grey-700); line-height: 1.55; overflow-wrap: anywhere; }
.mx-ref { font-family: var(--mono); font-size: 0.66rem; font-weight: 600; color: var(--grey-600); overflow-wrap: anywhere; }
.mx-req-title { font-size: 0.8rem; font-weight: 600; overflow-wrap: anywhere; }
.mx-element { margin-top: 3px; font-size: 0.76rem; color: var(--grey-600); overflow-wrap: anywhere; }

.mx-meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mx-meta:empty { display: none; }

/* Sub-label between requirement meta and its evidence links */
.mx-sub {
    margin-top: 7px;
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--grey-500);
}

/* Evidence links nested under a requirement */
.mx-links { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.mx-link { padding: 6px 8px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.mx-link-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.mx-link-title { font-size: 0.78rem; font-weight: 600; overflow-wrap: anywhere; }
.mx-link-meta { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mx-link-meta:empty { display: none; }

/* In-card neutral empty states (no requirements / no links) */
.mx-empty { margin-top: 6px; font-size: 0.74rem; color: var(--grey-400); }

.mx-notes {
    margin-top: 5px; font-size: 0.78rem; color: var(--grey-600);
    white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ==========================================================================
   Phase 6A — create timeline event: panel action + modal form (monochrome)
   ========================================================================== */

/* Small action button in a panel head (e.g. "add event") */
.panel-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border: 1px solid var(--line-2); border-radius: var(--radius);
    background: var(--paper); color: var(--grey-600); cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}
.panel-action:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.panel-action:disabled { opacity: 0.4; cursor: default; }
.panel-action svg { width: 15px; height: 15px; }

/* Modal */
.modal {
    position: fixed !important; top: 0; right: 0; bottom: 0; left: 0; z-index: 200;
    width: 100%; min-width: 100vw; height: 100%; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.modal:not(.is-hidden) { display: flex !important; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.45); }
.modal-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 560px; max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}
.modal-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 16px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.modal-title { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.modal-sub { margin-top: 3px; font-size: 0.72rem; color: var(--grey-500); overflow-wrap: anywhere; }
.modal-close {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); color: var(--grey-600); cursor: pointer;
}
.modal-close:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.modal-close:disabled { opacity: 0.5; cursor: progress; }
.modal-close svg { width: 16px; height: 16px; }

/* Form (two-column grid; full-width rows span both) */
.modal-form {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px;
    padding: 18px; overflow-y: auto;
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field-row-start { grid-column: 1; }
.field > span {
    font-size: 0.7rem; font-weight: 700; color: var(--grey-600);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.field > span i { color: var(--ink); font-style: normal; margin-left: 2px; }
.field input, .field select, .field textarea {
    height: 36px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper-2); color: var(--ink);
    font-family: inherit; font-size: 0.85rem; width: 100%; min-width: 0;
}
.field textarea { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: #fff; }

.field-note { display: block; margin-top: 4px; font-size: 0.7rem; color: var(--grey-500); line-height: 1.45; }
.field-check { display: flex; align-items: center; gap: 8px; }
.field-check input { width: 16px; height: 16px; flex-shrink: 0; }
.field-check span { font-size: 0.82rem; font-weight: 600; color: var(--grey-700); }

.form-error {
    grid-column: 1 / -1;
    border: 1px solid var(--ink); background: var(--grey-100); color: var(--ink);
    padding: 9px 12px; border-radius: var(--radius); font-size: 0.8rem; font-weight: 600;
    overflow-wrap: anywhere;
}

.modal-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
/* display:flex l'emporterait sur l'attribut hidden (règle UA) — jamais. */
.modal-actions[hidden] { display: none; }
.btn:disabled { opacity: 0.55; cursor: progress; }

/* Narrow screens: single column, full-screen sheet */
@media (max-width: 560px) {
    .modal { padding: 0; }
    .modal-card { max-width: 100%; max-height: 100vh; height: 100%; border: 0; border-radius: 0; }
    .modal-form { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Phase 6C — timeline event edit/delete: row actions, edit mode, confirm modal
   ========================================================================== */

/* Per-row edit/delete controls in a timeline event */
.tl-actions { flex-shrink: 0; display: flex; gap: 4px; align-items: flex-start; }
.row-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border: 1px solid transparent; border-radius: var(--radius);
    background: none; color: var(--grey-400); cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.row-action:hover { border-color: var(--line-2); color: var(--ink); background: var(--paper-2); }
.row-action:focus-visible { outline: none; border-color: var(--ink); color: var(--ink); }
.row-action svg { width: 15px; height: 15px; }

/* Disabled form fields while an edit GET is loading */
.field input:disabled, .field select:disabled, .field textarea:disabled {
    opacity: 0.55; cursor: not-allowed;
}

/* Small confirmation modal (delete / archive) */
.modal-card-sm { max-width: 420px; }
.modal-confirm { padding: 18px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.modal-confirm-text { font-size: 0.9rem; overflow-wrap: anywhere; }
.modal-confirm-note { font-size: 0.78rem; color: var(--grey-500); }
.modal-confirm .modal-actions { margin-top: 6px; }

/* ==========================================================================
   Phase 6D — claim write controls (Demandes): per-row edit/archive actions
   ========================================================================== */

/* Edit/archive buttons sit at the right of the claim header row */
.claim-actions { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }

/* ==========================================================================
   Phase 6E — evidence write controls (Pièces): per-row edit/archive actions
   ========================================================================== */

.ev-actions { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }

/* ==========================================================================
   Phase 7B — provenance / viewpoint attributions: row chips + manage modal
   ========================================================================== */

/* Per-row provenance chips (Chronologie / Demandes / Pièces) */
.attr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.attr-chips:empty { display: none; }
.attr-chip { font-weight: 600; }

/* Attribution modal: a scrollable list of existing rows, then the create/edit form */
.attr-modal-body { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.attr-list {
    padding: 14px 18px;
    display: flex; flex-direction: column; gap: 8px;
    border-bottom: 1px solid var(--line);
}
.attr-empty { font-size: 0.8rem; color: var(--grey-400); }
.attr-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2);
}
.attr-row-text { flex: 1; min-width: 0; font-size: 0.8rem; overflow-wrap: anywhere; }
.attr-row-actions { flex-shrink: 0; display: flex; gap: 4px; }

.attr-form { border-top: 0; }
.attr-form-title {
    grid-column: 1 / -1;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--grey-600);
}

/* ==========================================================================
   Phase 8B — affair sharing / access management: workspace trigger + modal
   ========================================================================== */

/* Right side of the workspace header: the Accès trigger next to the badges */
.workspace-aside { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ws-share { height: 32px; padding: 0 12px; font-size: 0.75rem; }
.ws-share svg { width: 15px; height: 15px; }
.ws-share:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 560px) { .ws-share span { display: none; } .ws-share { padding: 0 9px; } }

/* Access modal: a scrollable list of current grants, then the grant form */
.share-list {
    padding: 14px 18px;
    display: flex; flex-direction: column; gap: 8px;
    border-bottom: 1px solid var(--line);
}
.share-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2);
}
.share-row-info { flex: 1; min-width: 0; }
.share-row-name { font-size: 0.82rem; font-weight: 600; overflow-wrap: anywhere; }
.share-row-meta { margin-top: 2px; font-size: 0.72rem; color: var(--grey-500); overflow-wrap: anywhere; }
.share-row-level {
    flex-shrink: 0;
    height: 30px; padding: 0 6px;
    border: 1px solid var(--line-2); border-radius: var(--radius);
    background: var(--paper); color: var(--ink);
    font-family: inherit; font-size: 0.74rem;
}
.share-row-level:focus { outline: none; border-color: var(--ink); }
.share-row-level:disabled { opacity: 0.55; cursor: progress; }
.share-form { border-top: 0; }

/* ==========================================================================
   Phase 8C — Intervenants (actors): full-width roster panel + write controls
   ========================================================================== */

/* The actor roster spans the full grid width below the four core panels. */
.panel-actors { grid-column: 1 / -1; }

.actors {
    flex: 1;
    min-height: 0;
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
/* Two-up rows on wide screens; the list scrolls within the panel. */
@media (min-width: 720px) {
    .actors { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
    .actors .ac:nth-child(odd) { border-right: 1px solid var(--line); }
}

.ac { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ac:last-child { border-bottom: 0; }
.ac-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.ac-actions { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }
.ac-title { margin-top: 5px; font-size: 0.85rem; font-weight: 600; overflow-wrap: anywhere; }
.ac-meta { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ac-meta:empty { display: none; }
.ac-notes {
    margin-top: 6px; font-size: 0.8rem; color: var(--grey-600);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.ac-state { font-size: 0.8rem; color: var(--grey-500); padding: 4px 2px; }

/* "Apparaît dans" cell — the pièces / allégations that name an intervenant.
   An intervenant can have several, so they stack as compact truncated lines. */
.ac-links { max-width: 320px; }
.ac-links-list { display: flex; flex-direction: column; gap: 2px; }
.ac-link {
    display: block; max-width: 320px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.74rem; color: var(--grey-700);
}
.ac-link .ac-link-ref { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.ac-link-claim { color: var(--grey-600); font-style: italic; }
.ac-link-more { font-size: 0.7rem; font-weight: 700; color: var(--grey-500); }

/* ==========================================================================
   Phase 8D — Procédures: full-width roster panel + write controls
   ========================================================================== */

/* The procedures roster spans the full grid width, near Intervenants. */
.panel-procedures { grid-column: 1 / -1; }

.procedures {
    flex: 1;
    min-height: 0;
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
@media (min-width: 720px) {
    .procedures { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
    .procedures .pr:nth-child(odd) { border-right: 1px solid var(--line); }
}

.pr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.pr:last-child { border-bottom: 0; }
.pr-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pr-ref {
    font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
    color: var(--grey-600); overflow-wrap: anywhere;
}
.pr-actions { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }
.pr-title { margin-top: 5px; font-size: 0.85rem; font-weight: 600; overflow-wrap: anywhere; }
.pr-meta { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pr-meta:empty { display: none; }
.pr-notes {
    margin-top: 6px; font-size: 0.8rem; color: var(--grey-600);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.pr-state { font-size: 0.8rem; color: var(--grey-500); padding: 4px 2px; }

/* ==========================================================================
   Phase 9D — Matrice de défense (read-only projection of the 9C defense-matrix)
   ========================================================================== */

.panel-defense { grid-column: 1 / -1; }
.df-state { font-size: 0.8rem; color: var(--grey-500); padding: 4px 2px; }

/* Builder-style modal lists — shared by the requirements builder and relations modals */
.modal-card-wide { max-width: 860px; }
.def-builder-body {
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px 18px; overflow-y: auto;
}
.def-builder-section {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); padding: 12px;
}
.def-builder-section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 10px;
}
.def-builder-section-head h3 {
    margin: 0; font-size: 0.78rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey-700);
}
.def-builder-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px;
}
.def-builder-list {
    margin-top: 10px; display: flex; flex-direction: column; gap: 6px;
}
.def-builder-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; padding: 8px 10px; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--paper-2);
}
.def-builder-row-main { min-width: 0; }
.def-builder-row-title { font-size: 0.82rem; font-weight: 700; overflow-wrap: anywhere; }
.def-builder-row-meta { margin-top: 2px; font-size: 0.74rem; color: var(--grey-600); overflow-wrap: anywhere; }
.def-builder-empty { font-size: 0.78rem; color: var(--grey-500); padding: 4px 2px; }
.df-mini-action { width: 28px; height: 28px; }

@media (max-width: 760px) {
    .def-builder-grid { grid-template-columns: 1fr; }
    .def-builder-section-head { align-items: flex-start; flex-direction: column; }
}

/* Plainte / Assignation — read-only identity card (v2 first tab) */
.pl-state { font-size: 0.8rem; color: var(--grey-500); padding: 4px 2px; }
.pl-fiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; max-width: 820px; }
.pl-row { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pl-key { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--grey-500); }
.pl-val { font-size: 0.9rem; color: var(--ink); overflow-wrap: anywhere; }
.pl-objet { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
.pl-objet > div:last-child { font-size: 0.85rem; color: var(--grey-700); overflow-wrap: anywhere; }
.pl-note { grid-column: 1 / -1; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 0.75rem; color: var(--grey-500); }
.pl-acts-head { margin: 20px 0 9px; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--grey-500); }
@media (max-width: 640px) { .pl-fiche { grid-template-columns: 1fr; } }

/* Search filter above the pièce procedure checklist (v2) */
.checklist-search {
    width: 100%; height: 34px; margin-bottom: 8px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper-2); color: var(--ink); font-family: inherit; font-size: 0.85rem;
}
.checklist-search:focus { outline: none; border-color: var(--ink); background: #fff; }

/* "+ Ajouter" buttons sit at the right edge of each case-panel head. */
.panel-head .panel-add { margin-left: auto; }
/* The icon must follow the button's white text, not the grey ".panel-head svg" color. */
.panel-head .panel-add svg { color: inherit; }
/* When a count already pushes the group right (e.g. Procédures), the button just
   follows it instead of adding a second auto-margin that would split them apart. */
.panel-head .panel-count ~ .panel-add { margin-left: 0; }

/* ==========================================================================
   Phase 11A — global entry-flow views: Clients + Contacts & Entités.
   Sibling of .workspace-layout inside .main; app.js toggles .is-hidden. Reuses the
   monochrome chips/buttons; rows open the edit modal (now rendered as data tables).
   ========================================================================== */
.global-view { flex: 1; min-width: 0; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; }

.gv-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.gv-id { min-width: 0; }
.gv-eyebrow { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--grey-500); }
.gv-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; margin-top: 4px; }
.gv-sub { margin-top: 6px; font-size: 0.82rem; color: var(--grey-500); max-width: 74ch; overflow-wrap: anywhere; }

.gv-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.gv-search {
    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px;
    padding: 0 12px; height: 38px;
    background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--grey-500);
}
.gv-search:focus-within { border-color: var(--ink); background: #fff; }
.gv-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.gv-search input { border: 0; background: none; outline: none; font-family: inherit; font-size: 0.85rem; color: var(--ink); flex: 1; min-width: 0; }
.gv-filter {
    height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper-2); color: var(--ink); font-family: inherit; font-size: 0.82rem; max-width: 220px;
}
.gv-filter:focus { outline: none; border-color: var(--ink); background: #fff; }
.gv-check, .check-field {
    display: inline-flex; align-items: center; gap: 8px; min-height: 38px;
    font-size: 0.82rem; font-weight: 700; color: var(--grey-600);
}
.gv-check input, .check-field input { width: 15px; height: 15px; accent-color: var(--psg-navy); }
.gv-count { font-size: 0.72rem; font-weight: 600; color: var(--grey-400); margin-left: auto; }

.gv-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.gv-state { padding: 18px 4px; color: var(--grey-500); font-size: 0.82rem; }

.gv-row {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); cursor: pointer; font-family: inherit; color: var(--ink);
}
.gv-row:hover { border-color: var(--line-2); background: var(--paper-2); }
.gv-row:focus-visible { outline: none; border-color: var(--ink); }
.gv-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gv-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gv-row-ref { font-family: var(--mono); font-size: 0.66rem; color: var(--grey-500); }
.gv-row-name { font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }
.gv-row-sub { font-size: 0.76rem; color: var(--grey-500); overflow-wrap: anywhere; }
.gv-row-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; text-align: right; }
.gv-row-contact { font-size: 0.74rem; color: var(--grey-600); }

.gv-note {
    font-size: 0.8rem; color: var(--grey-600);
    border: 1px solid var(--line-2); background: var(--grey-100, #f4f4f5);
    border-radius: var(--radius); padding: 9px 12px;
}
.link-btn {
    display: inline; border: 0; background: none; padding: 0; margin-left: 4px;
    font-family: inherit; font-size: inherit; color: var(--ink); font-weight: 700;
    text-decoration: underline; cursor: pointer;
}

.dir-natural-field {
    transition: opacity 0.14s ease, filter 0.14s ease;
}
.dir-natural-field.is-muted {
    opacity: 0.55;
}
.dir-natural-field.is-muted span {
    color: var(--grey-500);
}

@media (max-width: 820px) {
    .global-view { overflow-y: visible; }
}

/* ==========================================================================
   Phase 11B — Workspace IA repair: sidebar Affaires dropdown + cases, three
   content modes (overview / affaire container / case workspace), Darsy-style
   case tabs. The old duplicate affaires column was removed.
   ========================================================================== */

/* Sidebar — expandable Affaires + nested cases */
.nav-affairs-toggle .nav-chevron { width: 14px; height: 14px; margin-left: auto; opacity: 0.7; transition: transform 0.15s; }
.nav-affairs-toggle[aria-expanded="false"] .nav-chevron { transform: rotate(-90deg); }
.nav-affairs-toggle[aria-expanded="false"] + .nav-affairs-list { display: none; }
.nav-affairs-list { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px; }

.nav-aff-row {
    display: flex; flex-direction: row; align-items: baseline; gap: 6px; width: 100%; text-align: left;
    padding: 7px 10px 7px 28px; border: 0; background: none; cursor: pointer;
    font-family: inherit; color: var(--grey-400); border-radius: 0;
}
/* No background change — just an underline on hover / when selected. */
.nav-aff-row:hover, .nav-aff-row.active { background: none; color: #fff; text-decoration: underline; }
.nav-aff-row-title { font-size: 0.8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nav-aff-row-ref { font-family: var(--mono); font-size: 0.62rem; opacity: 0.7; flex-shrink: 0; white-space: nowrap; }

.nav-aff-all {
    display: flex; align-items: center; width: 100%; text-align: left;
    padding: 7px 10px 7px 28px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 0.76rem; font-weight: 700; line-height: 1.2;
    color: var(--psg-gold); border-radius: 0;
}
.nav-aff-all:hover { background: none; color: #fff; text-decoration: underline; }
.nav-aff-empty, .nav-aff-state { padding: 6px 10px 6px 28px; font-size: 0.74rem; color: var(--grey-600); }

/* Case workspace — Darsy-style header + tab strip + one active panel */
.case-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line);
}
.case-head.is-closed { opacity: 0.72; }
.case-head-id { min-width: 0; }
.case-title { font-size: 1.28rem; font-weight: 800; letter-spacing: 0; margin-top: 2px; overflow-wrap: anywhere; }
.case-meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    max-width: 980px;
}
.case-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    padding: 2px 9px;
    border: 1px solid var(--grey-200);
    border-radius: 999px;
    background: #fff;
    color: var(--grey-600);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}
.case-meta-chip-strong {
    border-color: rgba(0, 26, 47, 0.16);
    background: var(--grey-50);
    color: var(--psg-navy);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 900;
}
.case-meta-status {
    border-color: rgba(64, 174, 240, 0.34);
    background: rgba(64, 174, 240, 0.11);
    color: var(--psg-navy);
}
.case-meta-label {
    color: var(--grey-400);
    font-family: var(--font-condensed);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.case-meta-description {
    flex: 1 1 100%;
    max-width: 82ch;
    margin-top: 2px;
    color: var(--grey-500);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.case-head-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.case-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.case-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.case-tabs {
    display: flex; gap: 2px; flex-wrap: wrap;
    border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
    padding: 0 6px; margin-bottom: 14px;
}
.case-tab {
    padding: 9px 12px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--grey-500); cursor: pointer; border: 0; background: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.case-tab:hover { color: var(--ink); }
.case-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.case-tab .tab-count { background: var(--grey-100); color: var(--grey-500); border-radius: 999px; padding: 1px 7px; font-size: 0.62rem; font-weight: 700; }
.case-tab.active .tab-count { background: var(--ink); color: #fff; }

.case-tabpanel { display: none; }
.case-tabpanel.active { display: block; }
.case-panels .panel { width: 100%; }

@media (max-width: 760px) {
    .case-head { flex-direction: column; }
    .case-head-aside { align-items: flex-start; width: 100%; }
    .case-actions { justify-content: flex-start; }
}

/* Grouped case lists: "Non rattaché à une procédure" subheader */
.case-group-head {
    font-family: var(--mono); font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--grey-500); margin: 14px 0 8px; padding-top: 10px;
    border-top: 1px dashed var(--line-2);
}
.case-group-head:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ==========================================================================
   Phase 11B hardening — data tables (dense, professional). Used by Clients,
   Contacts & Entités, Affaires overview, Procédures, and the case tabs
   (Intervenants / Demandes / Pièces / Chronologie).
   ========================================================================== */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; table-layout: auto; }
.data-table thead th {
    text-align: left; font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--grey-500); padding: 8px 10px;
    border-bottom: 1px solid var(--line-2); white-space: nowrap; background: var(--paper);
    position: sticky; top: 0; z-index: 1;
}
.data-table tbody td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.data-table tbody tr:hover { background: var(--paper-2); }
.data-table .col-ref { font-family: var(--mono); font-size: 0.7rem; color: var(--grey-500); white-space: nowrap; }
.data-table .col-strong { font-weight: 600; }
.data-table .cell-ell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table .col-wide { max-width: 420px; }
.data-table .col-actions { width: 1%; white-space: nowrap; text-align: right; }
.data-table .row-actions { display: inline-flex; gap: 4px; justify-content: flex-end; }
.data-table .row-actions svg { width: 18px; height: 18px; }
.data-table .chip { vertical-align: middle; }
.data-table .attr-chips { display: inline; margin-left: 6px; }

.row-clickable { cursor: pointer; }
.row-muted td { opacity: 0.55; }
.row-muted:hover td { opacity: 0.8; }

.table-state td, td.table-state {
    padding: 16px 10px; text-align: center; color: var(--grey-500); font-size: 0.82rem;
}
.table-group td {
    background: var(--paper-2); font-family: var(--mono); font-size: 0.64rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey-600);
    padding: 7px 10px; border-bottom: 1px solid var(--line-2);
}

/* Let dense tables scroll horizontally inside their container rather than overflow.
   Scoped to the table-bearing containers (not the map / defense panels). */
.gv-list, #cl-body, #ev-body, #ac-body, #tl-body, #pr-body { overflow-x: auto; }

@media (max-width: 640px) {
    .data-table .cell-ell { max-width: 140px; }
}

/* ==========================================================================
   Phase 12B — Pièce modal: multi-procedure checklist + accessible field help.
   ========================================================================== */

/* Procedure checklist (replaces the single procedure select) */
.checklist {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 160px; overflow-y: auto;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper-2); padding: 6px;
}
.check-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 6px; border-radius: 6px; cursor: pointer;
    font-size: 0.82rem; color: var(--ink);
}
.check-item:hover { background: var(--paper); }
.check-item input { width: 15px; height: 15px; flex-shrink: 0; margin: 0; }
.check-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-item.is-closed span { color: var(--grey-500); }
.checklist-empty { padding: 6px; font-size: 0.78rem; color: var(--grey-500); }

/* Accessible field help: a focusable "?" with a click-toggled popover shown ABOVE
   the field (aria-expanded drives visibility). The full explanation is the button's
   aria-label (read by screen readers on focus). */
.field > span { position: relative; }
.field-help {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; margin-left: 6px; padding: 0; vertical-align: middle;
    border: 1px solid var(--line-2); border-radius: 50%;
    background: var(--paper); color: var(--grey-500);
    font-size: 0.62rem; font-weight: 700; line-height: 1; cursor: help;
    font-family: inherit; text-transform: none;
}
.field-help:hover, .field-help:focus-visible { border-color: var(--ink); color: var(--ink); }
.field-help:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.field-tip {
    position: absolute; bottom: calc(100% + 6px); top: auto; left: 0; z-index: 60;
    width: max-content; max-width: 260px;
    background: var(--ink); color: #fff;
    font-size: 0.72rem; font-weight: 500; text-transform: none; letter-spacing: normal; line-height: 1.4;
    padding: 7px 10px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    opacity: 0; visibility: hidden; transition: opacity 0.12s; pointer-events: none;
}
/* Section/title help (Phase 13A) opens BELOW the "?" (titles sit near the top). */
.field-tip-below { top: calc(100% + 6px); bottom: auto; max-width: 320px; white-space: normal; }
.gv-title, .panel-title { position: relative; }
/* Toggled on click of the "?" (keyboard Enter/Space fire the same click). */
.field-help[aria-expanded="true"] + .field-tip { opacity: 1; visibility: visible; }

/* ==========================================================================
   Phase 13A — in-app Documentation / Guide view (restrained, professional).
   ========================================================================== */
/* Documentation : pleine largeur, onglets page par page (pattern du dossier). */
.doc-page { max-width: none; }
.doc-page .doc-p, .doc-page .doc-steps li, .doc-page .doc-glossary dd { max-width: 1080px; }
.doc-ex { margin:10px 0 14px; padding:10px 14px; background:#f8efdb; border:1px solid #e7d3a0; border-radius:9px; font-size:.8rem; line-height:1.55; color:#5c4f28; max-width:1080px; }
.doc-h {
    font-size: 0.95rem; font-weight: 800; color: var(--ink);
    margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.doc-h:first-child { margin-top: 0; }
.doc-p { font-size: 0.85rem; line-height: 1.55; color: var(--grey-700); margin: 0 0 10px; }
.doc-note {
    font-size: 0.8rem; line-height: 1.5; color: var(--grey-600);
    border: 1px solid var(--line-2); background: var(--paper-2);
    border-radius: var(--radius); padding: 10px 12px; margin: 12px 0 0;
}
.doc-glossary { margin: 0; }
.doc-glossary dt { font-size: 0.85rem; font-weight: 700; color: var(--ink); margin-top: 12px; }
.doc-glossary dt:first-child { margin-top: 0; }
.doc-glossary dd {
    margin: 3px 0 0; font-size: 0.83rem; line-height: 1.5; color: var(--grey-700);
    overflow-wrap: anywhere;
}
.doc-steps { margin: 0; padding-left: 22px; }
.doc-steps li { font-size: 0.84rem; line-height: 1.5; color: var(--grey-700); margin: 5px 0; }

/* ==========================================================================
   Phase 13B — DARSY VISUAL SKIN (override layer). Restyles the shell to match
   /darsy/public/erp/comptabilite.php (Open Sans, PSG navy/gold, grey bg, dense
   tables, rounded cards, compact tabs/buttons/forms). Behaviour untouched.
   ========================================================================== */

/* Sidebar (navy + gold accents, left-border active) */
.sidebar { background: var(--psg-navy); color: #fff; }
.sidebar-logo .dot, .sidebar-logo .accent { color: var(--psg-gold); }
.sidebar-subtitle { color: var(--psg-gold); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.72rem; }
.sidebar-footer { color: rgba(255,255,255,0.4); border-top: 1px solid rgba(255,255,255,0.1); }
.nav-section-title { color: var(--psg-gold); opacity: 0.85; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; }
.nav-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left; cursor: pointer; font-family: inherit;
    padding: 10px 22px; font-size: 0.875rem; font-weight: 500;
    color: rgba(255,255,255,0.72); background: none;
    border: 0; border-left: 3px solid transparent; border-radius: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-item:hover:not(:disabled) { background: rgba(255,255,255,0.05); color: #fff; border-left-color: var(--psg-gold); }
.nav-item.active { background: rgba(64,174,240,0.10); color: #fff; border-left-color: var(--psg-gold); }
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; }
.nav-chevron { width: 14px; height: 14px; margin-left: auto; opacity: 0.7; }

/* Topbar (white, grey border, compact actions) */
.topbar {
    background: #fff; border-bottom: 1px solid var(--grey-200);
    padding: 12px 24px; display: flex; align-items: center; gap: 16px;
    flex-shrink: 0; position: static;
}
.topbar-btn {
    width: 38px; height: 38px; border: 1px solid var(--grey-200); border-radius: 8px;
    background: #fff; color: var(--grey-500); display: inline-flex; align-items: center; justify-content: center;
}
.topbar-btn:hover { border-color: var(--psg-navy); color: var(--psg-navy); }
.breadcrumb .crumb { color: var(--grey-500); }
.breadcrumb .crumb-current { color: var(--psg-navy); font-weight: 700; }
.breadcrumb .crumb-link:hover { color: var(--psg-gold-dark); }
.topbar-avatar { background: var(--psg-red); color: #fff; }
.topbar-user-role { color: var(--psg-gold-dark); }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: auto; padding: 8px 16px; border-radius: 8px;
    font-size: 0.875rem; font-weight: 600; line-height: 1.5; cursor: pointer; font-family: inherit;
    border: 1px solid var(--psg-navy); background: var(--psg-navy); color: #fff;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover:not(:disabled) { background: var(--psg-navy-light); border-color: var(--psg-navy-light); color: #fff; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.btn-ghost { background: transparent; color: var(--psg-navy); border: 1px solid var(--grey-300); }
.btn-ghost:hover:not(:disabled) { background: var(--grey-50); border-color: var(--psg-navy); color: var(--psg-navy); }

/* Forms (Darsy .form-control) */
.field > span { font-size: 0.72rem; font-weight: 700; color: var(--grey-600); text-transform: uppercase; letter-spacing: 0.05em; }
.field input, .field select, .field textarea {
    height: 38px; padding: 0 12px;
    border: 1px solid var(--grey-300); border-radius: 8px;
    background: #fff; color: var(--grey-800); font-family: var(--font); font-size: 0.9rem; width: 100%;
}
.field textarea { height: auto; min-height: 84px; padding: 9px 12px; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--psg-gold); box-shadow: 0 0 0 3px rgba(64,174,240,0.15); background: #fff;
}
.gv-search { background: #fff; border: 1px solid var(--grey-200); border-radius: 8px; height: 38px; }
.gv-search:focus-within { border-color: var(--psg-gold); box-shadow: 0 0 0 3px rgba(64,174,240,0.15); }
.gv-filter { height: 38px; border: 1px solid var(--grey-300); border-radius: 8px; background: #fff; }
.gv-filter:focus { outline: none; border-color: var(--psg-gold); box-shadow: 0 0 0 3px rgba(64,174,240,0.15); }
.gv-tools-audit { align-items: center; padding: 10px; border: 1px solid var(--grey-200); border-radius: 10px; background: #fff; }
.gv-tools-audit .gv-search { flex: 1 1 320px; min-width: 240px; }
.gv-tools-audit .gv-filter { min-width: 170px; padding: 0 10px; font-family: var(--font); font-size: 0.86rem; color: var(--grey-700); }
.gv-tools-audit #audit-user-id { width: 140px; min-width: 140px; }
.gv-list-audit { background: #fff; border: 1px solid var(--grey-200); border-radius: 12px; overflow: auto; }
.gv-list-audit .data-table { min-width: 920px; }
.checklist { border: 1px solid var(--grey-300); border-radius: 8px; background: #fff; }

/* Cards / panels (Darsy card) */
.panel { background: #fff; border: 1px solid #d9d9d9; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--grey-200); }
.panel-title { font-size: 0.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--psg-navy); }
.panel-count { font-family: var(--mono); font-size: 0.7rem; font-weight: 800; color: var(--grey-500); }
.panel-action { width: 30px; height: 30px; border: 1px solid var(--grey-200); border-radius: 7px; background: #fff; color: var(--grey-500); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.panel-action:hover:not(:disabled) { border-color: var(--psg-navy); color: var(--psg-navy); }
.panel-action:disabled { opacity: 0.45; cursor: not-allowed; }
.panel-body { padding: 14px 16px; overflow-x: auto; }

/* Data tables (Darsy bl-table) */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table thead th {
    background: var(--grey-50); text-align: left; white-space: nowrap;
    padding: 10px 12px; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--grey-500); border-bottom: 2px solid var(--grey-100);
}
.data-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--grey-100); font-size: 0.875rem; color: var(--grey-700); font-weight: 600; vertical-align: middle; }
.data-table tbody tr:hover { background: var(--grey-50); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .col-ref { font-family: var(--mono); color: var(--psg-navy); font-weight: 800; }
.data-table .col-strong { font-weight: 700; color: var(--psg-navy); }
.data-table .table-group td { background: var(--grey-100); color: var(--grey-600); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.64rem; }
.audit-context summary { cursor: pointer; color: var(--psg-navy); font-weight: 800; }
.audit-context pre {
    max-width: 420px; max-height: 160px; overflow: auto; margin: 8px 0 0;
    padding: 10px; border-radius: 8px; background: var(--grey-50); color: var(--grey-700);
    font-family: var(--mono); font-size: 0.72rem; white-space: pre-wrap; word-break: break-word;
}
.row-action { width: 32px; height: 32px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--grey-400); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.12s, color 0.12s, background 0.12s; }
.row-action:hover { border-color: var(--grey-200); color: var(--psg-navy); background: var(--grey-50); }
.row-action svg { width: 18px; height: 18px; }
/* Action colour-coding (edit = soft orange, archive = soft brown, file = blue) — every tab. */
.row-action-edit { color: #c2772e; }
.row-action-edit:hover { color: #a85f1c; border-color: #eccfa9; background: #fbf1e4; }
.row-action-archive { color: #8a6244; }
.row-action-archive:hover { color: #6f4a30; border-color: #dac5b0; background: #f4ece4; }
.row-action-file { color: #2f6fb0; }
.row-action-file:hover { color: #1f5894; border-color: #bcd6ee; background: #e9f1fa; }

/* Case workspace tabs (Darsy cpt-tabs) */
.case-tabs { display: flex; gap: 2px; flex-wrap: wrap; background: #fff; border: 1px solid #d9d9d9; border-radius: 10px; padding: 0 6px; margin-bottom: 14px; }
.case-tab {
    padding: 12px 14px; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--grey-400); cursor: pointer; border: 0; background: none; border-bottom: 2px solid transparent;
    margin-bottom: -1px; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.case-tab:hover { color: var(--grey-700); }
.case-tab.active { color: var(--psg-navy); border-bottom-color: var(--psg-navy); }
.case-tab .tab-count { background: var(--grey-100); color: var(--grey-500); border-radius: 999px; padding: 1px 7px; font-size: 0.65rem; font-weight: 800; }
.case-tab.active .tab-count { background: var(--psg-navy); color: #fff; }

/* Chips / status badges (Darsy badge) */
.chip { font-family: var(--font-condensed); font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--grey-200); border-radius: 999px; padding: 2px 9px; color: var(--grey-600); background: var(--grey-50); }
.chip-strong { background: var(--psg-navy); color: #fff; border-color: var(--psg-navy); }

/* Section headers (overview / affaire / case / docs) */
.gv-eyebrow, .workspace-eyebrow { color: var(--psg-gold-dark); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.gv-title { font-size: 1.5rem; font-weight: 900; color: var(--psg-navy); }
.gv-sub { color: var(--grey-400); font-weight: 600; }
.workspace-title { color: var(--psg-navy); font-weight: 900; }
.case-title { color: var(--psg-navy); font-weight: 900; }
.doc-h, .doc-glossary dt { color: var(--psg-navy); }

/* Modals (Darsy modal-box) */
.modal-backdrop { background: rgba(0,16,32,0.6); }
.modal-card {
    max-width: min(920px, calc(100vw - 40px));
    border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,0.25); border: 0;
}
.modal-card-wide { max-width: min(1120px, calc(100vw - 40px)); }
.modal-card-sm { max-width: min(460px, calc(100vw - 40px)); }
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--grey-200); background: #fff; }
.modal-title { font-size: 1.05rem; font-weight: 800; color: var(--psg-navy); text-transform: uppercase; letter-spacing: 0.02em; }
.modal-sub { color: var(--grey-500); }
.modal-close { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--grey-100); color: var(--grey-600); }
.modal-close:hover:not(:disabled) { background: var(--grey-200); color: var(--psg-navy); }
.modal-actions { border-top: 1px solid var(--grey-200); padding-top: 14px; margin-top: 6px; }
.form-error { border: 1px solid var(--psg-red); background: rgba(218,41,28,0.06); color: var(--psg-red-dark); }
.account-profile { padding: 16px 20px 0; }
.account-profile h3 {
    margin: 0 0 10px; color: var(--psg-navy);
    font-size: 0.92rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
}
.account-sessions { border-top: 1px solid var(--grey-200); padding: 16px 20px 20px; }
.account-sessions-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.account-sessions h3 { margin: 0; color: var(--psg-navy); font-size: 0.92rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.account-sessions p { margin: 4px 0 0; color: var(--grey-500); font-size: 0.82rem; font-weight: 600; }
.account-sessions-list { overflow-x: auto; }
.account-session-revoke { min-width: 88px; justify-content: center; }

#account-password-modal .modal-card {
    max-width: min(1120px, calc(100vw - 40px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, auto);
}
#account-password-modal .modal-head,
#account-password-modal .account-sessions {
    grid-column: 1 / -1;
}
#account-password-modal .account-profile {
    grid-column: 1;
    border-right: 1px solid var(--grey-200);
    padding-bottom: 16px;
}
#account-password-modal #account-password-form {
    grid-column: 2;
    align-self: start;
    overflow: visible;
}
#account-password-modal .account-profile-form {
    overflow: visible;
    padding: 0;
}
#account-password-modal .account-sessions-list {
    max-height: 240px;
    overflow: auto;
}

@media (max-width: 860px) {
    #account-password-modal .modal-card {
        display: flex;
    }
    #account-password-modal .account-profile {
        border-right: 0;
        border-bottom: 1px solid var(--grey-200);
    }
}

/* ==========================================================================
   Darsy table-card pass - commandes.php style for data-heavy pages.
   Page header stays free; filters + table become one white bordered card.
   ========================================================================== */

.global-view,
.aff-mode {
    background: var(--grey-100);
}

.gv-head {
    border-bottom: 0;
    margin-bottom: 16px;
    padding: 0;
}

.gv-title,
.workspace-title,
.case-title {
    line-height: 1.12;
}

.gv-sub,
.workspace-desc,
.case-meta {
    color: var(--grey-500);
    font-weight: 600;
}

.global-view > .gv-tools,
#affairs-overview > .gv-tools {
    margin: 0;
    padding: 20px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-bottom: 1px solid var(--grey-100);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.global-view > .gv-list,
#affairs-overview > .gv-list {
    flex: 1;
    min-height: 320px;
    gap: 0;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    overflow: auto;
}

.global-view > .gv-list > .gv-state,
#affairs-overview > .gv-list > .gv-state {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    color: var(--grey-400);
    font-weight: 700;
}

.gv-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 2px 9px;
    margin-left: auto;
    border-radius: 999px;
    background: var(--grey-100);
    color: var(--grey-500);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 800;
}

.gv-search {
    background: #fff;
    border-color: var(--grey-200);
    border-radius: 8px;
}

.gv-search input {
    color: var(--grey-700);
    font-weight: 600;
}

.gv-filter {
    background: #fff;
    border-color: var(--grey-300);
    border-radius: 8px;
    color: var(--grey-700);
    font-weight: 600;
}

#tl-body,
#cl-body,
#ev-body,
#ac-body,
#pr-body {
    padding: 0;
    overflow: auto;
}

#tl-body > .tl-state,
#cl-body > .cl-state,
#ev-body > .ev-state,
#ac-body > .ac-state,
#pr-body > .pr-state {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 20px;
    color: var(--grey-400);
    font-weight: 700;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    padding: 9px 14px;
    border-bottom: 2px solid var(--grey-100);
    color: var(--grey-500);
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--grey-50);
    color: var(--grey-700);
    font-size: 0.875rem;
    font-weight: 600;
    vertical-align: middle;
}

.data-table tbody tr {
    transition: background 0.1s;
}

.data-table tbody tr:hover {
    background: var(--grey-50);
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table .col-ref {
    color: var(--psg-navy);
    font-family: var(--mono);
    font-weight: 800;
}

.data-table .col-strong {
    color: var(--psg-navy);
    font-weight: 800;
}

.data-table .cell-ell {
    max-width: 280px;
}

.table-state td,
td.table-state {
    padding: 56px 20px !important;
    text-align: center;
    color: var(--grey-400) !important;
    font-weight: 800 !important;
    background: #fff;
}

.table-group td {
    background: var(--grey-50) !important;
    border-bottom: 1px solid var(--grey-100) !important;
    color: var(--grey-500) !important;
    font-family: var(--font-condensed);
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.panel {
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    overflow: hidden;
}

.panel-head {
    min-height: 58px;
    padding: 13px 16px;
    background: #fff;
    border-bottom: 1px solid var(--grey-100);
}

.panel-title {
    color: var(--psg-navy);
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.panel-count,
.case-tab .tab-count {
    background: var(--grey-100);
    border-radius: 999px;
    padding: 1px 7px;
    color: var(--grey-500);
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 900;
}

.panel-action {
    width: 30px;
    height: 30px;
    border: 1px solid var(--grey-200);
    border-radius: 7px;
    background: #fff;
    color: var(--grey-500);
}

.panel-action:hover:not(:disabled) {
    border-color: var(--psg-navy);
    color: var(--psg-navy);
    background: var(--grey-50);
}

.gv-list-audit {
    border-radius: 0 0 12px 12px;
    border-top: 0;
}

.gv-tools-audit {
    border-radius: 12px 12px 0 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

@media (max-width: 760px) {
    .global-view > .gv-tools,
    #affairs-overview > .gv-tools {
        padding: 14px;
    }

    .global-view > .gv-list,
    #affairs-overview > .gv-list {
        min-height: 260px;
    }

    .data-table {
        min-width: 760px;
    }
}

/* Field help "?" + navy popover */
.field-help { border: 1px solid var(--grey-300); color: var(--grey-500); }
.field-help:hover, .field-help:focus-visible { border-color: var(--psg-navy); color: var(--psg-navy); }
.field-tip { background: var(--psg-navy); }

/* Dense data-entry modals: reduce vertical scrolling on desktop. */
#evidence-modal .modal-card,
#directory-modal .modal-card,
#client-modal .modal-card {
    max-width: min(1180px, calc(100vw - 40px));
}

#evidence-form,
#directory-form,
#client-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 16px 18px 18px;
}

#evidence-form .field textarea,
#directory-form .field textarea,
#client-form .field textarea {
    min-height: 64px;
}

#evidence-modal #evi-f-procedures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    max-height: 132px;
    padding: 6px;
}

#evidence-modal #evi-f-procedures .check-item {
    min-width: 0;
    align-items: flex-start;
    gap: 7px;
    padding: 5px 7px;
    font-size: 0.78rem;
    line-height: 1.25;
}

#evidence-modal #evi-f-procedures .check-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    margin: 1px 0 0;
    accent-color: var(--psg-navy);
}

#evidence-modal #evi-f-procedures .check-item span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
}

#evidence-modal #evi-f-procedures .checklist-empty {
    grid-column: 1 / -1;
}

.modal-form .check-field {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 38px;
}

.modal-form .check-field input[type="checkbox"] {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    margin: 0;
    accent-color: var(--psg-navy);
}

.modal-form .check-field span {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--grey-700);
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 980px) {
    #evidence-form,
    #directory-form,
    #client-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #evidence-form,
    #directory-form,
    #client-form,
    #evidence-modal #evi-f-procedures {
        grid-template-columns: 1fr;
    }
}

/* Report / exports (Phase 19A) */
.panel-report .panel-head { align-items: center; justify-content: space-between; flex-wrap: wrap; }
.rp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.rp-actions .btn { min-height: 32px; padding: 6px 10px; font-size: 0.78rem; }
.rp-state { padding: 20px; color: var(--grey-500); font-weight: 700; }
.rp-print { display: grid; gap: 18px; color: var(--grey-800); }
.rp-print h2 { margin: 0; color: var(--psg-navy); font-size: 1.45rem; font-weight: 900; }
.rp-print h3 { margin: 0 0 10px; color: var(--psg-navy); font-size: 0.95rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; }
.rp-muted { margin: -10px 0 0; color: var(--grey-500); font-size: 0.82rem; font-weight: 600; }
.rp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rp-fact { border: 1px solid var(--grey-200); border-radius: 8px; padding: 10px 12px; background: var(--grey-50); }
.rp-fact-label { display: block; color: var(--grey-500); font-size: 0.64rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; }
.rp-fact-value { display: block; margin-top: 3px; color: var(--psg-navy); font-weight: 800; overflow-wrap: anywhere; }
.rp-counts { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-section { display: grid; gap: 8px; }

@media (max-width: 760px) {
    .rp-facts { grid-template-columns: 1fr; }
    .rp-actions { width: 100%; }
}

@media print {
    body.printing-report { background: #fff !important; }
    body.printing-report .sidebar,
    body.printing-report .topbar,
    body.printing-report .case-head,
    body.printing-report .case-tabs,
    body.printing-report .panel-report .panel-head,
    body.printing-report .boot,
    body.printing-report .login-screen,
    body.printing-report .modal-backdrop {
        display: none !important;
    }
    body.printing-report .app-view,
    body.printing-report .main,
    body.printing-report .workspace-layout,
    body.printing-report #case-workspace,
    body.printing-report .case-panels,
    body.printing-report .case-tabpanel[data-tabpanel="rapport"] {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    body.printing-report .case-tabpanel:not([data-tabpanel="rapport"]) { display: none !important; }
    body.printing-report .panel-report {
        border: 0 !important;
        box-shadow: none !important;
    }
    body.printing-report .panel-body { padding: 0 !important; overflow: visible !important; }
    body.printing-report .rp-print { display: block; }
    body.printing-report .rp-section { page-break-inside: avoid; margin-top: 18px; }
    body.printing-report .data-table thead th,
    body.printing-report .data-table tbody td { color: #111 !important; border-color: #ddd !important; }
}

/* ── Event ↔ evidence proof drawer (Phase 21A) ─────────────────────────────
   A timeline fact cites the piece(s) proving it, inline (no modal): a count
   badge per row that expands a drawer to read and link pieces in place. */

.proof-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px 2px 7px; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: 0.72rem; font-weight: 700; line-height: 1.4;
    color: var(--grey-500); background: var(--paper);
    border: 1px dashed var(--line-2); transition: all .12s ease;
}
.proof-badge svg { width: 13px; height: 13px; }
.proof-badge:hover { color: var(--ink); border-color: var(--ink); }
.proof-badge.has {
    color: #fff; background: var(--psg-gold-dark);
    border-style: solid; border-color: var(--psg-gold-dark);
}
.proof-badge.has:hover { background: var(--psg-gold); border-color: var(--psg-gold); }
.proof-badge.open { box-shadow: 0 0 0 2px rgba(64, 174, 240, .35); }
.proof-badge-n { font-variant-numeric: tabular-nums; }

.proof-box {
    padding: 12px 16px 14px; border-left: 3px solid var(--psg-gold);
    display: flex; flex-direction: column; gap: 10px;
}
.proof-head {
    font-size: 0.66rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--grey-500);
}
.proof-loading, .proof-error { font-size: 0.8rem; color: var(--grey-500); padding: 8px 16px; }
.proof-error { color: var(--danger); }

.proof-list { display: flex; flex-direction: column; gap: 6px; }
.proof-item {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 7px 10px; background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--radius);
}
.proof-rel {
    font-size: 0.64rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 4px; white-space: nowrap;
    background: var(--grey-100); color: var(--grey-600); border: 1px solid var(--line);
}
.proof-rel.rel-proves       { background: #e6f6ee; color: #067a4b; border-color: #a7e0c4; }
.proof-rel.rel-corroborates { background: #e8f1fd; color: #1f5fb8; border-color: #b3d0f2; }
.proof-rel.rel-contradicts  { background: #fdecec; color: #c0281f; border-color: #f2b6b2; }
.proof-rel.rel-mentions     { background: var(--grey-100); color: var(--grey-600); border-color: var(--line); }
.proof-ref { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.proof-title { flex: 1 1 40%; min-width: 120px; font-size: 0.82rem; color: var(--grey-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proof-loc { font-size: 0.72rem; color: var(--grey-500); font-style: italic; white-space: nowrap; }
.proof-unlink {
    margin-left: auto; width: 22px; height: 22px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; border-radius: 5px; cursor: pointer;
    font-size: 1.1rem; line-height: 1; color: var(--grey-400);
}
.proof-unlink:hover { background: #fdecec; color: var(--danger); }

.proof-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.proof-pick, .proof-rel-sel, .proof-loc-in {
    font: inherit; font-size: 0.8rem; color: var(--ink);
    padding: 6px 9px; background: var(--paper);
    border: 1px solid var(--line-2); border-radius: var(--radius);
}
.proof-pick { flex: 1 1 220px; min-width: 160px; max-width: 380px; }
.proof-rel-sel { flex: 0 0 auto; }
.proof-loc-in { flex: 0 1 150px; min-width: 110px; }
.proof-pick:focus, .proof-rel-sel:focus, .proof-loc-in:focus { outline: none; border-color: var(--psg-gold); box-shadow: 0 0 0 2px rgba(64,174,240,.2); }
.proof-link-btn { padding: 6px 16px; font-size: 0.8rem; }
.proof-add-err { flex-basis: 100%; font-size: 0.76rem; color: var(--danger); }

/* ══════════════════════════════════════════════════════════════════════════
   Beautiful pass (Phase 22A) — a visual refresh layered last: soft depth,
   calmer chips, airier tables, and a Defense Matrix colour-keyed by status so
   the defense reads at a glance (green = defeated · amber = exposed · red =
   conceded). CSS only — no layout is moved.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --shadow-sm: 0 1px 2px rgba(16,29,54,.05), 0 1px 3px rgba(16,29,54,.04);
    --shadow-md: 0 2px 6px rgba(16,29,54,.05), 0 12px 30px rgba(16,29,54,.08);
    --st-ok:   #12805a; --st-ok-bg:   #ecf8f1; --st-ok-line:   #bde6cf;
    --st-cool: #1f5fb8; --st-cool-bg: #ebf2fd; --st-cool-line: #c2d8f5;
    --st-warn: #a76a08; --st-warn-bg: #fdf3e0; --st-warn-line: #ecd39e;
    --st-bad:  #bd2b21; --st-bad-bg:  #fbeae8; --st-bad-line:  #efbcb6;
    --st-line: #e4e8ef;
}

/* Depth + softer neutrals across the workspace. */
.aff-mode, .global-view { background: #eceff4; }
.panel { box-shadow: var(--shadow-sm); border-color: var(--st-line); border-radius: var(--radius-lg); }
.global-view > .gv-tools, #affairs-overview > .gv-tools,
.global-view > .gv-list,  #affairs-overview > .gv-list { border-color: var(--st-line); box-shadow: var(--shadow-sm); }
.panel-head { border-bottom-color: var(--st-line); }

/* Chips: calmer — sentence case, no shout, softer fill. */
.chip {
    text-transform: none; letter-spacing: 0; font-weight: 600;
    font-family: var(--font); font-size: 0.7rem; padding: 2px 9px;
    background: #f2f5f9; border-color: #e3e8f0; color: var(--grey-600);
}
.chip-strong { background: var(--psg-navy); color: #fff; border-color: var(--psg-navy); }

/* Case tabs: gold active accent, softer counts. */
.case-tabs { box-shadow: var(--shadow-sm); border-color: var(--st-line); }
.case-tab { letter-spacing: 0.03em; font-size: 0.72rem; }
.case-tab.active { border-bottom-color: var(--psg-gold-dark); }
.case-tab .tab-count { background: #eef1f6; color: var(--grey-500); }
.case-tab.active .tab-count { background: var(--psg-gold-dark); color: #fff; }

/* Data tables: airier rows, gentler lines, calm hover. */
.data-table thead th { border-bottom: 1px solid var(--st-line); color: var(--grey-500); letter-spacing: 0.04em; }
.data-table tbody td { padding: 11px 14px; border-bottom-color: #eef1f5; }
.data-table tbody tr:hover { background: #f6f8fb; }

/* Buttons: a touch more presence. */
.btn { box-shadow: var(--shadow-sm); border-radius: var(--radius); }
.btn.btn-ghost { box-shadow: none; }

.db-empty-line { font-size:.82rem; color:var(--grey-500); padding:2px 0; }

/* ==========================================================================
   "La loi" AI assistant (Phase 22A) — suggest éléments constitutifs + jurisprudence.
   The pane action sits on the law header; the modal reviews suggestions
   before anything is written. Jurisprudence reads as unverified by design.
   ========================================================================== */
.db-ai-btn {
    display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
    padding:4px 10px; border-radius:999px; cursor:pointer;
    font-family:inherit; font-size:.72rem; font-weight:700; letter-spacing:.02em;
    color:var(--psg-gold-dark); background:#fff; border:1px solid var(--psg-gold-light);
}
.db-ai-btn:hover { background:var(--psg-gold); border-color:var(--psg-gold); color:#fff; }
.db-ai-btn svg { width:14px; height:14px; }

/* Modal body */
.la-body { padding:18px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.la-input { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.la-input-actions { grid-column:1/-1; display:flex; justify-content:flex-end; }

.la-caveat {
    border:1px solid var(--st-warn-line); background:var(--st-warn-bg); color:var(--st-warn);
    border-radius:var(--radius); padding:10px 13px; font-size:.8rem; line-height:1.5;
}
.la-caveat strong { color:#8a4e05; }

/* Avertissement confidentialité : l'énoncé n'a pas été confirmé « sans donnée
   privée » à sa saisie — relire avant envoi. Rouge, pas ambre : c'est du privé. */
.la-priv-warn {
    grid-column:1/-1; border:1px solid var(--st-bad-line); background:var(--st-bad-bg);
    color:var(--st-bad); border-radius:var(--radius); padding:9px 13px; font-size:.78rem; line-height:1.5;
}
.la-priv-warn strong { color:#8f1f16; }
.la-input .field-check span { font-weight:500; line-height:1.45; }

/* ── Compte : double authentification (TOTP) ──────────────────────────────── */
.account-totp { border-top:1px solid var(--line); margin-top:14px; padding-top:12px; }
.account-totp h3 { margin:0 0 4px; font-size:.9rem; }
.account-totp-status { margin:0 0 10px; font-size:.78rem; color:var(--st-warn); font-weight:600; }
.account-totp-status.on { color:var(--st-ok); }
.acct-totp-grid { display:flex; gap:20px; align-items:flex-start; margin:10px 0 4px; flex-wrap:wrap; }
.acct-totp-qr img { width:196px; height:196px; image-rendering:pixelated; border:1px solid var(--line); border-radius:10px; background:#fff; padding:8px; display:block; }
.acct-totp-steps { flex:1; min-width:250px; }
.acct-totp-steps ol { margin:0 0 14px; padding-left:18px; font-size:.8rem; color:var(--grey-700); line-height:1.75; }
.acct-totp-manual { margin-top:8px; }
.acct-totp-manual summary { cursor:pointer; font-size:.74rem; color:var(--grey-500); }
.acct-totp-secret { display:flex; align-items:center; gap:10px; margin:8px 0; flex-wrap:wrap; }
.acct-totp-secret code { font-family:var(--mono); font-size:.9rem; letter-spacing:.12em; background:#f2f4f7; border:1px solid var(--line); border-radius:8px; padding:7px 12px; overflow-wrap:anywhere; }
.acct-totp-confirm-row { display:flex; align-items:center; gap:8px; }
.acct-totp-confirm-row input { width:160px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-family:var(--mono); font-size:1rem; letter-spacing:.2em; text-align:center; }

/* ── Vue Conclusions (Phase 28) — corpus validé puis projet rendu ────────── */
.cc-box { margin-top:14px; border:1px solid var(--line); border-radius:12px; background:#fff; padding:14px 16px; }
.cc-cap { font-size:.64rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--grey-500); margin-bottom:8px; }
.cc-corpus { width:100%; min-height:280px; resize:vertical; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:#fbfcfd; color:var(--ink); font-family:var(--mono); font-size:.72rem; line-height:1.55; }
.cc-tools { display:flex; align-items:center; gap:10px; margin:8px 0; }
.cc-chars { font-size:.68rem; color:var(--grey-500); }
.cc-instr { width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:.78rem; margin-bottom:9px; }
.cc-confirm { align-items:flex-start; margin-bottom:9px; }
.cc-confirm input { margin-top:2px; }
.cc-confirm span { font-size:.76rem; font-weight:600; color:var(--grey-700); line-height:1.5; }
.cc-busy { font-size:.8rem; font-style:italic; color:var(--psg-navy); padding:8px 2px; }
.cc-doc { margin-top:16px; border:1px solid var(--line); border-radius:12px; background:#fff; padding:22px 26px; max-width:900px; }
.cc-intitule { font-size:.9rem; font-weight:800; color:var(--ink); white-space:pre-wrap; margin-bottom:14px; }
.cc-h { margin:18px 0 8px; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--psg-navy); border-bottom:1px solid var(--line); padding-bottom:5px; }
.cc-txt { font-size:.82rem; color:var(--ink); line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
.cc-verify { margin-top:18px; border:1px solid var(--st-warn-line); background:var(--st-warn-bg); border-radius:10px; padding:10px 13px; }
.cc-verify .cc-cap { color:#8a4e05; }
.cc-verify-item { font-size:.76rem; color:#7a4a08; line-height:1.6; }

.la-busy { font-size:.83rem; font-style:italic; color:var(--grey-600); padding:6px 2px; }

/* Results */
.la-results { display:flex; flex-direction:column; gap:14px; }
.la-res-head { font-size:1.02rem; font-weight:800; color:var(--psg-navy); overflow-wrap:anywhere; }
.la-synthese { font-size:.86rem; line-height:1.55; color:var(--grey-700); margin:0; }
.la-sec { display:flex; flex-direction:column; gap:8px; }
.la-sec-head { font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-500); }
.la-sec-juris .la-sec-head { color:var(--st-warn); }

.la-item {
    display:flex; align-items:flex-start; gap:11px; cursor:pointer;
    border:1px solid var(--st-line); border-radius:var(--radius); background:var(--card);
    padding:11px 13px;
}
.la-item:hover { border-color:var(--psg-gold-light); }
.la-item.la-juris { border-left:3px solid var(--st-warn-line); background:var(--st-warn-bg); }
.la-check { width:16px; height:16px; margin-top:2px; flex-shrink:0; accent-color:var(--psg-navy); }
.la-item-body { display:flex; flex-direction:column; gap:5px; min-width:0; }
.la-item-nm { font-weight:700; font-size:.9rem; color:var(--psg-navy); overflow-wrap:anywhere; }
.la-item-tags { display:flex; flex-wrap:wrap; gap:6px; }
.la-item-desc { margin:0; font-size:.82rem; line-height:1.5; color:var(--grey-700); overflow-wrap:anywhere; }
.la-item-angle { margin:0; font-size:.8rem; line-height:1.5; color:var(--st-ok); overflow-wrap:anywhere; }
.la-juris .la-item-angle { color:var(--grey-600); }
.la-badge-verify {
    align-self:flex-start; font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
    color:#fff; background:var(--st-warn); border-radius:999px; padding:2px 8px;
}
.la-warn { margin:0; font-size:.8rem; line-height:1.5; color:var(--st-warn); font-weight:600; }

@media (max-width:560px){ .la-input { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   Matrice de défense — « Champ de bataille » (Phase 23, design Direction C).
   Rail des fronts à gauche ; pour chaque élément constitutif, une ligne de
   front À charge ◂ Loi ▸ Défense. Les pièces contrées se lisent barrées, la
   riposte pointe vers elles. Bascule Matrice ⇄ Plaidoirie dans l'en-tête.
   ══════════════════════════════════════════════════════════════════════════ */

/* En-tête du panneau : sous-titre + bascule de vue + badge lecture seule. */
.df-head-txt { display:flex; flex-direction:column; min-width:0; }
.df-sub { font-size:.72rem; color:var(--grey-500); }
.df-toggle { display:inline-flex; background:#f2f4f7; border:1px solid var(--line); border-radius:9px; padding:3px; margin-left:auto; }
.df-toggle button { border:0; background:transparent; color:var(--grey-600); font-family:inherit; font-size:.76rem; font-weight:600; padding:5px 13px; border-radius:6px; cursor:pointer; }
.df-toggle button.on { background:#fff; color:var(--psg-navy); font-weight:700; box-shadow:0 1px 2px rgba(16,24,40,.1); }
.df-ro-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:.64rem; font-weight:600; background:#f2f4f7; color:var(--grey-600); border:1px solid var(--line); }
.df-ro-badge svg { width:11px; height:11px; }
.panel-head .df-toggle + .panel-add { margin-left:0; }

/* Grille rail + panneau (annule le padding du panel-body : le board colle aux bords). */
.bb-layout { display:grid; grid-template-columns:236px 1fr; min-height:540px; margin:-14px -16px; }
.bb-rail { border-right:1px solid var(--line); background:#f7f9fb; padding:12px 10px; }
.bb-rail-cap { font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--grey-500); padding:4px 8px 8px; }
.bb-front { display:block; width:100%; text-align:left; margin-bottom:6px; padding:9px 10px; border-radius:9px; cursor:pointer; border:1px solid transparent; background:transparent; color:var(--ink); font-family:inherit; }
.bb-front.on { border-color:var(--psg-navy); background:#fff; box-shadow:0 1px 3px rgba(16,24,40,.08); }
.bb-front-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bb-front-nm { font-size:.8rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bb-front-win { width:7px; height:7px; border-radius:50%; background:var(--st-ok); flex:none; }
.bb-front-sub { font-size:.66rem; color:var(--grey-500); margin-top:3px; }
.bb-front-dots { display:flex; gap:2px; margin-top:6px; }
.bb-fdot { flex:1; height:5px; border-radius:2px; }
.d-not_started { background:#cfd6e0; } .d-needed { background:#9dbcd8; }
.d-partially_satisfied { background:#e6a54e; } .d-contested { background:#d98324; }
.d-refuted { background:#2f8f5b; } .d-satisfied { background:#c0392b; }
.d-not_applicable { background:#c4cbd4; }
.bb-legend { padding:10px 8px 4px; font-size:.66rem; color:var(--grey-500); line-height:1.6; border-top:1px solid var(--line); margin-top:10px; }
.bb-legend-cap { font-weight:700; color:var(--grey-600); margin-bottom:4px; }
.bb-legend-row { display:flex; align-items:center; gap:6px; }
.bb-legend-row i { width:8px; height:8px; border-radius:2px; flex:none; }

.bb-pane { min-width:0; padding:20px 24px; }

/* En-tête d'allégation + récap. */
.bb-alleg-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.bb-alleg-who { min-width:0; }
.bb-alleg-cat-row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.bb-alleg-cat { margin:0; font-size:1.2rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.bb-enonce { margin:9px 0 0; font-size:.8rem; color:var(--grey-600); max-width:820px; line-height:1.6; }
.bb-chip { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:.68rem; font-weight:600; white-space:nowrap; border:1px solid var(--line); background:#f2f4f7; color:var(--grey-600); }
.bb-chip.gold { background:rgba(201,162,39,.13); color:#8a6d12; border-color:rgba(201,162,39,.4); }
.bb-chip.steel { background:#eaf1f8; color:#3a6187; border-color:#c5d8ea; }
.bb-chip.bad { background:#fbe9e7; color:#b0362a; border-color:#f0c3bd; }
.bb-chip.navy { background:var(--psg-navy); color:#fff; border-color:var(--psg-navy); }
.bb-recap { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:14px 0 4px; padding:9px 14px; background:#f7f9fb; border:1px solid var(--line); border-radius:10px; font-size:.76rem; color:var(--grey-600); }
.bb-recap b { color:var(--ink); font-weight:700; }
.bb-recap-sep { color:var(--line); }
.bb-recap-win { margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--st-ok); font-weight:700; }
.bb-recap-win svg { width:14px; height:14px; }

/* Carte d'élément constitutif. */
.bb-els { margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.bb-el { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.03); }
.bb-el.won { border-color:#cbe7d5; }
.bb-el-head { display:flex; align-items:center; gap:10px; padding:9px 13px; border-bottom:1px solid var(--line); background:#fbfcfd; }
.bb-el.won .bb-el-head { background:#f2f9f4; }
.bb-el.lost .bb-el-head { background:#fdf3f1; }
.bb-el-ord { width:20px; height:20px; border-radius:6px; background:var(--psg-navy); color:#fff; font-size:.68rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.bb-el-nm { font-size:.82rem; font-weight:700; color:var(--ink); min-width:0; }
.bb-el-actions { display:flex; align-items:center; gap:8px; margin-left:auto; position:relative; }
.bb-etat { display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:.66rem; font-weight:600; white-space:nowrap; border:1px solid transparent; }
.etat-not_started { background:#f2f4f7; color:#5b6675; border-color:#d5dce6; }
.etat-needed { background:#eaf1f8; color:#3a6187; border-color:#c5d8ea; }
.etat-partially_satisfied { background:#fdf5e8; color:#a8681a; border-color:#f0dcb4; }
.etat-contested { background:#fdeede; color:#b46a12; border-color:#f2cd97; }
.etat-refuted { background:#e7f4ec; color:#1f7a48; border-color:#b9e0c8; }
.etat-satisfied { background:#fbe9e7; color:#b0362a; border-color:#f0c3bd; }
.etat-not_applicable { background:#f4f5f7; color:#98a1ad; border-color:#e5e9ef; }
.bb-trancher { display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border:1px solid var(--line); background:#fff; border-radius:7px; font-size:.72rem; font-weight:600; color:var(--grey-600); cursor:pointer; font-family:inherit; }
.bb-trancher:hover { border-color:var(--psg-navy); color:var(--psg-navy); }
.bb-trancher svg { width:12px; height:12px; }
.bb-pop { position:absolute; top:32px; right:0; z-index:20; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 26px rgba(16,24,40,.16); padding:8px; width:220px; }
.bb-pop-cap { font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--grey-500); padding:2px 4px 7px; }
.bb-pop-opts { display:flex; flex-wrap:wrap; gap:5px; }
.bb-pop-opts .bb-etat { cursor:pointer; font-family:inherit; }
.bb-pop-opts .bb-etat.on { outline:2px solid currentColor; outline-offset:-1px; }

/* Syllogisme 3 colonnes. */
.bb-grid { display:grid; grid-template-columns:1fr 1.1fr 1fr; }
.bb-cell { padding:12px 14px; min-width:0; }
.bb-cell-charge { border-right:1px solid var(--line); position:relative; }
.bb-cell-charge::before { content:''; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:3px; background:linear-gradient(var(--st-bad), rgba(192,57,43,.25)); }
.bb-cell-def { position:relative; }
.bb-cell-def::after { content:''; position:absolute; right:0; top:12px; bottom:12px; width:3px; border-radius:3px; background:linear-gradient(var(--psg-navy), rgba(201,162,39,.5)); }
.bb-cap { font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:9px; display:flex; align-items:center; gap:5px; }
.bb-cap svg { width:12px; height:12px; }
.bb-cap-charge { color:var(--st-bad); padding-left:8px; }
.bb-cap-def { color:var(--psg-navy); padding-right:8px; }
.bb-cell-charge .bb-stack { padding-left:8px; }
.bb-cell-def .bb-stack { padding-right:8px; }
.bb-stack { display:flex; flex-direction:column; gap:9px; }
.bb-empty-note { font-size:.74rem; color:var(--grey-400); font-style:italic; }

/* Pièces à charge + duel. */
.bb-piece-line { display:flex; align-items:flex-start; gap:7px; }
.bb-ref { flex:none; font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.02em; padding:2px 6px; border-radius:5px; background:#eef1f5; color:var(--psg-navy); border:1px solid var(--line); }
.bb-piece-t { font-size:.78rem; color:var(--ink); overflow-wrap:anywhere; }
.bb-piece-t.countered { color:var(--grey-400); text-decoration:line-through; text-decoration-color:#c0392b; }
.bb-kill { margin-top:5px; padding:7px 9px; background:#f2f9f4; border:1px solid #cbe7d5; border-radius:8px; }
.bb-kill-head { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:.74rem; font-weight:700; color:var(--st-ok); }
.bb-kill-x { font-size:.84rem; line-height:1; }
.bb-kill-arg { font-size:.74rem; font-style:italic; color:var(--grey-600); margin-top:3px; overflow-wrap:anywhere; }
.bb-kill-icons { display:flex; align-items:center; gap:4px; margin-left:auto; }
.bb-loupebtn svg { width:12px; height:12px; }
.bb-loupebtn:hover { color:var(--psg-navy); }
.bb-dash { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border:1px dashed var(--line); border-radius:7px; background:#fff; font-size:.7rem; font-weight:600; cursor:pointer; font-family:inherit; align-self:flex-start; }
.bb-dash svg { width:12px; height:12px; }
.bb-dash.charge { color:var(--st-bad); }
.bb-dash.def { color:var(--psg-navy); border-color:var(--psg-navy); }
.bb-dash.mute { color:var(--grey-500); background:none; }
.bb-dash:hover { border-style:solid; }

/* Formulaires inline (duel, riposte, liens, transverse). */
.bb-form { margin-top:7px; padding:10px; border:1px solid var(--st-cool); border-radius:9px; background:#f6f9fc; }
.bb-form.def { border-color:var(--psg-navy); background:#f6f8fb; }
.bb-form-cap { font-size:.7rem; font-weight:700; color:var(--psg-navy); margin-bottom:7px; }
.bb-form select, .bb-form input[type="text"], .bb-form textarea { width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); font-family:inherit; font-size:.76rem; }
.bb-form textarea { min-height:48px; resize:vertical; }
.bb-form-row { display:flex; gap:6px; margin-bottom:6px; }
.bb-form-row select { flex:1; width:auto; min-width:0; }
.bb-form-mb { margin-bottom:6px; }
.bb-seg { display:flex; gap:5px; margin-bottom:8px; }
.bb-seg button { padding:5px 9px; border-radius:6px; font-size:.7rem; font-weight:600; cursor:pointer; font-family:inherit; border:none; background:transparent; color:var(--grey-600); }
.bb-seg button.on { background:var(--psg-navy); color:#fff; }
.bb-form-acts { display:flex; gap:6px; margin-top:8px; }
.bb-btn { background:var(--psg-navy); color:#fff; border:none; border-radius:7px; padding:6px 12px; font-size:.72rem; font-weight:600; cursor:pointer; font-family:inherit; }
.bb-btn:hover { background:var(--psg-navy-light, #1d3a66); }
.bb-btn-ghost { background:none; border:1px solid var(--line); border-radius:7px; padding:6px 12px; font-size:.72rem; font-weight:600; color:var(--grey-600); cursor:pointer; font-family:inherit; }
.bb-form-err { font-size:.72rem; font-weight:600; color:var(--st-bad); margin-top:6px; }

/* La loi (parchemin). */
.bb-cell-loi { background:#f8efdb; border-right:1px solid #e7d3a0; padding:12px 15px; }
.bb-cap-loi { color:#6b5a2a; }
.bb-loi-cap2 { font-size:.76rem; color:#6b5a2a; font-weight:700; margin-bottom:2px; }
.bb-loi-exige { margin:0 0 8px; font-size:.76rem; color:#5c4f28; line-height:1.55; overflow-wrap:anywhere; }
.bb-loi-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.bb-loi-art { padding:2px 8px; border-radius:6px; font-size:.66rem; font-weight:600; background:rgba(107,90,42,.1); color:#6b5a2a; border:1px solid #e7d3a0; }
.bb-loi-angle { font-size:.74rem; color:#5c4f28; border-top:1px dashed #e7d3a0; padding-top:7px; overflow-wrap:anywhere; }

/* Posture ATTAQUE — la même matrice lue dans l'autre sens : un élément
   établi est une victoire, un élément abattu fait échouer NOTRE action.
   .inv retourne les couleurs vert/rouge ; .stance-attack échange les
   liserés des colonnes (à l'appui = navy/or, leur défense = rouge). */
.bb-etat.inv.etat-refuted { background:#fbe9e7; color:#b0362a; border-color:#f0c3bd; }
.bb-etat.inv.etat-satisfied { background:#e7f4ec; color:#1f7a48; border-color:#b9e0c8; }
.bb-fdot.inv.d-refuted { background:#c0392b; }
.bb-fdot.inv.d-satisfied { background:#2f8f5b; }
.bb-el.stance-attack .bb-cell-charge::before { background:linear-gradient(var(--psg-navy), rgba(201,162,39,.5)); }
.bb-el.stance-attack .bb-cell-def::after { background:linear-gradient(var(--st-bad), rgba(192,57,43,.25)); }
.bb-el.stance-attack .bb-cap-charge { color:var(--psg-navy); }
.bb-el.stance-attack .bb-cap-def { color:var(--st-bad); }
.bb-el.stance-attack .bb-dash.charge { color:var(--psg-navy); border-color:var(--psg-navy); }
.bb-el.stance-attack .bb-dash.def { color:var(--st-bad); border-color:var(--line); }
.bb-lost-note { font-size:.75rem; font-weight:700; color:var(--st-bad); }

/* En défense. */
.bb-abattu { padding:9px 11px; background:#e7f4ec; border:1px solid #b9e0c8; border-radius:9px; }
.bb-abattu-head { display:flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; color:var(--st-ok); }
.bb-abattu-head svg { width:15px; height:15px; }
.bb-abattu-angle { font-size:.74rem; color:#2c6b47; margin-top:3px; }
.bb-riposte { padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.bb-riposte-top { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.bb-riposte-role { font-size:.7rem; font-weight:600; color:var(--psg-navy); }
.bb-riposte-side { display:flex; align-items:center; gap:6px; }
.bb-riposte-ev { display:flex; align-items:center; gap:6px; margin-top:4px; flex-wrap:wrap; }
.bb-riposte-ev span:last-child { font-size:.74rem; color:var(--grey-600); }
.bb-x { background:none; border:none; padding:0; color:var(--grey-400); cursor:pointer; display:inline-flex; font-family:inherit; }
.bb-x:hover { color:var(--st-bad); }
.bb-x svg { width:13px; height:13px; }
.bb-force { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:.62rem; font-weight:600; white-space:nowrap; border:1px solid transparent; }
.f-decisive { background:#e7f4ec; color:#1f7a48; border-color:#b9e0c8; }
.f-strong { background:#eaf1f8; color:#3a6187; border-color:#c5d8ea; }
.f-probable { background:#f2f4f7; color:#5b6675; border-color:#d5dce6; }
.f-doubt { background:#fdf5e8; color:#a8681a; border-color:#f0dcb4; }
.f-unknown, .f-allegation { background:#f4f5f7; color:#98a1ad; border-color:#e5e9ef; }

/* Jurisprudence. */
.bb-sec-head { display:flex; align-items:center; gap:8px; margin:22px 0 10px; }
.bb-sec-head h3 { margin:0; font-size:.84rem; font-weight:700; color:var(--ink); }
.bb-verify { padding:2px 9px; border-radius:999px; font-size:.64rem; font-weight:700; letter-spacing:.04em; background:#fdeede; color:#b46a12; border:1px solid #f2cd97; }
.bb-verify.sm { font-size:.56rem; padding:1px 7px; }
.bb-juris-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.bb-juris-card { padding:10px 12px; background:#f8efdb; border:1px solid #e7d3a0; border-radius:10px; }
.bb-juris-ref { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:.76rem; font-weight:700; color:#6b5a2a; }
.bb-juris-note { font-size:.72rem; color:#5c4f28; margin-top:4px; }

/* Transverse. */
.bb-tv { margin-top:22px; border-top:1px solid var(--line); padding-top:18px; }
.bb-tv-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; }
.bb-tv-cap { font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-500); margin-bottom:8px; }
.bb-tv-cap.later { margin-top:14px; }
.bb-mini { background:none; border:1px solid var(--line); border-radius:7px; padding:4px 10px; font-size:.68rem; font-weight:600; color:var(--grey-600); cursor:pointer; font-family:inherit; }
.bb-mini:hover { border-color:var(--psg-navy); color:var(--psg-navy); }
.bb-proc-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.bb-proc { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:.68rem; font-weight:600; background:#eef1f5; color:var(--grey-600); border:1px solid var(--line); }
.bb-proc-main { background:var(--psg-navy); color:#fff; border-color:var(--psg-navy); }
.bb-weak { padding:8px 11px; border:1px solid #f2cd97; background:#fdf7ec; border-radius:9px; margin-bottom:8px; }
.bb-weak-t { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:.7rem; font-weight:700; color:#a8681a; }
.bb-weak-n { font-size:.74rem; color:var(--grey-600); margin-top:2px; overflow-wrap:anywhere; }
.bb-tv .bb-riposte { margin-bottom:8px; }
.bb-tv-adders { display:flex; gap:6px; margin-top:2px; flex-wrap:wrap; }

/* Vue Plaidoirie. */
.bb-plaid-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:6px; }
.bb-plaid-title { margin:0; font-size:1.1rem; font-weight:700; color:var(--psg-navy); }
.bb-plaid-desc { margin:5px 0 0; font-size:.76rem; color:var(--grey-600); max-width:640px; }
.bb-copy { flex:none; display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border:1px solid var(--line); background:#fff; border-radius:9px; font-size:.76rem; font-weight:600; color:var(--grey-600); cursor:pointer; font-family:inherit; }
.bb-copy:hover { border-color:var(--psg-navy); color:var(--psg-navy); }
.bb-copy svg { width:14px; height:14px; }
.bb-plaid-list { display:flex; flex-direction:column; gap:20px; margin-top:14px; }
.bb-plaid-card { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.bb-plaid-card-head { padding:12px 18px; background:#f7f9fb; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:9px; }
.bb-plaid-card-head h3 { margin:0; font-size:.92rem; font-weight:700; color:var(--ink); }
.bb-plaid-grid { display:grid; grid-template-columns:220px 1fr; }
.bb-chrono { padding:16px; border-right:1px solid var(--line); background:#fbfcfd; }
.bb-chrono-list { position:relative; padding-left:16px; }
.bb-chrono-list::before { content:''; position:absolute; left:4px; top:4px; bottom:4px; width:1.5px; background:var(--line); }
.bb-chrono-item { position:relative; margin-bottom:13px; }
.bb-chrono-item::before { content:''; position:absolute; left:-16px; top:3px; width:8px; height:8px; border-radius:50%; background:var(--psg-navy); border:2px solid #fff; box-shadow:0 0 0 1px var(--line); }
.bb-chrono-d { font-size:.7rem; font-weight:700; color:var(--psg-navy); }
.bb-chrono-l { font-size:.7rem; color:var(--grey-600); line-height:1.4; overflow-wrap:anywhere; }
.bb-steps { padding:16px 20px; }
.bb-step { display:flex; gap:11px; margin-bottom:13px; }
.bb-step-n { flex:none; width:22px; height:22px; border-radius:50%; background:#eef1f5; color:var(--psg-navy); font-size:.7rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.bb-step-t { font-size:.8rem; line-height:1.6; color:var(--ink); padding-top:1px; overflow-wrap:anywhere; }

/* États. */
.bb-void { padding:44px 20px; text-align:center; }
.bb-void-ico { width:44px; height:44px; border-radius:12px; background:#f2f4f7; display:inline-flex; align-items:center; justify-content:center; color:var(--grey-400); margin-bottom:12px; }
.bb-void-ico svg { width:22px; height:22px; }
.bb-void-t { font-size:.84rem; font-weight:700; color:var(--ink); }
.bb-void-p { margin:6px auto 0; font-size:.74rem; color:var(--grey-600); max-width:300px; }
.bb-void .bb-btn { margin-top:14px; }
.bb-nolaw { padding:10px 12px; border:1px dashed var(--line); border-radius:9px; background:#fbfcfd; font-size:.76rem; color:var(--grey-600); margin-top:14px; }

@media (max-width:960px) {
    .bb-layout { grid-template-columns:1fr; }
    .bb-rail { border-right:0; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:6px; border-radius:0; }
    .bb-rail-cap, .bb-legend { flex-basis:100%; }
    .bb-front { width:auto; flex:1 1 200px; margin-bottom:0; }
    .bb-grid { grid-template-columns:1fr; }
    .bb-cell-charge { border-right:0; border-bottom:1px solid var(--line); }
    .bb-cell-loi { border-right:0; border-bottom:1px solid #e7d3a0; }
    .bb-tv-grid, .bb-juris-grid, .bb-plaid-grid { grid-template-columns:1fr; }
    .bb-chrono { border-right:0; border-bottom:1px solid var(--line); }
}

/* Édition inline + argument de riposte. */
.bb-editbtn svg { width:12px; height:12px; }
.bb-riposte-note { margin-top:4px; font-size:.74rem; font-style:italic; color:var(--grey-600); overflow-wrap:anywhere; }
.bb-step-desc { font-size:.74rem; font-style:italic; color:var(--grey-600); margin-left:12px; overflow-wrap:anywhere; }
.bb-step-desc.kill { margin-left:26px; }
.bb-step-desc.arg { font-style:normal; color:var(--grey-700); }
.bb-ref-btn { cursor:pointer; }
.bb-ref-btn:hover { border-color:var(--psg-navy); background:var(--psg-navy); color:#fff; }

/* Picker filtrable. */
.bb-picker { display:flex; flex-direction:column; gap:5px; }
.bb-pick-filter { width:100%; padding:5px 8px; border:1px solid var(--line); border-radius:7px; background:#fff; font-family:inherit; font-size:.74rem; color:var(--ink); }

/* Aperçu de pièce (panneau latéral). */
/* Au-dessus de la topbar (90) et de la sidebar (100), sous les modals (200) —
   à 80 l'en-tête du panneau disparaissait sous la barre haute. */
.bb-peek { position:fixed; inset:0; z-index:120; }
.bb-peek-back { position:absolute; inset:0; background:rgba(10,20,35,.35); }
.bb-peek-card { position:absolute; top:0; right:0; bottom:0; width:min(440px, 92vw); background:#fff; box-shadow:-12px 0 34px rgba(16,24,40,.22); padding:16px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.bb-peek-head { display:flex; align-items:center; gap:8px; }
.bb-peek-title { flex:1; min-width:0; font-size:.9rem; font-weight:700; color:var(--psg-navy); overflow-wrap:anywhere; }
.bb-peek-chips { display:flex; flex-wrap:wrap; gap:6px; }
.bb-peek-desc { margin:0; font-size:.78rem; color:var(--grey-700); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.bb-peek-notes { margin:0; font-size:.74rem; font-style:italic; color:var(--grey-600); white-space:pre-wrap; overflow-wrap:anywhere; }
.bb-peek-preview { flex:1; min-height:220px; border:1px solid var(--line); border-radius:9px; background:#f7f9fb; display:flex; align-items:center; justify-content:center; font-size:.76rem; color:var(--grey-500); padding:8px; overflow:auto; }
.bb-peek-img { max-width:100%; max-height:100%; object-fit:contain; border-radius:5px; }
.bb-peek-frame { width:100%; height:100%; min-height:420px; border:0; border-radius:5px; }
.bb-peek-text { margin:0; width:100%; max-height:420px; overflow:auto; font-size:.7rem; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--grey-800); }

/* Plaidoirie enrichie : blocs justifiés + lecture aux yeux de la loi. */
.bb-plaid-stmt { margin:10px 18px 0; font-size:.78rem; color:var(--grey-700); line-height:1.55; }
.bb-legal { margin:10px 18px; padding:8px 12px; border-radius:9px; font-size:.78rem; line-height:1.5; border:1px solid var(--line); background:#f7f9fb; color:var(--grey-700); }
.bb-legal.sm { margin:8px 0 0; font-size:.74rem; }
.bb-legal.tone-ok { background:#e7f4ec; border-color:#b9e0c8; color:#1f7a48; }
.bb-legal.tone-bad { background:#fbe9e7; border-color:#f0c3bd; color:#b0362a; }
.bb-legal.tone-warn { background:#fdf5e8; border-color:#f0dcb4; color:#a8681a; }
.bb-legal.tone-steel { background:#eaf1f8; border-color:#c5d8ea; color:#3a6187; }
.bb-legal.tone-mute { background:#f4f5f7; border-color:#e5e9ef; color:#98a1ad; }
.bb-step-block { margin-bottom:16px; }
.bb-step-block .bb-step { margin-bottom:6px; }
.bb-step-body { margin-left:33px; display:flex; flex-direction:column; gap:4px; }
.bb-step-law { font-size:.74rem; color:#6b5a2a; background:#f8efdb; border:1px solid #e7d3a0; border-radius:7px; padding:5px 9px; overflow-wrap:anywhere; }
.bb-step-charge { font-size:.76rem; color:var(--st-bad); font-weight:600; overflow-wrap:anywhere; }
.bb-step-kill { font-size:.75rem; color:var(--st-ok); margin-left:12px; overflow-wrap:anywhere; }
.bb-step-rip { font-size:.75rem; color:var(--psg-navy); overflow-wrap:anywhere; }
.bb-step-angle { font-size:.74rem; font-style:italic; color:var(--grey-600); overflow-wrap:anywhere; }
.bb-plaid-tv { margin-top:14px; padding-top:10px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:4px; }

/* ══════════════════════════════════════════════════════════════════════════
   Chronologie « La Confrontation » (design Chronologie.dc, Phase 32).
   Colonne vertébrale navy ; la DATE une seule fois, sur son nœud ; bandes de
   mois avec le temps écoulé ; duel (poutre + flèches) quand les deux rives se
   répondent le même jour ; cartes typées par couleur — fait navy, pièce or,
   allégation gris, acte bleu, échéance rouge. Loupe/peek, tiroir de preuves,
   duels et badges matrice : mécanique inchangée.
   ══════════════════════════════════════════════════════════════════════════ */
.tf { position:relative; padding:4px 0 12px; }
.tf-caps { display:grid; grid-template-columns:1fr 150px 1fr; gap:12px; align-items:center; margin-bottom:10px; }
.tf-cap { font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.tf-cap-l { justify-self:end; color:var(--st-bad); }
.tf-cap-l::before { content:'‹ '; }
.tf-cap-r { justify-self:start; color:var(--st-ok); }
.tf-cap-r::after { content:' ›'; }
.tf-cap-mid { text-align:center; font-size:.64rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-400); }

.tf-rail { position:relative; padding:6px 0 10px; }
.tf-wash { position:absolute; top:0; bottom:0; width:42%; pointer-events:none; }
.tf-wash-l { left:0; background:linear-gradient(90deg, rgba(189,43,33,.06), rgba(189,43,33,0)); }
.tf-wash-r { right:0; background:linear-gradient(270deg, rgba(18,128,90,.07), rgba(18,128,90,0)); }
.tf-spinebar { position:absolute; top:10px; bottom:10px; left:50%; width:3px; transform:translateX(-1.5px); background:var(--psg-navy); border-radius:3px; }

.tf-band { position:relative; z-index:2; display:flex; align-items:center; gap:14px; margin:24px 0 12px; }
.tf-band::before, .tf-band::after { content:''; flex:1; height:2px; background:var(--line); }
.tf-band-pill { display:flex; align-items:center; gap:10px; padding:6px 16px; background:var(--psg-navy); border-radius:999px; box-shadow:0 8px 20px -10px rgba(0,26,47,.55); font-size:.76rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff; }
.tf-band-gap { font-size:.64rem; font-weight:600; color:#7fd0f7; text-transform:none; letter-spacing:0; }

.tf-today { position:relative; z-index:2; display:flex; align-items:center; gap:12px; margin:14px 0; }
.tf-today::before, .tf-today::after { content:''; flex:1; border-top:2px dashed #f0b3ae; }
.tf-today span { font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--st-bad); background:#fbeceb; border:1px solid #f0c9c5; padding:3px 11px; border-radius:999px; }

.tf-node { position:relative; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; width:46px; height:46px; border-radius:999px; background:var(--psg-navy); border:3px solid #dbe2ea; box-shadow:0 5px 14px -4px rgba(2,13,26,.5); flex:none; }
.tf-node.duel { border-color:var(--psg-gold); }
.tf-node.today { border-color:var(--st-bad); }
.tf-node-d { font-size:.92rem; font-weight:800; color:#fff; line-height:1; }
.tf-node-m { font-size:.46rem; font-weight:800; letter-spacing:.05em; color:#8fa8bd; margin-top:1px; }

.tf-g { position:relative; z-index:2; }
.tf-g-sides { display:grid; grid-template-columns:1fr 150px 1fr; align-items:center; padding:8px 0; }
.tf-lane { display:flex; flex-direction:column; gap:10px; min-width:0; }
.tf-lane-l { justify-self:end; width:min(432px, 100%); }
.tf-lane-r { justify-self:start; width:min(432px, 100%); }
.tf-mid { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; align-self:center; }
.tf-beam { position:absolute; left:-8px; right:-8px; top:50%; height:3px; transform:translateY(-1.5px); background:var(--psg-navy); }
.tf-arr { position:absolute; top:50%; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.tf-arr-l { left:-13px; transform:translateY(-50%); border-left:9px solid var(--st-bad); }
.tf-arr-r { right:-13px; transform:translateY(-50%); border-right:9px solid var(--st-ok); }
.tf-duel-pill { position:relative; z-index:4; font-size:.54rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--psg-navy); padding:2px 9px; border-radius:999px; margin-bottom:6px; }
.tf-g-center { display:flex; flex-direction:column; align-items:center; padding:8px 0 10px; }
.tf-lane-center { width:560px; max-width:62%; margin-top:11px; display:flex; flex-direction:column; gap:10px; }
.tf-lane-undated { margin:8px auto 0; }

/* Cartes typées : liseré haut à la couleur du kind, disque d'icône, chip. */
.tf-card { background:#fff; border:1px solid #e8ebf0; border-top:3px solid var(--grey-300); border-radius:13px; box-shadow:0 14px 30px -24px rgba(2,13,26,.45); padding:12px 14px 11px; text-align:left; }
.tf-card.kind-event { border-top-color:var(--psg-navy); }
.tf-card.kind-piece { border-top-color:#c9a227; }
.tf-card.kind-claim { border-top-color:var(--grey-500); }
.tf-card.kind-act { border-top-color:var(--psg-gold); }
.tf-card.kind-deadline { border-top-color:var(--st-bad); }
.tf-ch { display:flex; align-items:flex-start; gap:10px; }
.tf-ico { width:30px; height:30px; flex:none; border-radius:999px; color:#fff; display:flex; align-items:center; justify-content:center; background:var(--grey-500); }
.tf-ico svg { width:15px; height:15px; }
.tf-ico.k-event { background:var(--psg-navy); }
.tf-ico.k-piece { background:#c9a227; }
.tf-ico.k-claim { background:var(--grey-500); }
.tf-ico.k-act { background:var(--psg-gold); }
.tf-ico.k-deadline { background:var(--st-bad); }
.tf-ch-main { flex:1; min-width:0; }
.tf-chips { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:3px; }
.tf-kchip { display:inline-block; font-size:.6rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:2px 9px; border-radius:999px; border:1px solid; }
.tf-kchip.k-event { color:var(--psg-navy); background:#eaeef2; border-color:rgba(0,26,47,.25); }
.tf-kchip.k-piece { color:#8a6d12; background:#f8f1da; border-color:rgba(201,162,39,.4); }
.tf-kchip.k-claim { color:var(--grey-600); background:#eef1f4; border-color:#dbe1e8; }
.tf-kchip.k-act { color:#0f79b8; background:#e6f3fc; border-color:rgba(64,174,240,.4); }
.tf-kchip.k-deadline { color:var(--st-bad); background:#fbeceb; border-color:#f1c9c6; }
.tf-title { font-size:.88rem; font-weight:700; color:var(--ink); line-height:1.3; overflow-wrap:anywhere; }
.tf-gestures { display:flex; align-items:center; gap:6px; flex:none; }
.tf-urg { display:inline-block; font-size:.62rem; font-weight:800; padding:2px 10px; border-radius:999px; border:1px solid; }
.tf-urg.u-overdue, .tf-urg.u-today { color:#fff; background:var(--st-bad); border-color:var(--st-bad); }
.tf-urg.u-hot { color:var(--st-bad); background:#fbeceb; border-color:#f1c9c6; }
.tf-urg.u-warn { color:#8a6d12; background:#f8f1da; border-color:#e9d9a3; }
.tf-urg.u-calm { color:var(--grey-500); background:#eef1f4; border-color:#dbe1e8; }
.tf-body { margin:7px 0 0; font-size:.78rem; color:var(--grey-700); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.tf-card .bb-kill { margin-top:8px; }
.tf-card .bb-form { margin-top:8px; }
.tf-side-sel { margin-top:6px; height:24px; padding:0 6px; border:1px solid var(--st-warn); border-radius:7px; background:#fff; color:var(--st-warn); font-family:inherit; font-size:.68rem; font-weight:600; }
.tf-proofhost:not(:empty) { margin-top:8px; }
.tf-proofhost .proof-box { border:1px solid var(--line); border-radius:9px; padding:9px 11px; background:#fbfcfd; }
.tf-undated-cap { text-align:center; font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-400); margin:18px 0 4px; }
.tf-empty { font-size:.8rem; color:var(--grey-500); padding:10px 2px; }

@media (max-width: 900px) {
    .tf-caps { grid-template-columns:1fr; gap:4px; }
    .tf-cap-mid { display:none; }
    .tf-cap-l { justify-self:start; }
    .tf-wash { display:none; }
    .tf-spinebar { left:22px; }
    .tf-g-sides { grid-template-columns:56px 1fr; }
    .tf-mid { grid-column:1; grid-row:1 / span 2; align-self:start; }
    .tf-beam, .tf-arr, .tf-duel-pill { display:none; }
    .tf-lane-l, .tf-lane-r { grid-column:2; justify-self:stretch; width:auto; }
    .tf-lane-l { grid-row:1; }
    .tf-lane-r { grid-row:2; margin-top:10px; }
    .tf-g-center { flex-direction:row; align-items:flex-start; gap:10px; padding-left:5px; }
    .tf-lane-center { max-width:none; width:auto; flex:1; margin-top:0; }
    .tf-band-pill { font-size:.68rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Bordereau de communication de pièces (Phase 25A, arts 132-135 CPC).
   Les pièces telles que le tribunal les connaît : n° d'ordre par procédure,
   intitulé officiel, suivi de communication, impression du bordereau.
   ══════════════════════════════════════════════════════════════════════════ */
.bx { display:flex; flex-direction:column; gap:8px; }
.bx-row { display:flex; align-items:flex-start; gap:12px; padding:9px 12px; background:#fff; border:1px solid var(--st-line); border-left:4px solid var(--st-warn); border-radius:10px; }
.bx-row.communicated { border-left-color: var(--st-ok); }
.bx-no { flex:none; font-family:var(--mono); font-size:.74rem; font-weight:800; color:var(--psg-navy); background:#eef1f5; border:1px solid var(--line); border-radius:7px; padding:3px 9px; white-space:nowrap; }
.bx-main { flex:1; min-width:0; }
.bx-title-line { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.bx-title { font-size:.82rem; font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.bx-meta { margin-top:3px; font-size:.72rem; }
.bx-meta.ok { color:var(--st-ok); }
.bx-meta.warn { color:var(--st-warn); }
.bx-actions { margin-top:2px; }
.bx-form-cap2 { font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--grey-500); margin:8px 0 5px; }
.bb-form input[type="number"] { width:130px; flex:0 0 130px; padding:6px 8px; border:1px solid var(--line); border-radius:7px; background:#fff; font-family:inherit; font-size:.76rem; }
.bb-form input[type="date"] { padding:5px 8px; border:1px solid var(--line); border-radius:7px; background:#fff; font-family:inherit; font-size:.76rem; }

/* ── Délais & échéances (Phase 27) ─────────────────────────────────────────
   La plus urgente d'abord ; l'urgence est une COULEUR dérivée, jamais un état
   stocké : rouge = en retard / aujourd'hui / J-7, ambre = J-30, gris = loin. */
.dl { display:flex; flex-direction:column; gap:8px; }
.dl-row { display:flex; align-items:flex-start; gap:12px; padding:10px 13px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.dl-row.u-overdue, .dl-row.u-today { border-color:var(--st-bad-line); background:var(--st-bad-bg); }
.dl-row.u-hot { border-color:var(--st-bad-line); }
.dl-row.u-warn { border-color:#f0dcb4; }
.dl-row.status-done, .dl-row.status-cancelled { opacity:.62; }
.dl-row.status-missed { border-color:var(--st-bad-line); background:var(--st-bad-bg); }
.dl-when { flex:0 0 110px; text-align:center; }
.dl-date { font-size:.86rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.dl-days { margin-top:2px; font-size:.66rem; font-weight:700; letter-spacing:.04em; }
.dl-days.u-overdue, .dl-days.u-today { color:var(--st-bad); }
.dl-days.u-hot { color:var(--st-bad); }
.dl-days.u-warn { color:#a8681a; }
.dl-days.u-calm { color:var(--grey-500); }
.dl-days.done { color:var(--st-ok); }
.dl-main { flex:1; min-width:0; }
.dl-title-line { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.dl-title { font-size:.82rem; font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.dl-basis { font-size:.68rem; color:var(--grey-500); font-style:italic; }
.dl-rule { margin-top:3px; font-size:.7rem; color:var(--grey-500); font-style:italic; }
.dl-notes { margin-top:3px; font-size:.74rem; color:var(--grey-600); overflow-wrap:anywhere; }
.dl-done-btn { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border:1px solid var(--st-ok-line); background:var(--st-ok-bg); color:var(--st-ok); border-radius:7px; font-size:.7rem; font-weight:700; cursor:pointer; font-family:inherit; }
.dl-done-btn svg { width:12px; height:12px; }
.dl-settled-cap { margin-top:8px; font-size:.64rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--grey-500); }
.dl-preview { font-size:.72rem; color:var(--psg-navy); font-weight:600; background:#f6f8fb; border:1px dashed var(--psg-navy); border-radius:7px; padding:6px 9px; margin-bottom:6px; line-height:1.5; }
.dl-form .bb-seg { margin-top:2px; }

/* En-tête d'impression (rempli au moment d'imprimer, invisible à l'écran). */
.bx-print-head { display:none; }
.bx-ph-title { font-size:1.05rem; font-weight:800; letter-spacing:.04em; text-align:center; }
.bx-ph-sub { text-align:center; font-size:.85rem; margin-top:4px; }
.bx-ph-date { text-align:center; font-size:.75rem; color:#444; margin:4px 0 14px; }

@media print {
    /* Impression du panneau défense : la vue courante (matrice / plaidoirie /
       conclusions), sans le shell ni le rail ni aucun geste d'écriture. */
    body.printing-defense { background:#fff !important; }
    body.printing-defense .sidebar,
    body.printing-defense .topbar,
    body.printing-defense .case-head,
    body.printing-defense .case-tabs,
    body.printing-defense .breadcrumbs,
    body.printing-defense .panel-defense .panel-head,
    body.printing-defense .bb-rail,
    body.printing-defense .bb-dash,
    body.printing-defense .bb-trancher,
    body.printing-defense .bb-form,
    body.printing-defense .bb-kill-icons,
    body.printing-defense .bb-loupebtn,
    body.printing-defense .bb-x,
    body.printing-defense .bb-mini,
    body.printing-defense .bb-copy,
    body.printing-defense .cc-box,
    body.printing-defense .cc-tools,
    body.printing-defense .case-tabpanel:not([data-tabpanel="defense"]) { display:none !important; }
    body.printing-defense .main { margin:0 !important; padding:0 !important; }
    body.printing-defense .panel-defense { border:0 !important; box-shadow:none !important; }
    body.printing-defense .bb-layout { display:block !important; }
    body.printing-defense .bb-pane { padding:0 !important; }
    body.printing-defense .bb-el, body.printing-defense .bb-plaid-card { page-break-inside:avoid; }
    body.printing-defense .cc-doc { border:0 !important; max-width:none !important; padding:0 !important; }

    body.printing-bordereau { background:#fff !important; }
    body.printing-bordereau .sidebar,
    body.printing-bordereau .topbar,
    body.printing-bordereau .case-head,
    body.printing-bordereau .case-tabs,
    body.printing-bordereau .breadcrumbs,
    body.printing-bordereau .panel-evidence,
    body.printing-bordereau .panel-bordereau .panel-head,
    body.printing-bordereau .bx-actions,
    body.printing-bordereau .bb-kill-icons,
    body.printing-bordereau .bb-loupebtn,
    body.printing-bordereau .bb-form { display:none !important; }
    body.printing-bordereau .main { margin:0 !important; padding:0 !important; }
    body.printing-bordereau .panel-bordereau { border:0 !important; box-shadow:none !important; }
    body.printing-bordereau .bx-print-head { display:block; }
    body.printing-bordereau .bx-row { border:0; border-bottom:1px solid #ccc; border-radius:0; page-break-inside:avoid; }
    body.printing-bordereau .bb-ref-btn { border:0; background:none; color:#444; }
}

/* Badges de rôle des pièces (matrice/bordereau/duels) + corps clampé. */
.tf-body { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; }
.tf-badge { margin-top:5px; font-size:.7rem; line-height:1.4; border-radius:6px; padding:3px 8px; overflow-wrap:anywhere; }
.tf-badge.charge { color:var(--st-bad); background:var(--st-bad-bg, #fbe9e7); border:1px solid #f0c3bd; }
.tf-badge.def { color:#1f7a48; background:#f2f9f4; border:1px solid #cbe7d5; }
.tf-badge.neutral { color:var(--grey-600); background:#f2f4f7; border:1px solid var(--line); }

/* L'aperçu de pièce : ses fronts (bordereau + matrice). */
.bb-peek-fronts { display:flex; flex-direction:column; gap:4px; }
.bb-peek-fronts-cap { font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--grey-500); margin-top:4px; }