*{box-sizing:border-box}
:root{--acc:#334155;--bg:#0f172a;--bg2:#111827;--bdr:#1f2937;--hover:#0b1324;--danger:#ef4444;--text:#e5e7eb;--alt:#0b1222}
html.theme-light{--acc:#64748b;--bg:#f3f4f6;--bg2:#ffffff;--bdr:#e5e7eb;--hover:#f5f7fb;--danger:#dc2626;--text:#0f172a;--alt:#f8fafc}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
.sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:var(--bg2);border-right:1px solid var(--bdr);display:flex;flex-direction:column;padding:12px 10px;gap:6px;transform:translateX(0);transition:transform .25s ease;height:100vh;overflow-y:auto;scroll-behavior:smooth}
.sidebar::-webkit-scrollbar{width:10px}
.sidebar::-webkit-scrollbar-track{background:var(--bg)}
.sidebar::-webkit-scrollbar-thumb{background:var(--acc);border-radius:8px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;padding:8px;border-radius:10px;background:var(--bg2);position:sticky;top:0;z-index:1}
.badge{margin-left:auto;background:var(--acc);border:1px solid #475569;padding:2px 8px;border-radius:999px;font-size:.75rem;opacity:.9}
.hamburger{background:transparent;border:1px solid var(--acc);color:var(--text);padding:6px 10px;border-radius:8px;cursor:pointer}
.menu{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.item{padding:10px 12px;border-radius:8px;border:1px solid transparent}
.item.active,.item:hover{background:var(--hover);border-color:var(--acc)}
.group{border:1px solid var(--bdr);border-radius:10px;background:var(--bg);margin:4px 0}
.group>summary{padding:10px 12px;cursor:pointer;list-style:none;font-weight:600;user-select:none;transition:all .2s ease}
.group[open]>summary{background:var(--hover)}
.subwrap{overflow:hidden;height:0;transition:height .28s ease;will-change:height}
.sub{display:block;padding:8px 16px 8px 28px;border-top:1px solid var(--bdr);transition:transform .1s ease, background-color .2s ease}
.sub.active{background:var(--hover)}
.clickable.pressed{transform:translateX(2px) scale(.995); background:var(--hover)}
.muted{display:block;padding:8px 16px 8px 28px;opacity:.75}
.content{margin-left:260px;min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--bdr);background:var(--bg2);justify-content:space-between}
.container{padding:16px;max-width:1000px;padding-bottom:96px}
.footer{margin-top:auto;padding:12px 16px;border-top:1px solid var(--bdr);opacity:.7}
.visible-mobile{display:none}
@media (max-width: 900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .content{margin-left:0}
  .visible-mobile{display:inline-flex}
}
.card{background:var(--bg2);border:1px solid var(--bdr);border-radius:12px;padding:16px;margin-bottom:12px}
.card.post-main{border-color:var(--acc);box-shadow:0 0 0 1px rgba(51,65,85,.3),0 6px 16px rgba(0,0,0,.25)}
.card.post-reply{background:var(--alt);border:1px solid var(--bdr);border-left:3px solid var(--acc);opacity:.96;font-size:.95rem;padding:12px}
.card.post-reply .meta{font-size:.82rem;opacity:.75}
.card--create{outline:1px dashed var(--acc)}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid var(--acc);background:var(--hover);color:var(--text);text-decoration:none;transition:transform .1s ease}
.btn:hover{background:#0e162b}
.btn:active{transform:scale(.98)}
.btn-ghost{border-color:transparent;background:transparent}
.btn-danger{border-color:var(--danger);background:#3b0f13}
.btn-danger:hover{background:#4a1014}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.actions-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.meta{opacity:.8;font-size:.9rem}
input, textarea, select{width:100%;padding:10px;border-radius:8px;border:1px solid var(--acc);background:var(--hover);color:var(--text)}
textarea.drag{outline:2px dashed #60a5fa; background:#0b1530}
label{display:block;margin-bottom:6px}
form .actions{display:flex;gap:10px;flex-wrap:wrap}
.preview{max-width:100%;display:block;margin-top:8px;border:1px dashed var(--acc);border-radius:8px;padding:6px}
.toolbar{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.toolbar button{border:1px solid var(--acc);background:var(--hover);color:var(--text);border-radius:8px;padding:6px 8px;cursor:pointer}
.toolbar button:hover{background:#0e162b}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 900px){.split{grid-template-columns:1fr}}
.thumb{display:inline-block;margin:6px;border:1px solid var(--acc);border-radius:8px;padding:6px;text-align:center}
.thumb img{max-width:160px;max-height:120px;display:block;margin:auto}
table{width:100%;border-collapse:collapse;margin:8px 0;border:1px solid var(--bdr)}
th,td{border:1px solid var(--bdr);padding:8px;text-align:left}
th{background:#0b1324}
ul{padding-left:18px}
ul input[type='checkbox']{transform:translateY(1px);margin-right:8px}
/* --- Dock de création de topic (fixe en bas) --- */
body.dock-open .container{padding-bottom:360px}
.dock-compose{ position:fixed; left:260px; right:0; bottom:0; background:var(--bg2); border-top:1px solid var(--bdr);
  box-shadow:0 -8px 24px rgba(0,0,0,.35); z-index:60; transform:translateY(calc(100% - 44px)); transition:transform .25s ease; }
.dock-compose.open{ transform:translateY(0); }
.dock-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; cursor:pointer; user-select:none; background:var(--bg); border-bottom:1px solid var(--bdr); }
.dock-title{ font-weight:600 } .dock-body{ padding:12px; max-height:300px; overflow:auto }
@media (max-width: 900px){ .dock-compose{ left:0 } }
/* --- Grille Factions --- */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
@media (max-width: 900px){ .grid{ grid-template-columns:1fr 1fr } }
@media (max-width: 580px){ .grid{ grid-template-columns:1fr } }
.faction-card{ position:relative; overflow:hidden; border-radius:12px; border:1px solid var(--bdr); background:var(--bg2) }
.faction-card a{ display:block; }
.faction-card img{ width:100%; height:220px; object-fit:cover; transform:scale(1); transition:transform .25s ease; display:block }
.faction-card:hover img{ transform:scale(1.06) }
.faction-caption{ position:absolute; left:0; right:0; bottom:0; padding:8px 10px; background:linear-gradient(transparent, rgba(0,0,0,.55)); font-weight:600 }
/* --- Theme toggle button + smooth theme transition --- */
.top-actions{margin-left:auto}
.theme-toggle{border:1px solid var(--acc); background:var(--hover); color:var(--text); border-radius:999px; width:38px; height:38px; display:inline-grid; place-items:center; cursor:pointer; transition:transform .25s ease}
.theme-toggle.spin{transform:rotate(200deg) scale(1.1)}
body, .sidebar, .topbar, .card, .footer, .brand, .group>summary, .item, .sub, input, textarea, select { transition: background-color .25s ease, color .25s ease, border-color .25s ease }
/* Fixed theme button top-right */
.theme-toggle{position:fixed; top:8px; right:10px; z-index:9999; border:1px solid var(--acc); background:var(--hover); color:var(--text); border-radius:999px; width:38px; height:38px; display:inline-grid; place-items:center; cursor:pointer; transition:transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease}
.theme-toggle.spin{transform:rotate(200deg) scale(1.08)}
/* Smooth theme swaps */
body, .sidebar, .topbar, .card, .footer, .brand, .group>summary, .item, .sub, input, textarea, select { transition: background-color .25s ease, color .25s ease, border-color .25s ease }
/* Factions grid: keep 3 in a row more often and uniform height */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
@media (max-width: 840px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 560px){ .grid{ grid-template-columns:1fr } }
.faction-card img{ width:100%; height:190px; object-fit:cover; transform:scale(1); transition:transform .25s ease; display:block }


/* ==== Characters (PJ) ==== */
.char-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (max-width: 860px){ .char-grid{ grid-template-columns:1fr; } }
.char-card{ border:1px solid var(--bdr,#1f2937); border-radius:12px; padding:10px 12px; background:var(--bg2,#111827); display:block; text-decoration:none; color:inherit; }
.char-card:hover{ transform: translateY(-1px); transition: transform .15s ease; }
.char-row1{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
.char-name{ font-weight:700; font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.char-pill{ font-size:.9rem; border:1px solid var(--bdr,#1f2937); padding:2px 8px; border-radius:999px; background:var(--bg,#0f172a); }

.char-row2{ display:flex; gap:12px; flex-wrap:wrap; font-size:.9rem; color:#9ca3af; }

.pj .pj-head{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.pj .pill{ font-size:.9rem; border:1px solid var(--bdr,#1f2937); padding:2px 8px; border-radius:999px; display:inline-block; background:var(--bg,#0f172a); }
.pj-stats{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:8px; margin:8px 0 12px; }
.pj-stats .stat{ border:1px solid var(--bdr,#1f2937); border-radius:10px; padding:8px; text-align:center; background:var(--bg2,#111827); }
.stat-label{ font-size:.8rem; color:#9ca3af; letter-spacing:.6px; }
.stat-score{ font-weight:800; font-size:1.15rem; }
.stat-mod{ font-size:.9rem; color:#93c5fd; }

.pj-secondary{ display:flex; gap:10px; margin-bottom:10px; }

/* Form grid */
#create-form .form-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
@media (max-width: 880px){ #create-form .form-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 580px){ #create-form .form-grid{ grid-template-columns:1fr; } }
#create-form label{ display:flex; flex-direction:column; gap:6px; font-size:.95rem; }
#create-form input[type="text"], #create-form input[type="number"], #create-form textarea{ width:100%; }

.stats{ border:1px solid var(--bdr,#1f2937); border-radius:10px; padding:8px; margin:10px 0; }
.stats-grid{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; }
@media (max-width: 880px){ .stats-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 580px){ .stats-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

.prose img, .pj-notes img{ max-width:100%; height:auto; display:block; }


/* Avatars */
.avatar { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border:1px solid var(--bdr,#1f2937); background: var(--bg2,#111827); }
.avatar.sm { width: 40px; height: 40px; border-radius: 8px; }
.avatar.lg { width: 96px; height: 96px; }
.char-row1 .avatar.sm { flex:0 0 auto; }

/* Align row after adding avatar */
.char-row1{ display:flex; align-items:center; gap:10px; justify-content:space-between; }
.char-row1 .char-name{ flex:1 1 auto; }

/* Buttons group */
.pj-actions .btn{ margin-left:6px; }

/* Pour que les images Markdown ne débordent pas */
.md-img { max-width: 100%; height: auto; display: block; }

/* ---- Anti-débordement texte/images dans le contenu ---- */
:where(.prose, .pj-notes, .card, .char-card) {
  /* casse propre des mots/URLs ultra longues */
  overflow-wrap: anywhere;        /* moderne */
  word-wrap: break-word;          /* compat anciens */
  word-break: break-word;         /* secours */
  hyphens: auto;                  /* césure auto si langue définie */
}

/* Les images sont déjà bridées, on renforce au cas où */
:where(.prose, .pj-notes) img,
img.md-img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Blocs de code : on évite la barre horizontale en forçant le wrap */
:where(.prose, .pj-notes) pre,
:where(.prose, .pj-notes) code,
pre code {
  white-space: pre-wrap;   /* conserve les espaces mais permet le retour à la ligne */
  word-break: break-word;
}

/* Tables dans le contenu : ne pas déborder */
:where(.prose, .pj-notes) table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;        /* pour forcer le wrap dans les cellules */
}
:where(.prose, .pj-notes) th,
:where(.prose, .pj-notes) td {
  word-break: break-word;
  overflow-wrap: anywhere;
}