/* [MAX-PATCH forum-page 10Nov26] Le forum : la facture de la page de chat (Inter, zinc, clair et sombre), pensé d'abord
   pour le téléphone. */
:root {
  --bg: #fafafa; --fg: #18181b; --mut: #71717a; --faint: #a1a1aa; --card: #ffffff; --bd: #e4e4e7; --hover: #f4f4f5;
  --acc: #0891b2; --acc-fg: #ffffff; --err: #dc2626; --unread: #18181b; --code: #f4f4f5;
  --font: 'Inter', 'Noto Sans Thai', 'Thonburi', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #18181b; --fg: #e4e4e7; --mut: #a1a1aa; --faint: #71717a; --card: #1f1f23; --bd: #3f3f46; --hover: #27272a;
    --unread: #fafafa; --code: #27272a; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.55 var(--font); background: var(--bg); color: var(--fg); }
a { color: inherit; }
::selection { background: #71717a55; }
.mut { color: var(--mut); } .faint { color: var(--faint); } .small { font-size: 13px; } .err { color: var(--err); font-size: 14px; min-height: 1.2em; }
.bar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bd); padding-top: env(safe-area-inset-top); }
.bar-in { max-width: 48rem; margin: 0 auto; padding: 0 1rem; height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { font-weight: 700; font-size: 17px; text-decoration: none; }
.me { display: flex; gap: .5rem; align-items: center; font-size: 14px; }
.me a, .me button { text-decoration: none; }
main { max-width: 48rem; margin: 0 auto; padding: 1rem 1rem 6rem; }
h1 { font-size: 22px; line-height: 1.3; margin: .25rem 0 .5rem; } h2 { font-size: 16px; margin: 1.5rem 0 .5rem; }
button, .btn { font: inherit; font-size: 14px; padding: .45rem .85rem; border-radius: .6rem; border: 1px solid var(--bd); background: var(--card);
  color: inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
button:hover, .btn:hover { background: var(--hover); }
button.pri, .btn.pri { background: var(--acc); border-color: var(--acc); color: var(--acc-fg); }
button.ghost { border-color: transparent; background: transparent; padding: .3rem .5rem; }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { width: 100%; font: inherit; color: inherit; background: var(--card); border: 1px solid var(--bd); border-radius: .6rem; padding: .55rem .7rem; }
textarea { resize: vertical; min-height: 6rem; line-height: 1.5; }
label { display: block; font-size: 13px; color: var(--mut); margin: .8rem 0 .3rem; }
.card { background: var(--card); border: 1px solid var(--bd); border-radius: .9rem; padding: 1rem; margin: .75rem 0; }
/* catégories */
.cats { display: flex; gap: .4rem; flex-wrap: wrap; margin: .25rem 0 1rem; }
.cat { display: inline-flex; align-items: center; gap: .35rem; font-size: 13px; padding: .2rem .65rem; border-radius: 999px; border: 1px solid var(--bd);
  text-decoration: none; white-space: nowrap; }
.cat .dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.cat.on { background: var(--hover); border-color: var(--faint); font-weight: 600; }
.pill { display: inline-flex; align-items: center; gap: .3rem; font-size: 12px; color: var(--mut); white-space: nowrap; }
.pill .dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }
.head-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
/* la liste des fils */
.topics { border-top: 1px solid var(--bd); }
.topic { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; padding: .8rem .25rem; border-bottom: 1px solid var(--bd); text-decoration: none; }
.topic:hover { background: var(--hover); }
.topic .t { font-size: 15.5px; color: var(--mut); }
.topic.unread .t { color: var(--unread); font-weight: 600; }
.topic .meta { grid-column: 1; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--mut); }
.topic .side { grid-row: 1 / span 2; grid-column: 2; text-align: right; font-size: 12.5px; color: var(--mut); align-self: center; }
.topic .n { font-weight: 600; color: var(--fg); font-size: 14px; display: block; }
.mark { font-size: 11px; color: var(--mut); }
.newdot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--acc); margin-right: .35rem; vertical-align: middle; }
/* un fil */
.post { padding: 1rem 0; border-bottom: 1px solid var(--bd); }
.post.hidden-post { opacity: .55; }
.post-head { display: flex; align-items: center; gap: .55rem; font-size: 13.5px; }
.av { width: 2rem; height: 2rem; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; flex: none; }
.who { font-weight: 600; } .tag { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--mut);
  border: 1px solid var(--bd); border-radius: 999px; padding: 0 .4rem; }
.body { margin: .4rem 0 0 2.55rem; overflow-wrap: anywhere; }
.body p { margin: .45rem 0; } .body pre { background: var(--code); padding: .7rem; border-radius: .5rem; overflow-x: auto; font-size: 13px; }
.body code { background: var(--code); padding: .05rem .3rem; border-radius: .3rem; font-size: 13px; } .body pre code { background: none; padding: 0; }
.body blockquote { margin: .5rem 0; padding-left: .8rem; border-left: 3px solid var(--bd); color: var(--mut); }
.body img { max-width: 100%; } .body a { color: var(--acc); }
.mention { color: var(--acc); font-weight: 600; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .4rem; margin: .6rem 0 0 2.55rem; }
.photos a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: .5rem; background: var(--hover); }
.photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photos.one { grid-template-columns: 1fr; } .photos.one a { aspect-ratio: auto; max-height: 28rem; } .photos.one img { height: auto; max-height: 28rem; object-fit: contain; }
.post-foot { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin: .5rem 0 0 2.55rem; }
.react { font-size: 13px; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--bd); background: transparent; }
.react.mine { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.picker { display: inline-flex; gap: .1rem; } [hidden] { display: none !important; } .picker button { padding: .15rem .35rem; border: 0; background: transparent; font-size: 16px; }
/* écrire */
.composer { margin-top: 1rem; }
.composer .tools { display: flex; gap: .4rem; align-items: center; margin-top: .5rem; flex-wrap: wrap; }
.composer .tools .grow { flex: 1; }
.thumbs { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.thumb { position: relative; width: 4.5rem; height: 4.5rem; border-radius: .5rem; overflow: hidden; background: var(--hover); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button { position: absolute; top: 2px; right: 2px; padding: 0 .35rem; font-size: 12px; border-radius: 999px; }
.preview { border: 1px dashed var(--bd); border-radius: .6rem; padding: .5rem .8rem; min-height: 6rem; }
.toast { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--fg); color: var(--bg);
  padding: .55rem 1rem; border-radius: .7rem; font-size: 14px; z-index: 50; max-width: 90vw; }
.row { display: flex; gap: .5rem; align-items: center; justify-content: space-between; padding: .45rem 0; border-top: 1px solid var(--bd); }
.row:first-child { border-top: 0; }
.link { word-break: break-all; font-family: ui-monospace, monospace; font-size: 12.5px; background: var(--hover); padding: .5rem; border-radius: .5rem; margin: .5rem 0; }
.adminbar { display: flex; gap: .35rem; flex-wrap: wrap; margin: .25rem 0 .5rem; }
.empty { padding: 2rem 0; text-align: center; color: var(--mut); }
@media (max-width: 520px) { .body, .photos, .post-foot { margin-left: 0; } h1 { font-size: 20px; } .composer .tools .grow { flex-basis: 100%; order: 3; display: none; } .composer .tools .pri { margin-left: auto; } }

/* [MAX-PATCH forum-notify 10Nov26] la cloche, la liste du « @ », le message ciblé */
.bell { position: relative; text-decoration: none; font-size: 17px; line-height: 1; padding: .2rem; }
.badge { position: absolute; top: -.35rem; right: -.45rem; background: var(--acc); color: #fff; font-size: 10.5px; font-weight: 700;
  min-width: 1.1rem; height: 1.1rem; border-radius: 999px; display: grid; place-items: center; padding: 0 .25rem; }
.ac { border: 1px solid var(--bd); border-radius: .6rem; background: var(--card); margin-top: .25rem; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.ac-it { display: flex; width: 100%; align-items: center; gap: .5rem; border: 0; border-radius: 0; background: transparent; padding: .4rem .6rem; text-align: left; }
.ac-it .av { width: 1.6rem; height: 1.6rem; font-size: 11px; } .ac-it .tag { margin-left: auto; }
.ac-it.on, .ac-it:hover { background: var(--hover); }
.post.focus { background: color-mix(in srgb, var(--acc) 8%, transparent); border-radius: .6rem; transition: background 2s; }