:root{--bg:#0b0b12;--bar:#12121c;--card:#161624;--fg:#f2f2f7;--mut:#8b8ba0;--acc:#ff2d6f;--acc2:#25f4ee;--bd:#23233a;--ok:#3ddc97;--bad:#ff5d73}
*{box-sizing:border-box;margin:0}
html,body{background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.45}
a{color:var(--acc2)}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:20px 16px 90px}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}
.top h2{font-size:24px;font-weight:900;margin-right:auto}
.btn{background:var(--acc);color:#fff;border:0;border-radius:999px;padding:10px 20px;font-weight:700;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;border:1px solid var(--bd);color:var(--fg)}
.btn.ghost:hover{border-color:var(--mut)}
.btn.danger{background:transparent;border:1px solid var(--bad);color:var(--bad)}
.btn.sm{padding:6px 14px;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--card);border:1px solid var(--bd);border-radius:999px;padding:7px 16px;cursor:pointer;color:var(--mut);font-weight:600}
.chip[aria-pressed=true]{color:var(--fg);border-color:var(--acc)}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:10px 12px}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--acc2);outline-offset:1px}
textarea{min-height:100px;resize:vertical}
label{display:block;font-size:13px;color:var(--mut);margin:12px 0 5px}
.row{display:flex;gap:10px}.row>*{flex:1}
.mut{color:var(--mut)}.err{color:var(--bad)}.ok{color:var(--ok)}
.empty{text-align:center;color:var(--mut);padding:60px 10px}
.foot{margin-top:40px;text-align:center}
.foot button{background:none;border:0;color:var(--mut);cursor:pointer;font-size:12px}
.bar-admin{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--bar);border:1px dashed var(--acc);border-radius:12px;padding:10px 14px;margin-bottom:18px}
.bar-admin b{margin-right:auto;color:var(--acc)}
.veil{position:fixed;inset:0;background:rgba(5,5,10,.78);display:grid;place-items:center;padding:14px;z-index:50;overflow:auto}
.modal{background:var(--bar);border:1px solid var(--bd);border-radius:16px;width:100%;max-width:560px;padding:20px;max-height:92vh;overflow:auto}
.modal.wide{max-width:760px}
.modal h3{margin-bottom:6px}
.acts{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--card);border:1px solid var(--bd);padding:10px 18px;border-radius:12px;z-index:99;max-width:90vw}
.toast.bad{border-color:var(--bad)}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.thumb{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;background:var(--bg);border:1px solid var(--bd)}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover}
.thumb button{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.7);border:0;color:#fff;border-radius:50%;width:22px;height:22px;cursor:pointer}
.prog{height:6px;background:var(--bd);border-radius:3px;overflow:hidden;margin-top:8px}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2))}
@media (prefers-reduced-motion:no-preference){.veil{animation:f .15s}@keyframes f{from{opacity:0}}}

/* ===== PC : confortable ===== */
@media (min-width:1100px){.wrap{padding:28px 24px 90px}}
/* ===== Tablette / mobile ===== */
@media (max-width:700px){
  .wrap{padding:14px 12px 80px}
  .top h2{font-size:20px;width:100%}
  .top .chips{width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .chip{white-space:nowrap}
  .btn{min-height:44px}.btn.sm{min-height:38px}
  input,select,textarea{font-size:16px}
  .row{flex-direction:column}
  .veil{padding:0;align-items:end}
  .modal,.modal.wide{max-width:100%;border-radius:18px 18px 0 0;max-height:94dvh;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
  .acts{flex-direction:column-reverse}.acts .btn{width:100%}
  .toast{bottom:calc(16px + env(safe-area-inset-bottom));width:calc(100% - 24px);text-align:center}
  .bar-admin b{width:100%}
}
@media (hover:none){.btn:hover{filter:none}}