:root { --red:#c8102e; --bg:#f4f4f1; --card:#fff; --line:#e5e7eb; --txt:#1f2328; --mut:#6b7280; --soft:#fde8eb; }
@media (prefers-color-scheme: dark) { :root { --bg:#16181b; --card:#1f2226; --line:#32363b; --txt:#e8eaed; --mut:#9aa0a6; --soft:#3a1f25; } }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; background:var(--bg); color:var(--txt); }
.hidden { display:none !important; }
.muted { color:var(--mut); font-size:.85rem; }
.err { color:var(--red); min-height:1.2em; margin:.6rem 0 0; }
code { background:var(--bg); padding:.1rem .35rem; border-radius:6px; }
.secret { display:block; padding:.6rem; word-break:break-all; font-size:1.05rem; letter-spacing:.06em; }
input, select, textarea, button { font:inherit; padding:.5rem .65rem; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--txt); }
input, select, textarea { width:100%; }
button, .btnlike { background:var(--red); color:#fff; border-color:var(--red); cursor:pointer; font-weight:600; text-decoration:none; display:inline-block; }
button.ghost { background:transparent; color:var(--txt); border-color:var(--line); font-weight:500; }
button:disabled { opacity:.5; cursor:default; }
label { display:block; font-size:.8rem; font-weight:600; color:var(--mut); margin:.8rem 0 .25rem; }

/* connexion */
.auth { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem; }
.auth-card { width:100%; max-width:380px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.4rem; }
.auth-card h1 { margin:0 0 .6rem; font-size:1.25rem; }
.auth-card button { width:100%; margin-top:1rem; }
.auth-card .btnlike { padding:.5rem .8rem; }

/* application */
header { display:flex; align-items:center; gap:.8rem; padding:.6rem 1rem; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
header h1 { margin:0; font-size:1.05rem; }
.stats { flex:1; display:flex; gap:.4rem; flex-wrap:wrap; }
.pill { font-size:.75rem; padding:.15rem .55rem; border-radius:99px; background:var(--bg); border:1px solid var(--line); }
.pill.new { background:var(--soft); border-color:var(--red); color:var(--red); font-weight:700; }
.menu-btn { display:none; }
main { display:grid; grid-template-columns: 220px minmax(260px, 380px) 1fr; gap:1rem; padding:1rem; align-items:start; }
#sidebar, #listPane, #detail { background:var(--card); border:1px solid var(--line); border-radius:12px; }
#sidebar { padding:.6rem; }
.side-title { font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); margin:.8rem .3rem .3rem; }
.side-title:first-child { margin-top:.2rem; }
#appList { list-style:none; margin:0; padding:0; }
#appList li { display:flex; justify-content:space-between; gap:.5rem; padding:.45rem .6rem; border-radius:8px; cursor:pointer; font-size:.9rem; }
#appList li:hover { background:var(--bg); }
#appList li.sel { background:var(--soft); color:var(--red); font-weight:700; }
#appList .n { font-size:.75rem; color:var(--mut); }
.tabs { display:flex; flex-wrap:wrap; gap:.3rem; }
.tabs button { background:transparent; color:var(--txt); border-color:var(--line); padding:.25rem .6rem; font-size:.8rem; font-weight:500; }
.tabs button.sel { background:var(--red); color:#fff; border-color:var(--red); }
#list { list-style:none; margin:0; padding:0; max-height:78vh; overflow:auto; }
#list li { padding:.65rem .85rem; border-bottom:1px solid var(--line); cursor:pointer; }
#list li:last-child { border-bottom:none; }
#list li:hover, #list li.sel { background:var(--bg); }
#list .t { font-weight:600; display:flex; gap:.4rem; align-items:center; }
#list .m { font-size:.75rem; color:var(--mut); margin-top:.15rem; }
.prio-haute { width:.6rem; height:.6rem; border-radius:50%; background:var(--red); flex-shrink:0; }
.prio-basse { width:.6rem; height:.6rem; border-radius:50%; background:#94a3b8; flex-shrink:0; }
.chip { font-size:.68rem; font-weight:700; padding:.1rem .5rem; border-radius:99px; margin-left:auto; white-space:nowrap; }
.s-nouveau { background:#fff4d6; color:#4a3b00; } .s-en_cours { background:#dbeafe; color:#1e3a8a; }
.s-resolu { background:#dcfce7; color:#14532d; } .s-ferme { background:#e5e7eb; color:#374151; }
article { padding:1rem; min-height:300px; }
article h2 { margin:.2rem 0 .6rem; font-size:1.1rem; }
.meta { font-size:.8rem; color:var(--mut); margin-bottom:.8rem; }
.desc { white-space:pre-wrap; padding:.6rem; background:var(--bg); border-radius:8px; }
.ctx { font-size:.75rem; color:var(--mut); margin:.6rem 0; word-break:break-all; }
.shots { display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0; }
.shots img { max-width:240px; max-height:240px; border-radius:8px; border:1px solid var(--line); cursor:zoom-in; }
.shots img.zoom { max-width:100%; max-height:none; cursor:zoom-out; }
.msg { margin:.5rem 0; padding:.5rem .7rem; border-radius:10px; background:var(--bg); white-space:pre-wrap; }
.msg.admin { background:var(--soft); }
.msg.internal { background:#fff4d6; color:#4a3b00; }
.msg small { display:block; color:var(--mut); }
.row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-top:.6rem; }
.row select { width:auto; }
textarea { min-height:90px; margin-top:.6rem; }
table.audit { width:100%; border-collapse:collapse; font-size:.8rem; }
table.audit td, table.audit th { text-align:left; padding:.3rem .4rem; border-bottom:1px solid var(--line); vertical-align:top; }

@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  .menu-btn { display:inline-block; }
  #sidebar { display:none; }
  #sidebar.open { display:block; }
  #list { max-height:none; }
}