/* ============================================================================
   Bundle Studio — design system (premium, dark/light)
   ========================================================================== */
:root{
  --indigo:#6366f1; --indigo-soft:#818cf8; --teal:#14b8a6; --green:#22c55e;
  --amber:#f59e0b; --red:#ef4444; --pink:#ec4899;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --sp:16px;
  --ease:cubic-bezier(.4,0,.2,1);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 4px 20px -4px rgba(0,0,0,.4);
  --shadow-lg:0 20px 50px -12px rgba(0,0,0,.55);
}
:root, [data-theme="dark"]{
  --bg:#0a0c12; --bg2:#0f131b; --panel:#141924; --panel-2:#1a2130;
  --panel-h:#202a3c; --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.12);
  --txt:#eef2f8; --txt-2:#aab4c5; --muted:#6b7688;
  --glass:rgba(20,25,36,.72);
  --grad:linear-gradient(135deg,#6366f1,#8b5cf6 55%,#ec4899);
}
[data-theme="light"]{
  --bg:#f4f6fb; --bg2:#eef1f7; --panel:#ffffff; --panel-2:#f7f9fc;
  --panel-h:#eef2f9; --border:rgba(15,23,42,.08); --border-2:rgba(15,23,42,.14);
  --txt:#0f172a; --txt-2:#475569; --muted:#94a3b8;
  --glass:rgba(255,255,255,.8);
  --grad:linear-gradient(135deg,#6366f1,#8b5cf6 55%,#ec4899);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:
    radial-gradient(1200px 600px at 100% -10%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(236,72,153,.08), transparent 55%),
    var(--bg);
  color:var(--txt);font:14px/1.55 -apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:rgba(99,102,241,.35)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:20px}
::-webkit-scrollbar-track{background:transparent}

/* layout ------------------------------------------------------------------ */
.layout{display:flex;min-height:100vh}
.sidebar{width:236px;flex-shrink:0;padding:20px 14px;position:sticky;top:0;height:100vh;
  background:linear-gradient(180deg,var(--bg2),var(--bg));border-right:1px solid var(--border);
  display:flex;flex-direction:column}
.brand{display:flex;gap:11px;align-items:center;padding:6px 10px 22px;font-weight:800;font-size:17px;letter-spacing:-.02em}
.brand .logo{width:30px;height:30px;border-radius:9px;background:var(--grad);
  box-shadow:0 6px 18px -4px rgba(99,102,241,.6);flex-shrink:0}
.brand small{display:block;font-weight:500;font-size:11px;color:var(--muted);letter-spacing:.02em}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{display:flex;gap:12px;align-items:center;padding:10px 13px;border-radius:10px;color:var(--txt-2);
  font-weight:600;font-size:13.5px;position:relative;transition:.15s var(--ease)}
.nav a .ico{width:18px;text-align:center;font-size:15px}
.nav a:hover{background:var(--panel-2);color:var(--txt)}
.nav a.active{color:#fff;background:linear-gradient(90deg,rgba(99,102,241,.9),rgba(139,92,246,.75))}
.nav a.active::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:3px;background:#fff}
.side-foot{margin-top:auto;padding:10px;color:var(--muted);font-size:11px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}

/* topbar ------------------------------------------------------------------ */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:14px 26px;background:var(--glass);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border)}
.topbar h1{font-size:18px;margin:0;letter-spacing:-.02em}
.topbar .sub{color:var(--muted);font-size:12.5px}
.topbar .spacer{flex:1}
.content{padding:24px 26px;max-width:none;width:100%}

/* status pills ------------------------------------------------------------ */
.status-pill{display:inline-flex;gap:7px;align-items:center;padding:6px 12px;border-radius:20px;
  background:var(--panel);border:1px solid var(--border);font-size:12px;font-weight:600;color:var(--txt-2)}
.status-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.status-pill.ok .dot{background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.status-pill.warn .dot{background:var(--amber);box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.status-pill.err .dot{background:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.18)}

/* banners ----------------------------------------------------------------- */
.banner{padding:12px 16px;border-radius:var(--r);margin:0 26px 4px;font-size:13px;display:none;align-items:center;gap:10px}
.banner.show{display:flex}
.banner.warn{background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.3);color:#fcd34d}
.banner.err{background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.3);color:#fca5a5}

/* cards / panels ---------------------------------------------------------- */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--shadow-sm)}
.panel h2{font-size:14px;margin:0 0 14px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.grid{display:grid;gap:18px}
.spacer{height:18px}
.muted{color:var(--muted)} .txt2{color:var(--txt-2)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px}
.hint{font-size:12px;color:var(--muted);margin-top:5px}

/* buttons ----------------------------------------------------------------- */
button,.btn{font:inherit;font-weight:650;font-size:13px;cursor:pointer;border:0;border-radius:10px;
  padding:9px 15px;background:var(--grad);color:#fff;transition:.15s var(--ease);
  box-shadow:0 4px 14px -4px rgba(99,102,241,.5)}
button:hover,.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
button:active{transform:translateY(0)}
button.ghost{background:var(--panel-2);color:var(--txt);border:1px solid var(--border-2);box-shadow:none}
button.ghost:hover{background:var(--panel-h)}
button.ok{background:linear-gradient(135deg,#14b8a6,#22c55e);box-shadow:0 4px 14px -4px rgba(20,184,166,.5)}
button.danger{background:linear-gradient(135deg,#ef4444,#f43f5e);box-shadow:0 4px 14px -4px rgba(239,68,68,.5)}
button.sm{padding:6px 11px;font-size:12px;border-radius:8px}
button.icon{padding:6px 9px;background:var(--panel-2);color:var(--txt-2);border:1px solid var(--border);box-shadow:none}
button.icon:hover{color:var(--txt);background:var(--panel-h)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* inputs ------------------------------------------------------------------ */
input,select,textarea{width:100%;font:inherit;color:var(--txt);background:var(--panel-2);
  border:1px solid var(--border-2);border-radius:10px;padding:9px 12px;transition:.15s var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--indigo);
  box-shadow:0 0 0 3px rgba(99,102,241,.18)}
textarea{resize:vertical;min-height:90px;font-family:ui-monospace,Menlo,monospace;font-size:12px}
label{display:block;font-size:11.5px;font-weight:600;color:var(--txt-2);margin:12px 0 5px;
  text-transform:uppercase;letter-spacing:.04em}
.field{margin-bottom:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}

/* switch ------------------------------------------------------------------ */
.switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .track{position:absolute;inset:0;background:var(--panel-h);border:1px solid var(--border-2);
  border-radius:20px;transition:.2s var(--ease)}
.switch .track::before{content:"";position:absolute;height:18px;width:18px;left:2px;top:2px;
  background:#fff;border-radius:50%;transition:.2s var(--ease);box-shadow:var(--shadow-sm)}
.switch input:checked+.track{background:var(--grad);border-color:transparent}
.switch input:checked+.track::before{transform:translateX(18px)}
.switch-row{display:flex;align-items:center;gap:10px;margin:10px 0;font-weight:600;font-size:13px}

/* segmented --------------------------------------------------------------- */
.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--border);border-radius:11px;padding:3px}
.seg button{background:transparent;color:var(--txt-2);box-shadow:none;padding:7px 13px;border-radius:8px;font-size:12.5px}
.seg button:hover{color:var(--txt);transform:none}
.seg button.active{background:var(--grad);color:#fff}

/* pills / chips ----------------------------------------------------------- */
.pill{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.02em}
.pill.connected{background:rgba(34,197,94,.15);color:#4ade80}
.pill.pending{background:rgba(245,158,11,.15);color:#fbbf24}
.pill.failed,.pill.disconnected{background:rgba(239,68,68,.15);color:#f87171}
.chip{display:inline-flex;gap:6px;align-items:center;background:var(--panel-2);border:1px solid var(--border);
  border-radius:20px;padding:5px 11px;font-size:12px;font-weight:600;color:var(--txt-2)}
.tag{display:inline-block;background:var(--panel-2);border:1px solid var(--border);border-radius:6px;
  padding:2px 8px;margin:2px 3px 2px 0;font-size:11px}

/* tables ------------------------------------------------------------------ */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px}
th{color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--panel-2)}

/* KPI tile ---------------------------------------------------------------- */
.kpi{display:flex;flex-direction:column;gap:6px;height:100%}
.kpi .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:17px;
  background:var(--panel-2);border:1px solid var(--border)}
.kpi .label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.kpi .val{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1}
.kpi .val small{font-size:12px;color:var(--muted);font-weight:600}
.kpi .delta{font-size:11.5px;font-weight:700}
.up{color:#4ade80}.down{color:#f87171}

/* widget dashboard -------------------------------------------------------- */
.wgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;grid-auto-rows:118px}
.widget{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:16px 18px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  display:flex;flex-direction:column;transition:.15s var(--ease)}
.widget:hover{border-color:var(--border-2)}
.widget.dragging{opacity:.4}
.widget.drop-target{outline:2px dashed var(--indigo);outline-offset:-2px}
.widget .whead{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.widget .whead .wt{font-size:12px;font-weight:700;color:var(--txt-2);text-transform:uppercase;letter-spacing:.04em;flex:1}
.widget .wctrl{display:flex;gap:3px;opacity:0;transition:.15s}
.widget:hover .wctrl{opacity:1}
.widget .wctrl button{background:var(--panel-2);color:var(--muted);border:1px solid var(--border);
  padding:3px 7px;font-size:11px;border-radius:7px;box-shadow:none}
.widget .wctrl button:hover{color:var(--txt);transform:none}
.widget .whandle{cursor:grab;color:var(--muted);font-size:14px}
.widget .wbody{flex:1;min-height:0;overflow:auto}
.addbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}

/* kanban ------------------------------------------------------------------ */
.kanban{display:flex;gap:16px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.col{min-width:260px;max-width:280px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:14px;flex-shrink:0}
.col.drop{outline:2px dashed var(--indigo);outline-offset:-3px}
.col h3{font-size:13px;margin:0 0 12px;display:flex;justify-content:space-between;align-items:center}
.col .cnt{background:var(--panel-2);border:1px solid var(--border);border-radius:20px;padding:2px 9px;font-size:11px;color:var(--txt-2)}
.card{background:var(--panel-2);border:1px solid var(--border);border-radius:11px;padding:11px 12px;
  margin-bottom:9px;cursor:grab;transition:.12s var(--ease)}
.card:hover{border-color:var(--border-2);transform:translateY(-1px)}
.card.sel{outline:2px solid var(--indigo);outline-offset:-1px}
.card .u{font-weight:700}

/* modal ------------------------------------------------------------------- */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;z-index:100}
.modal-bg.show{display:flex}
.modal{background:var(--panel);border:1px solid var(--border-2);border-radius:var(--r-xl);
  width:min(680px,92vw);max-height:86vh;overflow:auto;box-shadow:var(--shadow-lg);padding:22px}
.modal h2{margin:0 0 4px;font-size:17px}
.browser-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:13px}
.browser-item:hover{background:var(--panel-2)}
.browser-path{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--txt-2);
  background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin:10px 0;word-break:break-all}

/* misc -------------------------------------------------------------------- */
.emoji-pick{display:flex;flex-wrap:wrap;gap:5px}
.emoji-pick button{background:var(--panel-2);border:1px solid var(--border);color:var(--txt);
  padding:5px 8px;font-size:16px;border-radius:8px;box-shadow:none}
.emoji-pick button.active{background:var(--grad);border-color:transparent}
.empty{text-align:center;color:var(--muted);padding:30px 10px;font-size:13px}
.bar{height:7px;border-radius:6px;background:var(--panel-h);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--grad)}
canvas{width:100%;display:block}

/* Tasks — accordéon niches ------------------------------------------------- */
.niche-head{display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;
  transition:.12s var(--ease);flex-wrap:wrap}
.niche-head:hover{background:var(--panel-2)}
.niche-head .chev{color:var(--muted);font-size:13px;width:14px}
.niche-head .hctrl{display:flex;gap:6px}
.niche-body{border-top:1px solid var(--border);background:var(--bg2)}
.niche-sec{padding:16px 18px;border-bottom:1px solid var(--border)}
.niche-sec .sec-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin-bottom:12px}
.niche-body table{background:var(--panel);border:1px solid var(--border);border-radius:10px;overflow:hidden}

/* ============================================================================
   FOLIE — enhancements visuels
   ========================================================================== */
/* aurora animée en fond */
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vw 38vw at 15% 20%, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(32vw 32vw at 85% 15%, rgba(236,72,153,.14), transparent 60%),
    radial-gradient(40vw 40vw at 75% 85%, rgba(20,184,166,.12), transparent 60%);
  filter:blur(30px);animation:aurora 24s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%,-2%,0) scale(1.08)}100%{transform:translate3d(-2%,2%,0) scale(1)}}
[data-theme="light"] body::before{opacity:.6}

/* brand logo qui vit */
.brand .logo{background-size:200% 200%;animation:shine 6s ease infinite;position:relative}
.brand .logo::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 22px -2px rgba(139,92,246,.7);animation:pulse 3s ease-in-out infinite}
@keyframes shine{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* status dots pulsent */
.status-pill.ok .dot{animation:beat 2.4s ease-in-out infinite}
@keyframes beat{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{box-shadow:0 0 0 5px rgba(34,197,94,0)}}

/* nav actif : halo */
.nav a.active{box-shadow:0 8px 24px -8px rgba(99,102,241,.8)}
.nav a{overflow:hidden}
.nav a::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  transform:translateX(-120%);transition:.5s var(--ease)}
.nav a:hover::after{transform:translateX(120%)}

/* panels & widgets : lift + glow au survol */
.panel,.widget{transition:transform .18s var(--ease),box-shadow .25s var(--ease),border-color .2s}
.panel:hover{transform:translateY(-2px);box-shadow:0 18px 40px -18px rgba(0,0,0,.6),0 0 0 1px var(--border-2)}
.widget:hover{transform:translateY(-3px);box-shadow:0 22px 50px -20px rgba(99,102,241,.35);border-color:var(--border-2)}
.widget::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad);opacity:0;transition:.25s}
.widget:hover::before{opacity:1}

/* KPI value en dégradé */
.kpi .val{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kpi .ic{transition:.25s var(--ease)}
.widget:hover .kpi .ic{transform:scale(1.12) rotate(-4deg)}

/* boutons : shimmer au survol */
button,.btn{position:relative;overflow:hidden}
button::after,.btn::after{content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-20deg);transition:.6s var(--ease)}
button:hover::after,.btn:hover::after{left:130%}

/* chips animés */
.chip{transition:.15s var(--ease)}
.chip:hover{border-color:var(--border-2);transform:translateY(-1px)}

/* accordéon niche : apparition */
.niche-body{animation:slideDown .28s var(--ease)}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.niche-head .chev{transition:transform .2s var(--ease)}

/* ── bloc "Nouvelle task" distinct & déroulant ── */
.create-task{position:relative;border-radius:var(--r-xl);margin-bottom:6px;
  background:
    linear-gradient(var(--panel),var(--panel)) padding-box,
    linear-gradient(135deg,rgba(99,102,241,.7),rgba(236,72,153,.6),rgba(20,184,166,.5)) border-box;
  border:1.5px solid transparent;box-shadow:0 10px 40px -18px rgba(99,102,241,.5);
  transition:box-shadow .3s var(--ease)}
.create-task.open{box-shadow:0 20px 60px -20px rgba(99,102,241,.65)}
.create-task .ct-head{display:flex;align-items:center;gap:14px;padding:18px 22px;cursor:pointer}
.create-task .ct-plus{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  font-size:22px;font-weight:700;color:#fff;background:var(--grad);
  box-shadow:0 8px 20px -6px rgba(99,102,241,.7);transition:transform .3s var(--ease)}
.create-task.open .ct-plus{transform:rotate(135deg)}
.create-task .ct-title{font-size:16px;font-weight:800;letter-spacing:-.01em}
.create-task .ct-sub{font-size:12px;color:var(--muted)}
.create-task .ct-chev{color:var(--muted);transition:transform .3s var(--ease);font-size:14px}
.create-task.open .ct-chev{transform:rotate(180deg)}
.create-task .ct-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease),opacity .3s}
.create-task.open .ct-body{max-height:420px}
.create-task .ct-inner{padding:0 22px 22px}
.emoji-pick button{transition:.15s var(--ease)}
.emoji-pick button:hover{transform:translateY(-2px) scale(1.1)}
.emoji-pick button.active{box-shadow:0 6px 16px -4px rgba(99,102,241,.7);transform:translateY(-1px)}

/* modal : entrée */
.modal{animation:pop .22s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* scroll reveal léger pour les lignes de niche */
.niche-head:hover .chev{color:var(--indigo)}

/* ============================================================================
   TIER 1 — finition "SaaS 1B€" (overrides)
   ========================================================================== */
:root{
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3);
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  --ring:0 0 0 3px rgba(99,102,241,.28);
}
:root, [data-theme="dark"]{
  --bg:#070810; --bg2:#0b0e17; --panel:#10131e; --panel-2:#161b28; --panel-h:#1e2536;
  --border:rgba(255,255,255,.06); --border-2:rgba(255,255,255,.13);
}
/* grain subtil global */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* nombres alignés + typographie plus serrée */
.kpi .val,.status-pill,.chip,th,td,.val{font-variant-numeric:tabular-nums}
h1{font-weight:800;letter-spacing:-.03em}

/* topbar plus nette */
.topbar{padding:16px 28px;border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.03)}

/* sidebar : rail + toggle */
.sidebar{position:relative;transition:width .24s var(--ease),padding .24s var(--ease)}
.side-toggle{position:absolute;top:22px;right:-13px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;padding:0;font-size:14px;line-height:1;z-index:40;
  background:var(--panel-h);color:var(--txt-2);border:1px solid var(--border-2);
  box-shadow:var(--shadow-sm)}
.side-toggle:hover{color:#fff;background:var(--grad);border-color:transparent;transform:none}
body[data-sidebar="collapsed"] .sidebar{width:70px;padding:20px 10px}
body[data-sidebar="collapsed"] .brand{justify-content:center;padding:6px 0 22px}
body[data-sidebar="collapsed"] .brand>span:last-child{display:none}
body[data-sidebar="collapsed"] .nav a{justify-content:center;padding:12px 0;font-size:0;gap:0}
body[data-sidebar="collapsed"] .nav a .ico{font-size:17px}
body[data-sidebar="collapsed"] .nav a.active::before{display:none}
body[data-sidebar="collapsed"] .side-foot{display:none}

/* panels & widgets : profondeur + liseré interne */
.panel,.widget{box-shadow:var(--shadow-sm);border-radius:16px}
.panel::before,.widget-hl{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);pointer-events:none}
.panel{position:relative}
.panel:hover{box-shadow:0 24px 60px -24px rgba(0,0,0,.8), 0 0 0 1px var(--border-2)}
.widget{border-radius:16px}
.widget:hover{box-shadow:0 30px 70px -28px rgba(99,102,241,.4), 0 0 0 1px var(--border-2)}

/* KPI plus imposant */
.kpi .ic{width:40px;height:40px;border-radius:12px;font-size:19px;
  background:linear-gradient(160deg,var(--panel-h),var(--panel-2));border:1px solid var(--border)}
.kpi .val{font-size:34px;font-weight:850;letter-spacing:-.03em}

/* boutons : plus "produit" (highlight interne + ombre crantée) */
button,.btn{border-radius:11px;box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 6px 16px -6px rgba(99,102,241,.55)}
button.ghost{box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--ring)}

/* poignée de redimensionnement (coin bas-droite) */
.wresize{position:absolute;right:4px;bottom:4px;width:18px;height:18px;cursor:nwse-resize;
  border-radius:0 0 12px 0;opacity:0;transition:opacity .15s;touch-action:none;z-index:5}
.wresize::before{content:"";position:absolute;right:3px;bottom:3px;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);border-radius:0 0 3px 0}
.widget:hover .wresize{opacity:.8}
.wresize:hover{opacity:1}
.wresize:hover::before{border-color:var(--indigo)}
.widget.resizing{box-shadow:0 0 0 2px var(--indigo),0 30px 70px -20px rgba(99,102,241,.6);
  outline:none;z-index:10;transition:none}
.widget.resizing .wbody{pointer-events:none}

/* contrôles widget : plus discrets/nets */
.widget .wctrl button{border-radius:7px;box-shadow:none}
.widget .whandle{cursor:grab}
.widget .whandle:active{cursor:grabbing}

/* seg control plus premium */
.seg{border-radius:12px;box-shadow:var(--shadow-sm)}
.seg button.active{box-shadow:0 6px 16px -6px rgba(99,102,241,.7)}

/* status pills plus nettes */
.status-pill{border-radius:12px;background:var(--panel-2);box-shadow:var(--shadow-sm)}

/* transitions douces globales sur la largeur du main */
.main{transition:none}

/* ============================================================================
   CANVAS LIBRE + DENSITÉ "cockpit"
   ========================================================================== */
.canvas-hint{font-size:11.5px;color:var(--muted);margin:2px 0 12px;display:flex;gap:6px;align-items:center}
.wcanvas{position:relative;width:100%;min-height:560px;overflow-x:auto}
.wcanvas .widget{position:absolute;padding:11px 13px;border-radius:14px;transition:box-shadow .2s var(--ease),border-color .2s}
.wcanvas .widget:hover{transform:none;box-shadow:0 18px 44px -22px rgba(99,102,241,.45),0 0 0 1px var(--border-2)}
.wcanvas .widget .whead{margin-bottom:7px}
.widget.moving{z-index:30;cursor:grabbing;box-shadow:0 26px 60px -18px rgba(0,0,0,.7),0 0 0 2px var(--indigo)!important;transition:none;opacity:.97}
.widget.resizing{transition:none}
.widget .whead .whandle{cursor:grab;padding:2px 4px;margin-left:-4px;border-radius:6px}
.widget .whead .whandle:hover{background:var(--panel-2);color:var(--txt)}

/* densité globale — tout plus compact */
body{font-size:13px}
.content{padding:16px 22px}
.topbar{padding:12px 22px}
.topbar h1{font-size:16px}
.panel{padding:15px}
.panel h2{font-size:13px;margin-bottom:11px}
.addbar{gap:7px;margin-bottom:12px}
.kpi .val{font-size:25px}
.kpi .ic{width:32px;height:32px;font-size:15px;border-radius:10px}
.widget .wt{font-size:10.5px}
.chip{padding:3px 9px;font-size:11px}
.pill{font-size:10px;padding:2px 8px}
th,td{padding:6px 9px;font-size:12px}
.seg button{padding:6px 11px;font-size:12px}
button{padding:8px 13px;font-size:12.5px}
button.sm{padding:5px 9px;font-size:11.5px}
input,select,textarea{padding:8px 10px}
label{font-size:11px;margin:9px 0 4px}
.niche-head{padding:11px 15px;gap:8px}
.niche-sec{padding:13px 15px}
.status-pill{padding:5px 10px;font-size:11.5px}

/* groupes de tasks (niche parente) */
.group-block{border-radius:16px;margin-bottom:14px;position:relative;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
    linear-gradient(135deg,rgba(99,102,241,.5),rgba(20,184,166,.4)) border-box;
  border:1.5px solid transparent;box-shadow:var(--shadow-sm)}
.group-head{display:flex;align-items:center;gap:9px;padding:13px 16px;cursor:pointer;flex-wrap:wrap}
.group-head:hover{background:var(--panel-2);border-radius:16px}
.group-head .gicon{font-size:19px}
.group-inner{padding:6px 12px 12px 26px;display:flex;flex-direction:column;gap:8px}
.group-inner .panel{margin-bottom:0!important}
.group-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin:16px 0 8px;font-weight:700}

/* ============================================================================
   KPI sans scroll + accents rouges subtils (style néon "summon")
   ========================================================================== */
/* KPI : jamais de scrollbar, contenu toujours visible et centré */
.widget.kpi-w .wbody{overflow:hidden;display:flex;align-items:center}
.widget.kpi-w .kpi{width:100%}
.widget.kpi-w .kpi .val{font-size:clamp(18px,2.4vw,26px);line-height:1}
.widget .wbody{overflow:auto}
.widget .wbody::-webkit-scrollbar{width:6px;height:6px}

/* liseré rouge très léger permanent + halo rouge doux au survol */
.wcanvas .widget{box-shadow:var(--shadow-sm),0 0 0 1px rgba(239,68,68,.10)}
.wcanvas .widget:hover{box-shadow:0 16px 40px -20px rgba(239,68,68,.35),
  0 0 22px -8px rgba(239,68,68,.30),0 0 0 1px rgba(239,68,68,.45)}
.wcanvas .widget::before{background:linear-gradient(90deg,transparent,rgba(239,68,68,.55),transparent)}
.wcanvas .widget:hover::before{opacity:1}

/* icône KPI : anneau rouge néon discret */
.widget.kpi-w .kpi .ic{border:1px solid rgba(239,68,68,.30);
  box-shadow:0 0 12px -4px rgba(239,68,68,.5),inset 0 0 8px -4px rgba(239,68,68,.4)}

/* accents rouges doux sur cartes & groupes (embellissement) */
.panel:hover{box-shadow:0 22px 50px -26px rgba(0,0,0,.8),0 0 0 1px rgba(239,68,68,.28)}
.status-pill.ok{box-shadow:var(--shadow-sm),0 0 0 1px rgba(34,197,94,.25)}

/* poignée resize plus visible avec teinte rouge */
.wresize:hover::before{border-color:#ef4444}
.widget.resizing{box-shadow:0 0 0 2px #ef4444,0 26px 60px -18px rgba(239,68,68,.55)!important}
.widget.moving{box-shadow:0 26px 60px -18px rgba(0,0,0,.7),0 0 0 2px #ef4444!important}

/* KPI compact : valeur toujours visible même en petit */
.widget.kpi-w{padding:9px 12px}
.widget.kpi-w .whead{margin-bottom:3px}
.widget.kpi-w .kpi .ic{width:27px;height:27px;font-size:13px;border-radius:9px}
.widget.kpi-w .kpi .val{font-size:clamp(17px,2vw,24px)}
.widget.kpi-w .kpi .row{gap:10px}
.widget.kpi-w .kpi .muted{font-size:10px}

/* statut banni */
.pill.banned{background:rgba(239,68,68,.18);color:#f87171}

/* heatmap d'heures de posting */
.heatmap{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;margin-top:4px}
.hm-cell{aspect-ratio:1;display:grid;place-items:center;font-size:9px;border-radius:5px;
  background:var(--panel-2);border:1px solid var(--border);color:var(--muted);cursor:pointer;user-select:none;transition:.12s var(--ease)}
.hm-cell:hover{border-color:var(--border-2);color:var(--txt)}
.hm-cell.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 3px 10px -3px rgba(99,102,241,.6)}

/* ============================================================================
   WORKFLOW BOARD (style Miro)
   ========================================================================== */
.flow{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding-bottom:10px}
.flow-col{flex:1;min-width:280px;display:flex;flex-direction:column;gap:14px}
.flow-link{width:76px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted)}
.flow-arrow{font-size:26px;color:var(--indigo);animation:flowpulse 2s ease-in-out infinite}
@keyframes flowpulse{0%,100%{transform:translateX(0);opacity:.6}50%{transform:translateX(5px);opacity:1}}
.flow-cap{font-size:10px;text-transform:uppercase;letter-spacing:.05em;text-align:center;line-height:1.3}
.stage-head{display:flex;gap:13px;align-items:flex-start;padding:16px;border-radius:16px;position:relative;overflow:hidden;
  background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.stage-head::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.stage-head.t-scrape::before{background:linear-gradient(90deg,#14b8a6,#22c55e)}
.stage-head.t-unify::before{background:linear-gradient(90deg,#6366f1,#8b5cf6)}
.stage-head.t-post::before{background:linear-gradient(90deg,#ec4899,#f43f5e)}
.stage-num{width:38px;height:38px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;
  font-size:18px;font-weight:800;color:#fff;background:var(--grad);box-shadow:0 6px 16px -6px rgba(99,102,241,.7)}
.stage-head.t-scrape .stage-num{background:linear-gradient(135deg,#14b8a6,#22c55e)}
.stage-head.t-post .stage-num{background:linear-gradient(135deg,#ec4899,#f43f5e)}
.stage-title{font-size:15px;font-weight:800;letter-spacing:-.01em}
.stage-desc{font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:3px}
.stage-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm);transition:.18s var(--ease)}
.stage-card:hover{border-color:var(--border-2);transform:translateY(-2px)}
.stage-note{font-size:11px;color:var(--muted);text-align:center;font-style:italic}
.lib-row{padding:5px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.lib-row:last-child{border-bottom:0}
@media(max-width:1100px){ .flow{flex-direction:column} .flow-link{width:100%;flex-direction:row} .flow-arrow{transform:rotate(90deg)} }

/* ============================================================================
   WORKFLOW v2 — corporate épuré + ligne électrique
   ========================================================================== */
.wf-rail{position:relative;padding:40px 10px;margin-top:8px}
.wf-wire{position:absolute;left:8%;right:8%;top:50%;height:2px;transform:translateY(-50%);
  background:linear-gradient(90deg,var(--border-2),var(--border-2));border-radius:2px;overflow:hidden}
.wf-wire .spark{position:absolute;top:0;left:-20%;width:20%;height:100%;
  background:linear-gradient(90deg,transparent,var(--indigo),#8b5cf6,transparent);
  filter:blur(1px);animation:wire 3.2s linear infinite}
@keyframes wire{0%{left:-25%}100%{left:105%}}
.wf-stages{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;z-index:1}
.wf-stage{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;
  cursor:pointer;transition:.18s var(--ease);position:relative}
.wf-stage:hover{border-color:var(--border-2);transform:translateY(-3px);box-shadow:0 20px 44px -24px rgba(0,0,0,.7)}
.wf-node{position:absolute;top:-46px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;
  background:var(--panel);border:2px solid var(--border-2)}
.wf-node.on{border-color:var(--indigo);box-shadow:0 0 0 4px rgba(99,102,241,.18);
  background:var(--indigo);animation:nodepulse 2.4s ease-in-out infinite}
@keyframes nodepulse{0%,100%{box-shadow:0 0 0 4px rgba(99,102,241,.18)}50%{box-shadow:0 0 0 8px rgba(99,102,241,0)}}
.wf-idx{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--muted);letter-spacing:.1em}
.wf-title{font-size:15px;font-weight:700;margin-top:2px;letter-spacing:-.01em}
.wf-desc{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
.wf-metrics{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.wf-m{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--border)}
.wf-m:last-child{border-bottom:0}
.wf-open{margin-top:12px;font-size:11.5px;color:var(--indigo);font-weight:600}
@media(max-width:980px){.wf-stages{grid-template-columns:1fr;gap:30px}.wf-wire{display:none}}

/* pages d'étape (master-détail) */
.stage-tabs{display:flex;gap:6px;margin-bottom:16px}
.stab{background:var(--panel-2);color:var(--txt-2);border:1px solid var(--border);box-shadow:none;
  padding:7px 14px;border-radius:9px;font-size:12.5px;font-weight:600}
.stab:hover{color:var(--txt);transform:none}
.stab.active{background:var(--grad);color:#fff;border-color:transparent}
.stage-layout{display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:start}
.stage-left{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;position:sticky;top:80px}
.left-head{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:10px}
.stage-item{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;border-radius:9px;
  cursor:pointer;font-size:13px;transition:.12s var(--ease);border:1px solid transparent}
.stage-item:hover{background:var(--panel-2);border-color:var(--border)}
.stage-right{min-width:0}
.stat-row{display:flex;gap:14px;flex-wrap:wrap}
.stat-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 18px;min-width:120px}
.stat-v{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.info-box{background:var(--panel-2);border:1px solid var(--border);border-left:3px solid var(--indigo);
  border-radius:10px;padding:12px 14px;margin:12px 0;font-size:12.5px;line-height:1.55;color:var(--txt-2)}
@media(max-width:820px){.stage-layout{grid-template-columns:1fr}.stage-left{position:static}}

/* ============================================================================
   WORKFLOW v3 — graphe de nœuds modulaire
   ========================================================================== */
.wf-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.wf-live{font-size:11px;color:#22c55e;font-weight:600}
.wf-live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;margin-right:5px;animation:beat 2s ease-in-out infinite}
.graph{position:relative;width:100%;min-height:460px;background:
   radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0/22px 22px;
   border:1px solid var(--border);border-radius:14px;overflow:hidden}
.graph-links{position:absolute;inset:0;pointer-events:none;z-index:1}
.glink-base{fill:none;stroke:var(--border-2);stroke-width:2}
.glink-flow{fill:none;stroke:var(--indigo);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:1 11;animation:flowdash .9s linear infinite;filter:drop-shadow(0 0 3px rgba(99,102,241,.7))}
@keyframes flowdash{to{stroke-dashoffset:-12}}
.gnode{position:absolute;z-index:2;background:var(--panel);border:1px solid var(--border-2);
  border-radius:13px;box-shadow:0 12px 30px -14px rgba(0,0,0,.7);display:flex;flex-direction:column;
  overflow:hidden;transition:box-shadow .15s var(--ease)}
.gnode:hover{box-shadow:0 18px 44px -16px rgba(99,102,241,.4)}
.gnode.drag{z-index:20;box-shadow:0 24px 50px -14px rgba(99,102,241,.6);transition:none}
.gnode.motion{border-color:rgba(236,72,153,.5)}
.gnode-head{display:flex;align-items:center;gap:8px;padding:9px 11px;cursor:grab;
  background:linear-gradient(180deg,var(--panel-2),transparent);border-bottom:1px solid var(--border)}
.gnode-head:active{cursor:grabbing}
.gnode-idx{font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--muted);
  background:var(--panel-h);padding:2px 6px;border-radius:5px}
.gnode-title{font-size:12.5px;font-weight:700;flex:1;letter-spacing:-.01em}
.gnode-open{cursor:pointer;color:var(--indigo);font-size:14px;padding:2px 5px;border-radius:6px}
.gnode-open:hover{background:var(--panel-2)}
.gnode-body{flex:1;padding:10px 11px;display:flex;flex-direction:column;gap:5px;overflow:auto}
.gnode-body .wf-m{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;border-bottom:1px solid var(--border)}
.gnode-body .wf-m:last-child{border-bottom:0}
.gnode-rz{position:absolute;right:2px;bottom:2px;width:14px;height:14px;cursor:nwse-resize;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);border-radius:0 0 6px 0;opacity:.4}
.gnode:hover .gnode-rz{opacity:.9}

/* ── densité réduite globale (moins "vibe code") ── */
body{font-size:12.5px}
button{padding:7px 12px;font-size:12px}
button.sm{padding:5px 9px;font-size:11px}
h1{font-size:15px}
.topbar{padding:11px 20px}
.topbar h1{font-size:15px}
.panel{padding:14px}
.panel h2{font-size:12.5px}
.stat-v{font-size:22px}
.stab{padding:6px 12px;font-size:12px}
.stage-num{width:34px;height:34px;font-size:16px}
.wf-title{font-size:13px}
.nav a{font-size:13px;padding:9px 12px}
.brand{font-size:15px}

/* progression du workflow + full-auto */
.wf-progress-card{margin-bottom:14px;border:1px solid var(--border-2)}
.wf-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;margin-top:14px}
.wf-step{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--border)}
.wf-step.ok{border-color:rgba(34,197,94,.4)}
.wf-check{width:22px;height:22px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;background:var(--panel-h);color:var(--muted)}
.wf-step.ok .wf-check{background:rgba(34,197,94,.2);color:#4ade80}
.auto-summary{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 15px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.auto-badge{background:linear-gradient(135deg,#14b8a6,#22c55e);color:#fff;font-size:10.5px;font-weight:800;
  padding:3px 9px;border-radius:20px;letter-spacing:.03em}
.niche-custom{animation:slideDown .2s var(--ease)}

/* ── Cartes plateforme (dashboard) ─────────────────────────────────────── */
.app-card{cursor:pointer;transition:transform .12s var(--ease),border-color .12s}
.app-card:hover{transform:translateY(-2px);border-color:var(--border-2)}
.app-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-size:18px;background:var(--panel-2);border:1px solid var(--border)}
.app-open{margin-top:12px;font-size:12px;color:var(--muted);text-align:right}
.app-card:hover .app-open{color:var(--txt)}

/* ── Onglets de plateforme ─────────────────────────────────────────────── */
.tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border)}
.tabs button{background:none;border:none;border-bottom:2px solid transparent;
  border-radius:0;padding:9px 14px;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer}
.tabs button:hover{color:var(--txt)}
.tabs button.active{color:var(--txt);border-bottom-color:transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box;position:relative}
.tabs button.active::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;
  height:2px;border-radius:2px;background:var(--grad)}

/* ── Barre d'outils comptes ────────────────────────────────────────────── */
.acc-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.acc-tools .sep{width:1px;height:22px;background:var(--border);margin:0 2px}
.acc-tools input.search{max-width:220px}
.acc-selinfo{font-size:12px;color:var(--muted);margin-left:auto}
.color-dots{display:flex;gap:5px;align-items:center}
.color-dots i{width:16px;height:16px;border-radius:50%;cursor:pointer;border:1px solid #0004;
  transition:transform .1s}
.color-dots i:hover{transform:scale(1.2)}
.color-dots i.clear{background:var(--panel-2);border:1px dashed var(--border-2);
  display:grid;place-items:center;font-size:10px;color:var(--muted)}

/* ── Tableau de comptes ────────────────────────────────────────────────── */
.acc-wrap{border:1px solid var(--border);border-radius:var(--r-lg);overflow:auto;
  background:var(--panel);max-height:calc(100vh - 240px)}
table.acc{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;white-space:nowrap}
table.acc th{position:sticky;top:0;z-index:2;background:var(--panel-h);text-align:left;
  padding:8px 10px;font-weight:600;color:var(--txt-2);border-bottom:1px solid var(--border);
  cursor:pointer;user-select:none}
table.acc th.num,table.acc td.num{text-align:right;font-variant-numeric:tabular-nums}
table.acc th:hover{color:var(--txt)}
table.acc th .arrow{opacity:.5;font-size:9px;margin-left:3px}
table.acc td{padding:7px 10px;border-bottom:1px solid var(--border);color:var(--txt)}
table.acc tbody tr{cursor:pointer}
table.acc tbody tr:hover{background:var(--panel-2)}
table.acc tbody tr.sel{background:color-mix(in srgb,var(--indigo) 16%,var(--panel))}
table.acc tbody tr.sel:hover{background:color-mix(in srgb,var(--indigo) 22%,var(--panel))}
table.acc td.cbox,table.acc th.cbox{width:34px;text-align:center;padding-left:12px}
table.acc td.swatch{width:6px;padding:0}
table.acc td.swatch i{display:block;width:4px;height:100%;min-height:30px;border-radius:2px}
.acc-user{font-weight:600}
.acc-grouphead td{background:var(--panel-2);font-weight:700;color:var(--txt-2);
  position:sticky;top:33px;font-size:11px;letter-spacing:.3px;text-transform:uppercase}
.mini-st{color:var(--txt-2);font-weight:600}
.dot-st{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}
.st-connected{background:var(--green)} .st-pending{background:var(--amber)}
.st-banned{background:var(--red)} .st-disconnected{background:var(--muted)}

/* ═══════════════════════════════════════════════════════════════════════
   OVERRIDE PREMIUM v2 — sans violet, sans animation de survol de bouton,
   icônes SVG, typographie Inter. (Chargé en dernier → gagne la cascade.)
   ═══════════════════════════════════════════════════════════════════════ */
:root, [data-theme="dark"]{
  --accent:#3d7bfd; --accent-soft:#6fa0ff;
  --indigo:#3d7bfd; --indigo-soft:#6fa0ff;
  --grad:#3d7bfd;                       /* fini le dégradé violet */
  --ring:0 0 0 3px rgba(61,123,253,.28);
  --btn-bg:#f4f5f7; --btn-bg-h:#e6e8ec; --btn-fg:#0a0c11;
}
[data-theme="light"]{
  --accent:#2f6bff; --accent-soft:#5b8cff; --indigo:#2f6bff; --grad:#2f6bff;
  --btn-bg:#14161d; --btn-bg-h:#262a35; --btn-fg:#ffffff;
  --ring:0 0 0 3px rgba(47,107,255,.22);
}
body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.005em}

/* Boutons : monochromes, nets, aucune animation de survol ------------------- */
button,.btn{background:var(--btn-bg);color:var(--btn-fg);font-weight:600;
  box-shadow:none;border:1px solid transparent;display:inline-flex;align-items:center;
  gap:7px;transition:background .14s var(--ease),opacity .14s,border-color .14s,color .14s}
button:hover,.btn:hover{transform:none!important;filter:none!important;background:var(--btn-bg-h)}
button:active,.btn:active{transform:none!important;opacity:.9}
button::after,.btn::after,button::before,.btn::before{display:none!important;content:none!important}
button.ghost{background:var(--panel-2);color:var(--txt);border:1px solid var(--border-2)}
button.ghost:hover{background:var(--panel-h);border-color:var(--border-2)}
button.ghost.active{border-color:var(--accent);color:var(--txt);background:color-mix(in srgb,var(--accent) 12%,var(--panel-2))}
button.danger{background:transparent;color:var(--red);border:1px solid color-mix(in srgb,var(--red) 45%,var(--border))}
button.danger:hover{background:color-mix(in srgb,var(--red) 12%,transparent)}
button.icon{background:transparent;border:1px solid var(--border);color:var(--muted)}
button.icon:hover{background:var(--panel-2);color:var(--txt)}
button.primary{background:var(--accent);color:#fff;border-color:transparent}
button.primary:hover{background:var(--accent-soft)}
button.success{background:#16a34a;color:#fff}
button.success:hover{background:#1eb954}
button:disabled{opacity:.45}
.seg button{background:transparent!important;color:var(--txt-2)}
.seg button.active{background:var(--accent)!important;color:#fff}

/* Icônes -------------------------------------------------------------------- */
.i{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex:none;color:inherit}
.i svg{width:16px;height:16px;display:block}
.i.brand svg{width:17px;height:17px}
button .i svg,.btn .i svg{width:15px;height:15px}
.kpi .ic .i svg{width:20px;height:20px}
.stat-card .i svg,.mini-ic .i svg{width:14px;height:14px}

/* Sidebar propre ------------------------------------------------------------ */
.brand .logo{background:var(--accent)!important;animation:none!important;position:relative}
.brand .logo::after{display:none!important}
.brand .logo::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.5),transparent 55%)}
.nav-sep{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  padding:14px 13px 5px;font-weight:700;opacity:.6}
.nav a .ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.nav a .ico svg{width:18px;height:18px}
.nav a:hover .ico{color:var(--txt-2)}
.nav a.active{color:var(--txt)!important;background:var(--panel-2)!important;box-shadow:none!important}
.nav a.active .ico{color:var(--accent)}
.nav a.active::before{background:var(--accent)!important;left:-1px}
.nav a::after{display:none!important}
.theme-btn{width:100%;justify-content:flex-start;background:var(--panel-2);color:var(--txt-2);
  border:1px solid var(--border);font-size:12px;font-weight:600}
.theme-btn .ico svg{width:15px;height:15px}
body[data-sidebar="collapsed"] .nav-sep{font-size:0;padding:8px 0}
body[data-sidebar="collapsed"] .lbl{display:none}
body[data-sidebar="collapsed"] .brand-txt{display:none}

/* Cartes plateforme : survol calme (pas de bond) ---------------------------- */
.app-card:hover{transform:none;border-color:var(--accent)}
.app-ic .i.brand svg{width:19px;height:19px}

/* Onglet actif : soulignement accent, pas de violet ------------------------- */
.tabs button.active::after{background:var(--accent)}

/* Info-bulle (i) ------------------------------------------------------------ */
.tip{position:relative;display:inline-flex;color:var(--muted);cursor:help;vertical-align:middle}
.tip:hover{color:var(--accent)}
.tip svg{width:14px;height:14px}
.tip::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 8px);
  background:var(--panel-h);color:var(--txt);border:1px solid var(--border-2);border-radius:9px;
  padding:9px 11px;width:max-content;max-width:280px;font-size:11.5px;line-height:1.55;font-weight:500;
  white-space:normal;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:opacity .12s;
  z-index:60;pointer-events:none}
.tip.r::after{left:auto;right:0}
.tip:hover::after{opacity:1;visibility:visible}

/* Barre d'activation de campagne -------------------------------------------- */
.activate-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 15px;border-radius:14px;border:1px solid var(--border-2);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));margin:2px 0 16px}
.act-left{display:flex;align-items:center;gap:12px}
.act-badge{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--panel-h);border:1px solid var(--border);color:var(--accent)}
.act-badge.on{color:#16a34a;border-color:color-mix(in srgb,#16a34a 40%,var(--border))}
.act-title{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:7px}
.act-desc{font-size:11.5px;color:var(--muted);margin-top:2px}

/* Section déroulante "Personnaliser" ---------------------------------------- */
.adv{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--panel-2)}
.adv-head{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;user-select:none}
.adv-head:hover{background:var(--panel-h)}
.adv-head .chev{color:var(--muted);display:inline-flex}
.adv-title2{font-weight:650;font-size:13px}
.adv-sum{color:var(--muted);font-size:11.5px;margin-left:auto;font-weight:500}
.adv-body{padding:14px;border-top:1px solid var(--border);display:grid;gap:14px}
.smart-note{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--txt-2);
  background:color-mix(in srgb,var(--accent) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));
  border-radius:10px;padding:10px 12px;line-height:1.5}
.smart-note .i{color:var(--accent);margin-top:1px}
.pill.smart{background:color-mix(in srgb,var(--accent) 14%,var(--panel));color:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.sec-title{display:flex;align-items:center;gap:7px}

/* searchbox comptes */
.acc-tools .searchbox{background:var(--panel-2);border:1px solid var(--border-2);border-radius:9px;padding:0 4px 0 9px;max-width:230px}
.acc-tools .searchbox .i{color:var(--muted)}
.acc-tools .searchbox input.search{background:transparent!important;border:0!important;box-shadow:none!important;max-width:180px;padding-left:6px}
.field label{display:flex;align-items:center;gap:6px}
h1{display:flex;align-items:center}
h1 .i.brand svg{width:20px;height:20px}

/* ═══════════════════════════════════════════════════════════════════════
   OVERRIDE v3 — MONOCHROME (noir / blanc / gris), login néon, dashboard.
   ═══════════════════════════════════════════════════════════════════════ */
:root, [data-theme="dark"]{
  --accent:#f5f5f7; --accent-soft:#b9bcc4; --indigo:#f5f5f7; --grad:#f5f5f7;
  --ring:0 0 0 3px rgba(255,255,255,.13);
}
[data-theme="light"]{
  --accent:#15171e; --accent-soft:#4a4f5c; --indigo:#15171e; --grad:#15171e;
  --ring:0 0 0 3px rgba(0,0,0,.14);
}
/* Boutons "accent" = monochrome lisible (texte contrasté, pas de blanc/blanc) */
button.primary,button.success{background:var(--accent);color:var(--btn-fg);border-color:transparent}
button.primary:hover,button.success:hover{background:var(--accent-soft);color:var(--btn-fg)}
.seg button.active{background:var(--accent)!important;color:var(--btn-fg)!important}
.act-badge{color:var(--txt)}
.act-badge.on{background:var(--accent);color:var(--btn-fg);border-color:transparent}
.pill.smart{background:var(--panel-h);color:var(--txt-2);border:1px solid var(--border-2)}
/* Statuts : monochrome + rouge réservé au ban */
.st-connected{background:#e5e7eb}.st-pending{background:#71717a}
.st-disconnected{background:#3f3f46}.st-banned{background:#ef4444}
table.acc tbody tr.sel{background:rgba(255,255,255,.06)}
[data-theme="light"] table.acc tbody tr.sel{background:rgba(0,0,0,.05)}

/* ── LOGIN ─────────────────────────────────────────────────────────────── */
.login-body{margin:0;min-height:100vh;background:radial-gradient(120% 90% at 50% -10%,#131417 0%,#08090b 55%,#050506 100%);
  color:#f5f5f7;font-family:"Inter",system-ui,sans-serif;overflow:hidden;position:relative}
.logo-field{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 80%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 80%,transparent 100%)}
.floaty{position:absolute;bottom:-15%;color:#fff;opacity:0;filter:blur(.3px);
  animation:drift linear infinite;will-change:transform,opacity}
.floaty svg{width:100%;height:100%;display:block;opacity:.9}
@keyframes drift{
  0%{transform:translateY(120%) translateX(0) rotate(0);opacity:0}
  12%{opacity:var(--op,.06)}
  50%{transform:translateY(10%) translateX(var(--sx,14px)) rotate(4deg)}
  88%{opacity:var(--op,.06)}
  100%{transform:translateY(-120%) translateX(0) rotate(0);opacity:0}}
.login-center{position:relative;z-index:2;min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:100%;max-width:360px;background:rgba(18,19,22,.72);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:34px 30px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);text-align:center}
.login-mark{width:52px;height:52px;border-radius:15px;margin:0 auto 18px;display:grid;place-items:center;
  background:#0d0e11;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 0 34px rgba(255,255,255,.14)}
.login-mark span{font-weight:800;font-size:22px;color:#fff;text-shadow:0 0 16px rgba(255,255,255,.6)}
.login-title{font-size:23px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px;
  color:#fff;text-shadow:0 0 22px rgba(255,255,255,.28)}
.login-sub{font-size:12.5px;color:#8b8f99;margin:0 0 24px;font-weight:500}
.login-card input{width:100%;background:#0c0d10;border:1px solid rgba(255,255,255,.12);color:#fff;
  border-radius:11px;padding:12px 14px;font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s}
.login-card input::placeholder{color:#5b5f68}
.login-card input:focus{border-color:rgba(255,255,255,.4);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.login-card button{width:100%;margin-top:14px;background:#f5f5f7;color:#0a0b0d;font-weight:700;
  border:0;border-radius:11px;padding:12px;font-size:14px;cursor:pointer;transition:background .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.login-card button:hover{background:#fff}
.login-err{color:#ef6a6a;font-size:12px;margin-top:12px;min-height:14px}
.login-foot{position:fixed;bottom:16px;left:0;right:0;text-align:center;z-index:2;
  color:#4a4e57;font-size:11px;letter-spacing:.04em}

/* Fond flottant discret sur les pages plateforme */
.page-logo-field{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%)}
.page-logo-field .floaty{color:var(--txt)}
.main,.sidebar{position:relative;z-index:1}

/* ── DASHBOARD ANALYTIQUE ─────────────────────────────────────────────── */
.dash-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:2px 0 14px}
.chart-card{position:relative}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.chart-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.chart-box{position:relative;height:280px}
.chart-box.sm{height:120px}
.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.mini-app{padding:14px}
.mini-app .row.head{align-items:center;gap:9px;margin-bottom:8px}
.mini-app .delta{font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px;border:1px solid var(--border)}
.delta.up{color:#d1fadf;background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.25)}
.delta.down{color:#f6d4d4;background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.25)}
.delta.flat{color:var(--muted)}
/* Heatmap */
.heat{display:grid;grid-template-columns:auto repeat(24,1fr);gap:3px;align-items:center}
.heat .hcell{aspect-ratio:1;border-radius:3px;background:var(--panel-2);border:1px solid var(--border)}
.heat .hlabel{font-size:9.5px;color:var(--muted);padding-right:6px;text-align:right;white-space:nowrap}
.heat .hcol{font-size:8.5px;color:var(--muted);text-align:center}
.heat-legend{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin-top:10px;justify-content:flex-end}
.heat-legend i{width:13px;height:13px;border-radius:3px;display:inline-block;border:1px solid var(--border)}
/* Carte insight IA */
.insight{display:flex;gap:14px;align-items:flex-start;padding:16px 18px}
.insight .ai-badge{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--panel-h);border:1px solid var(--border-2);color:var(--txt);
  box-shadow:0 0 26px rgba(255,255,255,.06)}
.insight h3{margin:0 0 3px;font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.insight .ai-tag{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--border);border-radius:20px;padding:2px 8px}
.insight p{margin:0;font-size:12.5px;line-height:1.6;color:var(--txt-2)}
.insight ul{margin:8px 0 0;padding-left:16px;font-size:12px;color:var(--txt-2);line-height:1.6}
.logout-btn{background:transparent;border:1px solid var(--border);color:var(--muted)}
.logout-btn:hover{color:var(--txt);background:var(--panel-2)}

/* ── Logo / marque SOP ─────────────────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:32px;height:32px;object-fit:contain;display:block;flex:none}
.brand-txt{display:flex;flex-direction:column;font-weight:800;font-size:15px;letter-spacing:-.01em;line-height:1.02}
.brand-txt small{font-weight:500;font-size:9px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-top:3px}
body[data-sidebar="collapsed"] .brand{justify-content:center}
.login-mark{background:transparent!important;border:0!important;box-shadow:none!important;width:auto!important;height:auto!important}
.login-mark::after,.login-mark::before{display:none!important}
.login-mark img{width:70px;height:70px;object-fit:contain;display:block;margin:0 auto 2px;
  filter:drop-shadow(0 0 30px rgba(58,166,160,.30))}

/* ═══════════════════════════════════════════════════════════════════════
   v5 — police tech, aurora monochrome, menu clic-droit, reveal au scroll
   ═══════════════════════════════════════════════════════════════════════ */
:root{--sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
      --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;}
body{font-family:var(--sans);letter-spacing:-.006em}
.val,.stat-v,.kpi .val,.delta,.mini-st,table.acc td.num,.login-title,.brand-txt,
h1#pg-title,.chart-title,.ai-tag,.heat .hlabel,.heat .hcol,.status-pill,.pill,.chip,
.act-title,.adv-sum,.acc-selinfo{font-family:var(--mono)}
.brand-txt{letter-spacing:.02em}.login-title{letter-spacing:.01em}
h1#pg-title{letter-spacing:0}

/* Aurora de fond -> monochrome discret (garde le mouvement) */
body::before{background:
  radial-gradient(40vw 40vw at 15% 20%, rgba(255,255,255,.05), transparent 60%),
  radial-gradient(36vw 36vw at 85% 15%, rgba(255,255,255,.035), transparent 62%),
  radial-gradient(42vw 42vw at 75% 85%, rgba(255,255,255,.03), transparent 62%)!important}
[data-theme="light"] body::before{opacity:1;background:
  radial-gradient(40vw 40vw at 15% 20%, rgba(0,0,0,.05), transparent 60%),
  radial-gradient(36vw 36vw at 85% 15%, rgba(0,0,0,.035), transparent 62%),
  radial-gradient(42vw 42vw at 75% 85%, rgba(0,0,0,.03), transparent 62%)!important}

/* Calque de logos flottants — visible + parallaxe fluide */
.page-logo-field{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.logo-field{transition:transform .3s cubic-bezier(.2,.8,.2,1)}

/* Reveal au scroll */
.reveal{opacity:0;transform:translateY(16px) scale(.995);
  transition:opacity .55s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Menu contextuel (clic droit) */
.ctx-menu{position:fixed;z-index:200;min-width:230px;background:var(--panel-h);
  border:1px solid var(--border-2);border-radius:12px;padding:6px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.02);
  backdrop-filter:blur(12px);animation:ctxin .12s ease}
@keyframes ctxin{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.ctx-head{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);padding:7px 9px 8px;font-family:var(--mono)}
.ctx-item{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:8px;
  font-size:12.5px;color:var(--txt);cursor:pointer;user-select:none}
.ctx-item:hover{background:var(--panel-2)}
.ctx-item .i{color:var(--muted)}.ctx-item:hover .i{color:var(--txt)}
.ctx-item.danger{color:var(--red)}.ctx-item.danger .i{color:var(--red)}
.ctx-item.danger:hover{background:color-mix(in srgb,var(--red) 12%,transparent)}
.ctx-item .kbd{margin-left:auto;font-size:10px;color:var(--muted);font-family:var(--mono)}
.ctx-sep{height:1px;background:var(--border);margin:5px 4px}
.ctx-label{font-size:10.5px;color:var(--muted);padding:6px 9px 4px;font-weight:600}
.ctx-colors{display:flex;gap:7px;align-items:center;padding:4px 9px 8px}
.ctx-colors i{width:19px;height:19px;border-radius:50%;cursor:pointer;border:1px solid #0004;transition:transform .1s}
.ctx-colors i:hover{transform:scale(1.18)}
.ctx-colors i.clear{background:var(--panel-2);border:1px dashed var(--border-2);display:grid;place-items:center;color:var(--muted)}
.ctx-colors i.clear .i svg{width:11px;height:11px}
.ctx-tasks{max-height:150px;overflow:auto;margin:0 2px}
.ctx-task{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;font-size:12px;cursor:pointer}
.ctx-task:hover{background:var(--panel-2)}
.ctx-task .dotp{width:6px;height:6px;border-radius:50%;background:var(--muted)}

/* Colonne Vérif */
.chk{display:inline-flex;align-items:center;gap:5px;font-size:11.5px}
.chk.alive{color:#e5e7eb}.chk.dead{color:#ef6a6a}.chk.unknown{color:var(--muted)}
.chk .i svg{width:13px;height:13px}
.chk.checking .i{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Toast de progression */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:220;
  background:var(--panel-h);border:1px solid var(--border-2);border-radius:12px;
  padding:11px 16px;box-shadow:var(--shadow-lg);font-size:12.5px;display:flex;align-items:center;gap:11px;
  animation:ctxin .15s ease}
.toast .i{color:var(--txt)}.toast .bar{width:120px;height:5px;border-radius:5px;background:var(--panel-2);overflow:hidden}
.toast .bar i{display:block;height:100%;background:var(--accent);transition:width .3s}

/* ═══════════════════════════════════════════════════════════════════════
   v6 — lisibilité des états actifs (contours + ombres), switch, searchbox
   ═══════════════════════════════════════════════════════════════════════ */
/* Switch : poignée contrastée + contour + ombre quand activé */
.switch .track::before{background:var(--txt-2)}
.switch input:checked+.track{background:var(--accent);border:1px solid rgba(0,0,0,.28);
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 2px 8px -2px rgba(0,0,0,.45)}
.switch input:checked+.track::before{background:var(--btn-fg)}
[data-theme="light"] .switch input:checked+.track{border-color:rgba(255,255,255,.25);
  box-shadow:0 0 0 1px rgba(0,0,0,.10),0 2px 8px -2px rgba(0,0,0,.25)}

/* Boutons "pleins" (blancs) : léger contour + ombre pour ne pas se fondre */
button.primary,button.success{border:1px solid rgba(0,0,0,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 12px -5px rgba(0,0,0,.55)}
[data-theme="light"] button.primary,[data-theme="light"] button.success{
  border-color:rgba(255,255,255,.14);box-shadow:0 3px 12px -5px rgba(0,0,0,.35)}
.seg button.active{border:1px solid rgba(0,0,0,.18);box-shadow:0 2px 8px -3px rgba(0,0,0,.5)}
button.ghost.active{box-shadow:0 0 0 1px var(--accent) inset}
.nav a.active{box-shadow:inset 0 0 0 1px var(--border-2)!important}

/* Searchbox compacte */
.acc-tools .searchbox{max-width:186px;height:31px;padding:0 9px;border-radius:9px;align-items:center}
.acc-tools .searchbox .i svg{width:14px;height:14px}
.acc-tools .searchbox input.search{max-width:135px;font-size:12px;padding-left:6px}

/* ═══════════════════════════════════════════════════════════════════════
   v7 — Dashboard à widgets (déplaçable / redimensionnable / superposable)
   ═══════════════════════════════════════════════════════════════════════ */
.dash-board{position:relative;width:100%;min-height:400px}
.widget{position:absolute;background:var(--panel);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .15s,border-color .15s}
.widget:hover{border-color:var(--border-2)}
.widget.editing{border-style:dashed;border-color:var(--border-2)}
.widget.dragging{box-shadow:0 24px 60px -18px rgba(0,0,0,.7);border-color:var(--accent);opacity:.98}
.widget-head{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--border);
  background:var(--panel-2);flex:none;min-height:38px}
.widget-head .w-grip{color:var(--muted);display:none}
.widget.editing .widget-head{cursor:grab}
.widget.editing .widget-head .w-grip{display:inline-flex}
.widget.dragging .widget-head{cursor:grabbing}
.w-title{font-size:12px;font-weight:700;color:var(--txt-2);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-remove{margin-left:auto;background:transparent;border:1px solid var(--border);color:var(--muted);
  padding:3px;border-radius:7px;display:inline-flex;flex:none}
.w-remove:hover{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,var(--border));background:transparent}
.w-remove .i svg{width:13px;height:13px}
.widget-body{flex:1;padding:13px 14px;overflow:hidden;min-height:0}
.w-resize{position:absolute;right:2px;bottom:2px;width:18px;height:18px;cursor:nwse-resize;
  color:var(--muted);display:grid;place-items:center;opacity:.6;transform:rotate(45deg)}
.w-resize .i svg{width:12px;height:12px}
.w-resize:hover{opacity:1;color:var(--txt)}
.wkpi{display:flex;align-items:center;justify-content:space-between;height:100%}
.wkpi .val{font-size:24px}
.wchart-head{display:flex;align-items:center;gap:8px;flex:none}
.wchart-head select{padding:5px 9px;font-size:11.5px}
.seg.sm button{padding:5px 8px}
.wchart-box{position:relative;flex:1;min-height:0}
.wman-edit{display:flex;flex-direction:column;gap:7px;height:100%;justify-content:center}
.wman-edit input{padding:7px 10px;font-size:12.5px}
/* Catalogue de widgets */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:14px;max-height:60vh;overflow:auto}
.cat-item{display:flex;align-items:center;gap:11px;padding:12px 13px;border:1px solid var(--border);
  border-radius:11px;cursor:pointer;font-size:12.5px;font-weight:600;background:var(--panel-2);transition:border-color .12s,background .12s}
.cat-item:hover{border-color:var(--accent);background:var(--panel-h)}
.cat-item .i{color:var(--muted)}.cat-item:hover .i{color:var(--txt)}

/* v7.1 — états désactivés menu + drag propre */
.ctx-item.disabled{opacity:.38;cursor:default;pointer-events:none}
.ctx-colors.disabled,.ctx-tasks.disabled{opacity:.38;pointer-events:none}
.widget.editing .widget-head,.w-resize{touch-action:none}
body.dragging-widget{cursor:grabbing;user-select:none}
body.dragging-widget .widget-body{pointer-events:none}

/* ── Auto-login user:pass:2fa : pop-up pro, progression, retry, journal ── */
.seg-row{display:flex;gap:6px;margin:4px 0 2px}
.seg-row .seg{flex:1;padding:8px 10px;border-radius:9px;border:1px solid var(--border);
  background:var(--panel-2);color:var(--txt-2);font-size:12px;font-weight:600;cursor:pointer;transition:.15s var(--ease)}
.seg-row .seg:hover{border-color:var(--border-2)}
.seg-row .seg.active{background:color-mix(in srgb,var(--accent) 16%,var(--panel));
  color:var(--accent-soft);border-color:var(--accent)}
.pro-q{margin:12px 0;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2)}
.hint.warn{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:9px 11px;border-radius:9px;
  background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.28);color:#fbbf24;font-size:11.5px;line-height:1.45}
.hint.warn .i{flex:0 0 auto;margin-top:1px}
.conn-prog{display:flex;flex-direction:column;gap:4px;min-width:120px}
.conn-prog .bar.sm{height:6px}
.conn-lbl{font-size:10.5px;color:var(--txt-2);font-weight:600}
.conn-err{display:inline-flex;gap:7px;align-items:center}
.icon.retry{width:26px;height:26px;border-radius:7px;border:1px solid var(--border);background:var(--panel-2);
  display:inline-grid;place-items:center;cursor:pointer;color:var(--txt-2);transition:.15s var(--ease)}
.icon.retry:hover{border-color:var(--accent);color:var(--accent-soft);transform:rotate(-30deg)}
.logs-modal{width:min(680px,92vw)}
.logs-list{margin-top:10px;max-height:56vh;overflow:auto;border:1px solid var(--border);border-radius:10px;
  background:var(--panel-2);font-variant-numeric:tabular-nums}
.log-line{display:flex;gap:10px;padding:6px 11px;border-bottom:1px solid var(--border);font-size:12px;align-items:baseline}
.log-line:last-child{border-bottom:0}
.log-ts{flex:0 0 88px;color:var(--txt-3,#8b8b96);font-size:11px}
.log-msg{flex:1;color:var(--txt-2)}
.log-line.lvl-success .log-msg{color:#4ade80}
.log-line.lvl-warn .log-msg{color:#fbbf24}
.log-line.lvl-error .log-msg{color:#f87171}

/* ── Caption IA (section campagne) ── */
.ai-cap.on{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.ai-cap-prompt{width:100%;min-height:132px;resize:vertical;font-family:inherit;font-size:12.5px;line-height:1.5}
.ai-cap-prompt:disabled{opacity:.5;cursor:not-allowed}
.ai-cap-out{flex:1;min-height:38px;font-size:12.5px;padding:9px 12px;border-radius:10px;background:var(--panel-2);border:1px solid var(--border)}
.ai-cap-out.warn{color:#fbbf24;border-color:rgba(245,158,11,.30)}
.ai-cap-tag{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-soft);margin-bottom:5px;font-weight:700}
.ai-cap-sample{color:var(--txt);white-space:pre-wrap;line-height:1.5}

/* ── Aperçu planning (simulation) ── */
.plan-list{margin-top:6px;display:flex;flex-direction:column;gap:1px}
.plan-head{font-size:11px;color:var(--txt-2);font-weight:700;padding:6px 2px;text-transform:uppercase;letter-spacing:.04em}
.plan-row{display:grid;grid-template-columns:52px 120px 1fr 2fr;gap:10px;align-items:baseline;
  padding:7px 10px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);font-size:12px}
.plan-time{font-weight:800;color:var(--accent-soft);font-variant-numeric:tabular-nums}
.plan-acc{font-weight:600}
.plan-reel{color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-cap{color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.plan-row{grid-template-columns:48px 1fr;row-gap:2px}.plan-reel,.plan-cap{grid-column:2}}

/* ── Tableau comptes : cases vides jusqu'en bas ── */
tr.acc-empty td{height:37px;border-bottom:1px solid var(--border);background:transparent}
tr.acc-empty:hover td{background:var(--panel-2)}
.acc-wrap{min-height:60vh}

/* ── Badge activation Threads ── */
.thr-badge{display:inline-flex;width:16px;height:16px;margin-left:7px;vertical-align:middle;border-radius:4px;align-items:center;justify-content:center}
.thr-badge .i{width:12px;height:12px}
.thr-badge.ok{color:#4ade80}
.thr-badge.err{color:#f87171}
.thr-badge.wait{color:#fbbf24;animation:thrpulse 1.2s ease-in-out infinite}
@keyframes thrpulse{50%{opacity:.35}}
.thr-badge.todo{color:#fbbf24}

/* ── Chips de liaison IG <-> Threads ── */
.link-chip{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:20px;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;cursor:pointer;vertical-align:middle;
  border:1px solid var(--border);transition:.15s var(--ease)}
.link-chip .i{width:12px;height:12px}
.link-chip.threads{background:color-mix(in srgb,var(--green) 14%,var(--panel));color:#4ade80;border-color:rgba(74,222,128,.35)}
.link-chip.ig{background:color-mix(in srgb,var(--accent) 14%,var(--panel));color:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.link-chip:hover{transform:translateY(-1px);filter:brightness(1.15)}
.chk.no_threads{background:rgba(245,158,11,.14);color:#fbbf24}

/* ── Aperçu planning : type de contenu ── */
.plan-row{grid-template-columns:50px 26px 118px 1fr 1.6fr!important}
.plan-kind{display:inline-flex;align-items:center;justify-content:center;width:22px;height:20px;border-radius:6px;font-size:11px;font-weight:700}
.plan-kind.k-text{background:color-mix(in srgb,var(--accent) 16%,var(--panel));color:var(--accent-soft)}
.plan-kind.k-photo{background:rgba(139,92,246,.16);color:#c4b5fd}
.plan-kind.k-video{background:rgba(34,197,94,.14);color:#4ade80}

/* ── Onglets par campagne (tableaux de comptes) ── */
.acc-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 10px}
.acc-tab{display:inline-flex;align-items:center;gap:7px;background:var(--panel);
  border:1px solid var(--border);color:var(--txt-2);padding:7px 13px;border-radius:10px;
  font-size:13px;font-weight:650;box-shadow:none}
.acc-tab:hover{color:var(--txt);border-color:var(--muted)}
/* actif : accent + texte btn-fg = lisible dans TOUS les themes (le theme monochrome met --grad quasi blanc, d'ou l'ancien blanc/blanc) */
.acc-tab.active{background:var(--accent);color:var(--btn-fg);border-color:transparent}
.acc-tab .acc-tab-n{display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 5px;
  border-radius:9px;font-size:11px;font-weight:800}
.acc-tab:not(.active) .acc-tab-n{background:var(--bg);color:var(--muted)}
.acc-tab.active .acc-tab-n{background:color-mix(in srgb,var(--btn-fg) 18%,transparent);color:var(--btn-fg)}
.acc-tab-new{border-style:dashed;color:var(--muted)}

/* ── Lisibilite des etats SELECTIONNES sur toute surface accent/grad ──
   (fix blanc-sur-blanc : le theme monochrome met --grad quasi blanc, or ces
    selecteurs utilisaient color:#fff en dur -> texte invisible). On force un
    texte contraste via --btn-fg, lisible dans TOUS les themes. */
.stab.active{background:var(--accent)!important;color:var(--btn-fg)!important;border-color:transparent}
.hm-cell.on{background:var(--accent)!important;color:var(--btn-fg)!important;border-color:transparent}
.side-toggle:hover{color:var(--btn-fg)!important}