:root {
  --bg:#0a0a0b; --panel:#121214; --panel2:#18181b; --line:rgba(239,233,221,.09); --line2:rgba(239,233,221,.18);
  --ink:#efe9dd; --mut:#8f8b81; --faint:#5d5b56; --gold:#d6a85a; --gold2:#f0cf94;
  --red:#e5736a; --green:#7fbf9a; --blue:#8fa8d8; --violet:#b39ddb;
  --serif:'Instrument Serif',Georgia,serif; --sans:'Schibsted Grotesk',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
* { box-sizing:border-box; }
html { color-scheme:dark; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 var(--sans); -webkit-font-smoothing:antialiased; min-height:100vh; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(900px 520px at 12% -8%, rgba(214,168,90,.11), transparent 60%), radial-gradient(700px 500px at 100% 110%, rgba(143,168,216,.06), transparent 60%); }
[hidden] { display:none !important; }
::selection { background:var(--gold); color:#111; }
::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-thumb { background:var(--line2); border-radius:9px; border:2px solid var(--bg); }
a { color:inherit; }
em { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--gold2); }

/* ---- éléments de base ---- */
.eyebrow { font:500 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--mut); }
.mut { color:var(--mut); } .mono { font-family:var(--mono); }
h1,h2,h3 { font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.01em; }
.btn { font:500 13px var(--sans); background:transparent; color:var(--ink); border:1px solid var(--line2); border-radius:999px; padding:8px 15px; cursor:pointer; transition:.25s var(--ease); display:inline-flex; gap:7px; align-items:center; text-decoration:none; white-space:nowrap; }
.btn:hover { border-color:var(--gold); color:var(--gold2); }
.btn.gold { background:var(--gold); border-color:var(--gold); color:#14110a; font-weight:600; } .btn.gold:hover { background:var(--gold2); color:#14110a; }
.btn.danger:hover { border-color:var(--red); color:var(--red); } .btn.sm { padding:5px 11px; font-size:12px; }
input,select,textarea { font:inherit; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 13px; outline:none; transition:.2s; max-width:100%; }
input:focus,select:focus,textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(214,168,90,.12); }
input[type=range] { padding:0; accent-color:var(--gold); } input[type=color] { padding:2px; width:34px; height:30px; border-radius:9px; }
input[type=checkbox] { appearance:none; width:18px; height:18px; padding:0; border-radius:6px; border:1px solid var(--line2); display:inline-grid; place-content:center; cursor:pointer; flex:none; }
input[type=checkbox]:checked { background:var(--gold); border-color:var(--gold); } input[type=checkbox]:checked::after { content:''; width:8px; height:4px; border:2px solid #14110a; border-top:0; border-right:0; transform:rotate(-45deg) translate(1px,-1px); }
kbd { font:500 10px var(--mono); border:1px solid var(--line2); border-radius:5px; padding:1px 5px; color:var(--mut); }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .grow { flex:1; }
.card { background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:20px; padding:22px; position:relative; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--c,var(--mut)); display:inline-block; flex:none; }

/* ---- connexion ---- */
#login { min-height:100vh; display:grid; place-items:center; position:relative; z-index:2; padding:20px; }
#loginForm { width:min(360px,100%); display:grid; gap:14px; }
#loginForm h1 { font-size:76px; line-height:.95; margin-bottom:10px; }
#loginErr { color:var(--red); margin:0; min-height:1.2em; font-size:13px; }

/* ---- coque ---- */
#app { display:grid; grid-template-columns:84px 1fr; min-height:100vh; position:relative; z-index:2; }
.rail { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; align-items:center; padding:22px 0; border-right:1px solid var(--line); gap:6px; background:rgba(10,10,11,.6); backdrop-filter:blur(14px); }
.mark { font:italic 22px var(--serif); color:var(--gold2); width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--line2); border-radius:14px; margin-bottom:22px; }
.rail nav { display:flex; flex-direction:column; gap:4px; flex:1; }
.rail-btn, .rail nav a { all:unset; box-sizing:border-box; cursor:pointer; width:64px; padding:10px 0 8px; border-radius:14px; display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--mut); font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; transition:.25s var(--ease); position:relative; }
.rail svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.rail-btn:hover, .rail nav a:hover { color:var(--ink); background:rgba(239,233,221,.05); }
.rail nav a.on { color:var(--gold2); background:rgba(214,168,90,.1); }
.rail nav a.on::before { content:''; position:absolute; left:-10px; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--gold); }
.badge { position:absolute; top:4px; right:8px; min-width:16px; height:16px; border-radius:9px; background:var(--gold); color:#14110a; font:600 10px/16px var(--sans); text-align:center; padding:0 4px; letter-spacing:0; }
main { padding:44px clamp(20px,4vw,56px) 80px; max-width:1360px; width:100%; margin:0 auto; min-width:0; }
.rise { animation:rise .8s var(--ease) both; animation-delay:calc(var(--i,0) * 70ms); }
@keyframes rise { from { opacity:0; transform:translateY(14px); } }
@media (prefers-reduced-motion:reduce) { .rise { animation:none; } }

/* ---- accueil ---- */
.hero { margin-bottom:34px; }
.hero h1 { font-size:clamp(44px,6.4vw,84px); line-height:.98; margin:14px 0 14px; }
.hero p { margin:0; color:var(--mut); font-size:17px; max-width:640px; } .hero p b { color:var(--ink); font-weight:500; }
.section-t { display:flex; justify-content:space-between; align-items:baseline; margin:0 0 14px; }
.section-t h2 { font-size:28px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-bottom:40px; }
.tile { text-decoration:none; padding:20px; border-radius:20px; border:1px solid var(--line); background:linear-gradient(160deg,color-mix(in srgb,var(--c) 14%,var(--panel2)),var(--panel)); position:relative; overflow:hidden; transition:.35s var(--ease); display:flex; flex-direction:column; gap:30px; min-height:132px; }
.tile::after { content:''; position:absolute; width:160px; height:160px; right:-60px; top:-60px; border-radius:50%; background:var(--c); opacity:.12; filter:blur(30px); transition:.4s; }
.tile:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--c) 60%,transparent); } .tile:hover::after { opacity:.3; }
.tile .arrow { position:absolute; right:18px; top:16px; color:var(--mut); font-size:18px; transition:.3s var(--ease); } .tile:hover .arrow { color:var(--ink); transform:translate(3px,-3px); }
.tile b { font:400 26px/1.05 var(--serif); display:block; }
.tile .meta { display:flex; justify-content:space-between; font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mut); margin-top:auto; }
.bar { height:3px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:8px; } .bar i { display:block; height:100%; background:var(--c,var(--gold)); transition:width .6s var(--ease); }
.cols { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; align-items:start; }
.stack { display:grid; gap:18px; }
.day { display:grid; grid-template-columns:78px 1fr; gap:14px; padding:12px 0; border-top:1px solid var(--line); } .day:first-of-type { border-top:0; padding-top:0; }
.day .d { font:500 11px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mut); } .day .d b { display:block; font:400 30px/1 var(--serif); color:var(--ink); letter-spacing:0; text-transform:none; }
.day.today .d b { color:var(--gold2); }
.ev { display:flex; gap:10px; align-items:baseline; padding:3px 0; } .ev .t { font:400 11px var(--mono); color:var(--mut); width:46px; flex:none; }
.task { display:flex; gap:11px; align-items:center; padding:9px 0; border-top:1px solid var(--line); } .task:first-of-type { border-top:0; }
.task span { flex:1; } .task.done span { text-decoration:line-through; color:var(--faint); }
.mrow { display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line); cursor:pointer; transition:.2s; } .mrow:first-child { border-top:0; } .mrow:hover { padding-left:6px; }
.mrow .s { font-weight:500; display:block; } .mrow .sm { color:var(--mut); font-size:13px; display:block; }
.empty { color:var(--mut); font-family:var(--serif); font-style:italic; font-size:20px; padding:14px 0; }

/* ---- mails ---- */
.mail-head { display:flex; gap:14px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; margin-bottom:18px; }
.mail-head h1 { font-size:52px; line-height:1; }
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.tab { font:500 12px var(--sans); padding:7px 13px; border-radius:999px; border:1px solid var(--line); color:var(--mut); cursor:pointer; transition:.2s; display:inline-flex; gap:7px; align-items:center; }
.tab:hover { color:var(--ink); border-color:var(--line2); } .tab.on { background:var(--ink); color:#111; border-color:var(--ink); } .tab .n { font:500 10px var(--mono); opacity:.7; }
.split { display:grid; grid-template-columns:minmax(300px,420px) minmax(0,1fr); gap:16px; align-items:start; }
.list { border:1px solid var(--line); border-radius:20px; background:var(--panel); overflow:hidden; max-height:calc(100vh - 250px); overflow-y:auto; }
.mi { padding:14px 16px 14px 18px; border-bottom:1px solid var(--line); cursor:pointer; position:relative; transition:background .2s; }
.mi:hover { background:rgba(239,233,221,.03); } .mi.sel { background:rgba(214,168,90,.08); } .mi.sel::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold); }
.mi .top { display:flex; gap:8px; align-items:center; font-size:12px; color:var(--mut); } .mi .top b { color:var(--ink); font-weight:500; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.mi .sub { font-weight:500; margin:3px 0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mi .pv { color:var(--mut); font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.reader { border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,var(--panel2),var(--panel)); padding:30px; position:sticky; top:24px; max-height:calc(100vh - 250px); overflow-y:auto; }
.reader h2 { font-size:34px; line-height:1.08; margin:12px 0 10px; }
.reader .from { color:var(--mut); font-size:13px; margin-bottom:18px; }
.ai { border-left:2px solid var(--gold); background:rgba(214,168,90,.07); padding:12px 16px; border-radius:0 12px 12px 0; margin-bottom:18px; font-family:var(--serif); font-size:19px; line-height:1.35; color:var(--gold2); }
.ai small { display:block; font:500 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
.rbody { white-space:pre-wrap; color:#cfc9bd; font-size:14px; line-height:1.65; max-height:340px; overflow:auto; padding-right:8px; margin-bottom:20px; }
.pill { font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:999px; border:1px solid color-mix(in srgb,var(--c) 55%,transparent); color:var(--c); background:color-mix(in srgb,var(--c) 10%,transparent); white-space:nowrap; }
.empty-r { display:grid; place-items:center; min-height:340px; text-align:center; color:var(--mut); }
.noacc { border:1px dashed var(--line2); border-radius:16px; padding:18px; color:var(--mut); margin-bottom:14px; }

/* ---- calendrier ---- */
.cal-wrap { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start; }
.cal { display:grid; grid-template-columns:repeat(7,1fr); border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--panel); }
.cal .h { font:500 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--mut); padding:12px 10px; border-bottom:1px solid var(--line); }
.cal .c { min-height:104px; padding:8px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); cursor:pointer; transition:.2s; overflow:hidden; } .cal .c:nth-child(7n+14) { border-right:0; } .cal .c:hover { background:rgba(239,233,221,.03); }
.cal .c.other { opacity:.35; } .cal .c .n { font:400 18px var(--serif); color:var(--mut); } .cal .c.today .n { color:#14110a; background:var(--gold); border-radius:50%; width:26px; height:26px; display:inline-grid; place-items:center; font-size:15px; }
.cal .c.pick { background:rgba(214,168,90,.07); }
.chip-ev { font-size:11px; padding:2px 6px; border-radius:6px; margin-top:3px; background:color-mix(in srgb,var(--c) 16%,transparent); border-left:2px solid var(--c); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-title { font-size:52px; text-transform:capitalize; line-height:1; }

/* ---- projets ---- */
.pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px; }
.pc { display:grid; gap:12px; overflow:hidden; } .pc::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--c); }
.pc input[data-f=name] { font:400 28px var(--serif); background:transparent; border-color:transparent; padding:2px 0; }
.pc input[data-f=name]:hover { border-bottom-color:var(--line2); border-radius:0; }
.pc textarea { resize:vertical; min-height:70px; font-size:14px; }

/* ---- palette ---- */
#palette { position:fixed; inset:0; z-index:200; background:rgba(5,5,6,.65); backdrop-filter:blur(10px); display:grid; justify-items:center; align-content:start; padding-top:16vh; }
.pal { width:min(600px,92vw); background:var(--panel2); border:1px solid var(--line2); border-radius:20px; overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.6); }
.pal input { width:100%; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:20px 22px; font-size:17px; background:transparent; box-shadow:none !important; }
.pal ul { list-style:none; margin:0; padding:8px; max-height:340px; overflow:auto; }
.pal li { padding:11px 14px; border-radius:12px; cursor:pointer; display:flex; justify-content:space-between; gap:12px; } .pal li small { font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mut); }
.pal li.on { background:rgba(214,168,90,.12); color:var(--gold2); }
#toast { position:fixed; bottom:26px; left:50%; transform:translate(-50%,20px); background:var(--ink); color:#111; padding:11px 18px; border-radius:999px; font-size:13px; font-weight:500; opacity:0; transition:.35s var(--ease); pointer-events:none; z-index:300; max-width:90vw; }
#toast.on { opacity:1; transform:translate(-50%,0); }

/* ---- mobile ---- */
@media (max-width:900px) {
  #app { grid-template-columns:1fr; padding-bottom:78px; }
  .rail { position:fixed; top:auto; bottom:0; left:0; right:0; height:auto; flex-direction:row; justify-content:space-around; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); border-right:0; border-top:1px solid var(--line); z-index:50; background:rgba(10,10,11,.92); }
  .mark, #kbtn { display:none; } .rail nav { flex-direction:row; flex:1; justify-content:space-around; }
  .rail-btn, .rail nav a { width:auto; flex:1; } .rail nav a.on::before { display:none; }
  main { padding-top:28px; }
  .cols, .split, .cal-wrap { grid-template-columns:1fr; }
  .reader, .list { position:static; max-height:none; } .mail-head h1, .cal-title { font-size:40px; }
  .cal .c { min-height:62px; padding:4px; } .chip-ev { font-size:9px; padding:1px 3px; }
}

/* ---- brief, ventes, réponse IA ---- */
.brief { margin-bottom:36px; border-color:rgba(214,168,90,.25); background:linear-gradient(135deg,rgba(214,168,90,.10),var(--panel) 55%); }
.brief .section-t { margin-bottom:6px; }
.brief-t { font-family:var(--serif); font-size:clamp(19px,2vw,23px); line-height:1.45; white-space:pre-line; max-width:900px; }
.sales { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; margin-bottom:40px; }
.sale { text-decoration:none; transition:.3s var(--ease); } .sale:hover { border-color:var(--line2); transform:translateY(-2px); }
.sale b { font:400 24px var(--serif); }
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px; }
.kpis strong { display:block; font:400 28px/1.1 var(--serif); margin-top:6px; color:var(--gold2); }
.reply { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); display:grid; gap:12px; }
.reply textarea { min-height:200px; font-size:14px; line-height:1.6; resize:vertical; }
@media (max-width:900px) { .kpis { grid-template-columns:repeat(2,1fr); } }

/* ---- tri : priorité, action, reclassement ---- */
.prio { font:600 9px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#14110a; background:var(--red); padding:2px 6px; border-radius:5px; }
.prio.p2 { background:transparent; color:var(--gold); border:1px solid rgba(214,168,90,.5); }
.mi .act { font-size:12px; color:var(--gold2); margin-top:5px; }
.ai .todo { font-family:var(--sans); font-size:14px; color:var(--ink); margin-top:8px; }
.recat { margin:-6px 0 18px; gap:8px; } .recat select { padding:6px 10px; font-size:12px; border-radius:9px; }
.btn:disabled { opacity:.55; cursor:wait; }

/* ---- mode vivant ✨ ---- */
.shine { background:linear-gradient(100deg,#f0cf94 0%,#ff9ecf 30%,#b39ddb 55%,#8fa8d8 75%,#f0cf94 100%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 7s linear infinite; padding-right:.06em; }
@keyframes shine { to { background-position:-250% 0; } }
.wave { display:inline-block; transform-origin:70% 70%; animation:wave 2.6s ease-in-out 1s 2; }
@keyframes wave { 0%,60%,100% { transform:rotate(0); } 10%,30% { transform:rotate(14deg); } 20% { transform:rotate(-8deg); } 40% { transform:rotate(-4deg); } 50% { transform:rotate(10deg); } }
.vibe { font-family:var(--serif) !important; font-style:italic; font-size:22px !important; color:var(--gold2) !important; margin-bottom:18px !important; }
.stats { display:flex; gap:10px; flex-wrap:wrap; }
.stat { all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:10px 16px 10px 12px; border-radius:16px; border:1px solid color-mix(in srgb,var(--c) 40%,transparent); background:color-mix(in srgb,var(--c) 10%,var(--panel)); transition:.3s var(--ease); font-size:14px; color:var(--mut); }
.stat:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 12px 30px -12px var(--c); }
.stat .se { font-size:22px; } .stat b { font:400 30px/1 var(--serif); color:var(--ink); }
.tile .pe { font-size:30px; line-height:1; margin-bottom:-18px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4)); transition:.4s var(--ease); }
.tile:hover .pe { transform:scale(1.25) rotate(-8deg); }
.tile:hover { transform:translateY(-5px) rotate(-.4deg); box-shadow:0 22px 50px -24px var(--c); }
.card { transition:border-color .3s, box-shadow .3s; } .card:hover { box-shadow:0 18px 50px -30px rgba(214,168,90,.35); }
.brief-t { white-space:pre-line; }
.pemo { width:52px; text-align:center; font-size:22px; padding:6px; flex:none; }
.task.done span { transition:.4s; }
.confetto { position:fixed; width:9px; height:14px; border-radius:2px; z-index:400; pointer-events:none; animation:pop 1.4s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes pop { to { transform:translate(var(--dx),calc(var(--dy) + 420px)) rotate(var(--r)); opacity:0; } }
.tab { transition:.25s var(--ease); } .tab:hover { transform:translateY(-2px); }
.empty { font-size:22px; }