/* Charte Igor Sautier · Nevios : couche interface */
:root{
  --page:#5A5656; --surface:#1A1818; --surface-2:#2A2727; --line:#3B3738;
  --text-strong:#FFFFFF; --text:#E8E4E4; --text-muted:#A9A2A2; --text-subtle:#958D8D;
  --gold:#D9B77E; --red:#E0242E; --red-text:#FF5A60; --black-textbox:#1E0A0D;
  --font-display:Montserrat,Poppins,'Arial Black',Arial,sans-serif;
  --font-body:Inter,Arial,sans-serif;
  --radius-tag:6px; --radius-box:8px; --radius-control:10px; --radius-card:18px;
  --hero-bg:radial-gradient(120% 140% at 85% 30%,#D11A28 0%,#8E0D17 38%,#3A060B 72%,#1A0507 100%);
  --gold-bg:linear-gradient(180deg,#C9A766 0%,#8E6F3A 100%);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--page);color:var(--text);font:400 15px/24px var(--font-body)}
a{color:var(--gold)}a:hover{color:#F0D6A6}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:1280px;margin:0 auto;padding:32px 16px 64px;display:flex;flex-direction:column;gap:20px}
.row{display:flex;flex-wrap:wrap;gap:20px}

/* En-tête bannière */
.hero{border-radius:var(--radius-card);background:var(--hero-bg);padding:40px;display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between}
.hero-main{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.eyebrow{font:800 18px var(--font-display);letter-spacing:.02em;color:#fff;text-transform:uppercase}
.eyebrow span{color:var(--gold)}
.lbox{background:#120707;border-radius:var(--radius-box);padding:4px 16px 6px;font:900 44px/1.15 var(--font-display);color:#fff;text-transform:uppercase}
.gbox{background:var(--gold-bg);border:1.5px solid #E6C98F;border-radius:var(--radius-box);padding:4px 16px 6px;font:900 44px/1.15 var(--font-display);color:#fff;text-transform:uppercase}
.lines{display:flex;flex-wrap:wrap;gap:10px}
.pill{margin-top:6px;border:1px solid #A0434B;border-radius:999px;background:rgba(40,4,8,.55);padding:8px 20px;font:italic 600 15px var(--font-display);color:#F3E6E6;text-transform:uppercase;letter-spacing:.02em}
.hero-side{display:flex;flex-direction:column;gap:8px;align-items:flex-end;font:600 12px var(--font-body);color:#E2C3C6}
.linkbtn{background:none;border:0;padding:0;color:#F3E6E6;text-decoration:underline;cursor:pointer;font:600 12px var(--font-body)}

/* Cartes */
.card{background:var(--surface);border-radius:var(--radius-card);padding:28px;min-width:0}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.tag{display:inline-block;border:1.5px solid var(--gold);border-radius:var(--radius-tag);padding:5px 11px;font:800 11px/15px var(--font-display);letter-spacing:.16em;color:var(--gold);text-transform:uppercase;white-space:nowrap}
.h2{margin:10px 0 0;font:800 24px/30px var(--font-display);letter-spacing:-.01em;color:#fff}
.src{font:600 12px var(--font-body);color:var(--text-subtle)}
.line{display:flex;gap:14px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line)}
.st{font:800 10px/14px var(--font-display);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;flex:none}
.big{font:800 32px/1 var(--font-display);letter-spacing:-.02em;color:#fff}
.strong{font-weight:700;color:#fff}
.muted{color:var(--text-muted);font-size:14px}
.empty{color:var(--text-subtle);font-size:14px;padding:13px 0;border-top:1px solid var(--line)}
.c-gold{color:var(--gold)}.c-red{color:var(--red-text)}.c-muted{color:var(--text-muted)}.c-text{color:var(--text)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:var(--radius-control);border:1.5px solid var(--line);background:var(--surface-2);color:#fff;font:700 13px var(--font-body);cursor:pointer}
.btn:hover{border-color:var(--gold)}
.btn.primary{background:var(--red);border-color:var(--red)}
.btn.primary:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.6;cursor:wait}

/* KPI */
.kpi{flex:1 1 160px;padding:24px;display:flex;flex-direction:column;gap:12px}
.kpi .note{font:600 13px var(--font-body)}

/* Jarvis */
.jarvis{display:flex;flex-direction:column;gap:16px}
.chat{position:relative;display:flex;flex-direction:column;gap:12px;max-height:560px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#5E5758 transparent}
.chat:empty{display:none}
.msg{border-radius:var(--radius-control);padding:14px 18px;line-height:1.6;overflow-wrap:anywhere}
.msg.user,.msg.err{white-space:pre-wrap}
.msg.bot{position:relative;padding-right:18px}
.md>*:first-child{margin-top:0}
.md>*:last-child{margin-bottom:0}
.md p{margin:0 0 10px}
.md h4{margin:16px 0 6px;font:800 13px/1.3 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.md ul,.md ol{margin:0 0 10px;padding-left:20px}
.md li{margin:4px 0;padding-left:2px}
.md ul li::marker{color:var(--red)}
.md ol li::marker{color:var(--red);font-weight:800}
.md strong{color:#fff}
.md code{background:var(--surface);padding:1px 6px;border-radius:5px;font-size:.92em}
.msg .copy{margin-top:10px}
.msg.user{align-self:flex-end;background:#3A1A1E;color:#fff;max-width:80%}
.msg.bot{background:var(--surface-2);color:#ECE8E8}
.msg.err{background:#3A1219;color:#FFD4D7}
.ask{display:flex;gap:10px}
.ask input{flex:1;min-width:0;height:54px;border-radius:var(--radius-control);border:1.5px solid var(--line);background:var(--surface-2);color:#fff;padding:0 18px}
.ask .send{width:54px;height:54px;padding:0;background:var(--gold);border-color:var(--gold);color:var(--surface)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .btn{min-height:38px;font-size:12px;font-weight:600;color:var(--text)}

/* Tâches */
.check{width:26px;height:26px;flex:none;border-radius:var(--radius-tag);border:1.5px solid #5E5758;background:transparent;color:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-weight:800}
.check.on{background:var(--gold);border-color:var(--gold)}
.task-title{flex:1;min-width:0}
.task.done .task-title{color:#7A7373;text-decoration:line-through}
.del{background:none;border:0;color:var(--text-subtle);cursor:pointer;font-size:18px;width:32px;height:32px;border-radius:6px}
.del:hover{color:var(--red-text);background:var(--surface-2)}
.addtask{display:flex;gap:14px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.addtask span{width:26px;text-align:center;font:800 18px var(--font-display);color:var(--red)}
.addtask input{flex:1;min-width:0;height:44px;background:transparent;border:0;color:#fff}

/* Jauges */
.bar{flex:1;height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:4px}
.stage{display:flex;align-items:center;gap:12px;font-size:14px;margin-bottom:10px}
.stage .name{width:130px;flex:none}
.stage .n{width:28px;text-align:right;flex:none;font:800 15px var(--font-display);color:#fff}
.segs{display:flex;gap:6px;margin:14px 0 10px}
.segs i{flex:1;height:8px;border-radius:4px;background:var(--surface-2)}
.segs i.on{background:var(--red)}

/* Veille */
.news{display:flex;flex-wrap:wrap;gap:16px}
.news article{flex:1 1 300px;min-width:0;background:var(--surface-2);border-radius:var(--radius-control);padding:20px;display:flex;flex-direction:column;gap:10px}
.news h3{margin:0;font:800 17px/23px var(--font-display);color:#fff}
.news .num{font:800 15px var(--font-display);color:var(--red)}

/* Boutons d'action */
.btn{gap:8px;text-decoration:none}
a.btn{color:#fff}
.btn.light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)}
.btn.light:hover{background:rgba(255,255,255,.2);border-color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.row-actions{display:flex;flex-wrap:wrap;gap:6px;flex:none}
.mini{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font:600 12px var(--font-body);cursor:pointer;text-decoration:none;white-space:nowrap}
.mini:hover{border-color:var(--gold);color:#fff}

/* Raccourcis */
.shortcuts{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;scrollbar-color:#3B3738 transparent}
.sc{flex:1 0 92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:84px;padding:12px 8px;background:var(--surface);border:1.5px solid transparent;border-radius:14px;color:var(--text);text-decoration:none;font:700 12px var(--font-body);text-align:center;cursor:pointer}
.sc svg{color:var(--gold)}
.sc:hover{border-color:var(--gold);color:#fff}

/* Graphiques */
.spark{display:block;width:100%;height:40px;margin-top:4px}
.spark-empty{font-size:12px;color:var(--text-subtle);height:40px;display:flex;align-items:flex-end}
.kpi-ring{flex:1 1 240px!important;flex-direction:row!important;align-items:center;gap:18px}
.kpi-ring>div{min-width:0}
.big{white-space:nowrap}
.ring{flex:none;display:block}
.chart-empty{min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text-subtle);font-size:14px;border:1px dashed var(--line);border-radius:12px;padding:20px}
.chart-empty b{color:#fff;margin-left:4px}
.linechart{display:block;width:100%;height:190px}
.chart-axis{display:flex;justify-content:space-between;font:600 12px var(--font-body);color:var(--text-subtle);margin-top:4px}
.seg{display:flex;flex-wrap:wrap;gap:4px;background:var(--surface-2);border-radius:10px;padding:4px}
.seg button{border:0;background:none;color:var(--text-muted);font:700 12px var(--font-body);padding:8px 10px;border-radius:7px;cursor:pointer;min-height:34px}
.seg button[aria-selected="true"]{background:var(--surface);color:#fff;box-shadow:inset 0 0 0 1px var(--gold)}
.dayline{margin:2px 0 10px}
.dl-track{position:relative;height:16px;background:var(--surface-2);border-radius:8px;overflow:hidden}
.dl-ev{position:absolute;top:0;bottom:0;background:var(--red);border-radius:4px;opacity:.9}
.dl-now{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--gold)}
.dl-ticks{position:relative;height:18px;font:600 11px var(--font-body);color:var(--text-subtle)}
.dl-ticks span{position:absolute;transform:translateX(-50%);top:4px}
.stackbar{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font:600 12px var(--font-body);color:var(--text-muted)}
.legend b{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.mail-top{display:flex;flex-wrap:wrap;gap:24px;align-items:center}

/* CRM */
.crm-grid{display:grid;grid-template-columns:190px minmax(0,1fr) minmax(0,1.3fr);gap:28px;align-items:start}
.crm-chart{display:flex;justify-content:center}
.lg-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.lg-row:first-child{border-top:0}
.lg-row b{width:12px;height:12px;border-radius:3px;flex:none}
.lg-name{flex:1;min-width:0}
.lg-n{font:800 15px var(--font-display);color:#fff;width:28px;text-align:right}
.lg-v{width:84px;text-align:right;color:var(--gold);font:700 13px var(--font-body)}
.fu{padding:12px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.fu:first-of-type{border-top:0}
.fu-top{display:flex;justify-content:space-between;gap:10px}
.fu-what{font-size:13px}
.fu .bar{height:5px}
.soc{padding:12px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.soc-top{display:flex;align-items:baseline;gap:12px}
.soc-top .strong{flex:1}
.nl-rings{display:flex;gap:18px;margin:14px 0 8px}
.nl-empty{margin-bottom:10px}
.posts-ring{display:flex;gap:16px;align-items:center;margin-bottom:8px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#fff;color:var(--surface);font:700 14px var(--font-body);padding:12px 20px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:10;max-width:calc(100% - 32px)}

@media (max-width:980px){
  .crm-grid{grid-template-columns:170px minmax(0,1fr)}
  .crm-follow{grid-column:1 / -1}
  .hero-side{align-items:flex-start}
}

footer{text-align:center;font:500 12px var(--font-body);color:#D6D0D0}
footer b{color:#fff}

/* Connexion */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login form{width:100%;max-width:420px;background:var(--surface);border-radius:var(--radius-card);overflow:hidden}
.login .top{background:var(--hero-bg);padding:28px}
.login .body{padding:28px;display:flex;flex-direction:column;gap:14px}
.login input{height:52px;border-radius:var(--radius-control);border:1.5px solid var(--line);background:var(--surface-2);color:#fff;padding:0 16px}

@media (max-width:640px){
  .crm-grid{grid-template-columns:1fr}
  .kpi-ring{flex-direction:column!important;align-items:flex-start}
  .line{flex-wrap:wrap}
  .line .row-actions{width:100%;padding-left:0}
  .hero{padding:28px 22px}
  .lbox,.gbox{font-size:30px}
  .card{padding:22px}
  .stage .name{width:100px}
}