:root {
      --fg:#1b1a17; --muted:#6b6b63; --faint:#9c9c92;
      --border:#e8e5dd; --border-strong:#dad6ca;
      --bg:#f6f5ef; --panel:#fff; --panel-2:#fbfaf6;
      --accent:#1763ad; --accent-2:#0f4f8f; --accent-bg:#e7f0fb;
      --warn-bg:#fbeed8; --warn-fg:#8a4f08;
      --ok-bg:#e9f3dc; --ok-fg:#3a6c10; --danger:#b23b2e;
      --shadow:0 1px 2px rgba(20,18,12,.04), 0 4px 14px rgba(20,18,12,.05);
      --shadow-lg:0 12px 44px rgba(20,18,12,.22);
      --r:12px; --r-sm:9px; --r-xs:7px;
      --tap:40px;
    }
    * { box-sizing:border-box; }
    html, body { height:100%; }
    body {
      margin:0; background:var(--bg); color:var(--fg);
      font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
      font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }
    button { font-family:inherit; cursor:pointer; }
    a { color:var(--accent); }
    ::selection { background:var(--accent-bg); }
    /* Scrollbars discrètes */
    * { scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
    *::-webkit-scrollbar { width:9px; height:9px; }
    *::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; border:2px solid transparent; background-clip:content-box; }

    .app { display:flex; flex-direction:column; height:100vh; height:100dvh; }

    header {
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:10px 18px; background:rgba(255,255,255,.85); backdrop-filter:saturate(1.4) blur(8px);
      border-bottom:1px solid var(--border); position:relative; z-index:30; flex:none;
    }
    .logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; letter-spacing:-.01em; white-space:nowrap; }
    .logo-img { height:26px; width:auto; display:block; }
    .logo .ent-name { color:var(--muted); font-weight:500; }
    .right-head { display:flex; align-items:center; gap:8px; }
    .hdr-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--border); background:var(--panel); border-radius:var(--r-sm); font-size:18px; color:var(--fg); line-height:1; transition:background .12s; }
    .hdr-btn:hover { background:var(--panel-2); }
    .hdr-dot { position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--danger); box-shadow:0 0 0 2px var(--panel); }
    .avatar {
      width:36px; height:36px; border-radius:50%; background:var(--accent-bg); color:var(--accent);
      display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex:none;
      box-shadow:inset 0 0 0 1px rgba(23,99,173,.12); border:none; cursor:pointer; font-family:inherit; transition:filter .12s, transform .14s cubic-bezier(.2,.8,.2,1);
    }
    .avatar:hover { filter:brightness(.97); transform:scale(1.08); }
    .avatar.lg { width:46px; height:46px; font-size:15px; cursor:default; }
    .avatar.lg:hover { filter:none; }

    /* Switcher de module (Support | Ventes) */
    .module-switch { display:flex; gap:4px; background:var(--panel-2); border:1px solid var(--border); border-radius:99px; padding:3px; }
    .module-tab { border:none; background:none; border-radius:99px; padding:6px 16px; font-size:13px; font-weight:600; color:var(--muted); transition:background .12s, color .12s; }
    .module-tab:hover { color:var(--fg); }
    .module-tab.active { background:var(--panel); color:var(--accent); box-shadow:var(--shadow); }

    /* --- Module Vente : tableau Kanban --- */
    .board { display:flex; gap:12px; padding:16px; overflow-x:auto; flex:1; min-height:0; align-items:flex-start; }
    .col { background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-sm); width:288px; flex:none; display:flex; flex-direction:column; max-height:100%; }
    .col.drop { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
    .col-head { padding:10px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .col-title { font-weight:600; font-size:13px; }
    .col-meta { font-size:11px; color:var(--faint); white-space:nowrap; }
    .col-body { padding:8px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; min-height:48px; }
    .card { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-xs); padding:10px; font-size:13px; cursor:grab; box-shadow:var(--shadow); transition:border-color .12s, transform .06s; }
    .card:hover { border-color:var(--border-strong); }
    .card:active { cursor:grabbing; }
    .card.dragging { opacity:.45; }
    .card-title { font-weight:600; margin-bottom:5px; }
    .card-sub { font-size:12px; color:var(--muted); display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
    .card-amount { font-weight:700; color:var(--fg); }
    .deal-won { color:var(--ok-fg); }
    .deal-lost { color:var(--danger); }
    .board-empty { display:flex; align-items:center; justify-content:center; flex:1; color:var(--faint); text-align:center; padding:24px; }

    .ghost {
      background:var(--panel); border:1px solid var(--border); border-radius:var(--r-sm);
      padding:7px 13px; font-size:13px; color:var(--fg); transition:background .12s, border-color .12s, transform .04s;
      white-space:nowrap;
    }
    .ghost:hover { background:var(--panel-2); border-color:var(--border-strong); transform:translateY(-1px); box-shadow:0 2px 8px rgba(20,18,12,.06); }
    .ghost:active { transform:translateY(0); box-shadow:none; }
    .ghost-warn { color:var(--warn-fg); border-color:#eccfa0; background:var(--warn-bg); }
    .ghost-warn:hover { background:#f8e6c8; }
    .ghost.active { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
    button:focus-visible, a:focus-visible, [contenteditable]:focus-visible, input:focus-visible, select:focus-visible {
      outline:2px solid var(--accent); outline-offset:2px;
    }
    .icon-btn {
      display:none; align-items:center; justify-content:center;
      width:var(--tap); height:var(--tap); min-width:var(--tap);
      border:1px solid var(--border); background:var(--panel); border-radius:var(--r-sm);
      font-size:18px; color:var(--fg); line-height:1;
    }
    .icon-btn:hover { background:var(--panel-2); }

    .banner {
      background:var(--warn-bg); color:var(--warn-fg); padding:10px 18px; font-size:13px;
      display:flex; justify-content:space-between; align-items:center; gap:12px; flex:none;
    }
    .banner button { background:var(--warn-fg); color:#fff; border:none; border-radius:var(--r-xs); padding:7px 13px; font-size:13px; white-space:nowrap; }

    .cols { display:grid; grid-template-columns:300px 1fr 240px; flex:1; min-height:0; }
    /* Laisse les colonnes (items de grille) rétrécir au lieu de déborder horizontalement
       sur du contenu long sans retour à la ligne (sinon scroll horizontal + modale décalée). */
    .cols > * { min-width:0; }
    /* Module Contacts : deux panneaux (liste + fiche 360) au lieu de trois. */
    .contacts-cols { grid-template-columns:340px 1fr; }

    /* Module Contacts : vues pleine largeur (tableau / fiche 360). */
    .ct-view { display:flex; flex-direction:column; flex:1; min-height:0; background:var(--panel); }
    .ct-head { display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--border); }
    .ct-title { display:flex; align-items:baseline; gap:10px; }
    .ct-title h4 { margin:0; font-size:16px; }
    .ct-count { font-size:12px; color:var(--faint); white-space:nowrap; }
    .ct-head-tools { margin-left:auto; display:flex; align-items:center; gap:8px; }
    .ct-search { width:280px; max-width:40vw; }
    .ct-bulk { display:flex; align-items:center; gap:12px; padding:9px 20px; background:var(--accent-bg); border-bottom:1px solid var(--border); font-size:13px; font-weight:600; color:var(--accent); }
    .ct-table-wrap { flex:1; min-height:0; overflow-y:auto; }
    .ct-table { }
    .ct-table th { position:sticky; top:0; z-index:2; background:var(--panel-2); }
    .ct-table td, .ct-table th { padding-left:20px; }
    .ct-table td:last-child, .ct-table th:last-child { padding-right:20px; }
    .ct-cb { width:36px; text-align:center; }
    .ct-cb input { cursor:pointer; }
    .ct-sortable { cursor:pointer; user-select:none; }
    .ct-sortable:hover { color:var(--fg); }
    .ct-chev { margin-left:5px; color:var(--accent); font-size:10px; }
    .ct-row { cursor:pointer; transition:background .12s; }
    .ct-row:hover { background:var(--panel-2); }
    .ct-row.sel { background:var(--accent-bg); }
    .ct-contact { display:flex; align-items:center; gap:10px; min-width:0; }
    .ct-contact .avatar { cursor:inherit; }
    .ct-contact .avatar:hover { filter:none; transform:none; }
    .ct-contact-txt { display:flex; flex-direction:column; min-width:0; }
    .ct-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ct-email { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ct-pills { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
    .ct-pager { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; border-top:1px solid var(--border); }
    .ct-detail { flex:1; min-height:0; overflow-y:auto; padding:16px 20px; max-width:1100px; width:100%; margin:0 auto; font-size:13px; }
    .ct-detail .details-head h4 { font-size:16px; }

    /* --- Liste --- */
    .list { border-right:1px solid var(--border); overflow-y:auto; background:var(--panel); min-height:0; }
    .list-head { position:sticky; top:0; z-index:6; background:rgba(255,255,255,.95); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--border); }
    .search { display:flex; gap:6px; padding:10px 10px 8px; }
    .search-input { flex:1; min-width:0; padding:8px 11px; border:1px solid var(--border); border-radius:var(--r-sm); font-family:inherit; font-size:13px; background:var(--panel); }
    .search-input:focus { outline:none; box-shadow:inset 0 0 0 1px var(--accent); border-color:var(--accent); }
    .dates-toggle { padding:6px 10px; }
    .dates-toggle.active { border-color:var(--accent); color:var(--accent); }
    .search-dates { display:flex; align-items:center; gap:6px; padding:0 10px 8px; font-size:12px; flex-wrap:wrap; }
    .search-dates input { padding:6px 8px; border:1px solid var(--border); border-radius:var(--r-xs); font-family:inherit; font-size:12px; }
    .tabs { display:flex; gap:20px; padding:0 16px; }
    .tab {
      padding:13px 2px; margin-bottom:-1px; border:none; border-bottom:2px solid transparent;
      border-radius:0; background:none; color:var(--muted); font-size:13px; font-weight:500;
      transition:color .12s, border-color .12s;
    }
    .tab:hover { color:var(--fg); }
    .tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
    .tk { padding:13px 16px; border-bottom:1px solid var(--border); cursor:pointer; border-left:3px solid transparent; transition:background .15s, transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .14s; animation:fadeInUp .28s ease both; }
    .tk:hover { background:var(--panel-2); transform:translateX(3px); }
    .tk.sel { background:var(--accent-bg); border-left-color:var(--accent); box-shadow:inset 0 0 0 1px rgba(23,99,173,.08); }
    .tk.sel .tk-name { color:var(--accent); }
    .tk.stale:not(.sel) { border-left-color:var(--danger); }
    .tk-stale { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:600; color:var(--danger); background:#fdece9; border-radius:99px; padding:1px 8px; }
    .tk-section { padding:9px 16px 6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); background:var(--panel-2); border-bottom:1px solid var(--border); }
    .tk-section-n { display:inline-block; margin-left:4px; color:var(--faint); font-weight:600; }
    .tk-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
    .tk-name { flex:1; min-width:0; font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .tk-id { font-size:11px; color:var(--faint); flex:none; }
    .tk-assignee { flex:none; max-width:48%; display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:600; color:var(--accent); background:var(--accent-bg); border-radius:99px; padding:1px 8px; white-space:nowrap; overflow:hidden; }
    .tk-assignee-ic { font-size:10px; line-height:1; }
    .tk-sub { font-size:13px; margin:3px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .tk-prev { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .pill { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; padding:2px 9px 2px 8px; border-radius:99px; white-space:nowrap; letter-spacing:.01em; }
    .pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
    .p-open { background:var(--warn-bg); color:var(--warn-fg); }
    .p-open::before { animation:pulseDot 1.8s ease-in-out infinite; }
    .p-pending { background:var(--accent-bg); color:var(--accent); }
    .p-resolved,.p-closed { background:var(--ok-bg); color:var(--ok-fg); }
    .p-muted { background:var(--bg); color:var(--faint); }
    .p-urgent { background:#fdece9; color:var(--danger); }
    .p-urgent::before { animation:pulseDot 1.8s ease-in-out infinite; }
    /* Étiquettes (panneau Détails) */
    .tag-list { display:flex; flex-wrap:wrap; gap:6px; }
    .tag-chip { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; padding:2px 4px 2px 9px; border-radius:99px; border:1px solid var(--border); background:var(--panel-2); color:var(--fg); white-space:nowrap; }
    .tag-x { border:none; background:none; color:inherit; cursor:pointer; font-size:14px; line-height:1; padding:0 3px; border-radius:6px; opacity:.75; }
    .tag-x:hover { opacity:1; }

    /* --- Conversation --- */
    .conv { display:flex; flex-direction:column; min-height:0; background:var(--panel); }
    .conv-head { padding:13px 18px; border-bottom:1px solid var(--border); display:flex; gap:12px; align-items:center; }
    .conv-head-main { flex:1; min-width:0; }
    .conv-head-main > div:first-child { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .conv-head-main > div:last-child { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    /* Panneau Résumé (repliable) en tête du fil */
    .summary { border-bottom:1px solid var(--border); background:var(--panel-2); }
    .summary-head { display:flex; align-items:center; gap:8px; padding:10px 18px; cursor:pointer; font-size:13px; }
    .summary-head:hover { background:var(--bg); }
    .summary-title { font-weight:600; white-space:nowrap; }
    .summary-peek { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
    .summary-meta { margin-left:auto; font-size:11px; color:var(--faint); white-space:nowrap; }
    .summary-body { padding:0 18px 14px; }
    .summary-sub { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin:10px 0 3px; }
    .summary-sub:first-child { margin-top:0; }
    .summary-text { font-size:13.5px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--fg); }
    .summary-empty { font-size:13px; color:var(--faint); }
    .summary-regen { margin-top:10px; padding:6px 12px; font-size:12px; }
    .todo-badge { flex-shrink:0; background:var(--warn-bg); color:var(--warn-fg); border:1px solid #eccfa0; border-radius:999px; padding:1px 9px; font-size:11px; font-weight:600; white-space:nowrap; }
    .todo-box { margin-top:12px; padding:10px 12px; background:var(--warn-bg); border:1px solid #eccfa0; border-radius:var(--r-sm); }
    .todo-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--warn-fg); margin-bottom:5px; }
    .todo-list { margin:0; padding-left:18px; font-size:13px; line-height:1.5; color:var(--fg); }
    .todo-list li { margin-bottom:3px; }

    /* Fil de messages : chaque message en carte, distinction entrant/sortant nette. */
    .thread { flex:1; overflow-y:auto; padding:16px 22px; display:flex; flex-direction:column; gap:10px; }
    .msg { flex:none; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--panel); overflow:hidden; animation:fadeInUp .3s ease both; }
    .msg.out { box-shadow:inset 3px 0 0 var(--accent); }
    .msg-head { display:flex; align-items:center; gap:9px; cursor:pointer; padding:9px 12px; }
    .msg:not(.collapsed) .msg-head { border-bottom:1px solid var(--border); }
    .msg.out:not(.collapsed) .msg-head { background:var(--accent-bg); border-bottom-color:transparent; }
    .msg-head:hover { background:var(--bg); }
    .msg.out:not(.collapsed) .msg-head:hover { background:var(--accent-bg); }
    .msg-chevron { color:var(--faint); flex:none; }
    .msg.out .msg-chevron { color:var(--accent); }
    .msg.collapsed .msg-head { padding-bottom:2px; }
    .msg-preview { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; padding:0 12px 9px 47px; }
    .msg-who { display:flex; align-items:center; gap:9px; font-weight:600; font-size:13px; flex:none; min-width:0; }
    .msg-who-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .msg.out .msg-who { color:var(--accent); }
    .msg-dir { flex:none; font-size:10.5px; font-weight:500; color:var(--faint); border:1px solid var(--border); border-radius:99px; padding:0 7px; }
    .msg.out .msg-dir { color:var(--accent); border-color:var(--accent); }
    .msg-peek { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
    .msg-av { width:26px; height:26px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:10px; background:var(--bg); color:var(--muted); font-weight:700; }
    .msg.out .msg-av { background:var(--accent-bg); color:var(--accent); }
    .msg-meta { font-size:11px; color:var(--faint); white-space:nowrap; flex:none; margin-left:auto; }
    .msg-body { font-size:13.5px; line-height:1.65; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; padding:12px; }
    .msg-body .rich { white-space:normal; }
    .msg-body img { max-width:100%; height:auto; }

    /* --- Composer --- */
    .composer { border-top:1px solid var(--border); padding:14px 18px calc(14px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; min-height:0; background:var(--panel); }
    .expand-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 11px; font-size:12px; }
    .conv.maxed .thread { display:none; }
    .conv.maxed .composer { flex:1; }
    .conv.maxed .editor { flex:1; max-height:none; }
    .composer-bar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; }
    .toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:3px; padding:6px; border:1px solid var(--border); border-bottom:none; border-radius:var(--r-sm) var(--r-sm) 0 0; background:var(--panel-2); }
    .toolbar button { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 8px; border:1px solid transparent; border-radius:var(--r-xs); background:none; font-size:13px; color:var(--fg); line-height:1; }
    .toolbar button:hover { background:#fff; border-color:var(--border); }
    .toolbar select { width:auto; min-width:80px; height:30px; padding:0 6px; font-size:12px; }
    .tb-sep { width:1px; height:18px; background:var(--border); margin:0 4px; }
    .tb-color { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:var(--r-xs); font-weight:700; cursor:pointer; position:relative; }
    .tb-color:hover { background:#fff; box-shadow:inset 0 0 0 1px var(--border); }
    .tb-color input { position:absolute; inset:0; opacity:0; cursor:pointer; }
    .editor { width:100%; min-height:70px; max-height:280px; overflow-y:auto; border:1px solid var(--border); border-radius:0 0 var(--r-sm) var(--r-sm); padding:11px; font-size:13.5px; line-height:1.55; background:#fff; transition:min-height .15s ease, box-shadow .12s; }
    .editor:focus { outline:none; box-shadow:inset 0 0 0 1px var(--accent); }
    .composer.focused .editor { min-height:200px; }
    .editor:empty:before { content:attr(data-placeholder); color:var(--faint); }
    .editor[contenteditable="false"] { background:var(--bg); color:var(--faint); }
    .editor img { max-width:100%; border-radius:var(--r-xs); margin:4px 0; }
    .rich { white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
    .rich img { max-width:100%; height:auto; border-radius:var(--r-xs); }
    .rich p { margin:0 0 6px; }
    /* Tableaux / blocs préformatés larges venant des emails : scroll DANS leur boîte,
       pas sur toute la page. */
    .rich table, .rich pre { display:block; max-width:100%; overflow-x:auto; }
    .atts { display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 12px; }
    .att { display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:5px 10px; border:1px solid var(--border); border-radius:99px; color:var(--accent); text-decoration:none; background:var(--panel); }
    .att:hover { background:var(--bg); }
    .send { background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border:none; border-radius:var(--r-sm); padding:10px 20px; font-size:13.5px; font-weight:600; box-shadow:0 1px 2px rgba(15,79,143,.25); transition:filter .12s, transform .1s cubic-bezier(.2,.8,.2,1), box-shadow .12s; }
    .send:hover:not(:disabled) { filter:brightness(1.07); transform:translateY(-1px); box-shadow:0 4px 14px rgba(15,79,143,.28); }
    .send:active:not(:disabled) { transform:translateY(0); box-shadow:0 1px 2px rgba(15,79,143,.25); }
    .send:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
    .send-split { position:relative; display:inline-flex; }
    .send-split .send-main { border-top-right-radius:0; border-bottom-right-radius:0; }
    .send-caret { padding:10px 10px; border-top-left-radius:0; border-bottom-left-radius:0; box-shadow:inset 1px 0 0 rgba(255,255,255,.25); display:flex; align-items:center; }
    .send-menu { position:absolute; right:0; bottom:calc(100% + 6px); background:#fff; border:1px solid var(--border); border-radius:var(--r-sm); box-shadow:var(--shadow-lg); padding:4px; z-index:60; white-space:nowrap; }
    .send-menu .ghost { display:block; width:100%; text-align:left; border:none; }
    .menu-overlay { position:fixed; inset:0; z-index:55; }

    /* --- Détails --- */
    .details { border-left:1px solid var(--border); padding:16px; background:var(--panel); font-size:13px; overflow-y:auto; min-height:0; }
    .details-head { display:flex; align-items:center; justify-content:space-between; }
    .details-head h4 { margin:0 0 4px; font-size:14px; }
    .details-close { display:none; }
    .dl { color:var(--muted); font-size:12px; margin:12px 0 3px; }
    /* Sélecteur de langue : bouton globe + menu déroulant (drapeau par langue). */
    .lang-wrap { position:relative; display:inline-flex; }
    .lang-btn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 9px; border:1px solid var(--border); border-radius:var(--r-xs); background:var(--panel); color:var(--fg); font:inherit; font-size:13px; cursor:pointer; }
    .lang-btn:hover { border-color:var(--border-strong); background:var(--panel-2); }
    .lang-btn-flag { font-size:15px; line-height:1; }
    .lang-btn-name { line-height:1; }
    .lang-btn-caret { color:var(--faint); }
    .lang-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:60; min-width:170px; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-sm); box-shadow:var(--shadow-lg); padding:4px; animation:pop .14s ease; }
    .lang-menu-item { display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border:none; background:none; border-radius:var(--r-xs); font:inherit; font-size:13px; color:var(--fg); cursor:pointer; text-align:left; }
    .lang-menu-item:hover { background:var(--bg); }
    .lang-menu-item.active { background:var(--accent-bg); color:var(--accent); }
    .lang-flag { font-size:16px; line-height:1; flex:none; }
    .lang-name { flex:1; }
    .lang-check { color:var(--accent); flex:none; }
    /* Panneau Détails : regroupement des champs par section, séparées par un filet. */
    .details-group { padding:14px 0; border-bottom:1px solid var(--border); }
    .details-group:first-of-type { padding-top:10px; }
    .details-group:last-of-type { border-bottom:none; }
    .details-group-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; }
    .details-group .dl:first-of-type { margin-top:0; }
    /* Panneau Détails optimisé : carte client, grille de contrôles, sections repliables. */
    .dp-client { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px; margin-bottom:12px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--panel); cursor:pointer; }
    .dp-client:hover { border-color:var(--accent); background:var(--accent-bg); }
    .dp-client-av { width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; background:var(--accent-bg); color:var(--accent); }
    .dp-client-txt { display:flex; flex-direction:column; min-width:0; flex:1; }
    .dp-client-name { font-weight:600; font-size:13px; color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .dp-client-email { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .dp-client > svg { flex:none; color:var(--faint); }
    .dp-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; }
    .dp-field { min-width:0; }
    .dp-field .dl { margin-top:0; }
    .dp-field select { width:100%; box-sizing:border-box; }
    .dp-tags { padding:12px 0; border-bottom:1px solid var(--border); }
    .dp-tags .dl { margin-top:0; }
    .dp-sect { border-bottom:1px solid var(--border); }
    .dp-sect-head { display:flex; align-items:center; gap:8px; width:100%; padding:11px 0; background:none; border:none; cursor:pointer; font:inherit; color:var(--fg); text-align:left; }
    .dp-sect-head:hover .dp-sect-title { color:var(--accent); }
    .dp-sect-chev { color:var(--faint); flex:none; }
    .dp-sect-title { flex:1; font-size:13px; }
    .dp-sect-count { flex:none; font-size:11px; background:var(--bg); color:var(--muted); border-radius:99px; padding:1px 8px; }
    .dp-sect-body { padding:0 0 12px; }
    .dp-meta { margin-top:14px; font-size:12px; color:var(--faint); }
    .dp-danger { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
    /* Issues GitHub liées (panneau Détails) */
    .gh-issue { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:8px 10px; margin-bottom:6px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--panel-2); font-size:13px; }
    .gh-issue > a { font-weight:600; }
    .gh-issue .pill { font-size:10px; }
    .gh-unlink { margin-left:auto; border:none; background:none; color:var(--faint); cursor:pointer; font-size:13px; line-height:1; padding:3px 5px; border-radius:6px; }
    .gh-unlink:hover { color:var(--danger); background:var(--bg); }
    .gh-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
    .gh-actions .ghost { padding:6px 12px; font-size:12.5px; }
    select { width:100%; padding:9px; border:1px solid var(--border); border-radius:var(--r-xs); font-size:13px; font-family:inherit; background:var(--panel); }
    select:focus { outline:none; box-shadow:inset 0 0 0 1px var(--accent); border-color:var(--accent); }

    /* Bouton lien discret (nom du contact -> fiche 360) */
    .link-btn { border:none; background:none; padding:0; margin:0; font:inherit; color:var(--accent); cursor:pointer; text-align:left; }
    .link-btn:hover { text-decoration:underline; }

    /* Notes internes (collaboration) */
    /* Notes internes : encadré « équipe interne » mis en avant (teinte warning). */
    .dp-notes { margin:12px 0; border:1px solid #eccfa0; border-radius:var(--r-sm); background:var(--warn-bg); overflow:hidden; }
    .dp-notes-head { display:flex; align-items:center; gap:7px; padding:9px 12px; border-bottom:1px solid #eccfa0; }
    .dp-notes-head > svg { color:var(--warn-fg); flex:none; }
    .dp-notes-title { flex:1; font-weight:600; font-size:13px; color:var(--warn-fg); }
    .dp-notes-count { flex:none; font-size:11px; background:var(--warn-fg); color:#fff; border-radius:99px; padding:1px 8px; }
    .dp-notes-body { padding:10px 12px; }
    .dp-notes-empty { color:var(--warn-fg); font-size:12px; opacity:.75; margin-bottom:6px; }
    .dp-notes .note { background:var(--panel); }
    .dp-notes .note-input { background:var(--panel); border-color:#eccfa0; }
    .note { padding:8px 10px; margin-bottom:6px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--panel-2); font-size:13px; }
    .note-head { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--faint); margin-bottom:3px; }
    .note-author { font-weight:600; color:var(--muted); }
    .note-body { white-space:pre-wrap; word-break:break-word; }
    .note-x { margin-left:auto; border:none; background:none; color:var(--faint); cursor:pointer; font-size:13px; line-height:1; padding:2px 5px; border-radius:6px; }
    .note-x:hover { color:var(--danger); background:var(--bg); }
    .note-input { width:100%; box-sizing:border-box; padding:8px; border:1px solid var(--border); border-radius:var(--r-xs); font:inherit; font-size:13px; resize:vertical; min-height:52px; background:var(--panel); }
    .note-input:focus { outline:none; box-shadow:inset 0 0 0 1px var(--accent); border-color:var(--accent); }

    /* Timeline / activité */
    .tl { list-style:none; margin:6px 0 0; padding:0; border-left:2px solid var(--border); }
    .tl-item { position:relative; padding:0 0 12px 14px; font-size:12.5px; }
    .tl-item::before { content:''; position:absolute; left:-5px; top:4px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
    .tl-type { font-weight:600; }
    .tl-meta { color:var(--faint); font-size:11px; margin-top:1px; }

    .empty { display:flex; align-items:center; justify-content:center; height:100%; color:var(--faint); padding:24px; text-align:center; }
    .empty-icon { font-size:44px; line-height:1; margin-bottom:12px; animation:float 3.5s ease-in-out infinite; }
    .spinner { width:24px; height:24px; border:2.5px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; margin:0 auto 12px; }

    /* --- Modales --- */
    .modal-bg { position:fixed; inset:0; background:rgba(20,18,12,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50; animation:fade .15s ease; }
    .modal { background:#fff; border-radius:var(--r); padding:24px; width:100%; max-width:440px; max-height:calc(100dvh - 32px); overflow-y:auto; box-shadow:var(--shadow-lg); animation:pop .16s ease; }
    @keyframes fade { from { opacity:0; } }
    @keyframes pop { from { opacity:0; transform:translateY(8px) scale(.99); } }
    @keyframes fadeInUp { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
    @keyframes slideInLeft { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:none; } }
    @keyframes pulseDot { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(.55); opacity:.45; } }
    @keyframes spin { to { transform:rotate(360deg); } }
    @keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
    /* Consentement email : types d'abonnement (Réglages) + fiche 360. */
    .sub-type-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--border); }
    .sub-type-row:first-child { border-top:none; padding-top:0; }
    .sub-type-info { min-width:0; }
    .sub-type-name { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:500; font-size:14px; }
    .sub-type-key { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--faint); background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:1px 6px; }
    .sub-type-desc { color:var(--muted); font-size:12px; margin-top:3px; }
    .sub-type-toggles { display:flex; gap:20px; flex:none; }
    .sub-switch-cell { display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; }
    .sub-switch-cell-label { font-size:12px; color:var(--muted); }
    .sub-list { display:flex; flex-direction:column; gap:6px; }
    .sub-item { display:flex; align-items:center; gap:10px; }
    .sub-item-name { flex:1; min-width:0; font-size:13px; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sub-item-btn { padding:4px 10px; font-size:12px; }
    .sub-deliver { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

    /* --- Campagnes (envoi groupé) --- */
    .cp-form { max-width:640px; padding:20px; overflow-y:auto; }
    .cp-form select, .cp-form .search-input { width:100%; }
    .cp-note { color:var(--muted); font-size:13px; line-height:1.5; margin:6px 0 0; }
    .cp-preview, .cp-report { margin-top:20px; padding:16px; border:1px solid var(--border); border-radius:var(--r-md, 12px); background:var(--panel-2); }
    .cp-report-title { font-size:15px; font-weight:600; margin-bottom:14px; }
    .cp-stats { display:flex; gap:14px; flex-wrap:wrap; }
    .cp-stat { flex:1; min-width:110px; display:flex; flex-direction:column; gap:2px; padding:12px 14px; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-sm); }
    .cp-stat-n { font-size:24px; font-weight:700; line-height:1.1; }
    .cp-stat-l { font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
    .cp-stat.ok .cp-stat-n { color:var(--ok-fg); }
    .cp-stat.muted .cp-stat-n { color:var(--faint); }
    .cp-stat.warn .cp-stat-n { color:var(--warn-fg); }
    .cp-reasons { margin-top:14px; }
    .cp-reason-list { list-style:none; margin:6px 0 0; padding:0; }
    .cp-reason-list li { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--border); font-size:13px; }
    .cp-reason-list li:last-child { border-bottom:none; }
    .cp-reason-n { font-weight:600; color:var(--muted); }

    /* --- Factures --- */
    .inv-lines { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
    .inv-line { display:flex; gap:8px; align-items:center; }
    .inv-line input { flex:1; min-width:0; padding:8px; border:1px solid var(--border); border-radius:var(--r-xs); font-family:inherit; font-size:13px; }
    .inv-line input:focus { outline:none; box-shadow:inset 0 0 0 1px var(--accent); border-color:var(--accent); }
    .inv-line-num { width:100px; flex:none !important; text-align:right; }
    .inv-line-total { display:flex; align-items:center; justify-content:flex-end; font-size:13px; color:var(--muted); }
    .inv-line-x { flex:none; }
    .inv-line-head { color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; padding-right:0; }
    .inv-line-head span { flex:1; }
    .inv-line-head .inv-line-num { width:100px; flex:none; }
    .inv-line-head .inv-line-x { width:24px; flex:none; }
    .inv-totals { margin-top:16px; max-width:320px; margin-left:auto; }
    .inv-total-row { display:flex; justify-content:space-between; gap:16px; padding:6px 0; font-size:14px; border-bottom:1px solid var(--border); }
    .inv-total-ttc { font-weight:700; font-size:16px; border-bottom:none; padding-top:10px; }
    .inv-preview { width:100%; height:600px; border:1px solid var(--border); border-radius:var(--r-sm); background:#fff; }
    /* Éditeur de facture : contrôles pleine largeur dans les cartes + rail récap. */
    .inv-edit select, .inv-edit .search-input { width:100%; box-sizing:border-box; }
    .inv-edit select { padding:8px; border:1px solid var(--border); border-radius:var(--r-xs); font:inherit; font-size:13px; background:var(--panel); }
    /* Inputs de champ (dates, TVA…) : bordure/padding cohérents, sans toucher aux inputs de lignes. */
    .inv-edit .co-field input { width:100%; box-sizing:border-box; padding:9px; border:1px solid var(--border); border-radius:var(--r-xs); font-family:inherit; font-size:13px; background:var(--panel); }
    .inv-edit .co-field input:focus { outline:none; box-shadow:inset 0 0 0 1px var(--accent); border-color:var(--accent); }
    .inv-type-hint { margin-top:8px; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
    .inv-type-hint b { color:var(--fg); font-weight:600; }
    .co-section .inv-totals { margin:0; max-width:none; }
    .co-section .inv-coll:first-of-type, .co-section .inv-lines:first-child { margin-top:0; }
    .inv-side-actions { display:flex; flex-direction:column; gap:8px; }
    .inv-side-actions button { width:100%; }
    .dl-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:8px 20px; margin:0; }
    .dl-grid dt { margin-top:0; }
    .dl-grid dd { margin:0; font-size:14px; }

    /* Constructeur de schéma (Types de facture) + collections (formulaire de facture). */
    .it-builder { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
    .it-fields { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
    .it-field { display:flex; gap:8px; align-items:center; }
    .it-field input[type=text], .it-field > input { flex:1; min-width:0; padding:8px; border:1px solid var(--border); border-radius:var(--r-xs); font-family:inherit; font-size:13px; }
    .it-field input:focus, .it-field select:focus { outline:none; box-shadow:inset 0 0 0 1px var(--accent); border-color:var(--accent); }
    .it-field-type { width:120px; flex:none !important; padding:8px; border:1px solid var(--border); border-radius:var(--r-xs); font-family:inherit; font-size:13px; }
    .it-field-req { width:56px; flex:none !important; display:flex; justify-content:center; align-items:center; }
    .it-field-x { flex:none; }
    .it-field-head { color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; }
    .it-field-head span { flex:1; }
    .it-field-head .it-field-type { width:120px; flex:none; }
    .it-field-head .it-field-req { width:56px; flex:none; }
    .it-field-head .it-field-x { width:24px; }
    .it-empty { color:var(--faint); font-size:12px; padding:4px 0; }
    .it-collection { border:1px solid var(--border); border-radius:var(--r-sm); padding:10px; margin-top:8px; }
    .it-collection-head { display:flex; gap:8px; align-items:center; margin-bottom:6px; }
    .it-collection-head input { flex:1; min-width:0; padding:8px; border:1px solid var(--border); border-radius:var(--r-xs); font-family:inherit; font-size:13px; }
    .it-collection-head input:focus { outline:none; box-shadow:inset 0 0 0 1px var(--accent); border-color:var(--accent); }

    /* Champs dynamiques d'un formulaire de facture (schéma). */
    .inv-field { margin-top:10px; }
    .inv-field input[type=text], .inv-field input[type=number], .inv-field input[type=date] { width:100%; padding:9px; border:1px solid var(--border); border-radius:var(--r-xs); font-family:inherit; font-size:13px; }
    .inv-field input:focus { outline:none; box-shadow:inset 0 0 0 1px var(--accent); border-color:var(--accent); }
    .inv-req { color:var(--danger); margin-left:2px; }
    .inv-coll { margin-top:14px; }
    .inv-coll-cell { flex:1; min-width:0; padding:8px; border:1px solid var(--border); border-radius:var(--r-xs); font-family:inherit; font-size:13px; }
    .inv-coll-cell:focus { outline:none; box-shadow:inset 0 0 0 1px var(--accent); border-color:var(--accent); }

    /* Contacts : barre de filtres rapides (chips activables + select société). */
    .ct-filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 20px; border-bottom:1px solid var(--border); background:var(--panel); }
    .ct-chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:4px 12px; border-radius:99px; border:1px solid var(--border); background:var(--panel); color:var(--muted); cursor:pointer; transition:background .12s, color .12s, border-color .12s; }
    .ct-chip:hover { color:var(--fg); }
    .ct-chip.active { background:var(--accent-bg); color:var(--accent); border-color:var(--accent); }
    .ct-filters select { padding:5px 9px; border:1px solid var(--border); border-radius:var(--r-sm); font-family:inherit; font-size:12px; background:var(--panel); }
    .ct-bulk-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }

    /* Fiche société : formulaire riche en sections (grille 2 colonnes). */
    /* Fiche contact : formulaire à gauche, rail de contexte 360 à droite (grand écran). */
    .co-record { display:flex; flex-direction:column; gap:20px; }
    .co-record-main { display:flex; flex-direction:column; gap:16px; min-width:0; }
    .co-record-side { display:flex; flex-direction:column; gap:14px; min-width:0; }
    .co-rail-block { border:1px solid var(--border); border-radius:var(--r-sm); background:var(--panel); padding:12px 14px; }
    .co-rail-block .dl:first-child { margin-top:0; }
    @media (min-width:1000px) {
      .co-record { display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr); gap:24px; align-items:start; }
      .co-record-side { position:sticky; top:0; }
    }
    .co-form { display:flex; flex-direction:column; gap:20px; }
    .co-section { border:1px solid var(--border); border-radius:var(--r-sm); background:var(--panel); padding:14px 16px; }
    .co-section-title { margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
    .co-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 16px; }
    .co-field { display:flex; flex-direction:column; min-width:0; }
    .co-field.co-full { grid-column:1 / -1; }
    .co-field .dl { margin-top:0; }
    .co-field .note-input, .co-field select { width:100%; box-sizing:border-box; }
    .co-field select { padding:8px; border:1px solid var(--border); border-radius:var(--r-xs); font:inherit; font-size:13px; background:var(--panel); }
    .co-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
    .co-head .avatar { width:40px; height:40px; font-size:15px; flex-shrink:0; }
    .co-head-txt { display:flex; flex-direction:column; gap:4px; min-width:0; }
    .co-head-txt h4 { margin:0; font-size:16px; }
    .co-head-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    @media (max-width:560px) { .co-grid { grid-template-columns:1fr; } }

    /* Respecte la préférence système : coupe toutes les animations/transitions. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
    }
    .modal h3 { margin:0 0 16px; font-size:17px; }
    .tech-summary { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13.5px; line-height:1.55; margin-top:12px; max-height:55vh; overflow-y:auto; padding:12px; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-sm); }
    .review-points { margin:4px 0 0; padding-left:18px; font-size:13px; line-height:1.5; }
    .review-points li { margin-bottom:4px; }
    .inv-row { display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
    .inv-row input { flex:1; min-width:140px; padding:9px; border:1px solid var(--border); border-radius:var(--r-xs); font-family:inherit; font-size:13px; }
    .inv-row input:focus { outline:none; box-shadow:inset 0 0 0 1px var(--accent); border-color:var(--accent); }
    .sig-input { width:100%; margin-top:10px; padding:10px; border:1px solid var(--border); border-radius:var(--r-xs); font-family:inherit; font-size:13.5px; line-height:1.5; resize:vertical; }
    .sig-input:focus { outline:none; box-shadow:inset 0 0 0 1px var(--accent); border-color:var(--accent); }
    .modal.wide { max-width:760px; }
    .sort-btn { font-size:12px; padding:4px 10px; border:1px solid var(--border); background:var(--panel); border-radius:99px; color:var(--muted); transition:background .12s, color .12s, border-color .12s; }
    .sort-btn:hover { background:var(--panel-2); }
    .sort-btn.active { background:var(--accent-bg); color:var(--accent); border-color:var(--accent); font-weight:600; }
    .stats-table { width:100%; border-collapse:collapse; font-size:13px; }
    .stats-table th { text-align:left; font-weight:600; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; padding:6px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
    .stats-table td { padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
    .stats-table td.num, .stats-table th:not(:first-child) { text-align:right; white-space:nowrap; }
    .inv-list { margin-top:14px; max-height:240px; overflow-y:auto; }
    .inv-item { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px; }
    .agent-name { flex:1; min-width:0; padding:6px 8px; border:1px solid var(--border); border-radius:var(--r-xs); font-family:inherit; font-size:13px; }
    .agent-name:focus { outline:none; box-shadow:inset 0 0 0 1px var(--accent); border-color:var(--accent); }

    /* Dialog Paramètres */
    .set-acct { display:flex; align-items:center; gap:12px; padding:2px 0 14px; border-bottom:1px solid var(--border); margin-bottom:4px; }
    .set-row { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; background:none; border:none; border-radius:var(--r-sm); padding:12px; font-size:14px; color:var(--fg); }
    .set-row:hover { background:var(--panel-2); }
    .set-row .chev { color:var(--faint); font-size:18px; line-height:1; }
    .set-row.danger { color:var(--danger); }

    /* Page de configuration /settings */
    .settings-page { flex:1; min-height:0; overflow-y:auto; padding:22px 26px; }
    .settings-head { display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:1000px; margin:0 auto 18px; }
    .settings-title { margin:0; font-size:20px; font-weight:500; }
    .settings-body { display:grid; grid-template-columns:210px 1fr; gap:26px; max-width:1000px; margin:0 auto; align-items:start; }
    .settings-nav { display:flex; flex-direction:column; gap:2px; position:sticky; top:0; }
    .settings-nav-item { text-align:left; width:100%; background:none; border:none; border-radius:var(--r-sm); padding:9px 12px; font-size:14px; color:var(--fg); }
    .settings-nav-item:hover { background:var(--panel-2); }
    .settings-nav-item.active { background:var(--accent-bg); color:var(--accent); font-weight:500; }
    .settings-panel { min-width:0; display:flex; flex-direction:column; gap:22px; }
    .settings-block { background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:20px; }
    .settings-block-title { margin:0 0 12px; font-size:15px; font-weight:500; }
    .settings-switch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; }
    .settings-switch-label { font-size:14px; }
    .settings-switch { position:relative; display:inline-flex; align-items:center; width:40px; height:22px; border-radius:99px; background:var(--border); transition:background .15s; flex:none; }
    .settings-switch.on { background:var(--accent); }
    .settings-switch.disabled { opacity:.6; }
    .settings-switch input { position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
    .settings-switch-knob { position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s; }
    .settings-switch.on .settings-switch-knob { transform:translateX(18px); }

    .mobile-only { display:none; }

    /* ===================== Templates d'email ===================== */
    .tpl-row { cursor:pointer; }
    .tpl-row:hover { background:var(--panel-2); }
    .tpl-grid { display:flex; gap:12px; flex-wrap:wrap; }
    .tpl-grid > div { flex:1; min-width:180px; }
    .tpl-subject { width:100%; box-sizing:border-box; padding:9px; border:1px solid var(--border); border-radius:var(--r-xs); font-family:inherit; font-size:13px; background:var(--panel); }
    .tpl-subject:focus { outline:none; box-shadow:inset 0 0 0 1px var(--accent); border-color:var(--accent); }
    .tpl-suggest { margin-top:12px; padding:14px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--panel-2); }
    .tpl-suggest-row { padding:6px 0; }
    .tpl-suggest-text { display:flex; align-items:center; gap:4px; flex-wrap:wrap; min-width:0; }
    .tpl-orig { color:var(--muted); }
    .tpl-arrow { color:var(--faint); }
    .tpl-var { font-size:12px; background:var(--accent-bg); color:var(--accent); border-radius:var(--r-xs); padding:1px 6px; }
    .tpl-palette { display:flex; flex-wrap:wrap; gap:6px; }
    .tpl-chip { cursor:pointer; }
    .tpl-chip:hover { border-color:var(--accent); color:var(--accent); }
    .tpl-preview-bar { display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; }
    .tpl-toggle { display:inline-flex; gap:4px; }
    .tpl-preview { margin-top:12px; }
    .tpl-preview-subject { font-size:13px; margin-bottom:8px; }
    .tpl-preview-frame { display:flex; justify-content:center; }
    .tpl-actions { margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }

    /* ---- Éditeur de template pleine page ---- */
    .te-page { max-width:1200px; margin:0 auto; }
    .te-top { display:flex; align-items:center; gap:12px; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--border); }
    .te-title { flex:1; min-width:0; font-size:17px; font-weight:600; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .te-top-actions { display:flex; align-items:center; gap:8px; flex:none; }
    .te-meta { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin-bottom:18px; }
    .te-meta select { width:100%; }
    /* Popover « Réglages » : replie la classification (type, catégorie, abonnement, réponse rapide, ID API). */
    .te-settings-wrap { position:relative; flex:none; }
    .te-settings-btn { height:38px; }
    .te-settings-backdrop { position:fixed; inset:0; z-index:40; }
    .te-settings-pop { position:absolute; right:0; top:calc(100% + 6px); z-index:41; width:300px; max-width:90vw; background:var(--panel); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-lg); padding:14px; }
    .te-settings-pop select { width:100%; }
    .te-apiid { display:block; font-size:12px; word-break:break-all; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-xs); padding:6px 8px; }
    /* Barre unifiée : onglets à gauche, contrôles d'aperçu à droite. */
    .te-barrow { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-bottom:16px; }
    .te-barrow-controls { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-bottom:6px; }
    .te-tabs { display:flex; gap:2px; }
    .te-tab { border:none; background:none; padding:8px 16px; font-size:13.5px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .12s, border-color .12s; }
    .te-tab:hover { color:var(--fg); }
    .te-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
    .te-toolbar { border-radius:var(--r-sm) var(--r-sm) 0 0; }
    .te-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:8px 0; }
    .te-sample-toggle { cursor:pointer; gap:10px; }
    .te-canvas-hold { display:flex; justify-content:center; padding:18px; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-sm); }
    .te-canvas { background:#fff; border:1px solid var(--border); border-radius:var(--r-xs); box-sizing:border-box; }
    .te-canvas-edit { min-height:360px; max-height:none; padding:20px; overflow-y:auto; }
    .te-canvas-edit:focus { outline:none; box-shadow:inset 0 0 0 1px var(--accent); }
    .te-canvas-edit:empty:before { content:attr(data-placeholder); color:var(--faint); }
    .te-frame { min-height:360px; height:520px; }
    .te-var { display:inline-block; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; background:var(--accent-bg); color:var(--accent); border:1px solid var(--border-strong); border-radius:var(--r-xs); padding:0 5px; white-space:nowrap; vertical-align:baseline; user-select:none; }
    /* Marqueurs de boucle (phase 1). L'encadré complet de la zone répétée arrive en phase 2. */
    .te-loop-start { display:inline-block; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; font-weight:600; background:var(--accent-bg); color:var(--accent); border:1px dashed var(--accent); border-radius:var(--r-xs); padding:0 6px; margin:1px 0; white-space:nowrap; user-select:none; }
    .te-loop-end { display:inline-block; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; font-weight:600; color:var(--accent); border:1px dashed var(--accent); border-radius:var(--r-xs); padding:0 6px; margin:1px 0; white-space:nowrap; user-select:none; }
    .te-loop-end::before { content:'⟲ fin'; }
    /* Barre flottante « Répéter la zone » sur sélection. */
    .te-loop-fab { background:var(--accent); color:#fff; border:none; border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:600; box-shadow:var(--shadow-lg); cursor:pointer; white-space:nowrap; }
    .te-loop-fab:hover { filter:brightness(1.06); }
    /* Repère visuel d'une ligne/élément répété (boucle par attribut, sinon invisible). */
    .te-canvas-edit [data-loop-each] { outline:1.5px dashed var(--accent); outline-offset:2px; background:var(--accent-bg); }
    .te-canvas-edit li[data-loop-each]::marker { color:var(--accent); }

    /* Éditeur de template : contenu à gauche, rail de variables à droite */
    .te-preview.with-rail { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:16px; align-items:start; }
    .te-editor-wrap { min-width:0; }
    .te-rail { position:sticky; top:12px; max-height:calc(100vh - 24px); display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--r); background:var(--panel-2); padding:12px; }
    .te-rail-head { flex:none; } /* titre + IA + recherche fixes ; seule la liste défile */
    .te-rail-list { flex:1; min-height:0; overflow-y:auto; margin:0 -4px; padding:0 4px; }
    .te-rail-title { font-weight:600; font-size:13px; }
    .te-rail-hint { font-size:11px; color:var(--faint); margin:4px 0 10px; }
    .te-rail-search { width:100%; margin-bottom:8px; }
    /* Détection IA : lien discret (plus de gros bouton). */
    .te-rail-ai-link { display:inline-block; background:none; border:none; padding:0; margin:0 0 10px; font-size:11.5px; color:var(--muted); cursor:pointer; }
    .te-rail-ai-link:hover:not(:disabled) { color:var(--accent); text-decoration:underline; }
    .te-rail-ai-link:disabled { opacity:.5; cursor:default; }
    .te-rail-group { font-size:11px; color:var(--muted); margin:12px 0 5px; }
    .te-rail-group:first-of-type { margin-top:0; }
    .te-railchip { display:block; width:100%; text-align:left; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; color:var(--muted); background:var(--panel); border:1px solid var(--border); border-radius:var(--r-xs); padding:5px 8px; margin-bottom:5px; cursor:pointer; transition:background .12s, border-color .12s, color .12s; }
    .te-railchip:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }


    /* ===================== Communications (téléphonie) ===================== */
    .comm-list { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
    .comm-item { display:flex; gap:10px; padding:9px 11px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--panel-2); }
    .comm-icon { flex:none; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--accent-bg); color:var(--accent); }
    .comm-body { flex:1; min-width:0; }
    .comm-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12.5px; }
    .comm-dir { display:inline-flex; align-items:center; gap:3px; color:var(--muted); font-weight:600; }
    .comm-num { color:var(--fg); font-variant-numeric:tabular-nums; }
    .comm-dur { color:var(--faint); font-variant-numeric:tabular-nums; }
    .comm-ticket { font-size:10px; }
    .comm-time { margin-left:auto; color:var(--faint); font-size:11px; white-space:nowrap; }
    .comm-text { margin-top:5px; font-size:13px; line-height:1.45; white-space:pre-wrap; word-break:break-word; }
    .comm-audio { display:block; margin-top:7px; width:100%; max-width:340px; height:34px; }
    .comm-media { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--accent); }
    .comm-transcript { margin-top:6px; }
    .comm-transcript-toggle { display:inline-flex; align-items:center; gap:4px; background:none; border:none; padding:0; font-size:12px; color:var(--muted); cursor:pointer; }
    .comm-transcript-toggle:hover { color:var(--accent); }
    .comm-transcript-text { margin-top:5px; padding:8px 10px; border-left:2px solid var(--border-strong); background:var(--panel); border-radius:var(--r-xs); font-size:12.5px; line-height:1.5; color:var(--fg); white-space:pre-wrap; word-break:break-word; }
    .comm-link-row { display:flex; gap:8px; margin-top:7px; flex-wrap:wrap; }
    .comm-link-row .agent-name { max-width:240px; }

    /* ===================== Mobile ===================== */
    @media (max-width:820px) {
      header { padding:10px 14px; }

      /* Réglages : nav au-dessus du panneau */
      .settings-page { padding:16px 14px; }
      .settings-body { grid-template-columns:1fr; gap:16px; }
      .settings-nav { position:static; }

      /* Éditeur de template : rail sous le contenu */
      .te-preview.with-rail { grid-template-columns:1fr; }
      .te-rail { position:static; }

      /* Navigation à un panneau */
      .cols { grid-template-columns:1fr; }
      .list { border-right:none; }
      .conv, .details { display:none; }
      .cols.has-selection .list { display:none; }
      .cols.has-selection .conv { display:flex; }
      /* Contacts : la fiche 360 est le panneau principal (pas un tiroir) : on la
         garde en flux et visible une fois un contact sélectionné. */
      .contacts-cols .details { display:block; position:static; inset:auto; transform:none; padding-top:16px; }
      .contacts-cols.has-selection .details { display:block; }

      .icon-btn { display:inline-flex; }
      .conv-head { padding:10px 12px; }

      /* Détails en tiroir plein écran */
      .details {
        display:block; position:fixed; inset:0; z-index:40; border-left:none;
        transform:translateX(100%); transition:transform .22s ease; padding:16px;
        padding-top:calc(16px + env(safe-area-inset-top));
      }
      .details.open { transform:translateX(0); box-shadow:var(--shadow-lg); }
      .details-close { display:inline-flex; }

      .thread { padding:0 14px; }
      .composer { padding:12px 14px calc(12px + env(safe-area-inset-bottom)); }
      .msg.out { margin-left:-10px; padding-left:11px; }
      .modal { padding:20px; border-radius:var(--r); }
    }
    @media (max-width:430px) {
      .logo .ent-name { display:none; }
    }