/* ===== Site de modération : apparence « Discord » + violet Crépuscule (octobre 2026) =====
   Couche chargée APRÈS les styles de index.html : elle ne change que l'apparence.
   Thème sombre (dark / dusk / par défaut) = gris Discord ; thème clair = Discord clair. */
:root:not([data-theme=light]){
  --paper:#313338;--surface:#2B2D31;--card:#2B2D31;--sunk:#1E1F22;--bg:#313338;
  --side-bg:#2B2D31;--rail-bg:#1E1F22;--bar-bg:#313338;
  --ink:#F2F3F5;--slate:#B5BAC1;--faint:#949BA4;--line:#3F4147;--line-hard:#4E5058;
  --accent:#5865F2;--accent-ink:#949CF7;--accent-on:#FFFFFF;--accent-soft:rgba(88,101,242,.16);--accent-line:rgba(88,101,242,.5);
  --brand:#5865F2;--brand-soft:rgba(88,101,242,.16);--dz-edge:rgba(255,255,255,.07);--dz-head:#232428;
  --signal:#23A55A;--signal-soft:rgba(35,165,90,.16);--alert:#F23F43;--alert-soft:rgba(242,63,67,.16);--warn:#F0B232;--warn-soft:rgba(240,178,50,.16);
  --action:#F23F43;--action-on:#FFFFFF;
  --sec-ov:#5865F2;--sec-mod:#F23F43;--sec-team:#23A55A;--sec-gest:#F0B232;--sec-crea:#EB459E;--sec-net:#5865F2;
  --c-green:#23A55A;--c-blue:#5865F2;--c-violet:#9B84EC;--c-red:#F23F43;--c-orange:#E67E22;--c-gold:#F0B232;
  --dz-hover:rgba(78,80,88,.45);--dz-active:rgba(78,80,88,.7);
}
:root[data-theme=light]{
  --paper:#FFFFFF;--surface:#F2F3F5;--card:#F2F3F5;--sunk:#E3E5E8;--bg:#FFFFFF;
  --side-bg:#F2F3F5;--rail-bg:#E3E5E8;--bar-bg:#FFFFFF;
  --ink:#060607;--slate:#4E5058;--faint:#5C5E66;--line:#E1E2E4;--line-hard:#C4C9CE;
  --accent:#5865F2;--accent-ink:#4752C4;--accent-on:#FFFFFF;--accent-soft:rgba(88,101,242,.12);--accent-line:rgba(88,101,242,.4);
  --brand:#5865F2;--brand-soft:rgba(88,101,242,.12);--dz-edge:#E1E2E4;--dz-head:#EBEDEF;
  --signal:#248046;--signal-soft:rgba(36,128,70,.12);--alert:#DA373C;--alert-soft:rgba(218,55,60,.1);--warn:#B07400;--warn-soft:rgba(240,178,50,.15);
  --action:#DA373C;--action-on:#FFFFFF;
  --sec-ov:#5865F2;--sec-mod:#DA373C;--sec-team:#248046;--sec-gest:#B07400;--sec-crea:#C1307F;--sec-net:#4752C4;
  --dz-hover:rgba(116,127,141,.12);--dz-active:rgba(116,127,141,.24);
}
#app{font-family:"gg sans","Noto Sans","Segoe UI",system-ui,-apple-system,sans-serif}
/* fonds animés et dégradés : retirés (pages calmes, rien qui bouge) */
#app .app-starfield,#app .app-sunsetfield,#app .app-duskfield{display:none!important}
:root[data-theme] body::before,:root:not([data-theme]) body::before{display:none!important;background:none!important}
:root body{background:var(--paper)}
:root .main,:root[data-theme] .main{background:var(--paper)!important;background-image:none!important}

/* ---- barre du haut ---- */
:root .servicebar,:root[data-theme] .servicebar{height:52px;background:var(--rail-bg)!important;border-bottom:1px solid rgba(0,0,0,.2)!important;box-shadow:none}
.servicebar .sb-brand span{font-weight:700;letter-spacing:0}
.servicebar .sb-brand small{color:var(--faint);font-weight:500}
.servicebar .sb-search input,#globalSearch{background:var(--sunk)!important;border:0!important;border-radius:6px!important;height:30px}
:root[data-theme=light] .servicebar .sb-search input,:root[data-theme=light] #globalSearch{background:#fff!important}

/* ---- rail des serveurs ---- */
:root .rail,:root[data-theme] .rail{background:var(--rail-bg)!important;border-right:0!important;padding:12px 0;gap:8px}
.rail .rail-sep{width:32px;height:2px;border-radius:1px;background:var(--line);margin:2px 0}
.rail .gbtn{width:48px;height:48px;border-radius:50%;border:0!important;background:var(--paper);color:var(--signal);font-size:20px;box-shadow:none!important;transition:border-radius .15s,background .15s}
.rail .gbtn:hover{border-radius:16px;background:var(--accent);color:#fff}
.rail .gbtn-logo{background:transparent}
.rail .gbtn-logo:hover{background:transparent}
.rail .gbtn img,.rail .gbtn svg,.rail .gbtn .gbtn-ph{border-radius:50%!important;transition:border-radius .15s}
.rail .gbtn:hover img,.rail .gbtn.active img,.rail .gbtn:hover .gbtn-ph,.rail .gbtn.active .gbtn-ph{border-radius:16px!important}
.rail .gbtn.active{border-radius:16px}
.rail .gbtn::before{content:"";position:absolute;left:-12px;top:50%;width:4px;height:0;border-radius:0 4px 4px 0;background:var(--ink);transform:translateY(-50%);transition:height .15s}
.rail .gbtn:hover::before{height:20px}
.rail .gbtn.active::before{height:40px}
.rail .gbtn img{width:48px!important;height:48px!important}

/* ---- barre des pages (comme la liste des salons) ---- */
:root .side,:root[data-theme] .side{background:var(--side-bg)!important;border-right:0!important}
.side .side-h{min-height:52px;padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.18);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.side .gname{font-weight:700;font-size:15px}
.side .ggame{color:var(--faint);font-size:12px}
:root #nav,:root[data-theme] #nav{padding:8px 8px 16px}
:root[data-theme] #nav .navgroup,#nav .navgroup{margin:0;padding:0;border:0}
:root[data-theme] #nav .navgroup-l,#nav .navgroup-l{display:flex;align-items:center;gap:4px;padding:16px 8px 4px!important;font-size:12px!important;font-weight:700!important;letter-spacing:.02em!important;text-transform:uppercase!important;color:var(--faint)!important;cursor:pointer;user-select:none}
#nav .navgroup-l:hover{color:var(--ink)!important}
#nav .navgroup-l i{display:none!important}
#nav .navgroup-l .dz-chv{width:12px;height:12px;flex:none;transition:transform .15s}
#nav .navgroup.dz-closed .navgroup-l .dz-chv{transform:rotate(-90deg)}
#nav .navgroup.dz-closed>button:not(.active){display:none}
:root[data-theme] .nav button,.nav button{height:34px;padding:0 8px!important;gap:10px!important;margin:1px 0;border-radius:4px!important;color:var(--faint)!important;font-weight:500;font-size:15px;background:transparent}
:root[data-theme] .nav button:hover,.nav button:hover{background:var(--dz-hover)!important;color:var(--slate)!important}
:root[data-theme] .nav button.active,.nav button.active{background:var(--dz-active)!important;color:var(--ink)!important;font-weight:600}
:root[data-theme] .nav button svg,.nav button svg{width:20px!important;height:20px!important;padding:0!important;background:transparent!important;border-radius:0!important;color:currentColor!important;opacity:.9}
:root[data-theme] .nav button.active svg{background:transparent!important;color:var(--ink)!important}
:root[data-theme] .nav .badge,.nav .badge{margin-left:auto;min-width:18px;height:16px;padding:0 5px;border-radius:8px;background:var(--alert)!important;color:#fff!important;font-size:11px;font-weight:700;line-height:16px;text-align:center}
.nav .nav-enter{height:auto!important;padding:8px!important;border-radius:6px!important}

/* ---- contenu ---- */
:root[data-theme] .card,.card{background:var(--surface);border:0!important;border-radius:8px!important;box-shadow:none!important}
.card-h{border-bottom:1px solid var(--line)!important}
:root[data-theme] .card-h h2,.card-h h2{font-size:12px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.02em;color:var(--faint)}
:root[data-theme] .stat,.stat{background:var(--surface);border:0!important;border-radius:8px}
:root[data-theme] .stat-e,.stat-e{border-radius:50%}
.btn{border-radius:4px!important;font-weight:600;box-shadow:none!important}
.btn.btn-solid,.btn.primary{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}
.btn.btn-solid:hover,.btn.primary:hover{filter:brightness(1.08)}
:root[data-theme] .input,.input{background:var(--sunk);border:1px solid transparent;border-radius:4px!important}
:root[data-theme=light] .input{background:#fff;border-color:var(--line-hard)}
:root[data-theme] .input:focus,.input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 2px var(--accent-soft)!important}
table tr:hover td{background:var(--dz-hover)}
.page-h .eyebrow,:root[data-theme] .page-h .eyebrow{display:none!important}
:root[data-theme] .page-h h1,.page-h h1{font-size:22px!important;font-weight:700}
.lock{border-radius:8px!important}

/* ---- téléphone : rail dans le tiroir + barre d'onglets en bas ---- */
#dzTabs{display:none}
@media (max-width:700px){
  #app{grid-template-columns:1fr!important}
  #app .rail{position:fixed;top:0;bottom:0;left:0;width:72px;z-index:92;transform:translateX(-100%);transition:transform .22s ease}
  #app.navopen .rail{transform:none}
  #app .side{left:72px!important;width:calc(100vw - 88px)!important;max-width:300px;transform:translateX(calc(-100% - 80px))!important}
  #app.navopen .side{transform:none!important}
  #app .main,#app>.main{grid-column:1/-1!important;width:100%;min-width:0}
  #app .servicebar{grid-column:1/-1!important}
  #app .main{padding-bottom:76px}
  #dzTabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;height:64px;padding-bottom:env(safe-area-inset-bottom);background:var(--side-bg);border-top:1px solid var(--line);justify-content:space-around;align-items:center}
  #dzTabs button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;color:var(--faint);font:600 11px "gg sans","Noto Sans",system-ui,sans-serif;padding:6px 8px}
  #dzTabs button svg{width:24px;height:24px}
  #dzTabs button.on{color:var(--ink)}
  #dzTabs .b{position:absolute;top:0;right:4px;min-width:16px;height:16px;border-radius:8px;background:var(--alert);color:#fff;font-size:10px;line-height:16px;padding:0 4px}
  .servicebar .sb-meta,.servicebar .sb-timer{display:none!important}
}
/* entrée « Réglages du serveur » (espace Gestion) */
#nav .dz-gest{margin-top:14px!important;padding-top:10px!important;border-top:1px solid var(--line)!important}
.nav button.dz-enter{height:auto!important;min-height:52px;padding:8px 10px!important;gap:10px!important;border-radius:8px!important;background:var(--dz-hover)!important;color:var(--ink)!important;white-space:normal}
.nav button.dz-enter:hover{background:var(--dz-active)!important}
.nav .dz-enter-ic{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--slate)}
.nav .dz-enter-ic svg{width:18px!important;height:18px!important;color:var(--slate)!important}
.nav .dz-enter .nav-enter-t{min-width:0;font-weight:600;font-size:14px;color:var(--ink)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .dz-enter .nav-enter-t small{display:block;margin-top:2px;font-weight:500;font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.nav .dz-enter .nav-chev{color:var(--faint);font-size:18px}
/* ===== Phase 2 : accueil allégé ===== */
#app .hm{gap:14px;max-width:1120px}
#app .hm-av{width:48px;height:48px;border:0;border-radius:50%}
#app .hm-title{margin:0;font-size:22px;font-weight:700;letter-spacing:0}
#app .hm-subt{margin-top:2px;font-size:14px;color:var(--slate)}
#app .hm-duty{gap:8px}
#app .hm-btn{height:36px;padding:0 14px;border-radius:4px;border:0;background:var(--dz-hover);font-size:14px;font-weight:500}
#app .hm-btn:hover{filter:brightness(1.12)}
#app .hm-btn.go{height:36px;padding:0 14px;background:#248046;color:#fff;font-size:14px;font-weight:600}
#app .hm-btn.go svg{width:15px;height:15px}
#app .hm-btn.danger{background:#DA373C;color:#fff}
#app .hm-btn.ghost{background:transparent;border:1px solid var(--line-hard);color:var(--slate)}
#app .hm-btn.sm{height:30px;padding:0 12px;font-size:13px;background:var(--dz-hover);color:var(--ink);border:0}
#app .hm-note{padding:8px 12px;border-radius:6px;border:0;background:var(--sunk);font-size:13px}
#app .hm-cols{gap:14px}
#app .hm-main,#app .hm-side{gap:14px}
#app .hm-card{border:0;border-radius:8px;background:var(--surface)}
#app .hm-card-h{padding:14px 16px 6px;border:0}
#app .hm-card-h h2{font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--slate)}
#app .hm-sub,#app .hm-live{font-size:12px}
#app .hm-link{font-size:13px;color:var(--slate)}
#app .hm-link:hover{color:var(--ink);text-decoration:underline}
#app .hm-list{padding:2px 8px 8px}
#app .hm-row{gap:12px;padding:8px;border:0;border-radius:6px}
#app .hm-row:hover{background:var(--dz-hover)}
#app .hm-ico{width:34px;height:34px;border-radius:50%}
#app .hm-ico svg{width:17px;height:17px}
#app .hm-txt b{font-size:14.5px}
#app .hm-txt span{font-size:12.5px}
#app .hm-empty{padding:4px 16px 16px;text-align:left}
#app .hm-empty div{font-size:14px;color:var(--slate)}
#app .hm-stats{gap:8px;padding:6px 16px 16px}
#app .hm-stat{padding:10px 12px;border:0;border-radius:6px;background:var(--sunk)}
#app .hm-stat .n{font-family:inherit;font-size:22px;font-weight:700}
#app .hm-stat .l{font-size:13px;color:var(--slate)}
#app .hm-stat .d{font-size:11.5px;margin-top:4px}
#app .hm-staff{gap:10px;padding:6px 16px 16px}
#app .hm-staff img{width:32px!important;height:32px!important}
#app .hm-act{gap:10px}
#app .hm-tag{flex:none;min-width:0;max-width:110px;padding:2px 6px;border-radius:4px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tc);background:color-mix(in srgb,var(--tc) 18%,transparent)}
#app .hm-time{flex:none;font-size:11.5px;color:var(--faint)}
@media (max-width:700px){#app .hm-head{gap:10px}#app .hm-duty{width:100%}#app .hm-duty .hm-btn{flex:1;justify-content:center}#app .hm-act{flex-wrap:nowrap}}
/* ===== Phase 2 : pages listes (Sanctions, Membres…) allégées ===== */
#app .pl{gap:14px}
#app .pl-head{align-items:center}
#app .pl-head .eyebrow{display:none!important}
#app .pl-head h1{margin:0;font-size:22px;font-weight:700;letter-spacing:0}
#app .pl-head p{margin:2px 0 0;font-size:14px}
#app .sc-hbtn,#app .pf-acts .btn{height:36px;padding:0 14px;border-radius:4px;font-size:14px;font-weight:500}
#app .pf-acts .btn-action{background:#DA373C!important;border-color:#DA373C!important;color:#fff!important}
#app .lock,:root[data-theme] #app .lock{padding:8px 12px;border:0;border-radius:6px;font-size:13px}
#app .sc-stats{gap:8px}
#app .sc-stat{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:0;padding:10px 12px;border:0;border-radius:8px;background:var(--surface)}
#app .sc-stat:not(:disabled):hover{background:var(--dz-hover)}
#app .sc-stat.alert{box-shadow:inset 3px 0 0 var(--alert)}
#app .sc-stat .sc-ico{display:none}
#app .sc-stat .l{order:2;font-size:13px}
#app .sc-stat .n{order:1;font-family:inherit;font-size:20px;font-weight:700}
#app .sc-stat .d{order:3;flex-basis:100%;font-size:11.5px;color:var(--faint)}
#app .sc-tabs{gap:4px;border:0}
#app .sc-tabs button{height:32px;padding:0 10px;border:0;border-radius:4px;font-size:14px;font-weight:500;color:var(--slate)}
#app .sc-tabs button:hover{background:var(--dz-hover);color:var(--ink)}
#app .sc-tabs button.on{background:var(--dz-active);color:var(--ink);font-weight:600}
#app .pl-tools{gap:8px;padding:0;border:0;border-radius:0;background:transparent}
#app .pl-search,#app .pl-sort{height:36px;border:0;border-radius:4px;background:var(--sunk)}
#app .pl-search input{font-size:14px}
#app .pl-chip{height:28px;padding:0 10px;border:0;border-radius:4px;background:var(--dz-hover);font-size:13px}
#app .pl-chip.on{background:var(--dz-active);color:var(--ink);font-weight:600}
#app .card.pl-table{border:0;border-radius:8px;background:var(--surface)}
#app .pl-table th{font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--faint);background:transparent}
#app .pl-table td{padding-top:9px;padding-bottom:9px;border-color:var(--line)}
#app .pl-table tr.clickable:hover td{background:var(--dz-hover)}
#app .sc-foot{font-size:12.5px}
@media (max-width:700px){#app .sc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}#app .pl-head h1{font-size:20px}}
@media (max-width:700px){#app .hm-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;padding:6px 12px 12px}#app .hm-stat{padding:8px}#app .hm-stat .n{font-size:18px}#app .hm-stat .l{font-size:12px}#app .hm-stat .d{display:none}#app .pl-row .pl-sort{flex:1 1 140px}}
/* ===== Phase 2 : accueil administrateur (modules) allégé ===== */
#app .ah-head{gap:12px;margin-bottom:14px}
#app .ah-name{font-size:22px;font-weight:700}
#app .ah-head .btn{height:34px;padding:0 12px;border-radius:4px;font-size:13.5px}
#app .ah-guide,#app .ah-guide.done{gap:14px;padding:12px 16px;margin-bottom:16px;border:0;border-radius:8px;background:var(--surface)}
#app .ah-ring{width:44px;height:44px;background:conic-gradient(#23A55A calc(var(--p)*1%),var(--dz-active) 0)}
#app .ah-ring span{width:34px;height:34px;font-size:12px}
#app .ah-guide-t{font-size:15px}
#app .ah-steps{gap:4px;margin-top:6px}
#app .ah-steps>*{padding:2px 8px;border:0;border-radius:4px;background:var(--dz-hover);font-size:12px}
#app .ah-steps .ok{color:#23A55A;background:transparent}
#app .ah-steps .next{color:var(--ink);background:var(--dz-active);font-weight:600}
#app .ah-go{height:34px;padding:0 14px;border:0!important;border-radius:4px;background:#248046!important;color:#fff!important;font-size:14px;font-weight:600}
#app .ah-sec{margin-bottom:16px}
#app .ah-h{margin:0 0 8px;font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--slate)}
#app .ah-h i{display:none}
#app .ah-h span{text-transform:none;letter-spacing:0;font-size:12px;color:var(--faint)}
#app .ah-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
#app .ah-mod{display:grid;grid-template-columns:32px 1fr auto;grid-template-areas:"ico tt sw" "ico st st";align-items:center;column-gap:12px;row-gap:2px;padding:10px 12px;border:0;border-radius:8px;background:var(--surface);transition:background .12s}
#app .ah-mod:hover{transform:none;border:0;background:var(--dz-hover)}
#app .ah-mod.hl{box-shadow:inset 3px 0 0 #F0B232}
#app .ah-mod:focus-visible{outline:2px solid var(--ink)}
#app .ah-top{display:contents}
#app .ah-ico{grid-area:ico;width:32px;height:32px;border-radius:50%;background:var(--sunk);color:var(--slate)}
#app .ah-ico svg{width:17px;height:17px}
#app .ah-sw{grid-area:sw;width:34px;height:20px;background:#80848E}
#app .ah-sw.on{background:#23A55A}
#app .ah-sw i{width:14px;height:14px}
#app .ah-sw.on i{left:17px}
#app .ah-mod h3{grid-area:tt;font-size:14.5px;font-weight:600}
#app .ah-mod p,#app .ah-mod .ah-foot{display:none}
#app .ah-stat{grid-area:st;padding:0;background:transparent;font-size:12.5px;color:var(--slate)}
#app .ah-dot{width:7px;height:7px}
#app .ah-dot.ok{background:#23A55A}
#app .ah-dot.todo{background:#F0B232}
@media (max-width:700px){#app .ah-grid{grid-template-columns:1fr}#app .ah-go{width:100%}}
#servicebar #sbBtn.btn-solid{background:#248046!important;border-color:#248046!important;color:#fff!important;border-radius:4px}
#servicebar #sbBtn.btn-solid:hover{background:#1A6334!important}
/* ===== Barre du haut façon Discord + panneau utilisateur en bas à gauche (ordinateur) ===== */
.dz-title{display:none}
.dz-user{display:none}
@media (min-width:701px){
  #app .side{position:sticky;top:48px;height:calc(100vh - 48px);align-self:start;overflow:hidden}
  #app .side .nav{flex:1;min-height:0}
  #app .rail{position:sticky;top:48px;height:calc(100vh - 48px);align-self:start;overflow-y:auto}
  #app #servicebar{position:sticky;top:0;z-index:60}
  #app{grid-template-rows:auto 1fr}
  #servicebar .sb-brand,#servicebar .sb-status,#servicebar .sb-meta{display:none!important}
  #servicebar{gap:10px;padding:0 16px!important;height:48px!important}
  .dz-title{display:flex;align-items:baseline;gap:10px;min-width:0;overflow:hidden;white-space:nowrap}
  .dz-title b{font-size:16px;font-weight:700;color:var(--ink)}
  .dz-title span{padding-left:10px;border-left:1px solid var(--line-hard);font-size:14px;color:var(--slate);overflow:hidden;text-overflow:ellipsis}
  #servicebar .sb-search{margin-left:auto;max-width:280px}
  #servicebar .sb-right{margin-left:0}
  #app .side{overflow:visible}
  #servicebar #sbBtn,#servicebar #sbTimer{display:none!important}
  .dz-user{display:block;position:relative;flex:none;margin:0;background:var(--rail-bg)}
  .dz-u-bg{position:absolute;inset:0;background:var(--rail-bg) center/cover no-repeat;overflow:hidden}
  .dz-u-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,18,20,.7) 0%,rgba(17,18,20,.35) 60%,rgba(17,18,20,.2) 100%)}
  :root[data-theme=light] .dz-u-bg::after{background:linear-gradient(90deg,rgba(235,237,239,.88),rgba(235,237,239,.35))}
  .dz-u-row{position:relative;display:flex;align-items:center;gap:0;height:56px;padding:0 6px}
  .dz-u-me{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:4px;border:0;border-radius:6px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
  .dz-u-me:hover{background:rgba(255,255,255,.08)}
  .dz-u-av{position:relative;width:32px;height:32px;flex:none}
  .dz-u-av img,.dz-u-ini{width:32px;height:32px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#5865F2;color:#fff;font-size:12px;font-weight:700}
  .dz-u-av i{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;border:3px solid #232428;background:#80848E}
  .dz-u-av i.on{background:#23A55A}
  .dz-u-av i.off{background:#F23F43}
  .dz-u-txt{min-width:0;display:flex;flex-direction:column;line-height:1.2}
  .dz-u-txt b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dz-u-txt small{font-size:12px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dz-u-on{color:#23A55A;font-weight:600;font-variant-numeric:tabular-nums}
  .dz-u-ic{flex:none;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:4px;background:transparent;color:var(--slate);cursor:pointer}
  .dz-u-ic:hover{background:rgba(255,255,255,.1);color:var(--ink)}
  .dz-u-ic.on{color:#23A55A}
  .dz-u-menu .profilechip{display:none!important}
  .dz-u-menu .profilemenu{top:auto!important;bottom:calc(100% + 6px);left:8px;right:auto;width:280px;max-height:calc(100vh - 140px);overflow:auto;border-radius:8px!important;z-index:95}
}
@media (min-width:701px){
  #app .rail{padding-bottom:64px!important}
  #app .side{z-index:5}
  .dz-user{z-index:6;margin-left:calc(-1 * var(--dz-railw,64px));width:calc(100% + var(--dz-railw,64px))}
}
/* Séparations entre les catégories du menu */
#nav .navgroup+.navgroup{margin-top:8px!important;padding-top:4px!important;border-top:1px solid var(--line)!important}
#nav .navgroup+.navgroup>.navgroup-l{padding-top:10px!important}
/* Menu : les éléments ne doivent jamais être écrasés (le menu défile) */
#nav>*{flex-shrink:0!important}
#nav .navgroup>*{flex-shrink:0}
/* Barres de défilement fines et sombres, façon Discord */
#app *{scrollbar-width:thin;scrollbar-color:var(--dz-scroll,#1A1B1E) transparent}
:root[data-theme=light] #app *{--dz-scroll:#C4C9CE}
#app ::-webkit-scrollbar{width:8px;height:8px}
#app ::-webkit-scrollbar-track{background:transparent}
#app ::-webkit-scrollbar-thumb{background:var(--dz-scroll,#1A1B1E);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
#app ::-webkit-scrollbar-thumb:hover{background-color:#4E5058}
/* En-tête « Gestion » du menu */
:root[data-theme] #app .nav .sp-head{padding:6px 4px 12px;margin:0 0 12px}
#app .nav .sp-ic{border-radius:50%;background:var(--paper);color:var(--slate)}
#app .nav .sp-back{border:0!important;background:var(--dz-hover)!important;border-radius:6px!important}
#app .nav .sp-t b{font-size:15px}
:root[data-theme] #app .nav-search input{height:34px;border:0;border-radius:6px;background:var(--sunk)}
#app .nav-search kbd{display:none}
#app .nav-subitems{margin:2px 0 6px}
#app .nav-subitems button{height:32px!important}
#app .page-tabs{gap:4px;padding:0;border:0;background:transparent}
#app .page-tabs button{height:32px;padding:0 10px;border-radius:4px;font-size:14px;font-weight:500}
#app .page-tabs button:hover{background:var(--dz-hover)}
:root[data-theme] #app .page-tabs button.on,#app .page-tabs button.on{background:var(--dz-active);color:var(--ink);font-weight:600}
#app .nav .sp-head .sp-ic,#app .nav .sp-head .sp-ic svg{color:var(--slate)!important;background:var(--paper)!important}
/* Menu Gestion : en-tête compact, sans le nom du serveur */
#app .side:has(#nav .sp-head) .side-h{display:none}
:root[data-theme] #app .nav .sp-head,#app .nav .sp-head{min-height:48px;margin:-10px -8px 10px!important;padding:0 12px!important;gap:10px;border-bottom:1px solid rgba(0,0,0,.25)!important;box-shadow:0 1px 0 rgba(255,255,255,.03)}
#app .nav .sp-head .sp-ic{display:none!important}
:root[data-theme] #app .nav .sp-back,#app .nav .sp-back{width:28px!important;min-width:28px;height:28px!important}
#app .nav .sp-t b{font-size:15px;line-height:1.2}
#app .nav .sp-t small{font-size:11.5px}
:root[data-theme] #app .nav-search,#app .nav-search{margin:0 0 2px}
:root[data-theme] #app .nav-allbtn,#app .nav-allbtn{margin:0 0 2px}
#app #nav .sp-head~.navgroup:first-of-type>.navgroup-l,#app #nav .nav-allbtn+.navgroup>.navgroup-l{padding-top:8px!important}
/* Le menu et la colonne des serveurs restent en place au défilement (overflow « hidden » cassait sticky) */
html,body{overflow-x:clip!important}

/* ===== Contrastes : on distingue mieux les blocs, les en-têtes et les lignes ===== */
#app .card,#app .hm-card,#app .sc-stat,#app .ah-mod,#app .ah-guide,#app .card.pl-table,#app .lock{box-shadow:0 0 0 1px var(--dz-edge)}
#app .sc-stat.alert{box-shadow:0 0 0 1px var(--dz-edge),inset 3px 0 0 var(--alert)}
#app .ah-mod.hl{box-shadow:0 0 0 1px var(--dz-edge),inset 3px 0 0 #F0B232}
#app table thead th,#app .pl-table th{background:var(--dz-head)!important;border-bottom:1px solid var(--line)!important}
#app table tbody td{border-bottom:1px solid var(--line)}
#app table tbody tr:last-child td{border-bottom:0}
#app table tbody tr.clickable:hover td,#app table tbody tr:hover td{background:var(--dz-hover)}
#app .bn-note{border:0;border-radius:8px;background:var(--surface);box-shadow:0 0 0 1px var(--dz-edge),inset 4px 0 0 var(--accent);padding:12px 16px 12px 18px}
#app .pl-chip{box-shadow:0 0 0 1px var(--dz-edge)}
#app .pl-chip.on{background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent-line);color:var(--ink)}
#app .pl-search,#app .pl-sort{box-shadow:0 0 0 1px var(--dz-edge)}
/* Petite barre verticale entre l'icône et le nom dans les menus */
#nav button>svg:first-child{box-sizing:content-box;padding-right:10px!important;background:linear-gradient(color-mix(in srgb,currentColor 38%,transparent),color-mix(in srgb,currentColor 38%,transparent)) right center/1.5px 14px no-repeat!important}
#nav .nav-subitems button>svg:first-child{padding-right:0!important;background:none!important}
/* ===== Accueil v3 ===== */
#app .hm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#app .hm-kpis .hm-stat{padding:12px 14px;border:0;border-radius:8px;background:var(--surface);box-shadow:0 0 0 1px var(--dz-edge);text-align:left;font:inherit;color:var(--ink)}
#app .hm-kpis .hm-stat .n{font-size:24px;font-weight:700;line-height:1.1}
#app .hm-kpis .hm-stat .l{margin-top:2px;font-size:13px;color:var(--slate)}
#app .hm-kpis .hm-stat .d{margin-top:4px;font-size:11.5px;color:var(--faint)}
#app .hm-stat-btn{cursor:pointer}
#app .hm-stat-btn:hover{background:var(--dz-hover)!important}
#app .hm-feed{gap:12px}
#app .hm-feed>img,#app .hm-feed>.av,#app .hm-feed>span:first-child{flex:none;width:32px!important;height:32px!important}
#app .hm-feed .hm-txt b{display:flex;align-items:center;gap:8px;min-width:0}
#app .hm-meta{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px;color:var(--faint);text-align:right;max-width:130px}
#app .hm-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}
#app .hm-meta span:first-child{color:var(--slate)}
#app .hm-tag{display:inline-block;vertical-align:1px;font-style:normal;max-width:none;padding:1px 6px;font-size:10px}
#app .hm-act .hm-txt span{display:block}
#app .hm-row.clickable{cursor:pointer}
#app .hm-side{flex:1 1 300px}
@media (max-width:900px){#app .hm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){#app .hm-meta{display:none}}
#app .hm-act{align-items:flex-start}
#app .hm-act .hm-txt{gap:3px}
#app .hm-act .hm-time{padding-top:2px}
/* ===== Pages restantes : compteurs, onglets, sélecteurs, titres de blocs ===== */
#app .page-h{margin-bottom:14px;align-items:center}
#app .page-h .eyebrow{display:none!important}
#app .page-h h1{font-size:22px;font-weight:700;letter-spacing:0}
#app .page-h p{font-size:14px}
:root[data-theme] #app .stat,#app .stat{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;padding:12px 14px;border:0;border-radius:8px;background:var(--surface);box-shadow:0 0 0 1px var(--dz-edge)}
:root[data-theme] #app .stat:hover,#app .stat:hover{transform:none;box-shadow:0 0 0 1px var(--dz-edge);border:0}
#app .stat::before,#app .stat-e{display:none!important}
#app .stat .n{font-size:22px;letter-spacing:0}
:root[data-theme] #app .stat .l,#app .stat .l{font-size:13px;margin:0}
#app .stat .d{flex-basis:100%;font-size:11.5px;margin-top:2px}
#app .vm-stat{border:0!important;border-radius:8px!important;background:var(--surface)!important;box-shadow:0 0 0 1px var(--dz-edge)}
#app .vm-stat-i{display:none!important}
#app .tabs{gap:4px;border:0;margin-bottom:12px;flex-wrap:wrap}
#app .tabs button{height:32px;padding:0 10px;margin:0;border:0!important;border-radius:4px;color:var(--slate);font-size:14px;font-weight:500}
#app .tabs button:hover{background:var(--dz-hover);color:var(--ink)}
#app .tabs button.active{background:var(--dz-active);color:var(--ink);font-weight:600}
#app .seg{gap:2px;padding:2px;border:0;border-radius:6px;background:var(--sunk)}
#app .seg button{border:0!important;border-radius:4px;background:transparent;padding:5px 10px;font-size:13px}
:root[data-theme] #app .seg button.active,#app .seg button.active{background:var(--dz-active);color:var(--ink)}
:root[data-theme] #app .card-h,#app .card-h{padding:12px 14px 8px;background:transparent!important;border-bottom:0!important}
:root[data-theme] #app .card-h h2,#app .card-h h2{font-size:12px!important;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--slate)!important}
#app .card-h h2::before{display:none!important}
#app .empty{padding:24px 16px;opacity:1;border:0!important;background:transparent}
#app .log-cats .btn{height:30px;border-radius:4px}
/* ===== Fiche joueur ===== */
#app .pf-back{color:var(--slate);font-weight:500}
#app .pf-back:hover{color:var(--ink);text-decoration:underline}
#app .pf-head{gap:14px;padding:16px 18px;border:0;border-radius:8px;background:var(--surface);box-shadow:0 0 0 1px var(--dz-edge)}
#app .pf-av{box-shadow:none}
#app .pf-av.on{box-shadow:0 0 0 2px #23A55A}
#app .pf-name h1{font-size:24px}
#app .pf-act,#app .pf-acts .btn{height:34px;padding:0 12px;border-radius:4px;font-size:14px;font-weight:500}
#app .pf-acts .btn-action,#app .pf-acts .pf-sanc{background:#DA373C!important;border-color:#DA373C!important;color:#fff!important}
#app .pf-stats{gap:8px}
#app .pf-stat{padding:10px 12px;border:0;border-radius:6px;background:var(--sunk)}
#app .pf-stat b{font-size:16px;font-family:inherit}
#app .pf-stat.warn{background:var(--sunk);box-shadow:inset 3px 0 0 var(--warn)}
#app .pf-stat.warn span{color:var(--slate)}
#app .pf-chip,#app .pf-id{border-radius:4px}
#app .kv dt,#app .kv .k{color:var(--faint)}
#app .card-b .kv .mono,#app .kv .mono{font-family:inherit}
#app .kv .mono{font-size:14px!important}
.toast{background:#111214!important;color:#F2F3F5!important;border-radius:6px!important;padding:10px 14px!important;box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:14px!important;z-index:200!important}
:root[data-theme=light] .toast{background:#FFFFFF!important;color:#060607!important;box-shadow:0 8px 24px rgba(0,0,0,.15),0 0 0 1px #E1E2E4}
/* ===== Fenêtres (sanction, détail…) façon Discord ===== */
#modalHost .modal-bg{background:rgba(0,0,0,.7)}
#modalHost .modal,#modalHost .modal.modal-wide,#modalHost .modal.modal-large{background:var(--paper);border:0;border-radius:8px;box-shadow:0 0 0 1px var(--dz-edge),0 24px 64px rgba(0,0,0,.5)}
:root[data-theme] #modalHost .modal-h,#modalHost .modal-h{padding:16px 20px;background:var(--paper)!important;border-bottom:1px solid var(--line)}
#modalHost .modal-h h2{font-size:18px;font-weight:700}
#modalHost .modal-b{padding:16px 20px}
:root[data-theme] #modalHost .modal-f,#modalHost .modal-f{padding:12px 20px;background:var(--surface)!important;border-top:0}
#modalHost .modal-f .btn,#modalHost .modal-h .btn{height:36px;border-radius:4px;font-weight:500}
#modalHost .modal-f .btn-danger,#modalHost .modal-f .btn-action{background:#DA373C!important;border-color:#DA373C!important;color:#fff!important}
#modalHost .modal-f .btn-solid{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}
#modalHost .modal-f .btn:not(.btn-danger):not(.btn-action):not(.btn-solid){background:transparent;border-color:transparent;color:var(--ink)}
#modalHost .modal-f .btn:not(.btn-danger):not(.btn-action):not(.btn-solid):hover{text-decoration:underline}
#modalHost .card{border:0;border-radius:8px;box-shadow:0 0 0 1px var(--dz-edge)}
:root[data-theme] #modalHost .stat,#modalHost .stat{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;padding:10px 14px;background:var(--surface)}
#modalHost .stat::before,#modalHost .stat-e{display:none!important}
#modalHost .stat .n{font-size:18px;letter-spacing:0}
:root[data-theme] #modalHost .stat .l,#modalHost .stat .l{font-size:12.5px;margin:0;order:-1;flex-basis:100%;color:var(--faint)}
:root[data-theme] #modalHost .card-h,#modalHost .card-h{padding:12px 14px 6px;background:transparent!important;border-bottom:0!important}
:root[data-theme] #modalHost .card-h h2,#modalHost .card-h h2{font-size:12px!important;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--slate)!important}
#modalHost .card-h h2::before{display:none!important}
#modalHost .tabs{gap:4px;border:0}
#modalHost .tabs button{height:32px;padding:0 10px;margin:0;border:0!important;border-radius:4px}
#modalHost .tabs button.active{background:var(--dz-active);color:var(--ink)}
#modalHost .input,#modalHost select.input,#modalHost textarea.input{border:0!important;border-radius:4px!important;background:var(--sunk)!important}
/* ===== Barre du haut v2 ===== */
:root .side-h,:root[data-theme] .side-h{border-top:0!important}
@media (min-width:701px){
  #servicebar{background:var(--paper)!important;border-bottom:1px solid rgba(0,0,0,.28)!important;box-shadow:0 1px 0 rgba(255,255,255,.02)}
  :root[data-theme=light] #servicebar{border-bottom-color:#E1E2E4!important}
  .dz-title{align-items:center;gap:8px}
  .dz-t-ic{display:grid;place-items:center;width:22px;height:22px;color:var(--faint);font-style:normal}
  .dz-t-ic svg{width:22px!important;height:22px!important;padding:0!important;background:none!important}
  .dz-title b{font-size:16px}
  .dz-title span.dz-t-sep{width:1px;height:22px;margin:0 6px;padding:0;border:0;background:var(--line-hard)}
  .dz-title span.dz-t-g{padding:0;border:0;font-size:14px;font-weight:600;color:var(--slate)}
  .dz-title span.dz-t-m{padding:0;border:0;font-size:13px;color:var(--faint)}
  .dz-title span.dz-t-m::before{content:"·";margin-right:6px}
  #servicebar .sb-search{max-width:270px;min-width:160px;flex:0 1 270px}
  #servicebar .sb-search input,#globalSearch{height:28px!important;border-radius:4px!important;font-size:13px!important;background:var(--sunk)!important}
  #servicebar .sb-right{gap:4px}
  #notifBell .notif-btn,#notifBell .btn{width:32px;height:32px;min-width:0;padding:0!important;display:grid;place-items:center;border:0!important;border-radius:4px!important;background:transparent!important;box-shadow:none!important;color:var(--slate);font-size:16px}
  #notifBell .notif-btn:hover,#notifBell .btn:hover{background:var(--dz-hover)!important;color:var(--ink)}
}
#notifBell .notif-btn{position:relative}
#notifBell .notif-badge{position:absolute;top:-1px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#F23F43;color:#fff;font-size:10.5px;font-weight:700;line-height:16px;text-align:center;box-shadow:0 0 0 3px var(--paper)}
/* Noms longs dans les menus : jamais coupés hors du menu */
#nav button{min-width:0;max-width:100%;overflow:hidden}
#nav button .nav-l{display:block!important;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nav button:not(:has(.nav-l)){white-space:normal;height:auto!important;min-height:34px;line-height:1.25;padding-top:6px!important;padding-bottom:6px!important}
#nav button .nav-fav{display:none}
#nav button:hover .nav-fav,#nav button .nav-fav.on{display:inline}
@media (max-width:700px){
  #servicebar #sbBtn{height:36px!important;min-width:36px;padding:0 10px!important;border-radius:8px!important;font-size:15px}
  #servicebar{gap:8px}
  #app .side::before,#app .side::after{display:none!important}
}
/* ===== Menu « Mon espace » (comme le menu des serveurs) ===== */
#nav .ms-user{margin:2px 0 8px;padding:6px 8px;border:0!important;border-radius:6px;background:transparent!important}
#nav .ms-user:hover{background:var(--dz-hover)!important}
#nav .me-nav{gap:0}
#nav .ms-grp+.ms-grp{margin-top:8px;padding-top:4px;border-top:1px solid var(--line)}
#nav .ms-h{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:4px;width:100%;padding:10px 8px 4px;cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--faint)}
#nav .ms-h:hover{color:var(--ink)}
#nav .ms-h .nav-chv{order:-1;width:12px!important;height:12px!important;transition:transform .15s}
#nav .ms-grp.closed .ms-h .nav-chv{transform:rotate(-90deg)}
#nav .me-nav .ms-b button{height:34px;margin:1px 0;padding:0 8px;gap:0;border-radius:4px;color:var(--faint);font-size:15px;font-weight:500}
#nav .me-nav .ms-b button:hover{background:var(--dz-hover);color:var(--slate)}
#nav .me-nav .ms-b button.active{background:var(--dz-active);color:var(--ink);font-weight:600}
#nav .me-nav .ms-ic{display:grid;place-items:center;width:20px;height:20px;padding-right:10px;margin-right:10px;box-sizing:content-box;background:linear-gradient(color-mix(in srgb,currentColor 38%,transparent),color-mix(in srgb,currentColor 38%,transparent)) right center/1.5px 14px no-repeat}
:root #nav .me-nav .ms-ic svg,:root[data-theme] #nav .me-nav .ms-ic svg{width:20px;height:20px}
#nav .me-nav .ms-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nav .ms-h{justify-content:flex-start!important}
#nav .ms-h>span{flex:1;text-align:left}
#nav .me-nav .ms-ic{padding-right:9px;margin-right:9px}
#nav .me-nav .ms-b button{font-size:14.5px}
@media (min-width:701px){#nav .ms-user{display:none!important}}
#nav .me-nav .ms-b button{gap:0!important;padding:0 8px!important;height:34px!important;margin:1px 0!important}
#nav .me-nav .ms-ic{width:20px!important;padding-right:9px!important;margin-right:10px!important;font-size:0}
/* ===== Boutique façon « shop » ===== */
#app .sh-layout{display:block!important}
#app .sh-main{max-width:none!important}
#app .sh2-nav{position:sticky;top:48px;z-index:20;display:flex;align-items:center;gap:4px;margin:0 -24px 18px;padding:0 24px;height:52px;background:var(--paper);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
#app .sh2-nav>button{flex:none;height:52px;padding:0 12px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--slate);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
#app .sh2-nav>button:hover{color:var(--ink)}
#app .sh2-nav>button.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
#app .sh2-search{margin-left:auto;flex:0 0 240px;display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:6px;background:var(--sunk);color:var(--faint)}
#app .sh2-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:13.5px}
#app .sh2-hero{position:relative;margin:0 0 28px;padding:44px 40px 24px;border-radius:12px;overflow:hidden;background:#111214;isolation:isolate}
#app .sh2-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--hb) center 30%/cover no-repeat;filter:saturate(1.1)}
#app .sh2-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(17,18,20,.15) 0%,rgba(17,18,20,.55) 45%,rgba(17,18,20,.96) 100%),linear-gradient(90deg,rgba(17,18,20,.75),transparent 60%)}
#app .sh2-hero-in{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;min-height:170px;margin-bottom:22px}
#app .sh2-hero-t{max-width:520px;color:#fff}
#app .sh2-hero h1{margin:6px 0 6px;font-size:40px;line-height:1.05;font-weight:800;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5)}
#app .sh2-hero p{margin:0;font-size:15px;color:rgba(255,255,255,.85)}
#app .sh2-lim{display:inline-block;padding:3px 8px;border-radius:4px;background:#fff;color:#111214;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
#app .sh2-cta{height:40px;padding:0 18px;border:0;border-radius:6px;background:#fff;color:#111214;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
#app .sh2-cta:hover{background:#E3E5E8}
#app .sh2-hero-arr{position:absolute;right:28px;top:226px}
#app .sh2-sec{margin:0 0 28px}
#app .sh2-h{display:flex;align-items:center;gap:12px;margin:0 0 12px}
#app .sh2-h h2{margin:0;font-size:20px;font-weight:700;color:var(--ink)}
#app .sh2-all{border:0;background:none;color:var(--slate);font:inherit;font-size:14px;cursor:pointer;padding:0}
#app .sh2-all:hover{color:var(--ink);text-decoration:underline}
#app .sh2-arr{margin-left:auto;display:flex;gap:6px}
#app .sh2-arr button{width:32px;height:32px;border:0;border-radius:50%;background:var(--surface);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 0 0 1px var(--dz-edge)}
#app .sh2-hero .sh2-arr button{background:rgba(17,18,20,.7);color:#fff}
#app .sh2-arr button:hover{background:var(--dz-active)}
#app .sh2-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,calc((100% - 48px)/4));gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px}
#app .sh2-row::-webkit-scrollbar{display:none}
#app .sh2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
#app .sh2-card{all:unset;box-sizing:border-box;display:flex;flex-direction:column;cursor:pointer;scroll-snap-align:start;border-radius:10px;overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px var(--dz-edge);transition:transform .15s,box-shadow .15s}
#app .sh2-card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line-hard),0 10px 26px rgba(0,0,0,.35)}
#app .sh2-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#app .sh2-b{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px}
#app .sh2-b b{font-size:14.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .sh2-k{font-weight:700}
#app .sh2-p{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink)}
#app .sh2-pr{font-weight:600}
#app .sh2-off{color:#23A55A;font-weight:600;font-size:13px}
#app .sh2-own{color:#23A55A;font-weight:600;font-size:13px}
#app .sh2-card.own{opacity:.8}
.shv{position:relative;aspect-ratio:16/10;background:#1E1F22 center/cover no-repeat;display:grid;place-items:center;overflow:hidden}
.shv-pack .shv-n{position:absolute;left:10px;top:10px;padding:2px 8px;border-radius:4px;background:rgba(17,18,20,.8);color:#fff;font-size:11.5px;font-weight:700}
.shv-ti{background:radial-gradient(circle at 50% 40%,#2B2D31,#111214)}
.shv-ti .sh-ti-name{transform:scale(1.05);pointer-events:none}
.shv-ic{background:radial-gradient(circle at 50% 45%,#35373C,#111214)}
.shv-ic img{width:44%;max-width:96px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.shv-fr{background:radial-gradient(circle at 50% 45%,#2B2D31,#111214)}
.shv-fr .shv-av{position:absolute;width:46%;aspect-ratio:1;border-radius:50%;background:#4E5058}
.shv-fr img{position:relative;width:70%;aspect-ratio:1;object-fit:contain}
.shv-art{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--tc) 35%,#111214),#111214)}
.shv-art img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.shv-emo{font-size:48px}
#app .sh2-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
#app .sh2-chips button{height:32px;padding:0 14px;border:0;border-radius:16px;background:var(--surface);box-shadow:0 0 0 1px var(--dz-edge);color:var(--slate);font:inherit;font-size:14px;cursor:pointer}
#app .sh2-chips button.on{background:var(--ink);color:var(--paper);box-shadow:none;font-weight:600}
/* fenêtre d'un objet */
.sh2-mbg{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.72);animation:sh2f .15s ease}
@keyframes sh2f{from{opacity:0}}
.sh2-m{display:grid;grid-template-columns:340px 1fr;width:min(980px,100%);height:min(660px,calc(100vh - 48px));border-radius:10px;overflow:hidden;background:#232428;box-shadow:0 24px 70px rgba(0,0,0,.6);color:#F2F3F5;font-family:"gg sans","Noto Sans","Segoe UI",system-ui,sans-serif}
.sh2-ml{display:flex;flex-direction:column;gap:14px;padding:22px;overflow:auto;background:#2B2D31}
.sh2-ml>.shv{border-radius:8px;flex:none}
.sh2-mt h2{margin:0 0 4px;font-size:24px;font-weight:700;color:#fff}
.sh2-mt p{margin:0;color:#B5BAC1;font-size:14px}
.sh2-parts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.sh2-parts button{all:unset;cursor:pointer;width:58px;border-radius:8px;overflow:hidden;box-shadow:0 0 0 2px transparent}
.sh2-parts button .shv{aspect-ratio:1}
.sh2-parts button.on,.sh2-parts button:hover{box-shadow:0 0 0 2px #5865F2}
.sh2-cur{margin-top:8px;font-size:13px;color:#DBDEE1}
.sh2-cur span{color:#949BA4}
.sh2-about{margin-top:10px;font-size:13px;line-height:1.45;color:#B5BAC1}
.sh2-mbuy{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.sh2-price{display:flex;align-items:baseline;gap:8px;font-size:15px}
.sh2-price s{color:#949BA4}
.sh2-price b{font-size:18px;color:#fff}
.sh2-btns{display:flex;gap:8px}
.sh2-buy{flex:1;height:44px;border:0;border-radius:6px;background:#5865F2;color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.sh2-buy:hover{background:#4752C4}
.sh2-gift{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;border-radius:6px;background:#5865F2;color:#fff;cursor:pointer}
.sh2-gift:hover{background:#4752C4}
.sh2-ownbig{color:#23A55A;font-weight:700;font-size:15px}
.sh2-mr{position:relative;display:flex;flex-direction:column;isolation:isolate;overflow:hidden}
.sh2-mr::before{content:"";position:absolute;inset:-30px;z-index:-2;background:var(--mb,#111214) center/cover no-repeat;filter:blur(22px) brightness(.55)}
.sh2-mr::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 45%,transparent,rgba(17,18,20,.55))}
.sh2-mtop{display:flex;justify-content:space-between;align-items:center;padding:14px 16px}
.sh2-tag{padding:6px 10px;border-radius:6px;background:rgba(17,18,20,.75);font-size:13px;font-weight:600}
.sh2-x{width:34px;height:34px;border:0;border-radius:6px;background:rgba(17,18,20,.75);color:#fff;font-size:15px;cursor:pointer}
.sh2-x:hover{background:rgba(17,18,20,.95)}
.sh2-prev{position:relative;flex:1;display:grid;place-items:center;padding:0 28px;min-height:0}
.sh2-prev img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.sh2-spin{position:absolute;top:8px;right:36px}
.sh2-hint{padding:10px 16px 16px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.7)}
@media (max-width:760px){
  .sh2-m{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto;max-height:calc(100vh - 32px);overflow:auto}
  .sh2-mr{order:-1;min-height:260px}
  .sh2-mbg{padding:12px}
  #app .sh2-hero{padding:28px 18px 18px}
  #app .sh2-hero h1{font-size:28px}
  #app .sh2-hero-arr{display:none}
  #app .sh2-row{grid-auto-columns:72%}
  #app .sh2-nav{margin:0 -12px 14px;padding:0 12px;top:56px}
  #app .sh2-search{flex-basis:160px}
}
#app .sh2-hero-r{display:flex;align-items:center;gap:12px}
#app .sh2-hero-r .sh2-arr{margin:0}
.sh2-parts button{width:52px}
.sh2-parts .shv-ti .sh-tt{display:none}
.sh2-parts .shv-ti .sh-ti-name{transform:none;font-size:20px;padding:0;background:none;border:0}
.sh2-parts .shv-ic img{width:70%}
.sh2-ml{padding-bottom:0}
.sh2-mbuy{position:sticky;bottom:0;margin:auto -22px 0;padding:14px 22px 20px;background:#2B2D31;box-shadow:0 -12px 16px -8px rgba(0,0,0,.35)}
.shv-ti .sh-ti-name{max-width:88%;white-space:normal;text-align:center;font-size:17px;line-height:1.2;transform:none}
.sh2-ml>.shv-ti .sh-ti-name{font-size:21px}
#app .sh2-cta{white-space:nowrap}
@media (max-width:760px){#app .sh2-hero-r{width:100%}#app .sh2-cta{flex:1;font-size:14px;padding:0 12px}#app .sh2-hero-in{min-height:120px}}
/* ===== Mon profil de joueur ===== */
#app .pf2-nav{top:48px}
#app .pf-split{display:block!important}
#app .pf-split-l{display:grid!important;grid-template-columns:minmax(0,560px) 1fr;gap:16px;align-items:center;margin-bottom:18px}
#app .pf-split-l .pf-hero-card{margin:0}
#app .pf-chips{gap:8px}
#app .pf-chip{border:0!important;border-radius:8px!important;background:var(--surface)!important;box-shadow:0 0 0 1px var(--dz-edge)}
#app .pf-split-r{width:100%}
#app .pf-modes{display:inline-flex;gap:2px;padding:3px;margin-bottom:14px;border-radius:8px;background:var(--sunk)}
#app .pf-modes button{height:32px;padding:0 14px;border:0!important;border-radius:6px;background:transparent;color:var(--slate);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
#app .pf-modes button.on{background:var(--dz-active);color:var(--ink);font-weight:600}
.shv-card{aspect-ratio:560/250;background-size:cover;background-position:center}
.shv-acc{position:absolute;left:10px;bottom:10px;width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 3px rgba(17,18,20,.8)}
#app .pf2-lim{font-size:12px;color:#F0B232;font-weight:600}
.pf2-bal{font-size:12.5px;color:#949BA4;margin-left:auto}
.sh2-buy:disabled{background:#4E5058;color:#B5BAC1;cursor:not-allowed}
.sh2-buy.sh2-sec2{background:#4E5058}
.sh2-buy.sh2-sec2:hover{background:#6D6F78}
.sh2-ml>.shv-card{aspect-ratio:560/250}
@media (max-width:900px){#app .pf-split-l{grid-template-columns:1fr}}
.sh2-mbuy>.sh2-buy{flex:none}
#app .pf-modes button{white-space:nowrap}
.sh2-grid .shv-c-frame,.sh2-row .shv-c-frame{background-size:300%;background-position:2% 12%}
.sh2-grid .shv-c-title,.sh2-row .shv-c-title{background-size:330%;background-position:46% 4%}
.sh2-grid .shv-c-accent{background-size:170%;background-position:30% 30%}
/* ===== Thème « Minuit » : sombre plus noir (comme le thème sombre profond de Discord) ===== */
:root[data-dz=midnight]:not([data-theme=light]){
  --paper:#18191C;--surface:#111214;--card:#111214;--sunk:#0A0A0C;--bg:#18191C;
  --side-bg:#111214;--rail-bg:#0A0A0C;--bar-bg:#18191C;
  --line:#26272B;--line-hard:#35363C;
  --dz-edge:rgba(255,255,255,.06);--dz-head:#0D0E10;
  --dz-hover:rgba(78,80,88,.28);--dz-active:rgba(78,80,88,.5);
  --dz-scroll:#2A2B30;
}
:root[data-dz=midnight]:not([data-theme=light]) body{background:#18191C}
:root[data-dz=midnight]:not([data-theme=light]) .dz-u-bg::after{background:linear-gradient(90deg,rgba(10,10,12,.8),rgba(10,10,12,.35) 60%,rgba(10,10,12,.2))}
:root[data-dz=midnight]:not([data-theme=light]) .sh2-m{background:#111214}
:root[data-dz=midnight]:not([data-theme=light]) .sh2-ml,:root[data-dz=midnight]:not([data-theme=light]) .sh2-mbuy{background:#18191C}
:root[data-dz=midnight]:not([data-theme=light]) .toast{background:#000!important}
#modalHost .pm-seg button,.pm-seg button{padding-left:6px;padding-right:6px}

/* ===== Réglages v2 (automod, bienvenue, niveaux, tickets) ===== */
:root{--dz-btn:#E3E5E8;--dz-btn-h:#D4D7DC;--dz-btn-t:#313338}
:root[data-theme=dark],:root[data-theme=dusk]{--dz-btn:#4E5058;--dz-btn-h:#6D6F78;--dz-btn-t:#fff}
:root[data-dz=midnight]:not([data-theme=light]){--dz-btn:#2E2F35;--dz-btn-h:#3F4148;--dz-btn-t:#fff}
#app .hub-lbl{text-transform:none!important;letter-spacing:0!important;font-size:13.5px!important;font-weight:600!important;color:var(--ink)!important;opacity:.92}
#app .field>label:not(.hub-lbl){font-size:13px;color:var(--slate)}
#app .cz-card>.card-h h2,#app .lv-sec>.card-h h2,#app .am-sec-t{text-transform:none!important;letter-spacing:0!important;font-size:15.5px!important;font-weight:700!important;color:var(--ink)!important}
#app .lv-sec>.card-h h2::before{display:none}
#app .cz-card>.card-h,#app .lv-sec>.card-h{padding:14px 16px!important;background:transparent!important}
#app .cz-card>.card-h .note,#app .lv-sec>.card-h .note{margin-top:3px;font-size:13px}
#app .cz-card,#app .lv-sec{border:0!important;border-radius:8px!important;box-shadow:0 0 0 1px var(--dz-edge)!important;background:var(--surface)!important}
#app .cz-card>.card-h:hover{filter:none;background:var(--dz-hover)!important}
#app .cz-chev{border:0!important;width:28px;height:28px;font-size:0!important;background:transparent}
#app .cz-chev::before{content:"";width:8px;height:8px;border-right:2px solid var(--slate);border-bottom:2px solid var(--slate);transform:translateY(-2px) rotate(45deg)}
#app .cz-card>.card-h:hover .cz-chev::before{border-color:var(--ink)}
#app .cz-all{margin:4px 0 12px}
#app .card .btn:not(.btn-solid):not(.primary):not(.danger):not(.btn-danger),#app .cz-all .btn,#app .welcome-savebar .btn:not(.btn-solid){background:var(--dz-btn)!important;border-color:transparent!important;color:var(--dz-btn-t)!important;border-radius:6px!important;font-weight:600;font-size:13.5px;padding:7px 14px}
#app .card .btn:not(.btn-solid):not(.primary):not(.danger):not(.btn-danger):hover,#app .cz-all .btn:hover,#app .welcome-savebar .btn:not(.btn-solid):hover{background:var(--dz-btn-h)!important}
#app .btn.btn-solid{border-radius:6px!important}
#app .welcome-savebar{border:0!important;border-radius:8px!important;background:var(--sunk)!important;box-shadow:0 0 0 1px var(--dz-edge)}
#app .welcome-savebar>.card-b{padding:8px 10px 8px 16px!important}
#app .welcome-savebar .note{font-size:13.5px}
#app .welcome-savebar.dirty{box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 60%,transparent),0 8px 24px rgba(0,0,0,.28)}
#app .am-p{border:0!important;border-radius:8px!important;box-shadow:0 0 0 1px var(--dz-edge);background:var(--surface)}
#app .am-p.on .am-p-h{background:transparent!important;border-bottom:1px solid var(--dz-edge)}
#app .am-p-i{border-radius:50%;width:38px;height:38px;font-size:17px}
#app .am-p-t{font-size:15px}
#app .am-act{border:0!important;border-radius:6px;background:var(--sunk);color:var(--ink);box-shadow:inset 0 0 0 1px var(--dz-edge);font-weight:500}
#app .am-act:hover{background:var(--dz-hover)}
#app .am-act.on{background:color-mix(in srgb,var(--accent) 22%,var(--surface))!important;box-shadow:inset 0 0 0 1px var(--accent);font-weight:600}
#app .am-p-b{gap:14px;padding:16px}
#app .am-p-b .fac-row{border-bottom-color:var(--dz-edge);border-radius:6px;padding:10px 8px}
#app .am-p-b .fac-row:hover{background:var(--dz-hover)}
#app .lock{border:0!important;box-shadow:inset 3px 0 0 var(--warn),0 0 0 1px var(--dz-edge);background:var(--surface)!important;color:var(--ink)}
#app .lv-sec table thead th{text-transform:none!important;letter-spacing:0!important;font-size:12.5px;font-weight:600}
#app .lv-sec table td .btn{padding:5px 12px!important;font-size:12.5px!important}
#app .lv-sec table tbody tr:hover{background:var(--dz-hover)}

/* ===== Logs : vérification en un clic (✓ / ✗) ===== */
#app .log-tbl th.lg-v{text-align:center;width:96px}
#app .log-tbl td.lg-v{text-align:center;cursor:default;vertical-align:middle}
#app .lgv{display:inline-flex;flex-direction:column;align-items:center;gap:4px;min-width:78px}
#app .lgv-bs{display:flex;gap:6px}
#app .lgv-b{width:30px;height:30px;padding:0;border:0;border-radius:6px;display:grid;place-items:center;cursor:pointer;background:var(--sunk);color:var(--faint);box-shadow:inset 0 0 0 1.5px var(--line-hard);transition:background .12s,color .12s,box-shadow .12s}
#app .lgv-b.ok:hover{color:#23A55A;box-shadow:inset 0 0 0 1.5px #23A55A}
#app .lgv-b.no:hover{color:#F23F43;box-shadow:inset 0 0 0 1.5px #F23F43}
#app .lgv-b.ok.on{background:#23A55A;color:#fff;box-shadow:none}
#app .lgv-b.no.on{background:#F23F43;color:#fff;box-shadow:none}
#app .lgv.set .lgv-b:not(.on){opacity:.4}
#app .lgv.set .lgv-b:not(.on):hover{opacity:1}
#app .lgv-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#app .lgv-by{font-size:11px;line-height:13px;min-height:13px;max-width:96px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .log-tbl td.lg-v::before{content:none!important}
@media (max-width:700px){#app .log-tbl td.lg-v{grid-column:1/-1!important;justify-content:flex-end!important;border:0!important;padding:4px 0 0!important;margin-top:4px!important}#app .lgv{flex-direction:row-reverse;gap:10px}}

/* ===== Warns staff (profil staff) ===== */
#app .sw-box,#modalHost .sw-box{margin:0 0 14px;padding:14px;border-radius:8px;background:var(--sunk);box-shadow:0 0 0 1px var(--dz-edge)}
.sw-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:14.5px}
.sw-n{min-width:22px;height:20px;padding:0 7px;border-radius:10px;display:inline-grid;place-items:center;font-size:12px;font-weight:700;background:var(--surface);color:var(--slate)}
.sw-n.on{background:#F0B232;color:#1E1F22}
.sw-l{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.sw-it{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:8px;background:var(--surface);box-shadow:inset 3px 0 0 #F0B232}
.sw-av{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none}
.sw-b{flex:1;min-width:0}
.sw-who{font-weight:700;font-size:14px;margin-bottom:2px}
.sw-old{font-size:11px;font-weight:600;padding:1px 7px;border-radius:10px;background:var(--sunk);color:var(--slate);margin-left:4px}
.sw-r{font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.sw-m{font-size:12px;color:var(--slate);margin-top:4px}
.sw-del{flex:none;width:30px;height:30px;border:0;border-radius:6px;display:grid;place-items:center;background:transparent;color:var(--slate);cursor:pointer}
.sw-del:hover{background:color-mix(in srgb,#F23F43 16%,transparent);color:#F23F43}
.sw-add{display:flex;flex-direction:column;gap:8px}
.sw-add textarea{resize:vertical;min-height:54px}
.sw-add .btn{align-self:flex-start}
.sw-foot{margin-top:10px;font-size:12px}

/* ===== Apparitions Arcanes (réglages) ===== */
#app .asp-chips{display:flex;flex-wrap:wrap;gap:6px}
#app .asp-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 10px;border-radius:6px;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--dz-edge);font-size:13.5px;font-weight:500}
#app .asp-chip button{border:0;background:transparent;color:var(--slate);cursor:pointer;width:20px;height:20px;border-radius:4px;display:grid;place-items:center;font-size:11px}
#app .asp-chip button:hover{background:color-mix(in srgb,#F23F43 18%,transparent);color:#F23F43}
#app .log-tbl th.lg-seen{width:70px}
#app .lgv-b.seen:hover{color:#5865F2;box-shadow:inset 0 0 0 1.5px #5865F2}
#app .lgv-b.seen.on{background:#5865F2;color:#fff;box-shadow:none}
#app .lgv-b.seen.others{color:#8D96F6;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#5865F2 60%,transparent)}
#app .lgv.set .lgv-b.seen{opacity:1}

/* ===== Recherche du menu : résultats lisibles ===== */
#nav .nav-results{gap:2px}
#nav .nav-res-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 10px 6px;font-size:12px;font-weight:700;color:var(--slate)}
#nav .nav-res-h span{font-weight:500;color:var(--faint);font-size:11px}
#nav .nav-results>button{height:auto!important;min-height:46px;padding-top:6px!important;padding-bottom:6px!important;align-items:center!important}
#nav .nav-results .nav-l{display:flex!important;flex-direction:column;justify-content:center;min-width:0;flex:1;line-height:1.25;overflow:hidden}
#nav .nav-results .nav-lt{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;color:var(--ink)}
#nav .nav-results .nav-sub{display:block;margin-top:2px;font-size:11.5px;font-weight:500;color:var(--faint);opacity:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nav .nav-results mark{background:color-mix(in srgb,var(--accent) 32%,transparent);color:inherit;border-radius:3px;padding:0 1px}
#nav .nav-results>button.active .nav-lt{color:#fff}
#nav .nav-results>button:first-of-type:not(.active){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
#nav .nav-res-h,#nav .nav-res-h span{white-space:nowrap}
.ugc{display:contents}

/* ===== Assistant de configuration ===== */
#app.su-on>.rail,#app.su-on>.side,#app.su-on #dzUser{display:none!important}
#app.su-on{grid-template-columns:1fr!important}
#app.su-on>.main{grid-column:1/-1!important}
#app .su-top{max-width:980px;margin:8px auto 18px}
#app .su-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
#app .su-k{font-size:13px;font-weight:600;color:var(--accent)}
#app .su-head h1{margin:4px 0 6px;font-size:28px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
#app .su-head p{margin:0;color:var(--slate);font-size:15px}
#app .su-quit{flex:none;border:0;background:var(--dz-btn);color:var(--dz-btn-t);border-radius:6px;padding:7px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
#app .su-quit:hover{background:var(--dz-btn-h)}
#app .su-prog{display:flex;align-items:center;gap:12px;margin:18px 0 12px}
#app .su-bar{flex:1;height:6px;border-radius:6px;background:var(--sunk);overflow:hidden}
#app .su-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),#23A55A);transition:width .5s ease}
#app .su-prog span{font-size:13px;font-weight:700;color:var(--slate)}
#app .su-steps{display:flex;gap:6px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
#app .su-steps li{flex:1 1 0;min-width:0}
#app .su-steps button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:8px;cursor:pointer;background:var(--surface);box-shadow:inset 0 0 0 1px var(--dz-edge);color:var(--slate);font-size:13px;font-weight:600}
#app .su-steps button:hover{color:var(--ink);background:var(--dz-hover)}
#app .su-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--sunk);color:var(--slate)}
#app .su-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .su-steps li.ok .su-n{background:#23A55A;color:#fff}
#app .su-steps li.ok button{color:var(--ink)}
#app .su-steps li.on button{box-shadow:inset 0 0 0 2px var(--accent);color:var(--ink);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
#app .su-steps li.on .su-n{background:var(--accent);color:#fff}
#app .su-steps li.sk .su-n{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-hard)}
#app .su-okbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:10px 10px 10px 14px;border-radius:8px;background:color-mix(in srgb,#23A55A 14%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,#23A55A 45%,transparent);font-size:14px;font-weight:600;color:var(--ink);animation:suIn .3s ease}
@keyframes suIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
#app .su-main{max-width:980px;margin:0 auto}
#app .su-main>.page-h h1,#app .su-main>.page-h .eyebrow{display:none}#app .su-main>.page-h{margin-top:0}
#app .su-foot{position:sticky;bottom:0;z-index:20;max-width:980px;margin:22px auto 0;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px 10px 0 0;background:var(--sunk);box-shadow:0 -10px 30px rgba(0,0,0,.25),0 0 0 1px var(--dz-edge)}
#app .su-foot .note{flex:1;text-align:center}
#app .su-done{max-width:980px;margin:0 auto}
#app .su-dl{margin:0 0 16px;font-size:15px;color:var(--slate)}
#app .su-sum{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
#app .su-si{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:14px;border-radius:10px;cursor:pointer;background:var(--surface);box-shadow:0 0 0 1px var(--dz-edge)}
#app .su-si:hover{background:var(--dz-hover)}
#app .su-si span{grid-row:1/3;font-size:24px}
#app .su-si b{font-size:14.5px;color:var(--ink)}
#app .su-si em{font-style:normal;font-size:12.5px;font-weight:700;color:#F0B232}
#app .su-si.ok em{color:#23A55A}
#app .su-dacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
@media (max-width:760px){#app .su-steps .su-l{display:none}#app .su-steps li{flex:none}#app .su-head h1{font-size:22px}#app .su-foot .note{display:none}#app .su-foot{justify-content:space-between}}

/* ===== Visite guidée : gestion via le site ===== */
#app .pt-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 16px;padding:14px 16px;border-radius:10px;background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 20%,var(--surface)),var(--surface) 70%);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
#app .pt-cta-t{display:flex;flex-direction:column;gap:3px}
#app .pt-cta-t b{font-size:15px;color:var(--ink)}
#app .pt-cta-t span{font-size:13px;color:var(--slate)}
.pt{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"txt ui" "nav nav";gap:22px 26px;align-items:center;min-height:380px}
.pt-txt{grid-area:txt}
.pt-ui{grid-area:ui;animation:ptIn .3s ease}
.pt-nav{grid-area:nav;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--dz-edge)}
@keyframes ptIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pt-k{font-size:12.5px;font-weight:700;color:var(--accent)}
.pt-txt h3{margin:6px 0 10px;font-size:23px;line-height:1.2;color:var(--ink)}
.pt-txt p{margin:0;font-size:15px;line-height:1.6;color:var(--slate)}
.pt-dots{display:flex;gap:6px}
.pt-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--line-hard);cursor:pointer}
.pt-dots button.on{width:22px;border-radius:4px;background:var(--accent)}
.pt-win{border-radius:10px;background:#1E1F22;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 14px 34px rgba(0,0,0,.35);padding:12px;color:#DBDEE1;font-size:13.5px}
:root[data-theme=light] .pt-win{background:#fff;color:#313338;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 12px 30px rgba(0,0,0,.12)}
.pt-wh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(127,127,127,.2)}
.pt-chip{padding:2px 8px;border-radius:99px;font-size:11.5px;font-weight:700;background:rgba(127,127,127,.18)}
.pt-chip.ok{background:rgba(35,165,90,.18);color:#3BD07A}
.pt-chip.warn{background:rgba(240,178,50,.18);color:#F0B232}
.pt-av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}
.pt-msg{display:flex;gap:10px;margin-bottom:10px}
.pt-msg b{font-size:13.5px}
.pt-msg small{margin-left:6px;font-size:11px;opacity:.55}
.pt-msg p{margin:2px 0 0;line-height:1.45}
.pt-tag{padding:1px 5px;border-radius:3px;background:#5865F2;color:#fff;font-size:9.5px;vertical-align:1px}
.pt-reply{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:8px;background:rgba(127,127,127,.12);opacity:.85}
.pt-reply span{color:#5865F2;font-weight:700;font-size:12.5px}
.pt-grid4{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pt-tile{display:flex;flex-direction:column;gap:3px;padding:14px;border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--dz-edge)}
.pt-tile span{font-size:22px}
.pt-tile b{font-size:14px;color:var(--ink)}
.pt-tile small{font-size:12px;color:var(--slate)}
.pt-prof{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pt-prof .pt-av{width:42px;height:42px;font-size:16px}
.pt-prof div{flex:1;display:flex;flex-direction:column}
.pt-prof small{opacity:.6;font-size:12px}
.pt-rows{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.pt-rows div{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;background:rgba(127,127,127,.1);font-size:12.5px}
.pt-dot{flex:none;width:8px;height:8px;border-radius:50%}
.pt-acts{display:flex;gap:6px;flex-wrap:wrap}
.pt-acts span{padding:6px 10px;border-radius:6px;background:rgba(127,127,127,.18);font-size:12.5px;font-weight:600}
.pt-acts span.red{background:rgba(242,63,67,.2);color:#F87171}
.pt-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.pt-field{margin-bottom:9px}
.pt-field small{display:block;margin-bottom:4px;font-size:11.5px;font-weight:700;opacity:.65}
.pt-seg{display:flex;gap:4px}
.pt-seg span{flex:1;text-align:center;padding:6px 0;border-radius:6px;background:rgba(127,127,127,.14);font-size:12px}
.pt-seg span.on{background:#5865F2;color:#fff;font-weight:700}
.pt-inp{padding:7px 9px;border-radius:6px;background:rgba(127,127,127,.12);font-size:12.5px}
.pt-btn{margin-top:4px;padding:8px;border-radius:6px;background:#5865F2;color:#fff;text-align:center;font-weight:700;font-size:12.5px}
.pt-dm small{display:block;margin-bottom:6px;font-size:11.5px;color:var(--slate);font-weight:600}
.pt-emb{padding:12px;border-radius:8px;background:#2B2D31;border-left:4px solid #E67E22;color:#DBDEE1}
.pt-emb b{font-size:13.5px}
.pt-emb p{margin:6px 0 0;font-size:12.5px;line-height:1.5;opacity:.85}
.pt-logs{padding:6px 12px}
.pt-lh,.pt-lr{display:grid;grid-template-columns:1.1fr 1.6fr 52px 74px;gap:8px;align-items:center;padding:8px 0}
.pt-lh{font-size:11.5px;font-weight:700;opacity:.6;border-bottom:1px solid rgba(127,127,127,.2)}
.pt-lr{border-bottom:1px solid rgba(127,127,127,.12);font-size:12.5px}
.pt-lr:last-child{border-bottom:0}
.pt-ld{opacity:.7}
.pt-eye,.pt-ck{display:flex;flex-direction:column;align-items:center;gap:2px}
.pt-eye{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;background:rgba(127,127,127,.15);font-size:13px;margin:0 auto}
.pt-eye.on{background:#5865F2}
.pt-eye small,.pt-ck small{font-size:10px;opacity:.65}
.pt-lr>.pt-eye{position:relative}
.pt-lr>.pt-eye small{position:absolute;top:30px;white-space:nowrap}
.pt-ck{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:3px}
.pt-ck i{width:24px;height:24px;border-radius:5px;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;background:rgba(127,127,127,.15);opacity:.6}
.pt-ck i.ok{background:#23A55A;color:#fff;opacity:1}
.pt-ck i.no{background:#F23F43;color:#fff;opacity:1}
.pt-ck small{flex-basis:100%;text-align:center}
.pt-duty{display:flex;align-items:center;gap:9px;padding:6px 0}
.pt-duty .pt-av{width:28px;height:28px;font-size:12px;box-shadow:0 0 0 2px #23A55A}
.pt-duty small{margin-left:auto;opacity:.6;font-size:11.5px}
.pt-bar{display:grid;grid-template-columns:44px 1fr 34px;align-items:center;gap:8px;margin:7px 0;font-size:12.5px}
.pt-bar i{height:8px;border-radius:4px;background:rgba(127,127,127,.15);overflow:hidden}
.pt-bar i b{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#5865F2,#23A55A)}
.pt-bar em{font-style:normal;font-weight:700;text-align:right}
.pt-note{display:block;margin-top:6px;opacity:.6;font-size:11.5px}
.pt-tiers{display:flex;flex-direction:column;gap:7px}
.pt-tier{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:8px;background:color-mix(in srgb,var(--c) 14%,transparent);box-shadow:inset 3px 0 0 var(--c)}
.pt-tier b{color:var(--c);font-size:13.5px;filter:brightness(1.4)}
.pt-tier span{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.pt-tier i{font-style:normal;padding:2px 7px;border-radius:5px;background:rgba(127,127,127,.18);font-size:11.5px}
.pt-cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pt-cmp>div{padding:16px;border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--dz-edge)}
.pt-cmp>div.on{box-shadow:0 0 0 2px var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.pt-cmp b{display:block;font-size:15.5px;color:var(--ink)}
.pt-cmp em{display:inline-block;margin:6px 0 10px;padding:2px 8px;border-radius:99px;font-style:normal;font-size:12px;font-weight:700;background:rgba(35,165,90,.18);color:#3BD07A}
.pt-cmp .on em{background:color-mix(in srgb,var(--accent) 30%,transparent);color:#C9CDFB}
.pt-cmp ul{margin:0;padding-left:18px;font-size:13px;line-height:1.8;color:var(--slate)}
@media (max-width:860px){.pt{grid-template-columns:1fr;grid-template-areas:"txt" "ui" "nav";min-height:0}.pt-two,.pt-cmp{grid-template-columns:1fr}.pt-grid4{grid-template-columns:1fr 1fr}.pt-lh,.pt-lr{grid-template-columns:1fr 1.3fr 40px 64px}}
@media (prefers-reduced-motion:reduce){.pt-ui{animation:none}}
/* Blocage par Discord (AutoMod natif) */
.ds-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:10px}
.ds-row{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;background:var(--panel)}
.ds-row+.ds-row{border-top:1px solid var(--line)}
.ds-row.on{box-shadow:inset 3px 0 0 var(--signal)}
.ds-i{font-size:18px;width:26px;text-align:center}
.ds-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ds-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
/* Menu latéral élargissable + liste des serveurs masquable (ordinateur) */
@media (min-width:1001px){
  #app:not(.su-on){grid-template-columns:64px var(--side-w,220px) 1fr}
  html.rail-off #app:not(.su-on){grid-template-columns:var(--side-w,220px) 1fr}
  html.rail-off #app .rail{display:none!important}
  html.rail-off #app .dz-user{margin-left:0;width:100%}
  #app .side .side-grip{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:5}
  #app .side .side-grip::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:2px;background:transparent;transition:background .12s}
  #app .side .side-grip:hover::after,html.side-drag #app .side .side-grip::after{background:var(--accent,#5865F2)}
  html.side-drag,html.side-drag *{cursor:col-resize!important;user-select:none!important}
  #app .side .side-h{position:relative;padding-right:36px}
  #app .rail-tgl{all:unset;position:absolute;top:50%;right:8px;transform:translateY(-50%);display:grid;place-items:center;width:26px;height:26px;border-radius:6px;color:var(--faint,#949BA4);cursor:pointer}
  #app .rail-tgl:hover,#app .rail-tgl.on{color:inherit;background:rgba(127,127,127,.16)}
  #app .rail-tgl:focus-visible{outline:2px solid var(--accent,#5865F2)}
}
@media (max-width:1000px){#app .side-grip,#app .rail-tgl{display:none}}
/* ===== Annonces v2 ===== */
#app .an2{max-width:920px}
#app .an2-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
#app .an2-head h1{font-size:22px;font-weight:700;margin:0 0 4px}
#app .an2-head p{margin:0;max-width:60ch}
#app .an2-head .btn{flex:none}
#app .an2-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--dz-edge);margin-bottom:18px}
#app .an2-tab{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:9px 12px;font-size:14px;color:var(--slate);border-bottom:2px solid transparent;margin-bottom:-1px}
#app .an2-tab span{font-size:12px;padding:1px 7px;border-radius:999px;background:var(--dz-hover);color:var(--slate)}
#app .an2-tab:hover{color:var(--ink)}
#app .an2-tab.on{color:var(--ink);font-weight:600;border-bottom-color:#5865F2}
#app .an2-tab:focus-visible{outline:2px solid #5865F2;border-radius:4px}
#app .an2-grp{margin-bottom:22px}
#app .an2-grp h2{font-size:12.5px;font-weight:600;color:var(--faint);margin:0 0 8px 2px;letter-spacing:.01em}
#app .an2-stack{display:flex;flex-direction:column;gap:10px}
#app .an2-todo-h{display:flex;align-items:center;gap:8px;margin:0 0 8px 2px;font-size:13px}
#app .an2-todo-h span{background:#F23F43;color:#fff;font-size:11.5px;font-weight:700;border-radius:999px;padding:1px 7px}
#app .an2-todo-h+.an2-stack{margin-bottom:24px}
/* mouvements d'équipe : liste compacte */
#app .an2-moves{border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--dz-edge);overflow:hidden}
#app .an2-mv{display:flex;align-items:center;gap:12px;padding:10px 14px;position:relative}
#app .an2-mv+.an2-mv{border-top:1px solid var(--dz-edge)}
#app .an2-mv:hover{background:var(--dz-hover)}
#app .an2-mi{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--k);background:color-mix(in srgb,var(--k) 16%,transparent)}
#app .an2-mt{flex:1;min-width:0}
#app .an2-ml{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:14px;line-height:1.35}
#app .an2-ml b{font-weight:600;color:var(--ink)}
#app .an2-gr{font-size:12.5px;padding:1px 8px;border-radius:5px;background:var(--dz-hover);color:var(--slate)}
#app .an2-gr.to{color:var(--k);background:color-mix(in srgb,var(--k) 14%,transparent);font-weight:600}
#app .an2-arr{color:var(--faint);font-size:13px}
#app .an2-ms{font-size:12.5px;color:var(--faint);margin-top:2px}
#app .an2-when{flex:none;font-size:12.5px;color:var(--faint);white-space:nowrap}
#app .an2-del{all:unset;flex:none;cursor:pointer;display:grid;place-items:center;width:28px;height:28px;border-radius:6px;color:var(--faint);opacity:0;transition:opacity .12s}
#app .an2-mv:hover .an2-del,#app .an2-card:hover .an2-del,#app .an2-del:focus-visible{opacity:1}
#app .an2-del:hover{color:#F23F43;background:color-mix(in srgb,#F23F43 14%,transparent)}
@media (hover:none){#app .an2-del{opacity:1}}
/* annonces écrites */
#app .an2-card{border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--dz-edge),inset 3px 0 0 var(--k);padding:14px 16px 14px 18px}
#app .an2-card.todo{box-shadow:0 0 0 1px color-mix(in srgb,var(--k) 55%,transparent),inset 3px 0 0 var(--k);background:color-mix(in srgb,var(--k) 6%,var(--surface))}
#app .an2-ch{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
#app .an2-ci{flex:none;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-size:17px;background:var(--dz-hover)}
#app .an2-ct{flex:1;min-width:0}
#app .an2-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:700;font-size:15.5px;color:var(--ink)}
#app .an2-imp{font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:999px;color:var(--k);background:color-mix(in srgb,var(--k) 15%,transparent)}
#app .an2-meta{font-size:12.5px;color:var(--faint);margin-top:2px}
#app .an2-side{display:flex;align-items:center;gap:6px;flex:none}
#app .an2-confirm{height:30px;padding:0 12px;font-size:13px}
#app .an2-ok{font-size:12.5px;color:#23A55A;font-weight:600}
#app .an2-count{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:999px;font-size:12px;color:var(--slate);background:var(--dz-hover)}
#app .an2-count i{width:10px;height:10px;border-radius:50%;background:conic-gradient(#23A55A var(--p),color-mix(in srgb,var(--slate) 30%,transparent) 0)}
#app .an2-chev{color:var(--faint);display:grid;transition:transform .15s}
#app .an2-card.open .an2-chev{transform:rotate(180deg)}
#app .an2-body{margin:10px 0 0 46px;color:var(--slate);line-height:1.55;font-size:14px;max-width:72ch}
#app .an2-body.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
#app .an2-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:12px 0 0 46px;padding-top:10px;border-top:1px solid var(--dz-edge)}
#app .an2-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:48px 16px;color:var(--faint);border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--dz-edge)}
#app .an2-empty b{color:var(--ink);font-size:15px}
#app .an2-empty .btn{margin-top:6px}
@media (max-width:700px){
  #app .an2-head{flex-direction:column}
  #app .an2-when{display:none}
  #app .an2-body,#app .an2-foot{margin-left:0}
  #app .an2-ch{flex-wrap:wrap}
  #app .an2-side{width:100%;justify-content:flex-end}
}
/* Assistant : aperçu des étapes selon le mode de gestion */
#app .su-mp-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
#app .su-mp-i{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:8px;background:var(--dz-hover)}
#app .su-mp-i>span{flex:none;width:24px;text-align:center;font-size:15px}
#app .su-mp-i.ok>span{color:#23A55A;font-weight:700}
#app .su-mp-i b{font-size:13.5px}
/* Assistant : type de serveur */
#app .sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}
#app .sp-card{all:unset;box-sizing:border-box;position:relative;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--dz-edge);transition:box-shadow .12s,background .12s}
#app .sp-card:hover{background:var(--dz-hover)}
#app .sp-card.on{box-shadow:0 0 0 2px #5865F2;background:color-mix(in srgb,#5865F2 8%,var(--surface))}
#app .sp-card:focus-visible{box-shadow:0 0 0 2px #5865F2}
#app .sp-card b{font-size:15px;color:var(--ink)}
#app .sp-ic{font-size:24px;line-height:1;margin-bottom:6px}
#app .sp-cur{position:absolute;top:10px;right:10px;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,#23A55A 16%,transparent);color:#23A55A}
#app .sp-panel{padding:16px;border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--dz-edge);display:flex;flex-direction:column;gap:14px}
#app .sp-mods{display:flex;flex-wrap:wrap;gap:6px}
#app .sp-mod{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;background:var(--dz-hover);font-size:13.5px}
#app .sp-mod b{font-weight:600}
#app .sp-mod.ok{opacity:.75}
#app .sp-ok{font-size:12px;color:#23A55A}
#app .sp-inputs{display:flex;flex-direction:column;gap:10px}
#app .sp-inputs .field{margin:0}
#app .sp-acts{display:flex;gap:8px;flex-wrap:wrap}
.sp-plan{display:flex;flex-direction:column;gap:8px}
.sp-pl{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:8px;background:var(--dz-hover,rgba(127,127,127,.12))}
.sp-pl>span{flex:none;width:22px;text-align:center;font-size:16px}
.sp-pl.skip{opacity:.8}
#app .sw-dm,.sw-dm{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--slate);cursor:pointer}
/* Créateur › Serveur (VPS) */
#app .sv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:12px}
#app .sv-card{padding:16px;border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--dz-edge);display:flex;flex-direction:column;gap:10px}
#app .sv-card h2{font-size:14px;font-weight:700;margin:0}
#app .sv-wide{margin-bottom:12px}
#app .sv-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
#app .sv-kv span{color:var(--faint)}
#app .sv-kv b{text-align:right;font-weight:600}
#app .sv-m-h{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:4px}
#app .sv-bar{height:6px;border-radius:999px;background:var(--dz-hover);overflow:hidden}
#app .sv-bar i{display:block;height:100%;border-radius:999px}
#app .sv-svc{display:flex;align-items:center;gap:8px;font-size:13.5px}
#app .sv-svc .note{margin-left:auto}
#app .sv-dot{width:8px;height:8px;border-radius:50%}
#app .sv-dot.ok{background:#23A55A}#app .sv-dot.ko{background:#F23F43}
#app .sv-log{font-family:ui-monospace,Consolas,monospace;font-size:12px;line-height:1.5;max-height:360px;overflow:auto;background:var(--dz-hover);border-radius:8px;padding:8px 10px;white-space:pre-wrap;word-break:break-word}
#app .sv-log>div{padding:2px 0;border-bottom:1px solid var(--dz-edge)}
#app .sv-log>div:last-child{border-bottom:0}
#app .sv-log .bad{color:#F23F43}#app .sv-log .warn{color:#F0B232}#app .sv-log .ok{color:#23A55A}
#app .sv-t{color:var(--faint);margin-right:8px}
/* Activité › Tendances */
#app .ai-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
#app .ai-t{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i v" "i l" "d d";column-gap:10px;padding:12px 14px;border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--dz-edge)}
#app .ai-i{grid-area:i;font-size:20px;align-self:center}
#app .ai-t b{grid-area:v;font-size:20px;font-weight:700;line-height:1.1}
#app .ai-l{grid-area:l;font-size:12.5px;color:var(--faint)}
#app .ai-d{grid-area:d;margin-top:8px;font-size:12px;color:var(--faint)}
#app .ai-d.up{color:#23A55A}#app .ai-d.down{color:#F23F43}
#app .ai-heat{display:grid;grid-template-columns:34px repeat(24,minmax(0,1fr));gap:3px;align-items:center;margin-bottom:8px}
#app .ai-heat i{display:block;aspect-ratio:1;border-radius:3px;background:linear-gradient(rgba(124,135,255,var(--a)),rgba(124,135,255,var(--a))),var(--dz-hover)}
#app .ai-leg{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--faint);margin:2px 0 8px 34px}
#app .ai-leg i{width:12px;height:12px;border-radius:3px;background:linear-gradient(rgba(124,135,255,var(--a)),rgba(124,135,255,var(--a))),var(--dz-hover)}
#app .ai-hh{font-size:10px;color:var(--faint);text-align:left;white-space:nowrap}
#app .ai-dl{font-size:11.5px;color:var(--faint)}
#app .ai-nc{display:flex;flex-direction:column;gap:12px}
#app .ai-nc>div:not(.note){display:flex;flex-direction:column}
#app .ai-nc b{font-size:22px;font-weight:700}
#app .ai-nc span{font-size:12.5px;color:var(--faint)}
@media (max-width:900px){#app .ai-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}#app .ai-grid{grid-template-columns:1fr!important}}

.tk-prio-chip{margin-left:6px;font-weight:600}
.tk-prio-sel{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--faint)}
.tk-prio-sel select{width:auto;min-width:118px;padding:6px 10px}

/* Liste des tickets en cartes sur téléphone */
@media (max-width:640px){
 .tk-table thead{display:none}
 .tk-table,.tk-table tbody{display:block;width:100%}
 .tk-table tr.clickable{display:grid;grid-template-columns:1fr auto;grid-template-areas:"player date" "type type" "status status" "assg ref";gap:6px 10px;padding:12px 14px;border-bottom:1px solid var(--line)}
 .tk-table tr.clickable[style*="display:none"]{display:none!important}
 .tk-table tr.clickable>td{display:block;padding:0!important;border:0!important;min-width:0}
 .tk-table .tk-noassg{display:none}
 .tk-table tr.clickable>td:nth-child(1){display:none}
 .tk-table tr.clickable>td:nth-child(2){grid-area:ref;justify-self:end;align-self:center;color:var(--faint);font-size:12px}
 .tk-table tr.clickable>td:nth-child(3){grid-area:player;font-weight:600}
 .tk-table tr.clickable>td:nth-child(4){grid-area:type}
 .tk-table tr.clickable>td:nth-child(5){grid-area:status;display:flex;flex-wrap:wrap;gap:6px}
 .tk-table tr.clickable>td:nth-child(5) .chip{margin-left:0}
 .tk-table tr.clickable>td:nth-child(6){grid-area:assg;font-size:13px;color:var(--faint);align-self:center}
 .tk-table tr.clickable>td:nth-child(7){grid-area:date;justify-self:end;font-size:12px;color:var(--faint)}
 .tk-table tr:not(.clickable),.tk-table tr:not(.clickable)>td{display:block}
}

/* Joueurs et sanctions en cartes sur téléphone */
@media (max-width:640px){
 #app .m-cards thead{display:none}
 #app .m-cards,#app .m-cards tbody{display:block;width:100%}
 #app .m-cards tr.clickable{display:grid;gap:8px 10px;padding:12px 14px;border-bottom:1px solid var(--line)}
 #app .m-cards tr.clickable>td{display:block;padding:0!important;border:0!important;min-width:0;max-width:none!important;background:transparent!important}
 #app .m-cards tr:not(.clickable),#app .m-cards tr:not(.clickable)>td{display:block}
 #app .m-pl tr.clickable{grid-template-columns:repeat(3,1fr);border-left:3px solid transparent}
 #app .m-pl tr.clickable>td:nth-child(1){grid-column:1/-1;border-left:0!important}
 #app .m-pl tr.clickable>td:nth-child(3)::before{content:"Avert. ";color:var(--faint);font-size:12px}
 #app .m-pl tr.clickable>td:nth-child(4)::before{content:"Messages ";color:var(--faint);font-size:12px;font-family:var(--sans,inherit)}
 #app .m-pl tr.clickable>td:nth-child(5){grid-column:1/2;align-self:center;font-size:13px;color:var(--faint)}
 #app .m-pl tr.clickable>td:nth-child(6){grid-column:2/-1;justify-self:end}
 #app .m-sc tr.clickable{grid-template-columns:1fr auto;grid-template-areas:"who ref" "type type" "motif motif" "by acts"}
 #app .m-sc tr.clickable>td:nth-child(1){grid-area:ref;justify-self:end;font-size:12px!important}
 #app .m-sc tr.clickable>td:nth-child(2){grid-area:who}
 #app .m-sc tr.clickable>td:nth-child(3){grid-area:type}
 #app .m-sc tr.clickable>td:nth-child(4){grid-area:motif}
 #app .m-sc tr.clickable>td:nth-child(5){grid-area:by;font-size:13px}
 #app .m-sc tr.clickable>td:nth-child(6){grid-area:acts;justify-self:end;align-self:center}
 #app .m-sc .pl-name{max-width:none!important}
}

/* Fiche ticket sur téléphone : actions sur une ligne qui défile */
@media (max-width:640px){
 #app .tk-acts{flex-wrap:nowrap!important;overflow-x:auto;gap:8px;padding-bottom:4px;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 #app .tk-acts::-webkit-scrollbar{display:none}
 #app .tk-acts>.btn,#app .tk-acts>.chip,#app .tk-acts>label{flex:0 0 auto;white-space:nowrap}
 #app .tk-acts>.btn{padding:8px 12px;font-size:14px}
 #app .tk-acts>.btn-solid{order:-1}
 #app .tk-acts .tk-prio-sel{flex:0 0 auto}
 #app .tk-acts>.btn:first-child{order:-2}
}

/* Résumé de la page Tickets */
#app .tks{margin:0 0 14px}
#app .tks-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:13px;color:var(--faint)}
#app .tks-sw{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
#app .tks-sw button{border:0;background:transparent;color:var(--faint);font:inherit;font-size:12.5px;padding:4px 10px;cursor:pointer}
#app .tks-sw button.on{background:var(--dz-head,var(--line));color:var(--ink,inherit);font-weight:600}
#app .tks-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#app .tks-c{background:var(--surface);border-radius:8px;box-shadow:0 0 0 1px var(--dz-edge,var(--line));padding:12px 14px;min-width:0}
#app .tks-v{font-size:22px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
#app .tks-l{font-size:13px;color:var(--slate,var(--faint));margin-top:2px}
#app .tks-d{display:block;font-size:12px;color:var(--faint);margin-top:6px}
#app .tks-d.good{color:var(--signal)}
#app .tks-d.bad{color:var(--warn)}
@media (max-width:640px){#app .tks-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#app .tks-c{padding:10px 12px}#app .tks-v{font-size:19px}}

#app .sv-mem{width:100%;height:auto;display:block}
#app .sv-mem .g{stroke:var(--line);stroke-width:1}
#app .sv-mem text{fill:var(--faint);font-size:11px}
#app .sv-mem .l{fill:none;stroke:#5865F2;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
#app .sv-mem .h{fill:transparent;cursor:default}
#app .sv-mem .h:hover{fill:#5865F2}
/* Bandeau « le bot redémarre » */
.brb{position:fixed;left:50%;top:14px;transform:translate(-50%,-140%);z-index:100000;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:10px 16px;border-radius:999px;background:#1E1F22;color:#F2F3F5;font-size:14px;font-weight:600;box-shadow:0 8px 28px rgba(0,0,0,.35);transition:transform .25s ease;pointer-events:none}
.brb.on{transform:translate(-50%,0)}
.brb.ok{background:#1F3B2C}
.brb-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:brbspin .8s linear infinite;flex:none}
@keyframes brbspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.brb{transition:none}.brb-spin{animation:none}}