/* ============================================================================
   iDeal DP — Back-office — design « Ideal DP Backend »
   Tokens et composants fidèles au design de référence.
   ========================================================================== */
:root{
  --bg:#F5F6FA; --surface:#FFFFFF; --ink:#0E1016; --text:#0E1016; --text2:#565C6E; --text3:#8A90A2;
  --line:#E7E9F0; --outline:#E7E9F0; --sv:#F1F2F7;
  --primary:#4F46E5; --pri2:#6366F1; --pril:#EEF0FE;
  --sec:#F43F5E; --ok:#16A34A; --okl:#E7F6EC; --warn:#D97706; --warnl:#FCF1E2;
  --danger:#DC2626; --dangerl:#FCEBEB; --info:#0EA5E9; --sky:#0284C7;
  --sb:#12131A; --sb-line:#22242F; --sb-text:#C6CAD8; --sb-muted:#565C72;
  --radius:16px; --radius-sm:11px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
.muted{color:var(--text3);font-weight:500}
.serif,.disp{font-family:Sora,Inter,sans-serif}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#c9cdda;border-radius:999px}
::-webkit-scrollbar-track{background:transparent}
@keyframes bkIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes bkFade{from{opacity:0}to{opacity:1}}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:9px 14px;font-size:13px;font-weight:700;font-family:inherit;transition:.15s}
.btn:hover{filter:brightness(.98)}
.btn-primary{background:var(--primary);color:#fff;border:none}
.btn-primary:hover{background:#4338CA}
.btn-block{width:100%;height:50px;font-size:15px;border-radius:13px}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:9px}
.btn-ok{background:var(--okl);color:var(--ok);border:none}
.btn-danger{background:var(--dangerl);color:var(--danger);border:none}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text2)}
.linklike{background:none;border:none;color:var(--primary);font-weight:700;cursor:pointer;font-size:13px;font-family:inherit;padding:0}

/* ── Login ───────────────────────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(1200px 700px at 70% -10%,#1c1e46,#0b0c11 60%)}
.login-card{width:100%;max-width:880px;display:grid;grid-template-columns:1.05fr .95fr;border-radius:24px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.5);animation:bkIn .5s ease both}
.login-left{background:linear-gradient(160deg,#3730A3,#4F46E5 55%,#7C3AED);padding:44px 40px;color:#fff;display:flex;flex-direction:column}
.login-logo{height:34px;width:auto;filter:brightness(0) invert(1);align-self:flex-start;object-fit:contain}
.login-left-foot{margin-top:auto}
.secure-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 13px;font-size:12px;font-weight:700;letter-spacing:.3px;margin-bottom:18px}
.login-title{font-family:Sora,sans-serif;font-size:28px;font-weight:800;line-height:1.15;letter-spacing:-.5px}
.login-sub{font-size:14px;line-height:1.6;color:rgba(255,255,255,.82);margin:12px 0 0;max-width:330px}
.login-host{margin-top:34px;display:flex;align-items:center;gap:8px;font-size:11.5px;color:rgba(255,255,255,.6)}
.host-dot{width:7px;height:7px;border-radius:999px;background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.25)}
.login-right{background:var(--surface);padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.login-h{font-family:Sora,sans-serif;font-size:21px;font-weight:800;margin-bottom:4px}
.login-hsub{font-size:13.5px;color:var(--text2);margin-bottom:26px}
.login-right label{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:7px}
.field{height:48px;border:1.5px solid var(--line);border-radius:12px;display:flex;align-items:center;padding:0 14px;margin-bottom:16px;background:var(--sv)}
.field:focus-within{border-color:var(--primary);background:var(--surface)}
.field-ic{color:var(--text3);margin-right:8px}
.field input{border:none;outline:none;background:transparent;font-size:14px;color:var(--text);width:100%;font-family:inherit}
.otp-row{display:flex;gap:8px;margin-bottom:22px}
.otp-cell{flex:1;height:50px;border:1.5px solid var(--line);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--primary);background:var(--sv)}
.otp-cell.filled{border-color:var(--primary)}
.otp-hidden{position:fixed;left:-9999px;opacity:0.01;width:40px;height:40px;font-size:16px}
.login-secnote{margin-top:16px;font-size:11.5px;color:var(--text3);display:flex;align-items:center;gap:6px;justify-content:center}
.login-alt{margin-top:14px;display:flex;justify-content:space-between;gap:10px}
.form-error{color:var(--danger);font-size:13px;margin-top:10px;min-height:16px;text-align:center}

/* ── Console layout ──────────────────────────────────────────────────────── */
.console{display:flex;min-height:100vh;background:var(--bg)}
.sidebar{width:250px;flex:none;background:var(--sb);color:var(--sb-text);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;transition:width .2s ease}
.sb-brand{padding:20px 20px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--sb-line)}
.sb-brand .brand-img{height:22px;width:auto;filter:brightness(0) invert(1);object-fit:contain}
.sb-brand-name{font-weight:800;font-size:15px;color:#fff}
.sb-secure{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.5px;color:#6EE7B7;border:1px solid #1f5140;background:#0e2a20;border-radius:6px;padding:3px 7px}
.sb-nav{flex:1;overflow-y:auto;padding:14px 12px 20px}
.sb-group{cursor:pointer;display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:11px 12px;border:1px solid #303441;border-radius:9px;background:#191b24;color:#aeb4c7;font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;transition:background .15s,border-color .15s,color .15s}
.sb-group:first-child{margin-top:0}
.sb-group:hover,.sb-group:focus-visible{background:#20232e;color:#fff;outline:none}
.sb-group.open{border-bottom-color:transparent;border-radius:9px 9px 0 0}
.sb-group-caret{font-size:12px;color:currentColor}
.sb-group-items{margin-bottom:8px;padding:5px;border:1px solid #303441;border-top:0;border-radius:0 0 9px 9px;background:#151720}
.sb-group[data-group="0"]{color:#93c5fd;border-color:#24476c;background:#132235}
.sb-group[data-group="0"] + .sb-group-items{border-color:#24476c}
.sb-group[data-group="1"]{color:#6ee7b7;border-color:#215647;background:#102820}
.sb-group[data-group="1"] + .sb-group-items{border-color:#215647}
.sb-group[data-group="2"]{color:#fcd34d;border-color:#624d1e;background:#2b2412}
.sb-group[data-group="2"] + .sb-group-items{border-color:#624d1e}
.sb-group[data-group="3"]{color:#fda4af;border-color:#66313a;background:#2d171b}
.sb-group[data-group="3"] + .sb-group-items{border-color:#66313a}
.sb-group[data-group="4"]{color:#c4b5fd;border-color:#463b69;background:#211b32}
.sb-group[data-group="4"] + .sb-group-items{border-color:#463b69}
.nav-item{cursor:pointer;width:100%;display:flex;align-items:center;gap:11px;background:transparent;border:none;border-radius:11px;padding:10px 11px;margin-bottom:2px;color:var(--sb-text);font-size:13.5px;font-weight:500;text-align:left;font-family:inherit}
.nav-item:hover{background:rgba(255,255,255,.05)}
.nav-item.active{background:linear-gradient(135deg,#4F46E5,#6366F1);color:#fff;font-weight:700}
.nav-item .ico{width:20px;display:flex;justify-content:center;font-size:15px;opacity:.85}
.nav-item.active .ico{opacity:1}
.nav-item .nlabel{flex:1}
.nav-badge{background:var(--sec);color:#fff;font-size:10.5px;font-weight:800;border-radius:999px;padding:2px 7px;min-width:18px;text-align:center}
.sb-foot{padding:12px;border-top:1px solid var(--sb-line);display:flex;align-items:center;gap:10px}
.sb-ava{width:34px;height:34px;border-radius:9px;background:#1c1e2a;padding:4px;object-fit:contain}
.sb-user{flex:1;min-width:0}
.sb-user b{display:block;font-size:13px;font-weight:700;color:#EAECF4}
.sb-user span{font-size:11px;color:#6b7186}
.sb-logout{cursor:pointer;background:#1c1e2a;border:none;color:#9aa0b4;width:32px;height:32px;border-radius:9px;font-size:15px}
.sidebar-toggle{width:36px;height:36px;flex:none;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text2);font-size:12px;cursor:pointer}
.sidebar-toggle:hover{border-color:#b9bdcb;background:var(--sv);color:var(--text)}
.sidebar-collapsed .sidebar{width:72px}
.sidebar-collapsed .sb-brand{justify-content:center;padding:20px 8px 16px}
.sidebar-collapsed .sb-brand-name,.sidebar-collapsed .sb-secure,.sidebar-collapsed .sb-group,.sidebar-collapsed .nav-item .nlabel,.sidebar-collapsed .nav-item .nb,.sidebar-collapsed .nav-badge,.sidebar-collapsed .sb-user,.sidebar-collapsed .sb-ava{display:none}
.sidebar-collapsed .sb-nav{padding:10px 8px 14px}
.sidebar-collapsed .sb-group-items{display:block!important;margin:0 0 8px;padding:4px;border:1px solid #303441;border-radius:9px}
.sidebar-collapsed .nav-item{justify-content:center;padding:10px 8px;margin-bottom:2px}
.sidebar-collapsed .nav-item .ico{width:auto;font-size:17px}
.sidebar-collapsed .sb-foot{justify-content:center;padding:10px 8px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:64px;flex:none;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 26px;position:sticky;top:0;z-index:5}
.topbar-title{font-family:Sora,sans-serif;font-size:18px;font-weight:800;letter-spacing:-.3px;margin:0}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.topbar-search{width:300px;max-width:34vw;height:40px;background:var(--sv);border:1px solid var(--line);border-radius:11px;display:flex;align-items:center;padding:0 13px;gap:9px;color:var(--text3);font-size:13.5px}
.topbar-search input{border:none;outline:none;background:transparent;font-size:13.5px;color:var(--text);width:100%;font-family:inherit}
.bell{cursor:pointer;position:relative;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--surface);font-size:16px;color:var(--text2)}
.bell-dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:999px;background:var(--sec)}
.env-chip{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:11px;font-size:13px;font-weight:700}
.env-dot{width:8px;height:8px;border-radius:999px;background:var(--ok)}
.demo-banner{margin:16px 26px 0;background:var(--warnl);color:#8a5a00;border:1px solid #f0dcae;border-radius:12px;padding:11px 16px;font-size:13px}
.content{flex:1;overflow-y:auto;padding:26px;animation:bkFade .3s ease both}

/* ── Cards / KPIs / tables ───────────────────────────────────────────────── */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.card-head h3{font-size:15px;font-weight:800;margin:0}
.card-head .sp{margin-left:auto}
.section-title{font-weight:800;font-size:15px;margin:2px 0 12px}
.section-sub{font-size:12.5px;color:var(--text2);margin:0 0 16px}

.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.kpi-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--pril);color:var(--primary)}
.kpi-delta{font-size:12px;font-weight:800;color:var(--ok);background:var(--okl);padding:3px 8px;border-radius:999px}
.kpi-val{font-family:Sora,sans-serif;font-size:26px;font-weight:800;letter-spacing:-.5px}
.kpi-label{font-size:12.5px;color:var(--text2);margin-top:2px}

table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:11.5px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;padding:12px 10px;background:var(--sv);border-bottom:1px solid var(--line)}
tbody td{padding:12px 10px;border-top:1px solid var(--line);font-size:13.5px;vertical-align:middle}
tbody tr:hover{background:#fafbff}
.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.table-wrap table thead th:first-child,.table-wrap table tbody td:first-child{padding-left:18px}
.tpad{padding:13px 18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text2);display:flex;align-items:center}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;border-radius:999px;padding:4px 11px}
.b-ok{background:var(--okl);color:var(--ok)} .b-warn{background:var(--warnl);color:var(--warn)}
.b-danger{background:var(--dangerl);color:var(--danger)} .b-muted{background:var(--sv);color:var(--text2)}
.b-info{background:#E4F4FD;color:var(--sky)} .b-pri{background:var(--pril);color:var(--primary)}
.dot{display:inline-block;width:8px;height:8px;border-radius:999px;margin-right:6px}
.dot-on{background:var(--ok)} .dot-off{background:var(--text3)}
.avatar{width:34px;height:34px;border-radius:999px;object-fit:cover;background:var(--sv);flex:none}
.u-cell{display:flex;align-items:center;gap:10px}
.u-cell .u-name{font-weight:700;font-size:13.5px}
.u-cell .u-sub{font-size:11.5px;color:var(--text3)}

.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer;background:var(--surface);color:var(--text2)}
.pill.active{border-color:var(--primary);background:var(--pril);color:var(--primary)}
.pill .cnt{font-size:11px;font-weight:800;opacity:.6}
.pillbar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px}

.prov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.prov{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.prov .name{font-weight:800;font-size:14px}
.prov .meta{font-size:12px;color:var(--text2)}
.field-inp{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--sv);color:var(--text);font-size:13px;font-family:inherit;box-sizing:border-box}

.music-form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.music-legal{margin:0 0 14px;padding:10px 12px;border:1px solid #F2CD83;border-radius:8px;background:var(--warnl);color:#8A5A00;font-size:12px;line-height:1.45}
.music-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.music-field > span{font-size:11.5px;font-weight:800;color:var(--text2);text-transform:uppercase;letter-spacing:.4px}
.music-field.music-wide{grid-column:span 2}
.music-file-control{height:38px;min-width:0;display:flex;align-items:center;gap:9px;padding:5px 8px;border:1px solid var(--line);border-radius:9px;background:var(--sv)}
.music-file-control input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.music-file-control label{flex:none;padding:5px 9px;border-radius:7px;background:var(--pril);color:var(--primary);font-size:12px;font-weight:800;cursor:pointer}
.music-file-control > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2);font-size:12px}
.music-consent{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:16px;font-size:12.5px;color:var(--text2)}
.music-consent label{display:flex;align-items:center;gap:7px;font-weight:700}
.music-consent a{margin-left:auto;color:var(--primary);font-weight:700}
.music-submit{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:16px;min-height:38px}
.music-list-head{padding:15px 18px;margin:0}
.music-table{overflow-x:auto}
.music-table table{min-width:960px}
.music-preview{display:block;width:210px;max-width:22vw;height:34px}
.music-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.music-tags span{padding:2px 6px;border-radius:6px;background:var(--sv);color:var(--text2);font-size:10.5px;font-weight:700}
.music-actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text3);font-size:19px;cursor:pointer}
.icon-btn.featured{border-color:#F2CD83;background:var(--warnl);color:var(--warn)}
.music-artist-preview:not(:empty){margin-top:14px}
.artist-preview-row{display:flex;align-items:center;gap:14px}
.artist-preview-disc{width:46px;height:46px;border-radius:50%;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px var(--line)}
.artist-preview-disc span{color:#fff;font-size:16px;text-shadow:0 1px 4px rgba(0,0,0,.75)}
.artist-preview-square{width:64px;height:64px;border-radius:10px;background-size:cover;background-position:center;box-shadow:0 0 0 1px var(--line)}
.artist-thumb{width:40px;height:40px;border-radius:8px;background-size:cover;background-position:center;box-shadow:0 0 0 1px var(--line)}
@media(max-width:900px){.music-form-grid{grid-template-columns:1fr 1fr}.music-field.music-wide{grid-column:span 2}.music-preview{max-width:none}}
@media(max-width:620px){.music-form-grid{grid-template-columns:1fr}.music-field.music-wide{grid-column:auto}.music-consent{align-items:flex-start;flex-direction:column}.music-consent a{margin-left:0}.music-submit{align-items:stretch;flex-direction:column}.music-submit .btn{width:100%}}

@media(max-width:760px){
  .console{width:100%;max-width:100vw;overflow-x:hidden}
  .sidebar{width:64px}
  .sb-brand{justify-content:center;padding:16px 8px}
  .sb-brand-name,.sb-secure,.sb-group,.nav-item .nlabel,.nav-item .nb,.nav-badge,.sb-user,.sb-ava{display:none}
  .sb-nav{padding:8px 7px 14px}
  .sb-group-items{display:block!important;margin:0 0 7px;padding:3px;border:1px solid #303441;border-radius:9px}
  .nav-item{justify-content:center;padding:11px 8px;margin-bottom:4px}
  .nav-item .ico{width:auto;font-size:18px}
  .sb-foot{justify-content:center;padding:9px 7px}
  .topbar{height:56px;padding:0 12px}
  .topbar-title{font-size:15px}
  .topbar-right{display:none}
  .demo-banner{margin:10px 12px 0;padding:9px 11px;font-size:11.5px}
  .content{padding:12px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .card{padding:15px;margin-bottom:12px}
  .music-import .card-head{align-items:flex-start;flex-wrap:wrap}
  .music-import .card-head .sp{display:none}
  .music-import .card-head .linklike{width:100%}
  .music-table{max-width:100%}
}

.progress{height:6px;border-radius:999px;background:var(--sv);overflow:hidden}
.progress > i{display:block;height:100%;border-radius:999px;background:var(--primary)}
.toggle{width:56px;height:32px;border-radius:999px;border:none;position:relative;cursor:pointer;transition:.2s;background:var(--line)}
.toggle.on{background:var(--ok)}
.toggle > i{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:999px;background:#fff;transition:.2s;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.toggle.on > i{left:27px}
.tsm{width:44px;height:26px}
.tsm > i{width:20px;height:20px}
.tsm.on > i{left:21px}

.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1100px){.media-grid{grid-template-columns:repeat(2,1fr)}}
.media{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--sv)}
.media img{width:100%;height:150px;object-fit:cover;display:block}
.media .m-tag{position:absolute;top:8px;left:8px;font-size:10.5px;font-weight:800;color:#fff;padding:3px 8px;border-radius:999px}
.media .m-body{padding:10px 12px}
.media .m-owner{font-weight:700;font-size:12.5px}
.media .m-meta{font-size:11px;color:var(--text3)}

/* Console de modération des médias */
.media.sel{border-color:var(--primary);box-shadow:0 0 0 2px rgba(79,70,229,.25)}
.media .m-check{position:absolute;top:6px;right:8px;z-index:2;background:rgba(255,255,255,.92);border-radius:6px;padding:2px 4px;line-height:0}
.media .m-check input{width:16px;height:16px;cursor:pointer}
.media .m-seal{position:absolute;top:34px;left:8px;font-size:10.5px;font-weight:800;color:#fff;background:rgba(2,132,199,.92);padding:3px 8px;border-radius:999px}
.media .m-gone{height:150px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text3);background:repeating-linear-gradient(45deg,#F3F4F6,#F3F4F6 8px,#EAECEF 8px,#EAECEF 16px)}
.media .m-actions{display:flex;gap:6px;margin-top:8px}
.modbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.modbar .input{min-width:150px;flex:0 0 auto}
.modbar #mf-q{flex:1 1 240px}
.media video{width:100%;height:150px;object-fit:cover;display:block;background:#111}
.viewswitch{display:flex;gap:6px}

/* Réels en blocs */
.reel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1200px){.reel-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.reel-grid{grid-template-columns:repeat(2,1fr)}}
.reel-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.reel-thumb{position:relative;background:#111}
.reel-thumb img,.reel-thumb video{width:100%;height:210px;object-fit:cover;display:block}
.reel-thumb .m-gone{height:210px}
.reel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;pointer-events:none}
.reel-flag{position:absolute;top:8px;left:8px;background:rgba(220,38,38,.94);color:#fff;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px}
.reel-seal{position:absolute;top:8px;right:8px;background:rgba(2,132,199,.94);color:#fff;font-size:11px;padding:3px 7px;border-radius:999px}
.reel-body{padding:10px 12px}
.reel-cap{font-weight:700;font-size:12.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reel-meta{font-size:11px;color:var(--text3);margin-top:3px}
.reel-stats{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--text2);margin-top:7px}
.reel-mini{width:56px;height:74px;border-radius:8px;overflow:hidden;background:#111}
.reel-mini img,.reel-mini video{width:100%;height:100%;object-fit:cover;display:block}
.reel-mini .m-gone{height:74px;font-size:9px;text-align:center}

/* Modales de modération — préfixe dédié : les classes .modal appartiennent déjà
   aux fiches utilisateur et aux révisions de traduction. */
.mdl-back{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,17,26,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .16s ease}
.mdl-back.show{opacity:1}
.mdl{width:min(520px,100%);max-height:86vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(15,17,26,.28);transform:translateY(10px) scale(.985);transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.mdl-back.show .mdl{transform:none}
.mdl-head{display:flex;gap:14px;align-items:flex-start;padding:20px 22px 0}
.mdl-head h4{margin:0;font-size:16.5px;font-weight:800;letter-spacing:-.2px}
.mdl-head p{margin:3px 0 0;font-size:12.5px;color:var(--text3)}
.mdl-ic{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;background:#EEF0FE;color:#4F46E5}
.mdl.m-danger .mdl-ic{background:#FCEBEB;color:#DC2626}
.mdl.m-warn .mdl-ic{background:#FCF1E2;color:#D97706}
.mdl.m-seal .mdl-ic{background:#E4F4FD;color:#0284C7}
.mdl.m-ok .mdl-ic{background:#E9F7EF;color:#16A34A}
.mdl-body{padding:14px 22px 4px}
.mdl-text{margin:0 0 4px;font-size:13px;line-height:1.55;color:var(--text2)}
.mdl-ref code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--text3);word-break:break-all}
.mdl-field{display:block;margin-top:14px}
.mdl-field>span{display:block;font-size:11.5px;font-weight:700;margin-bottom:5px;color:var(--text2)}
.mdl-field>span i{font-style:normal;font-weight:600;color:#DC2626;font-size:10.5px;margin-left:4px}
.mdl-field .input{width:100%}
.mdl-check{display:flex;align-items:flex-start;gap:9px;margin-top:14px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--sv);cursor:pointer}
.mdl-check input{margin-top:2px;width:16px;height:16px;flex:0 0 auto}
.mdl-check b{display:block;font-size:12.5px}
.mdl-check span{display:block;font-size:11.5px;color:var(--text3);margin-top:2px}
.mdl-err{margin-top:10px;font-size:12px;font-weight:600;color:#DC2626;background:#FCEBEB;border-radius:9px;padding:8px 11px}
.mdl-foot{display:flex;justify-content:flex-end;gap:9px;padding:18px 22px 20px}
.mdl-list{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.mdl-list li{background:var(--sv);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:12px}
.mdl-list code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--text3);margin-bottom:3px;word-break:break-all}
.mdl-timeline{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.mdl-timeline li{border-left:2px solid var(--line);padding:0 0 0 12px}
.mdl-timeline li span{display:block;font-size:11.5px;color:var(--text3);margin-top:3px}
.mdl-timeline li em{display:block;font-style:normal;font-size:12px;color:var(--text2);margin-top:2px}
.mdl-menu{display:grid;gap:8px;margin-top:12px}
.mdl-menu button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--sv);border:1px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;font:inherit}
.mdl-menu button:hover{border-color:var(--primary);background:#F5F6FE}
.mdl-menu .mi{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;background:var(--surface);border:1px solid var(--line)}
.mdl-menu b{display:block;font-size:13px}
.mdl-menu i{display:block;font-style:normal;font-size:11.5px;color:var(--text3);margin-top:1px}

/* Galerie photos d'un membre */
.avatar.clickable{cursor:zoom-in;transition:transform .12s ease,box-shadow .12s ease}
.avatar.clickable:hover{transform:scale(1.08);box-shadow:0 0 0 2px var(--primary)}
.gal-back{align-items:center}
.gal{width:min(760px,100%);max-height:92vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(15,17,26,.32);transform:translateY(10px) scale(.985);transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.mdl-back.show .gal{transform:none}
.gal-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.gal-head b{font-size:15px}
.gal-head span{font-size:12.5px;color:var(--text3)}
.gal-x{margin-left:auto;cursor:pointer;border:none;background:var(--sv);width:30px;height:30px;border-radius:999px;font-size:14px;color:var(--text2)}
.gal-stage{position:relative;display:flex;align-items:center;justify-content:center;background:#0F111A;min-height:340px}
.gal-frame{width:100%;height:min(58vh,460px);display:flex;align-items:center;justify-content:center}
.gal-frame img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:999px;border:none;background:rgba(255,255,255,.85);color:#111;font-size:20px;line-height:1;cursor:pointer}
.gal-nav:hover{background:#fff}
.gal-prev{left:12px}
.gal-next{right:12px}
.gal-strip{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;border-bottom:1px solid var(--line)}
.gal-thumb{position:relative;flex:0 0 auto;width:58px;height:58px;border-radius:10px;overflow:hidden;border:2px solid transparent;background:var(--sv);cursor:pointer;padding:0}
.gal-thumb.on{border-color:var(--primary)}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal-nothumb{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text3);font-size:12px}
.gal-off{position:absolute;inset:0;background:rgba(15,17,26,.45)}
.gal-foot{display:flex;align-items:center;gap:8px;padding:12px 16px}
.gal-foot .badge{margin-right:4px}

/* Codes de déblocage */
.uc-code-cell{white-space:nowrap}
.uc-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:1.5px;color:var(--text3)}
.uc-code.on{color:var(--text);font-weight:700;letter-spacing:2px;background:#F5F6FE;border:1px solid #C7CBF5;border-radius:7px;padding:2px 7px}
.uc-code.muted{font-style:italic;letter-spacing:0;font-size:11.5px}
.mdl-field textarea.input{width:100%;resize:vertical;font:inherit;line-height:1.45}
.pill .cnt{margin-left:5px;font-size:11px;opacity:.7}
.uc-suggest{margin-top:8px;border:1px solid var(--line);border-radius:11px;overflow:hidden;max-height:230px;overflow-y:auto;background:var(--surface)}
.uc-suggest button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);padding:9px 11px;cursor:pointer;font:inherit}
.uc-suggest button:last-child{border-bottom:none}
.uc-suggest button:hover{background:#F5F6FE}
.uc-suggest img,.uc-suggest .uc-suggest-av{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--sv)}
.uc-suggest b{display:block;font-size:12.5px}
.uc-suggest i{display:block;font-style:normal;font-size:11px;color:var(--text3)}
.uc-suggest .badge{margin-left:auto}
.uc-suggest-empty{padding:11px;font-size:12px;color:var(--text3)}
.btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:auto}
.btn[disabled]:hover{filter:none}
.uc-fresh{margin-top:14px;border:1px solid #C7CBF5;background:#F5F6FE;border-radius:13px;padding:12px 14px}
.uc-fresh-head b{font-size:13.5px}
.uc-fresh-head span{display:block;font-size:11.5px;color:var(--text3);margin-top:2px}
.uc-fresh-list{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.uc-fresh-list div{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:5px 8px}
.uc-fresh-list code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;letter-spacing:2px;font-weight:700}
.uc-fresh-foot{display:flex;gap:8px}
tr.uc-new{animation:ucNew 2.4s ease-out}
tr.uc-new td{background:#F5F6FE}
@keyframes ucNew{0%{background:#DDE1FB}100%{background:transparent}}
.more-wrap{display:flex;justify-content:center;padding:18px 0}
.mono-cell{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--text3);word-break:break-all}
.row-actions{display:flex;gap:6px;white-space:nowrap}
.btn-xs{padding:4px 9px;font-size:11px;border-radius:8px}
.btn-warn{background:#D97706;color:#fff;border-color:#D97706}
.btn-warn:hover{background:#B45309}

.bulkbar{display:flex;align-items:center;gap:10px;background:#F5F6FE;border:1px solid #C7CBF5;border-radius:13px;padding:11px 16px;margin-bottom:14px}
.bulkbar b{color:var(--primary)}
/* File de modération : une ligne par signalement. Une file chargée doit rester
   lisible d'un coup d'œil ; le détail ne s'ouvre qu'à la demande. */
.report-list{display:grid;gap:6px}
.report-case{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--info);border-radius:9px;padding:0}
.report-case.urgent{border-left-color:var(--danger)}
.rc-row{display:grid;grid-template-columns:auto auto minmax(140px,1.4fr) minmax(120px,1fr) auto auto;align-items:center;gap:12px;padding:8px 12px}
.rc-tags{display:flex;gap:4px;align-items:center;flex-wrap:nowrap}
.rc-preview{display:block;width:44px;height:44px;border-radius:8px;overflow:hidden;border:1px solid var(--line);flex:none}
.rc-preview img{width:100%;height:100%;object-fit:cover;display:block}
.rc-gone{display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--text3);border-style:dashed}
.rc-preview:empty{width:0;border:0}
.rc-cell{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.rc-cell strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-sub{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-risk{font-size:13px;font-weight:800;color:var(--text2);min-width:28px;text-align:right}
.rc-actions{display:flex;gap:5px;justify-content:flex-end}
.rc-more{border-top:1px solid var(--line);padding:8px 12px;font-size:12px;color:var(--text2)}
.rc-more summary{cursor:pointer;font-weight:700;font-size:11.5px}
.report-label{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.report-meta{font-size:12px;color:var(--text2);margin-top:4px;line-height:1.45}
.report-note,.report-appeal,.report-protection{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--sv);font-size:12px;line-height:1.4}
.report-appeal{background:#E4F4FD;color:#075985}
.report-protection{background:var(--warnl);color:#8A5A00;font-weight:700}
.report-evidence{display:flex;gap:6px;overflow-x:auto;margin-top:8px}
.report-evidence img{width:54px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
@media(max-width:900px){
  .rc-row{grid-template-columns:auto 1fr auto;grid-template-areas:'preview tags risk' 'preview reason reason' 'target target target' 'actions actions actions';gap:6px}
  .rc-tags{grid-area:tags}.rc-risk{grid-area:risk}.rc-preview{grid-area:preview}
  .rc-cell:nth-of-type(1){grid-area:reason}.rc-cell:nth-of-type(2){grid-area:target}
  .rc-actions{grid-area:actions;justify-content:flex-start}
}
.empty{padding:40px;text-align:center;color:var(--text3);font-size:14px}
.chart{display:flex;align-items:flex-end;gap:10px;height:190px;padding-top:10px}
.chart .bar{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
.chart .bar > i{width:100%;max-width:26px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--pri2),var(--primary))}
.chart .bar span{font-size:10px;color:var(--text3)}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.row-flex{display:flex;align-items:center;gap:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* Certification : les deux prises de vivacité, côte à côte et légendées. */
.cert-pair{display:flex;gap:10px}
.cert-thumb,.cert-miss{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--text3);text-decoration:none;width:56px}
.cert-thumb img{width:54px;height:54px;object-fit:cover;border-radius:8px;display:block}
.cert-miss > b{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border:1px dashed var(--line);border-radius:8px;font-weight:400}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#12131A;color:#fff;padding:11px 18px;border-radius:12px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:200;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.modal-back{position:fixed;inset:0;background:rgba(8,12,24,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:150;padding:20px}
.modal{background:var(--surface);border-radius:20px;width:min(560px,96vw);max-height:90vh;overflow-y:auto;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.modal-head{display:flex;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:17px;font-weight:800}
.modal-x{margin-left:auto;cursor:pointer;border:none;background:var(--sv);width:32px;height:32px;border-radius:999px;font-size:15px;color:var(--text2)}
.modal-body{padding:20px 22px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.kv:first-child{border-top:none}
.kv .k{color:var(--text2)}
.kv .v{font-weight:700;text-align:right}
.otp-info{background:var(--sv);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:18px;font-size:13px;color:var(--text2);text-align:center}
.otp-info strong{color:var(--text)}
.otp-row.otp-focused .otp-cell{border-color:var(--primary)}

/* Drapeaux : SVG hébergés, car Windows ne rend aucun émoji de drapeau. */
.flag{display:inline-block;width:20px;height:15px;border-radius:2px;object-fit:cover;vertical-align:-2px;box-shadow:0 0 0 1px rgba(0,0,0,.10);background:var(--sv)}
.flag-none{box-shadow:0 0 0 1px rgba(0,0,0,.08);background:repeating-linear-gradient(45deg,#EEE,#EEE 3px,#F7F7F7 3px,#F7F7F7 6px)}

/* Mini histogramme 14 jours, sans dependance graphique. */
.spark{display:flex;align-items:flex-end;gap:3px;height:56px}
.spark > i{flex:1;border-radius:3px 3px 0 0;min-height:2px;transition:opacity .15s}
.spark > i:hover{opacity:.72}