:root{--bg:#0A0D12;--surface:#10151D;--line:#1D2531;--txt:#E6EBF2;--dim:#8B96A5;--faint:#636E7D;--accent:#5B9DF9}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:11px 16px;background:var(--accent);color:#07101D;font-weight:600;transition:filter .15s}
button:hover{filter:brightness(1.08)}
button.ghost{background:none;border:1px solid var(--line);color:var(--dim);font-weight:500;padding:7px 13px;font-size:13px}
button.ghost:hover{color:var(--txt);border-color:#2B3547}
button.link{background:none;border:0;color:var(--faint);font-size:13px;text-decoration:underline;padding:6px}
input{font:inherit;width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--line);background:#0D131B;color:var(--txt)}
input:focus{outline:none;border-color:var(--accent)}
label{display:block;font-size:12.5px;color:var(--dim);margin:0 0 6px;font-weight:500}
.gate{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.gate-in{width:100%;max-width:370px}
.logo{display:flex;align-items:center;gap:11px}
.logo i{width:34px;height:34px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex:0 0 34px}
.logo b{font-size:19px;font-weight:700;letter-spacing:-.4px;display:block}
.logo span.s{display:block;font-size:11px;color:var(--faint);letter-spacing:.5px;text-transform:uppercase;font-weight:500}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px}
.panel h2{margin:0 0 4px;font-size:17px;font-weight:650}
.panel p.lead{margin:0 0 20px;font-size:13.5px;color:var(--dim)}
.alert{padding:11px 13px;border-radius:10px;font-size:13.5px;background:#241318;border:1px solid #432430;color:#DE94A1;margin-bottom:16px}
.code-in{text-align:center;letter-spacing:.45em;font-size:21px;font-family:ui-monospace,monospace;padding:13px;text-indent:.45em}
.top{display:flex;align-items:center;gap:16px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--surface)}
.who{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--dim)}
.shell{display:flex;height:calc(100% - 59px);align-items:stretch}
nav{flex:0 0 220px;padding:16px 12px;border-right:1px solid var(--line);overflow-y:auto}
nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-size:14px;color:var(--dim);margin-bottom:2px;transition:background .12s,color .12s}
nav a:hover{background:#121922;color:var(--txt)}
nav a.on{background:#18212D;color:var(--txt);font-weight:600}
.col-list{flex:0 0 380px;border-right:1px solid var(--line);overflow-y:auto;transition:opacity .12s}
.col-read{flex:1;min-width:0;overflow-y:auto;display:flex;flex-direction:column;transition:opacity .12s}
.busy{opacity:.45;pointer-events:none}
ul.list{list-style:none;margin:0;padding:0}
ul.list li.row{position:relative;display:flex;align-items:flex-start;gap:6px;padding:11px 10px 11px 8px;border-bottom:1px solid #131A23;transition:background .12s,opacity .15s}
ul.list li.row:hover{background:#0E141C}
.r-body{flex:1;min-width:0;display:block}
.r-top{display:flex;align-items:baseline;gap:10px;margin-bottom:2px}
.r-from{flex:1;min-width:0;font-size:13.5px;color:#9AA5B3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unread .r-from{color:var(--txt);font-weight:650}
.r-when{flex:0 0 auto;font-size:11.5px;color:var(--faint);white-space:nowrap;padding-right:22px}
.unread .r-when{color:#AAB5C2;font-weight:600}
.r-subj{display:block;font-size:13.5px;color:#9AA5B3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unread .r-subj{color:var(--txt);font-weight:600}
.r-snip{padding-right:30px;display:block;font-size:12.5px;color:#64707F;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;min-height:1.2em}
.pick{margin-top:2px}
.star{position:absolute;right:8px;bottom:8px;background:none;border:0;padding:4px;border-radius:7px;color:#39434F;display:flex;cursor:pointer}
.star svg{fill:currentColor}
.star:hover{color:#6B778A;background:#141C26}
.starred .star{color:#E9B949}
.r-acts{position:absolute;right:6px;top:6px;display:none;gap:1px}
.r-acts button{background:none;border:0;padding:6px;border-radius:7px;color:var(--faint);display:flex;cursor:pointer}
.r-acts button:hover{color:var(--txt);background:#1A2430}
@media(hover:hover){
  ul.list li.row:hover .r-when{visibility:hidden}
  ul.list li.row:hover .r-acts{display:flex}
}
.pager{display:flex;gap:10px;align-items:center;padding:16px;font-size:12.5px;color:var(--faint)}
.pager a{padding:7px 12px;border:1px solid var(--line);border-radius:9px;color:var(--dim)}
.empty{padding:56px 20px;color:var(--faint);text-align:center;font-size:14px}
.rd-head{padding:22px 26px;border-bottom:1px solid var(--line)}
.rd-head h1{margin:0 0 14px;font-size:21px;font-weight:650;letter-spacing:-.3px;line-height:1.3}
.rd-id{display:flex;gap:12px;align-items:center}
.rd-id .av{width:40px;height:40px;flex:0 0 40px;border-radius:12px;font-size:13px}

.rd-from{font-size:14px;font-weight:600;line-height:1.4}
.rd-mail{font-weight:400;color:var(--faint);font-size:13px}
.rd-det{margin-top:1px}
.rd-det summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--faint);padding:2px 0;transition:color .12s}
.rd-det summary::-webkit-details-marker{display:none}
.rd-det summary::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform .15s ease}
.rd-det[open] summary::after{transform:rotate(180deg)}
.rd-det summary:hover{color:var(--dim)}
.rcpt{margin:12px 0 2px;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:12.5px;padding:12px 14px;background:#0D131B;border:1px solid var(--line);border-radius:10px}
.rcpt dt{color:var(--faint);font-weight:500;white-space:nowrap}
.rcpt dd{margin:0;color:#9AA5B3;word-break:break-word}
.rd-when{margin-left:auto;font-size:12.5px;color:var(--faint);white-space:nowrap}

.rd-body{flex:1;min-height:0}
.rd-body iframe{width:100%;height:100%;min-height:440px;border:0;background:var(--bg)}
.rd-text{padding:24px 26px;white-space:pre-wrap;word-wrap:break-word;font-size:14.5px;line-height:1.7;color:#C6D0DC;margin:0}
.back{display:none}
@media(max-width:1100px){.col-list{flex-basis:320px}}
@media(max-width:860px){
  nav{flex:0 0 auto;border-right:0;border-bottom:1px solid var(--line);display:flex;gap:6px;overflow-x:auto;padding:10px}
  nav a{margin:0;white-space:nowrap}
  .shell{flex-direction:column;height:auto}
  .col-list,.col-read{flex:1 1 auto;border-right:0;overflow:visible}
  body.reading .col-list{display:none}
  body:not(.reading) .col-read{display:none}
  .back{display:inline-flex;align-items:center;gap:7px;padding:12px 18px;font-size:13.5px;color:var(--dim);border-bottom:1px solid var(--line)}
}
#toasts{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.toast{display:flex;align-items:center;gap:11px;padding:12px 15px;border-radius:12px;font-size:13.5px;background:#131A22;border:1px solid #243041;color:#D7DEE7;box-shadow:0 14px 34px rgba(0,0,0,.5);cursor:pointer;max-width:min(340px,calc(100vw - 36px));animation:t-in .22s cubic-bezier(.2,.8,.3,1)}
.toast.err{border-color:#4A2630}
.toast .dotm{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#4ADE80}
.toast.err .dotm{background:#E0909F}
.toast.out{animation:t-out .3s ease-in forwards}
@keyframes t-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes t-out{to{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.toast{animation:none}.toast.out{animation:none;opacity:0}}
.pick{flex:0 0 auto;appearance:none;-webkit-appearance:none;width:17px;height:17px;margin:0 2px 0 5px;border:1.5px solid #39445E;border-radius:5px;background:#0D131B;cursor:pointer;display:grid;place-content:center;transition:background .12s,border-color .12s}
.pick:hover{border-color:#52607A}
.pick:checked{background:var(--accent);border-color:var(--accent)}
.pick:checked::after{content:"";width:9px;height:5px;border-left:2px solid #07101D;border-bottom:2px solid #07101D;transform:rotate(-45deg) translate(0,-1px)}
.pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
ul.list li.picked{background:#141D29}
#nav{width:218px;flex:0 0 218px;padding:12px 0 12px 8px;display:flex;flex-direction:column;gap:1px;border-right:1px solid #131A23;overflow-y:auto}
#nav .compose{display:flex;align-items:center;gap:11px;height:46px;padding:0 21px 0 17px;margin:0 8px 16px 6px;border:0;border-radius:16px;background:#1B3A58;color:#CFE4FF;font:inherit;font-size:14px;font-weight:600;cursor:pointer;align-self:flex-start;box-shadow:0 1px 3px rgba(0,0,0,.45);transition:background .13s,box-shadow .13s}
#nav .compose:hover{background:#234A6E;box-shadow:0 3px 10px rgba(0,0,0,.5)}
#nav a{display:flex;align-items:center;gap:14px;height:34px;padding:0 15px 0 17px;margin-right:8px;border-radius:0 999px 999px 0;color:#B6C0CD;font-size:13.5px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .12s,color .12s}
#nav a svg{flex:0 0 17px;opacity:.88}
#nav a .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
#nav a .cnt{flex:0 0 auto;font-size:12px;color:#6E7A89;font-variant-numeric:tabular-nums}
#nav a:hover{background:#151C26;color:#D4DCE6}
#nav a.unread{color:#E3E9F1}
#nav a.unread .lbl{font-weight:700}
#nav a.unread .cnt{color:#D5DEE9;font-weight:700}
#nav a.on{background:#17344F;color:#E6EEF9}
#nav a.on .lbl{font-weight:700}
#nav a.on svg{opacity:1}
#nav a.on .cnt{color:#CFE0F2;font-weight:700}

/* ---- libelles ---- */
.lab-head{display:flex;align-items:center;height:36px;margin:16px 8px 1px 0;padding:0 8px 0 17px;color:#8B96A4;font-size:13.5px;font-weight:500}
.lab-head span{flex:1}
.lab-head button{display:flex;padding:5px;border:0;border-radius:50%;background:none;color:#8B96A4;cursor:pointer;transition:background .12s,color .12s}
.lab-head button:hover{background:#1A2430;color:var(--txt)}
#nav a.lab{gap:0;padding-right:12px}
.twist,.twist-gap{flex:0 0 22px;width:22px;height:22px}
.twist{display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:none;color:#7A8694;cursor:pointer;transition:transform .14s,background .12s}
.twist.open{transform:rotate(90deg)}
.twist:hover{background:#1E2936;color:var(--txt)}
.dot{flex:0 0 11px;width:11px;height:11px;border-radius:3px;margin:0 11px 0 3px}
#nav a.lab .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.modal-bg{position:fixed;inset:0;background:rgba(4,7,11,.68);display:flex;align-items:center;justify-content:center;z-index:60}
.modal-bg[hidden]{display:none}
.modal{width:368px;max-width:calc(100vw - 32px);padding:22px;border:1px solid #1E2733;border-radius:18px;background:#111720;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.modal h2{margin:0 0 16px;font-size:17px;font-weight:650;letter-spacing:-.2px}
.modal input[type=text],.modal select{width:100%;box-sizing:border-box;height:40px;padding:0 12px;border:1px solid #263141;border-radius:10px;background:#0D131B;color:var(--txt);font:inherit;font-size:13.5px;outline:none}
.modal input[type=text]:focus,.modal select:focus{border-color:#3C6EA5}
.modal .nest{display:flex;align-items:center;gap:9px;margin:15px 0 9px;font-size:13px;color:#A8B3C1;cursor:pointer}
.modal select:disabled{opacity:.42}
.modal-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.modal-acts button{height:36px;padding:0 17px;border:0;border-radius:10px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.modal-acts .ghost{background:none;color:#9AA5B3}
.modal-acts .ghost:hover{background:#1A2430;color:var(--txt)}
.modal-acts .primary{background:#2C6BB0;color:#EAF2FC}
.modal-acts .primary:hover{background:#3379C4}

.modal .nest{display:flex;align-items:center;gap:11px;margin:17px 0 10px;font-size:13px;line-height:1.3;color:#A8B3C1;cursor:pointer;text-align:left;user-select:none}
.modal .nest span{flex:1;min-width:0}
.modal .nest input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 18px;width:18px;height:18px;margin:0;padding:0;border:1.6px solid #3A4654;border-radius:5px;background:#0D131B;cursor:pointer;transition:background .13s,border-color .13s}
.modal .nest input[type=checkbox]:hover{border-color:#4E5E70}
.modal .nest input[type=checkbox]:checked{background:#2C6BB0;border-color:#2C6BB0}
.modal .nest input[type=checkbox]:checked::after{content:"";position:absolute;left:5.5px;top:1.5px;width:4px;height:9px;border:solid #EAF2FC;border-width:0 2px 2px 0;transform:rotate(43deg)}
.modal .nest input[type=checkbox]:focus-visible{outline:2px solid #4C8BD0;outline-offset:2px}

.badges{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 2px}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 10px;border:1px solid;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.1px;white-space:nowrap}

.rd-id .badges{margin:8px 0 0}

/* ---- recherche ---- */
.top .search{flex:1;max-width:700px;margin:0 28px;display:flex;align-items:center;gap:2px;height:44px;padding:0 5px;border:1px solid transparent;border-radius:12px;background:#151B24;transition:background .13s,border-color .13s,box-shadow .13s}
.top .search:focus-within{background:#1A212C;border-color:#2B3644;box-shadow:0 3px 16px rgba(0,0,0,.42)}
.top .search input{flex:1;min-width:0;width:auto;height:100%;padding:0 4px;border:0;background:none;color:var(--txt);font:inherit;font-size:14px;outline:none}
.top .search input::placeholder{color:#6E7A89}
.top .search input[type=search]::-webkit-search-cancel-button,
.top .search input[type=search]::-webkit-search-decoration{-webkit-appearance:none;display:none}
.top .search button{display:flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px;border:0;border-radius:50%;background:none;color:#8B96A4;cursor:pointer;transition:background .12s,color .12s}
.top .search button:hover{background:#232D3B;color:var(--txt)}
@media(max-width:900px){.top .search{display:none}}

.top .search button svg{flex:0 0 18px;width:18px;height:18px;min-width:18px;min-height:18px}

/* ---- barre d'actions de la liste ---- */
.lbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:1px;height:48px;padding:0 6px;background:#0C0F14;border-bottom:1px solid #131A23}
.lbar .pick{margin:0 1px 0 7px}
.lbar .sep{flex:0 0 1px;width:1px;height:22px;margin:0 8px;background:#1E2733}
.lbar button{display:flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px;border:0;border-radius:50%;background:none;color:#8B96A4;cursor:pointer;transition:background .12s,color .12s}
.lbar button:hover{background:#1A2430;color:var(--txt)}
.lbar button svg{flex:0 0 18px;width:18px;height:18px;min-width:18px;min-height:18px}
.lbar .chev{flex:0 0 22px;width:22px}
.lbar .chev svg{flex:0 0 14px;width:14px;height:14px;min-width:14px;min-height:14px}

/* ---- actions de la barre du haut ---- */
.top-acts{display:flex;align-items:center;gap:3px;margin-right:14px}
.top-acts button{display:flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;border:0;border-radius:50%;background:none;color:#8B96A4;cursor:pointer;transition:background .12s,color .12s}
.top-acts button:hover{background:#1A2430;color:var(--txt)}
.top-acts button svg{flex:0 0 20px;width:20px;height:20px;min-width:20px;min-height:20px}
.top-acts .ai:hover{background:#1E2436}

/* ---- barre du haut, revue ---- */
.top{height:62px;padding:0 16px 0 14px;background:#0B0E13;border-bottom:1px solid #141B25}
.top .search{max-width:620px;margin:0 22px;height:42px;gap:0;padding:0 4px;border:1px solid #1A2230;border-radius:14px;background:#141A23}
.top .search:focus-within{background:#1A212C;border-color:#304155;box-shadow:0 0 0 3px rgba(62,110,165,.13)}
.top .search input{font-size:13.5px}
.top .search input::placeholder{color:#626E7D}
.top .search button{flex:0 0 32px;width:32px;height:32px;color:#737F8E}
.top .search button:hover{background:#222C3A;color:#D4DCE6}

.top-acts{gap:2px;margin-right:12px}
.top-acts button,.top-acts button:focus,.top-acts button:active{flex:0 0 36px;width:36px;height:36px;background:none;box-shadow:none;outline:none;color:#78838F}
.top-acts button svg{flex:0 0 19px;width:19px;height:19px;min-width:19px;min-height:19px}
.top-acts button:hover{background:#19212C;color:#D4DCE6}
.top-acts button:focus-visible{outline:2px solid #4C8BD0;outline-offset:-2px}
.top-acts .ai,.top-acts .ai:hover{color:inherit}
.top-acts .ai:hover{background:#1C2334}

.acct{position:relative;display:flex;align-items:center}
.avatar{display:flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:linear-gradient(142deg,#3E7BC4,#6C5BD4);color:#EDF3FC;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.4px;cursor:pointer;transition:box-shadow .13s}
.avatar:hover{box-shadow:0 0 0 4px rgba(62,123,196,.17)}
.avatar:focus-visible{outline:2px solid #6FA6E0;outline-offset:2px}
.acct-menu{position:absolute;right:0;top:48px;width:276px;padding:16px;border:1px solid #1E2733;border-radius:16px;background:#111720;box-shadow:0 22px 52px rgba(0,0,0,.62);z-index:70}
.acct-menu[hidden]{display:none}
.acct-id{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.avatar.big{flex:0 0 44px;width:44px;height:44px;font-size:15px;cursor:default}
.avatar.big:hover{box-shadow:none}
.acct-top{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#6E7A89}
.acct-mail{margin-top:2px;font-size:13.5px;color:#DCE4EE;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-out{width:100%;height:38px;border:1px solid #28323F;border-radius:10px;background:none;color:#C4CEDA;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .12s,color .12s}
.acct-out:hover{background:#1A2430;color:var(--txt)}

.top{display:flex;align-items:center}
.top > :first-child{flex:0 0 204px}
.top .search{margin:0 24px 0 0}
.top-acts{margin-left:auto}