:root{--bg:#f5f6fa;--surface:#fff;--ink:#1b1f2a;--ink2:#4a5060;--mut:#8b91a1;--line:#eceef4;--hover:#f1f2f7;
 --acc:#5b5bd6;--acc2:#7c6cf0;--accs:#ececfd;--acci:#3d3db5;--red:#e5484d;--reds:#fdecec;--green:#2f9e6a;--greens:#e6f6ee;--amber:#d98e04;--ambers:#fdf3dc;--blue:#0090ff;--blues:#e6f4ff;
 --r:16px;--sh:0 1px 2px rgba(20,24,40,.04),0 4px 16px rgba(20,24,40,.06);--sh2:0 10px 40px rgba(20,24,40,.16);
 --top:env(safe-area-inset-top);--bot:env(safe-area-inset-bottom);--sl:env(safe-area-inset-left);--sr:env(safe-area-inset-right);--side:280px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:15px/1.45 Inter,-apple-system,system-ui,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none;touch-action:manipulation}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{font-size:16px} /* évite le zoom automatique sur iPhone */
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{opacity:.5;pointer-events:none}
ion-icon{font-size:20px;flex-shrink:0;pointer-events:none}
a{color:var(--acc)}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);outline:none;transition:border .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
select{background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238b91a1' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:36px}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 4px var(--accs)}
label.fl{display:block;font-size:13px;font-weight:600;color:var(--ink2);margin:0 0 6px 2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;min-height:44px;border-radius:999px;background:var(--acc);color:#fff;font-weight:600;transition:transform .1s,filter .15s;white-space:nowrap}
.btn:active{transform:scale(.97)}.btn:hover{filter:brightness(1.06)}
.btn.soft{background:var(--accs);color:var(--acci)}.btn.ghost{background:var(--surface);color:var(--ink2);border:1px solid var(--line)}.btn.ghost:hover{background:var(--hover)}
.btn.danger{background:var(--reds);color:var(--red)}.btn.block{width:100%}.btn.sm{min-height:36px;padding:7px 14px;font-size:14px}
.ib{width:42px;height:42px;border-radius:50%;display:inline-grid;place-items:center;color:var(--ink2);transition:background .15s;flex-shrink:0}
.ib:hover,.ib:active{background:var(--hover)}.ib ion-icon{font-size:22px}
.spin{width:22px;height:22px;border:2.5px solid var(--accs);border-top-color:var(--acc);border-radius:50%;animation:sp .7s linear infinite;margin:40px auto}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- Connexion ---------- */
#login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 10% -10%,#e6e4ff 0,transparent 60%),radial-gradient(900px 500px at 110% 110%,#dff3ff 0,transparent 55%),var(--bg)}
.lcard{width:100%;max-width:380px;background:var(--surface);border-radius:24px;padding:32px 26px;box-shadow:var(--sh2);display:grid;gap:14px;text-align:center}
.logo{width:64px;height:64px;border-radius:20px;margin:0 auto 4px;display:grid;place-items:center;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;box-shadow:0 8px 24px rgba(91,91,214,.35)}
.logo ion-icon{font-size:32px}
.lcard h1{margin:0;font-size:24px;letter-spacing:-.02em}.lcard p{margin:0;color:var(--mut)}
#err{color:var(--red);min-height:1.3em;font-size:14px}
.pwrap{position:relative}.pwrap input{padding-left:44px}.pwrap ion-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--mut)}

/* ---------- Menu latéral ---------- */
#side{position:fixed;top:0;bottom:0;left:0;width:min(var(--side),86vw);background:var(--surface);z-index:30;display:flex;flex-direction:column;padding:calc(var(--top) + 14px) 12px calc(var(--bot) + 12px) calc(var(--sl) + 12px);transform:translateX(-102%);transition:transform .28s cubic-bezier(.3,.7,.2,1);overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--sh2)}
#side.open{transform:none}
#scrim{position:fixed;inset:0;background:rgba(20,22,35,.35);z-index:29;opacity:0;pointer-events:none;transition:opacity .25s}
#scrim.on{opacity:1;pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 12px;font-weight:700;font-size:18px;letter-spacing:-.01em}
.brand .logo{width:36px;height:36px;border-radius:11px;margin:0;box-shadow:none}.brand .logo ion-icon{font-size:19px}
.acct{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:14px;border:1px solid var(--line);background:var(--surface);margin:0 0 12px;text-align:left}
.acct:hover{background:var(--hover)}.acct>div:not(.av){flex:1;min-width:0}.acct b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct small{display:block;font-size:12px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.newbtn{display:flex;align-items:center;gap:12px;padding:14px 20px;border-radius:18px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;font-weight:600;margin:0 2px 14px;box-shadow:0 6px 18px rgba(91,91,214,.3)}
.nv{display:flex;align-items:center;gap:14px;width:100%;padding:10px 14px;min-height:42px;border-radius:999px;color:var(--ink2);font-weight:500;text-align:left;transition:background .12s}
.nv:hover{background:var(--hover)}.nv.on{background:var(--accs);color:var(--acci);font-weight:600}
.nv span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nv em{font-style:normal;font-size:12px;font-weight:600;color:var(--ink2)}.nv.on em{color:var(--acci)}
.dot{width:12px;height:12px;border-radius:4px;flex-shrink:0;display:inline-block}
.nv .dot{margin:0 4px}
.sh{display:flex;align-items:center;justify-content:space-between;padding:16px 14px 6px;font-size:12px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.sh .ib{width:30px;height:30px}.sh .ib ion-icon{font-size:18px}

/* ---------- Structure principale ---------- */
main{min-height:100vh;padding-bottom:calc(var(--bot) + 96px);padding-left:var(--sl);padding-right:var(--sr)}
.topwrap{position:sticky;top:0;z-index:10;background:var(--bg);padding:calc(var(--top) + 10px) 12px 8px}
.search{display:flex;align-items:center;gap:4px;background:var(--surface);border-radius:999px;padding:4px 6px;box-shadow:var(--sh);height:52px}
.search input{border:0;box-shadow:none!important;padding:8px 4px;background:transparent}
.av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;font-size:15px;flex-shrink:0;user-select:none}
.av.sm{width:34px;height:34px;font-size:13px}.av.xs{width:26px;height:26px;font-size:11px}
.av.chk{background:var(--acc)}.av.chk ion-icon{font-size:22px}
#selbar{display:flex;align-items:center;gap:0;background:var(--acc);color:#fff;border-radius:999px;padding:4px 4px;height:52px;box-shadow:var(--sh)}
#selbar .ib{color:#fff;width:40px}#selbar .ib:hover,#selbar .ib:active{background:rgba(255,255,255,.16)}#selbar b{flex:1;padding-left:2px;white-space:nowrap}
.selinfo{display:flex;align-items:center;gap:10px;margin:0 8px 8px;padding:10px 14px;border-radius:14px;background:var(--accs);color:var(--acci);font-size:14px}
.selinfo span{flex:1}
.vhead{display:flex;align-items:center;gap:6px;padding:10px 6px 4px 8px}
.vhead h1{font-size:22px;margin:0;letter-spacing:-.02em;flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.vhead h1 .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vhead h1 .dot{width:14px;height:14px;border-radius:5px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:8px 8px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--ink2);white-space:nowrap;flex-shrink:0}
.chip ion-icon{font-size:16px}.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}.chip em{font-style:normal;opacity:.6;font-size:12px}
.banner{display:flex;gap:12px;align-items:center;margin:4px 8px 10px;padding:12px 14px;border-radius:var(--r);background:linear-gradient(135deg,var(--accs),#f3ecff);color:var(--acci)}
.banner p{margin:0;flex:1;font-size:14px}.banner ion-icon{font-size:24px}
.view{padding:0 12px}
#ptr{height:0;overflow:hidden;display:grid;place-items:center;transition:height .2s}
#ptr .spin{margin:0;width:24px;height:24px}

/* ---------- Liste des mails ---------- */
.list{background:var(--surface);border-radius:20px;box-shadow:var(--sh);overflow:hidden}
.mrow{position:relative;overflow:hidden;border-bottom:1px solid var(--line);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.mrow:last-child{border-bottom:0}
.mbg{position:absolute;inset:0;display:none}
.mrow.sr .mbg,.mrow.sl .mbg{display:block}
.mbg>div{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 24px;color:#fff;font-weight:600;font-size:14px;opacity:.75;transition:opacity .15s}
.mbg .bl{justify-content:flex-start}.mbg .br{justify-content:flex-end}
.mrow.sr .br,.mrow.sl .bl{display:none}
.mrow.armed .mbg>div{opacity:1}.mrow.armed .mbg ion-icon{transform:scale(1.2)}
.mbg ion-icon{font-size:24px;transition:transform .15s}
.min{position:relative;display:flex;gap:12px;padding:12px 14px;background:var(--surface);transition:background .12s;cursor:pointer;will-change:transform}
@media(hover:hover){.min:hover{background:#fafbfd}}
.mrow.sel .min{background:var(--accs)}
.mrow.cur .min{background:#f4f4fe}
.mc{flex:1;min-width:0}
.l1{display:flex;align-items:baseline;gap:6px}
.nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2);font-weight:500}
.nm ion-icon{font-size:13px;vertical-align:-1px;color:var(--mut);margin-right:3px}
.dt{font-size:12px;color:var(--mut);white-space:nowrap}
.l2{display:flex;align-items:center;gap:8px;margin-top:1px}
.sj{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mut);font-size:14px}
.mrow.u .nm,.mrow.u .sj{color:var(--ink);font-weight:650}.mrow.u .dt{color:var(--acc);font-weight:600}
.mrow.u .min::before{content:"";position:absolute;left:4px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--acc)}
.star{color:#c4c8d4;margin:-8px -8px -8px 0;width:36px;height:36px;display:grid;place-items:center;border-radius:50%}
.star.on{color:#f5b301}.star ion-icon{font-size:19px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}.tags:empty{display:none}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:6px;line-height:1.5}
.tag button{display:inline-grid;place-items:center;margin-right:-4px;opacity:.7;padding:2px}.tag button ion-icon{font-size:13px}
.empty{text-align:center;padding:56px 20px;color:var(--mut)}
.empty ion-icon{font-size:52px;color:#d3d6e0;margin-bottom:8px}.empty b{display:block;color:var(--ink2);font-size:16px;margin-bottom:4px}
.more{display:flex;margin:14px auto}

#fab{position:fixed;right:calc(var(--sr) + 18px);bottom:calc(var(--bot) + 18px);z-index:15;display:flex;align-items:center;gap:10px;padding:16px 22px;border-radius:20px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;font-weight:600;box-shadow:0 10px 28px rgba(91,91,214,.4);transition:padding .2s,transform .15s}
#fab:active{transform:scale(.95)}#fab ion-icon{font-size:22px}
#fab.mini{padding:16px}#fab.mini span{display:none}

/* ---------- Panneaux ---------- */
.panel{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;flex-direction:column;animation:slin .25s cubic-bezier(.3,.7,.2,1);padding-left:var(--sl);padding-right:var(--sr)}
@keyframes slin{from{transform:translateX(30px);opacity:0}}
.pbar{display:flex;align-items:center;gap:0;padding:calc(var(--top) + 6px) 6px 6px;background:var(--bg);flex-shrink:0}
.pbar .sp{flex:1}
.pbody{flex:1;overflow-y:auto;padding:0 12px calc(var(--bot) + 24px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.rcard{background:var(--surface);border-radius:20px;box-shadow:var(--sh);padding:18px 16px;margin-bottom:12px}
.rsubj{display:flex;gap:10px;align-items:flex-start;padding:6px 6px 12px}
.rsubj h2{flex:1;margin:0;font-size:21px;line-height:1.3;letter-spacing:-.015em;font-weight:650;word-break:break-word}
.rsubj .star{margin:-4px -4px 0 0}
.rtags{display:flex;gap:6px;flex-wrap:wrap;padding:0 6px 12px}.rtags:empty{display:none}
.who{display:flex;gap:12px;align-items:center}
.who .wi{flex:1;min-width:0}.who b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who small{display:block;color:var(--mut);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.det{margin-top:12px;padding:12px;border-radius:12px;background:var(--bg);font-size:13px;color:var(--ink2);display:grid;grid-template-columns:auto 1fr;gap:4px 12px;word-break:break-word}
.det span{color:var(--mut)}
.note{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:14px;margin-bottom:12px;font-size:14px;background:var(--blues);color:#005fb0}
.note span{flex:1}.note.amber{background:var(--ambers);color:#7a5200}
#rf{width:100%;border:0;display:block;min-height:80px;margin-top:14px;background:#fff}
.atts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:14px}
.att{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);background:var(--surface);min-width:0;text-align:left;width:100%}
.att:hover{background:var(--hover)}.att:active{transform:scale(.99)}
.ai{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--accs);color:var(--acc);flex-shrink:0}
.ai.pdf{background:var(--reds);color:var(--red)}.ai.img{background:var(--greens);color:var(--green)}.ai.doc{background:var(--blues);color:var(--blue)}.ai.xls{background:var(--greens);color:#1e7a4f}.ai.zip{background:var(--ambers);color:var(--amber)}
.att div{min-width:0;flex:1}.att b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.att small{color:var(--mut);font-size:12px}
.att .x{color:var(--mut)}
.racts{display:flex;gap:8px;padding:4px 0 10px}
.racts .btn{flex:1;min-width:0;padding:11px 10px}
.racts .btn span{overflow:hidden;text-overflow:ellipsis}
.rfw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px}.rfw #rf{margin-top:0}

/* Visionneuse de pièces jointes */
#viewer{background:#14161d;color:#fff;z-index:35}
#viewer .pbar{background:#14161d}#viewer .ib{color:#fff}#viewer .ib:hover,#viewer .ib:active{background:rgba(255,255,255,.1)}
#viewer .vt{flex:1;min-width:0;padding:0 6px}#viewer .vt b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#viewer .vt small{color:#9aa0ad;font-size:12px}
#vbody{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:8px 8px calc(var(--bot) + 16px);gap:10px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#vbody img{max-width:100%;height:auto;margin:auto;border-radius:6px;transition:max-width .2s}
#vbody img.zoom{max-width:none;width:220%}
#vbody canvas{width:100%;max-width:900px;background:#fff;border-radius:4px;box-shadow:0 4px 18px rgba(0,0,0,.4)}
#vbody pre{width:100%;max-width:900px;background:#fff;color:#1b1f2a;border-radius:10px;padding:16px;white-space:pre-wrap;word-break:break-word;font-size:13px;margin:0}
#vbody iframe{width:100%;max-width:900px;flex:1;min-height:70vh;border:0;background:#fff;border-radius:6px}
#vbody video,#vbody audio{max-width:100%;margin:auto}
.vnone{margin:auto;text-align:center;color:#c9cdd6;display:grid;gap:14px;justify-items:center;padding:20px}.vnone .ai{width:72px;height:72px;border-radius:20px}.vnone .ai ion-icon{font-size:34px}
.vpage{color:#9aa0ad;font-size:12px}

/* Rédaction */
#comp{background:var(--surface)}
#comp .pbar{border-bottom:1px solid var(--line);background:var(--surface)}
#comp .ttl{font-weight:600;padding-left:4px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf{position:relative;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--line);min-height:50px}
.cf>label{color:var(--mut);font-size:14px;width:44px;flex-shrink:0}
.cf input,.cf select{border:0;box-shadow:none!important;padding:12px 0;border-radius:0;background-color:transparent}
.cf .lnk{color:var(--mut);font-size:13px;font-weight:500;padding:8px}
.sugg{position:absolute;left:8px;right:8px;top:100%;z-index:5;background:var(--surface);border-radius:14px;box-shadow:var(--sh2);max-height:260px;overflow-y:auto;padding:6px}
.sugg button{display:flex;gap:10px;align-items:center;width:100%;padding:8px;border-radius:10px;text-align:left}
.sugg button:hover,.sugg button.on{background:var(--hover)}.sugg div{min-width:0}.sugg b,.sugg small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sugg small{color:var(--mut);font-size:12px}
.fmt{display:flex;gap:2px;padding:6px 10px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;flex-shrink:0}.fmt::-webkit-scrollbar{display:none}
.fmt button{min-width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--ink2);font-weight:700;font-size:15px;flex-shrink:0}
.fmt button:hover,.fmt button:active{background:var(--hover)}.fmt .sep{width:1px;background:var(--line);margin:6px 4px;flex-shrink:0}
#ed{flex:1;min-height:200px;padding:16px;outline:none;color:#1b1f2a;font-size:16px;line-height:1.55;word-wrap:break-word;-webkit-user-select:text;user-select:text}
#ed blockquote{margin:0 0 0 .8ex;border-left:3px solid var(--line);padding-left:1.2ex;color:var(--ink2)}
#ed img{max-width:100%}
.cfoot{padding:8px 16px calc(var(--bot) + 16px);display:grid;gap:10px}
.cfoot .atts{margin:0}
#warn{display:flex;gap:10px;align-items:center;background:var(--ambers);color:#7a5200;padding:10px 14px;border-radius:12px;font-size:14px;font-weight:500}
.sw{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink2);cursor:pointer;min-height:36px}
.sw input{display:none}.sw i{width:44px;height:26px;border-radius:999px;background:#d9dce5;position:relative;transition:background .2s;flex-shrink:0}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.sw input:checked+i{background:var(--acc)}.sw input:checked+i::after{transform:translateX(18px)}
.fwdnote{font-size:13px;color:var(--mut);display:flex;gap:6px;align-items:center}
.sendg{display:flex;align-items:center;margin-left:4px;border-radius:999px;background:var(--acc);color:#fff}
.sendg .btn{border-radius:999px 0 0 999px;padding:10px 14px 10px 16px;min-height:40px}
.sendg .ib{color:#fff;width:38px;height:40px;border-radius:0 999px 999px 0;border-left:1px solid rgba(255,255,255,.25)}.sendg .ib:hover{background:rgba(255,255,255,.12)}.sendg .ib ion-icon{font-size:18px}

/* ---------- Feuilles & dialogues ---------- */
#sheetbg,#sheetbg-x{position:fixed;inset:0;z-index:40;background:rgba(20,22,35,.38);display:flex;align-items:flex-end;justify-content:center;animation:fd .2s}
@keyframes fd{from{opacity:0}}
#sheet,#sheet-x{width:100%;max-width:520px;max-height:88vh;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border-radius:24px 24px 0 0;padding:10px 18px calc(var(--bot) + 18px);animation:up .28s cubic-bezier(.3,.7,.2,1);transition:transform .2s}
@keyframes up{from{transform:translateY(40px);opacity:.5}}
#sheet .grab,#sheet-x .grab{width:40px;height:5px;border-radius:3px;background:#dde0e8;margin:0 auto 12px}
#sheet h3{margin:4px 0 6px;font-size:18px;letter-spacing:-.01em}#sheet p.t{margin:0 0 16px;color:var(--ink2)}
.opt{display:flex;align-items:center;gap:14px;width:100%;padding:12px 8px;min-height:48px;border-radius:12px;text-align:left;font-weight:500}
.opt:hover,.opt:active{background:var(--hover)}.opt .dot{width:14px;height:14px;border-radius:5px}.opt>span:not(.ai):not(.tag){flex:1;min-width:0}.opt>.ai,.opt>.av{flex:0 0 auto}.opt>.tag{flex:0 0 auto}.opt>.tag+.ck{margin-left:2px}.opt small{display:block;color:var(--mut);font-weight:400;font-size:13px}
.opt.red{color:var(--red)}
.ck{width:22px;height:22px;border-radius:7px;border:2px solid #cfd3de;display:grid;place-items:center;color:#fff;flex-shrink:0}
.ck.on{background:var(--acc);border-color:var(--acc)}.ck ion-icon{font-size:15px}
.colors{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0}
.colors button{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:#fff}
.colors button.on{box-shadow:0 0 0 3px #fff,0 0 0 5px currentColor}
.dbtns{display:grid;gap:8px;margin-top:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.toast{position:fixed;left:50%;bottom:calc(var(--bot) + 96px);transform:translateX(-50%);background:#1b1f2a;color:#fff;padding:10px 10px 10px 16px;border-radius:14px;z-index:60;font-size:14px;font-weight:500;box-shadow:var(--sh2);display:flex;gap:10px;align-items:center;animation:up .25s;width:max-content;max-width:calc(100% - 32px);overflow:hidden}
.toast span{flex:1}.toast button{color:#a8a8ff;font-weight:700;padding:6px 10px;border-radius:8px}.toast button:hover{background:rgba(255,255,255,.08)}
.toast i{position:absolute;left:0;bottom:0;height:3px;background:#a8a8ff;animation:bar linear forwards}
@keyframes bar{from{width:100%}to{width:0}}
.toast.nob{padding-right:16px}

/* ---------- Cartes ---------- */
.card{background:var(--surface);border-radius:20px;box-shadow:var(--sh);padding:18px;margin-bottom:12px}
.card h3{margin:0 0 4px;font-size:16px;display:flex;align-items:center;gap:10px}.card h3 ion-icon{color:var(--acc)}
.card p.s{margin:0 0 14px;color:var(--mut);font-size:14px}
.f{display:grid;gap:10px}
.drow{display:flex;gap:12px;padding:14px;border-bottom:1px solid var(--line);cursor:pointer;background:var(--surface)}.drow:last-child{border:0}
@media(hover:hover){.drow:hover{background:#fafbfd}}
.drow .ai{width:40px;height:40px;border-radius:12px;background:var(--reds);color:var(--red)}
.drow .ai.sch{background:var(--blues);color:var(--blue)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.tile{background:var(--surface);border-radius:18px;box-shadow:var(--sh);padding:14px 16px;min-width:0}
.tile ion-icon{color:var(--acc);font-size:20px;background:var(--accs);padding:8px;border-radius:12px}
.tile b{display:block;font-size:26px;letter-spacing:-.02em;margin-top:8px}.tile span{color:var(--mut);font-size:13px}
.tile.g ion-icon{color:var(--green);background:var(--greens)}.tile.r ion-icon{color:var(--red);background:var(--reds)}.tile.a ion-icon{color:var(--amber);background:var(--ambers)}.tile.b ion-icon{color:var(--blue);background:var(--blues)}
.chart{display:flex;align-items:flex-end;gap:3px;height:120px;margin:10px 0 6px}
.chart i{flex:1;background:linear-gradient(180deg,var(--acc2),var(--acc));border-radius:4px 4px 2px 2px;min-height:3px;opacity:.9;position:relative}
.chart.lbl i::after{content:attr(data-l);position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--mut);font-style:normal;white-space:nowrap}
.chart.lbl{margin-bottom:24px}
.bw{display:grid;grid-template-columns:1fr auto;gap:4px 8px;margin-bottom:12px;font-size:14px}.bw .tr{grid-column:1/3;height:8px;border-radius:4px;background:var(--hover)}.bw .tr i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.funnel{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--hover);margin:12px 0 10px}.funnel i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--ink2)}.legend span{display:flex;align-items:center;gap:6px}.legend .dot{width:10px;height:10px;border-radius:3px}
.job{padding:14px;border-bottom:1px solid var(--line);cursor:pointer}.job:last-child{border:0}
@media(hover:hover){.job:hover{background:#fafbfd}}
.job .jt{display:flex;gap:12px;align-items:center}
.job .ai{width:42px;height:42px;border-radius:12px;font-weight:700}
.job .jt>div{flex:1;min-width:0}.job b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.job small{color:var(--mut);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply{margin:10px 0 0 54px;padding:10px 12px;border-radius:12px;background:var(--bg);font-size:13px;display:grid;gap:2px}
.reply b{font-size:13px}.reply span{color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reply .rh{display:flex;align-items:center;gap:6px;color:var(--ink2);font-weight:600}.reply .rh ion-icon{font-size:15px}
.pill{width:auto;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:600;border:0;white-space:nowrap;display:inline-flex}
.st-envoyee{background:var(--hover);color:var(--ink2)}.st-accuse{background:var(--ambers);color:var(--amber)}.st-positive{background:var(--greens);color:var(--green)}.st-negative{background:var(--reds);color:var(--red)}
.status{display:flex;gap:10px;align-items:center;padding:12px;border-radius:12px;font-size:14px;margin-bottom:12px}
.status.ok{background:var(--greens);color:#1e6e48}.status.ko{background:var(--ambers);color:#7a5200}
.status code{font-size:12px;background:rgba(0,0,0,.06);padding:2px 6px;border-radius:6px;word-break:break-all}
.lrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);min-height:52px}.lrow:last-child{border:0}.lrow>span{flex:1;min-width:0}.lrow small{color:var(--mut);display:block}
.kbd{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}.kbd kbd{font:600 12px Inter,monospace;background:var(--hover);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:2px 7px;justify-self:start}
#sp{width:100%;height:120px;border:1px solid var(--line);border-radius:12px;background:#fff}
.dsk{display:none}

/* ---------- Mobile : barre de réponse fixe dans la lecture ---------- */
@media(max-width:959px){
 #reader .racts{position:fixed;left:0;right:0;bottom:0;z-index:2;margin:0;padding:10px 12px calc(var(--bot) + 10px);background:rgba(245,246,250,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
 #reader .pbody{padding-bottom:calc(var(--bot) + 96px)}
 #reader .pbar .ib{width:40px}
 #reader .racts .btn{flex-direction:column;gap:2px;padding:6px 4px;min-height:52px;border-radius:14px;font-size:12px;font-weight:600}
 #reader .racts .btn ion-icon{font-size:20px}
 .deskonly{display:none!important}
 #comp{inset:0 0 auto 0;height:100%}
}
/* ---------- Grand écran ---------- */
@media(min-width:960px){
 #side{transform:none;box-shadow:none;background:var(--bg);padding-top:16px}
 #scrim,#menuBtn,#fab{display:none!important}
 .dsk{display:inline-block}
 main{margin-left:var(--side);padding-bottom:40px}
 .topwrap{padding:14px 24px 8px 12px}.view{padding:0 24px 0 12px}
 .search{max-width:760px;box-shadow:none;background:#e9ebf3}.search:focus-within{background:var(--surface);box-shadow:var(--sh)}
 #reader{left:var(--side);background:var(--bg)}#reader .pbody{padding:0 24px 24px 12px}#reader .pbar{padding:14px 24px 6px 12px}
 .rcard{padding:24px 28px}.rsubj h2{font-size:24px}
 .racts .btn{flex:0 1 auto;padding:11px 20px}
 #comp{inset:auto 24px 0 auto;width:620px;height:min(740px,92vh);border-radius:18px 18px 0 0;box-shadow:var(--sh2);overflow:hidden;animation:up .25s}
 #comp .pbar{padding-top:8px;background:#f3f4f9}
 #sheetbg,#sheetbg-x{align-items:center}#sheet,#sheet-x{border-radius:24px}#sheet .grab,#sheet-x .grab{display:none}
 .toast{left:calc(50% + var(--side)/2);bottom:28px}
 .tiles{grid-template-columns:repeat(4,1fr)}
 #viewer{left:0}
}

/* =====================================================================
   Thème sombre (activé par data-theme="dark" sur <html>, voir app.js)
   ===================================================================== */
:root[data-theme=dark]{color-scheme:dark;--bg:#0e1015;--surface:#171a22;--ink:#e9ebf1;--ink2:#b9bdca;--mut:#7f8698;--line:#252935;--hover:#1f232d;
 --acc:#7b7bf0;--acc2:#9a8bff;--accs:#24244a;--acci:#c3c3ff;--red:#ff6b70;--reds:#3a1c20;--green:#3fc28a;--greens:#14301f;--amber:#f0b33a;--ambers:#33280e;--blue:#4cb0ff;--blues:#0f2a40;
 --sh:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);--sh2:0 10px 40px rgba(0,0,0,.55)}
[data-theme=dark] #login{background:radial-gradient(1200px 600px at 10% -10%,#26245a 0,transparent 60%),radial-gradient(900px 500px at 110% 110%,#12304a 0,transparent 55%),var(--bg)}
[data-theme=dark] .banner{background:linear-gradient(135deg,#25244d,#2b2045)}
[data-theme=dark] .min:hover,[data-theme=dark] .drow:hover,[data-theme=dark] .job:hover{background:#1b1e27}
[data-theme=dark] .mrow.cur .min{background:#1e2030}
[data-theme=dark] .star{color:#4b5163}[data-theme=dark] .star.on{color:#f5b301}
[data-theme=dark] .empty ion-icon{color:#3a3f4d}
[data-theme=dark] .chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
[data-theme=dark] .note{color:#8ccbff}[data-theme=dark] .note.amber,[data-theme=dark] #warn,[data-theme=dark] .status.ko{color:#f3cc7a}
[data-theme=dark] .status.ok{color:#7fe0b0}[data-theme=dark] .status code{background:rgba(255,255,255,.08)}
[data-theme=dark] .ai.xls{color:#5fd39c}
[data-theme=dark] .sw i{background:#3a3f4d}[data-theme=dark] .ck{border-color:#4a5061}[data-theme=dark] #sheet .grab,#sheet-x .grab{background:#3a3f4d}
[data-theme=dark] #ed{color:var(--ink)}[data-theme=dark] #ed blockquote{color:var(--ink2)}
[data-theme=dark] .toast{background:#2a2e3b}
[data-theme=dark] .rcard #rf,[data-theme=dark] .rfw{border-radius:12px}
[data-theme=dark] .rfw{background:#fff;padding:12px} /* le contenu des mails reste sur fond blanc, comme dans Gmail */
[data-theme=dark] .reply[style*="ambers"] span{color:#f3cc7a!important}
[data-theme=dark] .tag{filter:brightness(1.25)}
@media(max-width:959px){[data-theme=dark] #reader .racts{background:rgba(14,16,21,.9)}}
@media(min-width:960px){[data-theme=dark] .search{background:#1b1e27}[data-theme=dark] #comp .pbar{background:#1d2029}}
.acctag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--mut);margin-right:2px}
.acctag i{width:7px;height:7px;border-radius:50%;display:inline-block}
.seg{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- Animations ---------- */
.rip{position:absolute;border-radius:50%;background:currentColor;opacity:.16;pointer-events:none;transform:scale(0);animation:rip .55s ease-out forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}
.btn,.nv,.chip,.opt,.ib,.newbtn,.att,.acct{position:relative;overflow:hidden}#fab{overflow:hidden}
.badge-bump{animation:bump .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{50%{transform:scale(1.35)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}