/* public/css/crm.css — Module CRM (v1.97.0 S5.2.a).
 *
 * Extrait depuis _crmInjectStyles() de public/app-crm.js (2725 LOC de CSS
 * embedded en template literal JS). Avant ce sprint : illisible, non-cachable
 * séparément, surchargeait le bundle JS de 30 %.
 *
 * Inclus en <link rel="stylesheet"> via public/partials/scripts.html, AVANT
 * le chargement de app-crm.js (defer). Pour éditer le style CRM : éditer ce
 * fichier directement — pas de build.
 */

    /* ============ Reset full-width tab-crm ============ */
    #tab-crm { padding: 0 !important; background: #1a1c28 !important; color: #e8e9f0; }
    #tab-crm.app { max-width: none !important; }
    #tab-crm-content { width: 100% !important; height: 100% !important; max-width: none !important; }

    /* ============ Shell ============ */
    .crm-shell {
      display: flex; flex-direction: column;
      width: 100%; height: calc(100vh - 56px);
      background: #1a1c28; color: #e8e9f0;
      font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
      letter-spacing: -0.01em;
    }

    /* ============ Topbar ============ */
    .crm-topbar {
      display: flex; align-items: center; gap: 20px;
      padding: 14px 28px;
      background: #1a1c28;
      border-bottom: 1px solid #1a1c28;
    }
    .crm-topbar-left { display: flex; align-items: baseline; gap: 14px; flex-shrink: 0; }
    .crm-title { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
    .crm-subtitle { font-size: 12px; color: #6a6d85; }
    .crm-topbar-search { flex: 1; max-width: 520px; position: relative; }
    .crm-topbar-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #6a6d85; pointer-events: none; }
    .crm-topbar-search input {
      width: 100%; padding: 10px 14px 10px 38px;
      background: #272a3a; border: 1px solid #3a3e4f;
      border-radius: 9px; color: #e8e9f0; font-size: 13px;
      font-family: inherit; outline: none;
      transition: border-color 0.15s, background 0.15s;
    }
    .crm-topbar-search input:focus {
      border-color: #f04d12;
      background: #23263a;
      box-shadow: 0 0 0 3px rgba(240,77,18,0.12);
    }
    .crm-topbar-search input::placeholder { color: #5a5d75; }
    .crm-topbar-right { display: flex; gap: 8px; flex-shrink: 0; }
    .crm-btn-primary {
      padding: 10px 18px; background: #22c55e; color: #fff;
      border: none; border-radius: 8px; cursor: pointer;
      font-weight: 700; font-size: 13px; font-family: inherit;
      transition: background 0.15s, transform 0.1s;
      box-shadow: 0 2px 8px rgba(34,197,94,0.25);
    }
    .crm-btn-primary:hover { background: #16a34a; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(34,197,94,0.3); }
    .crm-btn-primary:active { transform: translateY(0); }
    .crm-btn-ghost {
      padding: 9px 13px; background: transparent; color: #c8cae0;
      border: 1px solid #3a3e4f; border-radius: 8px; cursor: pointer;
      font-size: 14px; font-family: inherit; transition: all 0.15s;
    }
    .crm-btn-ghost:hover { background: #272a3a; border-color: #2a2c3e; color: #fff; }

    /* ============ Sync pill ============ */
    .crm-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border-radius: 12px;
      font-size: 11px; font-weight: 600;
    }
    .crm-pill-running { background: #1a2540; color: #7da7ff; box-shadow: inset 0 0 0 1px #2a3a5a; }
    .crm-pill-ok { background: #0f2e20; color: #4ade80; box-shadow: inset 0 0 0 1px #1d4d35; }
    .crm-pill-warn { background: #2e240f; color: #fbbf24; box-shadow: inset 0 0 0 1px #4d3d15; }
    .crm-pill-err { background: #2e1212; color: #f87171; box-shadow: inset 0 0 0 1px #4d1f1f; }
    .crm-pill-neutral { background: #272a3a; color: #6a6d85; }

    /* ============ Subnav ============ */
    .crm-subnav {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 28px;
      background: #1a1c28;
      border-bottom: 1px solid #1a1c28;
      gap: 20px;
    }
    .crm-pipeline-selector { display: flex; align-items: center; gap: 14px; }
    .crm-pipeline-trigger {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 9px 14px;
      background: #272a3a; color: #fff;
      border: 1px solid #3a3e4f; border-radius: 9px;
      cursor: pointer; font-size: 14px; font-weight: 700;
      font-family: inherit; letter-spacing: -0.01em;
      transition: background 0.15s, border-color 0.15s;
    }
    .crm-pipeline-trigger:hover { background: #23263a; border-color: #2a2c3e; }
    .crm-pipeline-trigger svg { flex-shrink: 0; }
    .crm-pipeline-trigger span { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ============ Pipeline dropdown menu ============ */
    .crm-pipeline-menu {
      position: fixed;
      background: #272a3a;
      border: 1px solid #2a2c3e;
      border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02);
      max-height: 70vh;
      max-width: 380px;
      display: flex; flex-direction: column;
      z-index: 9998;
      overflow: hidden;
    }
    .crm-pipeline-menu-search-wrap {
      position: relative;
      padding: 10px;
      border-bottom: 1px solid #3a3e4f;
      flex-shrink: 0;
    }
    .crm-pipeline-menu-search-wrap svg {
      position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
      color: #8b8ea5; pointer-events: none;
    }
    .crm-pipeline-menu-search-wrap input {
      width: 100%;
      padding: 9px 12px 9px 36px;
      background: #0f1019; color: #e8e9f0;
      border: 1px solid #3a3e4f; border-radius: 8px;
      font-size: 13px; font-family: inherit; outline: none;
      transition: border-color 0.15s;
    }
    .crm-pipeline-menu-search-wrap input:focus { border-color: #f04d12; box-shadow: 0 0 0 2px rgba(240,77,18,0.12); }
    .crm-pipeline-menu-search-wrap input::placeholder { color: #5a5d75; }
    .crm-pipeline-menu-list {
      overflow-y: auto;
      padding: 6px;
    }
    .crm-pipeline-menu-list::-webkit-scrollbar { width: 8px; }
    .crm-pipeline-menu-list::-webkit-scrollbar-track { background: transparent; }
    .crm-pipeline-menu-list::-webkit-scrollbar-thumb { background: #272a3a; border-radius: 4px; }
    .crm-pipeline-menu-list::-webkit-scrollbar-thumb:hover { background: #2a2c3e; }
    .crm-pipeline-item {
      display: flex; align-items: center; gap: 10px;
      width: 100%;
      padding: 9px 12px;
      background: transparent;
      border: none; border-radius: 7px;
      cursor: pointer;
      font-size: 13px; font-family: inherit;
      color: #c8cae0; text-align: left;
      transition: background 0.1s, color 0.1s;
    }
    .crm-pipeline-item:hover { background: #272a3a; color: #fff; }
    .crm-pipeline-item-active { color: #fff; }
    .crm-pipeline-item-active:hover { background: #272a3a; }
    .crm-pipeline-item-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .crm-pipeline-item-check { color: #f04d12; flex-shrink: 0; }
    .crm-pipeline-menu-empty {
      padding: 18px 12px; text-align: center;
      font-size: 12px; color: #6a6d85;
    }

    .crm-filters { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
    /* v1.64.26 — Button group style Pipedrive (cf dump Maxime 2026-05-14 :
       .cui5-button-group avec border 1px solid var(--pd-color-divider-strong),
       border-radius 0 au milieu, arrondi aux extrémités via first/last child,
       hauteur fixe var(--pd-size-400). Style segmented, pas pillule.
       Appliqué à .crm-status-pills, .crm-view-toggle, et toute classe
       .crm-btn-group ajoutée plus tard. */
    .crm-status-pills,
    .crm-view-toggle,
    .crm-btn-group {
      display: inline-flex;
      background: transparent;
      border-radius: 6px;
      padding: 0;
      box-shadow: none;
      overflow: visible;
      flex-shrink: 0;
    }
    .crm-status-pill,
    .crm-view-toggle button,
    .crm-btn-group > button,
    .crm-btn-group > a {
      height: 32px;
      padding: 0 14px;
      background: #272a3a;
      border: 1px solid #3a3e4f;
      border-right-width: 0;
      border-radius: 0;
      color: #8b8ea5;
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-sizing: border-box;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .crm-status-pill:first-child,
    .crm-view-toggle button:first-child,
    .crm-btn-group > *:first-child {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
    }
    .crm-status-pill:last-child,
    .crm-view-toggle button:last-child,
    .crm-btn-group > *:last-child {
      border-right-width: 1px;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
    }
    .crm-status-pill:hover,
    .crm-view-toggle button:hover,
    .crm-btn-group > *:hover {
      background: #2d3144;
      color: #e8eaf6;
      border-color: #4a4e63;
    }
    /* État actif : background plus sombre (effet "enfoncé") + accent zebdev orange
       sur la bordure pour ressortir, + z-index pour passer au-dessus du voisin */
    .crm-status-pill-active,
    .crm-view-toggle .crm-view-active,
    .crm-btn-group > .crm-btn-group-active {
      background: #1a1d2e;
      color: #fff;
      border-color: #f04d12;
      position: relative;
      z-index: 1;
    }
    .crm-view-toggle button { padding: 0 11px; }  /* boutons icône-only un peu + étroits */
    .crm-status-open.crm-status-pill-active   { color: #7da7ff; border-color: #4f7cff; }
    .crm-status-won.crm-status-pill-active    { color: #4ade80; border-color: #22c55e; }
    .crm-status-lost.crm-status-pill-active   { color: #f87171; border-color: #ef4444; }
    .crm-select {
      padding: 0 12px;
      height: 32px;
      background: #272a3a; color: #e8e9f0;
      border: 1px solid #3a3e4f; border-radius: 6px;
      font-size: 12px; font-family: inherit; outline: none;
      cursor: pointer; transition: border-color 0.15s;
    }
    .crm-select:hover { border-color: #4a4e63; }
    .crm-select:focus { border-color: #f04d12; }
    .crm-stats {
      font-size: 12px; color: #6a6d85; font-weight: 600;
    }
    #crm-view { flex: 1; overflow: hidden; background: #1a1c28; display: flex; transition: padding-right 0.25s cubic-bezier(0.16,1,0.3,1); }
    /* v1.50.5 — Quand le slide-in panel est ouvert (mais pas en fullscreen),
       le Kanban se réduit pour ne pas être masqué par le panel. Padding-right
       égal à la largeur du panel. Le scroll horizontal du kanban prend le
       relais si toutes les colonnes ne tiennent plus dans la zone visible. */
    .crm-shell.crm-shell-with-panel:not(.crm-shell-fullscreen) #crm-view {
      padding-right: clamp(800px, 75vw, 1800px);
    }
    .crm-empty { padding: 80px 24px; text-align: center; color: #6a6d85; flex: 1; align-self: center; width: 100%; }
    .crm-empty-icon { font-size: 56px; margin-bottom: 16px; opacity: 0.4; }

    /* ============ Kanban — full width adaptatif (v1.49.16) ============ */
    /* Règle : ≤ 7 stages → colonnes flex équitables, occupent tout l'espace.
       > 7 stages → largeur fixe = 1/7 du dispo, scroll horizontal apparaît. */
    .crm-kanban {
      display: flex; gap: 16px;
      padding: 20px 28px 28px;
      width: 100%; height: 100%;
      overflow-x: auto; overflow-y: hidden;
      align-items: stretch;
    }
    /* Mode normal : ≤ 7 colonnes, partage équitable de l'espace.
       v1.50.4 — pas de max-width : sur écran large les colonnes occupent
       VRAIMENT toute la largeur disponible. */
    .crm-kanban:not(.crm-kanban-overflow) > .crm-col {
      flex: 1 1 0;
      min-width: 240px;
      max-width: none;
    }
    /* v1.50.6 — Quand le panel slide-in est ouvert, les colonnes restent
       en flex équitable (s'élargissent si la place le permet) avec un
       min-width de 280px. Le scroll horizontal du kanban prend le relais
       UNIQUEMENT si l'espace restant à gauche du panel ne suffit plus.
       Sur grand écran (≥ 1920px) avec ≤7 cols, les cols restent étendues. */
    .crm-shell.crm-shell-with-panel:not(.crm-shell-fullscreen) .crm-kanban > .crm-col {
      flex: 1 1 0;
      min-width: 280px;
      max-width: none;
    }
    /* Mode overflow : > 7 colonnes, largeur fixe pour en voir 7 + scroll */
    .crm-kanban-overflow > .crm-col {
      flex: 0 0 calc((100% - 96px) / 7); /* 6 gaps × 16px = 96px */
      min-width: 240px;
      max-width: none;
    }
    .crm-col {
      display: flex; flex-direction: column;
      background: #13141f;            /* v1.49.8 : fond colonne plus sombre que le global pour ressortir */
      border-radius: 12px;
      transition: background 0.15s;
      /* v1.50.165 : overflow:visible pour que les pointes de chevron du header
         puissent dépasser à droite et s'imbriquer avec la colonne suivante. */
    }
    .crm-col-drop-target {
      background: rgba(240,77,18,0.10) !important;
      box-shadow: 0 0 0 2px rgba(240,77,18,0.4) inset;
    }
    /* v1.50.165 → v1.64.28 — Effet "chevron" style Pipedrive natif (3e refonte).
       Demande Maxime 2026-05-14 :
         1) Header MÊME COULEUR que la col body (pas plus clair, fondu uniforme)
         2) Angle des chevrons BCP plus doux (triangle aplati horizontalement)
         3) Triangle EN MOINS à gauche (creux) + triangle EN PLUS à droite (pointe)
            = effet FLÈCHE, sauf la dernière col qui reste droite.
       ATTENTION : ces commentaires CSS sont DANS un template literal JS.
       AUCUN backtick autorisé dans le commentaire (cf récidive v1.64.25 / 26). */
    /* v1.71.56 — border-radius: 0 par défaut. L'arrondi 8px exposait ~8px de
       fond shell au sommet/base des chevrons (point où les triangles se
       réduisent à un point invisible) → fine ligne blanche aux 4 coins du
       header, plus marquée en light. L'arrondi est ré-appliqué uniquement
       sur 1ère col à gauche + dernière col à droite (cf :first/:last-child). */
    .crm-col-header {
      position: relative;
      height: 56px;
      padding: 0 14px 0 16px;          /* padding gauche un peu + grand pour éviter morsure */
      background: #13141f;            /* = MEME couleur que .crm-col body */
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      border-radius: 0;
      overflow: visible;
      transition: box-shadow 0.15s ease;
    }
    /* v1.64.31 — Ombre portée CONDITIONNELLE : apparaît uniquement quand la
       colonne défile (scrollTop > 4) — donne l'effet "le header flotte au-dessus
       des cards qui passent dessous". Ajouté par un scroll listener sur
       .crm-col-body (cf _crmAttachScrollShadow). */
    .crm-col-header.crm-col-header-scrolled {
      box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.45);
    }
    /* Pointe droite (effet flèche) : triangle TRÈS PETIT pour effet discret comme
       Pipedrive natif. 10px de profondeur (vs 36→16→10 itérations Maxime).
       v1.71.56 (revert) — Retour à 10px (pas 14). Le gap visible au milieu
       vertical entre pointe sortante et creux entrant est VOULU (réf. Pipedrive
       natif : les chevrons ne se touchent jamais, chaque chevron est rattaché
       à sa propre colonne et un espace inter-col est visible). */
    /* v1.71.56 — border-left passé de 10 à 11px → chevauche 1px dans le parent
       (base du triangle à parent.right - 1px au lieu de parent.right exactement).
       La pointe sort toujours de 10px (right: -10 inchangé). Supprime la fine
       ligne verticale d'anti-aliasing à la jonction parent↔pseudo. */
    .crm-col-header::after {
      content: "";
      position: absolute;
      right: -10px;
      top: 0;
      width: 0;
      height: 0;
      border-top: 28px solid transparent;
      border-bottom: 28px solid transparent;
      border-left: 11px solid #13141f;   /* = couleur col, +1px chevauchement */
      z-index: 2;
    }
    /* Creux gauche : triangle couleur fond Kanban (illusion de morsure). */
    .crm-col-header::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      border-top: 28px solid transparent;
      border-bottom: 28px solid transparent;
      border-left: 10px solid #1a1c28;   /* = couleur fond Kanban */
      z-index: 1;
    }
    /* Première col : pas de creux gauche (bord propre, début de pipeline)
       v1.71.56 — Arrondi 8px ré-appliqué côté gauche uniquement */
    .crm-kanban > .crm-col:first-child .crm-col-header {
      padding-left: 14px;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }
    .crm-kanban > .crm-col:first-child .crm-col-header::before { display: none; }
    /* Dernière col : pas de pointe à droite (terminal propre style "Win")
       v1.71.56 — Arrondi 8px ré-appliqué côté droit uniquement */
    .crm-kanban > .crm-col:last-child .crm-col-header {
      padding-right: 14px;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }
    .crm-kanban > .crm-col:last-child .crm-col-header::after { display: none; }
    /* Gap réduit + overflow visible pour laisser les pseudo-éléments déborder */
    .crm-kanban { gap: 4px; }
    .crm-col { overflow: visible; }
    /* v1.71.56 — Nom forcé sur 1 ligne avec ellipsis pour garantir que le header
       reste à 56px de hauteur (= alignement parfait avec triangles 28+28).
       Sinon un stage avec un nom long ferait wrap sur 2 lignes et le triangle
       resterait à 56px → décalage chevron. */
    .crm-col-name {
      font-size: 16px; font-weight: 700; color: #fff;
      letter-spacing: -0.01em; margin-bottom: 4px;
      display: block;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      min-width: 0; flex: 1 1 auto;
    }
    .crm-col-sum {
      font-size: 12px; color: #6a6d85; font-weight: 500;
    }
    .crm-col-body {
      padding: 6px 8px 16px;
      flex: 1; overflow-y: auto;
      display: flex; flex-direction: column; gap: 8px;
      min-height: 100px;
    }
    .crm-col-body::-webkit-scrollbar { width: 8px; }
    .crm-col-body::-webkit-scrollbar-track { background: transparent; }
    .crm-col-body::-webkit-scrollbar-thumb { background: #272a3a; border-radius: 4px; }
    .crm-col-body::-webkit-scrollbar-thumb:hover { background: #2a2c3e; }
    .crm-col-empty {
      padding: 24px 12px; text-align: center;
      font-size: 12px; color: #4a4d65;
    }

    /* ============ Cards (sans border, comme Pipedrive) ============ */
    .crm-card {
      position: relative;
      display: flex; align-items: stretch;
      flex-shrink: 0;                /* v1.48.10 : ne PAS shrink dans flex-col */
      background: #272a3a;
      border: none;
      border-radius: 10px;
      cursor: grab;
      transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    }
    .crm-card:hover {
      background: #23263a;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5);
      transform: translateY(-1px);
    }
    .crm-card-rotten {
      background: #2a1416 !important;
    }
    .crm-card-rotten:hover {
      background: #32181a !important;
      box-shadow: 0 4px 20px rgba(180,40,40,0.25) !important;
    }
    .crm-card-dragging { opacity: 0.4; cursor: grabbing; }
    .crm-card-body {
      flex: 1; padding: 14px 14px 12px; min-width: 0;
    }
    .crm-card-title {
      font-size: 14px; font-weight: 600; color: #fff;
      line-height: 1.35; margin-bottom: 6px;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden; letter-spacing: -0.01em;
    }
    .crm-card-org {
      font-size: 12px; color: #8b8ea5;
      margin-bottom: 12px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .crm-card-rotten .crm-card-org { color: #b88a8a; }
    .crm-card-footer {
      display: flex; align-items: center; gap: 8px;
    }
    .crm-card-value {
      font-size: 12px; font-weight: 600; color: #c8cae0;
      margin-left: auto;
    }
    .crm-card-rotten .crm-card-value { color: #f0c8c8; }
    .crm-age-badge {
      display: inline-flex; align-items: center;
      padding: 2px 8px; border-radius: 4px;
      font-size: 11px; font-weight: 700;
      letter-spacing: 0;
    }
    .crm-age-normal { background: #272a3a; color: #8b8ea5; }
    .crm-age-rotten { background: #6f2528; color: #ff7a6e; }
    .crm-card-avatar {
      display: inline-flex; align-items: center; justify-content: center;
      width: 24px; height: 24px;
      border-radius: 50%; color: #fff;
      font-size: 10px; font-weight: 700;
      flex-shrink: 0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    }
    .crm-card-avatar-empty { background: #2a2c3e !important; color: #6a6d85; font-size: 12px; }
    /* v1.50.161 — Chevron devenue <button> pour popover activité PD-style.
       v1.50.163 fix : reset des styles browser par défaut du <button>
       (background blanc, border, padding par défaut) qui faisaient ressortir
       une grosse tuile claire au lieu d'une icône intégrée discrète. */
    .crm-card-chevron {
      display: flex; align-items: center; justify-content: center;
      padding: 0 12px;
      flex-shrink: 0;
      opacity: 0.7;
      transition: opacity 0.15s, background 0.1s;
      background: transparent;
      border: none;
      cursor: pointer;
      font: inherit;
    }
    .crm-card-chevron:hover {
      background: rgba(255,255,255,0.05);
      border-radius: 6px;
    }
    .crm-card-chevron:focus { outline: none; }
    .crm-card-chevron:focus-visible { outline: 2px solid #4f7cff; outline-offset: 2px; border-radius: 6px; }
    .crm-card:hover .crm-card-chevron { opacity: 1; }

    /* ============ Liste ============ */
    .crm-list-wrap {
      padding: 20px 28px;
      width: 100%; height: 100%;
      overflow: auto;
    }
    .crm-list-table {
      width: 100%; border-collapse: collapse;
      background: #272a3a; border: 1px solid #3a3e4f;
      border-radius: 10px; overflow: hidden;
    }
    .crm-list-table thead tr { background: #23263a; }
    .crm-list-table th {
      padding: 12px 16px; text-align: left;
      font-size: 11px; color: #6a6d85;
      text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
      border-bottom: 1px solid #3a3e4f;
    }
    .crm-list-table th.crm-list-money, .crm-list-table td.crm-list-money { text-align: right; }
    .crm-list-table tbody tr {
      border-bottom: 1px solid #1a1c28;
      cursor: pointer; transition: background 0.15s;
    }
    .crm-list-table tbody tr:hover { background: #23263a; }
    .crm-list-table tbody tr:last-child { border-bottom: none; }
    .crm-list-table td {
      padding: 12px 16px; font-size: 13px; color: #c8cae0;
    }
    .crm-list-title { font-weight: 600; color: #fff !important; }
    .crm-list-money { color: #fff !important; font-weight: 700; }
    .crm-list-age { color: #6a6d85 !important; font-size: 11px; }

    /* ============ Modale ============ */
    .crm-modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.7);
      backdrop-filter: blur(4px);
      z-index: 9999;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
    }
    .crm-modal {
      background: #0f1019; border: 1px solid #3a3e4f;
      border-radius: 14px; max-width: 920px; width: 100%;
      max-height: 85vh; overflow: auto;
      box-shadow: 0 30px 80px rgba(0,0,0,0.6);
      color: #e8e9f0;
    }
    .crm-modal-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 24px; border-bottom: 1px solid #3a3e4f;
    }
    .crm-modal-title { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
    .crm-modal-body { padding: 24px; }
    .crm-sync-banner {
      padding: 16px; border-radius: 10px; margin-bottom: 20px;
      border: 1px solid;
    }
    .crm-sync-banner-title { font-weight: 700; color: #fff; }
    .crm-sync-banner-sub { font-size: 12px; color: #8b8ea5; margin-top: 4px; }
    .crm-sync-banner-msg { font-size: 11px; color: #fbbf24; margin-top: 6px; font-family: 'JetBrains Mono', monospace; }
    .crm-sync-running { background: #1a2540; border-color: #2d4070; }
    .crm-sync-ok { background: #0f2e20; border-color: #1d5a3d; }
    .crm-sync-warn { background: #2e240f; border-color: #5a4715; }
    .crm-sync-err { background: #2e1212; border-color: #5a1f1f; }
    /* v1.50.174 — Modal visionneuse fichier (PDF/image) — pleine largeur, sombre */
    .crm-file-preview-overlay {
      align-items: stretch;
      padding: 24px;
    }
    .crm-file-preview-modal {
      max-width: 1100px !important;
      width: 100%;
      max-height: calc(100vh - 48px);
      display: flex;
      flex-direction: column;
      background: #14161e;
    }
    .crm-file-preview-modal .crm-modal-header {
      flex-shrink: 0;
    }
    .crm-file-preview-body {
      flex: 1;
      min-height: 0;
      display: flex;
      background: #0f1118;
      border-radius: 0 0 8px 8px;
      overflow: hidden;
    }
    .crm-file-preview-iframe {
      flex: 1;
      width: 100%;
      height: 100%;
      min-height: 70vh;
      border: none;
      background: #fff;  /* fond blanc pour PDF lisible */
    }
    .crm-file-preview-img-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      overflow: auto;
    }
    .crm-file-preview-img {
      max-width: 100%;
      max-height: 80vh;
      object-fit: contain;
      border-radius: 4px;
    }

    /* v1.50.165 — Popover « next activity » qui s'ouvre depuis la chevron d'une
       card kanban. Style PD natif : carte sombre + ombre + bouton CTA en bas. */
    .crm-act-popover {
      position: fixed;
      width: 320px;
      max-width: calc(100vw - 16px);
      background: #1a1d2e;
      border: 1px solid #3a3e4f;
      border-radius: 10px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.5);
      padding: 14px 16px;
      z-index: 200;
      color: #e8eaf6;
      font-size: 13px;
      animation: crmActPopFadeIn 0.12s ease-out;
    }
    @keyframes crmActPopFadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .crm-act-pop-row {
      display: flex; gap: 10px; align-items: flex-start;
      margin-bottom: 8px;
    }
    .crm-act-pop-check {
      width: 16px; height: 16px;
      border: 2px solid #4a4e60;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .crm-act-pop-main { flex: 1; min-width: 0; }
    .crm-act-pop-subject {
      font-size: 14px; font-weight: 600; color: #fff;
      margin-bottom: 2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .crm-act-pop-status {
      font-size: 11px; font-weight: 600;
    }
    .crm-act-pop-note {
      font-size: 12px; color: #c8cae0;
      background: #272a3a;
      border-radius: 6px;
      padding: 8px 10px;
      margin-bottom: 10px;
      max-height: 80px;
      overflow-y: auto;
    }
    .crm-act-pop-empty {
      padding: 6px 0 10px;
      font-size: 13px; color: #8b8ea5;
    }
    .crm-act-pop-cta {
      width: 100%;
      display: flex; align-items: center; justify-content: center; gap: 6px;
      padding: 10px 12px;
      background: transparent;
      color: #4f7cff;
      border: 1px dashed #3a3e4f;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px; font-weight: 600;
      transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
    }
    .crm-act-pop-cta:hover {
      background: rgba(79,124,255,0.10);
      border-color: rgba(79,124,255,0.5);
      border-style: solid;
    }

    /* v1.50.162 — Boutons d'action dans la modal sync (sync complet + rapatriement files) */
    .crm-sync-actions {
      display: flex; gap: 10px; flex-wrap: wrap;
      margin: 8px 0 18px;
    }
    .crm-sync-actions .crm-btn-primary,
    .crm-sync-actions .crm-btn-ghost {
      font-size: 13px;
      padding: 9px 14px;
    }
    .crm-sync-section-title {
      font-size: 11px; font-weight: 700; color: #6a6d85;
      text-transform: uppercase; letter-spacing: 0.08em;
      margin: 18px 0 10px;
    }
    .crm-counts-grid {
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
      margin-bottom: 20px;
    }
    .crm-count-tile {
      background: #272a3a; border: 1px solid #3a3e4f;
      border-radius: 8px; padding: 12px;
      text-align: center;
      transition: transform 0.1s, border-color 0.15s;
    }
    .crm-count-tile:hover { border-color: #2a2c3e; transform: translateY(-1px); }
    .crm-count-num { font-size: 20px; font-weight: 700; color: #fff; }
    .crm-count-lbl { font-size: 11px; color: #8b8ea5; margin-top: 3px; }
    .crm-sync-msg {
      font-family: 'JetBrains Mono', monospace;
      max-width: 280px; overflow: hidden;
      text-overflow: ellipsis; white-space: nowrap;
      color: #fbbf24; font-size: 11px;
    }

    /* ============ Detail panel (Phase 1c) ============ */
    /* v1.50.5 — Panel élargi à clamp(800px, 75vw, 1800px). Le shell ajoute un
       padding-right équivalent au #crm-view quand panel ouvert (classe
       .crm-shell-with-panel) → le Kanban se contente de la zone visible
       à gauche du panel et scrolle horizontalement si plus de colonnes. */
    .crm-detail-panel {
      position: fixed;
      top: 56px;        /* v1.50.9 — sous la topbar zebdev (hauteur ~56px) */
      right: 0; bottom: 0;
      width: clamp(800px, 75vw, 1800px); max-width: 100vw;
      background: #0f1019;
      border-left: 1px solid #3a3e4f;
      box-shadow: -20px 0 60px rgba(0,0,0,0.6);
      z-index: 9990;
      display: flex; flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      color: #e8e9f0;
      font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    }
    .crm-detail-panel.crm-detail-open { transform: translateX(0); }
    /* v1.49.6 — mode fullscreen : panel 100vw avec sidebar interne */
    .crm-detail-panel.crm-detail-fullscreen {
      width: 100vw; max-width: none;
      box-shadow: none;
      border-left: none;
    }
    .crm-detail-content {
      flex: 1; display: flex; flex-direction: column;
      overflow: hidden;
    }
    /* Layout grid en fullscreen : sidebar gauche 340px + main flex */
    .crm-detail-grid {
      flex: 1;
      display: grid;
      /* v1.50.9 — sidebar adaptative : 320-380px selon largeur du panel */
      grid-template-columns: clamp(280px, 28%, 380px) 1fr;
      overflow: hidden;
      min-height: 0;
    }
    .crm-detail-sidebar {
      overflow-y: auto;
      padding: 20px;
      background: #1a1c28;
      border-right: 1px solid #3a3e4f;
    }
    .crm-detail-sidebar::-webkit-scrollbar { width: 8px; }
    .crm-detail-sidebar::-webkit-scrollbar-track { background: transparent; }
    .crm-detail-sidebar::-webkit-scrollbar-thumb { background: #272a3a; border-radius: 4px; }

    /* v1.50.16 — Slide-in étroit (< 900px) : sidebar passe sous le main, scroll global */
    @media (max-width: 900px) {
      .crm-detail-grid {
        grid-template-columns: 1fr;
      }
      .crm-detail-sidebar {
        border-right: none;
        border-top: 1px solid #3a3e4f;
        order: 2;
        max-height: 50vh;
      }
      .crm-detail-body-main { order: 1; }
    }

    /* v1.50.23 — Section "Champs personnalisés" : pas de scroll interne, tout
       s'étend dans la sidebar. Le scroll de la sidebar entière prend le relais. */

    /* v1.50.16 — Barre d'avancement chevrons stages (PD-style) */
    .crm-stage-progress {
      display: flex;
      gap: 2px;
      margin: 0 0 16px;
      padding: 0;
      list-style: none;
      flex-wrap: wrap;
    }
    .crm-stage-chev {
      flex: 1 1 0;
      min-width: 0;
      position: relative;
      padding: 8px 18px 8px 14px;
      background: #272a3a;
      color: #8b8ea5;
      font-size: 11px;
      font-weight: 500;
      clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      text-align: center;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .crm-stage-chev:first-child {
      clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
      padding-left: 10px;
    }
    .crm-stage-chev-name {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .crm-stage-chev-time {
      font-weight: 700;
      font-size: 11px;
      opacity: 0.95;
    }
    .crm-stage-chev-past {
      background: #16a34a;
      color: #ffffff;
    }
    .crm-stage-chev-current {
      background: #16a34a;
      color: #ffffff;
    }
    .crm-stage-chev-future {
      background: #272a3a;
      color: #8b8ea5;
    }
    .crm-stage-chev-rotten {
      background: #dc2626 !important;
      color: #ffffff !important;
      animation: crm-rotten-pulse 2s infinite ease-in-out;
    }
    @keyframes crm-rotten-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.4); }
      50%      { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
    }

    /* v1.50.24 — Modal picker Owner */
    .crm-owner-search {
      width: 100%;
      padding: 10px 12px;
      background: #1a1d2e;
      border: 1px solid #3a3e4f;
      border-radius: 6px;
      color: #e8eaf6;
      font-size: 14px;
      margin-bottom: 12px;
      box-sizing: border-box;
    }
    .crm-owner-search:focus {
      outline: none;
      border-color: #4f7cff;
      background: #1d2034;
    }
    .crm-owner-list {
      max-height: 360px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .crm-owner-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      color: #e8eaf6;
      cursor: pointer;
      text-align: left;
      width: 100%;
      transition: background 0.1s ease, border-color 0.1s ease;
    }
    .crm-owner-row:hover {
      background: #272a3a;
      border-color: #3a3e4f;
    }
    .crm-owner-row-current {
      background: rgba(79,124,255,0.12);
      border-color: rgba(79,124,255,0.4);
    }
    .crm-owner-avatar {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      border-radius: 50%;
      background: linear-gradient(135deg, #4f7cff, #7c4fff);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }
    .crm-owner-name {
      flex: 1;
      font-size: 14px;
      font-weight: 500;
    }
    .crm-owner-current-badge {
      font-size: 10px;
      color: #4f7cff;
      background: rgba(79,124,255,0.15);
      padding: 2px 8px;
      border-radius: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* v1.50.97 — Phase 5 : KPI tiles en tête du board (bandeau horizontal compact) */
    /* v1.50.97 fix #2 + v1.50.101 SyntaxError fix — Le 1er fix v1.50.95 ne suffisait pas : les insights
       apparaissaient à côté des colonnes au lieu d'au-dessus parce que '#crm-view'
       n'avait pas de display explicite (= block) et '.crm-kanban' (height:100%)
       ne se résolvait pas correctement avec ce nouveau layout à 2 enfants
       (insights + board). Le vrai fix : forcer '#crm-view' en flex column avec
       'flex:1' pour prendre l'espace restant de '.crm-shell', puis '#crm-board'
       en flex column lui-même pour que '.crm-kanban height:100%' s'applique.
       v1.50.101 : backticks remplacés par apostrophes simples — ce commentaire
       est dans un template literal JS, les backticks imbriqués cassaient la
       string (SyntaxError "Unexpected identifier '#crm'"). */
    #crm-view {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: hidden;
      /* v1.66.67 — CSS vars locales pour theme light Pipedrive.
         Les inline styles JS utilisent var(--tbl-*) → automatiquement adaptées
         quand .theme-pd est posée sur .crm-shell. */
      --tbl-bg-card: #1a1c28;
      --tbl-bg-app: #13141e;
      --tbl-bg-hover: #22253a;
      --tbl-fg-primary: #fff;
      --tbl-fg-secondary: #cdd1e8;
      --tbl-fg-muted: #9aa0c0;
      --tbl-fg-faint: #6a6d85;
      --tbl-border: #272a3a;
      --tbl-border-strong: #3a3e4f;
      --tbl-accent: #3a82f7;
    }
    /* v1.66.67 — Override en theme light Pipedrive. */
    .crm-shell.theme-pd #crm-view {
      --tbl-bg-card: var(--pd-bg-surface, #fff);
      --tbl-bg-app: var(--pd-bg-app, #f5f7fa);
      --tbl-bg-hover: var(--pd-bg-hover, #f0f3f7);
      --tbl-fg-primary: var(--pd-fg-primary, #1f2733);
      --tbl-fg-secondary: var(--pd-fg-secondary, #6b7785);
      --tbl-fg-muted: var(--pd-fg-secondary, #6b7785);
      --tbl-fg-faint: var(--pd-fg-muted, #9aa3b0);
      --tbl-border: var(--pd-divider, #e6e9ef);
      --tbl-border-strong: var(--pd-divider-strong, #d2d6dc);
      --tbl-accent: var(--pd-fg-link, #2c6dff);
      background: var(--pd-bg-app, #f5f7fa) !important;
    }
    .crm-shell.theme-pd .crm-detail-panel {
      background: var(--pd-bg-surface, #fff) !important;
      border-left-color: var(--pd-divider-strong, #d2d6dc) !important;
    }
    /* v1.66.67 — Override couleurs hardcoded inline des renderers modernes (Contacts/Orgs/Leads/panels).
       Approche attribute selectors + !important. Couvre les patterns les plus visuels. */
    .crm-shell.theme-pd #crm-view [style*="#1a1c28"],
    .crm-shell.theme-pd .crm-detail-panel [style*="#1a1c28"] {
      background-color: var(--pd-bg-surface, #fff) !important;
    }
    .crm-shell.theme-pd #crm-view [style*="#13141e"],
    .crm-shell.theme-pd .crm-detail-panel [style*="#13141e"] {
      background-color: var(--pd-bg-app, #f5f7fa) !important;
    }
    .crm-shell.theme-pd #crm-view [style*="border:1px solid #272a3a"],
    .crm-shell.theme-pd #crm-view [style*="border-bottom:1px solid #272a3a"],
    .crm-shell.theme-pd #crm-view [style*="border-top:1px solid #272a3a"],
    .crm-shell.theme-pd #crm-view [style*="border-bottom:2px solid #272a3a"],
    .crm-shell.theme-pd .crm-detail-panel [style*="border:1px solid #272a3a"],
    .crm-shell.theme-pd .crm-detail-panel [style*="border-bottom:1px solid #272a3a"],
    .crm-shell.theme-pd .crm-detail-panel [style*="border-top:1px solid #272a3a"],
    .crm-shell.theme-pd .crm-detail-panel [style*="border-bottom:2px solid #272a3a"] {
      border-color: var(--pd-divider, #e6e9ef) !important;
    }
    .crm-shell.theme-pd #crm-view [style*="color:#fff"],
    .crm-shell.theme-pd .crm-detail-panel [style*="color:#fff"] {
      color: var(--pd-fg-primary, #1f2733) !important;
    }
    .crm-shell.theme-pd #crm-view [style*="color:#cdd1e8"],
    .crm-shell.theme-pd .crm-detail-panel [style*="color:#cdd1e8"] {
      color: var(--pd-fg-primary, #1f2733) !important;
    }
    .crm-shell.theme-pd #crm-view [style*="color:#9aa0c0"],
    .crm-shell.theme-pd .crm-detail-panel [style*="color:#9aa0c0"] {
      color: var(--pd-fg-secondary, #6b7785) !important;
    }
    .crm-shell.theme-pd #crm-view [style*="color:#6a6d85"],
    .crm-shell.theme-pd .crm-detail-panel [style*="color:#6a6d85"] {
      color: var(--pd-fg-muted, #9aa3b0) !important;
    }
    /* Inputs et textarea dans modales et headers */
    .crm-shell.theme-pd #crm-view input[type="text"],
    .crm-shell.theme-pd #crm-view input[type="number"],
    .crm-shell.theme-pd #crm-view input[type="date"],
    .crm-shell.theme-pd #crm-view textarea,
    .crm-shell.theme-pd #crm-view select {
      background: var(--pd-bg-input, #fff) !important;
      color: var(--pd-fg-primary, #1f2733) !important;
      border-color: var(--pd-divider-strong, #d2d6dc) !important;
    }
    #crm-board {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    /* v1.50.185 — KPI insights compactés en mini-chips inline dans le subnav.
       Plus de bandeau dédié — gain ~70 px de hauteur sur le board. */
    .crm-insights {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
      margin: 0 12px;
      min-width: 0;
    }
    .crm-kpi-chip {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      padding: 5px 10px;
      background: rgba(26, 29, 46, 0.6);
      border: 1px solid #2a2d40;
      border-radius: 6px;
      white-space: nowrap;
      transition: border-color 0.15s ease, background 0.15s ease;
      cursor: default;
    }
    .crm-kpi-chip:hover {
      border-color: #3a3e4f;
      background: rgba(26, 29, 46, 0.9);
    }
    .crm-kpi-ico {
      font-size: 12px;
      opacity: 0.85;
      line-height: 1;
    }
    .crm-kpi-val {
      font-size: 13px;
      font-weight: 700;
      color: #e8eaf6;
      line-height: 1.2;
    }
    /* Compact subnav : tous les enfants tiennent sur 1 ligne. v1.50.186 :
       barre de recherche + boutons 🎨 / 📊 désormais inline dans le subnav.
       v1.64.36 — Hauteur UNIFORME 32px sur tous les éléments du subnav
       (cas Maxime 2026-05-14 : « ce serait plus beau si tous les boutons
       et affichages ici avaient exactement la même hauteur »). */
    .crm-subnav {
      flex-wrap: nowrap;
      gap: 12px;
      padding: 10px 20px;
    }
    /* Force hauteur 32px sur tous les boutons/chips/triggers/badges du subnav.
       Les éléments déjà à 32px (status-pills, view-toggle, select, search-pseudo)
       ne sont pas affectés. */
    .crm-subnav .crm-pipeline-trigger,
    .crm-subnav .crm-kpi-chip,
    .crm-subnav .crm-btn-ghost,
    .crm-subnav .crm-adv-btn,
    .crm-subnav .crm-stats {
      height: 32px;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
    }
    .crm-subnav .crm-pipeline-trigger { padding: 0 14px; font-size: 13px; }
    .crm-subnav .crm-kpi-chip { padding: 0 10px; }
    .crm-subnav .crm-btn-ghost { padding: 0 11px; font-size: 13px; }
    .crm-subnav .crm-adv-btn { padding: 0 11px !important; }
    .crm-subnav .crm-stats { padding: 0 4px; }
    .crm-subnav .crm-insights { flex: 0 1 auto; }
    .crm-subnav .crm-filters { flex: 0 0 auto; }
    .crm-pipeline-selector { flex: 0 0 auto; }
    /* Search inline : prend l'espace restant, mais peut shrinker fortement */
    .crm-subnav .crm-search-inline {
      flex: 1 1 200px;
      min-width: 100px;
      max-width: 320px;
      margin: 0;
      padding: 0;
    }
    .crm-subnav .crm-search-inline .crm-topbar-search-pseudo {
      width: 100%;
      padding: 6px 10px;
      height: 32px;
      font-size: 13px;
    }
    .crm-subnav .crm-topbar-right {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    @media (max-width: 1600px) {
      /* La recherche peut shrinker sous 1600px sans masquer le placeholder */
      .crm-subnav .crm-search-inline { max-width: 240px; }
    }
    @media (max-width: 1400px) {
      /* Masque l'icone du chip + cache le hint ⌘K pour gagner de la place */
      .crm-kpi-ico { display: none; }
      .crm-kpi-chip { padding: 5px 8px; }
      .crm-subnav .crm-search-inline .crm-kbd-hint { display: none; }
    }
    @media (max-width: 1280px) {
      /* Encore plus serré : status pills compactes + search réduite */
      .crm-subnav .crm-search-inline { max-width: 180px; flex-basis: 140px; }
      .crm-subnav { gap: 8px; padding: 10px 14px; }
    }
    @media (max-width: 1100px) {
      /* Très étroit : chips wrap sur 2 lignes plutôt qu'overflow horizontal */
      .crm-insights { flex-wrap: wrap; }
    }

    /* ============ v1.50.190 — Sidenav verticale (style Pipedrive) ============ */
    .crm-shell {
      display: flex !important;
      flex-direction: row !important;
    }
    .crm-main {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .crm-sidenav {
      width: 64px;
      flex: 0 0 64px;
      background: #13141f;
      border-right: 1px solid #2a2d40;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 12px 0;
      gap: 4px;
    }
    .crm-sidenav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 10px 4px;
      margin: 0 6px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      color: #8b8ea5;
      font: inherit;
      font-size: 10px;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
      text-align: center;
    }
    .crm-sidenav-item:hover:not(.crm-sidenav-item-disabled) {
      background: #1f2236;
      color: #e8eaf6;
    }
    .crm-sidenav-item-active {
      background: rgba(79, 124, 255, 0.15);
      color: #e8eaf6;
      border-color: rgba(79, 124, 255, 0.35);
    }
    .crm-sidenav-item-active .crm-sidenav-icon {
      filter: drop-shadow(0 0 6px rgba(79, 124, 255, 0.4));
    }
    .crm-sidenav-item-disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
    .crm-sidenav-icon {
      font-size: 20px;
      line-height: 1;
    }
    .crm-sidenav-label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.2px;
      line-height: 1.1;
    }

    /* ============ v1.50.190 — Vue Activités (liste) ============ */
    .crm-act-section-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 700;
      color: #e8eaf6;
      padding: 9px 14px;
      background: #272a3a;
      border: 1px solid #3a3e4f;
      border-radius: 9px;
    }
    .crm-activities-wrap {
      padding: 12px 20px;
      overflow: auto;
      flex: 1 1 auto;
      min-height: 0;
    }
    .crm-activities-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      color: #cbd5e1;
    }
    .crm-activities-table thead th {
      position: sticky;
      top: 0;
      background: #1a1c28;
      z-index: 2;
      padding: 10px 8px;
      text-align: left;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #8b8ea5;
      border-bottom: 1px solid #2a2d40;
      white-space: nowrap;
    }
    /* v1.50.192 — Rendu PD-style : tableau dense, chips colorées, échéance rouge si retard */
    .crm-act-col-done { width: 90px; text-align: center !important; }
    .crm-act-col-due  { width: 110px; white-space: nowrap; }
    .crm-act-row td {
      padding: 7px 10px;
      border-bottom: 1px solid #20232f;
      vertical-align: middle;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 280px;
    }
    .crm-act-row-clickable { cursor: pointer; }
    .crm-act-row-clickable:hover {
      background: #1f2236;
    }
    .crm-act-row-done {
      opacity: 0.55;
    }
    .crm-act-row-done .crm-act-subject {
      text-decoration: line-through;
    }
    .crm-act-subject {
      font-weight: 500;
      color: #e8eaf6;
      max-width: 320px !important;
    }
    .crm-act-subject-icon {
      display: inline-block;
      color: #f59e0b;
      font-size: 13px;
      margin-right: 4px;
      vertical-align: middle;
    }
    .crm-act-deal-link {
      color: #4f7cff;
      text-decoration: none;
      font-weight: 500;
      font-size: 13px;
    }
    .crm-act-deal-link:hover { text-decoration: underline; }
    /* Chip style PD pour Personne / Email — fond bleu-gris léger, border arrondi */
    .crm-act-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      background: #2a2d40;
      border: 1px solid #3a3e4f;
      border-radius: 4px;
      font-size: 12px;
      color: #e8eaf6;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .crm-act-chip-meta {
      color: #8b8ea5;
      font-size: 11px;
    }
    .crm-act-phone {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 12px;
      color: #4ade80;
    }
    .crm-act-empty-cell {
      color: #4a4d65;
    }
    .crm-act-due {
      color: #cbd5e1;
      font-size: 12px;
      font-weight: 500;
    }
    .crm-act-due-today {
      color: #fbbf24;
      font-weight: 600;
      font-size: 12px;
    }
    /* PD-style : rouge orangé pour les échéances dépassées (cas le plus fréquent dans "À faire") */
    .crm-act-due-overdue {
      color: #f87171;
      font-weight: 500;
      font-size: 12px;
    }
    .crm-act-due-none {
      color: #4a4d65;
      font-size: 12px;
    }
    .crm-act-footer {
      padding: 12px 0 24px;
      text-align: center;
      color: #6a6d85;
      font-size: 12px;
    }

    /* v1.50.50 — Drawer filtres avancés */
    .crm-adv-btn {
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      padding: 6px 10px !important;
    }
    .crm-adv-btn-active {
      background: rgba(79,124,255,0.15) !important;
      color: #4f7cff !important;
      border: 1px solid rgba(79,124,255,0.4) !important;
    }
    .crm-adv-badge {
      background: #4f7cff;
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 9px;
      margin-left: 4px;
    }
    .crm-adv-drawer {
      background: #0f1120;
      border-bottom: 1px solid #2a2d40;
      padding: 12px 16px;
    }
    .crm-adv-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: flex-end;
    }
    .crm-adv-row label {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 11px;
      color: #8b8ea5;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 600;
    }
    .crm-adv-row input {
      background: #1a1d2e;
      border: 1px solid #3a3e4f;
      border-radius: 6px;
      color: #e8eaf6;
      padding: 6px 10px;
      font-size: 13px;
      min-width: 140px;
      text-transform: none;
      letter-spacing: normal;
      font-weight: 500;
    }
    .crm-adv-row input:focus {
      outline: none;
      border-color: #4f7cff;
      background: #1d2034;
    }
    .crm-adv-clear {
      align-self: flex-end;
      color: #f87171 !important;
    }

    /* v1.50.50 — Phase 4 : modals édition Person/Org */
    .crm-detail-entity-clickable {
      cursor: pointer;
      transition: background 0.1s ease, border-color 0.1s ease;
    }
    .crm-detail-entity-clickable:hover {
      background: #1d2034;
    }
    .crm-edit-icon {
      background: transparent;
      border: none;
      color: #8b8ea5;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
      margin-left: 6px;
      opacity: 0;
      transition: opacity 0.1s ease, background 0.1s ease;
    }
    .crm-detail-section:hover .crm-edit-icon { opacity: 0.7; }
    .crm-edit-icon:hover { background: #272a3a; opacity: 1; }
    .crm-multi-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .crm-multi-row {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .crm-multi-row input[type=email],
    .crm-multi-row input[type=tel] {
      flex: 1;
      min-width: 0;
    }
    .crm-multi-row select {
      width: 90px;
    }
    .crm-multi-primary {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: #8b8ea5;
      cursor: pointer;
      white-space: nowrap;
    }
    .crm-multi-add {
      align-self: flex-start;
      margin-top: 4px;
      font-size: 11px;
    }

    /* v1.50.159 — Barre de recherche centrée style Pipedrive natif.
       Aspect input (pseudo-button qui ouvre la modal Cmd+K au click).
       Flex: 1 centré entre left et right, max-width 560px. */
    .crm-topbar-search-wrap {
      flex: 1;
      display: flex;
      justify-content: center;
      padding: 0 24px;
      min-width: 0;
    }
    .crm-topbar-search-pseudo {
      width: 100%;
      max-width: 560px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      background: #272a3a;
      border: 1px solid #3a3e4f;
      border-radius: 8px;
      color: #8b8ea5;
      cursor: text;
      font-size: 13px;
      font-family: inherit;
      transition: background 0.1s ease, border-color 0.1s ease;
    }
    .crm-topbar-search-pseudo:hover {
      background: #2f3247;
      border-color: #4a4e60;
    }
    .crm-topbar-search-pseudo:focus,
    .crm-topbar-search-pseudo:active {
      outline: none;
      border-color: #4f7cff;
      background: #2f3247;
    }
    .crm-topbar-search-icon {
      font-size: 14px;
      opacity: 0.7;
      flex-shrink: 0;
    }
    .crm-topbar-search-placeholder {
      flex: 1;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .crm-kbd-hint {
      font-size: 10px;
      color: #c8cae0;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 600;
      flex-shrink: 0;
    }

    /* v1.50.112 — Phase 7 : section Fichiers attachés du slide-in deal */
    .crm-file-list {
      display: flex; flex-direction: column; gap: 4px;
    }
    .crm-file-row {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 12px;
      background: #1a1d2e;
      border: 1px solid #2a2d40;
      border-radius: 6px;
      transition: background 0.1s ease, border-color 0.1s ease;
    }
    .crm-file-row:hover {
      background: #1d2034;
      border-color: #3a3e4f;
    }
    .crm-file-icon {
      width: 32px; height: 32px;
      display: inline-flex; align-items: center; justify-content: center;
      background: #272a3a;
      border-radius: 6px;
      font-size: 16px;
      flex-shrink: 0;
    }
    .crm-file-body { flex: 1; min-width: 0; }
    .crm-file-name {
      font-size: 13px; font-weight: 500; color: #e8eaf6;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .crm-file-meta {
      font-size: 11px; color: #8b8ea5;
      margin-top: 2px;
    }
    .crm-file-dl {
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px;
      background: transparent;
      border: 1px solid #3a3e4f;
      border-radius: 6px;
      color: #c8cae0;
      text-decoration: none;
      font-size: 14px;
      transition: background 0.1s ease, border-color 0.1s ease;
    }
    .crm-file-dl:hover {
      background: rgba(79,124,255,0.15);
      border-color: rgba(79,124,255,0.4);
      color: #4f7cff;
    }

    /* v1.50.140 — Phase 8.1 : section emails (threads + modal lecture) */
    .crm-mail-thread-list { display: flex; flex-direction: column; gap: 4px; }
    .crm-mail-thread-row {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 12px;
      background: #1a1d2e;
      border: 1px solid #2a2d40;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.1s ease, border-color 0.1s ease;
    }
    .crm-mail-thread-row:hover { background: #1d2034; border-color: #3a3e4f; }
    .crm-mail-thread-unread { border-left: 3px solid #4f7cff !important; }
    .crm-mail-thread-icon {
      width: 32px; height: 32px;
      display: inline-flex; align-items: center; justify-content: center;
      background: #272a3a;
      border-radius: 6px;
      font-size: 14px;
      flex-shrink: 0;
    }
    .crm-mail-thread-body { flex: 1; min-width: 0; }
    .crm-mail-thread-subject {
      font-size: 13px; font-weight: 500; color: #e8eaf6;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .crm-mail-thread-unread .crm-mail-thread-subject { font-weight: 700; color: #fff; }
    .crm-mail-thread-meta { font-size: 11px; color: #8b8ea5; margin-top: 2px; }

    .crm-mail-message {
      background: #1a1d2e;
      border: 1px solid #2a2d40;
      border-radius: 8px;
      padding: 14px 16px;
      margin-bottom: 10px;
    }
    .crm-mail-message-header {
      display: flex; justify-content: space-between; align-items: baseline;
      margin-bottom: 4px;
    }
    .crm-mail-message-from { font-size: 13px; font-weight: 600; color: #e8eaf6; }
    .crm-mail-message-date { font-size: 11px; color: #8b8ea5; }
    .crm-mail-message-to { font-size: 12px; color: #8b8ea5; margin-bottom: 8px; }
    .crm-mail-body-text {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 13px;
      white-space: pre-wrap;
      word-wrap: break-word;
      color: #c8cae0;
      margin: 0;
    }
    .crm-mail-body-empty { font-size: 12px; color: #6a6d85; }
    .crm-mail-attachments {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #2a2d40;
      font-size: 12px;
      color: #c8cae0;
    }

    /* v1.50.110 — Phase 7 : slide-in fiche Person/Org */
    .crm-entity-panel {
      position: fixed;
      top: 56px; right: 0; bottom: 0;
      width: clamp(640px, 42vw, 900px);
      background: #14161e;
      border-left: 1px solid #2a2d40;
      box-shadow: -8px 0 30px rgba(0,0,0,0.4);
      transform: translateX(100%);
      transition: transform 0.25s ease;
      z-index: 90;  /* sous le slide-in deal (z=100) pour empilement */
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }
    .crm-entity-panel.crm-entity-open { transform: translateX(0); }
    .crm-entity-content { display: flex; flex-direction: column; height: 100%; }
    .crm-entity-header {
      padding: 18px 24px 14px;
      border-bottom: 1px solid #2a2d40;
      background: #1a1d2e;
    }
    .crm-entity-header-top { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
    .crm-entity-title-row {
      display: flex; align-items: center; gap: 14px;
    }
    .crm-entity-avatar {
      width: 48px; height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, #4f7cff, #7c4fff);
      color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 18px; font-weight: 700;
      letter-spacing: 0.5px;
      flex-shrink: 0;
    }
    .crm-entity-avatar-org {
      background: linear-gradient(135deg, #16a34a, #22c55e);
    }
    .crm-entity-title-block { flex: 1; min-width: 0; }
    .crm-entity-title {
      font-size: 22px; font-weight: 700; color: #fff;
      letter-spacing: -0.01em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .crm-entity-subtitle {
      font-size: 13px; color: #8b8ea5; margin-top: 4px;
    }
    .crm-entity-meta {
      margin-top: 12px;
      display: flex; flex-direction: column; gap: 4px;
      font-size: 13px; color: #c8cae0;
    }
    .crm-entity-body {
      flex: 1;
      padding: 18px 24px 28px;
      overflow-y: auto;
    }
    .crm-entity-section-count {
      font-size: 11px; font-weight: 600; color: #8b8ea5;
      margin-left: 8px;
    }
    .crm-entity-deal-row {
      display: flex; justify-content: space-between; align-items: center;
      gap: 12px;
      padding: 10px 12px;
      background: #1a1d2e;
      border: 1px solid #2a2d40;
      border-radius: 6px;
      margin-bottom: 6px;
      cursor: pointer;
      transition: background 0.1s ease, border-color 0.1s ease;
    }
    .crm-entity-deal-row:hover {
      background: #1d2034;
      border-color: #3a3e4f;
    }
    .crm-entity-deal-title {
      flex: 1; min-width: 0;
      font-size: 14px; font-weight: 500; color: #e8eaf6;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .crm-entity-deal-meta {
      font-size: 11px; color: #8b8ea5; flex-shrink: 0;
    }
    .crm-entity-person-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 8px 12px;
      cursor: pointer;
      border-radius: 4px;
    }
    .crm-entity-person-row:hover { background: #1d2034; }
    .crm-entity-person-name { font-size: 14px; color: #e8eaf6; font-weight: 500; }
    .crm-entity-person-meta { font-size: 11px; color: #8b8ea5; }
    .crm-entity-activity-row,
    .crm-entity-note-row {
      display: flex; justify-content: space-between; align-items: center;
      gap: 12px;
      padding: 8px 12px;
      font-size: 13px; color: #c8cae0;
      border-bottom: 1px solid #1f2230;
    }
    .crm-entity-note-row {
      flex-direction: column;
      align-items: flex-start;
    }
    /* Sous le slide-in deal (z-100). Si les 2 sont ouverts, le deal est devant. */
    .crm-detail-panel { z-index: 100; }

    /* v1.50.45 — Modal recherche globale Cmd+K */
    .crm-search-overlay {
      align-items: flex-start;
      padding-top: 14vh;
    }
    .crm-search-modal {
      width: 100%;
      max-width: 680px;
      background: #16182a;
      border: 1px solid #3a3e4f;
      border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.6);
      overflow: hidden;
    }
    .crm-search-input-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      border-bottom: 1px solid #2a2d40;
    }
    .crm-search-icon { font-size: 18px; opacity: 0.7; }
    .crm-search-input {
      flex: 1;
      background: transparent;
      border: none;
      color: #e8eaf6;
      font-size: 16px;
      outline: none;
    }
    .crm-search-input::placeholder { color: #6a6d85; }
    .crm-search-kbd {
      font-size: 11px;
      color: #8b8ea5;
      background: #272a3a;
      padding: 3px 8px;
      border-radius: 4px;
      border: 1px solid #3a3e4f;
      font-weight: 600;
    }
    .crm-search-results {
      max-height: 60vh;
      overflow-y: auto;
      padding: 6px 8px 12px;
    }
    .crm-search-empty {
      padding: 30px 18px;
      text-align: center;
      color: #6a6d85;
      font-size: 13px;
    }
    .crm-search-section { padding: 6px 0; }
    .crm-search-section-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #6a6d85;
      padding: 6px 12px;
      font-weight: 700;
    }
    .crm-search-row {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 10px 12px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      color: #e8eaf6;
      cursor: pointer;
      text-align: left;
      transition: background 0.1s ease;
    }
    .crm-search-row:hover {
      background: #272a3a;
    }
    .crm-search-row-icon {
      width: 28px; height: 28px;
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      background: #1a1d2e;
      border-radius: 6px;
      font-size: 13px;
    }
    .crm-search-row-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .crm-search-row-title {
      font-size: 14px;
      font-weight: 500;
      color: #e8eaf6;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .crm-search-row-meta {
      font-size: 11px;
      color: #8b8ea5;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .crm-detail-body-main {
      padding: 20px 28px;
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
    }
    .crm-detail-loading {
      padding: 60px 24px; text-align: center;
      color: #6a6d85; font-size: 13px; flex: 1;
      display: flex; align-items: center; justify-content: center;
    }
    .crm-detail-header {
      padding: 16px 20px;
      border-bottom: 1px solid #3a3e4f;
      flex-shrink: 0;
    }
    .crm-detail-header-top {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 12px;
    }
    .crm-detail-header-top .crm-btn-ghost {
      padding: 6px 11px; font-size: 13px;
      text-decoration: none; display: inline-flex; align-items: center;
    }
    .crm-detail-header-top a.crm-btn-ghost { font-size: 14px; }
    .crm-detail-title {
      font-size: 18px; font-weight: 700; color: #fff;
      letter-spacing: -0.01em; line-height: 1.3;
      margin-bottom: 8px;
    }
    .crm-detail-meta {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      font-size: 12px;
    }
    .crm-detail-value {
      font-size: 16px; font-weight: 700; color: #fff;
    }
    .crm-detail-status { font-weight: 600; }
    .crm-detail-stage {
      color: #8b8ea5; padding: 2px 9px;
      background: #272a3a; border-radius: 5px;
    }
    .crm-detail-tabs {
      display: flex; gap: 0;
      padding: 0 20px;
      border-bottom: 1px solid #3a3e4f;
      flex-shrink: 0;
      background: #1a1c28;
    }
    .crm-detail-tab {
      padding: 12px 14px;
      background: transparent; color: #6a6d85;
      border: none; border-bottom: 2px solid transparent;
      cursor: pointer; font-size: 13px; font-weight: 600;
      font-family: inherit;
      display: inline-flex; align-items: center; gap: 6px;
      transition: color 0.15s, border-color 0.15s;
    }
    .crm-detail-tab:hover { color: #c8cae0; }
    .crm-detail-tab-active { color: #fff; border-bottom-color: #f04d12; }
    .crm-detail-tab-count {
      display: inline-block; padding: 1px 7px;
      background: #272a3a; color: #8b8ea5;
      border-radius: 10px; font-size: 10px; font-weight: 700;
    }
    .crm-detail-tab-active .crm-detail-tab-count {
      background: #f04d12; color: #fff;
    }
    .crm-detail-body {
      flex: 1; overflow-y: auto;
      padding: 20px;
    }
    .crm-detail-body::-webkit-scrollbar { width: 8px; }
    .crm-detail-body::-webkit-scrollbar-track { background: transparent; }
    .crm-detail-body::-webkit-scrollbar-thumb { background: #272a3a; border-radius: 4px; }
    .crm-detail-empty {
      padding: 40px 20px; text-align: center;
      font-size: 13px; color: #6a6d85;
    }

    .crm-detail-section { margin-bottom: 24px; }
    .crm-detail-section:last-child { margin-bottom: 0; }
    .crm-detail-section-title {
      font-size: 11px; font-weight: 700; color: #6a6d85;
      text-transform: uppercase; letter-spacing: 0.08em;
      margin-bottom: 10px;
    }
    .crm-detail-rows {
      background: #272a3a; border: 1px solid #3a3e4f;
      border-radius: 10px; overflow: hidden;
    }
    .crm-detail-row {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 11px 14px;
      border-bottom: 1px solid #1a1c28;
      font-size: 13px;
    }
    .crm-detail-row:last-child { border-bottom: none; }
    .crm-detail-row-label {
      flex: 0 0 140px; color: #6a6d85; font-weight: 600;
    }
    /* v1.50.193 — 'min-width: 0' indispensable pour que 'flex: 1' shrink en dessous
       de la intrinsic content size. Sans ça, 'word-break: break-word' finit par
       casser caractère par caractère quand le mot est plus large que le slot.
       Cas Maxime 2026-05-11 : "Savannah Quinart" affichée S/a/v/a/n/n/a/h en
       vertical sur la sidebar d'un petit écran.
       v1.50.195 — backticks remplacés par apostrophes (4e récidive : ce bloc CSS
       est DANS un template literal JS qui démarre ligne 4307 ('s.textContent =' suivi
       d'une backtick ouvrante) et se ferme ligne 6545. JAMAIS de backtick à
       l'intérieur — pas même dans un commentaire — sinon le parser ferme le
       string et casse tout app-crm.js. Utiliser apostrophes ou chevrons. */
    .crm-detail-row-value {
      flex: 1;
      min-width: 0;
      color: #e8e9f0;
      word-break: normal;
      overflow-wrap: break-word;
    }
    /* v1.50.193 — Sur sidebar étroite (< 1280px), le label fixe à 140px mange
       l'essentiel de la place et le value finit à <100px. Réduit + responsive. */
    @media (max-width: 1280px) {
      .crm-detail-row-label { flex: 0 0 100px; font-size: 12px; }
      .crm-detail-row { gap: 10px; padding: 10px 12px; }
    }
    @media (max-width: 1024px) {
      /* Très petit : label au-dessus de la value, value pleine largeur */
      .crm-detail-row { flex-direction: column; gap: 4px; }
      .crm-detail-row-label { flex: 0 0 auto; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
    }
    .crm-detail-entity-card {
      background: #272a3a; border: 1px solid #3a3e4f;
      border-radius: 10px; padding: 14px;
    }
    .crm-detail-entity-name {
      font-size: 14px; font-weight: 700; color: #fff;
      margin-bottom: 8px;
    }
    .crm-detail-entity-row {
      font-size: 12px; color: #c8cae0;
      margin-top: 5px; line-height: 1.5;
    }
    .crm-detail-link { color: #f04d12; text-decoration: none; }
    .crm-detail-link:hover { text-decoration: underline; }

    /* + Nouvelle action button (top of tab) */
    .crm-add-action {
      display: inline-flex; align-items: center;
      padding: 8px 14px; margin-bottom: 12px;
      background: #272a3a; color: #c8cae0;
      border: 1px dashed #2a2c3e; border-radius: 8px;
      cursor: pointer; font-size: 12px; font-weight: 600;
      font-family: inherit;
      transition: all 0.15s;
    }
    .crm-add-action:hover {
      background: #1a1c28; color: #fff;
      border-color: #f04d12; border-style: solid;
    }

    /* Activities timeline */
    .crm-activity-list { display: flex; flex-direction: column; gap: 10px; }
    .crm-activity-item {
      display: flex; gap: 12px;
      padding: 12px 14px;
      background: #272a3a; border: 1px solid #3a3e4f;
      border-radius: 10px;
    }
    .crm-activity-check {
      display: inline-flex; align-items: center;
      cursor: pointer; padding: 4px;
    }
    .crm-activity-check input[type="checkbox"] {
      width: 16px; height: 16px;
      accent-color: #f04d12;
      cursor: pointer;
    }
    .crm-activity-item-done { opacity: 0.6; }
    .crm-activity-item-overdue { border-color: #5a1f1f; background: #2a1416; }
    .crm-activity-icon {
      width: 28px; height: 28px;
      display: inline-flex; align-items: center; justify-content: center;
      background: #272a3a; border-radius: 50%;
      font-size: 14px; flex-shrink: 0;
    }
    .crm-activity-body { flex: 1; min-width: 0; }
    .crm-activity-subject {
      font-size: 13px; font-weight: 600; color: #fff;
      margin-bottom: 4px;
    }
    .crm-activity-meta { font-size: 11px; color: #8b8ea5; }
    .crm-activity-note {
      font-size: 12px; color: #c8cae0;
      margin-top: 6px; line-height: 1.5;
      padding-top: 6px; border-top: 1px solid #1a1c28;
    }
    .crm-activity-badge {
      display: inline-block; padding: 2px 8px;
      border-radius: 4px; font-size: 10px; font-weight: 700;
      margin-top: 6px;
    }
    .crm-activity-done { background: #1d4d35; color: #4ade80; }
    .crm-activity-overdue { background: #6f2528; color: #ff7a6e; }

    /* Col header + button (Phase 4b1) */
    .crm-col-header-row {
      display: flex; align-items: center; justify-content: space-between;
      gap: 8px;
    }
    .crm-col-add {
      width: 26px; height: 26px;
      padding: 0;
      background: transparent; color: #6a6d85;
      border: 1px solid #3a3e4f; border-radius: 6px;
      cursor: pointer;
      font-size: 16px; font-weight: 600; line-height: 1;
      font-family: inherit;
      transition: all 0.15s;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .crm-col-add:hover {
      background: #f04d12; color: #fff; border-color: #f04d12;
      transform: scale(1.08);
    }

    /* Form layout (modal create deal) */
    .crm-create-deal-form { display: flex; flex-direction: column; gap: 14px; }
    .crm-form-row { display: flex; flex-direction: column; gap: 6px; }
    .crm-form-row-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
    .crm-form-row label {
      font-size: 11px; font-weight: 700; color: #6a6d85;
      text-transform: uppercase; letter-spacing: 0.05em;
    }
    .crm-form-row input, .crm-form-row select, .crm-form-row textarea {
      padding: 9px 12px;
      background: #272a3a; color: #e8e9f0;
      border: 1px solid #3a3e4f; border-radius: 8px;
      font-family: inherit; font-size: 13px; outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
      resize: vertical;
    }
    .crm-form-row input:focus, .crm-form-row select:focus, .crm-form-row textarea:focus {
      border-color: #f04d12;
      box-shadow: 0 0 0 3px rgba(240, 77, 18, 0.12);
    }
    .crm-form-row input::placeholder, .crm-form-row textarea::placeholder { color: #5a5d75; }
    .crm-checkbox-row {
      display: inline-flex; align-items: center; gap: 8px;
      cursor: pointer; font-size: 13px; color: #c8cae0;
      text-transform: none !important; letter-spacing: 0 !important;
    }
    .crm-checkbox-row input[type="checkbox"] {
      width: 16px; height: 16px;
      accent-color: #f04d12;
    }
    .crm-form-actions {
      display: flex; gap: 10px; justify-content: flex-end;
      padding-top: 10px;
      border-top: 1px solid #272a3a;
      margin-top: 6px;
    }

    /* Editable fields (Phase 4a) */
    .crm-editable {
      cursor: pointer;
      border-radius: 5px;
      padding: 1px 4px; margin: -1px -4px;
      transition: background 0.12s;
      position: relative;
    }
    .crm-editable:hover {
      background: rgba(240, 77, 18, 0.08);
      box-shadow: inset 0 0 0 1px rgba(240, 77, 18, 0.3);
    }
    .crm-edit-input {
      width: 100%;
      padding: 4px 8px;
      background: #1a1c28;
      color: #fff;
      border: 1px solid #f04d12;
      border-radius: 5px;
      font-family: inherit;
      font-size: inherit;
      font-weight: inherit;
      outline: none;
      box-shadow: 0 0 0 2px rgba(240, 77, 18, 0.15);
    }
    .crm-edit-input::-webkit-inner-spin-button,
    .crm-edit-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    .crm-btn-won, .crm-btn-lost {
      padding: 7px 13px;
      border: none; border-radius: 7px;
      cursor: pointer;
      font-weight: 700; font-size: 12px;
      font-family: inherit;
      transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    }
    .crm-btn-won {
      background: #1d4d35; color: #4ade80;
      box-shadow: inset 0 0 0 1px #2d6e4d;
    }
    .crm-btn-won:hover { background: #265f3f; transform: translateY(-1px); }
    .crm-btn-lost {
      background: #4d1f1f; color: #f87171;
      box-shadow: inset 0 0 0 1px #6e2d2d;
    }
    .crm-btn-lost:hover { background: #5f2626; transform: translateY(-1px); }

    /* ═════ Phase A v1.50.10 — Flux unifié activités+notes ═════ */
    .crm-feed-compose {
      display: flex; gap: 8px;
      margin-bottom: 14px;
    }
    .crm-feed-compose-btn {
      flex: 1;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 11px 14px;
      background: #1d1f2d; color: #c8cae0;
      border: 1px dashed #3a3e4f;
      border-radius: 10px;
      cursor: pointer;
      font-size: 13px; font-weight: 600; font-family: inherit;
      transition: all 0.15s ease;
    }
    .crm-feed-compose-btn:hover {
      background: #23263a; color: #fff;
      border-color: #f04d12; border-style: solid;
    }
    .crm-feed-compose-icon { font-size: 14px; }

    .crm-feed-filters {
      display: flex; gap: 4px;
      padding: 4px; margin-bottom: 14px;
      background: #1d1f2d; border-radius: 8px;
      box-shadow: inset 0 0 0 1px #3a3e4f;
    }
    .crm-feed-filter {
      flex: 1;
      padding: 7px 12px;
      background: transparent; color: #8b8ea5;
      border: none; border-radius: 6px;
      cursor: pointer;
      font-size: 12px; font-weight: 600; font-family: inherit;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      transition: all 0.12s ease;
    }
    .crm-feed-filter:hover { color: #e8e9f0; }
    .crm-feed-filter-active {
      background: #272a3a; color: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    .crm-feed-filter-count {
      display: inline-block; padding: 1px 7px;
      background: rgba(255,255,255,0.05); color: inherit;
      border-radius: 10px;
      font-size: 10px; font-weight: 700;
      min-width: 18px; text-align: center;
    }
    .crm-feed-filter-active .crm-feed-filter-count {
      background: #f04d12; color: #fff;
    }

    .crm-feed { display: block; }
    /* v1.50.141 — Timeline PD natif : fil de vie vertical + bulles latérales.
       La ligne verticale est dessinée par ::before sur .crm-feed-list (à gauche,
       passant par le centre des bulles). Chaque .crm-feed-item a un padding-left
       qui réserve la place pour la bulle (positioned absolute). */
    .crm-feed-list {
      position: relative;
      display: flex; flex-direction: column;
      gap: 14px;
      padding-left: 56px;  /* place pour bulle (40px) + gap (16px) */
    }
    .crm-feed-list::before {
      content: '';
      position: absolute;
      left: 20px;          /* center de la bulle (40px wide → 20px) */
      top: 8px;
      bottom: 8px;
      width: 1px;
      background: #2a2d40;
      pointer-events: none;
      z-index: 0;          /* explicit pour rester derrière les bulles (z-index:2) */
    }
    .crm-feed-empty {
      padding: 40px 16px; text-align: center;
      font-size: 13px; color: #6a6d85;
    }
    .crm-feed-item {
      position: relative;
      display: block;
      padding: 12px 14px;
      background: #1a1d2e;
      border: 1px solid #2a2d40;
      border-radius: 10px;
      transition: border-color 0.15s ease, background 0.15s ease;
    }
    .crm-feed-item:hover { border-color: #3a3e4f; background: #1d2034; }
    .crm-feed-item-done { opacity: 0.65; }
    .crm-feed-item-overdue {
      background: linear-gradient(180deg, rgba(239,68,68,0.08), #1a1d2e);
      border-color: rgba(239,68,68,0.25);
    }
    /* Bulle ronde latérale (icône du type d'objet) — positioned ABSOLUTE
       sur la ligne de vie verticale du parent.
       v1.50.142 fix #2 — Centrage correct sur la ligne + backgrounds opaques
       pour masquer la ligne (qui passait à travers les bulles tintées).
       Calcul : .crm-feed-list padding-left=56px ; .crm-feed-item commence donc
       à 56px ; l'icône (40px wide) doit être à left:-56px pour que son centre
       (à -56+20 = -36px relatif au .feed-item, ou 0+20=20px relatif au list)
       coïncide avec la ligne ::before à left:20px du list. */
    .crm-feed-icon {
      position: absolute;
      left: -56px;
      top: 50%;
      transform: translateY(-50%);
      width: 40px; height: 40px;
      display: inline-flex; align-items: center; justify-content: center;
      background-color: #272a3a;    /* fallback opaque (override par les classes typées) */
      border-radius: 50%;
      font-size: 15px;
      flex-shrink: 0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
      z-index: 2;                   /* explicit > .crm-feed-list::before (z:0) */
    }
    /* v1.50.143 fix #2 — backgrounds 100% OPAQUES (pas de rgba) pour garantir
       que la ligne du fil de vie est complètement masquée derrière chaque
       bulle. Les couleurs sont pré-calculées : teinte du type sur fond #14161e. */
    .crm-feed-icon-note     { color: #fbbf24; background-color: #3a2e15; }
    .crm-feed-icon-activity { color: #c8cae0; background-color: #272a3a; }
    .crm-feed-icon-call     { color: #22c55e; background-color: #163d28; }
    .crm-feed-icon-mail     { color: #4f7cff; background-color: #1f2b48; }
    .crm-feed-icon-file     { color: #f59e0b; background-color: #3a2a10; }

    /* ═════ v1.50.16 — Notes style PD natif sobre (post-it retiré) ═════ */
    .crm-feed-note {
      position: relative;
      background: #1a1d2e !important;
      border: 1px solid #2a2d40 !important;
      transition: border-color 0.15s ease, background 0.15s ease !important;
    }
    .crm-feed-note:hover {
      background: #1d2034 !important;
      border-color: #3a3d52 !important;
    }
    /* v1.50.144 — Cette règle est SUPPRIMÉE : elle écrasait le background opaque
       de .crm-feed-icon-note (ligne ~5011) avec un rgba transparent → la ligne
       du fil de vie passait à travers la bulle des notes. Le styling est
       maintenant cohérent dans .crm-feed-icon-note. */

    /* Pinned : bordure gauche orange + petit badge — pas de rotation, pas de gradient */
    .crm-feed-note-pinned {
      border-left: 3px solid #f59e0b !important;
      padding-left: 13px !important;
    }
    .crm-feed-note-pinned .crm-feed-type-badge {
      background: rgba(245,158,11,0.18) !important;
      color: #fbbf24 !important;
    }

    .crm-pin-btn { transition: all 0.15s ease; }
    .crm-pin-btn-active {
      background: rgba(245,158,11,0.18) !important;
      border-color: rgba(245,158,11,0.4) !important;
      color: #fbbf24 !important;
    }
    .crm-pin-btn-active:hover {
      background: rgba(245,158,11,0.28) !important;
    }
    /* v1.50.144 — .crm-feed-icon-activity est défini ligne ~5012 (background
       OPAQUE pour masquer la ligne). Le doublon a été supprimé ici. */
    .crm-feed-body { flex: 1; min-width: 0; }
    .crm-feed-meta {
      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
      font-size: 11px; color: #8b8ea5;
      margin-bottom: 6px;
    }
    .crm-feed-author { font-weight: 600; color: #c8cae0; }
    .crm-feed-sep { color: #4a4e60; }
    .crm-feed-date { color: #8b8ea5; }
    .crm-feed-type-badge {
      padding: 1px 7px;
      background: #272a3a; color: #8b8ea5;
      border-radius: 4px;
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .crm-feed-actions {
      margin-left: auto;
      display: flex; gap: 4px;
      opacity: 0; transition: opacity 0.12s;
    }
    .crm-feed-item:hover .crm-feed-actions { opacity: 1; }
    .crm-feed-subject {
      font-size: 13px; font-weight: 600; color: #fff;
      margin-bottom: 4px;
    }
    .crm-feed-content {
      font-size: 13px; color: #c8cae0; line-height: 1.5;
      word-wrap: break-word;
    }

    /* Sections accordéon (Détails inline en slide-in, Produits) */
    .crm-feed-section {
      margin-top: 18px;
      background: #1d1f2d;
      border: 1px solid #3a3e4f;
      border-radius: 10px;
      overflow: hidden;
    }
    .crm-feed-section-toggle {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%;
      padding: 12px 14px;
      background: transparent; color: #c8cae0;
      border: none;
      cursor: pointer;
      font-size: 13px; font-weight: 600; font-family: inherit;
      text-align: left;
    }
    .crm-feed-section-toggle:hover { background: #23263a; color: #fff; }
    .crm-feed-section-chevron {
      font-size: 14px; color: #8b8ea5;
    }
    .crm-feed-section-body {
      padding: 14px;
      border-top: 1px solid #3a3e4f;
    }

    /* Notes */
    .crm-note-list { display: flex; flex-direction: column; gap: 10px; }
    .crm-note-item {
      position: relative;
      padding: 12px 14px;
      background: #272a3a; border: 1px solid #3a3e4f;
      border-radius: 10px;
    }
    .crm-note-actions {
      position: absolute; top: 10px; right: 10px;
      display: flex; gap: 4px;
      opacity: 0; transition: opacity 0.15s;
    }
    .crm-note-item:hover .crm-note-actions { opacity: 1; }
    .crm-note-btn {
      padding: 4px 8px;
      background: #272a3a; color: #c8cae0;
      border: 1px solid #2a2c3e; border-radius: 5px;
      cursor: pointer; font-size: 12px; font-family: inherit;
      transition: all 0.15s;
    }
    .crm-note-btn:hover { background: #2a2c3e; color: #fff; }
    .crm-note-btn-danger:hover { background: #4d1f1f; border-color: #6e2d2d; color: #f87171; }
    .crm-note-meta {
      font-size: 11px; color: #8b8ea5;
      margin-bottom: 8px;
    }
    .crm-note-content {
      font-size: 13px; color: #c8cae0; line-height: 1.5;
      word-wrap: break-word;
    }

    /* v1.50.3 — Rich text rendu (notes + activity notes) */
    .crm-richtext { word-wrap: break-word; }
    .crm-richtext p { margin: 0 0 8px; line-height: 1.5; }
    .crm-richtext p:last-child { margin-bottom: 0; }
    .crm-richtext ul, .crm-richtext ol { margin: 0 0 8px; padding-left: 22px; }
    .crm-richtext li { margin-bottom: 3px; line-height: 1.45; }
    .crm-richtext strong, .crm-richtext b { font-weight: 700; color: #fff; }
    .crm-richtext em, .crm-richtext i { font-style: italic; }
    .crm-richtext u { text-decoration: underline; }
    .crm-richtext s { text-decoration: line-through; opacity: 0.7; }
    .crm-richtext a {
      color: #60a5fa;
      text-decoration: underline;
      text-decoration-color: rgba(96,165,250,0.4);
      transition: text-decoration-color 0.15s;
    }
    .crm-richtext a:hover { text-decoration-color: #60a5fa; }
    .crm-richtext blockquote {
      margin: 6px 0 8px;
      padding: 4px 12px;
      border-left: 3px solid #3a3e4f;
      color: #a0a2b8;
      font-style: italic;
    }
    .crm-richtext code {
      font-family: 'JetBrains Mono', monospace;
      background: rgba(255,255,255,0.05);
      padding: 1px 5px;
      border-radius: 4px;
      font-size: 0.92em;
    }
    .crm-richtext pre {
      font-family: 'JetBrains Mono', monospace;
      background: rgba(0,0,0,0.25);
      padding: 8px 10px;
      border-radius: 6px;
      overflow-x: auto;
      margin: 6px 0 8px;
      font-size: 12px;
    }
    .crm-richtext h1, .crm-richtext h2, .crm-richtext h3,
    .crm-richtext h4, .crm-richtext h5, .crm-richtext h6 {
      margin: 8px 0 4px;
      color: #fff;
      font-weight: 700;
      line-height: 1.3;
    }
    .crm-richtext h1 { font-size: 1.25em; }
    .crm-richtext h2 { font-size: 1.18em; }
    .crm-richtext h3 { font-size: 1.10em; }
    .crm-richtext h4, .crm-richtext h5, .crm-richtext h6 { font-size: 1em; }

    /* =========================================================================
       v1.50.199 — Intégration des éléments retenus de la v2 (thème abandonné).
       Source : feedback Maxime 2026-05-11 : « abandonner la V2 et le theme
       light, retirer les boutons. Intégrer les case a cocher V2 et le style
       de la page d activite V2 qui est mieux que la V1 ».
       Contenu :
         1. Inter font (déjà loadée via app.html depuis v1.50.194) appliquée
            globalement sur .crm-shell pour cohérence typographique.
         2. Checkbox custom (appearance:none + SVG mask checkmark animé +
            focus ring orange zebdev). Couvre .crm-shell ET portails outside
            (.crm-modal, .crm-detail-panel). Scope strict CRM, zéro impact
            sur les autres modules zebdev.
         3. Headers de table activités plus affirmés (weight 700, padding
            horizontal légèrement augmenté). Reste compatible avec la palette
            dark V1 existante.
       JAMAIS DE BACKTICK ICI - on est dans un template literal JS.
       ========================================================================= */

    /* ---- Inter sur .crm-shell (cascade vers tout le CRM) ---- */
    .crm-shell {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                   Roboto, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ---- Checkbox custom — replace native (Windows ugly) ---- */
    .crm-shell input[type="checkbox"],
    body:has(.crm-shell) .crm-modal input[type="checkbox"],
    body:has(.crm-shell) .crm-detail-panel input[type="checkbox"] {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      width: 16px;
      height: 16px;
      padding: 0;
      margin: 0;
      background: #272a3a;
      border: 1.5px solid #4a4e63;
      border-radius: 4px;
      cursor: pointer;
      position: relative;
      display: inline-grid;
      place-content: center;
      transition: background .15s ease, border-color .15s ease,
                  box-shadow .15s ease, transform .08s ease;
      flex-shrink: 0;
      vertical-align: middle;
      accent-color: auto;
    }
    .crm-shell input[type="checkbox"]:hover:not([disabled]),
    body:has(.crm-shell) .crm-modal input[type="checkbox"]:hover:not([disabled]),
    body:has(.crm-shell) .crm-detail-panel input[type="checkbox"]:hover:not([disabled]) {
      border-color: #f04d12;
      background: #2f3344;
    }
    .crm-shell input[type="checkbox"]:active:not([disabled]),
    body:has(.crm-shell) .crm-modal input[type="checkbox"]:active:not([disabled]) {
      transform: scale(0.92);
    }
    .crm-shell input[type="checkbox"]:focus-visible,
    body:has(.crm-shell) .crm-modal input[type="checkbox"]:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(240, 77, 18, 0.20);
    }
    .crm-shell input[type="checkbox"]::before,
    body:has(.crm-shell) .crm-modal input[type="checkbox"]::before,
    body:has(.crm-shell) .crm-detail-panel input[type="checkbox"]::before {
      content: "";
      width: 10px;
      height: 10px;
      background-color: #ffffff;
      -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
              mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
      transform: scale(0);
      transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .crm-shell input[type="checkbox"]:checked,
    body:has(.crm-shell) .crm-modal input[type="checkbox"]:checked,
    body:has(.crm-shell) .crm-detail-panel input[type="checkbox"]:checked {
      background: #f04d12;
      border-color: #f04d12;
    }
    .crm-shell input[type="checkbox"]:checked::before,
    body:has(.crm-shell) .crm-modal input[type="checkbox"]:checked::before,
    body:has(.crm-shell) .crm-detail-panel input[type="checkbox"]:checked::before {
      transform: scale(1);
    }
    .crm-shell input[type="checkbox"]:indeterminate,
    body:has(.crm-shell) .crm-modal input[type="checkbox"]:indeterminate {
      background: #f04d12;
      border-color: #f04d12;
    }
    .crm-shell input[type="checkbox"]:indeterminate::before,
    body:has(.crm-shell) .crm-modal input[type="checkbox"]:indeterminate::before {
      -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.4' stroke-linecap='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>") center/contain no-repeat;
              mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.4' stroke-linecap='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>") center/contain no-repeat;
      transform: scale(1);
    }
    .crm-shell input[type="checkbox"][disabled],
    body:has(.crm-shell) .crm-modal input[type="checkbox"][disabled] {
      background: #1a1c28;
      border-color: #2a2d40;
      cursor: not-allowed;
      opacity: 0.5;
    }

    /* ---- Radio custom (bonus, même esprit que checkbox) ---- */
    .crm-shell input[type="radio"],
    body:has(.crm-shell) .crm-modal input[type="radio"] {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      width: 16px;
      height: 16px;
      padding: 0;
      margin: 0;
      background: #272a3a;
      border: 1.5px solid #4a4e63;
      border-radius: 50%;
      cursor: pointer;
      display: inline-grid;
      place-content: center;
      transition: background .15s ease, border-color .15s ease,
                  box-shadow .15s ease, transform .08s ease;
      flex-shrink: 0;
      vertical-align: middle;
    }
    .crm-shell input[type="radio"]:hover:not([disabled]),
    body:has(.crm-shell) .crm-modal input[type="radio"]:hover:not([disabled]) {
      border-color: #f04d12;
      background: #2f3344;
    }
    .crm-shell input[type="radio"]:active:not([disabled]) { transform: scale(0.92); }
    .crm-shell input[type="radio"]:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(240, 77, 18, 0.20);
    }
    .crm-shell input[type="radio"]::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #f04d12;
      transform: scale(0);
      transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .crm-shell input[type="radio"]:checked { border-color: #f04d12; }
    .crm-shell input[type="radio"]:checked::before { transform: scale(1); }

    /* ---- Polish léger table activités (weights 700 sur headers) ---- */
    .crm-activities-table thead th {
      font-weight: 700;
      padding: 10px 14px;
      color: #9aa5b8;
    }
    .crm-activities-table tbody tr {
      transition: background .12s ease;
    }

    /* ---- Override des anciens styles checkbox activity-check (utilisaient
           accent-color qui ne suffit pas pour un rendu cohérent). Hauteur et
           focus restent identiques, le rendu visuel passe au custom. ---- */
    .crm-activity-check input[type="checkbox"],
    .crm-checkbox-row input[type="checkbox"] {
      width: 16px;
      height: 16px;
    }

    /* ---- v1.50.200 — Table activités : colonnes auto-fit (contenu) au lieu
           de stretch sur 100%. Demande Maxime : « élargies juste ce qu il faut
           pour que le texte de la colonne précédente s affiche complètement,
           pas en laissant des espaces vides énormes entre les colonnes ».
           Trailing empty space à droite OK, lisibilité prioritaire. ---- */
    .crm-activities-table {
      width: auto !important;          /* fini le stretch 100% */
      table-layout: auto !important;   /* colonnes sized par leur contenu */
    }
    .crm-act-row td {
      max-width: none !important;      /* fini la troncature 280px */
      overflow: visible !important;
      text-overflow: clip !important;
      /* white-space: nowrap est conservé (rule originale) → 1 ligne par cell */
    }
    .crm-act-subject {
      max-width: none !important;      /* fini la troncature 320px */
    }

    /* ---- v1.50.202 — Coloration de toute la ligne d'activité (texte ET
           éléments graphiques) selon le retard. Demande Maxime 2026-05-11 :
             - Overdue → rouge | Today → jaune | Futur + done → vert.
           Affecte : texte de toutes les cells, icône type, chips (bg tinté
           + border), checkbox custom (border, hover, état coché). Les 3
           états sont mutuellement exclusifs (un td date ne peut avoir
           qu'une seule des classes crm-act-due-overdue/today/le-default).
           ---- */

    /* ---- VERT — pas overdue ET pas today (futur + done sans retard) ---- */
    .crm-act-row:not(:has(.crm-act-due-overdue)):not(:has(.crm-act-due-today)) td,
    .crm-act-row:not(:has(.crm-act-due-overdue)):not(:has(.crm-act-due-today)) td * {
      color: #4ade80 !important;
    }
    .crm-act-row:not(:has(.crm-act-due-overdue)):not(:has(.crm-act-due-today)) .crm-act-subject-icon {
      color: #4ade80 !important;
    }
    .crm-act-row:not(:has(.crm-act-due-overdue)):not(:has(.crm-act-due-today)) td span[style*="background"] {
      background: rgba(74, 222, 128, 0.12) !important;
      border-color: rgba(74, 222, 128, 0.50) !important;
    }
    .crm-act-row:not(:has(.crm-act-due-overdue)):not(:has(.crm-act-due-today)) input[type="checkbox"] {
      border-color: #4ade80 !important;
    }
    .crm-act-row:not(:has(.crm-act-due-overdue)):not(:has(.crm-act-due-today)) input[type="checkbox"]:hover:not([disabled]) {
      border-color: #4ade80 !important;
      background: rgba(74, 222, 128, 0.10) !important;
    }
    .crm-act-row:not(:has(.crm-act-due-overdue)):not(:has(.crm-act-due-today)) input[type="checkbox"]:checked {
      background: #4ade80 !important;
      border-color: #4ade80 !important;
    }

    /* ---- JAUNE — due aujourd'hui ---- */
    .crm-act-row:has(.crm-act-due-today) td,
    .crm-act-row:has(.crm-act-due-today) td * {
      color: #fbbf24 !important;
    }
    .crm-act-row:has(.crm-act-due-today) .crm-act-subject-icon {
      color: #fbbf24 !important;
    }
    .crm-act-row:has(.crm-act-due-today) td span[style*="background"] {
      background: rgba(251, 191, 36, 0.14) !important;
      border-color: rgba(251, 191, 36, 0.55) !important;
    }
    .crm-act-row:has(.crm-act-due-today) input[type="checkbox"] {
      border-color: #fbbf24 !important;
    }
    .crm-act-row:has(.crm-act-due-today) input[type="checkbox"]:hover:not([disabled]) {
      border-color: #fbbf24 !important;
      background: rgba(251, 191, 36, 0.10) !important;
    }
    .crm-act-row:has(.crm-act-due-today) input[type="checkbox"]:checked {
      background: #fbbf24 !important;
      border-color: #fbbf24 !important;
    }

    /* ---- ROUGE — overdue ---- */
    .crm-act-row:has(.crm-act-due-overdue) td,
    .crm-act-row:has(.crm-act-due-overdue) td * {
      color: #ef4444 !important;
    }
    .crm-act-row:has(.crm-act-due-overdue) .crm-act-subject-icon {
      color: #ef4444 !important;
    }
    .crm-act-row:has(.crm-act-due-overdue) td span[style*="background"] {
      background: rgba(239, 68, 68, 0.14) !important;
      border-color: rgba(239, 68, 68, 0.55) !important;
    }
    .crm-act-row:has(.crm-act-due-overdue) input[type="checkbox"] {
      border-color: #ef4444 !important;
    }
    .crm-act-row:has(.crm-act-due-overdue) input[type="checkbox"]:hover:not([disabled]) {
      border-color: #ef4444 !important;
      background: rgba(239, 68, 68, 0.10) !important;
    }
    .crm-act-row:has(.crm-act-due-overdue) input[type="checkbox"]:checked {
      background: #ef4444 !important;
      border-color: #ef4444 !important;
    }