/* =============================================================
   CRM Juridique — Style global
   =============================================================
   Refonte visuelle Claude Design (avr 2026) :
     - Palette neutre zinc + accent ambre (legal)
     - Typo : Inter (UI) / Instrument Serif (titres) / JetBrains Mono (chiffres)
     - Densite aeree, focus sur lisibilite et sobriete
     - Light + Dark mode via [data-theme]
   Philosophie : theme swap sur classes existantes (preserve app.js)
   ============================================================= */


/* =============================================================
   DESIGN TOKENS
   ============================================================= */
:root {
    /* Neutrals zinc */
    --bg: #fafaf9;
    --surface: #ffffff;
    --surface-2: #f5f5f4;
    --surface-3: #ebebe9;
    --border: #e7e5e4;
    --border-strong: #d6d3d1;
    --text: #1c1917;
    --text-muted: #57534e;
    --text-subtle: #a8a29e;

    /* Accent — ambre sobre (legal) */
    --accent: #b45309;
    --accent-hover: #92400e;
    --accent-soft: #fef3c7;
    --accent-border: #fde68a;

    /* Semantics */
    --ok: #16a34a;
    --ok-soft: #dcfce7;
    --warn: #d97706;
    --warn-soft: #fef3c7;
    --danger: #dc2626;
    --danger-soft: #fee2e2;
    --info: #2563eb;
    --info-soft: #dbeafe;

    /* Geometry */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04);
    --shadow: 0 1px 3px rgba(28, 25, 23, 0.08), 0 1px 2px rgba(28, 25, 23, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.08), 0 2px 4px -2px rgba(28, 25, 23, 0.06);
    --shadow-lg: 0 12px 32px -8px rgba(28, 25, 23, 0.18), 0 0 0 1px rgba(28, 25, 23, 0.06);
    --shadow-xl: 0 20px 50px -10px rgba(28, 25, 23, 0.25);

    /* Typography (les familles sont definies dans fonts/fonts.css) */
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 28px;
    --font-size-3xl: 34px;

    /* Sizes */
    --sidebar-w: 248px;
    --topbar-h: 52px;

    /* Transitions */
    --t-fast: 0.1s ease;
    --t: 0.15s ease;
}

[data-theme="dark"] {
    --bg: #0c0a09;
    --surface: #1c1917;
    --surface-2: #292524;
    --surface-3: #44403c;
    --border: #292524;
    --border-strong: #44403c;
    --text: #fafaf9;
    --text-muted: #a8a29e;
    --text-subtle: #78716c;

    --accent: #fbbf24;
    --accent-hover: #f59e0b;
    --accent-soft: #422006;
    --accent-border: #78350f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.6);
}


/* =============================================================
   RESET + BASE
   ============================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body { height: 100%; }
body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga", "calt", "ss01";
    letter-spacing: -0.005em;
    overflow: hidden;
}
button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }


/* =============================================================
   APP LAYOUT
   ============================================================= */
.app-container {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    /* Maxime 2026-05-05 : compense le zoom de l'interface (variable
       --zoom-factor pilotee par JS, default 1). Sans ca, un zoom 1.15
       fait deborder le sidebar de 15vh et coupe le chip user en bas. */
    height: calc(100vh / var(--zoom-factor, 1));
    overflow: hidden;
}


/* =============================================================
   SIDEBAR
   ============================================================= */
.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.sidebar-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border);
}
.sidebar-header h1 {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.15;
}
.sidebar-header .subtitle {
    font-size: var(--font-size-xs);
    color: var(--text-subtle);
    margin-top: 2px;
}

.nav-list {
    list-style: none;
    padding: 8px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: background var(--t-fast), color var(--t-fast);
    user-select: none;
}
.nav-item:hover {
    background: var(--surface-2);
    color: var(--text);
}
.nav-item.active {
    background: var(--surface-2);
    color: var(--text);
}
.nav-icon {
    flex-shrink: 0;
    font-size: 15px;
    opacity: 0.7;
}
.nav-item.active .nav-icon { opacity: 1; }

.notif-badge {
    margin-left: auto;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    font-variant-numeric: tabular-nums;
}

.sidebar-footer {
    padding: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}


/* =============================================================
   MAIN + HEADER
   ============================================================= */
.main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--bg);
}

.main-header {
    height: var(--topbar-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.main-header h2 {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
    line-height: 1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.nav-arrow-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
    transition: background var(--t-fast), color var(--t-fast);
    position: relative;
}
.nav-arrow-btn:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
}
.nav-arrow-btn:disabled {
    color: var(--text-subtle);
    opacity: 0.4;
    cursor: not-allowed;
}

#view-as-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.main-content {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px 80px;
}


/* =============================================================
   BOUTONS
   ============================================================= */
.btn-primary,
.btn-secondary,
.btn-danger,
button.btn-primary,
button.btn-secondary,
button.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: 1.4;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
}

.btn-primary {
    background: var(--text);
    color: var(--surface);
    border-color: var(--text);
}
.btn-primary:hover:not(:disabled) {
    background: var(--text-muted);
    border-color: var(--text-muted);
}

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: var(--text-subtle);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.btn-danger:hover:not(:disabled) {
    filter: brightness(0.95);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Accent (optionnel pour actions clés) */
.btn-accent {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--t-fast);
}
.btn-accent:hover { background: var(--accent-hover); }

/* Tailles */
.btn-small, .btn-sm {
    padding: 4px 9px !important;
    font-size: var(--font-size-sm) !important;
}
.btn-large {
    padding: 10px 20px !important;
    font-size: var(--font-size-md) !important;
}

/* Boutons icônes utilitaires */
.btn-delete {
    width: 24px;
    height: 24px;
    padding: 0 !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    color: var(--text-subtle) !important;
    border: none !important;
    font-size: 12px !important;
    transition: background var(--t-fast), color var(--t-fast);
}
.btn-delete:hover:not(:disabled) {
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
}
.btn-fiche {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent-border);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    transition: background var(--t-fast);
}
.btn-fiche:hover { background: var(--accent-border); }


/* =============================================================
   INPUTS + FORMULAIRES
   ============================================================= */
.crm-input,
.crm-select,
input.crm-input,
select.crm-select,
textarea.crm-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: var(--font-size-base);
    line-height: 1.4;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    font-family: var(--font-sans);
}
.crm-input:focus,
.crm-select:focus,
textarea.crm-input:focus {
    outline: none;
    border-color: var(--text);
    box-shadow: 0 0 0 3px rgba(28, 25, 23, 0.08);
}
textarea.crm-input {
    resize: vertical;
    min-height: 60px;
    font-family: var(--font-sans);
}

.inline-input,
.inline-select {
    padding: 4px 8px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--text);
    width: 100%;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.inline-input:hover,
.inline-select:hover {
    border-color: var(--border);
    background: var(--surface);
}
.inline-input:focus,
.inline-select:focus {
    outline: none;
    border-color: var(--text-subtle);
    background: var(--surface);
    box-shadow: 0 0 0 2px rgba(28, 25, 23, 0.05);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.field-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.form-grid .wide { grid-column: 1 / -1; }
.form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Filter bar (listes) */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.filter-bar .crm-input,
.filter-bar .crm-select {
    width: auto;
    min-width: 160px;
}


/* =============================================================
   TABLES
   ============================================================= */
.table-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
    margin-bottom: 16px;
}
.crm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);
    font-variant-numeric: tabular-nums;
}
.crm-table thead {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.crm-table th {
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    padding: 10px 12px;
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--surface-2);
    z-index: 1;
}
.crm-table th.sortable-th {
    cursor: pointer;
    user-select: none;
    transition: color var(--t-fast);
}
.crm-table th.sortable-th:hover { color: var(--text); }
.crm-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.crm-table tbody tr:last-child td { border-bottom: none; }
.crm-table tbody tr {
    transition: background var(--t-fast);
}
.crm-table tbody tr:hover { background: var(--surface-2); }

.crm-table .editable-cell {
    cursor: pointer;
    position: relative;
}
.crm-table .editable-cell:hover { background: color-mix(in srgb, var(--accent-soft) 40%, transparent); }
.crm-table .editable-cell.editing {
    padding: 4px;
    background: var(--surface);
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* Numéros / montants en mono */
.crm-table td.num,
.crm-table td[style*="text-align:right"] {
    font-family: var(--font-mono);
    font-weight: 500;
}

.link-cell {
    color: var(--text);
    font-weight: 500;
}
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: var(--surface-2); }

/* Statuts des lignes */
.row-retard { background: color-mix(in srgb, var(--danger-soft) 60%, transparent); }
.row-retard td { color: var(--danger); }
.row-retard:hover { background: color-mix(in srgb, var(--danger-soft) 85%, transparent); }
.row-fait { background: color-mix(in srgb, var(--ok-soft) 50%, transparent); opacity: 0.85; }
.row-fait td { color: var(--text-muted); }
.row-bloque { background: color-mix(in srgb, var(--warn-soft) 50%, transparent); }

.fiche-btn-cell {
    display: flex;
    gap: 4px;
    white-space: nowrap;
}


/* =============================================================
   PRIORITES + STATUTS (pills)
   ============================================================= */
.priorite-haute,
.priorite-moyenne,
.priorite-basse,
span.priorite-haute,
span.priorite-moyenne,
span.priorite-basse {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    letter-spacing: 0.01em;
}
.priorite-haute { background: var(--danger-soft); color: var(--danger); }
.priorite-moyenne { background: var(--warn-soft); color: var(--warn); }
.priorite-basse { background: var(--surface-2); color: var(--text-muted); }

/* Status pills (nouveaux) */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--surface);
    white-space: nowrap;
}
.status-pill::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-subtle);
}
.status-pill.en-cours { color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, var(--border)); }
.status-pill.en-cours::before { background: var(--info); }
.status-pill.urgent { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.status-pill.urgent::before { background: var(--danger); }
.status-pill.attente { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); }
.status-pill.attente::before { background: var(--warn); }

/* Jours restants colors */
.jr-retard { color: var(--danger); font-weight: 600; }
.jr-urgent { color: var(--warn); font-weight: 500; }
.jr-proche { color: var(--text); }
.jr-normal { color: var(--text-muted); }


/* =============================================================
   MODALES
   ============================================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 10, 9, 0.4);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}
.modal-content {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
}
.modal-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-header h3 {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
    flex: 1;
}
.modal-close {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast), color var(--t-fast);
}
.modal-close:hover {
    background: var(--surface-2);
    color: var(--text);
}
.modal-body {
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1;
}


/* =============================================================
   CARDS (nouveau composant Claude Design)
   ============================================================= */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.card-head {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border);
}
.card-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text);
    flex: 1;
}
.card-body { padding: 6px 0; }
.card-body.pad { padding: 18px; }
.card-foot {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}


/* =============================================================
   TABS (fiche dossier, facturation)
   ============================================================= */
.fiche-tabs {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--surface-2);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
}
.fiche-tab {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-muted);
    transition: background var(--t-fast), color var(--t-fast);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.fiche-tab:hover:not(.disabled) { color: var(--text); }
.fiche-tab.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.fiche-tab.disabled {
    color: var(--text-subtle);
    opacity: 0.5;
    cursor: not-allowed;
}
.fiche-tab-content {
    padding: 0;
}

.fiche-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.fiche-title {
    font-family: var(--font-serif);
    font-size: var(--font-size-3xl);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text);
    margin: 0;
    flex: 1;
}

/* Section title generique */
.section-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 20px 0 12px;
    line-height: 1.2;
}
h3.section-title:first-child { margin-top: 0; }


/* =============================================================
   MON ESPACE — tuiles KPI
   ============================================================= */
.mon-espace { padding: 0; }
.me-header { margin-bottom: 24px; }
.me-greeting {
    font-family: var(--font-serif);
    font-size: var(--font-size-3xl);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text);
    margin: 0;
}
.me-date {
    font-size: var(--font-size-md);
    color: var(--text-muted);
    margin-top: 6px;
}

.me-tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
}
.me-tuile {
    padding: 20px 24px;
    border-right: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--t-fast);
    position: relative;
}
.me-tuile:last-child { border-right: none; }
.me-tuile:hover { background: var(--surface-2); }
.me-tuile-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.01em;
}
.me-tuile-value {
    margin-top: 8px;
    font-size: var(--font-size-2xl);
    font-weight: 500;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    line-height: 1;
    font-family: var(--font-mono);
}

.me-section { margin-bottom: 24px; }


/* KPI cards (anciennes) */
.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    transition: box-shadow var(--t);
}
.kpi-card:hover { box-shadow: var(--shadow-md); }


/* =============================================================
   FAB (Floating Action Button)
   ============================================================= */
.fab-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 500;
}
.fab-button {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--text);
    color: var(--surface);
    font-size: 24px;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: transform var(--t), box-shadow var(--t);
}
.fab-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}
.fab-container.open .fab-button { transform: rotate(45deg); }

.fab-menu {
    position: absolute;
    bottom: 60px;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px;
    box-shadow: var(--shadow-lg);
    min-width: 200px;
}
.fab-menu-item {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    color: var(--text);
    text-align: left;
    transition: background var(--t-fast);
    white-space: nowrap;
}
.fab-menu-item:hover { background: var(--surface-2); }
.fab-menu-chrono { color: var(--accent); font-weight: 500; }


/* =============================================================
   TIMER WIDGET
   ============================================================= */
/* =============================================================
   FICHE DOSSIER : ONGLET "CLIENT" (refonte avr 2026)
   ============================================================= */

/* Carte mini-fiche du client li\u00e9 */
.fc-client-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
}
.fc-client-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.fc-client-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    font-size: 22px;
}
.fc-client-card-info {
    flex: 1;
    min-width: 0;
}
.fc-client-card-name {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--text);
    line-height: 1.2;
}
.fc-client-card-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}
.fc-client-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.fc-client-card-addr {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
}

/* Header section "Contacts du client" + chip count */
.fc-contacts-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}
.fc-contacts-head .section-title { margin: 0; }
.fc-contacts-head .chip {
    background: var(--surface-2);
    color: var(--text-muted);
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--border);
}

/* Liste contacts du client */
.fc-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.fc-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--t-fast);
}
.fc-contact-row:hover { border-color: var(--border-strong); }
.fc-contact-info { flex: 1; min-width: 0; }
.fc-contact-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    flex-wrap: wrap;
}
.fc-contact-role {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 500;
    background: var(--surface-2);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--border);
}
.fc-contact-billing-tag {
    font-size: 11px;
    color: var(--ok);
    font-weight: 500;
    background: color-mix(in srgb, var(--ok) 12%, var(--surface));
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--border));
}
.fc-contact-detail {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 4px;
    letter-spacing: 0.005em;
}
.fc-contacts-empty {
    padding: 20px;
    text-align: center;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}
.fc-contacts-empty p {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 13px;
}
.fc-contacts-actions {
    margin-top: 4px;
}

/* Vue "pas de client li\u00e9" */
.fc-no-client {
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    text-align: center;
}
.fc-no-client-text {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}
.fc-no-client-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Section legacy contacts (depliable) */
.fc-legacy-contacts {
    margin-top: 28px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.fc-legacy-contacts-summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fc-legacy-contacts-summary::before {
    content: '\25B8 ';
    font-size: 12px;
    transition: transform var(--t-fast);
}
.fc-legacy-contacts[open] .fc-legacy-contacts-summary::before {
    transform: rotate(90deg);
}
.fc-legacy-contacts-summary::-webkit-details-marker { display: none; }
.fc-legacy-contacts-hint {
    font-size: 11.5px;
    color: var(--text-subtle);
    font-weight: 400;
    font-style: italic;
}
.fc-legacy-contacts-body {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fc-legacy-contact {
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.fc-legacy-contact-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.fc-legacy-contact-detail {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}


/* =============================================================
   ONGLET CLIENTS : section "Dossiers sans client li\u00e9" (look soft)
   ============================================================= */
.orphan-clients-section {
    margin-top: 24px;
    padding: 18px 20px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.orphan-clients-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.orphan-clients-title {
    margin: 0 0 4px;
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
}
.orphan-clients-sub {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 60ch;
    letter-spacing: 0.005em;
}
.orphan-clients-dismiss {
    flex-shrink: 0;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--t-fast);
    font-family: inherit;
}
.orphan-clients-dismiss:hover {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
}

.orphan-clients-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.orphan-clients-row {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--t-fast);
}
.orphan-clients-row:hover {
    border-color: var(--border-strong);
}
.orphan-clients-row-info {
    flex: 1;
    min-width: 0;
}
.orphan-clients-row-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.orphan-clients-row-meta {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =============================================================
   FICHE DOSSIER : s\u00e9lecteur de dossier en haut (look SaaS)
   ============================================================= */
.fiche-selector {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    flex-wrap: nowrap;
}
.fiche-selector-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    white-space: nowrap;
    /* Maxime 2026-05-04 : devient un button (au lieu de div) qui ramene a la
       liste des dossiers. On retire les styles button par defaut pour conserver
       l'apparence d'origine, on ajoute juste cursor pointer + hover subtil. */
    background: transparent;
    border: 1px solid transparent;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.fiche-selector-label:hover {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
.fiche-selector-label:hover svg {
    color: var(--text);
}
.fiche-selector-label svg {
    flex-shrink: 0;
    color: var(--text-subtle);
    transition: color 0.12s;
}
.fiche-selector-label span:not(.fiche-selector-count) {
    color: var(--text-muted);
}
.fiche-selector-label:hover span:not(.fiche-selector-count) {
    color: var(--text);
}
.fiche-selector-count {
    margin-left: 4px;
    padding: 2px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-subtle);
    text-transform: none;
    letter-spacing: 0;
}
.fiche-selector .searchable-select {
    flex: 1;
    max-width: 480px;
}
@media (max-width: 720px) {
    .fiche-selector { flex-wrap: wrap; gap: 8px; }
    .fiche-selector .searchable-select { max-width: 100%; width: 100%; }
}


/* =============================================================
   SEARCHABLE SELECT (composant g\u00e9n\u00e9rique helpers.js)
   ============================================================= */
.searchable-select {
    position: relative;
    display: block;
    width: 100%;
    font-family: var(--font-sans);
}
.ss-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13.5px;
    color: var(--text);
    cursor: pointer;
    transition: all var(--t-fast);
    min-height: 38px;
    box-sizing: border-box;
    user-select: none;
}
.ss-display:hover {
    border-color: var(--border-strong);
}
.searchable-select.open .ss-display {
    border-color: var(--text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent);
}
.ss-display-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: -0.005em;
}
.ss-display-text.placeholder {
    color: var(--text-subtle);
    font-weight: 400;
}
.ss-arrow {
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
    transition: transform var(--t-fast);
}
.searchable-select.open .ss-arrow {
    transform: rotate(180deg);
    color: var(--text);
}

.ss-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 500;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px -8px rgba(12, 10, 9, 0.18),
                0 4px 12px -4px rgba(12, 10, 9, 0.08);
    margin-top: 4px;
    overflow: hidden;
    display: none;
    animation: ssDropIn 0.15s ease;
}
.ss-dropdown.open {
    display: block;
}
@keyframes ssDropIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.ss-search {
    width: 100%;
    padding: 11px 14px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 13.5px;
    font-family: inherit;
    color: var(--text);
    outline: none;
    box-sizing: border-box;
    letter-spacing: -0.005em;
}
.ss-search::placeholder {
    color: var(--text-subtle);
}
.ss-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
}
.ss-item {
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    color: var(--text);
    cursor: pointer;
    transition: background var(--t-fast);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.005em;
}
.ss-item:hover {
    background: var(--surface-2);
}
.ss-item.selected {
    background: var(--surface-2);
    font-weight: 500;
    color: var(--text);
    position: relative;
    padding-left: 24px;
}
.ss-item.selected::before {
    content: '\2713';
    position: absolute;
    left: 8px;
    color: var(--text);
    font-weight: 600;
    font-size: 12px;
}
.ss-no-result {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-subtle);
    font-size: 13px;
    font-style: italic;
}


/* =============================================================
   DRAWER : bandeau contextuel (ex: cr\u00e9ation client depuis flow dossier)
   ============================================================= */
.drawer-context-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    color: var(--text);
}
.drawer-context-banner svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--accent);
}
.drawer-context-banner-text {
    flex: 1;
    min-width: 0;
}
.drawer-context-banner-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.005em;
}
.drawer-context-banner-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.45;
}

/* Hint sous le label "Client li\u00e9 au dossier" dans le drawer dossier */
.qa-client-section-hint {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-muted);
    letter-spacing: 0.005em;
    line-height: 1.4;
    font-weight: 400;
}


/* =============================================================
   QUICK ADD : section client li\u00e9 (cr\u00e9ation dossier)
   ============================================================= */
.qa-client-section {
    margin-top: 14px;
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.qa-client-section .field-label {
    margin-bottom: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.qa-client-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.qa-client-btn {
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    transition: all var(--t-fast);
    text-align: center;
}
.qa-client-btn:hover {
    border-color: var(--border-strong);
    background: var(--surface);
    transform: translateY(-1px);
}
.qa-client-btn-new {
    border-style: dashed;
}

/* Carte client li\u00e9 */
.qa-client-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.qa-client-card-info {
    flex: 1;
    min-width: 0;
}
.qa-client-card-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qa-client-card-sub {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 3px;
}
.qa-client-card-remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    transition: all var(--t-fast);
    flex-shrink: 0;
}
.qa-client-card-remove:hover {
    background: var(--surface-2);
    border-color: var(--danger);
    color: var(--danger);
}


/* =============================================================
   POPUP S\u00e9LECTION CLIENT (overlay sur drawer dossier)
   ============================================================= */
.qa-picker-overlay {
    position: absolute;
    inset: 0;
    background: rgba(12, 10, 9, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: drawerFadeIn 0.16s ease;
}
.qa-picker-box {
    width: calc(100% - 32px);
    max-width: 460px;
    max-height: calc(100% - 60px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px -10px rgba(12, 10, 9, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.qa-picker-header {
    padding: 14px 18px;
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.qa-picker-search {
    margin: 12px 18px 6px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    outline: none;
    transition: all var(--t-fast);
}
.qa-picker-search:focus {
    background: var(--surface);
    border-color: var(--text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent);
}
.qa-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 8px;
    min-height: 100px;
    max-height: 320px;
}
.qa-picker-row {
    padding: 10px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--t-fast);
}
.qa-picker-row:hover {
    background: var(--surface-2);
}
.qa-picker-row-name {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.005em;
}
.qa-picker-row-sub {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}
.qa-picker-empty {
    padding: 24px 18px;
    text-align: center;
    color: var(--text-subtle);
    font-size: 13px;
    line-height: 1.5;
}
.qa-picker-footer {
    padding: 10px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    justify-content: flex-end;
}


/* =============================================================
   PARAM\u00c8TRES > Acc\u00e8s Microsoft 365 (whitelist)
   ============================================================= */
.admin-ms-whitelist { margin-top: 16px; }
.ms-whitelist-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.ms-whitelist-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ms-whitelist-table thead th {
    background: var(--surface-2);
    padding: 12px 14px;
    text-align: left;
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.ms-whitelist-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.ms-whitelist-table tbody tr:last-child td { border-bottom: none; }
.ms-whitelist-table tbody tr:hover { background: var(--surface-2); }
.ms-whitelist-email .mono {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text);
}
.ms-whitelist-table .crm-select {
    min-width: 200px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 12.5px;
    font-family: inherit;
    color: var(--text);
}
.ms-whitelist-add { margin-top: 18px; }
.ms-whitelist-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.ms-whitelist-form .crm-input,
.ms-whitelist-form .crm-select {
    flex: 1;
    min-width: 180px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
}
.ms-whitelist-form .crm-input:focus,
.ms-whitelist-form .crm-select:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent);
}


/* =============================================================
   ECRAN DE LOGIN MICROSOFT (SSO Solli SaaS)
   ============================================================= */
.ms-login-wall {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 32px 16px;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}
.ms-login-box {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    text-align: center;
    box-shadow: 0 8px 32px -12px rgba(12, 10, 9, 0.08);
}
.ms-login-brand {
    font-family: var(--font-serif);
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 28px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
}
.ms-login-title {
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--text);
    margin: 0 0 12px;
}
.ms-login-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 32px;
    letter-spacing: 0.005em;
}
.ms-login-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: var(--text);
    color: var(--surface);
    border: 1px solid var(--text);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: all var(--t-fast);
}
.ms-login-button:hover {
    background: color-mix(in srgb, var(--text) 88%, var(--bg));
    border-color: color-mix(in srgb, var(--text) 88%, var(--bg));
    transform: translateY(-1px);
}
.ms-login-button svg {
    flex-shrink: 0;
}
.ms-login-hint {
    margin-top: 28px;
    font-size: 12px;
    color: var(--text-subtle);
    letter-spacing: 0.005em;
}


/* =============================================================
   ECRAN DE SELECTION D'ESPACE (login first-time, look Geist SaaS)
   ============================================================= */
.user-selection-screen {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    overflow-y: auto;
    padding: 32px 16px;
    font-family: var(--font-sans);
}
.user-selection-inner {
    width: 100%;
    max-width: 920px;
    text-align: center;
}
.user-selection-title {
    font-family: var(--font-serif);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 500;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0;
    line-height: 1.1;
}
.user-selection-subtitle {
    font-size: 16px;
    color: var(--text-muted);
    margin: 6px 0 36px;
    letter-spacing: 0.005em;
}
.user-selection-prompt {
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--text);
    margin: 0 0 24px;
    font-weight: 400;
    letter-spacing: -0.01em;
}
.user-selection-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.user-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 18px 20px;
    cursor: pointer;
    transition: all var(--t-med);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.user-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--text);
}
.user-card-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    background: var(--surface-2);
    color: var(--text);
}
.user-card-avatar.role-associe {
    background: var(--text);
    color: var(--surface);
}
.user-card-avatar.role-collab {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border-strong);
}
.user-card-avatar.role-overview {
    background: color-mix(in srgb, var(--accent) 15%, var(--surface));
    color: var(--accent);
    font-size: 24px;
}
.user-card-nom {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.005em;
    line-height: 1.3;
    text-align: center;
}
.user-card-role {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}
.user-card-overview {
    grid-column: 1 / -1;
    max-width: 240px;
    margin: 0 auto;
    border-style: dashed;
}
.user-selection-hint {
    font-size: 12px;
    color: var(--text-subtle);
    margin: 0;
    letter-spacing: 0.005em;
}


/* =============================================================
   MODALE ENREGISTREMENT D'UNE ACTION — look fiche / SaaS
   ============================================================= */
.timer-save-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 10, 9, 0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: drawerFadeIn 0.18s ease;
}
.timer-save-modal {
    width: 640px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px -12px rgba(12, 10, 9, 0.28),
                0 8px 20px -4px rgba(12, 10, 9, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--font-sans);
    animation: gdsIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* HEADER */
.ts-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}
.ts-header-left {
    flex: 1;
    min-width: 0;
}
.ts-title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 4px;
    line-height: 1.1;
}
.ts-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.005em;
}
.ts-close {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--t-fast);
}
.ts-close:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* BODY */
.ts-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Grid 2 colonnes */
.ts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 560px) {
    .ts-grid { grid-template-columns: 1fr; }
}

.ts-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.ts-field-full { grid-column: 1 / -1; }

.ts-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.ts-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    transition: all var(--t-fast);
    box-sizing: border-box;
}
select.ts-input { cursor: pointer; }
.ts-input:hover { border-color: var(--border-strong); }
.ts-input:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent);
}
.ts-textarea {
    min-height: 72px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

/* Bloc h/min/s */
.ts-hms {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px 10px;
    transition: all var(--t-fast);
}
.ts-hms:focus-within {
    background: var(--surface);
    border-color: var(--text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent);
}
.ts-hms-inp {
    width: 44px;
    padding: 8px 6px;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text);
    text-align: center;
    outline: none;
}
.ts-hms-inp::-webkit-outer-spin-button,
.ts-hms-inp::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ts-hms-inp[type=number] { -moz-appearance: textfield; }
.ts-hms-sep {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Checkbox "non facturable" */
.ts-field-check {
    padding-top: 4px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
    padding-top: 14px;
}
.ts-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    user-select: none;
}
.ts-check-label:hover { color: var(--text); }
.ts-check-input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--text);
}

/* Hint mode fallback */
.ts-hint {
    background: color-mix(in srgb, var(--warn) 10%, var(--surface-2));
    border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border));
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.45;
}

/* FOOTER */
.ts-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}


/* =============================================================
   TIMER / CHRONO — refonte nov 2026 (look Geist / SaaS)
   ============================================================= */
.timer-widget {
    position: fixed;
    bottom: 24px;
    left: 280px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px -12px rgba(12, 10, 9, 0.22),
                0 4px 12px -4px rgba(12, 10, 9, 0.08);
    min-width: 340px;
    z-index: 450;
    overflow: hidden;
    font-family: var(--font-sans);
}
.timer-widget-header {
    padding: 14px 20px;
    background: var(--surface-2);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
}
.timer-widget-header.paused {
    background: color-mix(in srgb, var(--warn) 8%, var(--surface-2));
}
.timer-widget-title {
    flex: 1;
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
}
.timer-widget-status {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
}
.timer-widget-header.paused .timer-widget-status {
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
}
.timer-widget-main {
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.timer-widget-display {
    font-family: var(--font-mono);
    font-size: 42px;
    font-weight: 300;
    text-align: center;
    color: var(--text);
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding: 4px 0;
}
.timer-widget-buttons {
    display: flex;
    gap: 8px;
}
.timer-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    transition: all var(--t-fast);
    font-family: inherit;
    letter-spacing: -0.005em;
}
.timer-btn:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}
.timer-btn-stop {
    background: var(--text);
    color: var(--surface);
    border-color: var(--text);
}
.timer-btn-stop:hover {
    background: color-mix(in srgb, var(--text) 88%, var(--bg));
    border-color: color-mix(in srgb, var(--text) 88%, var(--bg));
    filter: none;
}

.timer-widget-attach {
    border-top: 1px solid var(--border);
    padding: 14px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--surface-2);
}
.timer-attach-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all var(--t-fast);
}
.timer-attach-line:hover {
    border-color: var(--border-strong);
    color: var(--text);
}
.timer-attach-line.attached {
    color: var(--text);
    background: var(--surface);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.timer-attach-icon { font-size: 14px; flex-shrink: 0; }
.timer-attach-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}


/* =============================================================
   ONGLET T\u00c2CHES — refonte nov 2026 (look Geist / fiches SaaS)
   ============================================================= */
.view-taches {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 32px 40px;
    width: 100%;
    box-sizing: border-box;
}

/* Page head (m\u00eame esprit que fiches) */
.taches-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.taches-title {
    font-family: var(--font-serif);
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text);
    margin: 0;
}
.taches-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 6px;
    letter-spacing: 0.005em;
}
.taches-head-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Filtres : card blanche avec padding a\u00e9r\u00e9 */
.taches-filters-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.taches-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.taches-filters-row .crm-select,
.taches-filters-row select {
    min-width: 160px;
    padding: 8px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 13px;
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--t-fast);
}
.taches-filters-row .crm-select:hover,
.taches-filters-row select:hover { border-color: var(--border-strong); }
.taches-filters-row .crm-input {
    flex: 1;
    min-width: 220px;
    padding: 8px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 13px;
    color: var(--text);
    font-family: inherit;
}
.taches-filters-row .crm-input:focus {
    background: var(--surface);
    border-color: var(--text);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent);
}
.taches-toggles-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.taches-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 500;
}
.taches-check-label:hover { color: var(--text); }
.taches-check-label input { cursor: pointer; }

/* Tableau t\u00e2ches : plus a\u00e9r\u00e9 */
.view-taches .table-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.view-taches .crm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.view-taches .crm-table thead th {
    background: var(--surface-2);
    padding: 12px 14px;
    text-align: left;
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.view-taches .crm-table tbody td {
    padding: 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: top;
}
.view-taches .crm-table tbody tr:last-child td { border-bottom: none; }
.view-taches .crm-table tbody tr { transition: background var(--t-fast); }
.view-taches .crm-table tbody tr:hover { background: var(--surface-2); }


/* =============================================================
   RAPPELS BADGE + POPUP
   ============================================================= */
.rappels-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.rappels-overlay { z-index: 10000; }
.rappels-modal {
    max-width: 520px;
}
.rappel-item {
    padding: 10px 14px;
    margin: 4px 0;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
}
.rappel-item.retard {
    background: var(--danger-soft);
    border-left-color: var(--danger);
    color: var(--danger);
}


/* =============================================================
   MULTI-SELECT
   ============================================================= */
.multi-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}
.multi-select-display {
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: var(--font-size-sm);
    cursor: pointer;
    min-height: 32px;
    display: flex;
    align-items: center;
}
.multi-select-display.placeholder { color: var(--text-subtle); }
.multi-select-display:hover { border-color: var(--text-subtle); }

.multi-select-dropdown {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 2000;
    padding: 4px;
}
.multi-select-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background var(--t-fast);
}
.multi-select-option:hover { background: var(--surface-2); }
.multi-select-option input[type="checkbox"] { margin: 0; }


/* =============================================================
   CALENDRIER
   ============================================================= */
.view-calendrier { margin-top: 12px; }

.calendar-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.calendar-month-title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
    flex: 1;
    text-align: center;
    text-transform: capitalize;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.calendar-day-header {
    background: var(--surface-2);
    padding: 10px 8px;
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.calendar-cell {
    background: var(--surface);
    min-height: 100px;
    padding: 8px 6px;
    transition: background var(--t-fast);
    cursor: pointer;
    overflow: hidden;
}
.calendar-cell:hover { background: var(--surface-2); }
.calendar-cell.other-month { background: var(--bg); opacity: 0.55; }
.calendar-cell.today {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 2px var(--accent);
}
.calendar-cell.weekend { background: color-mix(in srgb, var(--surface-2) 50%, var(--bg)); }
.calendar-day-num {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}
.calendar-cell.today .calendar-day-num { color: var(--accent); }

.calendar-task-item {
    padding: 3px 6px;
    margin: 2px 0;
    border-radius: 3px;
    background: var(--surface-2);
    font-size: 11px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.3;
}
.calendar-task-item:hover { background: var(--surface-3); }

/* Events Outlook : bordure bleue Microsoft + fond bleute */
.calendar-task-item.calendar-outlook-item {
    border-left: 3px solid #0078D4;
    background: color-mix(in srgb, #0078D4 8%, var(--surface));
    color: var(--text);
}
.calendar-task-item.calendar-outlook-item:hover {
    background: color-mix(in srgb, #0078D4 14%, var(--surface));
}
.calendar-task-item.calendar-outlook-item.is-cancelled {
    text-decoration: line-through;
    opacity: 0.55;
}

/* Bouton de sync Outlook avec etat warn */
.btn-secondary.btn-warn {
    background: color-mix(in srgb, var(--warn) 15%, var(--surface));
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
}

/* Tag info "Outlook masque" quand on consulte l'espace d'un autre */
.cal-outlook-hidden-info {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 6px 12px;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.005em;
    border: 1px solid var(--border);
    cursor: help;
}

.calendar-task-item.task-retard {
    background: var(--danger-soft);
    color: var(--danger);
}
.calendar-legend {
    margin-top: 12px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-subtle);
    display: inline-block;
}
.legend-dot.task-retard { background: var(--danger); }
.legend-dot.task-haute { background: var(--warn); }


/* =============================================================
   FICHE DOSSIER — checklist + drag-drop
   ============================================================= */
.fiche-cl-container {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fiche-cl-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: all var(--t-fast);
}
.fiche-cl-line.row-fait {
    background: var(--ok-soft);
    opacity: 0.75;
}
.fiche-cl-line.dragging {
    opacity: 0.4;
    box-shadow: var(--shadow-lg);
}
.fiche-cl-line.drag-over {
    border-top: 2px solid var(--accent);
    margin-top: -2px;
}
.fiche-cl-num {
    min-width: 22px;
    font-weight: 600;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}
.fiche-cl-etape { flex: 1; min-width: 120px; }
.fiche-cl-date {
    font-size: var(--font-size-xs);
    color: var(--text-subtle);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.fiche-cl-comm { width: 180px; flex-shrink: 0; }
.drag-handle {
    cursor: grab;
    color: var(--text-subtle);
    font-size: 14px;
    user-select: none;
    padding: 0 2px;
}
.drag-handle:hover { color: var(--text); }


/* =============================================================
   FICHE CLIENT — contacts
   ============================================================= */
.view-fiche-client { padding: 0; }
.fc-contacts-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.contact-label {
    grid-column: 1 / -1;
    font-weight: 600;
    color: var(--text);
    font-size: var(--font-size-base);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.contact-link {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--accent);
}
.contact-link:hover { text-decoration: underline; }


/* =============================================================
   FACTURATION — editor specifique
   ============================================================= */
.facture-editor-overlay { z-index: 10000; }
.facture-editor-modal {
    max-width: 1100px;
    width: 95vw;
    max-height: 92vh;
    overflow: hidden;
}

.prompt-modal-overlay {
    background: rgba(12, 10, 9, 0.55);
}
.prompt-modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: 520px;
}
.prompt-modal .modal-header {
    background: var(--text);
    padding: 12px 16px;
}
.prompt-modal .modal-header h3 {
    color: var(--surface);
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    font-weight: 600;
    letter-spacing: -0.005em;
}
.prompt-modal .modal-close {
    color: var(--surface);
    background: rgba(255, 255, 255, 0.1);
}
.prompt-modal .modal-close:hover {
    background: rgba(255, 255, 255, 0.18);
    color: var(--surface);
}
.prompt-modal .form-actions {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    justify-content: flex-end;
}


/* =============================================================
   TOASTS
   ============================================================= */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.toast {
    /* Fix : showToast() append au body directement, pas dans .toast-container.
       Sans position fixed + z-index, le toast tombait en flux normal au bas
       du body et etait MASQUE derriere les drawers/modales (z-index 1000).
       Resultat : Maxime voyait "rien ne se passe" alors que le toast d'erreur
       existait. On force position fixed + z-index 10100 (au-dessus de tout). */
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10100;
    padding: 12px 18px;
    background: var(--text);
    color: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
    font-size: var(--font-size-sm);
    font-weight: 500;
    min-width: 240px;
    max-width: 420px;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
}
.toast.show {
    opacity: 1;
    transform: translateX(0);
}
/* Multiples toasts empiles : decale chaque toast vers le bas */
.toast + .toast { top: 78px; }
.toast + .toast + .toast { top: 136px; }
.toast + .toast + .toast + .toast { top: 194px; }

.toast.error { background: var(--danger); }
.toast.success { background: var(--ok); }
.toast.info { background: var(--info); }
.toast.warning { background: var(--warn, #d97706); }


/* =============================================================
   EMPTY STATE
   ============================================================= */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-subtle);
    font-size: var(--font-size-md);
}

.text-muted { color: var(--text-muted); font-size: var(--font-size-sm); }

.tab-placeholder {
    text-align: center;
    padding: 60px 40px;
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--border-strong);
}
.tab-placeholder-icon { font-size: 48px; margin-bottom: 12px; }
.tab-placeholder h3 {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 500;
    color: var(--text);
    margin: 0 0 8px;
}
.tab-placeholder p {
    color: var(--text-muted);
    max-width: 460px;
    margin: 8px auto;
    font-size: var(--font-size-md);
}
.tab-placeholder-hint {
    font-size: var(--font-size-sm);
    color: var(--text-subtle);
    margin-top: 16px;
    font-style: italic;
}


/* =============================================================
   MODELES EDITOR + GALLERY
   ============================================================= */
.modeles-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}
.modeles-tab {
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid transparent;
    transition: all var(--t-fast);
}
.modeles-tab.active {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}

.modele-editor { max-width: 760px; }
.modele-editor-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.modele-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
}
.modele-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.modele-line-input { flex: 1; }
.modele-line-delete {
    background: none;
    border: none;
    color: var(--text-subtle);
    padding: 4px 6px;
    cursor: pointer;
}
.modele-line-delete:hover { color: var(--danger); }


/* =============================================================
   TIME KPIs + BAR-CHART
   ============================================================= */
.time-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}


/* =============================================================
   DOCUMENTS SHAREPOINT (fiche dossier)
   ============================================================= */
.docs-sharepoint {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sp-doc-row {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}


/* =============================================================
   NOUVELLE FICHE DOSSIER — utilities
   ============================================================= */
.fiche-add-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.model-apply-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.model-select { min-width: 180px; }


/* =============================================================
   SORTABLE INDICATORS
   ============================================================= */
.sortable-th::after {
    content: "";
    display: inline-block;
    margin-left: 4px;
    opacity: 0.3;
}


/* =============================================================
   SCROLLBARS
   ============================================================= */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 5px;
    border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }


/* =============================================================
   RESPONSIVE (light touch)
   ============================================================= */
@media (max-width: 900px) {
    .app-container {
        grid-template-columns: 1fr;
    }
    .sidebar {
        display: none;
    }
    .main-content {
        padding: 16px 16px 80px;
    }
    .me-tuiles {
        grid-template-columns: repeat(2, 1fr);
    }
    .me-tuile {
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }
}


/* =============================================================
   ========== REFONTE CLAUDE DESIGN — LAYOUT SPECIFIQUE ==========
   ============================================================= */


/* SIDEBAR — structure augmentee ----------------------------- */
.sidebar-head {
    padding: 16px 16px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
}
.brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--text);
    color: var(--surface);
    display: grid;
    place-items: center;
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    overflow: hidden;
}
/* Quand le logo est chargé via JS, reset du fond */
.brand-mark:has(img) {
    background: transparent;
}
.brand-text { min-width: 0; line-height: 1.2; }
.brand-text .name {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand-text .sub {
    font-size: 11px;
    color: var(--text-subtle);
    margin-top: 1px;
}

.nav-section {
    padding: 4px 8px;
}
.nav-label {
    padding: 12px 10px 6px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.nav-item .count {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
    padding: 0 4px;
}
.nav-item.active .count { color: var(--text-muted); }
.nav-icon { display: none; }
.nav-item > svg {
    flex-shrink: 0;
    color: var(--text-subtle);
    width: 16px;
    height: 16px;
}
.nav-item.active > svg { color: var(--text); }

.sidebar-spacer { flex: 1; }

.sidebar-foot {
    padding: 8px;
    border-top: 1px solid var(--border);
}
.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--t-fast);
}
.user-chip:hover { background: var(--surface-2); }

/* Maxime 2026-05-06 : etat "Session expiree" du chip user
   (declenche par window._msAuthLost apres un 401 ou un deploiement) */
.user-chip.auth-lost {
    background: color-mix(in srgb, var(--err, #E74C3C) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--err, #E74C3C) 30%, var(--border));
}
.user-chip.auth-lost:hover {
    background: color-mix(in srgb, var(--err, #E74C3C) 15%, var(--surface));
}
.user-chip.auth-lost .who .r {
    color: var(--err, #E74C3C);
    font-weight: 500;
}
/* Pastille rouge clignotante en haut a droite du chip */
.user-chip.auth-lost::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--err, #E74C3C);
    box-shadow: 0 0 0 2px var(--surface);
    animation: chipPulse 1.6s ease-in-out infinite;
}
.user-chip { position: relative; }
@keyframes chipPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}
.avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--text);
    color: var(--surface);
    font-size: 11px;
    font-weight: 600;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.user-chip .who { flex: 1; min-width: 0; line-height: 1.2; }
.user-chip .who .n {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-chip .who .r {
    font-size: 11px;
    color: var(--text-subtle);
}


/* TOPBAR — breadcrumbs + actions ---------------------------- */
.topbar {
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
}
.crumbs > * { flex-shrink: 0; }
.crumbs .sep {
    color: var(--text-subtle);
    font-size: 12px;
    opacity: 0.6;
}
.crumbs .cur {
    color: var(--text);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
}
.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.icon-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: transparent;
    border: none;
    position: relative;
    transition: background var(--t-fast), color var(--t-fast);
    cursor: pointer;
}
.icon-btn:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
}
.icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.icon-btn.has-dot::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    border: 2px solid var(--bg);
}
.topbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    transition: background var(--t-fast), border-color var(--t-fast);
    white-space: nowrap;
    cursor: pointer;
    font-family: var(--font-sans);
}
.btn:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.topbar .btn.btn-accent {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    padding: 7px 14px;
    font-weight: 500;
}
.topbar .btn.btn-accent:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}


/* PAGE LAYOUT ----------------------------------------------- */
.main-content {
    padding: 32px 40px 80px;
}
.page-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.page-title {
    font-family: var(--font-serif);
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text);
    margin: 0;
}
.page-subtitle {
    margin-top: 6px;
    font-size: 14px;
    color: var(--text-muted);
}
.page-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* PERIOD TABS (petites pilules, different de .fiche-tabs) --- */
.tabs {
    display: flex;
    gap: 2px;
    background: var(--surface-2);
    padding: 3px;
    border-radius: 7px;
}
.tab {
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    transition: background var(--t-fast), color var(--t-fast);
    font-variant-numeric: tabular-nums;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
}
.tab:hover:not(.active) { color: var(--text); }
.tab.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}


/* STATS ROW ------------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    margin-bottom: 32px;
}
.stat {
    padding: 20px 24px;
    border-right: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--t-fast);
    position: relative;
}
.stat:last-child { border-right: none; }
.stat:hover { background: var(--surface-2); }
.stat-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
.stat-label svg {
    color: var(--text-subtle);
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
.stat-value {
    margin-top: 10px;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    line-height: 1;
    font-family: var(--font-mono);
}
.stat-delta {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.stat-delta svg { width: 11px; height: 11px; flex-shrink: 0; }
.stat-delta.up { color: var(--ok); }
.stat-delta.down { color: var(--danger); }
.stat-delta.warn { color: var(--warn); }

.spark {
    position: absolute;
    right: 20px;
    top: 22px;
    opacity: 0.35;
    color: var(--text-muted);
}


/* GRID 2-COL (dashboard) ------------------------------------ */
.grid-2col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}
@media (max-width: 1100px) {
    .grid-2col { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(2n) { border-right: none; }
    .stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 600px) {
    .stats { grid-template-columns: 1fr; }
    .stat { border-right: none !important; border-bottom: 1px solid var(--border); }
    .stat:last-child { border-bottom: none; }
}


/* CARD extras (chip, actions, sub) -------------------------- */
.card-title .chip {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--surface-2);
    padding: 1px 7px;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
    margin-left: 6px;
    font-family: var(--font-mono);
}
.card-head .sub {
    font-size: 12px;
    color: var(--text-subtle);
}
.card-head .actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}


/* TASK ROW (liste taches aeree) ----------------------------- */
.task-row {
    display: grid;
    grid-template-columns: 20px 1fr auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--t-fast);
}
.task-row:last-child { border-bottom: none; }
.task-row:hover { background: var(--surface-2); }
.task-check {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--border-strong);
    display: grid;
    place-items: center;
    color: transparent;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    background: var(--surface);
}
.task-row:hover .task-check { border-color: var(--text-muted); }
.task-check.done {
    background: var(--text);
    border-color: var(--text);
    color: var(--surface);
}
.task-main { min-width: 0; }
.task-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.task-row.done .task-title {
    color: var(--text-subtle);
    text-decoration: line-through;
}
.task-meta {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.task-meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-subtle);
}
.task-dossier { color: var(--text-muted); font-family: var(--font-mono); }
.task-client { color: var(--text-subtle); }
.task-prio {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.task-prio.haute { background: var(--danger-soft); color: var(--danger); }
.task-prio.moyenne { background: var(--warn-soft); color: var(--warn); }
.task-prio.basse { background: var(--surface-2); color: var(--text-muted); }
.task-due {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}
.task-due.retard { color: var(--danger); }
.task-due.today { color: var(--accent); font-weight: 500; }
.task-due svg { flex-shrink: 0; width: 12px; height: 12px; }
.task-chev {
    color: var(--text-subtle);
    font-size: 14px;
    opacity: 0;
    transition: opacity var(--t-fast);
}
.task-row:hover .task-chev { opacity: 1; }


/* EVENT ROW (agenda) ---------------------------------------- */
.event-row {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--t-fast);
}
.event-row:last-child { border-bottom: none; }
.event-row:hover { background: var(--surface-2); }
.event-time {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    padding-top: 1px;
    font-family: var(--font-mono);
}
.event-time .t {
    font-weight: 600;
    color: var(--text);
    font-size: 12px;
}
.event-main { min-width: 0; }
.event-main .title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
}
.event-main .meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.event-main .meta svg {
    color: var(--text-subtle);
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}
.event-day {
    padding: 10px 18px 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.muted { color: var(--text-muted); }


/* DOSSIER ROW (liste recents) ------------------------------- */
.dossier-row {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: 12px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    cursor: pointer;
    transition: background var(--t-fast);
}
.dossier-row:last-child { border-bottom: none; }
.dossier-row:hover { background: var(--surface-2); }
.dossier-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--surface-2);
    display: grid;
    place-items: center;
    color: var(--text-muted);
    flex-shrink: 0;
}
.dossier-icon svg { width: 14px; height: 14px; }
.dossier-main { min-width: 0; }
.dossier-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dossier-sub {
    font-size: 12px;
    color: var(--text-subtle);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}
.status-pill.clos { color: var(--text-subtle); }


/* TIME CARD (Temps facturable aujourd'hui) ------------------ */
.time-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
}
.time-cell {
    background: var(--surface);
    padding: 16px 18px;
}
.time-cell .lbl {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.time-cell .val {
    margin-top: 8px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    line-height: 1;
    font-family: var(--font-mono);
    white-space: nowrap;
}
.time-cell .sub {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-subtle);
}

.time-bar-row {
    display: grid;
    grid-template-columns: 1fr 60px;
    gap: 12px;
    padding: 10px 18px;
    align-items: center;
    border-bottom: 1px solid var(--border);
}
.time-bar-row:last-child { border-bottom: none; }
.time-bar-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}
.time-bar-track {
    height: 4px;
    background: var(--surface-2);
    border-radius: 2px;
    overflow: hidden;
}
.time-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.time-bar-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
    text-align: right;
}


/* USER MENU (dropdown) --------------------------------------- */
.user-menu {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    min-width: 220px;
    z-index: 2000;
}
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: background var(--t-fast);
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: var(--font-sans);
}
.user-menu-item:hover { background: var(--surface-2); }
.user-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* Selecteur de zoom dans le menu utilisateur (Maxime 2026-05-05) */
.user-menu-zoom-btn {
    flex: 1;
    padding: 5px 4px;
    font-size: 11px;
    border: 1px solid var(--border);
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    font-family: var(--font-sans);
    transition: all var(--t-fast);
    line-height: 1;
}
.user-menu-zoom-btn:hover { background: var(--surface-2); color: var(--text); }
.user-menu-zoom-btn.active {
    background: var(--text);
    color: var(--surface);
    border-color: var(--text);
    font-weight: 600;
}


/* =============================================================
   ========== REFONTE DOSSIERS — LISTE ==========
   ============================================================= */

.dossiers-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 20px;
    flex-wrap: wrap;
}
.dossiers-head .page-title { margin: 0; }

/* Summary strip : bandes statuts en haut */
.summary-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    margin-bottom: 16px;
    overflow: hidden;
}
.summary-cell {
    padding: 14px 18px;
    border-right: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--t-fast);
}
.summary-cell:last-child { border-right: none; }
.summary-cell:hover { background: var(--surface-2); }
.summary-cell.active { background: var(--accent-soft); }
.summary-cell .lbl {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.summary-cell .lbl::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-subtle);
}
.summary-cell.urgent .lbl::before { background: var(--danger); }
.summary-cell.en-cours .lbl::before { background: var(--info); }
.summary-cell.attente .lbl::before { background: var(--warn); }
.summary-cell.prospect .lbl::before { background: var(--ok); }
.summary-cell.clos .lbl::before { background: var(--text-subtle); }
/* Maxime 2026-05-06 : carte "Total des dossiers" - pastille noire pour
   distinguer du reste, indique la vue d'ensemble */
.summary-cell.total .lbl::before { background: var(--text); }
.summary-cell.total .lbl { font-weight: 600; color: var(--text); }
.summary-cell .val {
    margin-top: 6px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text);
    font-family: var(--font-mono);
}
.summary-cell .sub {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-subtle);
}

/* Filters bar pour dossiers */
.filters-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex-wrap: wrap;
}
.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    flex: 1;
    min-width: 240px;
    max-width: 400px;
}
.search-box svg { color: var(--text-subtle); flex-shrink: 0; }
.search-box input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: var(--text);
    font-family: var(--font-sans);
}
.search-box input::placeholder { color: var(--text-subtle); }

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--t-fast);
    white-space: nowrap;
}
.filter-chip:hover { background: var(--surface-2); }
.filter-chip.active {
    background: var(--text);
    color: var(--surface);
    border-color: var(--text);
}
.filter-chip .filter-count {
    background: var(--surface-2);
    padding: 0 6px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}
.filter-chip.active .filter-count {
    background: rgba(255, 255, 255, 0.2);
    color: var(--surface);
}

.view-switch {
    display: flex;
    background: var(--surface-2);
    border-radius: 7px;
    padding: 3px;
    margin-left: auto;
}
.view-switch button {
    width: 28px;
    height: 24px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast);
}
.view-switch button:hover { color: var(--text); }
.view-switch button.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

/* Dossiers table v2 (plus propre, aeree) */
.dossiers-table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.dossiers-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.dossiers-table thead th {
    background: var(--surface);
    padding: 10px 14px;
    text-align: left;
    font-weight: 500;
    font-size: 11.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
    cursor: pointer;
    user-select: none;
}
.dossiers-table thead th:hover { color: var(--text); }
.dossiers-table thead th.sorted { color: var(--text); font-weight: 600; }
.dossiers-table tbody tr {
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--t-fast);
}
.dossiers-table tbody tr:last-child { border-bottom: none; }
.dossiers-table tbody tr:hover { background: var(--surface-2); }
.dossiers-table tbody tr.selected { background: var(--accent-soft); }

.dossiers-table td {
    padding: 12px 14px;
    vertical-align: middle;
}
.dossiers-table td.col-check {
    width: 32px;
    padding-right: 0;
}
.dossiers-table td.col-title { min-width: 260px; }
.dossiers-table td.col-right { text-align: right; }
/* Maxime 2026-05-06 : colonne "Dernière note" - largeur preferentielle
   pour ne pas pousser les autres colonnes, ellipsis si trop long */
.dossiers-table td.col-note,
.dossiers-table th.col-note {
    max-width: 260px;
    min-width: 160px;
}
.note-cell {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.35;
    word-break: break-word;
}

.row-check {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1.5px solid var(--border-strong);
    display: grid;
    place-items: center;
    color: transparent;
    margin: 0 auto;
    transition: all var(--t-fast);
}
.row-check:hover { border-color: var(--text-muted); }
.row-check.checked {
    background: var(--text);
    border-color: var(--text);
    color: var(--surface);
}

.cell-title .t {
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}
.cell-title .s {
    font-size: 11.5px;
    color: var(--text-subtle);
    margin-top: 2px;
    font-family: var(--font-mono);
}

.type-tag {
    display: inline-block;
    font-size: 11.5px;
    color: var(--text-muted);
    padding: 2px 7px;
    background: var(--surface-2);
    border-radius: 4px;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-avatars {
    display: flex;
}
.team-avatars .avatar {
    width: 22px;
    height: 22px;
    font-size: 9.5px;
    border: 2px solid var(--surface);
    margin-left: -5px;
    background: var(--surface-3);
    color: var(--text);
}
.team-avatars .avatar:first-child { margin-left: 0; }
.team-avatars .avatar.associe {
    background: var(--accent-soft);
    color: var(--accent);
}

.deadline-cell {
    font-size: 12.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
    white-space: nowrap;
}
.deadline-cell.retard {
    color: var(--danger);
    font-weight: 500;
}
.deadline-cell.today {
    color: var(--accent);
    font-weight: 500;
}
.deadline-cell.soon { color: var(--warn); }

.row-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--t-fast);
    justify-content: flex-end;
}
.dossiers-table tbody tr:hover .row-actions { opacity: 1; }
.row-actions .icon-btn {
    width: 26px;
    height: 26px;
}

.dossiers-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    font-size: 12.5px;
    color: var(--text-muted);
}

/* Bulk action bar (flottant en bas quand selections) */
.bulk-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 100px);
    background: var(--text);
    color: var(--surface);
    padding: 8px 10px 8px 16px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-lg);
    z-index: 450;
    transition: transform 0.2s;
    font-size: 13px;
}
.bulk-bar.show { transform: translate(-50%, 0); }
.bulk-bar .bulk-count { font-weight: 600; }
.bulk-bar .sep { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.15); }
.bulk-bar button {
    padding: 5px 10px;
    color: var(--surface);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background var(--t-fast);
    background: transparent;
    border: none;
    cursor: pointer;
}
.bulk-bar button:hover { background: rgba(255, 255, 255, 0.1); }
.bulk-bar button.danger { color: #fca5a5; }

/* Empty state dossiers */
.empty-dossiers {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-subtle);
}
.empty-dossiers .big {
    font-family: var(--font-serif);
    font-size: 22px;
    color: var(--text-muted);
    margin-bottom: 8px;
}


/* =============================================================
   ========== REFONTE FICHE DOSSIER (fd-*) ==========
   ============================================================= */

.fd-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-sans);
    white-space: nowrap;
}
.fd-back:hover {
    background: var(--surface-2);
    color: var(--text);
}
/* Quand le bouton est dans .fd-title-row : alignement avec le titre,
   pousse a droite via margin-left auto, pas de margin-bottom (heritage
   ancien layout ou il etait sur sa propre ligne). Maxime 2026-05-04. */
.fd-title-row .fd-back {
    margin-left: auto;
    align-self: flex-start;
    flex-shrink: 0;
}

.fd-title-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    /* Maxime 2026-05-04 : padding-top pour aerer le titre par rapport au
       selecteur de dossier au-dessus (qui colle la zone CHANGER DE DOSSIER). */
    padding-top: 8px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.fd-dossier-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--text) 8%, var(--surface));
    color: var(--text);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.fd-title-main {
    flex: 1;
    min-width: 0;
}
.fd-title-main h1 {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0;
    color: var(--text);
}
.fd-title-main h1 .objet { color: var(--text-muted); }
.fd-title-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--text-muted);
}
.fd-title-meta .mono {
    font-family: var(--font-mono);
    font-size: 12px;
}
.fd-title-meta strong { color: var(--text); }

/* Statusbar 5 cells */
.fd-statusbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    margin-bottom: 18px;
    overflow: hidden;
}
.fd-stat {
    padding: 12px 16px;
    border-right: 1px solid var(--border);
}
.fd-stat:last-child { border-right: none; }
.fd-stat .lbl {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fd-stat .val {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: var(--text);
}
.fd-stat .pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.fd-stat .pill::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-subtle);
}
.fd-stat .pill.ok {
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 30%, var(--border));
}
.fd-stat .pill.ok::before { background: var(--ok); }
.fd-stat .pill.warn {
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 30%, var(--border));
}
.fd-stat .pill.warn::before { background: var(--warn); }
.fd-stat .pill.danger {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}
.fd-stat .pill.danger::before { background: var(--danger); }
.fd-stat .pill.info {
    color: var(--info);
    border-color: color-mix(in srgb, var(--info) 30%, var(--border));
}
.fd-stat .pill.info::before { background: var(--info); }
.fd-stat .jr-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.fd-stat .jr-num.urgent { color: var(--danger); }
.fd-stat .jr-num.warn { color: var(--warn); }

/* Fiche tabs v2 (bottom-border) */
.fd-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    overflow-x: auto;
    background: transparent;
    padding: 0;
    border-radius: 0;
}
.fd-tabs::-webkit-scrollbar { height: 0; }
.fd-tabs button {
    padding: 9px 14px;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: -1px;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--font-sans);
}
.fd-tabs button:hover:not(.active) { color: var(--text); }
.fd-tabs button.active {
    color: var(--text);
    border-bottom-color: var(--text);
    background: transparent;
    box-shadow: none;
}
.fd-tabs button .cnt {
    background: var(--surface-2);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.fd-tabs button.active .cnt {
    background: var(--text);
    color: var(--surface);
}

/* Page 2-col layout */
.fd-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}
/* Maxime 2026-05-07 : sur l'onglet Emails, l'aside est masquee pour
   laisser toute la largeur au split liste/detail des mails. */
.fd-page.fd-page-full {
    grid-template-columns: minmax(0, 1fr);
}

/* Split liste / detail dans l'onglet Emails de la fiche dossier */
.fiche-emails-split {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: 16px;
    margin-top: 12px;
    min-height: 60vh;
}
.fiche-emails-list-col {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow-y: auto;
    max-height: 75vh;
    background: var(--surface);
}
/* Maxime 2026-05-07 : header "N mails liés" dans la colonne liste,
   bien espace et separe visuellement de la liste en dessous. */
.fiche-emails-list-col > .section-title {
    margin: 0;
    padding: 14px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: sticky;
    top: 0;
    z-index: 2;
}
.fiche-emails-list-col > .fiche-email-line:first-of-type {
    margin-top: 0;
}
.fiche-emails-detail-col {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow-y: auto;
    max-height: 75vh;
    background: var(--surface);
    padding: 16px;
}
.fiche-email-line.selected {
    background: var(--accent-soft, color-mix(in srgb, var(--accent, #3498DB) 12%, var(--surface))) !important;
    border-left: 3px solid var(--accent, #3498DB);
}
@media (max-width: 900px) {
    .fiche-emails-split {
        grid-template-columns: 1fr;
    }
}

/* Sections inside tabs */
.fd-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
    overflow: hidden;
}
.fd-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}
.fd-section-head h3 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text);
    margin: 0;
    font-family: var(--font-sans);
}
.fd-section-head .hint {
    font-size: 11.5px;
    color: var(--text-subtle);
}
.fd-section-body { padding: 18px; }

/* Form grid */
.fd-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 18px;
}
.fd-grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
.fd-grid.grid-4 { grid-template-columns: repeat(4, 1fr); }
.fd-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.fd-field.wide { grid-column: 1 / -1; }
.fd-field label {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fd-field label .suffix {
    color: var(--text-subtle);
    font-weight: 400;
    font-size: 11px;
}
.fd-field input,
.fd-field select,
.fd-field textarea {
    width: 100%;
    padding: 7px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    transition: border-color 0.12s;
}
.fd-field input:hover,
.fd-field select:hover,
.fd-field textarea:hover {
    border-color: color-mix(in srgb, var(--text) 20%, var(--border));
}
.fd-field input:focus,
.fd-field select:focus,
.fd-field textarea:focus {
    outline: none;
    border-color: var(--text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent);
}
.fd-field input[type=number] { font-family: var(--font-mono); }

/* Client linked banner */
.client-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--info) 6%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--info) 22%, var(--border));
    border-radius: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.client-link .left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.client-link .ca {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--text);
    color: var(--surface);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}
.client-link .lbl {
    font-size: 11.5px;
    color: var(--text-muted);
}
.client-link .nm {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}
.client-link .meta {
    font-size: 11.5px;
    color: var(--text-subtle);
    margin-top: 1px;
    font-family: var(--font-mono);
}
.client-link .acts {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Budget bar */
.budget-bar { margin-top: 10px; }
.budget-bar .bar {
    height: 6px;
    background: var(--surface-2);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}
.budget-bar .fill {
    height: 100%;
    background: var(--text);
    border-radius: 3px;
    transition: width 0.3s;
}
.budget-bar .fill.warn { background: var(--warn); }
.budget-bar .fill.over { background: var(--danger); }
.budget-bar .lbl {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
}
.budget-bar .lbl strong {
    color: var(--text);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Aside */
.fd-aside {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.aside-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.aside-card .ac-head {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.aside-card .ac-body { padding: 14px; }
.stat-pair {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px dashed var(--border);
}
.stat-pair:last-child { border-bottom: none; }
.stat-pair .lbl {
    font-size: 12px;
    color: var(--text-muted);
}
.stat-pair .val {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}
.stat-pair .val.warn { color: var(--warn); }
.stat-pair .val.danger { color: var(--danger); }
.stat-pair .val.ok { color: var(--ok); }

.timeline-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item .when {
    color: var(--text-muted);
    font-size: 11px;
}
.timeline-item .what {
    margin-top: 2px;
    color: var(--text);
}

.team-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
}
.team-member:last-child { border-bottom: none; }
.team-member .avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 500;
    background: var(--surface-2);
    color: var(--text-muted);
    flex-shrink: 0;
}
.team-member .avatar.associe {
    background: var(--accent-soft);
    color: var(--accent);
}
.team-member .info { flex: 1; min-width: 0; }
.team-member .info .n {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.team-member .info .r {
    font-size: 11px;
    color: var(--text-subtle);
}
.team-member .taux {
    font-size: 11.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.danger-zone {
    border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--danger) 3%, var(--surface));
    padding: 14px;
}
.danger-zone .title {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--danger);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.danger-zone .desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 10px;
}
.danger-zone .btn-dz {
    width: 100%;
    padding: 7px 12px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
    color: var(--danger);
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all var(--t-fast);
}
.danger-zone .btn-dz:hover {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

@media (max-width: 1100px) {
    .fd-page { grid-template-columns: 1fr; }
    .fd-aside { position: static; }
    .fd-statusbar { grid-template-columns: repeat(2, 1fr); }
    .fd-stat:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .fd-grid, .fd-grid.grid-3, .fd-grid.grid-4 { grid-template-columns: 1fr; }
}


/* =============================================================
   WRAPPER VISUEL — onglets fiche dossier non refondus
   ============================================================= */
/* Donne un style "card" au contenu des onglets Contacts/Taches/Temps/
   Factures/Documents sans avoir a reecrire le JS. Chaque groupe
   identifi\u00e9 par un h3.section-title devient le header d'une card
   virtuelle (styling CSS only). */

/* Section titles : titre simple souligne (refonte 2026-05-04).
   Avant : "cards" bordees (h3 + body cadre) - fragiles avec les structures
   HTML heterogenes (h4 internes, divs custom, etc.) -> chevauchement de
   bordures, contenu coupe selon le screenshot Maxime. Le layout en
   "card" demande un wrapper systematique difficile a maintenir.
   Apres : titres simples avec underline accent + contenu libre en dessous.
   Plus simple, plus robuste, ne casse plus selon la structure HTML. */
.fiche-tab-content > .section-title {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text);
    margin: 24px 0 12px;
    padding: 0 0 6px;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--accent);
    border-radius: 0;
    text-transform: none;
    line-height: 1.3;
}
.fiche-tab-content > .section-title:first-child { margin-top: 0; }

/* Le contenu juste apres un section-title : pas de margin-top
   (le titre a deja sa marge), juste souffler legerement */
.fiche-tab-content > .section-title + *:not(.section-title) {
    margin-top: 0;
}

/* Forms inside tabs : utiliser le m\u00eame style fd-field */
.fiche-tab-content .form-grid {
    gap: 14px 18px;
}
.fiche-tab-content .form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.fiche-tab-content .form-field .field-label {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.005em;
}

/* Row-actions / toolbar sous les titres : propre */
.fiche-add-row,
.model-apply-row {
    padding: 10px 18px !important;
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    margin: 0 !important;
    gap: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Ancien fiche-cl-container (checklist) : rendre coherent */
.fiche-tab-content > .fiche-cl-container {
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 12px 18px 16px;
    margin: 0 0 16px;
}


/* =============================================================
   ========== REFONTE PLANNING ==========
   ============================================================= */

.tp-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tp-head > div:first-child {
    flex: 1 1 260px;
    min-width: 0;
}

/* View tabs (Liste / Calendrier) */
.view-tabs {
    display: flex;
    gap: 2px;
    background: var(--surface-2);
    padding: 3px;
    border-radius: 7px;
}
.view-tabs button {
    padding: 5px 14px;
    border-radius: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
    transition: background var(--t-fast), color var(--t-fast);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
}
.view-tabs button:hover:not(.active) { color: var(--text); }
.view-tabs button.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

/* Variante "primary" : plus proeminente (ex: Recus/Envoyes dans Emails)
   Maxime 2026-05-06 */
.view-tabs.view-tabs-primary {
    background: transparent;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.view-tabs.view-tabs-primary button {
    padding: 6px 16px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
}
.view-tabs.view-tabs-primary button.active {
    background: var(--text);
    color: var(--surface);
    box-shadow: none;
}
.view-tabs.view-tabs-primary button:hover:not(.active) {
    background: var(--surface-2);
}

/* Planning : calendrier pleine largeur + echeances en dessous */
.planning-main {
    width: 100%;
}
.planning-upcoming {
    margin-top: 24px;
}
.planning-upcoming .ac-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.planning-upcoming .ac-head span:first-child {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.planning-upcoming .ac-head-sub {
    font-size: 12px;
    color: var(--text-subtle);
    font-weight: 500;
}
.planning-upcoming .timeline-item {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    transition: background var(--t-fast);
}
.planning-upcoming .timeline-item:last-child { border-bottom: none; }
.planning-upcoming .timeline-item:hover { background: var(--surface-2); }
.planning-upcoming .when {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}
.planning-upcoming .what {
    font-size: 14px;
    color: var(--text);
}
.upcoming-empty {
    padding: 28px 20px;
    text-align: center;
    color: var(--text-subtle);
    font-size: 13px;
}

/* Mini-calendar aside */
.mini-cal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.mini-cal-card .cal-header {
    padding: 12px 14px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mini-cal-card .cal-header .mnth {
    font-family: var(--font-serif);
    font-size: 17px;
    text-transform: capitalize;
}
.mini-cal-card .cal-nav { display: flex; gap: 2px; }
.mini-cal-card .cal-nav button {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
}
.mini-cal-card .cal-nav button:hover {
    background: var(--surface-2);
    color: var(--text);
}
.mini-cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 8px 14px 14px;
}
.mini-cal .mc-dow {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-subtle);
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 4px;
}
.mini-cal .mc-d {
    height: 28px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    font-size: 12px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--t-fast);
    position: relative;
}
.mini-cal .mc-d:hover { background: var(--surface-2); }
.mini-cal .mc-d.other { color: var(--text-subtle); opacity: 0.5; }
.mini-cal .mc-d.today {
    background: var(--text);
    color: var(--surface);
    font-weight: 600;
}
.mini-cal .mc-d.selected {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.mini-cal .mc-d.has::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--accent);
}
.mini-cal .mc-d.today.has::after { background: var(--surface); }

/* Legend des couleurs */
.cal-legend {
    padding: 10px 14px 14px;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.cal-legend .lg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cal-legend .lg::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--info);
}
.cal-legend .lg.task::before { background: var(--accent); }
.cal-legend .lg.audience::before { background: var(--danger); }
.cal-legend .lg.perso::before { background: var(--text-subtle); }

/* Month view amelioration */
.month-grid-v2 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.month-head-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.month-head-row div {
    padding: 10px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.month-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.month-cell {
    min-height: 110px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 6px 8px;
    font-size: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.08s;
    background: var(--surface);
}
.month-cell:nth-child(7n) { border-right: none; }
.month-cell:hover { background: var(--surface-2); }
.month-cell.other {
    background: var(--bg);
    color: var(--text-subtle);
}
.month-cell.other .dn { color: var(--text-subtle); }
.month-cell.weekend { background: color-mix(in srgb, var(--surface-2) 50%, var(--bg)); }
.month-cell.today .dn {
    background: var(--text);
    color: var(--surface);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: 11.5px;
}
.month-cell .dn {
    font-weight: 500;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
    display: inline-block;
}
.month-cell .ev {
    font-size: 10.5px;
    padding: 2px 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--info) 10%, var(--surface));
    color: var(--info);
    border-left: 2px solid var(--info);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.month-cell .ev.task {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
    border-left-color: var(--accent);
}
.month-cell .ev.audience {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 9%, var(--surface));
    border-left-color: var(--danger);
}


/* =============================================================
   ========== REFONTE FACTURATION ==========
   ============================================================= */

.fact-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* KPI row (4 cells horizontales pour dashboard) */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    margin-bottom: 22px;
}
.kpi-cell {
    padding: 18px 22px;
    border-right: 1px solid var(--border);
    position: relative;
    cursor: pointer;
    transition: background var(--t-fast);
}
.kpi-cell:last-child { border-right: none; }
.kpi-cell:hover { background: var(--surface-2); }
.kpi-cell .lbl {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
.kpi-cell .val {
    margin-top: 8px;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    font-family: var(--font-mono);
    white-space: nowrap;
    color: var(--text);
}
.kpi-cell .val.danger { color: var(--danger); }
.kpi-cell .val.warn { color: var(--warn); }
.kpi-cell .sub {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--text-subtle);
}
.kpi-cell .delta { color: var(--ok); font-weight: 500; }
.kpi-cell .delta.down { color: var(--danger); }

@media (max-width: 1100px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .kpi-cell:nth-child(2n) { border-right: none; }
    .kpi-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 600px) {
    .kpi-row { grid-template-columns: 1fr; }
    .kpi-cell { border-right: none !important; border-bottom: 1px solid var(--border); }
    .kpi-cell:last-child { border-bottom: none; }
}

/* Charts */
.chart-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
    margin-bottom: 22px;
}
@media (max-width: 1100px) {
    .chart-row { grid-template-columns: 1fr; }
}
.chart-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.chart-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chart-head .title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.chart-body { padding: 18px; }

.bar-chart-2 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    align-items: end;
    height: 160px;
}
.bar-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    cursor: pointer;
}
.bar-col .bars {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    gap: 2px;
    height: 140px;
    justify-content: flex-end;
}
.bar-col .b {
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}
.bar-col .b.emis { background: var(--text); }
.bar-col .b.encaisse { background: color-mix(in srgb, var(--ok) 70%, var(--surface)); }
.bar-col .m {
    font-size: 10px;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}
.bar-col.current .m {
    color: var(--text);
    font-weight: 600;
}
.bar-col:hover .m { color: var(--text); }

.donut {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 18px;
}
.donut svg {
    width: 140px;
    height: 140px;
    transform: rotate(-90deg);
}
.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 4px;
}
.donut-legend .row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text);
}
.donut-legend .dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}
.donut-legend .amt {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 12px;
}

/* Fact table moderne */
.fact-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.fact-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 500;
    font-size: 11.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    white-space: nowrap;
}
.fact-table tbody tr {
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--t-fast);
}
.fact-table tbody tr:hover { background: var(--surface-2); }
.fact-table tbody tr:last-child { border-bottom: none; }
.fact-table td {
    padding: 11px 14px;
    vertical-align: middle;
    white-space: nowrap;
}
.fact-table td:nth-child(2) { white-space: normal; }
.fact-table .num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.fact-table .mono {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.fact-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--border);
    color: var(--text-muted);
    white-space: nowrap;
}
.fact-status::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-subtle);
}
.fact-status.payee {
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 30%, var(--border));
}
.fact-status.payee::before { background: var(--ok); }
.fact-status.emise {
    color: var(--info);
    border-color: color-mix(in srgb, var(--info) 30%, var(--border));
}
.fact-status.emise::before { background: var(--info); }
.fact-status.retard {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}
.fact-status.retard::before { background: var(--danger); }
.fact-status.brouillon { color: var(--text-subtle); }
.fact-status.partielle {
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 30%, var(--border));
}
.fact-status.partielle::before { background: var(--warn); }

.temps-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 18px;
}
@media (max-width: 1100px) {
    .temps-layout { grid-template-columns: 1fr; }
}
.temps-meta {
    font-size: 11.5px;
    color: var(--text-subtle);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.tnb-bar {
    height: 6px;
    background: var(--surface-2);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}
.tnb-fill {
    height: 100%;
    background: var(--text);
    border-radius: 3px;
}
.tnb-fill.warn { background: var(--warn); }

.section-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 14px;
}
.section-hd h2 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}


/* =============================================================
   ========== REFONTE FICHE CLIENT ==========
   ============================================================= */

.view-fiche-client {
    padding: 0;
}

/* Reutilise .fd-back depuis fiche dossier */

.fc-title-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}
.fc-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--text);
    color: var(--surface);
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--font-serif);
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.fc-avatar.physique {
    background: var(--accent);
}
.fc-title-main {
    flex: 1;
    min-width: 0;
}
.fc-title-main h1 {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--text);
    margin: 0;
}
.fc-title-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--text-muted);
}
.fc-title-meta .mono {
    font-family: var(--font-mono);
    font-size: 12px;
}
.fc-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}
.fc-type-pill.physique {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.fc-title-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Wrapper visuel des sections dans fiche client (pattern similaire a fiche-tab-content) */
.view-fiche-client .fiche-content > .section-title {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text);
    margin: 18px 0 0;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    text-transform: none;
    line-height: 1.3;
}
.view-fiche-client .fiche-content > .section-title:first-child {
    margin-top: 0;
}
.view-fiche-client .fiche-content > .section-title + * {
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding: 16px 18px 18px;
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    margin-bottom: 16px;
}
.view-fiche-client .fiche-content > .section-title + .fc-contacts-container,
.view-fiche-client .fiche-content > .section-title + div:has(.crm-table) {
    padding: 16px 18px 18px;
}

/* Contacts dynamiques : contact-card moderne */
.view-fiche-client .fc-contacts-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.view-fiche-client .fc-contact-row {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 12px 14px;
    margin-bottom: 0;
    transition: border-color var(--t-fast);
}
.view-fiche-client .fc-contact-row:hover {
    border-color: color-mix(in srgb, var(--text) 15%, var(--border));
}
.view-fiche-client .fc-contact-row .contact-label {
    font-weight: 600;
    color: var(--text);
    font-size: 13px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}


/* =============================================================
   ========== PATCH ADMIN + OUTILS ==========
   ============================================================= */

/* Wrapper global pour pages internes (admin, outils, modeles) */
.view-admin,
.view-outils,
.view-modeles {
    max-width: 1280px;
    margin: 0 auto;
}

/* Section-title dans ces vues : card header style */
.view-admin > .section-title,
.view-outils > .section-title,
.view-modeles .section-title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 24px 0 14px;
    padding: 0;
    background: transparent;
    border: none;
    line-height: 1.3;
}
.view-admin > .section-title:first-child,
.view-outils > .section-title:first-child {
    margin-top: 0;
}

/* Encadre les blocs qui suivent les titres */
.view-admin > .section-title + .table-container,
.view-admin > .section-title + .form-grid,
.view-admin > .section-title + div:not(.table-container):not(.form-grid) {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    margin-bottom: 20px;
    overflow: hidden;
}
.view-admin > .section-title + .table-container {
    padding: 0;
}
.view-admin > .section-title + .table-container .crm-table {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Tabs outils style pilule */
.outils-tabs {
    display: flex;
    gap: 2px;
    background: var(--surface-2);
    padding: 3px;
    border-radius: 7px;
    margin-bottom: 20px;
    width: fit-content;
}
.outils-tab {
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all var(--t-fast);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
}
.outils-tab:hover:not(.active) { color: var(--text); }
.outils-tab.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

/* Cards modeles (galerie) */
.modele-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    cursor: pointer;
    transition: all var(--t-fast);
}
.modele-card:hover {
    border-color: color-mix(in srgb, var(--text) 15%, var(--border));
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.modele-card-icon {
    font-size: 24px;
    margin-bottom: 8px;
}
.modeles-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}


/* =============================================================
   DRAWER LATERAL (remplace modals plein \u00e9cran pour ajout rapide)
   ============================================================= */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 10, 9, 0.35);
    display: flex;
    justify-content: flex-end;
    z-index: 1000;
    animation: drawerFadeIn 0.18s ease;
}
@keyframes drawerFadeIn {
    from { background: rgba(12, 10, 9, 0); }
    to { background: rgba(12, 10, 9, 0.35); }
}

.drawer-content {
    width: 520px;
    max-width: 100vw;
    /* Compense le zoom (cf. .app-container) */
    height: calc(100vh / var(--zoom-factor, 1));
    background: var(--surface);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 24px -8px rgba(12, 10, 9, 0.3);
    animation: drawerSlide 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
@keyframes drawerSlide {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.drawer-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}
.drawer-header h3 {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0;
    flex: 1;
    color: var(--text);
}
.drawer-close {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 18px;
    background: none;
    border: none;
    cursor: pointer;
    transition: all var(--t-fast);
}
.drawer-close:hover {
    background: var(--surface-2);
    color: var(--text);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}
.drawer-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
}

/* Stepper (indicateur d'\u00e9tapes) */
.stepper {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.stepper .step {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    background: var(--surface);
    border: 1px solid var(--border);
    font-family: inherit;
    text-align: left;
    cursor: default;
    transition: all var(--t-fast);
}
.stepper .step.clickable {
    cursor: pointer;
}
.stepper .step.clickable:hover:not(.active) {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text);
}
.stepper .step.active {
    background: var(--text);
    color: var(--surface);
    border-color: var(--text);
}
.stepper .step.done {
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 30%, var(--border));
}
.stepper .step .n {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.stepper .step.active .n {
    background: var(--surface);
    color: var(--text);
}
.stepper .step.done .n {
    background: var(--ok);
    color: #fff;
}

/* Tabs within drawer */
.drawer-tabs {
    display: flex;
    gap: 2px;
    padding: 10px 20px 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.drawer-tabs .modal-tab {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all var(--t-fast);
    font-family: var(--font-sans);
}
.drawer-tabs .modal-tab:hover:not(.active) { color: var(--text); }
.drawer-tabs .modal-tab.active {
    color: var(--text);
    border-bottom-color: var(--text);
}


/* =============================================================
   CALENDRIER — vue semaine + plein ecran
   ============================================================= */
.cal-view-toggle .btn-secondary {
    padding: 6px 12px;
    font-size: 13px;
}
.cal-view-toggle .btn-secondary.active {
    background: var(--text);
    color: var(--surface);
    border-color: var(--text);
}

/* Vue semaine : cellules beaucoup plus grandes (une seule rangee) */
.calendar-grid-week {
    grid-template-rows: auto 1fr;
}
.calendar-grid-week .calendar-cell {
    min-height: 420px;
}
.calendar-grid-week .calendar-day-num {
    font-size: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}
.calendar-grid-week .calendar-task-item {
    padding: 6px 8px;
    font-size: 12px;
    margin: 4px 0;
    white-space: normal;
    line-height: 1.35;
}

/* =============================================================
   MON ESPACE — Dashboard orient\u00e9 action (refonte nov 2026)
   ============================================================= */
.monespace-page {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.monespace-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 32px 40px;
    width: 100%;
    box-sizing: border-box;
}

/* HERO */
.me-hero {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 8px;
}
.me-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--text);
    line-height: 1.1;
}
.me-hero-sub {
    font-size: 15px;
    color: var(--text-muted);
    text-transform: capitalize;
    letter-spacing: 0.01em;
}
.me-hero-hint {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-subtle);
    font-style: italic;
    letter-spacing: 0.01em;
}

/* GRILLE D'ACTIONS — 3 colonnes desktop, 2 tablette, 1 mobile */
.me-action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    flex: 1;
}
@media (max-width: 1100px) {
    .me-action-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .me-action-grid { grid-template-columns: 1fr; }
}

/* CARTE D'ACTION */
.me-action-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 220px;
    box-shadow: var(--shadow-sm);
    transition: all var(--t-med);
    position: relative;
    overflow: hidden;
}
.me-action-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    pointer-events: none;
    transition: border-color var(--t-med);
}
.me-action-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--border-strong);
}
.me-action-card.alert {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--danger) 3%, var(--surface)) 0%,
        var(--surface) 40%);
}
.me-action-card.alert .me-card-metric-value { color: var(--danger); }

.me-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.me-card-icon {
    font-size: 24px;
    line-height: 1;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border-radius: var(--radius);
    flex-shrink: 0;
}
.me-card-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
}

.me-card-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
    flex: 1;
}
.me-card-metric-value {
    font-family: var(--font-serif);
    font-size: 48px;
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.me-card-metric-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
    letter-spacing: 0.01em;
}

.me-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}
.me-card-btn {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all var(--t-fast);
    text-align: center;
}
.me-card-btn:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}
.me-card-btn-primary {
    background: var(--text);
    color: var(--surface);
    border-color: var(--text);
}
.me-card-btn-primary:hover {
    background: color-mix(in srgb, var(--text) 90%, var(--bg));
    border-color: color-mix(in srgb, var(--text) 90%, var(--bg));
}


/* =============================================================
   RECHERCHE GLOBALE DOSSIERS (accueil, taper sans cliquer)
   ============================================================= */
.gds-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 10, 9, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    animation: drawerFadeIn 0.18s ease;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.gds-box {
    width: 620px;
    max-width: calc(100vw - 48px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 28px 32px;
    animation: gdsIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes gdsIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.gds-label {
    font-family: var(--font-serif);
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 10px;
    text-align: left;
    letter-spacing: 0.01em;
}
.gds-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border var(--t-fast), box-shadow var(--t-fast);
}
.gds-input-wrap:focus-within {
    border-color: var(--text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent);
}
.gds-icon { color: var(--text-muted); flex-shrink: 0; }
.gds-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 22px;
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
    padding: 0;
}
.gds-input::placeholder {
    color: var(--text-subtle);
    font-family: var(--font-serif);
    font-weight: 500;
}
.gds-hint {
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-subtle);
    text-align: center;
    letter-spacing: 0.02em;
}


/* Mode plein ecran : overlay fixe sur tout le viewport */
.calendar-fullscreen-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 900;
    padding: 16px 24px;
    overflow: auto;
    animation: drawerFadeIn 0.18s ease;
}
.calendar-fullscreen-overlay .view-calendrier {
    max-width: 1600px;
    margin: 0 auto;
}
.calendar-fullscreen-overlay .calendar-grid {
    /* En plein ecran, on laisse les cellules prendre plus de hauteur */
}
.calendar-fullscreen-overlay .calendar-cell {
    min-height: 140px;
}
.calendar-fullscreen-overlay .calendar-grid-week .calendar-cell {
    min-height: calc(100vh - 220px);
}


/* =============================================================
   EMAILS — Phase O.3 V1
   ============================================================= */
.emails-split {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 16px;
    margin-top: 8px;
    min-height: calc(100vh - 280px);
}
@media (max-width: 980px) {
    .emails-split { grid-template-columns: 1fr; }
}

.emails-list-col {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    overflow-y: auto;
    max-height: calc(100vh - 280px);
}

.emails-detail-col {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    padding: 16px;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
}

.email-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.1s;
}
.email-item:hover { background: var(--bg-soft); }
.email-item.selected { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.email-item.unread { font-weight: 600; }
.email-item.unread .email-from::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 6px;
    vertical-align: middle;
}

.email-item-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.email-from {
    font-size: 13px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.email-date {
    font-size: 11px;
    color: var(--text-subtle);
    flex-shrink: 0;
}
.email-subject {
    font-size: 13px;
    color: var(--text);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.email-preview {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.email-badges {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}
.email-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--bg-soft);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.email-badge.linked { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.email-badge.attach { color: var(--text-muted); }
.email-badge.high { background: color-mix(in srgb, var(--err) 18%, transparent); color: var(--err); }
.email-badge.auto-link {
    background: color-mix(in srgb, var(--accent, #3498DB) 15%, transparent);
    color: var(--accent, #3498DB);
    border-color: color-mix(in srgb, var(--accent, #3498DB) 35%, transparent);
    cursor: help;
}

.email-detail-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.email-linked-box {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 14px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--ok) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
    border-radius: 6px;
    font-size: 12px;
}
.email-linked-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.email-linked-tag a { color: var(--accent); text-decoration: none; }
.email-linked-tag a:hover { text-decoration: underline; }
.email-linked-del {
    background: none;
    border: none;
    color: var(--text-subtle);
    cursor: pointer;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1;
}
.email-linked-del:hover { color: var(--err); }

.email-detail-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.email-detail-subject {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--text);
}
.email-detail-meta {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}
.email-detail-meta strong { color: var(--text); margin-right: 2px; }

.email-body-iframe {
    width: 100%;
    border: none;
    background: #fff;
    border-radius: 4px;
    min-height: 200px;
}
.email-body-text {
    font-family: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: var(--bg-soft);
    padding: 12px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
}

.email-attachments {
    margin-top: 16px;
    padding: 12px;
    background: var(--bg-soft);
    border-radius: 6px;
}
.email-attachments h4 { margin: 0 0 8px; font-size: 13px; color: var(--text); }

/* Modale liaison email */
.link-mail-summary {
    background: var(--bg-soft);
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
}
.link-section { margin-bottom: 16px; }
.link-section h4 {
    font-size: 13px;
    color: var(--text);
    margin: 0 0 8px;
}
.link-dossier-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 6px;
    background: var(--bg);
}
.ldl-info { flex: 1; min-width: 0; }
.ldl-id { font-weight: 600; font-size: 13px; }
.ldl-meta { font-size: 11px; color: var(--text-muted); }
.link-search-results { max-height: 220px; overflow-y: auto; }

/* Onglet emails dans la fiche dossier */
.fiche-email-line {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--bg);
    transition: background 0.1s;
}
.fiche-email-line:hover { background: var(--bg-soft); }
.fiche-email-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.fiche-email-from { font-weight: 600; font-size: 13px; }
.fiche-email-date { font-size: 11px; color: var(--text-subtle); }
.fiche-email-subject { font-size: 13px; color: var(--text); }
.fiche-email-preview { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.fiche-email-actions { margin-top: 6px; display: flex; justify-content: flex-end; }


/* =============================================================
   SHAREPOINT — Phase O.4 (2026-05-04)
   ============================================================= */
.sp-section-body {
    padding: 12px;
    background: var(--bg-soft);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.sp-alert {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 13px;
}
.sp-alert-info {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    color: var(--text);
}

.sp-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 12px;
}
@media (max-width: 720px) {
    .sp-config-grid { grid-template-columns: 1fr; }
}

.sp-toggle-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
}
.sp-toggle-row input[type=checkbox] {
    width: 16px; height: 16px;
}

.sp-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sp-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}
.sp-field-hint {
    font-size: 11px;
    color: var(--text-subtle);
    line-height: 1.4;
}

.sp-subfolders-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}
.sp-sub-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.sp-sub-row input { flex: 1; }

/* Bandeau dossier */
.sp-dossier-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    margin-bottom: 12px;
}
.sp-dossier-banner.sp-linked {
    background: color-mix(in srgb, var(--ok) 8%, transparent);
    border-color: color-mix(in srgb, var(--ok) 25%, transparent);
}
.sp-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.sp-icon {
    font-size: 1.4rem;
    line-height: 1;
}
.sp-icon-empty { opacity: 0.4; }
.sp-text { min-width: 0; flex: 1; }
.sp-label { font-weight: 600; font-size: 13px; color: var(--text); }
.sp-path { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-hint { font-size: 11px; color: var(--text-muted); }

.sp-banner-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Recherche dossier SharePoint dans modale lien */
.sp-search-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 4px;
    background: var(--bg);
    gap: 8px;
}


/* Maxime 2026-05-06 : evenements (RDV, audiences) injectes dans
   l'onglet Procedure, distincts des jalons de procedure */
.proc-row.is-evenement {
    background: color-mix(in srgb, var(--accent, #3498DB) 4%, var(--surface));
}
.proc-row.is-evenement td {
    color: var(--text-muted);
}
.proc-timeline-step.is-evenement .proc-timeline-label {
    color: var(--accent, #3498DB);
    font-style: italic;
}
.proc-timeline-step.is-evenement .proc-timeline-dot {
    border-color: var(--accent, #3498DB);
    background: var(--surface);
}


/* =============================================================
   EXPLORATEUR ARBORESCENT SHAREPOINT (Maxime 2026-05-06)
   Vue type "explorateur de fichiers" sous le bandeau du dossier lie
   ============================================================= */
.sp-explorer {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}
.sp-explorer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.sp-explorer-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.sp-explorer-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.sp-explorer-actions .btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

.sp-explorer-crumb {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
}
.sp-crumb-link {
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 4px;
    transition: background var(--t-fast), color var(--t-fast);
}
.sp-crumb-link:hover {
    background: var(--surface-2);
    color: var(--text);
}
.sp-crumb-current {
    padding: 2px 6px;
    color: var(--text);
    font-weight: 500;
}
.sp-crumb-sep {
    color: var(--text-subtle);
    margin: 0 2px;
}

.sp-explorer-list {
    max-height: 480px;
    overflow-y: auto;
    padding: 6px;
}
.sp-explorer-loading {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.sp-explorer-item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 6px;
    transition: background var(--t-fast);
    border: 1px solid transparent;
}
.sp-explorer-item:hover {
    background: var(--surface-2);
}
.sp-explorer-item.is-folder:hover {
    border-color: color-mix(in srgb, var(--accent, #3498DB) 30%, var(--border));
}
.sp-item-icon {
    font-size: 18px;
    line-height: 1;
    text-align: center;
}
.sp-item-name {
    font-size: 13.5px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-explorer-item.is-folder .sp-item-name {
    font-weight: 500;
}
.sp-item-meta {
    display: flex;
    gap: 12px;
    font-size: 11.5px;
    color: var(--text-subtle);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.sp-item-size {
    min-width: 60px;
    text-align: right;
}

/* Mobile : on cache la date pour gagner de la place */
@media (max-width: 700px) {
    .sp-item-date { display: none; }
}

/* Audit log table */
.audit-table { width: 100%; font-size: 12px; }
.audit-table th { text-align: left; padding: 6px 8px; background: var(--bg-soft); }
.audit-table td { padding: 4px 8px; vertical-align: top; border-bottom: 1px solid var(--border); }

.audit-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
}
.audit-badge-success { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.audit-badge-failure { background: color-mix(in srgb, var(--err) 18%, transparent); color: var(--err); }
.audit-badge-warning { background: color-mix(in srgb, var(--warn, #F39C12) 18%, transparent); color: var(--warn, #F39C12); }
.audit-badge-info { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }

.audit-row.audit-status-failure td { background: color-mix(in srgb, var(--err) 5%, transparent); }
.audit-row.audit-status-warning td { background: color-mix(in srgb, var(--warn, #F39C12) 5%, transparent); }


/* =============================================================
   CHAMPS OBLIGATOIRES — asterisque rouge + bouton disabled
   ============================================================= */
.required-mark {
    color: #E74C3C;
    font-weight: 700;
    margin-left: 2px;
}

.form-field.required label.field-label {
    /* Optionnel : poids accentue pour les champs obligatoires */
    font-weight: 600;
}

/* Style bouton disable (pour les boutons disabled crees dynamiquement) */
.btn-primary:disabled,
.btn-primary.disabled,
.btn-secondary:disabled,
.btn-secondary.disabled,
.btn-ghost:disabled,
.btn-ghost.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}


/* =============================================================
   SHAREPOINT EXPLORER (modale lier a un dossier existant)
   ============================================================= */
.sp-link-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.sp-link-tab {
    background: none;
    border: none;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.sp-link-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}
.sp-link-tab:hover { background: var(--bg-soft); }

.sp-breadcrumb {
    padding: 8px 12px;
    background: var(--bg-soft);
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
}
.sp-crumb {
    color: var(--accent);
    cursor: pointer;
    text-decoration: none;
}
.sp-crumb:hover { text-decoration: underline; }
.sp-crumb-sep {
    color: var(--text-subtle);
    margin: 0 4px;
}

.sp-current-folder-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 6px;
    margin-bottom: 12px;
}

.sp-browse-list {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.sp-browse-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.1s;
}
.sp-browse-row:last-child { border-bottom: none; }
.sp-browse-row:hover { background: var(--bg-soft); }
.sp-browse-icon { font-size: 1.1rem; flex-shrink: 0; }
.sp-browse-name { flex: 1; font-size: 13px; }
.sp-browse-date { font-size: 11px; color: var(--text-subtle); }
.sp-browse-select {
    font-size: 11px;
    padding: 4px 10px;
    flex-shrink: 0;
}


/* =============================================================
   SHAREPOINT EXPORT EMAIL MODAL (2026-05-04)
   ============================================================= */
.sp-export-mail-summary {
    background: var(--bg-soft);
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 16px;
}
.sp-export-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}
.sp-export-hint {
    font-size: 11px;
    color: var(--text-subtle);
    margin-top: 4px;
}
.sp-export-subfolder-info {
    margin-bottom: 4px;
}
.sp-export-attachments {
    border: 1px solid var(--border);
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 4px;
}
.sp-export-att-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: 13px;
}
.sp-export-att-row:last-child { border-bottom: none; }
.sp-export-att-row:hover { background: var(--bg-soft); }
.sp-export-att-row.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--text-muted);
}
.sp-export-att-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-export-att-size { font-size: 11px; color: var(--text-subtle); flex-shrink: 0; }

/* Surbrillance "pressed" quand on clique sur une ligne explorer */
.sp-browse-row-pressed {
    background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
}
.sp-browse-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}


/* =============================================================
   CONTACTS DOSSIER + ANNUAIRE — Phase Contacts (2026-05-04)
   ============================================================= */
.dc-section { margin-top: 20px; }
.dc-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dc-group-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}
.dc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: background 0.1s;
}
.dc-row:hover { background: var(--bg-soft); }
.dc-info { flex: 1; min-width: 0; }
.dc-name { font-weight: 600; color: var(--text); font-size: 14px; }
.dc-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.dc-notes {
    font-size: 12px;
    color: var(--text-subtle);
    margin-top: 4px;
    font-style: italic;
}
.dc-actions { display: flex; gap: 4px; flex-shrink: 0; align-items: center; }
.dc-badge {
    display: inline-block;
    padding: 2px 6px;
    background: color-mix(in srgb, var(--ok) 15%, transparent);
    border-radius: 10px;
    font-size: 13px;
}

.annuaire-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


/* =============================================================
   FICHE NOTES (mini bloc-note + historique - 2026-05-04)
   ============================================================= */
.fiche-notes-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}
.fiche-notes-textarea {
    width: 100%;
    min-height: 70px;
    resize: vertical;
    font-family: inherit;
    font-size: 13px;
    background: color-mix(in srgb, var(--accent) 4%, var(--bg));
    border: 1px dashed var(--border);
}
.fiche-notes-textarea:focus {
    background: var(--bg);
    border-style: solid;
}
.fiche-notes-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    justify-content: flex-end;
}
.fiche-notes-history-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 16px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.fiche-notes-history {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
}
.fiche-note-item {
    /* Maxime 2026-05-06 : 90px date / 1fr texte / auto actions (✎ ✕) */
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 10px;
    align-items: start;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
}
.fiche-note-item.editing {
    /* Mode edition : disposition empilee (date + textarea + actions) */
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--surface);
}
.fiche-note-date {
    font-size: 11px;
    color: var(--text-subtle);
    font-family: var(--font-mono);
}
.fiche-note-text {
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}
.fiche-note-actions {
    display: flex;
    gap: 2px;
    align-items: center;
}
.fiche-note-edit,
.fiche-note-del {
    background: none;
    border: none;
    color: var(--text-subtle);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 4px;
    transition: color var(--t-fast), background var(--t-fast);
}
.fiche-note-edit:hover {
    color: var(--accent, #3498DB);
    background: var(--surface-2);
}
.fiche-note-del:hover {
    color: var(--err);
    background: var(--surface-2);
}
.fiche-note-date-input {
    width: 160px;
    padding: 4px 8px;
    font-size: 12px;
}
.fiche-note-edit-textarea {
    width: 100%;
    padding: 8px;
    font-size: 13px;
    resize: vertical;
    min-height: 60px;
}
.fiche-note-edit-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}


/* =============================================================
   TACHES ASSIGNEES — Phase 2026-05-04
   ============================================================= */
.tache-assigned-badge {
    display: inline-block;
    margin-right: 4px;
    cursor: help;
    font-size: 0.95em;
    vertical-align: middle;
}
tr.tache-row-assigned {
    background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
}
tr.tache-row-assigned:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

/* Flash de l'icone Planning quand on recoit une nouvelle tache assignee */
.nav-item.nav-flash {
    animation: nav-flash-anim 0.6s ease-in-out 3;
}
@keyframes nav-flash-anim {
    0%, 100% { background: transparent; }
    50% { background: color-mix(in srgb, var(--accent) 25%, transparent); }
}


/* =============================================================
   TACHES & PLANNING v2 — refonte design 2026-05-04
   (design Anthropic Linear/Attio : KPIs inline, toolbar epuree,
    table dense avec pills + badges custom)
   ============================================================= */

/* Header KPIs */
.tp-page { display: flex; flex-direction: column; gap: 16px; }
.tp-stats { display: flex; gap: 14px; align-items: center; font-size: 12.5px; color: var(--text-muted); flex-wrap: wrap; }
.tp-stat { display: inline-flex; align-items: baseline; gap: 5px; }
.tp-stat .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 500; color: var(--text); }
.tp-stat.danger .n { color: var(--danger); }
.tp-stat.warn .n { color: var(--warn); }
.tp-stat.dim { color: var(--text-subtle); }
.tp-stats .sep { color: var(--border); }

/* Toolbar */
.tp-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    flex-wrap: wrap;
}
.tp-toolbar .search-input {
    flex: 1 1 200px;
    min-width: 180px;
    position: relative;
    display: flex;
    align-items: center;
}
.tp-toolbar .search-input svg { position: absolute; left: 10px; color: var(--text-subtle); pointer-events: none; }
.tp-toolbar .search-input input {
    width: 100%;
    padding: 7px 10px 7px 32px;
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    transition: all 0.12s;
}
.tp-toolbar .search-input input::placeholder { color: var(--text-subtle); }
.tp-toolbar .search-input input:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent);
}

.tp-toolbar .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 12.5px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
    position: relative;
}
.tp-toolbar .filter-chip:hover {
    border-color: color-mix(in srgb, var(--text) 25%, var(--border));
    color: var(--text);
}
.tp-toolbar .filter-chip.has-value {
    background: color-mix(in srgb, var(--text) 5%, var(--surface));
    border-color: color-mix(in srgb, var(--text) 30%, var(--border));
    color: var(--text);
    font-weight: 500;
}
.tp-toolbar .filter-chip svg.caret { width: 10px; height: 10px; color: var(--text-subtle); }
.tp-toolbar .filter-chip .label-key { color: var(--text-subtle); font-weight: 400; }
.tp-toolbar .filter-chip.has-value .label-key { color: var(--text-muted); }
.tp-toolbar .filter-chip select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 12px;
}

.tp-toolbar .toolbar-divider { width: 1px; height: 18px; background: var(--border); }

.tp-toolbar .toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 12.5px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.tp-toolbar .toggle-pill:hover { color: var(--text); }
.tp-toolbar .toggle-pill .check {
    width: 14px; height: 14px;
    border-radius: 4px;
    border: 1.5px solid var(--border);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.tp-toolbar .toggle-pill .check svg { width: 9px; height: 9px; color: var(--surface); opacity: 0; }
.tp-toolbar .toggle-pill.on .check { background: var(--text); border-color: var(--text); }
.tp-toolbar .toggle-pill.on .check svg { opacity: 1; }
.tp-toolbar .toggle-pill.on { color: var(--text); font-weight: 500; }

/* Table v2 - Maxime 2026-05-07
   Approche : pas de sticky (qui posait des problemes de compatibilite
   navigateur). A la place, on COMPRESSE la table pour qu'elle tienne
   sans scroll horizontal sur la plupart des ecrans. La cellule Cat. en
   2e position reste donc TOUJOURS visible. */
.tp-table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow-x: auto;   /* fallback si malgre tout l'ecran est tres etroit */
    overflow-y: hidden;
}
.tp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.tp-table thead th {
    text-align: left;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-subtle);
    background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    user-select: none;
}
.tp-table thead th.sortable { cursor: pointer; }
.tp-table thead th.sortable:hover { color: var(--text); }
.tp-table thead th .arrow { color: var(--text); margin-left: 3px; }
.tp-table thead th.compact { width: 1px; padding: 9px 8px; text-align: center; }
.tp-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.08s;
}
.tp-table tbody tr:last-child { border-bottom: none; }
.tp-table tbody tr:hover { background: color-mix(in srgb, var(--text) 2.5%, var(--surface)); }
.tp-table tbody tr.is-overdue { background: color-mix(in srgb, var(--danger) 4%, var(--surface)); }
.tp-table tbody tr.is-overdue:hover { background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.tp-table tbody tr.is-today { background: color-mix(in srgb, var(--warn) 5%, var(--surface)); }
.tp-table tbody tr.is-done { opacity: 0.55; }
.tp-table tbody tr.is-done .tk-task { text-decoration: line-through; text-decoration-color: var(--text-subtle); }
.tp-table tbody tr.tp-row-assigned { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }

/* Maxime 2026-05-06 : header de section dans le mode "Toutes"
   (separation visuelle entre Recues+personnelles et Envoyees) */
.tp-table tbody tr.tp-section-header {
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 2px solid var(--border);
}
.tp-table tbody tr.tp-section-header:hover {
    background: var(--surface-2);  /* override le hover */
}
.tp-table tbody tr.tp-section-header td {
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    /* Maxime 2026-05-07 : forcer text-align left pour que le titre
       de section ("Reçues & personnelles" / "Envoyées" / etc.)
       s'affiche au DEBUT (gauche) de la ligne et non a droite. */
    text-align: left !important;
}
.tp-table tbody tr.tp-section-header strong {
    color: var(--text);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    margin-left: 6px;
}
.tp-section-icon {
    font-size: 14px;
}
.tp-section-count {
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
}

.tp-table tbody td {
    padding: 8px 8px;       /* etait 11x12 -> compact pour faire tenir plus */
    vertical-align: middle;
    white-space: nowrap;
}
.tp-table thead th {
    padding: 8px 8px;       /* idem */
}
.tp-table thead th.compact,
.tp-table tbody td.compact {
    padding: 8px 4px;
}
.tp-table tbody td.wrap { white-space: normal; }

/* Maxime 2026-05-07 : sur ecrans etroits (zoom 115% chez Maxime),
   masquer les colonnes les moins critiques pour faire tenir le
   tableau sans scroll horizontal et garder la pastille Cat. visible.
   Notes (col 11), 📅 (col 12), 🔔 (col 13) sont masquees < 1500px.
   L'utilisateur peut toujours editer ces infos via le bouton Modifier. */
@media (max-width: 1500px) {
    .tp-table thead th:nth-child(11),
    .tp-table tbody td:nth-child(11),
    .tp-table thead th:nth-child(12),
    .tp-table tbody td:nth-child(12),
    .tp-table thead th:nth-child(13),
    .tp-table tbody td:nth-child(13) {
        display: none;
    }
}

/* Cellules custom (badges, pills, avatars) */
.tk-check {
    width: 16px; height: 16px;
    border-radius: 4px;
    border: 1.5px solid color-mix(in srgb, var(--text) 25%, var(--border));
    display: grid; place-items: center;
    cursor: pointer;
    background: var(--surface);
    transition: all 0.12s;
}
.tk-check:hover { border-color: var(--text); }
.tk-check svg { width: 10px; height: 10px; color: var(--surface); opacity: 0; }
.tk-check.done { background: var(--ok); border-color: var(--ok); }
.tk-check.done svg { opacity: 1; }

.tk-dossier {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
    background: var(--surface-2);
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tk-dossier:hover { color: var(--text); }

.tk-task {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tk-task .sub { font-size: 11.5px; color: var(--text-subtle); margin-top: 1px; font-weight: 400; }

.tk-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
    position: relative;
    cursor: pointer;
}
.tk-type.audience { color: #8E44AD; background: color-mix(in srgb, #8E44AD 8%, var(--surface)); border-color: color-mix(in srgb, #8E44AD 25%, var(--border)); }
.tk-type.rdv { color: #2980B9; background: color-mix(in srgb, #2980B9 8%, var(--surface)); border-color: color-mix(in srgb, #2980B9 25%, var(--border)); }
.tk-type.depot { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); }

.tk-date { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text); }
.tk-date .dim { color: var(--text-subtle); }

.tk-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--surface);
    position: relative;
    cursor: pointer;
}
.tk-status::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--text-subtle);
}
.tk-status.faire { color: var(--text); border-color: color-mix(in srgb, var(--text) 25%, var(--border)); }
.tk-status.faire::before { background: var(--text); }
.tk-status.encours { color: #2980B9; border-color: color-mix(in srgb, #2980B9 30%, var(--border)); background: color-mix(in srgb, #2980B9 5%, var(--surface)); }
.tk-status.encours::before { background: #2980B9; }
.tk-status.attente { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); background: color-mix(in srgb, var(--warn) 5%, var(--surface)); }
.tk-status.attente::before { background: var(--warn); }
.tk-status.done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, var(--border)); background: color-mix(in srgb, var(--ok) 5%, var(--surface)); }
.tk-status.done::before { background: var(--ok); }

/* Wrapper qui rend selectable une cellule pill via select natif transparent */
.tk-cell-editable { position: relative; display: inline-flex; }
.tk-cell-editable select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 12px;
}

.tk-prio {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
}
.tk-prio .bars { display: inline-flex; gap: 1.5px; }
.tk-prio .bars span { width: 3px; height: 9px; border-radius: 1px; background: var(--border); }
.tk-prio.urgente { color: var(--danger); }
.tk-prio.urgente .bars span { background: var(--danger); }
.tk-prio.haute { color: var(--warn); }
.tk-prio.haute .bars span:nth-child(-n+2) { background: var(--warn); }
.tk-prio.normale .bars span:nth-child(1) { background: var(--text-muted); }

.tk-jr {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
}
.tk-jr.danger { color: var(--danger); font-weight: 500; }
.tk-jr.warn { color: var(--warn); font-weight: 500; }

.tk-resp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--text-muted);
    cursor: pointer;
}
.tk-resp .av {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text) 8%, var(--surface));
    color: var(--text);
    display: grid; place-items: center;
    font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.02em;
}
.tk-resp.dj .av { background: color-mix(in srgb, #8E44AD 18%, var(--surface)); color: #6B2D87; }
.tk-resp.js .av { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent); }
.tk-resp.mw .av { background: color-mix(in srgb, #2980B9 18%, var(--surface)); color: #1B5980; }

.tk-notes {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 200px;
    max-width: 320px;
    white-space: normal;
    vertical-align: top;
}
.tk-notes .empty { color: var(--text-subtle); font-style: italic; }
.tk-notes textarea.inline-input,
.tk-notes input.inline-input {
    background: transparent;
    border: 1px solid transparent;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-muted);
    width: 100%;
    font-family: inherit;
    resize: none;
    overflow: hidden;
    line-height: 1.4;
    min-height: 24px;
}
.tk-notes textarea.inline-input:focus,
.tk-notes input.inline-input:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
.tk-notes-textarea {
    word-break: break-word;
}

.tk-cal {
    width: 16px; height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--border);
    display: grid; place-items: center;
    cursor: pointer;
    background: var(--surface);
}
.tk-cal:hover { border-color: var(--text); }
.tk-cal svg { width: 9px; height: 9px; color: var(--surface); opacity: 0; }
.tk-cal.on { background: var(--text); border-color: var(--text); }
.tk-cal.on svg { opacity: 1; }

.tk-rappel {
    font-size: 11px;
    color: var(--text-subtle);
    font-family: var(--font-mono);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px dashed var(--border);
    background: transparent;
}
.tk-rappel:hover {
    color: var(--text);
    border-color: var(--text-muted);
    border-style: solid;
}
.tk-rappel.set {
    color: var(--text);
    border-style: solid;
    background: var(--surface-2);
}

.row-actions {
    /* Maxime 2026-05-07 : actions toujours visibles dans la table taches
       (avant : hover only -> les users ne savaient pas qu'elles existaient) */
    display: inline-flex;
    gap: 2px;
    opacity: 1;
    transition: opacity 0.1s;
}
/* On garde l'effet hover dans la table DOSSIERS (autre usage) */
.dossiers-table .row-actions { opacity: 0; }
.dossiers-table tbody tr:hover .row-actions { opacity: 1; }
.row-actions button {
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 4px;
    color: var(--text-subtle);
    cursor: pointer;
    background: transparent;
    border: none;
}
.row-actions button:hover { background: var(--surface-2); color: var(--text); }
.row-actions button.danger:hover {
    background: color-mix(in srgb, var(--danger) 10%, var(--surface));
    color: var(--danger);
}

/* Empty state */
.tp-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.tp-empty .icon {
    width: 48px; height: 48px;
    margin: 0 auto 14px;
    border-radius: 12px;
    background: var(--surface-2);
    display: grid; place-items: center;
    color: var(--text-subtle);
}
.tp-empty h3 { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 4px; }

/* Footer table */
.tp-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 50%, var(--surface));
    font-size: 11.5px;
    color: var(--text-muted);
}

/* Rappel multi-select dans la table v2 (matche le visuel tk-rappel) */
.tp-table .tk-rappel-ms .multi-select-display {
    font-size: 11px;
    color: var(--text-subtle);
    font-family: var(--font-mono);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px dashed var(--border);
    background: transparent;
    min-width: 70px;
}
.tp-table .tk-rappel-ms .multi-select-display:hover {
    color: var(--text);
    border-color: var(--text-muted);
    border-style: solid;
}
.tp-table .tk-rappel-ms.has-value .multi-select-display {
    color: var(--text);
    border-style: solid;
    background: var(--surface-2);
}
.tp-table .tk-rappel-ms .multi-select-display.placeholder { color: var(--text-subtle); }

/* =============================================================
   TACHES LISTE v2 - elargissement HORIZONTAL du tableau (2026-05-04 v2)
   ============================================================= */
/*
 * Maxime feedback : le wrap creait des lignes ultra hautes (la
 * tache wrappait sur 3-4 lignes). Et le tableau ne s'agrandissait
 * pas car le selector `:has(> .view-taches)` etait DIRECT enfant
 * alors que le DOM est .page-inner > .planning-main > .view-taches.
 * Fix : (1) descendant selector + reduction du max-width du conteneur,
 * (2) suppression du wrap sur les cellules texte, (3) elargissement
 * de tk-task pour qu'elle utilise la place gagnee.
 */

/* Etendre la largeur disponible : la page Planning utilise 100% du
 * .main-content (au lieu du max-width 1280px par defaut). Note : on
 * cible aussi .page (parent direct) pour couvrir tous les cas. */
.page-inner:has(.view-taches.tp-page),
.page:has(.view-taches.tp-page) > .page-inner {
    max-width: none;
    width: 100%;
}

/* Tache : NO wrap, ellipsis en cas de depassement, max-width plus
 * generous (550px) pour profiter de la largeur ecran agrandie.
 * Tooltip natif (title) deja present sur l'element pour voir le texte
 * complet au survol. */
.tp-table .tk-task {
    max-width: 550px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Notes : la textarea avec auto-resize peut wrapper sur plusieurs lignes
 * (utile car les notes sont souvent multilignes). On limite a 280px
 * pour eviter qu'elle ne mange tout l'ecran. La textarea elle-meme gere
 * son wrap proprement. */
.tp-table .tk-notes {
    width: 280px;
    min-width: 220px;
    max-width: 280px;
    vertical-align: top;
    padding-top: 9px;
    padding-bottom: 9px;
    white-space: normal;
}

/* Actions : visibles legerement par defaut, pleinement au survol */
.tp-table .row-actions { opacity: 0.4; transition: opacity 0.15s; }
.tp-table tbody tr:hover .row-actions { opacity: 1; }

/* Colonne actions : largeur fixe pour qu'elle ne soit jamais coupee */
.tp-table thead th:last-child,
.tp-table tbody td:last-child {
    width: 60px;
    min-width: 60px;
    padding-left: 4px;
    padding-right: 8px;
    text-align: right;
}

/* Scroll horizontal seulement en dernier recours (tres petit ecran) */
.tp-table-wrap {
    overflow-x: auto;
}

/* Sur ecrans <1300px on rabote le max de tk-task pour eviter le scroll */
@media (max-width: 1300px) {
    .tp-table .tk-task { max-width: 380px; }
    .tp-table .tk-notes { width: 220px; max-width: 220px; }
}
@media (max-width: 1100px) {
    .tp-table tbody td { padding: 9px 8px; }
    .tp-table .tk-task { max-width: 260px; }
}

/* =============================================================
   TACHES v2 - segment "Vue" + badges categorie (2026-05-04 v3)
   ============================================================= */
/*
 * Segment "Vue" dans la toolbar : 4 boutons pour distinguer
 * Toutes / Recues / Envoyees / Personnelles. Style segmented
 * (boutons accoles dans un container border-radius commun).
 */
.tp-view-seg {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
    background: var(--surface);
    height: 32px;
}
.tp-view-seg-btn {
    background: transparent;
    border: none;
    padding: 0 12px;
    font-size: 12.5px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    border-right: 1px solid var(--border);
    line-height: 32px;
    white-space: nowrap;
    font-family: inherit;
}
.tp-view-seg-btn:last-child { border-right: none; }
.tp-view-seg-btn:hover {
    background: var(--surface-2);
    color: var(--text);
}
.tp-view-seg-btn.active {
    background: var(--text);
    color: var(--surface);
    font-weight: 500;
}
.tp-view-seg-btn.active:hover {
    background: var(--text);
    color: var(--surface);
}

/* Badges discrets dans la colonne tache pour distinguer
 * recues (📥) et envoyees (📤). Petit espace + cursor help. */
.tp-table .tk-task-badge {
    display: inline-block;
    margin-right: 5px;
    cursor: help;
    font-size: 12px;
    vertical-align: baseline;
}

/* Row envoyee : nuance verte tres legere pour distinguer subtilement
 * des taches "personnelles" (sans fond) et "recues" (nuance accent). */
.tp-table tbody tr.tp-row-envoyee {
    background: color-mix(in srgb, var(--ok, #16a34a) 3.5%, var(--surface));
}
.tp-table tbody tr.tp-row-envoyee:hover {
    background: color-mix(in srgb, var(--ok, #16a34a) 7%, var(--surface));
}

/* Maxime 2026-05-07 : cellule Cat. (icone categorie tout a gauche).
   Fond coloré + pastille pour rendre la categorie immediatement
   identifiable d'un coup d'oeil. */
.tp-table .tk-cat-cell {
    width: 38px;
    padding: 4px 6px;
    vertical-align: middle;
}
.tk-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 14px;
    line-height: 1;
    border-radius: 50%;
    cursor: help;
    transition: transform 0.12s;
}
.tk-cat-icon:hover { transform: scale(1.15); }

/* Couleur de fond par categorie */
.tk-cat-personnelles {
    background: color-mix(in srgb, var(--text-subtle) 18%, transparent);
}
.tk-cat-recues {
    background: color-mix(in srgb, var(--accent, #3498DB) 22%, transparent);
}
.tk-cat-envoyees {
    background: color-mix(in srgb, var(--ok, #16a34a) 22%, transparent);
}
.tk-cat-dossier_associe {
    background: color-mix(in srgb, var(--warn, #d97706) 22%, transparent);
}

/* Sur ecrans plus etroits, on cache le label texte des boutons et garde
 * uniquement l'emoji pour gagner de la place. */
@media (max-width: 1300px) {
    .tp-view-seg-btn { padding: 0 9px; font-size: 12px; }
}

/* =============================================================
   ONGLET PROCEDURE - vue liste (etape 2/4 - 2026-05-04)
   ============================================================= */
.fiche-procedure-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.fiche-procedure-header .section-title {
    margin: 0;
    flex-shrink: 0;
}

/* Tableau procedure : reuse .tp-table mais cellules editables inline */
.tp-table.proc-table tbody td {
    padding: 6px 10px;
    vertical-align: middle;
}
.tp-table.proc-table tbody td .inline-input {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--text);
    font-family: inherit;
    transition: border-color 0.12s, background 0.12s;
}
.tp-table.proc-table tbody td .inline-input:hover {
    border-color: var(--border);
    background: var(--surface);
}
.tp-table.proc-table tbody td .inline-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
}
.tp-table.proc-table tbody td select.inline-input {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.tp-table.proc-table tbody tr.is-done {
    opacity: 0.55;
}
.tp-table.proc-table tbody tr.is-done .inline-input {
    text-decoration: line-through;
}

/* =============================================================
   FRISE CHRONOLOGIQUE - vue Procedure (etape 3/4 - 2026-05-04)
   ============================================================= */
.proc-timeline-wrap {
    margin-top: 16px;
    padding: 24px 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow-x: auto;  /* scroll horizontal si nombreuses etapes */
    /* Maxime 2026-05-05 : scrollbar visible en permanence pour montrer
       que la frise est scrollable au-dela des 6+ premieres etapes. */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.proc-timeline-wrap::-webkit-scrollbar { height: 10px; }
.proc-timeline-wrap::-webkit-scrollbar-track {
    background: var(--surface-2);
    border-radius: 5px;
}
.proc-timeline-wrap::-webkit-scrollbar-thumb {
    background: var(--text-subtle);
    border-radius: 5px;
}
.proc-timeline-wrap::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.proc-timeline-hint {
    color: var(--text-subtle);
    font-size: 11.5px;
    margin-bottom: 16px;
    padding: 0 4px;
}

.proc-timeline {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-width: 100%;
    padding: 60px 24px 60px;  /* place pour les labels au-dessus + dates en dessous */
}
/* La ligne horizontale qui traverse */
.proc-timeline::before {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    top: 50%;
    height: 2px;
    background: linear-gradient(to right, var(--border), color-mix(in srgb, var(--text) 12%, var(--border)), var(--border));
    transform: translateY(-50%);
    border-radius: 2px;
    pointer-events: none;
}

.proc-timeline-step {
    position: relative;
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 200px;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.12s;
}
.proc-timeline-step:hover { transform: translateY(-2px); }

/* Libelle au-dessus du point */
.proc-timeline-label {
    position: absolute;
    bottom: calc(50% + 18px);  /* au-dessus du point, qui est centre sur 50% */
    left: 0;
    right: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.25;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.proc-timeline-type {
    position: absolute;
    bottom: calc(50% + 4px);
    left: 0;
    right: 0;
    font-size: 10.5px;
    color: var(--text-subtle);
    font-style: italic;
}

/* Le point central (sur la ligne) */
.proc-timeline-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface);
    border: 2.5px solid var(--text-muted);
    display: grid;
    place-items: center;
    z-index: 2;  /* au-dessus de la ligne */
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 0 0 4px var(--surface);  /* anneau blanc autour pour cacher la ligne sous le point */
}
.proc-timeline-step:hover .proc-timeline-dot {
    transform: scale(1.15);
}
.proc-timeline-dot svg {
    width: 11px;
    height: 11px;
    color: var(--surface);
}

/* Couleurs par statut */
.proc-timeline-step.is-upcoming .proc-timeline-dot {
    border-color: var(--accent, #3498DB);
    background: var(--accent, #3498DB);
}
.proc-timeline-step.is-upcoming .proc-timeline-dot svg { display: none; }
.proc-timeline-step.is-done .proc-timeline-dot {
    border-color: var(--ok, #16a34a);
    background: var(--ok, #16a34a);
    color: var(--surface);
}
.proc-timeline-step.is-postponed .proc-timeline-dot {
    border-color: var(--warn, #d97706);
    background: var(--warn, #d97706);
    color: var(--surface);
}

/* Date sous le point */
.proc-timeline-date {
    position: absolute;
    top: calc(50% + 18px);
    left: 0;
    right: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    padding: 0 8px;
}
.proc-timeline-hour {
    color: var(--text-subtle);
    font-weight: 400;
}
.proc-timeline-statut {
    position: absolute;
    top: calc(50% + 36px);
    left: 0;
    right: 0;
    font-size: 10.5px;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.proc-timeline-com {
    position: absolute;
    top: calc(50% + 54px);
    left: 0;
    right: 0;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Legende sous la frise */
.proc-timeline-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 12px;
}
.proc-timeline-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.proc-timeline-legend .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.proc-timeline-legend .legend-dot.is-upcoming { background: var(--accent, #3498DB); }
.proc-timeline-legend .legend-dot.is-done { background: var(--ok, #16a34a); }
.proc-timeline-legend .legend-dot.is-postponed { background: var(--warn, #d97706); }

/* Badge "synchronise au calendrier" en coin du step (frise) */
.proc-timeline-cal-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 13px;
    background: var(--surface);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 1px var(--border);
    cursor: help;
}

/* Bouton calendrier dans la liste : etat synced (bleu accent) */
.proc-cal-btn.synced {
    color: var(--accent, #3498DB) !important;
    opacity: 1 !important;
}
.proc-cal-btn:hover { opacity: 1; }

/* =============================================================
   FICHE DOSSIER - Section Juridiction (annuaire data.gouv.fr)
   ============================================================= */
.fd-juridiction-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: 6px;
}

.fd-juridiction-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.fd-jur-info { flex: 1; min-width: 0; }
.fd-jur-type {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.fd-jur-nom {
    font-weight: 500;
    color: var(--text);
    font-size: 14px;
    margin-bottom: 4px;
}
.fd-jur-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.fd-jur-contact {
    font-size: 12.5px;
    color: var(--text);
    margin-top: 4px;
}
.fd-jur-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Modale picker : liste des resultats */
.fd-jur-picker-list {
    background: var(--surface);
}
.fd-jur-picker-row:last-child { border-bottom: none !important; }

/* Modal bulk add : grille de lignes */
.bulk-proc-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 4px;
    background: var(--surface-2);
    border-radius: 6px;
}
.bulk-proc-line .crm-input {
    height: 32px;
    font-size: 13px;
}

/* =============================================================
   RECHERCHE UNIVERSELLE (Cmd+K / bouton Rechercher topbar)
   ============================================================= */
/*
 * Modale style "command palette" (Spotlight / Linear / Notion).
 * Overlay full-screen avec backdrop, panel centre en haut.
 * Avant 2026-05-04 : aucun CSS -> panel apparaissait en bas en flux
 * normal et decalait tout le layout (signale par Maxime).
 */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 10, 9, 0.45);
    z-index: 10050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    padding-left: 16px;
    padding-right: 16px;
    animation: searchOverlayFadeIn 0.12s ease;
}
@keyframes searchOverlayFadeIn {
    from { background: rgba(12, 10, 9, 0); }
    to { background: rgba(12, 10, 9, 0.45); }
}

.search-panel {
    background: var(--surface);
    width: 100%;
    max-width: 640px;
    border-radius: 12px;
    box-shadow: 0 20px 60px -12px rgba(12, 10, 9, 0.45),
                0 0 0 1px var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    animation: searchPanelSlideIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes searchPanelSlideIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.search-input-wrapper > span:first-child {
    color: var(--text-muted);
}
.search-overlay .search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--text);
    font-family: inherit;
    outline: none;
    padding: 0;
}
.search-overlay .search-input::placeholder {
    color: var(--text-subtle);
}
.search-input-wrapper > span:last-child {
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    color: var(--text-muted);
}

.search-results {
    overflow-y: auto;
    padding: 8px 0;
    flex: 1;
    min-height: 0;
}

.search-group-title {
    padding: 8px 18px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.search-result-item {
    padding: 9px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background 0.08s;
    border-left: 2px solid transparent;
}
.search-result-item:hover,
.search-result-item.active {
    background: var(--surface-2);
    border-left-color: var(--accent, #3498DB);
}
.search-result-item .result-main {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
}
.search-result-item .result-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.search-result-item mark {
    background: color-mix(in srgb, var(--accent, #3498DB) 25%, transparent);
    color: var(--text);
    padding: 0 1px;
    border-radius: 2px;
}

@media (max-width: 600px) {
    .search-overlay { padding-top: 6vh; }
    .search-panel { max-height: 85vh; }
    .search-input-wrapper > span:last-child { display: none; }
}


/* =============================================================
   MODALE INVITATION ATTENDEES (Maxime 2026-05-06)
   Liste de checkboxes pour inviter des collegues a un event Outlook
   ============================================================= */
.invite-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px;
    background: var(--surface);
}
.invite-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--t-fast);
}
.invite-row:hover {
    background: var(--surface-2);
}
.invite-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}


/* =============================================================
   DIALOGUES STYLES (crmConfirm / crmAlert / crmPrompt)
   Maxime 2026-05-05 : remplacent les confirm/alert/prompt natifs
   ============================================================= */
.crm-dialog-overlay {
    /* z-index plus eleve que les modales classiques pour pouvoir
       confirmer DEPUIS une modale (ex: confirm dans une modale
       d'edition) */
    z-index: 3000;
}
.crm-dialog {
    max-width: 460px;
    width: 100%;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: crmDialogSlideIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes crmDialogSlideIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.crm-dialog-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.crm-dialog-title {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
    flex: 1;
    margin: 0;
}
.crm-dialog-close {
    background: transparent;
    border: none;
    color: var(--text-subtle);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    line-height: 1;
    transition: background var(--t-fast), color var(--t-fast);
}
.crm-dialog-close:hover {
    background: var(--surface-2);
    color: var(--text);
}
.crm-dialog-body {
    padding: 18px;
    flex: 1;
    overflow-y: auto;
}
.crm-dialog-message {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    white-space: normal;
    word-wrap: break-word;
}
.crm-dialog-input {
    width: 100%;
    margin-top: 14px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.crm-dialog-input:focus {
    border-color: var(--text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent);
}
.crm-dialog-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.crm-dialog-footer button {
    min-width: 80px;
}
/* Variante danger (suppression) : header rouge subtle, OK rouge */
.crm-dialog-danger .crm-dialog-title::before {
    content: '⚠️ ';
    margin-right: 4px;
}


/* =============================================================
   LIBRARY BROWSER — Modeles / Clausier / Historique
   Maxime 2026-05-11 : composant unifie pour les 3 types de
   bibliotheque, cf frontend/library.js
   ============================================================= */

.library-browser {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: calc(100vh - 200px); /* prend la place dispo sous les onglets */
    min-height: 500px;
}

/* --- Top bar : bouton ajout + recherche --- */
.library-topbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}
.library-search {
    flex: 1;
    max-width: 480px;
}

/* --- Layout principal : tree (gauche) + list (droite) --- */
.library-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 14px;
    flex: 1;
    min-height: 0;
}

/* --- Tree panel (gauche) --- */
.library-tree-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.library-tree-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-subtle);
    padding: 4px 6px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.library-tree {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.library-tree-empty {
    padding: 12px 8px;
    color: var(--text-subtle);
    font-size: 13px;
    font-style: italic;
}
.library-tree-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: background var(--t-fast);
    color: var(--text);
    white-space: nowrap;
}
.library-tree-item:hover {
    background: var(--surface-2);
}
.library-tree-item.active {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent);
    font-weight: 500;
}
.library-tree-item.drop-hover {
    background: color-mix(in srgb, var(--accent) 20%, var(--surface));
    outline: 1px dashed var(--accent);
    outline-offset: -1px;
}
.library-tree-item.dragging {
    opacity: 0.5;
}
.library-tree-caret {
    width: 14px;
    text-align: center;
    color: var(--text-subtle);
    font-size: 10px;
    flex-shrink: 0;
}
.library-tree-caret.empty {
    color: transparent;
}
.library-tree-icon {
    font-size: 14px;
    flex-shrink: 0;
}
.library-tree-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.library-tree-count {
    background: var(--surface-2);
    color: var(--text-subtle);
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 8px;
    flex-shrink: 0;
}
.library-tree-item.active .library-tree-count {
    background: var(--accent);
    color: white;
}
.library-tree-all {
    font-weight: 500;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 6px;
}
.library-add-cat {
    margin-top: auto;
    align-self: stretch;
    justify-content: center;
    font-size: 12px;
}

/* Bouton "+" rapide pour ajouter une sous-categorie (visible au hover) */
.library-tree-add-sub {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--text-subtle);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    border-radius: 3px;
    padding: 0;
    opacity: 0;
    transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
    font-family: inherit;
}
.library-tree-item:hover .library-tree-add-sub {
    opacity: 1;
}
.library-tree-add-sub:hover {
    background: color-mix(in srgb, var(--accent) 15%, var(--surface));
    color: var(--accent);
}

/* Astuce UX discrete sous l'arbre */
.library-tree-hint {
    font-size: 11px;
    color: var(--text-subtle);
    padding: 8px 4px 4px;
    line-height: 1.4;
    font-style: italic;
}

/* --- List panel (droite) --- */
.library-list-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.library-list-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--surface-2);
    position: sticky;
    top: 0;
    z-index: 1;
}
.library-list-breadcrumb {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.library-list-count {
    font-size: 12px;
    color: var(--text-subtle);
}
.library-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-subtle);
    font-size: 13px;
}
.library-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px;
}

/* --- Card item --- */
.library-card {
    padding: 12px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--t-fast);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 4px 12px;
    align-items: start;
}
.library-card:hover {
    background: var(--surface-2);
}
.library-card.dragging {
    opacity: 0.5;
}
.library-card-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    grid-column: 1;
    grid-row: 1;
}
.library-card-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    grid-column: 1;
    grid-row: 2;
    line-height: 1.4;
}
.library-card-meta {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--text-subtle);
}
.library-card-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.library-card-tag {
    background: var(--surface-3);
    color: var(--text-muted);
    padding: 1px 8px;
    border-radius: 8px;
    font-size: 11px;
}
.library-card-cat {
    color: var(--text-subtle);
}
.library-card-date {
    margin-left: auto;
}
.library-card-actions {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: flex;
    gap: 4px;
    align-self: center;
    opacity: 0;
    transition: opacity var(--t-fast);
}
.library-card:hover .library-card-actions {
    opacity: 1;
}
.library-card-actions button {
    padding: 4px 8px;
    font-size: 12px;
}

/* --- Context menu (clic droit sur categorie) --- */
.library-context-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--shadow-md);
    padding: 4px;
    z-index: 9999;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.library-context-menu button {
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
}
.library-context-menu button:hover {
    background: var(--surface-2);
}
.library-context-menu button.danger {
    color: #b91c1c;
}
.library-context-menu button.danger:hover {
    background: color-mix(in srgb, #b91c1c 10%, var(--surface));
}

/* --- Modale d'ajout/edition item --- */
.library-item-modal {
    width: 600px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.library-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.library-modal-header h3 {
    margin: 0;
    font-size: 16px;
}
.library-modal-body {
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.library-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.library-modal-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}
.library-modal-textarea {
    resize: vertical;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    min-height: 100px;
}
.library-modal-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* Champ URL + bouton "Parcourir" cote a cote */
.library-sp-url-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.library-sp-url-row .crm-input {
    flex: 1;
    min-width: 0;
}
.library-sp-browse-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Statut de resolution URL SharePoint (Phase 2f) */
.library-sp-resolve-status {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1.4;
}
.library-sp-resolve-status:empty {
    display: none;
}
.library-sp-resolve-status.pending {
    color: var(--text-muted);
    background: var(--surface-2);
}
.library-sp-resolve-status.ok {
    color: #166534;
    background: color-mix(in srgb, #22c55e 12%, var(--surface));
}
.library-sp-resolve-status.error {
    color: #b45309;
    background: color-mix(in srgb, #f59e0b 12%, var(--surface));
}

/* =============================================================
   LIBRARY PREVIEW MODAL (Phase 8 — viewer Office Online via Graph /preview)
   ============================================================= */
.lib-preview-modal {
    width: 95vw;
    max-width: 1200px;
    height: 90vh;
    max-height: 900px;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.lib-preview-header {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    background: var(--surface);
}
.lib-preview-title {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.lib-preview-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.lib-preview-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface-2);
    position: relative;
}
.lib-preview-loader,
.lib-preview-error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    flex: 1;
}
.lib-preview-error {
    color: #b45309;
    line-height: 1.6;
}
.lib-preview-iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    background: white;
}


/* =============================================================
   SHAREPOINT FILE PICKER MODAL (Phase 7)
   ============================================================= */
.sp-picker-modal {
    width: 720px;
    max-width: 95vw;
    height: 75vh;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.sp-picker-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.sp-picker-header h3 {
    margin: 0;
    font-size: 16px;
}
.sp-picker-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 12px 16px 16px;
}
.sp-picker-tabs {
    display: flex;
    gap: 2px;
    background: var(--surface-2);
    padding: 3px;
    border-radius: 6px;
    width: fit-content;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.sp-picker-tab {
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12.5px;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.sp-picker-tab:hover:not(.active) { color: var(--text); }
.sp-picker-tab.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.sp-picker-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.sp-picker-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
    font-size: 13px;
    padding: 8px 6px;
    margin-bottom: 8px;
    background: var(--surface-2);
    border-radius: 4px;
    flex-shrink: 0;
}
.sp-picker-crumb {
    color: var(--accent);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
}
.sp-picker-crumb:hover {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.sp-picker-crumb-sep {
    color: var(--text-subtle);
    padding: 0 2px;
}
/* Filtre local sous la breadcrumb dans l'onglet Parcourir */
.sp-picker-filter {
    margin-bottom: 8px;
    width: 100%;
}

.sp-picker-folder-selected {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    border-radius: 6px;
    margin-bottom: 10px;
    gap: 12px;
    flex-shrink: 0;
}
.sp-picker-list {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}
.sp-picker-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-subtle);
    font-size: 13px;
}
.sp-picker-empty.error {
    color: #b45309;
}
.sp-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    transition: background var(--t-fast);
}
.sp-picker-row:last-child {
    border-bottom: none;
}
.sp-picker-row:hover {
    background: var(--surface-2);
}
.sp-picker-row.is-folder .sp-picker-name {
    font-weight: 500;
}
.sp-picker-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.sp-picker-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.sp-picker-meta {
    display: flex;
    gap: 10px;
    color: var(--text-subtle);
    font-size: 11.5px;
    flex-shrink: 0;
}
.sp-picker-select-btn {
    opacity: 0;
    transition: opacity var(--t-fast);
    flex-shrink: 0;
}
.sp-picker-row:hover .sp-picker-select-btn {
    opacity: 1;
}


/* Bouton "Ajouter a l'historique" sur les lignes de l'explorateur SP.
   Maxime 2026-05-11 : position absolute pour ne pas reserver d'espace
   dans la grille de la ligne (avant : trou visible meme avec opacity 0).
   Apparait au hover en se superposant a la zone meta (date/taille). */
.sp-explorer-item {
    position: relative;
}
.sp-explorer-item .sp-add-to-library {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 11.5px;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast), background var(--t-fast), border-color var(--t-fast);
    font-family: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    z-index: 2;
    white-space: nowrap;
}
.sp-explorer-item:hover .sp-add-to-library {
    opacity: 1;
    pointer-events: auto;
}
.sp-explorer-item:hover .sp-item-meta {
    /* Masquer la meta (taille/date) au hover pour eviter le chevauchement
       avec le bouton. visibility (et pas display:none) conserve la place
       reservee dans la grille -> pas de saut layout. */
    visibility: hidden;
}
.sp-explorer-item .sp-add-to-library:hover {
    background: var(--surface-2);
    color: var(--accent);
    border-color: var(--accent);
}
.sp-explorer-item.dragging {
    opacity: 0.5;
}