#crm-panel /* === RESET & VARS === */
*, #crm-panel *::before, #crm-panel *::after{box-sizing:border-box;margin:0;padding:0}
#crm-panel ::selection{background:#39ff88;color:#0a0a0f}
#crm-panel ::-moz-selection{background:#39ff88;color:#0a0a0f}
#crm-panel{
  color-scheme: dark;
  --bg:#030308;--bg1:rgba(255,255,255,.028);--bg2:rgba(255,255,255,.05);
  --bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.14);
  --cy:#22d3ee;--pu:#a78bfa;--pu2:#c4b5fd;
  --go:#fbbf24;--go2:#fcd34d;
  --gr:#34d399;--rd:#f87171;--bl:#60a5fa;--or:#fb923c;
  --t1:#eeeef8;--t2:#c4c4dc;--t3:#8888a0;
  --mono:Arial,Helvetica,sans-serif;
  --rad:10px;
}
#crm-panel[data-theme="light"]{
  color-scheme: light;
  --bg:#faf5ec;--bg1:rgba(40,30,10,.035);--bg2:rgba(40,30,10,.06);
  --bd:rgba(40,30,10,.10);--bd2:rgba(40,30,10,.18);
  --t1:#2a2416;--t2:#5c5240;--t3:#8a7f66;
}
/* 2026-08-26 (demande de Steve) : fond translucide seulement en tiroir Vosso World (voir la
   détection `self !== top` posée en tête de index.html) — SEUL `--bg` (le fond de PAGE) change,
   `--bg1`/`--bg2` (les cartes/panneaux par-dessus) restent tels quels : même leçon apprise
   ailleurs dans Vosso World (client/meet.js, client/plan.js) — tout transparent rend illisible,
   seul le fond global doit laisser voir le monde derrière. Sélecteur volontairement plus
   spécifique que `#crm-panel`/`#crm-panel[data-theme="light"]` ci-dessus (ancêtre `html.vw-
   integre` en plus) pour gagner sans dépendre de l'ordre des règles dans ce fichier. */
/* 2026-09-10 (demande Steve : « uniformise le CRM avec la plateforme Bullaria ») — remplace les
   deux essais précédents (dark transparent semi-translucide, puis light blanc glacé opaque) par
   UN SEUL thème, appliqué que le CRM soit en mode sombre ou clair : plus de distinction entre les
   deux quand on est en iframe, l'un comme l'autre convergent vers le même fond très sombre que
   Bullaria elle-même (`body{background:#07060d}`, client/index.html) — plus de transparence du
   tout (le "on voit la carte derrière" ne valait pas le coup de lisibilité perdu), et des bordures
   teintées bronze/bois (`#c78c59`) au lieu du violet/gris habituel du CRM standalone, pour un seul
   vocabulaire visuel cohérent avec les boutons/poignées/cadres bois déjà utilisés partout ailleurs
   dans Bullaria. Les couleurs d'accent des Smart Vues (--cc par carte) restent inchangées : sur ce
   fond très sombre, contrairement au blanc de l'essai précédent, elles retrouvent un vrai contraste
   au lieu de jurer. */
html.vw-integre #crm-panel{
  color-scheme: dark;
  --bg:#07060d;
  --bg1:rgba(200,16,46,.035);--bg2:rgba(200,16,46,.06);
  --bd:rgba(200,16,46,.28);--bd2:rgba(226,57,79,.45);
  --t1:#f1eef9;--t2:#c4c4dc;--t3:#8a8398;
  /* 2026-09-10, 2e passe (retour Steve : « tu n'as rien changé, c'est le style avec des boutons
     translucides — c'est LÀ que je veux que ça change ») — le 1er passage n'avait touché que le
     fond de page et le logo ; ni les boutons, ni les onglets, ni la nav active n'utilisaient de
     variable de fond (--bg/--bg1/--bg2) mais l'accent violet/cyan (--pu/--pu2/--cy) directement,
     donc rien n'avait bougé visuellement dessus. En reteignant CES variables-là aussi (tout le
     reste du CSS les référence déjà, aucun autre fichier à toucher pour la majorité des boutons),
     l'accent de toute l'appli bascule d'un coup — voir plus bas pour les quelques boutons qui
     codent leur dégradé en dur plutôt que via ces variables.
     2026-09-10, 4e passe (retour Steve : « tous les contours bois, remplace-les par du rouge
     comme le taureau ») — le bois/bronze de la 3e passe est reteinté rouge (même référence Red
     Bull que le logo), le PRINCIPE (un seul accent cohérent partout, plus de rainbow néon) ne
     change pas, seule la teinte change. */
  --pu:#c8102e;--pu2:#e2394f;--cy:#e2394f;
}
/* 2026-09-10, 6e passe (retour Steve : « le mode clair ne marche plus, j'ai plus de blanc/beige ») —
   la version claire avait été fusionnée avec la sombre lors de la 1ère passe (les 2 essais
   précédents du clair étaient ratés, plus simple d'unifier). Reconstruite en vrai cette fois, MÊME
   style (contours rouges, vignettes sobres, logo noir/rouge) mais fond clair — --pu/--pu2/--cy/
   --bd/--bd2/--bg1/--bg2 ci-dessus sont des rgba() relatifs, ils marchent tels quels sur un fond
   clair (pas besoin de les redéfinir) ; seuls --bg et le texte doivent s'inverser. Spécificité
   plus élevée (`[data-theme="light"]` en plus) gagne naturellement sur le bloc dark ci-dessus,
   sans !important. */
html.vw-integre #crm-panel[data-theme="light"]{
  color-scheme: light;
  --bg:#f4efe6;
  --t1:#241a1c;--t2:#5a4a4d;--t3:#8a7a7d;
}
html.vw-integre #crm-panel[data-theme="light"] .campaign-card{background:rgba(0,0,0,.025)}
html.vw-integre #crm-panel[data-theme="light"] .bg{
  background:
    radial-gradient(ellipse 70% 45% at 50% -10%, rgba(120,60,40,.04) 0%, transparent 60%),
    repeating-linear-gradient(115deg, rgba(0,0,0,.012) 0 1px, transparent 1px 3px),
    var(--bg);
}
html.vw-integre #crm-panel[data-theme="light"] .nav-logo-txt{color:#241a1c;-webkit-text-fill-color:#241a1c}
/* Boutons "CTA primaire" qui codent leur dégradé violet→cyan EN DUR plutôt que via --pu/--cy
   (repéré par grep sur ce fichier + templates-ventes.css) : Connexion, + Contact/+ Vente (fiche
   lead), + tâche, Enregistrer (partout dans le feed/formulaires), boutons .tv-btn (Ventes). */
html.vw-integre #crm-panel .btn-login,
html.vw-integre #crm-panel .fiche-add-btn,
html.vw-integre #crm-panel .task-add-btn,
html.vw-integre #crm-panel .feed-save-btn,
html.vw-integre #crm-panel .tv-btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.25) 100%),
    linear-gradient(135deg,#c8102e,#7a0a1c);
  color:#fff;box-shadow:0 4px 14px -6px rgba(0,0,0,.6);
}
/* Nav active (dégradé lui aussi codé en dur) — même rouge que le reste. */
html.vw-integre #crm-panel .nav-item.active{
  background:linear-gradient(120deg,rgba(200,16,46,.28),rgba(226,57,79,.1));
  box-shadow:inset 0 0 0 1px var(--rar-border, rgba(226,57,79,.4)),0 4px 16px -4px var(--rar-glow, rgba(200,16,46,.4));
}
/* 2026-09-10, 4e passe (retour Steve : « le logo, tu ne le mets pas en rouge, tu le mets en noir,
   BULLS à l'écran noir ») — le bloc logo perd son panneau bois/couleur : juste le fond uni de la
   page derrière, la marque (icône + texte) qui doit se voir, pas un encadré. Seul un mince trait
   rouge en pied de bloc reste, cohérent avec « tous les contours en rouge ». */
html.vw-integre #crm-panel .nav-logo{
  background:none;
  border-bottom:2px solid #8a1620;
}
html.vw-integre #crm-panel .nav-logo-txt{
  background:none;color:#f1eef9;-webkit-text-fill-color:#f1eef9;
  filter:none;
}
/* Pas de height:100% ici : le panel est en fixed top:50px/bottom:0 (sous le header cockpit),
   forcer 100% le faisait déborder de 50px sous l'écran (bouton "Replier" invisible, 2026-07-16). */
#crm-panel{overflow:hidden}
#crm-panel{font-family:var(--mono);color:var(--t1);background:var(--bg)}
#crm-panel a{text-decoration:none;color:inherit}
#crm-panel button{font-family:var(--mono);cursor:pointer;border:none;outline:none;background:none}
#crm-panel input, #crm-panel select, #crm-panel textarea{font-family:var(--mono);outline:none;border:none;color:var(--t1);background:transparent}
#crm-panel select{appearance:none;-webkit-appearance:none}
#crm-panel select option{background:var(--bg);color:var(--t1)}
#crm-panel ::-webkit-scrollbar{width:4px;height:4px}
#crm-panel ::-webkit-scrollbar-track{background:transparent}
#crm-panel ::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:2px;transition:background .15s}
#crm-panel ::-webkit-scrollbar-thumb:hover{background:rgba(167,139,250,.35)}

#crm-panel /* === BG GLOW === */
.bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(167,139,250,.07) 0%,transparent 60%),var(--bg)}
/* 2026-09-10 (demande Steve, capture de référence : fond noir "propre", léger effet de lumière
   au centre, PAS un halo coloré) — remplace la lueur violette par une respiration neutre + un
   grain fin (dégradé répété, aucune image à charger) façon matière plutôt qu'écran qui brille. */
html.vw-integre #crm-panel .bg{
  background:
    radial-gradient(ellipse 70% 45% at 50% -10%, rgba(255,240,220,.05) 0%, transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    var(--bg);
}

#crm-panel /* === SCREENS ===
   position:absolute (pas fixed) : #crm-panel est lui-même position:fixed avec un
   offset top:50px (sous le header du Cockpit depuis la fusion 2026-07-13) — en
   fixed, inset:0 se calait sur le viewport entier et passait sous le header
   (z-index 200 > 100), masquant les ~45 premiers px de chaque écran (dont le
   bouton lead suivant/précédent). En absolute, #crm-panel sert de containing
   block et inset:0 se cale correctement sur le panneau. === */
.screen{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}
#crm-panel .screen.hidden{display:none!important}

#crm-panel /* === BOOT OVERLAY — masque le chargement initial (leads/templates/packs) pour éviter === */
/* === de cliquer sur la nav avant que initApp() ait fini (bug : selectView('inbox')   === */
/* === forcé en fin de chargement écrasait un clic déjà fait sur un autre onglet).      === */
.boot-overlay{
  position:absolute;inset:0;z-index:50;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .5s ease;
}
#crm-panel .boot-overlay.hidden{opacity:0;pointer-events:none}
#crm-panel /* Logo de chargement (2026-07-11 v2, remplace le carrousel 3D — Steve : texte de face,
   lisible, pas un cercle qui tourne). Plaque verre/transparente compacte, texte "VossoCRM"
   en dégradé violet/cyan (même identité que .crm-logo du login) avec un léger effet de
   scintillement (shimmer) + un balayage lumineux qui traverse la plaque — futuriste, statique
   à l'œil (jamais illisible), pur CSS. */
.boot-vcrm-scene{
  position:relative;overflow:hidden;padding:16px 30px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid var(--bd2);
  backdrop-filter:blur(12px);box-shadow:0 0 34px rgba(167,139,250,.14);
}
#crm-panel .boot-vcrm-text{
  position:relative;z-index:1;font-family:var(--mono);font-weight:800;font-size:26px;
  letter-spacing:.05em;white-space:nowrap;
  background:linear-gradient(110deg,var(--pu2) 20%,var(--cy) 50%,var(--pu2) 80%);
  background-size:220% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 12px rgba(167,139,250,.4));
  animation:vcrm-shimmer 2.8s linear infinite;
}
#crm-panel .boot-vcrm-sweep{
  position:absolute;top:0;left:-45%;width:35%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-18deg);
  animation:vcrm-sweep 3.2s ease-in-out infinite;
}
@keyframes vcrm-shimmer{
  from{background-position:0% center}
  to{background-position:220% center}
}
@keyframes vcrm-sweep{
  0%{left:-45%}
  55%{left:130%}
  100%{left:130%}
}
#crm-panel .boot-label{font-size:11px;color:var(--t3);letter-spacing:1px;text-transform:uppercase}

#crm-panel /* === AUTH === */
.login-card{
  position:relative;z-index:1;background:rgba(255,255,255,.03);
  border:1px solid var(--bd2);border-radius:20px;padding:2.5rem;
  width:100%;max-width:400px;backdrop-filter:blur(24px);
  text-align:center;box-shadow:0 0 60px rgba(167,139,250,.08);
}
#crm-panel .login-card.wide{max-width:640px}
/* Logo officiel BULLS CRM (2026-08-29) : PNG plein fond navy (pas de transparence), donc traité
   comme une plaque encadrée plutôt qu'un pictogramme flottant — s'intègre bien en thème sombre
   (navy proche de --bg), assumé plus contrasté en thème clair. */
#crm-panel .crm-logo-img{
  display:block;width:100%;max-width:280px;margin:0 auto .8rem;
  border-radius:14px;border:1px solid var(--bd2);box-shadow:0 0 40px rgba(167,139,250,.1);
}
#crm-panel .login-sub{color:var(--t2);font-size:.85rem;margin-bottom:1.8rem}
#crm-panel .code-input{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--bd2);
  border-radius:10px;padding:.9rem 1.1rem;color:var(--t1);font-size:1.1rem;
  font-family:var(--mono);letter-spacing:.2em;text-align:center;
  transition:border-color .2s;margin-bottom:1rem;
}
#crm-panel .code-input:focus{border-color:var(--pu)}
#crm-panel .code-input.shake{animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#crm-panel .btn-login{
  width:100%;padding:.85rem;border-radius:10px;font-size:.95rem;font-weight:700;
  background:linear-gradient(135deg,var(--pu),rgba(34,211,238,.8));
  color:#fff;transition:opacity .2s,transform .2s;font-family:var(--mono);
}
#crm-panel .btn-login:hover{opacity:.88;transform:translateY(-1px)}
#crm-panel .btn-login:active{transform:translateY(0) scale(.98);opacity:1}
#crm-panel .login-error{color:var(--rd);font-size:.85rem;margin-top:.7rem}
#crm-panel .login-error.hidden{display:none}

#crm-panel .agent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:.5rem}
#crm-panel .agent-btn{
  background:rgba(255,255,255,.03);border:1px solid var(--bd);
  border-radius:var(--rad);padding:.9rem .5rem;display:flex;flex-direction:column;
  align-items:center;gap:.45rem;transition:all .2s;cursor:pointer;
}
#crm-panel .agent-btn:hover{background:rgba(255,255,255,.07);border-color:rgba(167,139,250,.4);transform:translateY(-2px)}
#crm-panel .agent-btn:active{transform:translateY(0) scale(.97)}
#crm-panel .agent-avatar{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:.9rem;border:1px solid;box-shadow:0 0 0 1px rgba(255,255,255,.04)
}
#crm-panel .agent-name{font-size:.78rem;font-weight:600;color:var(--t1)}
#crm-panel .agent-role-badge{font-size:.65rem;color:var(--pu);background:rgba(167,139,250,.15);padding:.15rem .4rem;border-radius:4px}

#crm-panel /* ══════════════════════════════════════════
   CRM APP — 3-COLUMN LAYOUT
   Nav 10% | List 0→90% | Fiche 0→90%
══════════════════════════════════════════ */
#sApp{align-items:stretch;justify-content:flex-start;padding:0}
#crm-panel .crm-app{display:flex;width:100%;height:100%;overflow:hidden;position:relative;z-index:1}

#crm-panel /* NAV — 14% */
.crm-nav{
  width:14%;min-width:132px;max-width:180px;flex-shrink:0;
  background:linear-gradient(180deg,rgba(167,139,250,.035) 0%,rgba(255,255,255,.015) 45%,rgba(255,255,255,.01) 100%);
  border-right:1px solid var(--bd);
  box-shadow: inset -3px 0 24px -18px var(--rar-glow, transparent); /* teinte ambiante du jour */
  display:flex;flex-direction:column;overflow:hidden;
  transition:width .18s ease,min-width .18s ease,box-shadow .6s ease;
}
/* Mode replié (2026-07-16, demande Steve) : icônes seules, labels masqués */
#crm-panel .crm-nav.collapsed{width:52px;min-width:52px}
#crm-panel .crm-nav.collapsed .nl{display:none}
#crm-panel .crm-nav.collapsed .nav-logo{padding:14px 6px;justify-content:center}
#crm-panel .crm-nav.collapsed .nav-logo-txt{display:none}
#crm-panel .crm-nav.collapsed .nav-item{justify-content:center;padding:9px 0;gap:0}
#crm-panel .crm-nav.collapsed .nav-badge{position:absolute;top:3px;right:6px}
#crm-panel .nav-collapse-btn{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:7px;
  margin:8px;padding:9px 10px;border:1px solid rgba(167,139,250,.4);border-radius:8px;
  cursor:pointer;color:var(--pu2);font-size:10px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;background:rgba(167,139,250,.1);user-select:none;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
#crm-panel .nav-collapse-btn:hover{
  background:rgba(167,139,250,.22);border-color:var(--pu2);
  box-shadow:0 0 10px rgba(167,139,250,.35);
}
/* 2026-09-10 — petite tête de taureau comme marque incorporée au CRM, à côté du texte "BULLS CRM"
   du bandeau nav. D'abord un SVG dessiné à la main (or, puis rouge, puis noir/contour rouge, voir
   historique git) en attendant le vrai fichier ; remplacé le même jour par le symbole officiel
   fourni par Steve (PNG détouré, fond transparent, voir img/bulls-crm-icone-officielle.png et
   /root/codex/partage-claude/bulls-crm-logo-officiel/README-CLAUDE.md) — même fichier que le
   favicon (voir <head>, index.html). Couleur fixe dans le PNG (rouge plein), pas liée aux variables
   de thème --pu/--cy : c'est une marque, pas un élément d'interface, elle doit rester reconnaissable
   pareil en clair, sombre, ou dans Bullaria. */
#crm-panel .crm-bull-mark{width:26px;height:26px;flex-shrink:0;object-fit:contain}
#crm-panel .nav-logo{
  display:flex;align-items:center;gap:10px;
  padding:18px 16px 14px;border-bottom:1px solid var(--bd);text-align:left;flex-shrink:0;
  /* Halo ambiant du jour (demande Steve 2026-08-04 soir : "que ce soit partout sur le CRM", pas
     juste le Dashboard) — --rar-* posées sur <html> par applyRarityTheme() (api.js), appelée
     depuis loadDashboard() dès la connexion. Repli neutre tant que non posées (avant 1er login). */
  box-shadow: inset 0 -1px 0 0 var(--rar-border, transparent), 0 6px 18px -10px var(--rar-glow, transparent);
  transition: box-shadow .6s ease;
}
#crm-panel .nav-logo-txt{
  font-size:11px;font-weight:800;letter-spacing:3px;line-height:1.35;
  background:linear-gradient(135deg,var(--rar-color, var(--pu2)),var(--cy));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter: drop-shadow(0 0 8px var(--rar-glow, transparent));
  transition: filter .6s ease;
}
#crm-panel .nav-items{flex:1;min-height:0;padding:10px 8px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:2px}
#crm-panel .nav-item{
  display:flex;flex-direction:row;align-items:center;gap:10px;
  padding:9px 10px;cursor:pointer;border-radius:8px;position:relative;
  transition:background .18s ease,color .18s ease;color:var(--t3);
}
#crm-panel .nav-item:hover{color:var(--t1);background:rgba(255,255,255,.05)}
#crm-panel .nav-item.active{
  color:#f4f2ff;
  background:linear-gradient(120deg,rgba(167,139,250,.24),rgba(34,211,238,.09));
  box-shadow:inset 0 0 0 1px var(--rar-border, rgba(167,139,250,.35)),0 4px 16px -4px var(--rar-glow, rgba(139,92,246,.35));
  transition: box-shadow .6s ease;
}
#crm-panel .nav-item.active .ni{color:var(--rar-color, var(--pu2));filter:drop-shadow(0 0 5px var(--rar-glow, rgba(167,139,250,.55)))}
#crm-panel .nav-item .ni{font-size:16px;line-height:1;flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:inherit;transition:color .18s}
#crm-panel .nav-item .ni svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
#crm-panel .nav-item .nl{font-size:10.5px;letter-spacing:.3px;text-transform:uppercase;font-weight:700;flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#crm-panel .nav-item-cta{color:#34d399;background:rgba(52,211,153,.1)}
#crm-panel .nav-item-cta:hover{color:#34d399;background:rgba(52,211,153,.18)}
#crm-panel .nav-item-cta .ni{color:#34d399}
#crm-panel .nav-sep{height:1px;background:var(--bd);margin:9px 12px}
#crm-panel .nav-badge{
  background:var(--rd);color:#fff;font-size:9px;font-weight:800;
  padding:1px 6px;border-radius:10px;line-height:1.5;margin-left:auto;
  box-shadow:0 0 8px rgba(248,113,113,.55);
}
#crm-panel .nav-bottom{
  padding:12px;border-top:1px solid var(--bd);
  display:flex;flex-direction:row;align-items:center;gap:9px;flex-shrink:0;
}
#crm-panel .nav-av{
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;cursor:pointer;border:1px solid var(--bd2);flex-shrink:0;
  transition:transform .15s ease,box-shadow .15s ease;
}
#crm-panel .nav-av:hover{transform:scale(1.07);box-shadow:0 0 0 3px rgba(167,139,250,.15)}
#crm-panel .nav-av-label{font-size:11px;color:var(--t1);text-align:left;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#crm-panel .nav-logout-btn{
  display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;
  color:var(--t3);cursor:pointer;transition:color .15s ease,background .15s ease;flex-shrink:0;
}
#crm-panel .nav-logout-btn:hover{color:var(--rd);background:rgba(248,113,113,.1)}
#crm-panel .nav-logout-btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
#crm-panel .nav-theme-btn{
  width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:var(--t3);cursor:pointer;transition:.15s;margin-bottom:4px;
}
#crm-panel .nav-theme-btn:hover{color:var(--pu2);background:rgba(167,139,250,.1)}
#crm-panel .nav-theme-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
#crm-panel .theme-icon-light{display:none}
#crm-panel[data-theme="light"] .theme-icon-dark{display:none}
#crm-panel[data-theme="light"] .theme-icon-light{display:block}

#crm-panel /* MAIN = 90% */
.crm-main{flex:1;display:flex;overflow:hidden;min-width:0}

#crm-panel /* LIST VIEW */
.crm-list{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#crm-panel .crm-list.hidden{display:none}
#crm-panel .list-head{
  padding:14px 18px 12px;border-bottom:1px solid var(--bd);flex-shrink:0;
  display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.01);
}
#crm-panel .list-title{font-size:13px;font-weight:800;color:var(--t1);letter-spacing:.5px}
#crm-panel .list-count{font-size:10px;color:var(--t3)}
#crm-panel .list-search{
  width:100%;padding:7px 12px;background:rgba(255,255,255,.04);border:1px solid var(--bd);
  border-radius:8px;font-size:11px;color:var(--t1);transition:border-color .15s;
}
#crm-panel .list-search:focus{border-color:rgba(167,139,250,.5)}
#crm-panel .list-search::placeholder{color:var(--t3)}
#crm-panel .list-body{flex:1;overflow-y:auto}
#crm-panel .list-sec-head{
  padding:7px 18px;font-size:9px;letter-spacing:2px;color:var(--t3);
  text-transform:uppercase;background:rgba(255,255,255,.015);
  border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:2;
}
#crm-panel .campaign-back{color:var(--pu2);cursor:pointer}
#crm-panel .campaign-back:hover{text-decoration:underline}
#crm-panel .camp-today-badge{font-size:9px;padding:1px 6px;border-radius:20px;background:rgba(52,211,153,.18);color:var(--gr);margin-left:5px}
#crm-panel .campaign-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;padding:20px;
}
#crm-panel .campaign-card{
  background:rgba(255,255,255,.03);border:1px solid var(--bd);border-top:3px solid var(--cc);border-radius:16px;
  padding:18px;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  position:relative;overflow:hidden;
  box-shadow:0 6px 20px -14px var(--cc-glow);
}
#crm-panel .campaign-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--cc-bg),transparent 70%),radial-gradient(circle at 100% 0%,var(--cc-bg),transparent 60%);
  opacity:1;pointer-events:none;
}
#crm-panel .campaign-card:hover{
  transform:translateY(-4px) scale(1.015);border-color:var(--cc);
  box-shadow:0 16px 38px -12px var(--cc-glow);
}
#crm-panel .campaign-card:active{transform:translateY(-1px) scale(.99);transition-duration:.08s}
#crm-panel .campaign-card-top{display:flex;align-items:center;gap:8px;margin-bottom:12px;position:relative}
#crm-panel .campaign-dot{width:12px;height:12px;border-radius:50%;background:var(--cc);box-shadow:0 0 0 4px var(--cc-bg),0 0 14px var(--cc);flex-shrink:0}
#crm-panel .campaign-name{font-size:13.5px;font-weight:800;color:var(--t1);letter-spacing:.2px}
#crm-panel .campaign-target{font-size:10.5px;color:var(--t2);margin-bottom:8px;position:relative}
#crm-panel .campaign-buyer{font-size:10.5px;color:var(--t2);margin-bottom:16px;position:relative}
#crm-panel .campaign-buyer-none{color:var(--t3);font-style:italic}
#crm-panel .campaign-buyer-date{font-size:9.5px;color:var(--t3);margin-top:2px}
#crm-panel .campaign-count-row{display:flex;align-items:baseline;gap:6px;position:relative}
#crm-panel .campaign-count{font-size:32px;font-weight:800;color:var(--cc);line-height:1;text-shadow:0 0 18px var(--cc-glow)}
#crm-panel .campaign-count-label{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
/* 2026-09-10 (demande Steve, gros retour design : « c'est toujours le même style futuriste,
   lumières partout, très coloré... je veux des vignettes contour bois, fond noir, propre, classe,
   sobre ») — les vignettes Smart Vue/Campagne (`.campaign-card`, partagées entre les deux vues)
   étaient l'exemple le plus visible du style qu'il rejette : bordure néon par statut + halo +
   dégradé diagonal coloré. Remplacé par un habillage UNIQUE, sobre, bois/noir pour toutes les
   cartes — seul le petit point (`.campaign-dot`) garde sa couleur de statut (utile pour repérer
   d'un coup d'œil), sans son halo. */
html.vw-integre #crm-panel .campaign-card{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(200,16,46,.28);border-top:2px solid rgba(226,57,79,.55);
  box-shadow:none;
}
html.vw-integre #crm-panel .campaign-card::before{display:none}
html.vw-integre #crm-panel .campaign-card:hover{
  border-color:rgba(226,57,79,.6);box-shadow:0 10px 24px -16px rgba(0,0,0,.7);
}
html.vw-integre #crm-panel .campaign-dot{box-shadow:none}
html.vw-integre #crm-panel .campaign-count{text-shadow:none}
/* 2026-09-10 (retour Steve : « la vignette Power Dialer, il faut qu'elle ressorte, un truc qui
   donne envie de cliquer ») — seule exception au sobre ci-dessus : un vrai halo vert, pulsé
   doucement, sur CETTE carte précisément (`.power-dialer-banner`, posée par `leads.js`). Règles
   après le bloc générique pour gagner à spécificité égale (2 classes ici contre 1 pour
   `.campaign-card` seule). */
html.vw-integre #crm-panel .campaign-card.power-dialer-banner{
  border-color:rgba(34,197,94,.55);border-top-color:rgba(74,222,128,.85);
  box-shadow:0 0 0 1px rgba(34,197,94,.25),0 0 28px -6px rgba(34,197,94,.55);
  animation:powerDialerPulse 2.6s ease-in-out infinite;
}
html.vw-integre #crm-panel .campaign-card.power-dialer-banner:hover{
  border-color:rgba(74,222,128,.85);box-shadow:0 0 0 1px rgba(34,197,94,.35),0 0 38px -4px rgba(34,197,94,.7);
}
html.vw-integre #crm-panel .campaign-card.power-dialer-banner .campaign-dot{box-shadow:0 0 0 4px rgba(34,197,94,.25),0 0 14px rgba(34,197,94,.85)}
html.vw-integre #crm-panel .campaign-card.power-dialer-banner .campaign-count{text-shadow:0 0 16px rgba(34,197,94,.6)}
@keyframes powerDialerPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(34,197,94,.25),0 0 28px -6px rgba(34,197,94,.55)}
  50%{box-shadow:0 0 0 1px rgba(34,197,94,.4),0 0 36px -4px rgba(34,197,94,.75)}
}
#crm-panel .campaign-status-breakdown{font-size:10px;color:var(--t3);margin-top:4px;line-height:1.5}
#crm-panel .campaign-bonus-row{font-size:11px;font-weight:700;color:var(--go2);margin-top:8px;text-shadow:0 0 10px rgba(240,192,64,.35)}
#crm-panel .campaign-leads-subtitle{font-size:11px;color:var(--t2);padding:0 18px 14px;margin-top:-4px}
#crm-panel .lead-row{
  display:flex;align-items:center;gap:10px;padding:10px 18px;
  border-bottom:1px solid rgba(255,255,255,.03);cursor:pointer;transition:background .1s;
}
#crm-panel .lead-row:hover{background:rgba(255,255,255,.04)}
#crm-panel .lead-row:active{background:rgba(255,255,255,.06)}
#crm-panel .lead-row.selected{background:rgba(139,92,246,.1);border-left:2px solid var(--pu)}
#crm-panel .lead-row.lead-no-task{background:rgba(239,68,68,.22);border-left:4px solid #f87171;box-shadow:inset 0 0 0 1px rgba(248,113,113,.25)}
#crm-panel .lead-row.lead-no-task:hover{background:rgba(239,68,68,.32)}
#crm-panel .lead-row.lead-no-task .lead-name{color:#fca5a5}
#crm-panel .lead-row.lead-no-task.selected{background:rgba(239,68,68,.32);border-left:4px solid #f87171}
#crm-panel .lead-av{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.06);
}
#crm-panel .lead-info{flex:1;min-width:0}
#crm-panel .lead-name{font-size:12px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#crm-panel .lead-meta{display:flex;gap:5px;align-items:center;margin-top:3px;flex-wrap:wrap}
#crm-panel .lead-age{font-size:9px;color:var(--t3);margin-left:auto;flex-shrink:0;white-space:nowrap}
#crm-panel .lead-tel{font-size:9px;color:var(--t2);white-space:nowrap}
#crm-panel .lead-tel a{color:var(--bl);transition:color .15s}
#crm-panel .lead-tel a:hover{color:var(--cy)}
#crm-panel .sbadge{
  font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;
  white-space:nowrap;letter-spacing:.3px;
}
#crm-panel .cbadge{
  font-size:9px;font-weight:700;padding:1px 6px;border-radius:4px;
  white-space:nowrap;
}

#crm-panel /* DASHBOARD */
.crm-dash{flex:1;overflow-y:auto;padding:20px 24px;display:none}
#crm-panel .crm-dash.active{display:block}
#crm-panel .dash-title{font-size:14px;font-weight:800;color:var(--t1);margin-bottom:3px}
#crm-panel .dash-sub{font-size:10px;color:var(--t2);margin-bottom:18px}
#crm-panel .dash-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}

#crm-panel .rarity-badge{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.22em;padding:4px 16px;border-radius:50px;border:1px solid;white-space:nowrap;transition:all .4s ease}

/* Carte "score du jour" — version proéminente/centrale du rarity-badge ci-dessus (demande
   Steve 2026-08-04 : le badge en haut à droite passe inaperçu). Pas d'orbe 3D comme le prod,
   juste une carte à bon contraste dont couleur/glow suivent la même palette RARITIES. */
#crm-panel .dash-score-card{
  margin:16px 0 22px;padding:22px 16px;border-radius:16px;border:1px solid;text-align:center;
  transition:all .4s ease;
}
#crm-panel .dash-score-label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--t2);margin-bottom:6px}
#crm-panel .dash-score-val{font-size:56px;font-weight:800;line-height:1}
#crm-panel .dash-score-rarity{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.18em;margin-top:6px}
#crm-panel .dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
#crm-panel .dash-kpi{
  background:var(--bg1);border:1px solid var(--bd);border-radius:10px;padding:14px 16px;
}
#crm-panel .dash-kpi-val{font-size:26px;font-weight:800;line-height:1;margin-bottom:3px}
#crm-panel .dash-kpi-val.bl{color:var(--bl);text-shadow:0 0 16px rgba(96,165,250,.35)}
#crm-panel .dash-kpi-val.go{color:var(--go2);text-shadow:0 0 16px rgba(252,211,77,.35)}
#crm-panel .dash-kpi-val.gr{color:var(--gr);text-shadow:0 0 16px rgba(52,211,153,.35)}
#crm-panel .dash-kpi-val.pu{color:var(--pu2);text-shadow:0 0 16px rgba(196,181,253,.35)}
#crm-panel .dash-kpi-val.rd{color:var(--rd);text-shadow:0 0 16px rgba(248,113,113,.35)}
#crm-panel .dash-kpi-label{font-size:9px;color:var(--t2);letter-spacing:1px;text-transform:uppercase}
#crm-panel .dash-section{margin-bottom:20px}
#crm-panel .dash-sec-title{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--t3);font-weight:700;margin-bottom:10px}
#crm-panel .dash-sec-subtitle{font-size:11px;color:var(--t2);line-height:1.5;margin:-4px 0 14px;max-width:640px}
#crm-panel .dash-sec-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:20px}

/* Stats RDV/appels par période — portées du dashboard prod (2026-07-31) */
#crm-panel .dash-period-tabs{display:flex;gap:6px;margin-bottom:14px}
#crm-panel .dash-period-tab{
  font-size:11px;font-weight:700;color:var(--t2);background:rgba(255,255,255,.04);
  border:1px solid var(--bd);padding:6px 14px;border-radius:999px;cursor:pointer;transition:.12s;
}
#crm-panel .dash-period-tab:hover{color:var(--t1);border-color:var(--pu)}
#crm-panel .dash-period-tab.active{color:#fff;background:var(--pu);border-color:var(--pu)}
#crm-panel .rdv-stats-grid{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:14px}
#crm-panel .rdv-stat-card{
  flex:1;min-width:200px;display:flex;align-items:center;gap:.8rem;
  padding:.7rem .85rem;background:rgba(255,255,255,.02);border:1px solid var(--bd);border-radius:10px;
}
#crm-panel .rdv-stat-donut circle{fill:none;stroke-linecap:round}
#crm-panel .rdv-donut-pct{font-family:var(--mono);font-size:14px;font-weight:800;text-anchor:middle;dominant-baseline:central;fill:var(--t1)}
#crm-panel .rdv-stat-body{flex:1;min-width:0}
#crm-panel .rdv-stat-title{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:.4rem}
#crm-panel .rdv-stat-legend{display:flex;flex-direction:column;gap:4px}
#crm-panel .rdv-stat-row{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--t1);white-space:nowrap}
#crm-panel .rdv-stat-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
#crm-panel .rdv-stat-row b{font-family:var(--mono);margin-left:auto;padding-left:8px;color:var(--t2);font-weight:700}
#crm-panel .rdv-stat-empty{font-size:10.5px;color:var(--t3);line-height:1.4}
#crm-panel .gen-packs-btn{
  font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--pu2);
  background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.3);border-radius:8px;
  padding:6px 12px;cursor:pointer;transition:.15s;white-space:nowrap;
}
#crm-panel .gen-packs-btn:hover{background:rgba(167,139,250,.22);border-color:rgba(167,139,250,.5)}
#crm-panel .gen-packs-group{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
#crm-panel .gen-packs-profession{
  font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--t2);
  background:rgba(255,255,255,.05);border:1px solid var(--bd);border-radius:8px;
  padding:6px 8px;cursor:pointer;
}
#crm-panel .scrape-progress-banner{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:9999;
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--pu2);
  background:rgba(16,15,28,.92);border:1px solid rgba(167,139,250,.4);border-radius:10px;
  padding:10px 18px;box-shadow:0 8px 24px rgba(0,0,0,.35);white-space:nowrap;
}
#crm-panel .recycle-pack-btn{
  font-family:var(--mono);font-size:10px;font-weight:700;color:var(--rd);
  background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.25);border-radius:8px;
  padding:7px 10px;cursor:pointer;transition:.15s;width:100%;margin-top:12px;position:relative;
}
#crm-panel .recycle-pack-btn:hover{background:rgba(248,113,113,.2);border-color:rgba(248,113,113,.45)}
#crm-panel .distrib-rows{display:flex;flex-direction:column;gap:7px}
#crm-panel .distrib-row{display:grid;grid-template-columns:140px 1fr 30px;align-items:center;gap:8px}
#crm-panel .distrib-lbl{font-size:10px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#crm-panel .distrib-bar-wrap{background:rgba(255,255,255,.05);border-radius:3px;height:4px;overflow:hidden}
#crm-panel .distrib-bar{height:100%;border-radius:3px}
#crm-panel .distrib-num{font-size:10px;color:var(--t2);text-align:right}
#crm-panel .dash-empty{color:var(--t3);font-size:11px;font-style:italic}

#crm-panel /* ══════════════════════════════════════════
   FICHE LEAD (hidden → open)
   Actions 33.3% | Feed 66.7% of crm-main
   = 30% | 60% of total
══════════════════════════════════════════ */
.crm-fiche{display:none;overflow:hidden;flex:1;min-width:0}
#crm-panel .crm-fiche.open{display:flex;flex-direction:column}

/* Layout en page unique qui scrolle (2026-07-31, demande Steve — infos en cartes en haut,
   feed en dessous, plutôt que le split gauche/droite). .fiche-scroll est le seul scroller,
   .feed-timeline hérite juste sa hauteur naturelle au lieu de scroller indépendamment.
   Chaque section (Coordonnées/Suivi/Formation/Contacts/Ventes/Tâches/Feed) est une vraie
   carte visuelle séparée (2026-08-08, demande Steve : "on n'arrive pas à voir où sont les
   blocs" — avant, juste une ligne de séparation plate entre sections qui se touchaient).
   Cartes non cliquables : aucun cursor/hover d'affordance sur .fiche-sec lui-même, seuls
   les boutons/inputs à l'intérieur restent interactifs. */
#crm-panel .fiche-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding:14px 16px 20px;gap:14px}
#crm-panel .fiche-sub{padding:0 2px 2px;font-size:11px;color:var(--t3);display:flex;align-items:center;gap:6px}
#crm-panel .projet-sel{
  font-size:10px;padding:2px 6px;border-radius:5px;border:1px solid var(--bd);
  background:transparent;color:var(--t3);cursor:pointer;font-family:var(--mono);
  width:auto;max-width:180px;
}
#crm-panel .fiche-top-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Les flèches ◀▶ étaient collées à droite (justify-content:space-between). Dans le CRM
   affiché en iframe dans le bureau virtuel, les boutons de l'interface WorkAdventure
   occupent ce coin et les recouvraient (signalé par Steve 2026-08-12). Regroupées à
   gauche, juste après "← retour", elles sont hors de portée de toute surcouche. */
#crm-panel .fiche-back{
  display:flex;align-items:center;justify-content:flex-start;gap:14px;padding:11px 14px;
  border-bottom:1px solid var(--bd);color:var(--t2);
  font-size:10px;flex-shrink:0;letter-spacing:.5px;
}
#crm-panel .fiche-back-label{
  cursor:pointer;color:var(--or);text-shadow:0 0 8px rgba(251,146,60,.55);
  transition:color .15s,text-shadow .15s;
}
#crm-panel .fiche-back-label:hover{color:#fdba74;text-shadow:0 0 12px rgba(251,146,60,.8)}
#crm-panel .fiche-nav{display:flex;gap:4px}
#crm-panel .fiche-nav-btn{
  padding:3px 9px;border:1px solid rgba(52,211,153,.45);border-radius:5px;color:var(--gr);
  font-size:11px;cursor:pointer;transition:all .15s;background:rgba(52,211,153,.08);
  box-shadow:0 0 8px rgba(52,211,153,.4);
}
#crm-panel .fiche-nav-btn:hover{color:#6ee7b7;border-color:rgba(52,211,153,.75);box-shadow:0 0 14px rgba(52,211,153,.65)}
#crm-panel .fiche-nav-btn:disabled{opacity:.3;cursor:default;pointer-events:none;box-shadow:none}
#crm-panel .fiche-head{padding:0 2px 12px;border-bottom:1px solid var(--bd);flex-shrink:0}
#crm-panel .fiche-name{font-size:16px;font-weight:800;color:var(--t1);margin-bottom:9px;line-height:1.2}
#crm-panel .fiche-status-wrap{margin-bottom:10px}
#crm-panel .status-sel{
  font-size:10px;padding:4px 10px;border-radius:6px;border:1px solid;
  background:transparent;cursor:pointer;font-family:var(--mono);
  font-weight:700;width:100%;
}
#crm-panel .fiche-contacts{display:flex;flex-direction:column;gap:5px;margin-top:8px}
#crm-panel .fiche-contact-line{font-size:11px;color:var(--t2);display:flex;gap:7px;align-items:center}
#crm-panel .fiche-contact-line a{color:var(--bl);transition:color .15s}
#crm-panel .fiche-contact-line a:hover{color:var(--cy)}
#crm-panel .fiche-contact-icon{font-size:12px;flex-shrink:0}
#crm-panel .fiche-body{flex:1;overflow-y:auto}
#crm-panel .fiche-sec{
  border:1px solid var(--bd);border-radius:14px;padding:14px 16px;
  background:var(--bg1);box-shadow:0 3px 14px -10px rgba(0,0,0,.5);
}
/* Carte "Tâches" volontairement différente (2026-08-08, demande Steve) : c'est là qu'on
   crée du contenu (nouvelle tâche), doit sauter aux yeux par rapport aux cartes de lecture. */
#crm-panel .fiche-sec-tasks{
  background:linear-gradient(165deg, rgba(139,92,246,.12), var(--bg1) 65%);
  border-color:rgba(139,92,246,.4);
  box-shadow:0 4px 18px -10px rgba(139,92,246,.35);
}
#crm-panel .fiche-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
#crm-panel .fiche-sec-title{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--t3);font-weight:700}
#crm-panel .fiche-sec-btn{
  font-size:14px;color:var(--t3);cursor:pointer;padding:1px 4px;
  border-radius:4px;transition:all .15s;
}
#crm-panel .fiche-sec-btn:hover{color:var(--pu2);background:rgba(139,92,246,.1)}
#crm-panel .fiche-add-btn{
  padding:4px 11px;background:linear-gradient(135deg,var(--pu),rgba(34,211,238,.8));border-radius:999px;
  color:#fff;font-size:11px;font-weight:700;border:none;cursor:pointer;
  box-shadow:0 3px 10px -4px rgba(139,92,246,.6);transition:opacity .15s,transform .15s,box-shadow .15s;
}
#crm-panel .fiche-add-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 5px 14px -4px rgba(139,92,246,.7)}
#crm-panel .fiche-add-btn:active{transform:translateY(0) scale(.96);opacity:1}

#crm-panel /* Quick add task */
.task-quick{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
#crm-panel .task-quick-row{display:flex;gap:5px}
#crm-panel .task-input{
  flex:1;padding:6px 10px;background:rgba(255,255,255,.04);border:1px solid var(--bd);
  border-radius:6px;font-size:11px;color:var(--t1);transition:border-color .15s;
}
#crm-panel .task-input:focus{border-color:rgba(167,139,250,.5)}
#crm-panel .task-input::placeholder{color:var(--t2)}
#crm-panel .task-date{
  width:108px;padding:6px 8px;background:rgba(255,255,255,.04);border:1px solid var(--bd);
  border-radius:6px;font-size:10px;color:var(--t2);transition:border-color .15s;
}
#crm-panel .task-date:focus{border-color:rgba(167,139,250,.5)}
#crm-panel .task-time{
  width:82px;padding:6px 8px;background:rgba(255,255,255,.04);border:1px solid var(--bd);
  border-radius:6px;font-size:10px;color:var(--t2);transition:border-color .15s;
}
#crm-panel .task-time:focus{border-color:rgba(167,139,250,.5)}
#crm-panel .task-add-btn{
  padding:6px 12px;background:linear-gradient(135deg,var(--pu),rgba(34,211,238,.8));border-radius:6px;
  color:#fff;font-size:12px;font-weight:700;transition:opacity .15s,transform .15s,box-shadow .15s;
  box-shadow:0 4px 14px -6px rgba(139,92,246,.5);
}
#crm-panel .task-add-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 18px -6px rgba(139,92,246,.65)}
#crm-panel .task-add-btn:active{transform:translateY(0) scale(.96);opacity:1}
#crm-panel .task-item{display:flex;align-items:flex-start;gap:8px;padding:5px 0}
#crm-panel .task-cb{
  width:16px;height:16px;border-radius:3px;border:2px solid var(--bd2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:1px;transition:all .15s;
}
#crm-panel .task-cb:hover{border-color:var(--pu)}
#crm-panel .task-cb:active{transform:scale(.88)}
#crm-panel .task-cb.done{background:var(--gr);border-color:var(--gr);color:#000;font-size:10px}

#crm-panel .campagne-filter{position:relative;margin-left:8px}
#crm-panel .campagne-filter-btn{
  padding:6px 10px;background:rgba(255,255,255,.04);border:1px solid var(--bd);border-radius:6px;
  font-size:11px;color:var(--t2);cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s;
}
#crm-panel .campagne-filter-btn:hover{border-color:rgba(167,139,250,.5);color:var(--t1)}
#crm-panel .campagne-filter-btn.active{border-color:var(--pu);color:var(--pu2)}
#crm-panel .campagne-filter-panel{
  position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:200px;
  background:#0a0a14;border:1px solid var(--bd2);border-radius:10px;padding:8px;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.6);
}
#crm-panel .campagne-filter-panel.hidden{display:none}
#crm-panel .campagne-filter-item{
  display:flex;align-items:center;gap:8px;padding:6px 6px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--t1);
}
#crm-panel .campagne-filter-item:hover{background:rgba(255,255,255,.05)}
#crm-panel .campagne-filter-item input{accent-color:var(--pu);width:14px;height:14px;cursor:pointer}
#crm-panel .campagne-filter-sep{height:1px;background:var(--bd);margin:4px 0}
#crm-panel .campagne-filter-all{font-size:11px;color:var(--pu2);cursor:pointer;padding:4px 6px}
#crm-panel .campagne-filter-all:hover{text-decoration:underline}
#crm-panel .task-body{flex:1;min-width:0}
#crm-panel .task-text{font-size:11px;color:var(--t1);line-height:1.4;word-break:break-word}
#crm-panel .task-text.done{text-decoration:line-through;color:var(--t3)}
#crm-panel .lead-name.done{text-decoration:line-through;color:var(--t3)}
#crm-panel .inbox-row-info{flex:1;min-width:0;width:100%}
#crm-panel .inbox-lead-name{font-size:16px;font-weight:800;color:var(--t1);line-height:1.3;word-break:break-word}
#crm-panel .inbox-agent-badge{
  display:inline-block;font-size:10px;font-weight:700;color:var(--pu2);
  background:rgba(167,139,250,.14);border:1px solid rgba(167,139,250,.3);
  border-radius:5px;padding:2px 7px;margin-right:8px;vertical-align:middle;
}
#crm-panel .inbox-task-text.inbox-ov1{color:var(--or)}
#crm-panel .inbox-task-text.inbox-ov2{color:var(--rd)}
#crm-panel .inbox-overdue-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
#crm-panel .inbox-overdue-tag.inbox-ov1{color:var(--or)}
#crm-panel .inbox-overdue-tag.inbox-ov2{color:var(--rd)}
#crm-panel .inbox-lead-name.done{opacity:.45}
#crm-panel .inbox-call-link{
  display:inline-flex;align-items:center;gap:3px;margin-left:8px;font-size:12px;font-weight:700;
  color:var(--gr);text-decoration:none;vertical-align:middle;
}
#crm-panel .inbox-call-link:hover{text-decoration:underline}

/* ── Super-priorité des tâches (Steve 2026-07-21) : « ultra visible » ─────────── */
@keyframes prioGlow{0%,100%{box-shadow:0 0 0 1px rgba(239,68,68,.55), 0 0 14px -2px rgba(239,68,68,.35)}50%{box-shadow:0 0 0 1px rgba(239,68,68,.9), 0 0 22px 2px rgba(239,68,68,.6)}}
@keyframes prioPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
#crm-panel .task-prio-row{
  border-left:4px solid #ef4444 !important;
  background:linear-gradient(90deg, rgba(239,68,68,.16), rgba(239,68,68,.05) 60%, transparent) !important;
  border-radius:10px;
  animation:prioGlow 1.8s ease-in-out infinite;
  padding-left:8px;
}
#crm-panel .task-prio-row .inbox-task-text,
#crm-panel .task-prio-row .task-text{font-weight:700 !important;color:#fecaca !important}
#crm-panel .task-prio-badge{
  display:inline-block;margin-right:7px;padding:2px 8px;border-radius:999px;
  background:#ef4444;color:#fff;font-size:10px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;vertical-align:middle;animation:prioPulse 1.4s ease-in-out infinite;
  box-shadow:0 2px 8px -1px rgba(239,68,68,.7);
}
#crm-panel .task-prio-flag{
  border:none;background:none;cursor:pointer;font-size:13px;line-height:1;
  margin-right:6px;padding:1px 3px;border-radius:6px;opacity:.35;
  color:var(--t3);vertical-align:middle;transition:opacity .15s, transform .1s;
}
#crm-panel .task-prio-flag:hover{opacity:.85;transform:scale(1.15)}
#crm-panel .task-prio-flag.on{opacity:1;color:#ef4444;filter:drop-shadow(0 0 4px rgba(239,68,68,.6))}
#crm-panel .task-prio-check{
  display:flex;align-items:center;gap:6px;margin-top:8px;cursor:pointer;
  font-size:12px;font-weight:600;color:var(--t2);user-select:none;
}
#crm-panel .task-prio-check input{width:15px;height:15px;accent-color:#ef4444;cursor:pointer;margin:0}
#crm-panel .task-prio-check:hover{color:#fca5a5}
#crm-panel .inbox-task-text{font-size:12px;font-weight:500;color:var(--t2);line-height:1.4;word-break:break-word;margin-top:4px}
#crm-panel .inbox-task-text.done{text-decoration:line-through;color:var(--t3)}
/* Onglets Inbox par agent — Manager uniquement (2026-07-15) */
#crm-panel .inbox-agent-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-bottom:1px solid var(--bd);position:sticky;top:0;background:var(--bg);z-index:2}
#crm-panel .inbox-agent-tab{font-size:12px;font-weight:700;color:var(--t2);background:rgba(255,255,255,.04);border:1px solid var(--bd);padding:5px 11px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:.12s;user-select:none}
#crm-panel .inbox-agent-tab:hover{color:var(--t1);border-color:var(--pu)}
#crm-panel .inbox-agent-tab.active{color:#fff;background:var(--pu);border-color:var(--pu)}
#crm-panel .inbox-agent-tab .cnt{opacity:.7;font-weight:600;margin-left:4px}
#crm-panel .task-due{font-size:9px;margin-top:2px;display:flex;align-items:center;gap:5px}
#crm-panel .task-due.ov1{color:var(--or);font-weight:700}
#crm-panel .task-due.ov2{color:var(--rd);font-weight:700}
#crm-panel .task-due.td{color:var(--go2);font-weight:700}
#crm-panel .task-due.ft{color:var(--t3)}
#crm-panel .task-reschedule-btn{
  background:none;border:none;cursor:pointer;font-size:10px;color:var(--t3);
  padding:0 2px;line-height:1;transition:color .15s;
}
#crm-panel .task-reschedule-btn:hover{color:var(--pu2)}
#crm-panel .task-reschedule-row{display:none;gap:5px;margin-top:4px}
#crm-panel .task-reschedule-row.open{display:flex}
#crm-panel .task-reschedule-row .task-date, #crm-panel .task-reschedule-row .task-time{width:auto;flex:1;min-width:0}
#crm-panel .no-tasks{font-size:10px;color:var(--t3);font-style:italic}

#crm-panel /* Custom fields grid */
.fields-grid{display:flex;flex-direction:column;gap:6px}
#crm-panel .field-row{display:grid;grid-template-columns:90px 1fr;gap:6px;align-items:start}
#crm-panel .field-key{font-size:9px;color:var(--t3);font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding-top:1px}
#crm-panel .field-val{font-size:11px;color:var(--t1);word-break:break-word}
#crm-panel .field-val.empty{color:var(--t3);font-style:italic}

#crm-panel /* ══════════════════════════════════════════
   FEED SECTION — dernière .fiche-sec de .fiche-scroll
══════════════════════════════════════════ */
/* flex:1 ici (2026-07-31, fix "feed plus ou moins grand selon le lead") : sans ça, cette
   section s'arrête où son contenu s'arrête, et selon la quantité de contacts/tâches/ventes
   au-dessus (variable par lead) elle laisse un vide de hauteur inconsistante en bas de page.
   flex:1 la fait toujours combler l'espace restant de .fiche-scroll — et si le feed dépasse
   la hauteur dispo, .fiche-scroll (seul scroller) prend le relais normalement. */
/* flex:0 0 auto et PAS flex:1 (corrigé le 2026-08-13, chevauchement signalé par Steve) :
   dans .fiche-scroll (flex column), `flex:1` vaut flex-basis:0 + flex-shrink:1 — la carte Feed
   était donc comprimée à une hauteur inférieure à son contenu, et comme .feed-timeline est en
   overflow:visible, les cartes du feed sortaient par le bas et passaient PAR-DESSUS la bordure
   de la carte (mesuré : 81 px de débordement). C'est .fiche-scroll qui scrolle, la carte Feed
   doit donc simplement prendre sa hauteur naturelle. */
.fiche-sec-feed{flex:0 0 auto;display:flex;flex-direction:column;min-height:260px}
#crm-panel .feed-composer{border-bottom:1px solid var(--bd);padding:0 0 13px;margin:-2px 0 13px;flex-shrink:0}
#crm-panel .feed-type-tabs{display:flex;gap:4px;margin-bottom:9px}
#crm-panel .feed-tab{
  font-size:10px;padding:5px 14px;border-radius:6px;cursor:pointer;
  border:1px solid var(--bd);color:var(--t2);font-weight:700;letter-spacing:.5px;
  transition:all .15s;
}
#crm-panel .feed-tab.active{background:rgba(139,92,246,.15);border-color:var(--pu);color:var(--pu2)}
#crm-panel .feed-tab:hover:not(.active){color:var(--t1);border-color:var(--bd2)}
#crm-panel .feed-textarea{
  width:100%;min-height:68px;padding:9px 12px;background:rgba(255,255,255,.04);
  border:1px solid var(--bd);border-radius:8px;color:var(--t1);
  font-size:12px;line-height:1.5;resize:none;transition:border-color .15s;
}
#crm-panel .feed-textarea:focus{border-color:rgba(167,139,250,.5)}
#crm-panel .feed-textarea::placeholder{color:var(--t2)}
#crm-panel .feed-html-editor{min-height:120px;max-height:420px;overflow-y:auto;cursor:text}
#crm-panel .feed-html-editor:empty::before{content:attr(data-placeholder);color:var(--t2)}
/* position:relative — la boule de dictée est posée en absolu au CENTRE de cette ligne
   (demande Steve 2026-08-13 : collée au bouton Ajouter, elle passait inaperçue). */
#crm-panel .feed-save-row{position:relative;display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:7px;min-height:46px}
#crm-panel .feed-save-btn{
  padding:7px 18px;background:linear-gradient(135deg,var(--pu),rgba(34,211,238,.8));border-radius:7px;
  color:#fff;font-size:11px;font-weight:700;transition:opacity .15s,transform .15s,box-shadow .15s;letter-spacing:.5px;
  box-shadow:0 4px 14px -6px rgba(139,92,246,.5);
}
#crm-panel .feed-save-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 18px -6px rgba(139,92,246,.65)}
#crm-panel .feed-save-btn:active{transform:translateY(0) scale(.96);opacity:1}
#crm-panel .feed-save-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
/* Bouton micro (dictée vocale de note, demande Steve 2026-08-13) — rouge + halo pulsant pendant
   l'écoute active, même langage que le point d'enregistrement classique (téléphone, dictaphone). */
/* ═══ Boule de dictée (2026-08-13, demande Steve) ═══════════════════════════════
   Avant : un petit rond de 30px avec un émoji 🎤, collé au bouton "Ajouter" — invisible.
   Maintenant : une sphère lumineuse centrée dans la ligne, qui respire doucement au repos
   (aura) et s'embrase en rouge quand elle écoute. Pas d'icône : l'objet EST le bouton.
   Le translate(-50%,-50%) du centrage doit être répété dans chaque keyframe, sinon
   l'animation d'échelle écrase le positionnement et la boule saute en haut à gauche. */
#crm-panel .feed-mic-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;border:none;padding:0;font-size:0;
  background:radial-gradient(circle at 34% 28%, #c4b5fd 0%, #8b5cf6 45%, #5b21b6 100%);
  box-shadow:0 0 16px rgba(139,92,246,.55), inset 0 -3px 8px rgba(0,0,0,.35), inset 0 2px 6px rgba(255,255,255,.25);
  cursor:pointer;flex-shrink:0;
  animation:feed-mic-breathe 3.6s ease-in-out infinite;
}
#crm-panel .feed-mic-btn:hover{
  background:radial-gradient(circle at 34% 28%, #ddd6fe 0%, #a78bfa 45%, #6d28d9 100%);
  box-shadow:0 0 26px rgba(167,139,250,.85), inset 0 -3px 8px rgba(0,0,0,.3), inset 0 2px 6px rgba(255,255,255,.35);
}
/* Respiration au repos : l'aura enfle et se rétracte lentement, assez pour attirer l'œil
   sans distraire pendant qu'on écrit une note. */
@keyframes feed-mic-breathe{
  0%,100%{box-shadow:0 0 14px rgba(139,92,246,.45), inset 0 -3px 8px rgba(0,0,0,.35), inset 0 2px 6px rgba(255,255,255,.25);transform:translate(-50%,-50%) scale(1)}
  50%    {box-shadow:0 0 30px rgba(139,92,246,.9),  inset 0 -3px 8px rgba(0,0,0,.35), inset 0 2px 6px rgba(255,255,255,.25);transform:translate(-50%,-50%) scale(1.06)}
}
#crm-panel .feed-mic-btn.recording{
  background:radial-gradient(circle at 34% 28%, #fecaca 0%, #f87171 45%, #b91c1c 100%);
  animation:feed-mic-pulse 1.2s ease-in-out infinite;
}
/* scale() ajouté en plus du halo (2026-08-13, retour Steve : le halo seul passait inaperçu sur
   un bouton de 30px, "on ne sait pas si le micro écoute vraiment") — un vrai mouvement de
   respiration se voit du coin de l'œil, pas seulement une ombre qui change. */
@keyframes feed-mic-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.65), 0 0 22px rgba(248,113,113,.8);transform:translate(-50%,-50%) scale(1)}
  50%    {box-shadow:0 0 0 12px rgba(248,113,113,0), 0 0 34px rgba(248,113,113,.95);transform:translate(-50%,-50%) scale(1.14)}
}
/* État transitoire "arrêt en cours" (clic reçu, en attente de la confirmation onend du
   navigateur) — ambre, sans pulsation, pour se distinguer clairement du rouge "encore en
   écoute" (2e bug remonté par Steve : le clic d'arrêt semblait ignoré, restait rouge). */
#crm-panel .feed-mic-btn.stopping{
  background:radial-gradient(circle at 34% 28%, #fde68a 0%, #fbbf24 45%, #b45309 100%);
  box-shadow:0 0 18px rgba(251,191,36,.75), inset 0 -3px 8px rgba(0,0,0,.3);
  animation:none;transform:translate(-50%,-50%);
}

/* Fond de section légèrement creusé (2026-07-31, demande Steve : le feed en ligne simple se
   distinguait mal, il voulait un vrai effet "carte" compact comme le build test précédent). */
#crm-panel .feed-timeline{flex:1;overflow-y:visible;padding:12px;margin:0 -2px;display:flex;flex-direction:column;gap:8px;background:rgba(0,0,0,.12);border-radius:10px}
#crm-panel .feed-date-sep{display:flex;align-items:center;gap:8px;margin:2px 0}
#crm-panel .feed-date-sep::before, #crm-panel .feed-date-sep::after{content:'';flex:1;height:1px;background:var(--bd)}
#crm-panel .feed-date-txt{font-size:9px;color:var(--t3);letter-spacing:1px;white-space:nowrap}
#crm-panel .feed-item{
  display:flex;gap:10px;padding:10px 12px;
  background:var(--bg1);border:1px solid var(--bd);border-radius:10px;
  transition:border-color .15s,background .15s;
  /* Garde-fou (2026-08-07, bug remonté par Steve) : cartes email au libellé court parfois
     écrasées à ~170px par le calcul flex-basis:auto quand plusieurs cartes au texte de
     longueur très inégale se disputent l'espace — le texte se retrouve alors cassé lettre
     par lettre (word-break hérité). width:100%+flex-shrink:0 force chaque carte à occuper
     toute la largeur du timeline quoi qu'il arrive, indépendamment de la cause exacte. */
  width:100%;flex-shrink:0;box-sizing:border-box;
}
#crm-panel .feed-item:hover{border-color:var(--bd2);background:var(--bg2)}
#crm-panel .feed-icon{
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:13px;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.05);
}
#crm-panel .feed-icon.note{background:rgba(139,92,246,.15)}
#crm-panel .feed-icon.call{background:rgba(52,211,153,.12)}
#crm-panel .feed-icon.sms{background:rgba(96,165,250,.12)}
#crm-panel .feed-icon.task{background:rgba(240,192,64,.1)}
#crm-panel .feed-body{flex:1;min-width:0}
#crm-panel .feed-row{display:flex;align-items:center;gap:6px;margin-bottom:3px}
#crm-panel .feed-type-label{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
#crm-panel .feed-type-label.note{color:var(--pu2)}
#crm-panel .feed-type-label.call{color:var(--gr)}
#crm-panel .feed-type-label.sms{color:var(--bl)}
#crm-panel .feed-type-label.task{color:var(--go2)}
#crm-panel .feed-time{font-size:12px;color:var(--t2);margin-left:auto}
#crm-panel .feed-content{font-size:12px;color:var(--t1);line-height:1.6;white-space:pre-wrap;word-break:break-word;min-width:0}
/* Corps d'email rendu en HTML (2026-07-16) : annule le pre-wrap hérité (les sauts de ligne du
   source HTML créeraient des blancs parasites) et espace les paragraphes proprement.
   Fond blanc + texte sombre forcés (2026-07-28, bug Steve "texte noir sur fond noir") : les
   emails Outlook/Gmail fixent souvent une couleur de texte inline (ex: color:rgb(0,0,0)) sans
   fond associé sur tous les blocs — sur le thème sombre du CRM ça devient illisible. Un fond
   clair fixe rend le HTML lisible quel que soit ce que l'email source a prévu ou non, comme un
   aperçu de mail classique plutôt qu'un élément du thème de l'app. */
#crm-panel .feed-email-body{white-space:normal;margin-top:6px;padding:8px 10px;border-left:2px solid var(--bd2);border-radius:4px;background:#fff;color:#1a1a1a;max-width:100%;overflow-x:auto;box-sizing:border-box}
/* Les emails HTML (newsletters/templates) embarquent souvent des tableaux à largeur fixe en
   style inline (ex: style="width:640px") — l'inline bat un simple sélecteur de classe, d'où
   !important ici pour vraiment contraindre le contenu injecté dans le panneau du feed. */
#crm-panel .feed-email-body table{max-width:100% !important}
#crm-panel .feed-email-body td,
#crm-panel .feed-email-body th{max-width:100% !important}
#crm-panel .feed-email-body p{margin:0 0 8px}
#crm-panel .feed-email-body p:last-child{margin-bottom:0}
#crm-panel .feed-email-body img{max-width:100%}
#crm-panel .feed-email-body.collapsed{display:none}
#crm-panel .feed-email-head{cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none}
#crm-panel .feed-email-head-txt{flex:1;min-width:0}
#crm-panel .feed-email-caret{display:inline-block;transition:transform .15s;color:var(--t2);font-size:10px;flex:none}
#crm-panel .feed-email-head.open .feed-email-caret{transform:rotate(90deg)}
#crm-panel .feed-email-hint{color:var(--t2);font-size:11px;margin-left:auto;white-space:nowrap;flex:none;opacity:.8}
#crm-panel .feed-att-chip{display:inline-flex;align-items:center;gap:4px;margin:4px 6px 0 0;padding:3px 8px;font-size:11px;color:var(--t1);background:rgba(255,255,255,.06);border:1px solid var(--bd2);border-radius:20px;text-decoration:none;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#crm-panel .feed-att-chip:hover{border-color:var(--rar-color,#a855f7)}
#crm-panel .feed-track-badge{color:#34d399;font-size:10px;font-weight:700;white-space:nowrap;flex:none}
#crm-panel .feed-track-badge.feed-track-unopened{color:var(--t2);font-weight:400;opacity:.7}
#crm-panel .feed-item.feed-hi{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.4)}
#crm-panel .feed-item.feed-hi .feed-type-label{color:#34d399;font-weight:700}
#crm-panel .feed-item.feed-hi .feed-content{color:#bbf7d0}
#crm-panel .feed-author{font-size:9px;color:var(--t3);margin-top:2px}
#crm-panel .feed-empty{color:var(--t3);font-size:11px;font-style:italic;padding:20px 0;text-align:center}
#crm-panel .feed-loading{color:var(--t3);font-size:11px;padding:20px 0;text-align:center;animation:pulse .8s infinite}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}

#crm-panel /* ══════════════════════════════════════════
   TEMPLATES
══════════════════════════════════════════ */
.crm-templ{flex:1;overflow-y:auto;padding:20px 24px;display:none}
#crm-panel .crm-templ.active{display:block}
#crm-panel .tmpl-modal{position:absolute;inset:0;z-index:50;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
#crm-panel .tmpl-modal.hidden{display:none}
#crm-panel .tmpl-modal-box{background:var(--bg);border:1px solid var(--bd2);border-radius:16px;padding:20px;width:90%;max-width:560px;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px -10px rgba(0,0,0,.6)}
#crm-panel .tmpl-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:14px;font-weight:800;color:var(--t1)}
#crm-panel .tmpl-modal-actions{display:flex;justify-content:space-between;gap:8px}
#crm-panel label.field-key{display:block;margin-bottom:2px}

/* Accès Rapides (Dashboard) — porté du Cockpit prod (index.html .plbl/.sc-grid/.sc), 2026-08-04 */
#crm-panel .plbl{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);display:flex;align-items:center;gap:8px;margin:22px 0 10px}
#crm-panel .plbl::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--pu);box-shadow:0 0 6px var(--pu);flex-shrink:0}
#crm-panel .sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#crm-panel .sc{display:flex;align-items:center;gap:8px;padding:.5rem .6rem;background:rgba(255,255,255,.025);border:1px solid var(--bd);border-radius:8px;text-decoration:none;color:var(--t2);font-size:11px;transition:all .2s;cursor:pointer}
#crm-panel .sc:hover{background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.3);color:var(--t1);transform:translateY(-1px);box-shadow:0 4px 12px rgba(139,92,246,.12)}
#crm-panel .sc-ic{font-size:14px;flex-shrink:0}

/* VossoBot — mascotte flottante draggable + vie autonome + fenêtre de chat
   (Dashboard, 2026-08-04). Halo sur --vbot-color/--vbot-glow/--vbot-bg/--vbot-border,
   posés en JS (vbotApplyAppearance, vossobot.js) depuis les vraies données 'joueurs'
   (niveau/éclos/bonheur/humeur) si dispo, sinon la palette RARITIES du badge/carte
   "Score du jour". Voir js/vossobot.js pour l'état du service backend, la balade
   autonome et le comportement de drag. */
#crm-panel .vbot-mascot{position:fixed;right:26px;bottom:26px;z-index:60;width:60px;height:60px;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  display:flex;align-items:center;justify-content:center}
#crm-panel .vbot-mascot.dragging{cursor:grabbing}
#crm-panel .vbot-mascot-ring{position:absolute;inset:-8px;border-radius:50%;pointer-events:none;
  border:1.5px solid var(--vbot-border,rgba(139,92,246,.4));
  box-shadow:0 0 22px var(--vbot-glow,rgba(139,92,246,.35)),inset 0 0 14px var(--vbot-bg,rgba(139,92,246,.08));
  animation:vbot-pulse 2.6s ease-in-out infinite}
#crm-panel .vbot-mascot-core{position:relative;width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--vbot-color,var(--pu)),var(--cy));
  display:flex;align-items:center;justify-content:center;font-size:24px;
  box-shadow:0 4px 18px rgba(0,0,0,.35);transition:transform .15s}
#crm-panel .vbot-mascot:hover .vbot-mascot-core{transform:scale(1.07)}
#crm-panel .vbot-mascot-img{width:100%;height:100%;object-fit:contain;pointer-events:none;border-radius:50%}
#crm-panel .vbot-mascot.pop .vbot-mascot-core{animation:vbot-pop .35s ease}
#crm-panel .vbot-mascot-badge{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:8.5px;font-weight:800;letter-spacing:.02em;padding:2px 7px;border-radius:20px;
  background:var(--vbot-bg,rgba(139,92,246,.12));border:1px solid var(--vbot-border,rgba(139,92,246,.4));
  color:var(--vbot-color,var(--pu));pointer-events:none}
@keyframes vbot-pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
@keyframes vbot-pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
/* Pas encore éclos (joueurs.mascotte_eclos=false) — halo plus discret/lent, le core
   affiche 🥚 (posé en JS) plutôt que le robot. */
#crm-panel .vbot-mascot.vbot-egg .vbot-mascot-ring{animation-duration:4s;opacity:.75}
#crm-panel .vbot-mascot.vbot-egg .vbot-mascot-core{background:linear-gradient(135deg,#e8c874,#c99a3f)}
/* Anneaux de charge pendant nourrissage/caressage (vbotApplyRingVisual, vossobot.js) — même
   langage visuel que .vm-feed-ring du cockpit prod (index.html), + équivalent caresse qui
   n'existait nulle part avant (demande Steve 2026-08-11). Se remplissent pendant l'interaction,
   se vident seuls si on arrête. mask radiale = anneau creux autour du core, pas un disque plein. */
#crm-panel .vbot-feed-ring{position:absolute;inset:-9%;border-radius:50%;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
  background:conic-gradient(from -90deg,#ff9d42 calc(var(--vbot-feed-pct,0) * 360deg),transparent 0);
  -webkit-mask:radial-gradient(closest-side,transparent 84%,#000 88%);
          mask:radial-gradient(closest-side,transparent 84%,#000 88%);
  filter:drop-shadow(0 0 6px #ff9d42)}
#crm-panel .vbot-mascot.feeding .vbot-feed-ring{opacity:1}
/* Anneau plus fin/plus proche du core que .vbot-feed-ring — si les deux tournent en même temps
   (nourrir puis caresser juste après, avant que le premier ait fini de se vider), ils restent
   distincts au lieu de se recouvrir pile au même endroit. */
#crm-panel .vbot-pet-ring{position:absolute;inset:-3%;border-radius:50%;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
  background:conic-gradient(from -90deg,#ff5c8a calc(var(--vbot-pet-pct,0) * 360deg),transparent 0);
  -webkit-mask:radial-gradient(closest-side,transparent 76%,#000 80%);
          mask:radial-gradient(closest-side,transparent 76%,#000 80%);
  filter:drop-shadow(0 0 5px #ff5c8a)}
#crm-panel .vbot-mascot.petting .vbot-pet-ring{opacity:1}
/* Retour visuel caresse/nourrissage/niveau (vbotSpawnFx, vossobot.js) — simple emoji qui pop et
   s'estompe en montant, posé sur .vbot-mascot (position:fixed = déjà un bloc de positionnement
   pour ses enfants absolus, pas besoin de position:relative en plus). */
#crm-panel .vbot-fx{position:absolute;top:2px;font-size:15px;pointer-events:none;
  animation:vbot-fx-rise .9s ease-out forwards;transform:translateX(-50%)}
@keyframes vbot-fx-rise{0%{opacity:0;transform:translateX(-50%) translateY(0) scale(.6)}
  20%{opacity:1;transform:translateX(-50%) translateY(-6px) scale(1.05)}
  100%{opacity:0;transform:translateX(-50%) translateY(-34px) scale(.9)}}
#crm-panel .vbot-mascot.vbot-levelup .vbot-mascot-core{animation:vbot-levelup-flash .9s ease}
@keyframes vbot-levelup-flash{0%{filter:brightness(1) saturate(1)}30%{filter:brightness(1.7) saturate(1.5)}100%{filter:brightness(1) saturate(1)}}
#crm-panel .vbot-chat-stats{display:flex;justify-content:space-between;gap:6px;padding:7px 12px;
  border-bottom:1px solid var(--bd);font-size:11px;color:var(--t2);white-space:nowrap}
/* Barre "prochaine évolution" — progression vers le prochain niveau (vbotRenderChatStats,
   vossobot.js), avec aperçu de l'image à venir quand le prochain niveau change de palier
   visuel. Même intention que #vcs-next du cockpit prod (index.html). */
#crm-panel .vbot-cs-next{display:flex;align-items:center;gap:8px;padding:7px 12px 9px;
  border-bottom:1px solid var(--bd)}
#crm-panel .vbot-cs-next-img{width:28px;height:28px;object-fit:contain;flex:none;
  border-radius:8px;background:rgba(139,92,246,.1)}
#crm-panel .vbot-cs-next-body{flex:1;min-width:0}
#crm-panel .vbot-cs-next-head{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:4px;gap:6px}
#crm-panel .vbot-cs-next-head span:first-child{font-size:10.5px;font-weight:700;color:var(--t2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#crm-panel .vbot-cs-next-head span:last-child{font-size:10px;font-weight:800;color:var(--t1);
  font-family:var(--mono);flex:none}
#crm-panel .vbot-cs-next-track{height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
#crm-panel .vbot-cs-next-fill{height:100%;width:0%;border-radius:6px;
  background:linear-gradient(90deg,#8b5cf6,#34d399);transition:width .5s ease}
#crm-panel .vbot-cs-next-fill.ready{background:linear-gradient(90deg,#f0c040,#34d399);
  animation:vcsPulse 1.4s ease-in-out infinite}
#crm-panel .vbot-cs-next-fill.max{background:linear-gradient(90deg,#f0c040,#f472b6)}
@keyframes vcsPulse{0%,100%{opacity:1}50%{opacity:.55}}
#crm-panel .vbot-chat{position:fixed;right:26px;bottom:90px;z-index:61;width:min(340px,calc(100vw - 40px));
  max-height:min(460px,calc(100vh - 140px));display:flex;flex-direction:column;
  background:var(--bg);border:1.5px solid var(--pu);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.35);overflow:hidden}
#crm-panel .vbot-chat.hidden{display:none}
#crm-panel .vbot-chat-head{display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;color:var(--pu2);font-weight:700;font-size:12.5px;border-bottom:1px solid var(--bd)}
#crm-panel .vbot-chat-close{cursor:pointer;color:var(--t3);font-size:16px;line-height:1}
#crm-panel .vbot-chat-close:hover{color:var(--rd)}
#crm-panel .vbot-chat-log{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px;font-size:12px;line-height:1.5;min-height:120px}
#crm-panel .vbot-msg-user{align-self:flex-end;background:rgba(167,139,250,.16);border:1px solid rgba(167,139,250,.32);border-radius:10px 10px 2px 10px;padding:7px 10px;max-width:85%;color:var(--t1);white-space:pre-wrap}
#crm-panel .vbot-msg-bot{align-self:flex-start;background:rgba(255,255,255,.04);border:1px solid var(--bd);border-radius:10px 10px 10px 2px;padding:7px 10px;max-width:85%;color:var(--t1);white-space:pre-wrap}
#crm-panel .vbot-chat-input-row{display:flex;align-items:center;border-top:1px solid var(--bd)}
#crm-panel .vbot-chat-input-row input{flex:1;padding:10px 12px;font-size:12.5px;color:var(--t1)}
#crm-panel .vbot-chat-input-row button{color:var(--pu);padding:0 14px;font-size:16px}
#crm-panel .vbot-chat-input-row button:disabled{opacity:.4;cursor:default}


/* ── Bandeau "appel en cours" (Aircall → CRM, 2026-08-12) ─────────────────────
   Fixé en haut de l'écran. z-index 150 : au-dessus des modales (.tmpl-modal est en
   z-index 50) pour qu'un appel reste visible pendant une saisie, sans recouvrir la
   boîte de la modale, qui est centrée verticalement.
   Voir js/appel-en-cours.js pour la logique d'affichage. */
.appel-banner{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:150;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:10px;
  background:var(--bg2);border:1px solid var(--gr);
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  font-size:12px;color:var(--t1);max-width:92vw;
  animation:appel-in .25s ease-out;
}
.appel-banner.hidden{display:none}
@keyframes appel-in{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
.appel-banner .appel-ico{font-size:15px;animation:appel-pulse 1.4s ease-in-out infinite}
@keyframes appel-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.appel-banner .appel-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appel-banner .appel-num{color:var(--t3);margin-left:6px;font-variant-numeric:tabular-nums}
.appel-banner .appel-btn{
  border:none;border-radius:7px;padding:6px 12px;cursor:pointer;
  background:var(--gr);color:#04150e;font-weight:700;font-size:11px;
}
.appel-banner .appel-btn:hover{filter:brightness(1.08)}
.appel-banner .appel-close{
  border:none;background:transparent;color:var(--t3);cursor:pointer;font-size:13px;padding:2px 4px;
}
.appel-banner .appel-close:hover{color:var(--t1)}

/* ── Couveuse de Vossy (2026-08-12, demande Steve ; refonte capsule 2026-08-13) ────────────────
   Case d'accueil de la mascotte, en bas des liens rapides. On l'y dépose pour qu'elle arrête de
   se balader devant l'écran. 1ère version : une niche en forme de maison, faite vite. Refonte
   demandée par Steve : une capsule circulaire simple qui englobe Vossy — anneau gris/éteint tant
   qu'il n'est pas dedans, allumé dans SA couleur de rareté actuelle une fois bien callé, comme
   une couveuse qui "reconnaît" qui est dedans (variable --vbot-pod-color, posée globalement sur
   document.documentElement par vbotRenderAppearance — une variable posée seulement sur
   #vbot-mascot n'est PAS héritée par cet élément ailleurs dans le DOM, cf. le point "Portée des
   variables CSS" dans la mémoire projet Vossy). */
#crm-panel .vbot-pod{
  position:relative;display:flex;justify-content:center;
  padding:6px 8px 0;margin-top:2px;user-select:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
  transition:filter .2s ease,transform .2s ease;
}
/* Dessin v4 (2026-08-13, "cercles dans des cercles reliés par des câbles") : anneaux concentriques
   en stroke="currentColor" — une seule propriété `color` ici pilote donc TOUTE la couleur du
   dessin (anneaux, câbles, noeuds), gris éteint par défaut, recolorée en `.vbot-pod-occupied`.
   La douille centrale (.vbot-pod-glass) reste sombre en dur (fill="#06060b" inline dans le SVG),
   volontairement indépendante de la couleur de rareté — c'est le "logement" dans lequel Vossy
   vient se clipser, pas une pièce qui doit s'allumer elle-même. */
#crm-panel .vbot-pod-svg{width:100%;max-width:84px;height:auto;display:block;overflow:visible;color:#4b5568;transition:color .4s ease}
#crm-panel .crm-nav.collapsed .vbot-pod{padding:6px 2px 0}
#crm-panel .crm-nav.collapsed .vbot-pod-svg{max-width:40px}
/* Emplacement de Vossy = centre exact des anneaux concentriques (viewBox carré 100x100, centre
   50/50). En pourcentages, ça suit automatiquement les deux largeurs de menu sans second calcul.
   Invisible : ne sert qu'au calage. */
#crm-panel .vbot-pod-slot{
  position:absolute;left:50%;top:calc(6px + 50%);width:1px;height:1px;
  transform:translate(-50%,-50%);pointer-events:none;
}
/* survolée par une mascotte en cours de déplacement : la cible devient évidente */
#crm-panel .vbot-pod.vbot-pod-target{
  transform:scale(1.06);
  filter:drop-shadow(0 0 14px rgba(167,139,250,.85)) drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
#crm-panel .vbot-pod.vbot-pod-target .vbot-pod-svg{color:#a78bfa}
/* Vossy est dans sa couveuse : tout le dessin s'allume dans sa couleur de rareté actuelle
   (repli violet si --vbot-pod-color n'a encore jamais été posée, ex. avant le 1er rendu de la
   mascotte) au lieu du gris éteint par défaut. */
#crm-panel .vbot-pod.vbot-pod-occupied .vbot-pod-svg{
  color:var(--vbot-pod-color, #a78bfa);
  filter:drop-shadow(0 0 6px var(--vbot-pod-glow, rgba(167,139,250,.7)));
}
#crm-panel .vbot-pod.vbot-pod-occupied{
  filter:drop-shadow(0 0 9px var(--vbot-pod-glow, rgba(167,139,250,.5))) drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
/* Vossy assis dans la couveuse : réduit pour tenir dans le dôme, anneau resserré, badge masqué.
   z-index 61 = au-dessus du dessin de la capsule. */
#crm-panel .vbot-mascot.vbot-docked{width:34px;height:34px;z-index:61}
#crm-panel .vbot-mascot.vbot-docked .vbot-mascot-core{width:30px;height:30px;font-size:17px}
#crm-panel .vbot-mascot.vbot-docked .vbot-mascot-ring{inset:-3px;opacity:.45}
#crm-panel .vbot-mascot.vbot-docked .vbot-mascot-badge{display:none}
#crm-panel .crm-nav.collapsed .vbot-mascot.vbot-docked{width:26px;height:26px}
#crm-panel .crm-nav.collapsed .vbot-mascot.vbot-docked .vbot-mascot-core{width:23px;height:23px;font-size:13px}

/* Choix "repositionner / créer" dans la fenêtre d'opportunité (2026-08-14). Deux lignes
   cliquables plutôt qu'une case à cocher isolée : l'agent lit les deux conséquences avant
   de choisir, au lieu de deviner ce qu'une case décochée veut dire. */
#modal-root .vm-choice{
  display:flex;align-items:flex-start;gap:8px;padding:7px 9px;margin-bottom:5px;
  border:1px solid var(--bd);border-radius:8px;cursor:pointer;font-size:11.5px;line-height:1.35;
  transition:border-color .15s,background .15s;
}
#modal-root .vm-choice:hover{border-color:var(--bd2);background:rgba(255,255,255,.03)}
#modal-root .vm-choice:has(input:checked){border-color:var(--pu);background:rgba(139,92,246,.1)}
#modal-root .vm-choice input{margin-top:2px;flex-shrink:0}
#modal-root #vm-existing-info{color:var(--t2);font-size:11px}

/* ── 🏢 Multi-clients : sélecteur d'entreprise + bandeau (super-admin uniquement, 2026-09-11) ── */
#crm-panel .nav-tenant-select-wrap.hidden,
#crm-panel .nav-item.hidden,
.tenant-override-banner.hidden{display:none}
#crm-panel .nav-tenant-select-wrap{
  padding:0 12px 10px;display:flex;flex-direction:column;gap:4px;flex-shrink:0;
}
#crm-panel .nav-tenant-select-label{font-size:9.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
#crm-panel .nav-tenant-select{
  width:100%;background:var(--bg2);border:1px solid var(--bd2);border-radius:7px;
  color:var(--t1);font-size:11px;padding:6px 8px;cursor:pointer;
}
#crm-panel .nav-tenant-select:focus{border-color:rgba(167,139,250,.5)}
#crm-panel .crm-nav.collapsed .nav-tenant-select-wrap{display:none}

/* Bandeau plein largeur (pas un pill flottant comme .appel-banner) : super-admin en train de
   consulter le CRM d'un client tiers, ça doit rester visible en permanence tant qu'il navigue. */
.tenant-override-banner{
  position:fixed;top:0;left:0;right:0;z-index:200;height:36px;
  display:flex;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(120deg,rgba(251,146,60,.92),rgba(217,119,6,.92));
  color:#1a1206;font-size:12px;font-weight:700;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.tenant-override-banner b{font-weight:800}
.tenant-override-banner button{
  border:none;border-radius:7px;padding:5px 12px;cursor:pointer;
  background:#1a1206;color:#fcd34d;font-weight:800;font-size:11px;
}
.tenant-override-banner button:hover{filter:brightness(1.15)}
/* Pousse toute l'app sous le bandeau plutôt que de la faire chevaucher (voir renderTenantBanner,
   shell.js, qui pose cette classe sur #crm-panel). */
#crm-panel.tenant-banner-active #sApp{padding-top:36px}