/*
 * INFOS.CENTER — CORRECTED CSS
 *
 * app.css est conservé comme couche de compatibilité.
 * Le CSS premium récent est appliqué ensuite afin de conserver
 * les améliorations visuelles et les nouveaux composants.
 */

:root {
  --bg: #080b0d;
  --panel: #0d1216;
  --border: #26313a;
  --border-soft: #1b252d;
  --text: #e7edf1;
  --muted: #8996a1;
  --muted-2: #61707c;
  --accent: #d7ff45;
  --orange: #ff6b1a;
  --blue: #5da9ff;
  --purple: #a77bff;
  --danger: #ff6b6b;
  --up: #4bd27b;     /* +1 : vert */
  --down: #ff6b6b;   /* -1 : rouge */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}
button, input, textarea, select { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; background: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 310px;
  grid-template-rows: 58px 1fr;
}

/* Top bar */
.topbar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 22px;
  padding: 0 18px;
  background: rgba(8, 11, 13, .96);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.brand { width: 190px; display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.3px; }
.brand-mark {
  width: 31px; height: 31px; border: 2px solid var(--accent); border-radius: 9px;
  display: grid; place-items: center; color: var(--accent);
  box-shadow: 0 0 18px rgba(215,255,69,.08);
}
.brand-mark::before { content: "◆"; font-size: 12px; }
.search {
  height: 38px; max-width: 650px; flex: 1;
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: #111820; border: 1px solid #202c35; border-radius: 20px; color: var(--muted);
}
.search input { width: 100%; outline: 0; border: 0; background: transparent; color: var(--text); }
.search input::placeholder { color: #687681; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pill {
  height: 36px; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); background: #0f151a; border-radius: 18px;
  padding: 0 14px; color: #b9c5cc; font-weight: 700;
}
.pill:hover { border-color: #3a4852; color: var(--text); }
.pill.accent { color: #0a0d0e; background: var(--accent); border-color: var(--accent); font-weight: 800; }
.pill.accent:hover { background: #e4ff78; }
.user-chip { display: inline-flex; align-items: center; gap: 8px; color: #c6d0d6; font-weight: 700; font-size: 13px; padding: 0 6px; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: #18242b; color: var(--accent); font-weight: 800; font-size: 12px; text-transform: uppercase;
}
.badge { font-size: 10px; font-weight: 800; color: #0a0d0e; background: var(--accent); padding: 2px 7px; border-radius: 9px; }

/* Sidebar */
.sidebar {
  border-right: 1px solid var(--border); background: #090d10; padding: 18px 12px;
  position: sticky; top: 58px; height: calc(100vh - 58px); overflow: auto;
}
.nav-section { margin: 0 7px 9px; color: #63717c; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0;
  border-radius: 7px; color: #aeb9c1; transition: background .15s ease, color .15s ease; width: 100%; text-align: left;
}
.nav-item:hover, .nav-item.active { background: #172129; color: var(--text); }
.nav-item.active { box-shadow: inset 3px 0 var(--accent); }
.nav-icon { width: 19px; text-align: center; color: #8b99a4; }
.nav-item.active .nav-icon { color: var(--accent); }
.community { margin-top: 25px; }
.sidebar-bottom { margin-top: 55px; padding: 0 9px; color: #52606a; font-size: 11px; line-height: 1.8; }

/* Main */
.main { min-width: 0; padding: 28px 26px 70px; }
.wrap { max-width: 900px; margin: 0 auto; }
.community-header { display: flex; align-items: center; gap: 15px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.community-logo {
  width: 55px; height: 55px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 14px; border: 1px solid #384700; color: var(--accent); background: #111703; font-size: 25px; font-weight: 800;
}
.community-title { flex: 1; min-width: 0; }
.community-title h1 { margin: 0 0 3px; font-size: 24px; letter-spacing: -.5px; }
.community-title p { margin: 0; color: var(--muted); }
.new-topic { background: var(--orange); color: white; border-radius: 18px; padding: 10px 15px; font-weight: 800; white-space: nowrap; }
.new-topic:hover { background: #ff7c33; }
.join-inline { margin-right: 4px; }
.join-inline.joined { color: var(--muted); }

.sortbar { margin-top: 14px; display: flex; gap: 6px; border-bottom: 1px solid var(--border); padding-bottom: 9px; }
.sort { color: var(--muted); border-radius: 7px; padding: 8px 12px; font-weight: 700; }
.sort:hover { background: #182127; color: var(--text); }
.sort.selected { background: #182127; color: var(--accent); }

.post {
  padding: 19px 4px; border-bottom: 1px solid var(--border-soft); transition: background .15s;
}
.post:hover { background: rgba(255,255,255,.018); }
.post-content { min-width: 0; }
.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--muted-2); font-size: 11px; margin-bottom: 7px; }
.meta a:hover { color: var(--text); text-decoration: underline; }
.meta .sub { color: #c6d0d6; font-weight: 800; }
.tag {
  display: inline-flex; align-items: center; border-radius: 12px; padding: 4px 9px;
  color: #061006; font-size: 10px; font-weight: 900;
}
.tag.feature { background: var(--accent); }
.tag.help { background: var(--blue); }
.tag.discussion { background: var(--purple); color: white; }
.tag.question { background: var(--orange); color: white; }
.tag.performance { background: #2e9ee9; color: white; }
.post h2 { margin: 0 0 8px; font-size: 21px; line-height: 1.3; letter-spacing: -.3px; }
.post h2 a:hover { color: var(--accent); }
.post p { margin: 0; max-width: 800px; color: #9aa7b0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.vote-box {
  width: 44px; min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 4px 0; border: 1px solid #202b33; background: #0e151a; border-radius: 10px;
}
.vote-box.row { width: auto; min-height: 0; flex-direction: row; padding: 0 3px; border-radius: 17px; }
.vote-btn {
  width: 34px; height: 29px; display: grid; place-items: center; padding: 0;
  border-radius: 7px; color: #788792; transition: color .15s ease, background .15s ease;
}
.vote-btn svg { width: 17px; height: 17px; fill: currentColor; }
/* +1 toujours verdâtre, -1 toujours rougeâtre ; couleur pleine une fois voté. */
.vote-btn.up { color: rgba(75,210,123,.65); }
.vote-btn.down { color: rgba(255,107,107,.6); }
.vote-btn.up:hover, .vote-btn.up.voted { color: var(--up); background: rgba(75,210,123,.12); }
.vote-btn.down:hover, .vote-btn.down.voted { color: var(--down); background: rgba(255,107,107,.12); }
.score { min-width: 30px; text-align: center; color: #d7e0e5; font-size: 12px; line-height: 18px; font-weight: 850; }
/* Score vert s'il est positif, rouge s'il est négatif. */
.score.positive { color: var(--up); }
.score.negative { color: var(--down); }

.post-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.post-action {
  height: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 0 9px;
  border-radius: 7px; color: #74828c; font-size: 11px; font-weight: 700;
}
.post-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.post-action:hover { background: #172128; color: #d5dee3; }
.post-action.danger:hover { color: var(--danger); background: rgba(255,107,107,.08); }

.empty { padding: 50px 10px; text-align: center; color: var(--muted); line-height: 1.6; }
.empty strong { display: block; color: var(--text); font-size: 16px; margin-bottom: 6px; }
.empty .new-topic { display: inline-block; margin-top: 14px; }

/* Thread */
.back-link { display: inline-flex; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 14px; }
.back-link:hover { color: var(--text); }
.thread { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #0b1115; }
.thread-header { padding: 22px 22px 0; }
.thread-header h2 { margin: 10px 0 0; font-size: 26px; letter-spacing: -.5px; line-height: 1.25; }
.thread-body { padding: 16px 22px 20px; color: #b1bcc4; line-height: 1.65; display:block; }
.thread-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.thread-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 18px; padding-top: 13px; border-top: 1px solid #182229; }

.comments { border-top: 1px solid var(--border); padding: 20px 22px 28px; }
.comments-head { display: flex; justify-content: space-between; color: #c6d0d6; font-weight: 800; margin-bottom: 18px; }
.comment { position: relative; margin-left: 4px; padding: 0 0 17px 25px; border-left: 2px solid #202c34; }
.comment .comment { margin-left: 22px; margin-top: 14px; padding-bottom: 0; }
.comment::before {
  content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: #26333c; border: 2px solid #0b1115;
}
.comment-meta { color: #71808b; font-size: 11px; margin-bottom: 5px; }
.comment-meta strong { color: #b9c5cc; }
.comment-meta .op { color: var(--accent); font-weight: 800; margin-left: 4px; }
.comment-body { margin: 0; color: #9ba8b1; line-height: 1.55; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-body.deleted { color: var(--muted-2); font-style: italic; }
.comment-actions { margin-top: 7px; display: flex; align-items: center; gap: 3px; color: #66757f; font-size: 11px; }
.comment-action {
  display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 7px;
  border-radius: 6px; color: inherit; font-weight: 700;
}
.comment-action:hover { background: #172128; color: #cbd5db; }
.comment-score.positive { color: var(--up); }
.comment-score.negative { color: var(--down); }
.comment-action.voted-up, .comment-action.voted-up:hover { color: var(--up); }
.comment-action.voted-down, .comment-action.voted-down:hover { color: var(--down); }
.comment-action.danger:hover { color: var(--danger); }
.comment-action.reply-btn:hover { color: var(--accent); }

.composer-box { margin-bottom: 22px; }
.composer-box textarea, .field input, .field textarea, .field select {
  width: 100%; background: #0e151a; color: var(--text); border: 1px solid #25313a;
  border-radius: 9px; padding: 11px 12px; outline: 0; resize: vertical; line-height: 1.5;
}
.composer-box textarea { min-height: 88px; }
.composer-box textarea:focus, .field input:focus, .field textarea:focus, .field select:focus { border-color: #4a5a1a; }
.composer-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.btn { height: 34px; padding: 0 15px; border-radius: 17px; font-weight: 800; font-size: 12px; }
.btn.primary { background: var(--accent); color: #0a0d0e; }
.btn.primary:disabled { opacity: .5; cursor: default; }
.btn.ghost { color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: #172128; }

.gate {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border: 1px solid #2c3a13; background: #0f1508; border-radius: 10px; padding: 14px 16px; margin: 4px 0 20px;
}
.gate p { margin: 0; color: #c6d0d6; line-height: 1.5; }
.gate p span { display: block; color: var(--muted); font-size: 12px; }
.gate-actions { display: flex; gap: 8px; }
.gate.locked { margin: 6px 0 0; border-style: dashed; }

/* Right rail */
.rightbar {
  border-left: 1px solid var(--border); background: #090d10; padding: 18px 14px;
  position: sticky; top: 58px; height: calc(100vh - 58px); overflow: auto;
}
.card { border: 1px solid var(--border); background: #0c1216; border-radius: 10px; padding: 16px; margin-bottom: 13px; }
.card-title { font-weight: 800; margin-bottom: 7px; }
.card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.mini-logo { width: 39px; height: 39px; border: 1px solid #394700; border-radius: 50%; display: grid; place-items: center; color: var(--accent); font-weight: 800; }
.card h3 { margin: 0 0 3px; font-size: 14px; }
.card p { color: #8b99a4; line-height: 1.5; font-size: 12px; }
.card-sub { font-size: 11px; color: #71808b; }
.join { width: 100%; border-radius: 17px; padding: 9px; background: var(--orange); color: white; font-weight: 900; margin: 8px 0 4px; }
.join.joined { background: transparent; border: 1px solid var(--border); color: #b9c5cc; }
.rules { margin: 10px -2px 0; padding: 0; list-style: none; counter-reset: rule; }
.rules li { counter-increment: rule; display: flex; gap: 9px; padding: 8px 0; border-top: 1px solid #192229; color: #a1adb5; font-size: 11px; }
.rules li::before { content: counter(rule); color: #61707b; min-width: 12px; }
.quick-link { display: flex; gap: 9px; padding: 8px 0; color: #a3afb7; font-size: 12px; }
.quick-link:hover { color: var(--accent); }
.related { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid #192229; }
.related:last-child { border-bottom: 0; }
.related-dot { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: #18242b; display: grid; place-items: center; color: var(--accent); font-size: 11px; }
.related-title { min-width: 0; font-size: 12px; line-height: 1.35; }
.related-title:hover { color: var(--accent); }
.related-title small { display: block; color: #5f6d77; margin-top: 2px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50; background: rgba(3,5,6,.72);
  display: grid; place-items: center; padding: 16px;
}
.modal {
  width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: #0c1216; border: 1px solid var(--border); border-radius: 14px; padding: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.modal h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.3px; }
.modal .lead { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 700; color: #b9c5cc; margin-bottom: 6px; }
.field .hint { font-size: 11px; color: var(--muted-2); margin-top: 5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-error { color: var(--danger); font-size: 12px; min-height: 16px; margin: 4px 0 8px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  background: #172128; border: 1px solid #2c3a44; color: var(--text); padding: 10px 16px; border-radius: 10px; font-size: 13px;
}

/* ---------- Pages multiples : profil, paramètres, vérification ---------- */
.app.no-rail { grid-template-columns: 230px minmax(0, 1fr); }
.app.no-rail .rightbar { display: none; }
.search-form { flex: 1; max-width: 650px; display: flex; }
.search-form .search { width: 100%; max-width: none; }

img.avatar, .avatar { object-fit: cover; flex: 0 0 auto; }
.avatar.sm { width: 20px; height: 20px; font-size: 10px; }
.avatar.md { width: 28px; height: 28px; }
.avatar.lg { width: 96px; height: 96px; font-size: 38px; border: 3px solid #0b1115; box-shadow: 0 0 0 1px var(--border); }
.avatar.xl { width: 120px; height: 120px; font-size: 46px; }
.author { display: inline-flex; align-items: center; gap: 6px; }
.author:hover .author-name { color: var(--text); text-decoration: underline; }
.comment-meta .author { vertical-align: middle; }

.page-title { margin: 0 0 4px; font-size: 24px; letter-spacing: -.5px; }
.page-lead { margin: 0 0 22px; color: var(--muted); }

.profile-hero {
  display: flex; gap: 20px; align-items: center; padding: 6px 0 24px;
  border-bottom: 1px solid var(--border);
}
.profile-hero h1 { margin: 0; font-size: 26px; letter-spacing: -.5px; overflow-wrap: anywhere; }
.profile-hero .handle { color: var(--muted); margin-top: 3px; }
.profile-hero .bio { margin: 10px 0 0; color: #b1bcc4; line-height: 1.55; white-space: pre-wrap; max-width: 60ch; }
.profile-hero .grow { flex: 1; min-width: 0; }
.stats { display: flex; gap: 22px; margin-top: 14px; color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.stats b { display: block; color: var(--text); font-size: 16px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 14px 0 0; }
.tab { padding: 10px 14px; color: var(--muted); font-weight: 800; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }

.activity { padding: 16px 4px; border-bottom: 1px solid var(--border-soft); }
.activity .meta { margin-bottom: 6px; }
.activity .ctx { font-weight: 700; color: #c6d0d6; }
.activity .ctx:hover { color: var(--accent); }
.activity p { margin: 0; color: #9ba8b1; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

.settings { display: grid; gap: 16px; max-width: 720px; }
.panel { border: 1px solid var(--border); background: #0b1115; border-radius: 12px; padding: 20px 22px; }
.panel h2 { margin: 0 0 4px; font-size: 16px; }
.panel > .sub { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.avatar-row { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.avatar-row .hint { font-size: 11px; color: var(--muted-2); margin-top: 6px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 10px; background: #172128; color: #b9c5cc; }
.email-current { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; font-size: 14px; }
.status { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 10px; }
.status.ok { background: rgba(75,210,123,.14); color: #6fe39a; }
.status.wait { background: rgba(255,107,26,.14); color: #ff9a5c; }
.notice { border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 13px; line-height: 1.5; }
.notice.ok { background: rgba(75,210,123,.08); border: 1px solid rgba(75,210,123,.3); color: #b9f0cd; }
.notice.wait { background: rgba(255,107,26,.07); border: 1px solid rgba(255,107,26,.3); color: #ffd2b5; }
.notice.err { background: rgba(255,107,107,.07); border: 1px solid rgba(255,107,107,.3); color: #ffc9c9; }
.notice .row-actions { margin-top: 10px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form input { flex: 1; min-width: 220px; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: rgba(255,107,107,.08); }
.btn.outline { border: 1px solid var(--border); color: #c6d0d6; }
.btn.outline:hover { border-color: #3a4852; color: var(--text); }
.center-card { max-width: 480px; margin: 40px auto; text-align: center; }
.center-card .panel { padding: 30px 26px; }
.center-card h1 { margin: 0 0 8px; font-size: 22px; }
.center-card p { color: var(--muted); line-height: 1.55; margin: 0 0 20px; }
.big-code { font-size: 64px; font-weight: 900; letter-spacing: -2px; color: var(--accent); margin: 0; }

@media (max-width: 1100px) {
  .app { grid-template-columns: 205px minmax(0, 1fr); }
  .rightbar { display: none; }
  .brand { width: 165px; }
}
@media (max-width: 720px) {
  .app { display: block; }
  .sidebar, .search { display: none; }
  .main { padding: 18px 10px 50px; }
  .community-title h1 { font-size: 19px; }
  .post h2 { font-size: 18px; }
  .thread-header h2 { font-size: 21px; }
  .community-title p { font-size: 11px; }
  .new-topic { padding: 8px 11px; }
  .vote-box { width: 40px; min-height: 88px; }
  .brand { width: auto; }
  .user-chip .name, .pill .label { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .comments, .thread-body { padding-left: 14px; padding-right: 14px; }
  .profile-hero { flex-direction: column; align-items: flex-start; }
  .topbar { gap: 10px; padding: 0 10px; }
  .top-actions { gap: 5px; }
  .pill { padding: 0 11px; }
  .user-chip { padding: 0 2px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 10px; }
  .panel { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Aperçu d'image dans le fil ---------- */
.post { cursor: pointer; }
.post .post-content > * { cursor: auto; }
.post h2 a, .post .post-cover, .post .read-more { cursor: pointer; }

/* Aperçu réduit mais complet : l'image est adaptée (contain), jamais rognée —
 *   avec `cover`, le bas d'un mème ou d'une capture disparaissait. Le cadre épouse
 *   l'image, donc une image large et une image verticale gardent leurs proportions. */
.post-cover {
  /* 80 % de la carte, mais jamais plus que la taille réelle de l'image :
   *     une petite capture reste nette au lieu d'être étirée. */
  display: block; width: 80%; max-width: max-content; margin: 10px 0 6px; line-height: 0;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #0b1115;
}
.post-cover video {
  display: block; width: 100%; max-width: 100%; max-height: 320px; background: #000;
  pointer-events: none;   /* avant lecture, le clic sert à démarrer */
}
.post-cover.is-video { cursor: pointer; }
/* Une fois lancée, la vidéo reprend ses contrôles. */
.post-cover.playing video { pointer-events: auto; width: 100%; max-height: min(1220px, 80vh); }
.post-cover.playing { cursor: default; }
.post-cover img {
  display: block;
  width: 100%;          /* l'image suit la largeur du cadre */
  height: auto;         /* proportions conservées : une hauteur fixe sans
  object-fit écrasait les panoramas et étirait les
  images verticales */
  max-height: 520px;    /* aperçu généreux, mais borné */
  transition: opacity .2s ease;
}
.post:hover .post-cover img { opacity: .92; }
.post-excerpt { color: #9aa7b0; }
.post.has-cover .post-excerpt { display: block; -webkit-line-clamp: none; }
.read-more { color: var(--accent); font-weight: 800; white-space: nowrap; }
.read-more:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .post-cover { width: 100%; }
  .post-cover img { max-height: 400px; }
}

/* ---------- Pages de connexion / inscription ---------- */
.auth-page { min-height: 100vh; }
.auth-shell {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 40px 16px;
}
.auth-shell .brand { width: auto; }
.auth-card {
  width: min(420px, 100%); background: #0b1115; border: 1px solid var(--border);
  border-radius: 14px; padding: 28px 26px 22px;
}
.auth-card h1 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.4px; }
.auth-lead { margin: 0 0 22px; color: var(--muted); line-height: 1.5; }
.auth-form .field input { height: 42px; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 64px; }
.reveal {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  height: 30px; padding: 0 10px; border-radius: 7px; color: var(--muted); font-size: 12px; font-weight: 700;
}
.reveal:hover { color: var(--text); background: #172128; }
.auth-submit { width: 100%; height: 42px; font-size: 14px; margin-top: 6px; }
.auth-submit:disabled { opacity: .6; cursor: progress; }
.auth-switch { margin: 18px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
.auth-switch a, .auth-back:hover { color: var(--accent); }
.auth-switch a:hover { text-decoration: underline; }
.auth-back { color: var(--muted); font-size: 12px; font-weight: 700; }
.field input.touched:invalid:not(:focus) { border-color: rgba(255,107,107,.5); }

/* ---------- Contenu Markdown ---------- */
/* ---------- Contenu Markdown ---------- */
.md { color: #b9c5cc; line-height: 1.65; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md table { margin: 0 0 12px; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { color: var(--text); line-height: 1.3; margin: 18px 0 8px; letter-spacing: -.2px; }
.md h1 { font-size: 20px; } .md h2 { font-size: 18px; } .md h3 { font-size: 16px; }
.md h4, .md h5, .md h6 { font-size: 14px; }
.md a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.md strong { color: var(--text); }
.md ul, .md ol { padding-left: 22px; }
.md li + li { margin-top: 3px; }
.md blockquote { border-left: 3px solid #34434d; padding: 2px 0 2px 14px; color: var(--muted); }
.md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: #141d23; border: 1px solid #1f2a31; border-radius: 5px; padding: 1px 5px; }
.md pre { background: #0e151a; border: 1px solid #1f2a31; border-radius: 8px; padding: 12px 14px; overflow-x: auto; }
.md pre code { background: none; border: 0; padding: 0; font-size: 12.5px; line-height: 1.55; }
/* Une image du topic occupe la largeur disponible sans jamais être rognée ni
 d éformée, et ne dépasse pas la hauteu*r de la fenêtre : quelle que soit sa
 résolution (panorama, photo verticale, capture d'écran), on la voit en entier. */
.md img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0b1115;
  margin: 10px auto;
  cursor: zoom-in;
}
.comment-body.md img { max-height: 48vh; }
.md table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.md th, .md td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.md th { background: #111a20; color: var(--text); }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.comment-body.md { font-size: 13px; white-space: normal; }
.comment-body.md p { margin-bottom: 8px; }
.thread-text.md { white-space: normal; }


/* ---------- Éditeur Markdown ---------- */
.md-editor { border: 1px solid #25313a; border-radius: 10px; background: #0e151a; overflow: hidden; }
.md-editor:focus-within { border-color: #4a5a1a; }
.md-editor.dragging { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(215,255,69,.12); }
.md-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 5px 6px; border-bottom: 1px solid #1d272e; background: #0c1216; }
.md-tabs, .md-tools { display: flex; gap: 2px; flex-wrap: wrap; }
.md-tab { height: 28px; padding: 0 11px; border-radius: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
.md-tab[aria-selected="true"] { background: #172128; color: var(--text); }
.md-tool { width: 30px; height: 28px; border-radius: 6px; color: #8a98a3; font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.md-tool:hover, .md-tab:hover { background: #172128; color: var(--text); }
.md-tool:disabled { opacity: .35; cursor: default; background: none; }
.md-sep { width: 1px; background: #25313a; margin: 4px 3px; }
.md-editor textarea { display: block; width: 100%; border: 0 !important; border-radius: 0; background: transparent; color: var(--text); padding: 12px; outline: 0; resize: vertical; line-height: 1.55; font: inherit; min-height: 120px; }
.md-preview { padding: 12px; min-height: 120px; }
.md-preview.empty { color: var(--muted-2); font-style: italic; }
.md-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 12px; border-top: 1px solid #1d272e; color: var(--muted-2); font-size: 11px; }
.md-foot a { color: var(--muted); text-decoration: underline; }
.md-status { color: var(--muted); }
.md-status.err { color: var(--danger); }

/* ---------- Fenêtre de rédaction d'un topic ---------- */
.modal.wide {
  width: min(1000px, 96vw);
  height: min(90vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;            /* c'est l'éditeur qui défile, pas la modale */
}
.modal.wide .field.grow { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-bottom: 10px; }
.modal.wide .md-editor.grow { flex: 1; display: flex; flex-direction: column; min-height: 220px; }
.modal.wide .md-editor.grow textarea,
.modal.wide .md-editor.grow .md-preview { flex: 1; min-height: 0; resize: none; overflow: auto; }
.modal.wide .md-editor.grow .md-preview { min-height: 0; }
.modal.wide .modal-actions { padding-top: 2px; }
/* Sur un écran bas, on garde la priorité au texte plutôt qu'aux marges. */
@media (max-height: 700px) {
  .modal.wide { height: 96vh; padding: 16px 18px; }
  .modal.wide h2 { font-size: 17px; }
  .modal.wide .lead { margin-bottom: 12px; }
}
@media (max-width: 720px) {
  .modal-backdrop { padding: 0; }
  .modal.wide { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; border: 0; }
}
/* En-tête compact : l'espace récupéré va à la zone de texte. */
.modal.wide { height: min(96vh, 1300px); }
.modal.wide h2 { margin-bottom: 14px; }
.modal.wide .field { margin-bottom: 10px; }
.modal.wide .field label { margin-bottom: 4px; }
.modal.wide .field-row { gap: 10px; }
.modal.wide .modal-actions { align-items: center; }
.posting-as { margin-right: auto; color: var(--muted); font-size: 12px; }
.posting-as strong { color: #c6d0d6; }
@media (max-width: 720px) { .posting-as { display: none; } }
.composer-head { display: grid; grid-template-columns: 190px 150px minmax(0, 1fr); gap: 10px; }
.composer-head .field { margin-bottom: 10px; }
@media (max-width: 720px) {
  .composer-head { grid-template-columns: 1fr 1fr; }
  .composer-head .field:last-child { grid-column: 1 / -1; }
  .modal.wide h2 { margin-bottom: 10px; }
  .modal.wide .field label { font-size: 11px; }
}
/* Colonne de vote alignée en haut : sur une carte avec couverture, la centrer
 *   verticalement éloignait les flèches du titre. */
.post .vote-box { align-self: start; }

/* ---------- Vote sous le post + jauge d'appréciation ---------- */
.post .post-content { min-width: 0; }
.post-footer .vote-box.row { margin-right: 4px; }
.vote-box.row .score { font-size: 12px; }

.tier {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 800; white-space: nowrap;
}
.tier .meter { width: 54px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.tier .meter-fill { display: block; height: 100%; border-radius: 2px; background: currentColor; transition: width .3s ease; }
.tier.liked { color: #6fe39a; background: rgba(75,210,123,.10); }
.tier.excellent { color: var(--accent); background: rgba(215,255,69,.10); }
.tier.extra { color: #ffb366; background: rgba(255,107,26,.12); box-shadow: inset 0 0 0 1px rgba(255,107,26,.25); }
@media (max-width: 720px) {
  .tier { margin-left: 0; }
  .tier .meter { width: 38px; }
}

/* ---------- Image en plein écran ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  background: rgba(3, 5, 6, .92); padding: 24px; cursor: zoom-out;
}
/* Bornes exprimées en unités de fenêtre : dans une grille, un `max-height: 100%`
 *   se calcule sur une piste dimensionnée par l'image elle-même et ne limite rien. */
.lightbox img {
  max-width: calc(100vw - 48px);
  max-height: calc(100dvh - 48px);
  width: auto; height: auto;
  object-fit: contain; border-radius: 8px; cursor: default;
}
@media (max-width: 720px) {
  .lightbox img { max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
}
.lightbox-close {
  position: absolute; top: 14px; right: 18px; width: 38px; height: 38px;
  border-radius: 50%; background: #172128; color: var(--text); font-size: 18px; font-weight: 800;
}
.lightbox-close:hover { background: #22303a; }
.lightbox-info {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: var(--muted); font-size: 12px; background: rgba(12,18,22,.8); padding: 5px 12px; border-radius: 10px;
}
@media (max-width: 720px) { .lightbox { padding: 10px; } }

/* ---------- Autocomplétion ---------- */
.ac-wrap { position: relative; }
.ac-list {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 4px; list-style: none; max-height: 272px; overflow: auto;
  background: #0c1216; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.ac-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 7px; cursor: pointer; color: #b9c5cc;
}
.ac-item.active { background: #172128; color: var(--text); }
.ac-icon {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; background: #18242b; color: var(--accent);
  font-size: 11px; font-weight: 800;
}
.ac-text { min-width: 0; display: flex; flex-direction: column; }
.ac-text strong { font-size: 13px; font-weight: 800; }
.ac-text small { color: var(--muted-2); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La barre de recherche garde sa largeur une fois enveloppée par l'autocomplétion. */
.search .ac-wrap { flex: 1; min-width: 0; }
.search .ac-list { top: calc(100% + 10px); }

/* ---------- Éditeur : mode visuel ---------- */
.rich-area {
  min-height: 120px; padding: 12px; outline: 0; color: var(--text);
  overflow-y: auto; overflow-wrap: anywhere;
}
.md-editor.compact .rich-area { min-height: 76px; }
.rich-area:empty::before {
  content: attr(data-placeholder); color: #687681; pointer-events: none;
}
.rich-area > :first-child { margin-top: 0; }
.rich-area img { max-height: 320px; margin: 8px 0; }
.rich-area video {
  display: block; width: 100%; min-height: 240px; max-height: 360px; margin: 8px 0;
  border-radius: 8px; border: 1px solid var(--border); background: #000;
}
.md-editor.grow .rich-area { flex: 1; min-height: 0; }

/* ---------- Vidéos publiées ---------- */
/* La vidéo prend toute la largeur disponible, comme une image, avec une taille
 *   minimale pour rester regardable : les contrôles d'un petit lecteur sont
 *   inutilisables. Pas de `margin: auto` : elle est alignée sur le texte. */
.md video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 280px;
  max-height: 72vh;
  margin: 12px 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #000;
}
.comment-body.md video { min-height: 200px; max-height: 48vh; }
@media (max-width: 720px) {
  .md video { min-height: 180px; }
  .comment-body.md video { min-height: 150px; }
}

/* ---------- Aperçu vidéo dans le fil ---------- */
.post-cover.is-video { position: relative; }
.post-cover .play-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(8, 11, 13, .72); color: #fff; font-size: 18px;
  border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(2px);
  transition: background .15s ease, transform .15s ease;
}
.post:hover .post-cover .play-badge { background: rgba(8, 11, 13, .88); transform: translate(-50%, -50%) scale(1.06); }
.post-cover .duration-badge {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(8, 11, 13, .82); color: #e7edf1;
  padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; line-height: 1.5;
}

/* ---------- Page de recherche ---------- */
.results { margin-top: 6px; }
.result {
  display: flex; align-items: center; gap: 12px; padding: 12px 8px;
  border-bottom: 1px solid var(--border-soft); color: #b9c5cc; border-radius: 8px;
}
.result:hover { background: rgba(255, 255, 255, .02); color: var(--text); }
.result-icon {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px;
  display: grid; place-items: center; background: #18242b; color: var(--accent); font-weight: 800;
}
.result-icon.topic { color: var(--blue); }
.result-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.result-text strong { font-size: 15px; }
.result-text small { color: var(--muted-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs .tab { text-decoration: none; }

/* ---------- Contenu payant ---------- */
.tag.premium { background: linear-gradient(90deg, #ffb347, #ff8c1a); color: #2a1600; }
.gate.premium { border-color: #4a3410; background: #17110a; }
.gate.premium strong { display: block; color: #ffb366; margin-bottom: 3px; }
.premium-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid #192229; }
.premium-box .card-title { display: flex; align-items: center; gap: 8px; color: #ffb366; }
.premium-box .join { background: linear-gradient(90deg, #ffb347, #ff8c1a); color: #2a1600; }
.check-row { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: 13px; color: #b9c5cc; }
.check-row input { width: 16px; height: 16px; accent-color: var(--accent); }
.check-row small { color: var(--muted-2); }

/* ---------- Fenêtre de gestion d'une communauté ---------- */
.manage-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 8px; }
.manage-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.manage-panel { margin-top: 14px; }
.sub-list { margin-top: 14px; max-height: 220px; overflow: auto; }
.sub-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid #192229; font-size: 13px;
}
.sub-row a { font-weight: 700; }
.sub-row .btn { margin-left: auto; height: 28px; padding: 0 10px; }
.post-action svg, .comment-action svg { flex: 0 0 auto; }

/* ---------- Aperçu d'un contenu payant ---------- */
.premium-options { border: 1px solid #2c3a13; background: #0f1508; border-radius: 10px; padding: 14px 14px 4px; margin-bottom: 10px; }
.premium-options .field:last-child { margin-bottom: 8px; }
.teaser-video { display: block; width: 100%; max-height: 200px; margin-top: 8px; border-radius: 8px; border: 1px solid var(--border); background: #000; }
.preview-video { display: block; width: 100%; max-height: 60vh; margin: 0 0 14px; border-radius: 8px; border: 1px solid var(--border); background: #000; }

/* ---------- Carte d'un lien partagé ---------- */
.link-card {
  display: block; margin: 12px 0; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: #0e151a; color: #b9c5cc; max-width: 720px;
}
.link-card:hover { border-color: #3a4852; }
.link-card.is-video { cursor: pointer; }
/*.link-card.playing { max-width: 100%; } */
.link-image { position: relative; line-height: 0; background: #000; }
.link-image img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.link-text { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; cursor: pointer; }
.link-site { color: var(--muted-2); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.link-text strong { color: var(--text); font-size: 15px; line-height: 1.35; }
.link-text small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.link-url { color: var(--muted-2); font-size: 11px; }
.yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.link-preview-box:not(:empty) { margin-top: 10px; }
.link-preview-box .link-card { margin: 0; }

/* ---------- Vidéo de présentation : ligne compacte ---------- */
.teaser-row { margin-top: 8px; }
.teaser-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border-radius: 16px; background: #172128; color: #c6d0d6; font-size: 12px; font-weight: 700;
}
.teaser-chip:hover { background: #22303a; color: var(--text); }
.modal-video { display: block; width: 100%; max-height: 60vh; border-radius: 8px; background: #000; margin-bottom: 16px; }

/* Le contenu de l'éditeur reste dans sa boîte : sans cela, sur un écran étroit,
 *   son pied débordait sous le champ suivant. */
.md-editor { overflow: hidden; }
.md-editor.grow { min-height: 200px; }
@media (max-width: 720px) {
  .rich-area { min-height: 90px; }
  .md-editor.grow { min-height: 160px; }
  .premium-options { padding: 12px 12px 2px; }
}

/* Sur un écran étroit, la fenêtre de rédaction défile au lieu de comprimer
 *   l'éditeur : la répartition en hauteur ne laissait plus de place au texte et
 *   son pied débordait sous le champ suivant. */
@media (max-width: 720px) {
  .modal.wide { height: auto; max-height: 100dvh; overflow-y: auto; display: block; }
  .modal.wide .field.grow { display: block; }
  .modal.wide .md-editor.grow { display: block; min-height: 0; }
  .modal.wide .md-editor.grow .rich-area,
  .modal.wide .md-editor.grow textarea { min-height: 150px; resize: vertical; }
}

/* ---------- Lien détecté dans l'éditeur ---------- */
.link-field:empty { display: none; }
.link-detected {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 6px; color: var(--muted-2); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
}
.link-detected .btn { height: 26px; padding: 0 10px; font-size: 11px; }


/* ---------- Espace disque d'une communauté ---------- */
.storage { display: flex; flex-direction: column; gap: 6px; }
.meter.wide { width: 100%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; color: var(--accent); }
.meter.wide.full { color: var(--danger); }

/* ---------- Lecteur détaché ---------- */
.dock {
  position: fixed; right: 16px; bottom: 16px; z-index: 65; width: 340px; max-width: calc(100vw - 24px);
  background: #0b1115; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
.dock-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #192229; }
.dock-title {
  flex: 1; min-width: 0; color: #c6d0d6; font-size: 12px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dock-title:hover { color: var(--accent); }
.dock-close { width: 26px; height: 26px; border-radius: 6px; color: var(--muted); }
.dock-close:hover { background: #172128; color: var(--text); }
.dock-video, .dock-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }

.pop-out {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border-radius: 14px; background: rgba(8, 11, 13, .82); color: #e7edf1; font-size: 11px; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .18);
}
.pop-out:hover { background: rgba(8, 11, 13, .95); }
.pop-out svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.post-cover.playing, .link-card.playing { position: relative; }
@media (max-width: 720px) {
  .dock { right: 8px; left: 8px; bottom: 8px; width: auto; }
}

/* ---------- Onglet administrateur d'une communauté ---------- */
.reputation { display: flex; align-items: baseline; gap: 8px; }
.reputation strong { font-size: 20px; color: var(--accent); }
.reputation .hint { margin: 0; }
.weight-row { display: flex; align-items: center; gap: 12px; }
.weight-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.weight-row strong { min-width: 150px; font-size: 13px; color: #c6d0d6; }

/* ---------- Compteur de vues ---------- */
.post-action.views { cursor: default; }
.post-action.views:hover { background: none; color: #74828c; }

/* ---------- Republication ---------- */
.repost-origin { color: var(--muted-2); font-size: 12px; margin-bottom: 10px; }
.repost-origin a { color: var(--accent); font-weight: 700; }
.republish-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 10px;
  background: rgba(255, 255, 255, .015); color: var(--muted); font-size: 12px; line-height: 1.5;
}
.republish-banner strong { display: block; color: #c6d0d6; font-size: 13px; margin-bottom: 2px; }

/* ---------- Statistiques d'un topic ---------- */
.post-action.views.clickable { cursor: pointer; }
.post-action.views.clickable:hover { background: #172128; color: #d5dee3; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 20px; }
.stat-tile {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: #0e151a;
}
.stat-tile strong { font-size: 20px; color: var(--text); }
.stat-tile span { color: var(--muted-2); font-size: 11px; }
.visitor-list { margin-top: 10px; max-height: 260px; overflow: auto; }
.visitor-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid #192229; font-size: 13px;
}
.visitor-row a { font-weight: 700; }
.visitor-row .chip { margin-left: auto; }
.bot-block { margin-bottom: 18px; }
.bot-block .visitor-row strong { color: #c6d0d6; font-size: 13px; }

/* ---------- Accueil d'un nouveau membre ---------- */
.onboarding {
  margin-top: 18px; padding: 24px 22px; border: 1px solid var(--border);
  border-radius: 12px; background: #0b1115;
}
.onboarding h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.3px; }
.onboarding > p { margin: 0 0 20px; color: var(--muted); line-height: 1.6; max-width: 62ch; }
.onboarding .card-title { margin-bottom: 4px; }
.onboard-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid #192229;
}
.onboard-row .btn { margin-left: auto; }
.onboard-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.onboard-text strong { font-size: 14px; }
.onboard-text small { color: var(--muted-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onboarding .field { margin-top: 20px; }
.onboarding .hint { color: var(--muted-2); font-size: 12px; }
.onboarding .hint a { color: var(--accent); }
.more-communities { color: var(--muted-2); font-size: 12px; }

/* ---------- Sélecteur de portée sur /r/all ---------- */
.scope-switch { display: inline-flex; gap: 2px; margin-top: 8px; padding: 2px; background: #111820; border: 1px solid #202c35; border-radius: 16px; }
.scope { padding: 5px 12px; border-radius: 14px; color: var(--muted); font-size: 12px; font-weight: 700; }
.scope:hover { color: var(--text); }
.scope.selected { background: #1d2831; color: var(--accent); }

/* ---------- Pagination de la recherche ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px 0 8px; }
.pager-info { color: var(--muted-2); font-size: 12px; }
.btn.outline.disabled { opacity: .4; cursor: default; }
.result-meta { margin-left: auto; color: var(--muted-2); font-size: 11px; font-weight: 700; white-space: nowrap; }
.closed-note { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.feed-loading { padding: 18px 4px; text-align: center; color: var(--muted-2); font-size: 12px; }
.feed-end { height: 1px; }

/* ---------- Gel et suppression d'une communauté ---------- */
.closed-note.frozen { color: var(--blue); }
.danger-zone { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255, 107, 107, .25); }
.danger-zone .card-title { color: var(--danger); }
.danger-zone .hint { margin: 0 0 10px; }
.btn.danger.outline { border: 1px solid rgba(255, 107, 107, .4); }
.btn.danger.outline:hover { background: rgba(255, 107, 107, .1); }


/* =========================================================
 * PREMIUM CSS / RECENT OVERRIDES
 * ========================================================= */

:root {
  /* =========================================================
   * INFOS.CENTER — PREMIUM DARK UI
   * ========================================================= */

  --bg: #070a0c;
  --bg-2: #090d10;
  --panel: #0c1216;
  --panel-2: #0f161b;

  --border: #26323b;
  --border-soft: #1a242b;
  --border-strong: #35434d;

  --text: #e8eef2;
  --text-soft: #c7d1d7;
  --muted: #8997a1;
  --muted-2: #62717c;

  --accent: #d7ff45;
  --accent-soft: rgba(215, 255, 69, .10);
  --accent-border: rgba(215, 255, 69, .28);

  --orange: #ff6b1a;
  --blue: #5da9ff;
  --purple: #a77bff;
  --danger: #ff6b6b;

  --up: #4bd27b;
  --down: #ff6b6b;

  --shadow-sm:
  0 8px 25px rgba(0, 0, 0, .20);

  --shadow-md:
  0 18px 50px rgba(0, 0, 0, .32);

  --shadow-lg:
  0 30px 90px rgba(0, 0, 0, .55);

  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --transition: .18s var(--ease);
}


/* =========================================================
 * BASE
 * ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  background:
  radial-gradient(
    circle at 50% -10%,
    rgba(215, 255, 69, .025),
                  transparent 38%
  ),
  var(--bg);
  color: var(--text);
  font-family:
  Inter,
  ui-sans-serif,
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
  color: inherit;
  cursor: pointer;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}


/* =========================================================
 * APPLICATION
 * ========================================================= */

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 310px;
  grid-template-rows: 58px 1fr;
}


/* =========================================================
 * TOP BAR
 * ========================================================= */

.topbar {
  grid-column: 1 / -1;

  display: flex;
  align-items: center;
  gap: 22px;

  height: 58px;
  padding: 0 18px;

  background: rgba(7, 10, 12, .92);
  border-bottom: 1px solid var(--border);

  position: sticky;
  top: 0;
  z-index: 100;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand {
  width: 190px;

  display: flex;
  align-items: center;
  gap: 10px;

  font-weight: 850;
  font-size: 18px;
  letter-spacing: -.4px;

  flex: 0 0 auto;
}

.brand-mark {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  border: 1px solid var(--accent-border);
  border-radius: 9px;

  color: var(--accent);

  background:
  radial-gradient(
    circle at center,
    rgba(215,255,69,.08),
                  transparent 70%
  );

  box-shadow:
  0 0 25px rgba(215,255,69,.06),
  inset 0 1px 0 rgba(255,255,255,.05);
}

.brand-mark::before {
  content: "◆";
  font-size: 12px;
}

.search {
  height: 38px;
  max-width: 650px;
  flex: 1;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 0 14px;

  background: #10171d;
  border: 1px solid #202d36;
  border-radius: 20px;

  color: var(--muted);

  transition:
  border-color var(--transition),
  background var(--transition),
  box-shadow var(--transition);
}

.search:focus-within {
  border-color: rgba(215,255,69,.30);

  background: #111a20;

  box-shadow:
  0 0 0 3px rgba(215,255,69,.045);
}

.search input {
  width: 100%;

  outline: 0;
  border: 0;

  background: transparent;
  color: var(--text);
}

.search input::placeholder {
  color: #687681;
}

.top-actions {
  margin-left: auto;

  display: flex;
  align-items: center;
  gap: 8px;
}

.pill {
  height: 36px;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 0 14px;

  border: 1px solid var(--border);
  background: #0f151a;
  border-radius: 18px;

  color: #b9c5cc;
  font-weight: 700;

  transition:
  border-color var(--transition),
  background var(--transition),
  color var(--transition),
  transform var(--transition);
}

.pill:hover {
  border-color: var(--border-strong);
  background: #131b21;
  color: var(--text);
}

.pill:active {
  transform: scale(.97);
}

.pill.accent {
  color: #090c0d;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 850;
}

.pill.accent:hover {
  background: #e2ff6c;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #c6d0d6;
  font-weight: 700;
  font-size: 13px;

  padding: 0 6px;
}

.avatar {
  width: 28px;
  height: 28px;

  border-radius: 50%;

  display: grid;
  place-items: center;

  background: #18242b;
  color: var(--accent);

  font-weight: 800;
  font-size: 12px;

  text-transform: uppercase;
}

.badge {
  font-size: 10px;
  font-weight: 800;

  color: #0a0d0e;
  background: var(--accent);

  padding: 2px 7px;
  border-radius: 9px;
}


/* =========================================================
 * SIDEBAR
 * ========================================================= */

.sidebar {
  border-right: 1px solid var(--border);
  background: #090d10;

  padding: 18px 12px;

  position: sticky;
  top: 58px;

  height: calc(100vh - 58px);

  overflow: auto;
}

.nav-section {
  margin: 0 7px 9px;

  color: #63717c;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .04em;
}

.nav-item {
  width: 100%;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px 12px;
  margin: 2px 0;

  border-radius: 8px;

  color: #aeb9c1;

  transition:
  background var(--transition),
  color var(--transition),
  transform var(--transition);

  text-align: left;
}

.nav-item:hover {
  background: #141d23;
  color: var(--text);
}

.nav-item.active {
  background: #172129;
  color: var(--text);

  box-shadow:
  inset 3px 0 var(--accent),
  0 0 20px rgba(215,255,69,.025);
}

.nav-icon {
  width: 19px;
  text-align: center;
  color: #8b99a4;
}

.nav-item.active .nav-icon {
  color: var(--accent);
}

.community {
  margin-top: 25px;
}

.sidebar-bottom {
  margin-top: 55px;
  padding: 0 9px;

  color: #52606a;
  font-size: 11px;
  line-height: 1.8;
}


/* =========================================================
 * MAIN
 * ========================================================= */

.main {
  min-width: 0;
  padding: 28px 26px 70px;
}

.wrap {
  max-width: 900px;
  margin: 0 auto;
}


/* =========================================================
 * COMMUNITY HEADER
 * ========================================================= */

.community-header {
  display: flex;
  align-items: center;
  gap: 15px;

  padding-bottom: 22px;

  border-bottom: 1px solid var(--border);
}

.community-logo {
  width: 55px;
  height: 55px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border-radius: 14px;

  border: 1px solid #384700;

  color: var(--accent);

  background:
  radial-gradient(
    circle at 50% 35%,
    rgba(215,255,69,.08),
                  transparent 65%
  ),
  #111703;

  font-size: 25px;
  font-weight: 800;

  box-shadow:
  inset 0 1px 0 rgba(255,255,255,.04);
}

.community-title {
  flex: 1;
  min-width: 0;
}

.community-title h1 {
  margin: 0 0 3px;

  font-size: 24px;
  letter-spacing: -.5px;
}

.community-title p {
  margin: 0;
  color: var(--muted);
}

.new-topic {
  background: var(--orange);
  color: white;

  border-radius: 18px;

  padding: 10px 15px;

  font-weight: 800;
  white-space: nowrap;

  box-shadow:
  0 8px 25px rgba(255,107,26,.10);

  transition:
  background var(--transition),
  transform var(--transition),
  box-shadow var(--transition);
}

.new-topic:hover {
  background: #ff7c33;

  box-shadow:
  0 10px 30px rgba(255,107,26,.16);

  transform: translateY(-1px);
}

.new-topic:active {
  transform: translateY(0);
}

.join-inline {
  margin-right: 4px;
}

.join-inline.joined {
  color: var(--muted);
}


/* =========================================================
 * SORT
 * ========================================================= */

.sortbar {
  margin-top: 14px;

  display: flex;
  gap: 6px;

  border-bottom: 1px solid var(--border);

  padding-bottom: 9px;
}

.sort {
  color: var(--muted);

  border-radius: 7px;

  padding: 8px 12px;

  font-weight: 700;

  transition:
  background var(--transition),
  color var(--transition);
}

.sort:hover {
  background: #182127;
  color: var(--text);
}

.sort.selected {
  background: #182127;
  color: var(--accent);
}


/* =========================================================
 * POSTS
 * ========================================================= */

.post {
  position: relative;

  padding: 19px 4px;

  border-bottom: 1px solid var(--border-soft);

  transition:
  background var(--transition);
}

.post:hover {
  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.018),
                  transparent
  );
}

.post-content {
  min-width: 0;
}

.meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;

  color: var(--muted-2);

  font-size: 11px;

  margin-bottom: 7px;
}

.meta a:hover {
  color: var(--text);
  text-decoration: underline;
}

.meta .sub {
  color: #c6d0d6;
  font-weight: 800;
}

.tag {
  display: inline-flex;
  align-items: center;

  border-radius: 12px;

  padding: 4px 9px;

  color: #061006;

  font-size: 10px;
  font-weight: 900;
}

.tag.feature {
  background: var(--accent);
}

.tag.help {
  background: var(--blue);
}

.tag.discussion {
  background: var(--purple);
  color: white;
}

.tag.question {
  background: var(--orange);
  color: white;
}

.tag.performance {
  background: #2e9ee9;
  color: white;
}

.post h2 {
  margin: 0 0 8px;

  font-size: 21px;
  line-height: 1.3;

  letter-spacing: -.3px;
}

.post h2 a:hover {
  color: var(--accent);
}

.post p {
  margin: 0;

  max-width: 800px;

  color: #9aa7b0;

  line-height: 1.5;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  overflow: hidden;
}

.post-excerpt {
  color: #9aa7b0;
}

.post.has-cover .post-excerpt {
  display: block;
  -webkit-line-clamp: none;
}

.read-more {
  color: var(--accent);
  font-weight: 800;
  white-space: nowrap;
}

.read-more:hover {
  text-decoration: underline;
}


/* =========================================================
 * VOTES
 * ========================================================= */

.vote-box {
  width: 44px;
  min-height: 92px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 1px;

  padding: 4px 0;

  border: 1px solid #202b33;

  background: #0e151a;

  border-radius: 10px;
}

.vote-box.row {
  width: auto;
  min-height: 0;

  flex-direction: row;

  padding: 0 3px;

  border-radius: 17px;
}

.vote-btn {
  width: 34px;
  height: 29px;

  display: grid;
  place-items: center;

  padding: 0;

  border-radius: 7px;

  color: #788792;

  transition:
  color var(--transition),
  background var(--transition),
  transform var(--transition);
}

.vote-btn:hover {
  transform: scale(1.04);
}

.vote-btn svg {
  width: 17px;
  height: 17px;

  fill: currentColor;
}

.vote-btn.up {
  color: rgba(75,210,123,.65);
}

.vote-btn.down {
  color: rgba(255,107,107,.6);
}

.vote-btn.up:hover,
.vote-btn.up.voted {
  color: var(--up);
  background: rgba(75,210,123,.12);
}

.vote-btn.down:hover,
.vote-btn.down.voted {
  color: var(--down);
  background: rgba(255,107,107,.12);
}

.score {
  min-width: 30px;

  text-align: center;

  color: #d7e0e5;

  font-size: 12px;
  line-height: 18px;
  font-weight: 850;
}

.score.positive {
  color: var(--up);
}

.score.negative {
  color: var(--down);
}

.post .vote-box {
  align-self: start;
}


/* =========================================================
 * POST FOOTER
 * ========================================================= */

.post-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 4px;

  margin-top: 12px;
}

.post-action {
  height: 30px;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 0 9px;

  border-radius: 7px;

  color: #74828c;

  font-size: 11px;
  font-weight: 700;

  transition:
  background var(--transition),
  color var(--transition);
}

.post-action svg {
  width: 15px;
  height: 15px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;

  flex: 0 0 auto;
}

.post-action:hover {
  background: #172128;
  color: #d5dee3;
}

.post-action.danger:hover {
  color: var(--danger);
  background: rgba(255,107,107,.08);
}

.post-action.views {
  cursor: default;
}

.post-action.views:hover {
  background: none;
  color: #74828c;
}

.post-action.views.clickable {
  cursor: pointer;
}

.post-action.views.clickable:hover {
  background: #172128;
  color: #d5dee3;
}


/* =========================================================
 * APPRECIATION TIER
 * ========================================================= */

.tier {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-left: auto;

  padding: 4px 10px;

  border-radius: 12px;

  font-size: 11px;
  font-weight: 800;

  white-space: nowrap;
}

.tier .meter {
  width: 54px;
  height: 4px;

  border-radius: 2px;

  background: rgba(255,255,255,.14);

  overflow: hidden;
}

.tier .meter-fill {
  display: block;

  height: 100%;

  border-radius: 2px;

  background: currentColor;

  transition: width .3s var(--ease);
}

.tier.liked {
  color: #6fe39a;
  background: rgba(75,210,123,.10);
}

.tier.excellent {
  color: var(--accent);
  background: rgba(215,255,69,.10);
}

.tier.extra {
  color: #ffb366;

  background: rgba(255,107,26,.12);

  box-shadow:
  inset 0 0 0 1px rgba(255,107,26,.25);
}


/* =========================================================
 * MEDIA — NEW PREMIUM SYSTEM
 *
 * Feed:
 *   - compact
 *   - never crops
 *   - video max-height
 *
 * Opened:
 *   - lightbox
 *   - viewport-sized
 *   - controls available
 * ========================================================= */

.post-cover {
  position: relative;

  /*display: block;*/

  width: min(80%, max-content);

  /*max-width: 100%;*/

  margin: 12px 0 8px;

  line-height: 0;

  overflow: hidden;

  border: 1px solid var(--border);

  border-radius: 12px;

  background:
  radial-gradient(
    circle at 50% 30%,
    rgba(255,255,255,.025),
                  transparent 65%
  ),
  #030506;

  box-shadow: var(--shadow-sm);

  isolation: isolate;

  transition:
  border-color var(--transition),
  box-shadow var(--transition),
  transform var(--transition);
}

.post-cover:hover {
  border-color: var(--border-strong);

  box-shadow:
  0 12px 35px rgba(0,0,0,.25);
}



/* ---------------------------------------------------------
 * IMAGES IN FEED
 * --------------------------------------------------------- */

.post-cover.is-video {
  display: block;
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #0e151a;
  color: #b9c5cc;
  width: 800px;
  /* max-width: 100%; */
  /*max-height: 400px;*/
}

@media screen and (min-width: 1400px) and (max-height: 700px) {
  .post-cover.is-video img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    background: #000;
    cursor: zoom-in;
  }
}

.post-cover.is-video img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: auto;
  height: auto;
  /* max-height: 400px; */
  object-fit: contain;
  background: #000;
  cursor: zoom-in;
}


.post-cover img {
  /* display: block; */
  /* width: 100%; */
  /* max-width: 100%; */

  height: auto;
  max-height: 700px;
  margin: 0 auto;
  object-fit: contain;
  background: #000;
  cursor: zoom-in;
  transition:
  opacity .25s var(--ease),
  transform .35s var(--ease);
}

.post:hover .post-cover img {
  opacity: .94;
}


/* ---------------------------------------------------------
 * VIDEO IN FEED
 * --------------------------------------------------------- */

.post-cover.is-video {
  width: min(80%, 760px);
  cursor: pointer;

  background:
  radial-gradient(
    circle at center,
    rgba(255,255,255,.035),
                  transparent 65%
  ),
  #000;
}

@media (max-width: 1980px) and (max-height: 900px) {
  .post-cover.is-video {
    width: min(50%, 860px);
  }
}

.post-cover.is-video video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  margin: 0 auto;
  object-fit: contain;
  background: #000;
  pointer-events: auto;
  cursor: pointer;
}


/*
 * Lorsque ton JS ajoute .playing, on donne un peu plus
 * d'espace au lecteur, mais on ne le transforme PAS en
 * énorme vidéo dans le post.
 *
 * Le vrai agrandissement se fait dans .lightbox.
 */

.post-cover.is-video.playing {
  height: 50%;
}

.post-cover.is-video.playing video {
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}


/* ---------------------------------------------------------
 * VIDEO PLACEHOLDER / PLAY BUTTON
 * --------------------------------------------------------- */

.post-cover .play-badge {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 62px;
  height: 62px;

  display: grid;
  place-items: center;

  padding: 0;
  margin: 0;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
  linear-gradient(
    145deg,
    rgba(18,25,29,.94),
                  rgba(5,8,9,.88)
  );

  border: 1px solid rgba(255,255,255,.20);

  color: white;

  font-size: 19px;
  line-height: 1;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
  0 14px 40px rgba(0,0,0,.45),
  0 0 0 5px rgba(255,255,255,.025),
  inset 0 1px 0 rgba(255,255,255,.09);

  pointer-events: none;

  z-index: 5;

  transition:
  transform var(--transition),
  background var(--transition),
  box-shadow var(--transition),
  opacity var(--transition);
}

.post-cover.is-video:hover .play-badge {
  transform: translate(-50%, -50%) scale(1.07);

  background:
  linear-gradient(
    145deg,
    rgba(25,34,39,.96),
                  rgba(7,10,11,.92)
  );

  box-shadow:
  0 18px 48px rgba(0,0,0,.50),
  0 0 0 6px rgba(215,255,69,.035),
  inset 0 1px 0 rgba(255,255,255,.11);
}

.post-cover.is-video.playing .play-badge {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
}


/* ---------------------------------------------------------
 * VIDEO DURATION
 * --------------------------------------------------------- */

.post-cover .duration-badge {
  position: absolute;

  right: 9px;
  bottom: 9px;

  z-index: 6;

  background: rgba(5,8,9,.86);

  color: #e7edf1;

  padding: 3px 7px;

  border-radius: 6px;

  font-size: 11px;
  font-weight: 800;

  line-height: 1.5;

  border: 1px solid rgba(255,255,255,.08);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* =========================================================
 * MARKDOWN MEDIA
 * ========================================================= */

.md img {
  display: block;

  width: auto;
  max-width: 100%;

  height: auto;

  max-height: 72vh;

  object-fit: contain;

  border-radius: 9px;

  border: 1px solid var(--border);

  background: #0b1115;

  margin: 10px auto;

  cursor: zoom-in;

  box-shadow:
  0 10px 35px rgba(0,0,0,.18);
}

.md video {
  display: block;

  width: 100%;
  max-width: 100%;

  height: auto;

  min-height: 280px;

  max-height: 72vh;

  margin: 12px 0;

  border-radius: 10px;

  border: 1px solid var(--border);

  background: #000;

  box-shadow:
  0 10px 35px rgba(0,0,0,.20);
}

.comment-body.md img {
  max-height: 48vh;
}

.comment-body.md video {
  min-height: 200px;
  max-height: 48vh;
}


/* =========================================================
 * RICH EDITOR MEDIA
 * ========================================================= */

.rich-area img {
  max-height: 320px;
  margin: 8px 0;
}

.rich-area video {
  display: block;

  width: 100%;

  min-height: 240px;
  max-height: 360px;

  margin: 8px 0;

  border-radius: 8px;

  border: 1px solid var(--border);

  background: #000;
}

.md-editor.compact .rich-area {
  min-height: 76px;
}


/* =========================================================
 * LIGHTBOX — IMAGES + VIDEOS
 * ========================================================= */

.lightbox {
  position: fixed;
  inset: 0;

  z-index: 1000;

  display: grid;
  place-items: center;

  padding: 24px;

  background:
  radial-gradient(
    circle at center,
    rgba(25,32,36,.20),
                  transparent 55%
  ),
  rgba(2,4,5,.96);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  cursor: zoom-out;

  animation:
  lightbox-in .18s var(--ease);
}

@keyframes lightbox-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.lightbox img,
.lightbox video {
  display: block;

  width: auto;
  height: auto;

  max-width: calc(100vw - 48px);
  max-height: calc(100dvh - 48px);

  object-fit: contain;

  border-radius: 10px;

  background: #000;

  cursor: default;

  box-shadow:
  0 30px 100px rgba(0,0,0,.65),
  0 0 0 1px rgba(255,255,255,.07);
}

.lightbox video {
  /*
   * Très important :
   * le lecteur peut réellement devenir grand ici.
   */
  width: auto;
  max-width: calc(100vw - 48px);
  max-height: calc(100dvh - 48px);
}


/* ---------------------------------------------------------
 * LIGHTBOX CLOSE
 * --------------------------------------------------------- */

.lightbox-close {
  position: absolute;

  top: 16px;
  right: 18px;

  z-index: 10;

  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(23,33,40,.88);

  border: 1px solid rgba(255,255,255,.10);

  color: var(--text);

  font-size: 18px;
  font-weight: 800;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition:
  background var(--transition),
  transform var(--transition);
}

.lightbox-close:hover {
  background: #22303a;
  transform: scale(1.05);
}


/* ---------------------------------------------------------
 * LIGHTBOX INFO
 * --------------------------------------------------------- */

.lightbox-info {
  position: absolute;

  bottom: 16px;
  left: 50%;

  transform: translateX(-50%);

  color: var(--muted);

  font-size: 12px;

  background: rgba(12,18,22,.82);

  padding: 5px 12px;

  border-radius: 10px;

  border: 1px solid rgba(255,255,255,.06);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  pointer-events: none;
}


/* =========================================================
 * POPOUT
 * ========================================================= */

.pop-out {
  position: absolute;

  right: 8px;
  top: 8px;

  z-index: 8;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  height: 28px;

  padding: 0 10px;

  border-radius: 14px;

  background: rgba(8,11,13,.82);

  color: #e7edf1;

  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.18);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition:
  background var(--transition),
  transform var(--transition);
}

.pop-out:hover {
  background: rgba(8,11,13,.95);
  transform: translateY(-1px);
}

.pop-out svg {
  width: 13px;
  height: 13px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
 * THREAD
 * ========================================================= */

.thread {
  border: 1px solid var(--border);

  border-radius: 12px;

  overflow: hidden;

  background: #0b1115;

  box-shadow:
  0 10px 35px rgba(0,0,0,.12);
}

.thread-header {
  padding: 22px 22px 0;
}

.thread-header h2 {
  margin: 10px 0 0;

  font-size: 26px;

  letter-spacing: -.5px;

  line-height: 1.25;
}

.thread-body {
  padding: 16px 22px 20px;
  color: #b1bcc4;
  line-height: 1.65;
  display: block;
}

.thread-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.thread-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 5px;

  margin-top: 18px;

  padding-top: 13px;

  border-top: 1px solid #182229;
}


/* =========================================================
 * COMMENTS
 * ========================================================= */

.comments {
  border-top: 1px solid var(--border);

  padding: 20px 22px 28px;
}

.comments-head {
  display: flex;
  justify-content: space-between;

  color: #c6d0d6;

  font-weight: 800;

  margin-bottom: 18px;
}

.comment {
  position: relative;

  margin-left: 4px;

  padding: 0 0 17px 25px;

  border-left: 2px solid #202c34;
}

.comment .comment {
  margin-left: 22px;
  margin-top: 14px;
  padding-bottom: 0;
}

.comment::before {
  content: "";

  position: absolute;

  left: -6px;
  top: 4px;

  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: #26333c;

  border: 2px solid #0b1115;
}

.comment-meta {
  color: #71808b;

  font-size: 11px;

  margin-bottom: 5px;
}

.comment-meta strong {
  color: #b9c5cc;
}

.comment-meta .op {
  color: var(--accent);

  font-weight: 800;

  margin-left: 4px;
}

.comment-body {
  margin: 0;

  color: #9ba8b1;

  line-height: 1.55;

  font-size: 13px;

  white-space: pre-wrap;

  overflow-wrap: anywhere;
}

.comment-body.deleted {
  color: var(--muted-2);
  font-style: italic;
}

.comment-actions {
  margin-top: 7px;

  display: flex;
  align-items: center;
  gap: 3px;

  color: #66757f;

  font-size: 11px;
}

.comment-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  height: 27px;

  padding: 0 7px;

  border-radius: 6px;

  color: inherit;

  font-weight: 700;
}

.comment-action:hover {
  background: #172128;
  color: #cbd5db;
}

.comment-score.positive {
  color: var(--up);
}

.comment-score.negative {
  color: var(--down);
}

.comment-action.voted-up,
.comment-action.voted-up:hover {
  color: var(--up);
}

.comment-action.voted-down,
.comment-action.voted-down:hover {
  color: var(--down);
}

.comment-action.danger:hover {
  color: var(--danger);
}

.comment-action.reply-btn:hover {
  color: var(--accent);
}


/* =========================================================
 * COMPOSER / FORMS
 * ========================================================= */

.composer-box {
  margin-bottom: 22px;
}

.composer-box textarea,
.field input,
.field textarea,
.field select {
  width: 100%;

  background: #0e151a;

  color: var(--text);

  border: 1px solid #25313a;

  border-radius: 9px;

  padding: 11px 12px;

  outline: 0;

  resize: vertical;

  line-height: 1.5;

  transition:
  border-color var(--transition),
  box-shadow var(--transition);
}

.composer-box textarea {
  min-height: 88px;
}

.composer-box textarea:focus,
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: #4a5a1a;

  box-shadow:
  0 0 0 3px rgba(215,255,69,.035);
}

.composer-row {
  display: flex;
  justify-content: flex-end;

  gap: 8px;

  margin-top: 8px;
}

.btn {
  height: 34px;

  padding: 0 15px;

  border-radius: 17px;

  font-weight: 800;
  font-size: 12px;
}

.btn.primary {
  background: var(--accent);
  color: #0a0d0e;
}

.btn.primary:hover {
  background: #e3ff70;
}

.btn.primary:disabled {
  opacity: .5;
  cursor: default;
}

.btn.ghost {
  color: var(--muted);
}

.btn.ghost:hover {
  color: var(--text);
  background: #172128;
}


/* =========================================================
 * GATE
 * ========================================================= */

.gate {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  flex-wrap: wrap;

  border: 1px solid #2c3a13;

  background: #0f1508;

  border-radius: 10px;

  padding: 14px 16px;

  margin: 4px 0 20px;
}

.gate p {
  margin: 0;

  color: #c6d0d6;

  line-height: 1.5;
}

.gate p span {
  display: block;

  color: var(--muted);

  font-size: 12px;
}

.gate-actions {
  display: flex;
  gap: 8px;
}

.gate.locked {
  margin: 6px 0 0;
  border-style: dashed;
}


/* =========================================================
 * RIGHT RAIL
 * ========================================================= */

.rightbar {
  border-left: 1px solid var(--border);

  background: #090d10;

  padding: 18px 14px;

  position: sticky;

  top: 58px;

  height: calc(100vh - 58px);

  overflow: auto;
}

.card {
  border: 1px solid var(--border);

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.012),
                  transparent
  ),
  #0c1216;

  border-radius: 11px;

  padding: 16px;

  margin-bottom: 13px;
}

.card-title {
  font-weight: 800;
  margin-bottom: 7px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 13px;
}

.mini-logo {
  width: 39px;
  height: 39px;

  border: 1px solid #394700;

  border-radius: 50%;

  display: grid;
  place-items: center;

  color: var(--accent);

  font-weight: 800;
}

.card h3 {
  margin: 0 0 3px;
  font-size: 14px;
}

.card p {
  color: #8b99a4;

  line-height: 1.5;

  font-size: 12px;
}

.card-sub {
  font-size: 11px;
  color: #71808b;
}

.join {
  width: 100%;

  border-radius: 17px;

  padding: 9px;

  background: var(--orange);

  color: white;

  font-weight: 900;

  margin: 8px 0 4px;
}

.join.joined {
  background: transparent;

  border: 1px solid var(--border);

  color: #b9c5cc;
}

.rules {
  margin: 10px -2px 0;

  padding: 0;

  list-style: none;

  counter-reset: rule;
}

.rules li {
  counter-increment: rule;

  display: flex;

  gap: 9px;

  padding: 8px 0;

  border-top: 1px solid #192229;

  color: #a1adb5;

  font-size: 11px;
}

.rules li::before {
  content: counter(rule);

  color: #61707b;

  min-width: 12px;
}

.quick-link {
  display: flex;
  gap: 9px;

  padding: 8px 0;

  color: #a3afb7;

  font-size: 12px;
}

.quick-link:hover {
  color: var(--accent);
}

.related {
  display: flex;
  align-items: center;
  gap: 9px;

  padding: 8px 0;

  border-bottom: 1px solid #192229;
}

.related:last-child {
  border-bottom: 0;
}

.related-dot {
  width: 26px;
  height: 26px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: #18242b;

  display: grid;
  place-items: center;

  color: var(--accent);

  font-size: 11px;
}

.related-title {
  min-width: 0;

  font-size: 12px;

  line-height: 1.35;
}

.related-title:hover {
  color: var(--accent);
}

.related-title small {
  display: block;

  color: #5f6d77;

  margin-top: 2px;
}

.tags {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-top: 10px;
}



/* =========================================================
 * TOAST
 * ========================================================= */

.toast {
  position: fixed;

  left: 50%;
  bottom: 24px;

  transform: translateX(-50%);

  z-index: 600;

  background: #172128;

  border: 1px solid #2c3a44;

  color: var(--text);

  padding: 10px 16px;

  border-radius: 10px;

  font-size: 13px;

  box-shadow: var(--shadow-md);
}


/* =========================================================
 * MULTI PAGES
 * ========================================================= */

.app.no-rail {
  grid-template-columns: 230px minmax(0, 1fr);
}

.app.no-rail .rightbar {
  display: none;
}

.search-form {
  flex: 1;
  max-width: 650px;
  display: flex;
}

.search-form .search {
  width: 100%;
  max-width: none;
}

img.avatar,
.avatar {
  object-fit: cover;
  flex: 0 0 auto;
}

.avatar.sm {
  width: 20px;
  height: 20px;
  font-size: 10px;
}

.avatar.md {
  width: 28px;
  height: 28px;
}

.avatar.lg {
  width: 96px;
  height: 96px;

  font-size: 38px;

  border: 3px solid #0b1115;

  box-shadow:
  0 0 0 1px var(--border);
}

.avatar.xl {
  width: 120px;
  height: 120px;
  font-size: 46px;
}

.author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.author:hover .author-name {
  color: var(--text);
  text-decoration: underline;
}

.comment-meta .author {
  vertical-align: middle;
}


/* =========================================================
 * PROFILE
 * ========================================================= */

.page-title {
  margin: 0 0 4px;

  font-size: 24px;

  letter-spacing: -.5px;
}

.page-lead {
  margin: 0 0 22px;

  color: var(--muted);
}

.profile-hero {
  display: flex;

  gap: 20px;

  align-items: center;

  padding: 6px 0 24px;

  border-bottom: 1px solid var(--border);
}

.profile-hero h1 {
  margin: 0;

  font-size: 26px;

  letter-spacing: -.5px;

  overflow-wrap: anywhere;
}

.profile-hero .handle {
  color: var(--muted);
  margin-top: 3px;
}

.profile-hero .bio {
  margin: 10px 0 0;

  color: #b1bcc4;

  line-height: 1.55;

  white-space: pre-wrap;

  max-width: 60ch;
}

.profile-hero .grow {
  flex: 1;
  min-width: 0;
}

.stats {
  display: flex;

  gap: 22px;

  margin-top: 14px;

  color: var(--muted);

  font-size: 12px;

  flex-wrap: wrap;
}

.stats b {
  display: block;

  color: var(--text);

  font-size: 16px;
}


/* =========================================================
 * TABS
 * ========================================================= */

.tabs {
  display: flex;

  gap: 4px;

  border-bottom: 1px solid var(--border);

  margin: 14px 0 0;
}

.tab {
  padding: 10px 14px;

  color: var(--muted);

  font-weight: 800;

  border-bottom: 2px solid transparent;

  margin-bottom: -1px;
}

.tab:hover {
  color: var(--text);
}

.tab[aria-selected="true"] {
  color: var(--text);

  border-bottom-color: var(--accent);
}


/* =========================================================
 * ACTIVITY
 * ========================================================= */

.activity {
  padding: 16px 4px;

  border-bottom: 1px solid var(--border-soft);
}

.activity .meta {
  margin-bottom: 6px;
}

.activity .ctx {
  font-weight: 700;
  color: #c6d0d6;
}

.activity .ctx:hover {
  color: var(--accent);
}

.activity p {
  margin: 0;

  color: #9ba8b1;

  line-height: 1.55;

  white-space: pre-wrap;

  overflow-wrap: anywhere;
}


/* =========================================================
 * SETTINGS
 * ========================================================= */

.settings {
  display: grid;

  gap: 16px;

  max-width: 720px;
}

.panel {
  border: 1px solid var(--border);

  background: #0b1115;

  border-radius: 12px;

  padding: 20px 22px;
}

.panel h2 {
  margin: 0 0 4px;

  font-size: 16px;
}

.panel > .sub {
  margin: 0 0 18px;

  color: var(--muted);

  font-size: 13px;

  line-height: 1.5;
}

.avatar-row {
  display: flex;

  align-items: center;

  gap: 18px;

  margin-bottom: 18px;

  flex-wrap: wrap;
}

.avatar-row .hint {
  font-size: 11px;

  color: var(--muted-2);

  margin-top: 6px;
}

.row-actions {
  display: flex;

  gap: 8px;

  flex-wrap: wrap;
}

.kv {
  display: grid;

  grid-template-columns: 150px 1fr;

  gap: 10px 16px;

  font-size: 13px;
}

.kv dt {
  color: var(--muted);
}

.kv dd {
  margin: 0;

  color: var(--text);

  overflow-wrap: anywhere;
}

.chips {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}

.chip {
  font-size: 11px;

  font-weight: 700;

  padding: 3px 9px;

  border-radius: 10px;

  background: #172128;

  color: #b9c5cc;
}

.email-current {
  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

  margin-bottom: 16px;

  font-size: 14px;
}

.status {
  font-size: 11px;

  font-weight: 800;

  padding: 3px 9px;

  border-radius: 10px;
}

.status.ok {
  background: rgba(75,210,123,.14);
  color: #6fe39a;
}

.status.wait {
  background: rgba(255,107,26,.14);
  color: #ff9a5c;
}

.notice {
  border-radius: 10px;

  padding: 12px 14px;

  margin-bottom: 16px;

  font-size: 13px;

  line-height: 1.5;
}

.notice.ok {
  background: rgba(75,210,123,.08);

  border: 1px solid rgba(75,210,123,.3);

  color: #b9f0cd;
}

.notice.wait {
  background: rgba(255,107,26,.07);

  border: 1px solid rgba(255,107,26,.3);

  color: #ffd2b5;
}

.notice.err {
  background: rgba(255,107,107,.07);

  border: 1px solid rgba(255,107,107,.3);

  color: #ffc9c9;
}

.notice .row-actions {
  margin-top: 10px;
}

.inline-form {
  display: flex;

  gap: 8px;

  flex-wrap: wrap;
}

.inline-form input {
  flex: 1;
  min-width: 220px;
}

.btn.danger {
  color: var(--danger);
}

.btn.danger:hover {
  background: rgba(255,107,107,.08);
}

.btn.outline {
  border: 1px solid var(--border);

  color: #c6d0d6;
}

.btn.outline:hover {
  border-color: #3a4852;
  color: var(--text);
}

.center-card {
  max-width: 480px;

  margin: 40px auto;

  text-align: center;
}

.center-card .panel {
  padding: 30px 26px;
}

.center-card h1 {
  margin: 0 0 8px;

  font-size: 22px;
}

.center-card p {
  color: var(--muted);

  line-height: 1.55;

  margin: 0 0 20px;
}

.big-code {
  font-size: 64px;

  font-weight: 900;

  letter-spacing: -2px;

  color: var(--accent);

  margin: 0;
}


/* =========================================================
 * AUTH
 * ========================================================= */

.auth-page {
  min-height: 100vh;
}

.auth-shell {
  min-height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 22px;

  padding: 40px 16px;
}

.auth-shell .brand {
  width: auto;
}

.auth-card {
  width: min(420px, 100%);

  background: #0b1115;

  border: 1px solid var(--border);

  border-radius: 14px;

  padding: 28px 26px 22px;

  box-shadow: var(--shadow-md);
}

.auth-card h1 {
  margin: 0 0 6px;

  font-size: 22px;

  letter-spacing: -.4px;
}

.auth-lead {
  margin: 0 0 22px;

  color: var(--muted);

  line-height: 1.5;
}

.auth-form .field input {
  height: 42px;
}

.password-wrap {
  position: relative;
}

.password-wrap input {
  padding-right: 64px;
}

.reveal {
  position: absolute;

  right: 6px;
  top: 50%;

  transform: translateY(-50%);

  height: 30px;

  padding: 0 10px;

  border-radius: 7px;

  color: var(--muted);

  font-size: 12px;

  font-weight: 700;
}

.reveal:hover {
  color: var(--text);
  background: #172128;
}

.auth-submit {
  width: 100%;

  height: 42px;

  font-size: 14px;

  margin-top: 6px;
}

.auth-submit:disabled {
  opacity: .6;
  cursor: progress;
}

.auth-switch {
  margin: 18px 0 0;

  text-align: center;

  color: var(--muted);

  font-size: 13px;
}

.auth-switch a,
.auth-back:hover {
  color: var(--accent);
}

.auth-switch a:hover {
  text-decoration: underline;
}

.auth-back {
  color: var(--muted);

  font-size: 12px;

  font-weight: 700;
}

.field input.touched:invalid:not(:focus) {
  border-color: rgba(255,107,107,.5);
}


/* =========================================================
 * PREMIUM CONTENT
 * ========================================================= */

.tag.premium {
  background: linear-gradient(
    90deg,
    #ffb347,
    #ff8c1a
  );

  color: #2a1600;
}

.gate.premium {
  border-color: #4a3410;
  background: #17110a;
}

.gate.premium strong {
  display: block;

  color: #ffb366;

  margin-bottom: 3px;
}

.premium-box {
  margin-top: 14px;

  padding-top: 12px;

  border-top: 1px solid #192229;
}

.premium-box .card-title {
  display: flex;

  align-items: center;

  gap: 8px;

  color: #ffb366;
}

.premium-box .join {
  background:
  linear-gradient(
    90deg,
    #ffb347,
    #ff8c1a
  );

  color: #2a1600;
}

.premium-options {
  border: 1px solid #2c3a13;

  background: #0f1508;

  border-radius: 10px;

  padding: 14px 14px 4px;

  margin-bottom: 10px;
}

.premium-options .field:last-child {
  margin-bottom: 8px;
}

.teaser-video {
  display: block;

  width: 100%;

  max-height: 200px;

  margin-top: 8px;

  border-radius: 8px;

  border: 1px solid var(--border);

  background: #000;
}

.preview-video {
  display: block;

  width: 100%;

  max-height: 60vh;

  margin: 0 0 14px;

  border-radius: 8px;

  border: 1px solid var(--border);

  background: #000;
}


/* =========================================================
 * DOCKED PLAYER
 * ========================================================= */

.dock {
  position: fixed;

  right: 16px;
  bottom: 16px;

  z-index: 700;

  width: 340px;

  max-width: calc(100vw - 24px);

  background: #0b1115;

  border: 1px solid var(--border);

  border-radius: 12px;

  overflow: hidden;

  box-shadow: var(--shadow-lg);
}

.dock-bar {
  display: flex;

  align-items: center;

  gap: 8px;

  padding: 8px 10px;

  border-bottom: 1px solid #192229;
}

.dock-title {
  flex: 1;

  min-width: 0;

  color: #c6d0d6;

  font-size: 12px;

  font-weight: 700;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.dock-title:hover {
  color: var(--accent);
}

.dock-close {
  width: 26px;
  height: 26px;

  border-radius: 6px;

  color: var(--muted);
}

.dock-close:hover {
  background: #172128;

  color: var(--text);
}

.dock-video,
.dock-frame {
  display: block;

  width: 100%;

  aspect-ratio: 16 / 9;

  border: 0;

  background: #000;
}


/* =========================================================
 * AUTOCOMPLETE
 * ========================================================= */

.ac-wrap {
  position: relative;
}

.ac-list {
  position: absolute;

  z-index: 600;

  top: calc(100% + 4px);

  left: 0;
  right: 0;

  margin: 0;

  padding: 4px;

  list-style: none;

  max-height: 272px;

  overflow: auto;

  background: #0c1216;

  border: 1px solid var(--border);

  border-radius: 10px;

  box-shadow: var(--shadow-md);
}

.ac-item {
  display: flex;

  align-items: center;

  gap: 10px;

  padding: 8px 10px;

  border-radius: 7px;

  cursor: pointer;

  color: #b9c5cc;
}

.ac-item.active {
  background: #172128;
  color: var(--text);
}

.ac-icon {
  width: 26px;
  height: 26px;

  flex: 0 0 auto;

  border-radius: 50%;

  display: grid;
  place-items: center;

  background: #18242b;

  color: var(--accent);

  font-size: 11px;

  font-weight: 800;
}

.ac-text {
  min-width: 0;

  display: flex;

  flex-direction: column;
}

.ac-text strong {
  font-size: 13px;

  font-weight: 800;
}

.ac-text small {
  color: var(--muted-2);

  font-size: 11px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.search .ac-wrap {
  flex: 1;

  min-width: 0;
}

.search .ac-list {
  top: calc(100% + 10px);
}


/* =========================================================
 * SEARCH
 * ========================================================= */

.results {
  margin-top: 6px;
}

.result {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 8px;

  border-bottom: 1px solid var(--border-soft);

  color: #b9c5cc;

  border-radius: 8px;
}

.result:hover {
  background: rgba(255,255,255,.02);

  color: var(--text);
}

.result-icon {
  width: 34px;
  height: 34px;

  flex: 0 0 auto;

  border-radius: 9px;

  display: grid;
  place-items: center;

  background: #18242b;

  color: var(--accent);

  font-weight: 800;
}

.result-icon.topic {
  color: var(--blue);
}

.result-text {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 2px;
}

.result-text strong {
  font-size: 15px;
}

.result-text small {
  color: var(--muted-2);

  font-size: 12px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.tabs .tab {
  text-decoration: none;
}


/* =========================================================
 * COMMUNITY MANAGEMENT
 * ========================================================= */

.manage-btn {
  width: 100%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  margin-top: 8px;
}

.manage-btn svg {
  width: 14px;
  height: 14px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;
}

.manage-panel {
  margin-top: 14px;
}

.sub-list {
  margin-top: 14px;

  max-height: 220px;

  overflow: auto;
}

.sub-row {
  display: flex;

  align-items: center;

  gap: 10px;

  padding: 8px 0;

  border-bottom: 1px solid #192229;

  font-size: 13px;
}

.sub-row a {
  font-weight: 700;
}

.sub-row .btn {
  margin-left: auto;

  height: 28px;

  padding: 0 10px;
}


/* =========================================================
 * STORAGE
 * ========================================================= */

.storage {
  display: flex;

  flex-direction: column;

  gap: 6px;
}

.meter.wide {
  width: 100%;

  height: 6px;

  border-radius: 3px;

  background: rgba(255,255,255,.12);

  overflow: hidden;

  color: var(--accent);
}

.meter.wide.full {
  color: var(--danger);
}


/* =========================================================
 * REPUTATION / ADMIN
 * ========================================================= */

.reputation {
  display: flex;

  align-items: baseline;

  gap: 8px;
}

.reputation strong {
  font-size: 20px;

  color: var(--accent);
}

.reputation .hint {
  margin: 0;
}

.weight-row {
  display: flex;

  align-items: center;

  gap: 12px;
}

.weight-row input[type="range"] {
  flex: 1;

  accent-color: var(--accent);
}

.weight-row strong {
  min-width: 150px;

  font-size: 13px;

  color: #c6d0d6;
}


/* =========================================================
 * STATISTICS
 * ========================================================= */

.stat-grid {
  display: grid;

  grid-template-columns:
  repeat(auto-fit, minmax(110px, 1fr));

  gap: 10px;

  margin-bottom: 20px;
}

.stat-tile {
  display: flex;

  flex-direction: column;

  gap: 2px;

  padding: 12px 14px;

  border: 1px solid var(--border);

  border-radius: 10px;

  background: #0e151a;
}

.stat-tile strong {
  font-size: 20px;

  color: var(--text);
}

.stat-tile span {
  color: var(--muted-2);

  font-size: 11px;
}

.visitor-list {
  margin-top: 10px;

  max-height: 260px;

  overflow: auto;
}

.visitor-row {
  display: flex;

  align-items: center;

  gap: 10px;

  padding: 8px 0;

  border-bottom: 1px solid #192229;

  font-size: 13px;
}

.visitor-row a {
  font-weight: 700;
}

.visitor-row .chip {
  margin-left: auto;
}

.bot-block {
  margin-bottom: 18px;
}

.bot-block .visitor-row strong {
  color: #c6d0d6;

  font-size: 13px;
}


/* =========================================================
 * ONBOARDING
 * ========================================================= */

.onboarding {
  margin-top: 18px;

  padding: 24px 22px;

  border: 1px solid var(--border);

  border-radius: 12px;

  background: #0b1115;
}

.onboarding h2 {
  margin: 0 0 6px;

  font-size: 20px;

  letter-spacing: -.3px;
}

.onboarding > p {
  margin: 0 0 20px;

  color: var(--muted);

  line-height: 1.6;

  max-width: 62ch;
}

.onboarding .card-title {
  margin-bottom: 4px;
}

.onboard-row {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 0;

  border-bottom: 1px solid #192229;
}

.onboard-row .btn {
  margin-left: auto;
}

.onboard-text {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 2px;
}

.onboard-text strong {
  font-size: 14px;
}

.onboard-text small {
  color: var(--muted-2);

  font-size: 12px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.onboarding .field {
  margin-top: 20px;
}

.onboarding .hint {
  color: var(--muted-2);

  font-size: 12px;
}

.onboarding .hint a {
  color: var(--accent);
}

.more-communities {
  color: var(--muted-2);

  font-size: 12px;
}


/* =========================================================
 * SCOPE SWITCH
 * ========================================================= */

.scope-switch {
  display: inline-flex;

  gap: 2px;

  margin-top: 8px;

  padding: 2px;

  background: #111820;

  border: 1px solid #202c35;

  border-radius: 16px;
}

.scope {
  padding: 5px 12px;

  border-radius: 14px;

  color: var(--muted);

  font-size: 12px;

  font-weight: 700;
}

.scope:hover {
  color: var(--text);
}

.scope.selected {
  background: #1d2831;

  color: var(--accent);
}


/* =========================================================
 * PAGINATION / FEED
 * ========================================================= */

.pager {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 14px;

  margin: 22px 0 8px;
}

.pager-info {
  color: var(--muted-2);

  font-size: 12px;
}

.btn.outline.disabled {
  opacity: .4;

  cursor: default;
}

.result-meta {
  margin-left: auto;

  color: var(--muted-2);

  font-size: 11px;

  font-weight: 700;

  white-space: nowrap;
}

.closed-note {
  color: var(--muted);

  font-size: 12px;

  font-weight: 700;

  white-space: nowrap;
}

.feed-loading {
  padding: 18px 4px;

  text-align: center;

  color: var(--muted-2);

  font-size: 12px;
}

.feed-end {
  height: 1px;
}

.closed-note.frozen {
  color: var(--blue);
}


/* =========================================================
 * DANGER ZONE
 * ========================================================= */

.danger-zone {
  margin-top: 22px;

  padding-top: 16px;

  border-top:
  1px solid rgba(255,107,107,.25);
}

.danger-zone .card-title {
  color: var(--danger);
}

.danger-zone .hint {
  margin: 0 0 10px;
}

.btn.danger.outline {
  border:
  1px solid rgba(255,107,107,.4);
}

.btn.danger.outline:hover {
  background:
  rgba(255,107,107,.1);
}


/* =========================================================
 * REPUBLICATION
 * ========================================================= */

.repost-origin {
  color: var(--muted-2);

  font-size: 12px;

  margin-bottom: 10px;
}

.repost-origin a {
  color: var(--accent);

  font-weight: 700;
}

.republish-banner {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  flex-wrap: wrap;

  margin-top: 18px;

  padding: 12px 14px;

  border: 1px dashed var(--border);

  border-radius: 10px;

  background: rgba(255,255,255,.015);

  color: var(--muted);

  font-size: 12px;

  line-height: 1.5;
}

.republish-banner strong {
  display: block;

  color: #c6d0d6;

  font-size: 13px;

  margin-bottom: 2px;
}


/* =========================================================
 * TEASER / PRESENTATION VIDEO
 * ========================================================= */

.teaser-row {
  margin-top: 8px;
}

.teaser-chip {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  height: 32px;

  padding: 0 12px;

  border-radius: 16px;

  background: #172128;

  color: #c6d0d6;

  font-size: 12px;

  font-weight: 700;
}

.teaser-chip:hover {
  background: #22303a;

  color: var(--text);
}

.modal-video {
  display: block;

  width: 100%;

  max-height: 60vh;

  border-radius: 8px;

  background: #000;

  margin-bottom: 16px;
}


/* =========================================================
 * RESPONSIVE — TABLET
 * ========================================================= */

@media (max-width: 1100px) {

  .app {
    grid-template-columns:
    205px minmax(0, 1fr);
  }

  .rightbar {
    display: none;
  }

  .brand {
    width: 165px;
  }

}


/* =========================================================
 * RESPONSIVE — MOBILE
 * ========================================================= */

@media (max-width: 720px) {

  .app {
    display: block;
  }

  .sidebar,
  .search {
    display: none;
  }

  .main {
    padding: 18px 10px 50px;
  }

  .topbar {
    gap: 10px;

    padding: 0 10px;
  }

  .top-actions {
    gap: 5px;
  }

  .brand {
    width: auto;
  }

  .user-chip .name,
  .pill .label {
    display: none;
  }

  .pill {
    padding: 0 11px;
  }

  .user-chip {
    padding: 0 2px;
  }

  .community-title h1 {
    font-size: 19px;
  }

  .community-title p {
    font-size: 11px;
  }

  .post h2 {
    font-size: 18px;
  }

  .thread-header h2 {
    font-size: 21px;
  }

  .new-topic {
    padding: 8px 11px;
  }

  .vote-box {
    width: 40px;
    min-height: 88px;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .comments,
  .thread-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  .profile-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .kv {
    grid-template-columns: 1fr;

    gap: 2px;
  }

  .kv dd {
    margin-bottom: 10px;
  }

  .panel {
    padding: 18px 16px;
  }

  .tier {
    margin-left: 0;
  }

  .tier .meter {
    width: 38px;
  }


  /* -------------------------------------------------------
   * MOBILE MEDIA
   * ------------------------------------------------------- */

  .post-cover {
    width: 100%;

    max-width: 100%;

    border-radius: 10px;
  }

  .post-cover img {
    max-height: 400px;
  }

  .post-cover.is-video {
    width: 100%;
  }

  .post-cover.is-video video {
    max-height: 300px;
  }

  .post-cover.is-video.playing video {
    max-height: 600px;
  }

  .post-cover .play-badge {
    width: 54px;
    height: 54px;

    font-size: 17px;
  }


  /* -------------------------------------------------------
   * MOBILE LIGHTBOX
   * ------------------------------------------------------- */

  .lightbox {
    padding: 10px;
  }

  .lightbox img,
  .lightbox video {
    max-width: calc(100vw - 20px);

    max-height: calc(100dvh - 20px);

    border-radius: 7px;
  }

  .lightbox-close {
    top: 10px;
    right: 10px;

    width: 38px;
    height: 38px;
  }


  /* -------------------------------------------------------
   * MOBILE MODALS
   * ------------------------------------------------------- */

  .modal-backdrop {
    padding: 0;
  }

  .modal.wide {
    width: 100vw;

    height: auto;

    max-height: 100dvh;

    overflow-y: auto;

    display: block;

    border-radius: 0;

    border: 0;
  }

  .modal.wide .field.grow {
    display: block;
  }

  .modal.wide .md-editor.grow {
    display: block;

    min-height: 0;
  }

  .modal.wide .md-editor.grow .rich-area,
  .modal.wide .md-editor.grow textarea {
    min-height: 150px;

    resize: vertical;
  }

  .posting-as {
    display: none;
  }

  .composer-head {
    grid-template-columns: 1fr 1fr;
  }

  .composer-head .field:last-child {
    grid-column: 1 / -1;
  }

  .modal.wide h2 {
    margin-bottom: 10px;
  }

  .modal.wide .field label {
    font-size: 11px;
  }

  .rich-area {
    min-height: 90px;
  }

  .md-editor.grow {
    min-height: 160px;
  }

  .premium-options {
    padding: 12px 12px 2px;
  }

  .dock {
    right: 8px;
    left: 8px;
    bottom: 8px;

    width: auto;
  }

}


/* =========================================================
 * SHORT VIEWPORT
 * ========================================================= */

@media (max-height: 700px) {

  .modal.wide h2 {
    font-size: 17px;
  }

  .modal.wide .lead {
    margin-bottom: 12px;
  }

}


/* =========================================================
 * SHORT VIEWPORT — MODAL
 * ========================================================= */

@media (max-width: 900px) {

  .modal.wide {
    height: 96vh;
    padding: 16px 18px;
  }

}

/* =========================================================
 * REDUCED MOTION
 * ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition: none !important;

    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;
  }

}



@media (max-width: 720px) {

  .post-cover.is-video img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 600px;
    object-fit: contain;
    background: #000;
    cursor: zoom-in;
  }

}


/* =========================================================
 * APPARENCE DES COMMUNAUTÉS
 * Couverture, icône, et dispositions du fil : blog, frise, grille.
 * ========================================================= */

/* ----- Icône ----- */
.community-logo.has-image,
.mini-logo.has-image { overflow: hidden; padding: 0; background: #000; }
.community-logo.has-image img,
.mini-logo.has-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-community-icon { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; display: block; }

/* ----- Couverture ----- */
.community-cover {
  margin: -4px 0 0;
  aspect-ratio: 4 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}
.community-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* L'icône chevauche le bas de la couverture, comme sur un profil. */
.community-header.has-cover { margin-top: -34px; padding-left: 14px; position: relative; }
.community-header.has-cover .community-logo {
  width: 72px; height: 72px; border: 3px solid var(--bg); border-radius: 18px;
}
.community-header.has-cover .community-title { padding-top: 30px; }

/* ----- Blog ----- */
.feed.layout-blog { display: flex; flex-direction: column; gap: 26px; padding-top: 18px; }
.blog-post {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel);
}
.blog-post .blog-cover, .blog-post .post-cover { display: block; margin: 0; border-radius: 0; }
.blog-post .blog-cover img { width: 100%; max-height: 460px; object-fit: cover; display: block; }
.blog-body { padding: 20px 24px 18px; }
.blog-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; flex-wrap: wrap; }
.blog-title { margin: 10px 0 8px; font-size: 26px; line-height: 1.2; letter-spacing: -.4px; }
.blog-title a:hover { color: var(--accent); }
.blog-excerpt { margin: 0 0 14px; color: #c3ccd2; font-size: 15px; line-height: 1.65; white-space: pre-line; }
.blog-footer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.blog-read { color: var(--accent); font-weight: 700; margin-right: auto; }

/* ----- Frise chronologique ----- */
.feed.layout-timeline { position: relative; padding: 10px 0 0 0; }
.tl-day {
  position: sticky; top: 58px; z-index: 2;
  margin: 18px 0 8px; padding: 6px 0;
  background: var(--bg);
  color: var(--accent); font-weight: 800; font-size: 13px; text-transform: capitalize;
}
.tl-item {
  display: grid;
  grid-template-columns: 52px 18px minmax(0, 1fr);
  align-items: start;
  position: relative;
}
/* Trait vertical continu, dans la colonne du point. */
.tl-item::before {
  content: ''; position: absolute; left: 60px; top: 0; bottom: 0;
  width: 2px; background: var(--border);
}
.tl-time { color: var(--muted); font-size: 12px; padding-top: 16px; text-align: right; padding-right: 10px; }
.tl-dot {
  width: 12px; height: 12px; margin: 17px 0 0 3px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--bg); position: relative; z-index: 1;
}
.tl-card {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 6px 0 10px 10px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
  transition: border-color .15s ease;
}
.tl-card:hover { border-color: #3a4a55; }
.tl-text { flex: 1; min-width: 0; }
.tl-title { display: block; font-size: 15px; margin-bottom: 4px; }
.tl-text p { margin: 0 0 8px; color: #b9c5cc; font-size: 13px; line-height: 1.5; }
.tl-stats { display: flex; gap: 14px; color: var(--muted); font-size: 12px; }
.tl-stats span { display: inline-flex; align-items: center; gap: 4px; }
.tl-stats svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.tl-media { position: relative; flex: 0 0 120px; height: 90px; border-radius: 8px; overflow: hidden; background: #000; }
.tl-media img, .tl-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-media .play-badge { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 20px; text-shadow: 0 1px 6px #000; }

/* ----- Grille façon Instagram ----- */
.feed.layout-instagram {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding-top: 14px;
}
.feed.layout-instagram.is-empty { display: block; }
.feed.layout-instagram .feed-loading,
.feed.layout-instagram .feed-end { grid-column: 1 / -1; }
.grid-tile {
  position: relative; display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #11181d;
}
.grid-tile > img, .grid-tile > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.grid-tile .grid-preview { position: absolute; inset: 0; }
.grid-text {
  height: 100%; padding: 14px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(135deg, #1b2a12, #0d1216);
  color: #dfe7ec; font-size: 13px; line-height: 1.45; overflow: hidden;
}
.grid-kind { position: absolute; top: 8px; right: 9px; color: #fff; font-size: 14px; text-shadow: 0 1px 4px #000; z-index: 2; }
/* Compteurs toujours visibles en bas (tactile), plus lisibles au survol. */
.grid-stats {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: center; gap: 14px;
  padding: 22px 6px 8px;
  background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,0));
  color: #fff; font-size: 12.5px; font-weight: 700;
  transition: padding .15s ease, background .15s ease;
}
.grid-stats span { display: inline-flex; align-items: center; gap: 4px; }
.grid-stats svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.grid-tile:hover .grid-stats { top: 0; padding: 0; align-items: center; background: rgba(0,0,0,.45); font-size: 15px; }

@media (max-width: 720px) {
  .feed.layout-instagram { gap: 2px; }
  .grid-stats { gap: 8px; font-size: 11px; padding: 16px 4px 5px; }
  .grid-stats svg { width: 12px; height: 12px; }
  .blog-body { padding: 16px; }
  .blog-title { font-size: 21px; }
  .tl-item { grid-template-columns: 40px 16px minmax(0, 1fr); }
  .tl-item::before { left: 47px; }
  .tl-media { flex-basis: 84px; height: 64px; }
}

/* ----- Onglet « Appearance » ----- */
.layout-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.layout-option {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 8px 10px;
  padding: 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}
.layout-option:has(input:checked) { border-color: var(--accent); background: rgba(215,255,69,.05); }
.layout-option input { grid-row: 1; accent-color: var(--accent); margin: 2px 0 0; }
.layout-option .layout-text { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; }
.layout-option small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.layout-sketch { grid-row: 1; display: grid; gap: 3px; height: 44px; }
.layout-sketch i { display: block; background: #2a3640; border-radius: 2px; }
.sketch-classic { grid-template-rows: repeat(3, 1fr); }
.sketch-classic i:nth-child(n+4) { display: none; }
.sketch-blog { grid-template-rows: 2fr 1fr; }
.sketch-blog i:nth-child(n+3) { display: none; }
.sketch-blog i:first-child { background: #3a4a24; }
.sketch-timeline { grid-template-columns: 6px 1fr; grid-template-rows: repeat(3, 1fr); }
.sketch-timeline i:nth-child(odd) { border-radius: 50%; background: var(--accent); width: 6px; height: 6px; align-self: center; }
.sketch-instagram { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.picture-field .picture-actions { display: flex; gap: 8px; margin: 8px 0 4px; }
.picture-preview { width: 72px; height: 72px; }
.cover-preview {
  aspect-ratio: 4 / 1; border: 1px dashed var(--border); border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; color: var(--muted-2); font-size: 12px; background: #0a0f12;
}
.cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 520px) { .layout-options { grid-template-columns: 1fr; } }

/* ----- Blog en 3 colonnes (remplace la colonne unique ci-dessus) ----- */
.feed.layout-blog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-top: 16px;
  align-items: stretch;
}
.feed.layout-blog.is-empty { display: block; }
.feed.layout-blog .feed-loading,
.feed.layout-blog .feed-end { grid-column: 1 / -1; }
.feed.layout-blog .blog-post { display: flex; flex-direction: column; border-radius: 12px; min-width: 0; }
/* Même hauteur d'image pour toutes les cartes : la grille reste alignée. */
.feed.layout-blog .blog-cover,
.feed.layout-blog .post-cover { aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
.feed.layout-blog .blog-cover img,
.feed.layout-blog .post-cover > img,
.feed.layout-blog .post-cover > video { width: 100%; height: 100%; max-height: none; object-fit: cover; display: block; }
.feed.layout-blog .post-cover.playing { aspect-ratio: auto; }
.feed.layout-blog .post-cover.playing video { height: auto; object-fit: contain; }
.feed.layout-blog .blog-body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 12px; }
.feed.layout-blog .blog-meta { font-size: 11.5px; gap: 6px; }
.feed.layout-blog .blog-meta .avatar { width: 18px; height: 18px; }
.feed.layout-blog .blog-title {
  margin: 8px 0 6px; font-size: 16px; line-height: 1.3; letter-spacing: -.2px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.feed.layout-blog .blog-excerpt {
  margin: 0 0 10px; font-size: 13px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
/* Pied de carte en bas, quelle que soit la longueur du texte. */
.feed.layout-blog .blog-footer { margin-top: auto; gap: 8px 10px; padding-top: 10px; font-size: 12px; }
.feed.layout-blog .blog-read { flex-basis: 100%; font-size: 12.5px; }
.feed.layout-blog .blog-footer .post-action { font-size: 12px; }

@media (max-width: 1100px) {
  .feed.layout-blog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .feed.layout-blog { grid-template-columns: 1fr; gap: 14px; }
  .feed.layout-blog .blog-title { font-size: 18px; }
}

/* ----- Blog : 1, 2 ou 3 articles par ligne (réglé par le propriétaire) ----- */
.feed.layout-blog.cols-1 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.feed.layout-blog.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.feed.layout-blog.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Une seule colonne : de vrais articles, plus grands et moins coupés. */
.feed.layout-blog.cols-1 .blog-cover,
.feed.layout-blog.cols-1 .post-cover { aspect-ratio: 16 / 8; }
.feed.layout-blog.cols-1 .blog-body { padding: 20px 24px 18px; }
.feed.layout-blog.cols-1 .blog-meta { font-size: 12.5px; }
.feed.layout-blog.cols-1 .blog-title { font-size: 26px; -webkit-line-clamp: unset; display: block; margin: 10px 0 8px; }
.feed.layout-blog.cols-1 .blog-excerpt { font-size: 15px; line-height: 1.65; -webkit-line-clamp: 8; }
.feed.layout-blog.cols-1 .blog-read { flex-basis: auto; margin-right: auto; font-size: 14px; }
.feed.layout-blog.cols-2 .blog-title { font-size: 19px; }
.feed.layout-blog.cols-2 .blog-excerpt { font-size: 14px; -webkit-line-clamp: 5; }

@media (max-width: 1100px) {
  .feed.layout-blog.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .feed.layout-blog.cols-2,
  .feed.layout-blog.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .feed.layout-blog.cols-1 .blog-title { font-size: 21px; }
  .feed.layout-blog.cols-1 .blog-body { padding: 16px; }
}

/* Choix du nombre de colonnes dans l'onglet « Appearance ». */
.blog-columns { display: flex; gap: 10px; flex-wrap: wrap; }
.columns-option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 13px;
}
.columns-option:has(input:checked) { border-color: var(--accent); background: rgba(215,255,69,.05); }
.columns-option input { accent-color: var(--accent); margin: 0; }
.columns-sketch { display: grid; gap: 3px; width: 42px; height: 22px; }
.columns-sketch.cols-1 { grid-template-columns: 1fr; }
.columns-sketch.cols-2 { grid-template-columns: repeat(2, 1fr); }
.columns-sketch.cols-3 { grid-template-columns: repeat(3, 1fr); }
.columns-sketch i { display: block; background: #2a3640; border-radius: 2px; }

/* =========================================================
 * ADMINISTRATION (/admin)
 * ========================================================= */
.admin-tabs { margin-bottom: 18px; }
.admin-panel { min-width: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
.stat-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
}
.stat-card small { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; }
.stat-card strong { font-size: 22px; letter-spacing: -.3px; }
.stat-card span { color: var(--muted-2); font-size: 11.5px; line-height: 1.35; }
.admin-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 22px 0 8px; }
.admin-section-title h2 { margin: 0; font-size: 16px; }
.chart-box { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 10px 12px 8px; }
.admin-chart { width: 100%; height: auto; display: block; }
.admin-chart .grid-line { stroke: var(--border-soft); stroke-width: 1; }
.admin-chart .axis { fill: var(--muted-2); font-size: 10px; }
.admin-chart rect:hover { opacity: .8; }
.chart-legend { display: flex; gap: 14px; justify-content: flex-end; color: var(--muted); font-size: 11.5px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.admin-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.admin-toolbar .check-row { margin: 0; }
.admin-search {
  flex: 1 1 260px; max-width: 420px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: #0a0f12; color: var(--text);
}
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: middle; white-space: nowrap; }
.admin-table th { color: var(--muted); font-weight: 700; font-size: 11.5px; background: #0a0f12; position: sticky; top: 0; }
.admin-table td:first-child { white-space: normal; min-width: 180px; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); }
.admin-table .actions { display: flex; gap: 6px; justify-content: flex-end; }
.admin-table tbody tr:hover { background: rgba(255,255,255,.02); }
.admin-table tfoot td { font-weight: 700; color: var(--muted); border-bottom: 0; background: #0a0f12; }
.admin-table a:hover { color: var(--accent); }
.admin-table .hint { font-size: 11px; color: var(--muted-2); white-space: normal; }
.sort-head { font: inherit; color: inherit; padding: 0; }
.sort-head.active { color: var(--accent); }
.admin-community { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; }
.admin-community .mini-logo { width: 24px; height: 24px; font-size: 11px; }
.admin-table .badge { background: #1b252d; color: #c6d0d6; margin-left: 4px; font-size: 10px; }
.admin-table .badge.ok { background: rgba(75,210,123,.15); color: var(--up); }
.admin-table .badge.frozen { background: rgba(93,169,255,.15); color: var(--blue); }
.btn.small { padding: 5px 10px; font-size: 12px; }

/* ----- Grille Instagram : titre en petit en haut de la vignette ----- */
.grid-title {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  padding: 8px 30px 18px 9px;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,0));
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  pointer-events: none;
}
/* Au survol, les compteurs couvrent la vignette : le titre reste lisible au-dessus. */
.grid-tile:hover .grid-title { z-index: 3; }
.grid-text { padding-top: 38px; }
@media (max-width: 720px) {
  .grid-title { font-size: 10.5px; padding: 5px 22px 12px 6px; -webkit-line-clamp: 2; }
}

/* ----- Barre de gauche : nouveaux topics des 24 dernières heures ----- */
.nav-item .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-new {
  margin-left: auto; flex: 0 0 auto;
  padding: 1px 7px; border-radius: 9px;
  background: rgba(215,255,69,.12); color: var(--accent);
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* ----- Blog : couverture vidéo qui mène au post (la vue compte à l'ouverture) ----- */
.blog-cover.is-video { position: relative; display: block; }
.blog-cover.is-video video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.blog-cover.is-video .play-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(8, 11, 13, .72); color: #fff; font-size: 18px;
  border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(2px);
  transition: background .15s ease, transform .15s ease;
}
.blog-post:hover .blog-cover.is-video .play-badge { background: rgba(8, 11, 13, .88); transform: translate(-50%, -50%) scale(1.06); }
.blog-cover.is-video .duration-badge {
  position: absolute; right: 8px; bottom: 8px;
  padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.75); color: #fff; font-size: 11.5px; font-weight: 700;
}

/* ----- Grille Instagram : titre au-dessus du média, bandeau de hauteur fixe ----- */
.grid-tile {
  aspect-ratio: auto;
  display: flex; flex-direction: column;
  background: var(--panel);
}
.grid-tile .grid-title {
  position: static;
  flex: 0 0 auto;
  /* 2 lignes au plus, hauteur identique pour toutes les vignettes. */
  height: 40px; box-sizing: border-box;
  padding: 4px 8px;
  background: var(--panel); color: var(--text);
  font-size: 12px; font-weight: 700; line-height: 16px;
  text-shadow: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  pointer-events: none;
}
.grid-media {
  position: relative; flex: 0 0 auto;
  aspect-ratio: 4 / 5; overflow: hidden; background: #11181d;
}
.grid-media > img, .grid-media > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.grid-media .grid-preview { position: absolute; inset: 0; }
.grid-text { padding-top: 14px; }
.grid-tile:hover .grid-title { color: var(--accent); }
/* Au survol, les compteurs ne couvrent que le média, plus le titre. */
.grid-tile:hover .grid-stats { top: 0; }
@media (max-width: 720px) {
  .grid-tile .grid-title { height: 32px; padding: 3px 5px; font-size: 10.5px; line-height: 13px; }
}

/* ----- Grille Instagram : un cadre par vignette ----- */
/* Chaque vignette (titre + média) a sa bordure et un peu d'espace autour :
 * le titre se lit clairement comme celui de la vidéo en dessous, pas de celle d'au-dessus. */
.feed.layout-instagram { gap: 10px; }
.grid-tile {
  border: 1px solid #2f4350;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.grid-tile .grid-title { border-bottom: 1px solid #22313a; }
.grid-tile:hover,
.grid-tile:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(215, 255, 69, .25);
  outline: none;
}
@media (max-width: 720px) {
  .feed.layout-instagram { gap: 6px; }
  .grid-tile { border-radius: 8px; }
}

/* ----- Frise : le texte prend toute la largeur jusqu'à droite ----- */
.tl-item { grid-template-columns: 48px 18px minmax(0, 1fr); }
.tl-item::before { left: 56px; }
.tl-card { margin-right: 0; width: auto; min-width: 0; }
/* Vignette à gauche du texte : le texte continue jusqu'au bord droit de la carte. */
.tl-card .tl-media { order: -1; flex: 0 0 96px; height: 72px; }
.tl-text { flex: 1 1 auto; min-width: 0; max-width: none; }
.tl-text p {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-line;
}
.tl-order { color: var(--muted); font-size: 12.5px; font-weight: 700; margin: 14px 0 0; }
@media (max-width: 720px) {
  .tl-item { grid-template-columns: 38px 16px minmax(0, 1fr); }
  .tl-item::before { left: 45px; }
  .tl-card .tl-media { flex-basis: 72px; height: 56px; }
}

/* ----- Frise : le texte passe sous l'image ----- */
/* Carte en flux normal (plus en flex) : l'image flotte à gauche, le titre et la
 * description l'entourent puis continuent dessous, sur toute la largeur. */
.tl-card { display: flow-root; }
.tl-card .tl-media {
  float: left;
  width: 112px; height: 84px;
  margin: 2px 12px 6px 0;
  order: 0;
}
.tl-card .tl-title { display: block; margin-bottom: 4px; }
/* Pas de -webkit-line-clamp ici : il empêcherait le texte de couler sous l'image. */
.tl-card .tl-excerpt {
  display: block; margin: 0 0 8px;
  color: #b9c5cc; font-size: 13px; line-height: 1.5;
  white-space: pre-line; overflow-wrap: anywhere;
}
.tl-card .tl-stats { clear: both; padding-top: 2px; }
@media (max-width: 720px) {
  .tl-card .tl-media { width: 84px; height: 63px; margin-right: 10px; }
}

/* =========================================================
 * VISIONNEUSE MOBILE (grille Instagram)
 * ========================================================= */
body.viewer-open { overflow: hidden; }
.viewer-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, .78);
  display: flex; align-items: flex-end; justify-content: center;
  padding: max(10px, env(safe-area-inset-top, 0px)) 0 0;
  animation: viewer-fade .15s ease;
}
.viewer {
  width: 100%; max-width: 720px; height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg);
  border-radius: 16px 16px 0 0;
  border: 1px solid var(--border); border-bottom: 0;
  overflow: hidden;
  animation: viewer-up .2s ease;
}
.viewer-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--border-soft);
}
.viewer-community { font-weight: 800; font-size: 13px; color: var(--accent); }
.viewer-close {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px;
  background: #172129; color: var(--text);
}
.viewer-scroll {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
}
.viewer-media { background: #000; display: flex; justify-content: center; }
.viewer-media video, .viewer-media img {
  width: 100%; max-height: 70vh; object-fit: contain; display: block; background: #000;
}
.viewer-title { margin: 14px 14px 6px; font-size: 18px; line-height: 1.3; }
.viewer-body { padding: 0 14px; }
.viewer-body .post-meta { margin-bottom: 10px; }
.viewer-text { font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.viewer-text img, .viewer-text video { max-width: 100%; height: auto; border-radius: 8px; }
.viewer-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.viewer-open-post { display: flex; justify-content: center; width: 100%; margin-top: 4px; }
@keyframes viewer-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes viewer-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .viewer-backdrop, .viewer { animation: none; } }

/* ----- Frise : communauté d'origine en bas de la carte ----- */
.tl-stats { flex-wrap: wrap; align-items: center; }
.tl-stats .tl-community {
  color: var(--accent); font-weight: 800;
  max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-right: 2px;
}

/* =========================================================
 * ACCUEIL DES VISITEURS : MOTEUR DE RECHERCHE
 * ========================================================= */
.search-home {
  min-height: calc(100vh - 160px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 16px; padding: 30px 12px 40px;
}
.search-home.has-cover { justify-content: flex-start; }
.hero-cover { width: 100%; aspect-ratio: 4 / 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 10px; }
.hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-brand { display: flex; align-items: center; gap: 12px; font-size: 34px; font-weight: 900; letter-spacing: -1px; }
.hero-brand .brand-mark { width: 30px; height: 30px; }
.hero-lead { margin: 0; color: var(--muted); font-size: 15px; max-width: 560px; }
.hero-form { width: 100%; max-width: 640px; display: flex; gap: 8px; align-items: stretch; }
.hero-form .ac-wrap { flex: 1; min-width: 0; position: relative; }
.hero-field { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 0 16px; border: 1px solid var(--border); border-radius: 26px; background: #0a0f12;
  transition: border-color .15s ease, box-shadow .15s ease; }
.hero-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(215,255,69,.12); }
.hero-icon { color: var(--muted); font-size: 18px; }
.hero-input { flex: 1; min-width: 0; height: 50px; border: 0; background: transparent; color: var(--text); font-size: 16px; outline: none; }
.hero-submit { border-radius: 26px; padding: 0 22px; font-weight: 800; }
.hero-form .ac-list { left: -42px; right: -16px; top: calc(100% + 8px); text-align: left; max-height: 60vh; overflow-y: auto; }
.hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 680px; margin-top: 6px; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 6px; border: 1px solid var(--border); border-radius: 18px;
  font-size: 13px; color: #c6d0d6; background: var(--panel);
}
.hero-chip:hover { border-color: var(--accent); color: var(--text); }
.hero-chip .mini-logo { width: 22px; height: 22px; font-size: 11px; }
.hero-links { display: flex; gap: 8px; color: var(--muted-2); font-size: 13px; }
.hero-links a { color: var(--accent); }
.topbar .search-form.hidden-on-hero { visibility: hidden; }
@media (max-width: 600px) {
  .hero-brand { font-size: 26px; }
  .hero-form { flex-direction: column; }
  .hero-form .ac-list { left: 0; right: 0; }
  .hero-submit { height: 44px; }
}

/* ----- Suggestions : vignette de l'article ou de la vidéo, recherche avancée ----- */
.ac-thumb { position: relative; flex: 0 0 auto; width: 54px; height: 40px; border-radius: 6px; overflow: hidden; background: #000; }
.ac-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-thumb.is-video::after {
  content: '▶'; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 12px; text-shadow: 0 1px 4px #000;
}
.ac-advanced-item { border-top: 1px solid var(--border-soft); }
.ac-advanced-item strong { color: var(--accent); }
.ac-icon.ac-advanced { background: rgba(215,255,69,.12); color: var(--accent); }

/* Résultats de recherche : les topics en cartes, comme dans le fil. */
.search-feed { padding-top: 12px; }

/* =========================================================
 * RÉSULTATS DE RECHERCHE, FAÇON MOTEUR DE RECHERCHE
 * ========================================================= */
.serp { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; max-width: 760px; }
.serp-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 12px; border-radius: 12px;
  transition: background .12s ease;
}
.serp-item:hover, .serp-item:focus-visible { background: #121a20; outline: none; }
.serp-thumb {
  position: relative; flex: 0 0 180px; aspect-ratio: 16 / 10;
  border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--border);
}
.serp-thumb img, .serp-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.serp-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(8, 11, 13, .72); color: #fff; font-size: 13px; border: 1px solid rgba(255,255,255,.25);
}
.serp-duration {
  position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 4px;
  background: rgba(0,0,0,.78); color: #fff; font-size: 11px; font-weight: 700;
}
.serp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.serp-path { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp-site { color: #c6d0d6; font-weight: 700; }
.serp-title { color: #8ab4f8; font-size: 19px; line-height: 1.3; font-weight: 600; }
.serp-item:hover .serp-title { text-decoration: underline; }
.serp-desc {
  color: #bdc7cd; font-size: 14px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.serp-meta { display: flex; gap: 12px; color: var(--muted-2); font-size: 12px; margin-top: 2px; }
@media (max-width: 600px) {
  .serp-item { gap: 12px; padding: 10px 6px; }
  .serp-thumb { flex-basis: 112px; }
  .serp-title { font-size: 16px; }
  .serp-desc { font-size: 13px; -webkit-line-clamp: 2; }
}

/* ----- Visionneuse sur ordinateur (résultats de recherche) : fenêtre centrée ----- */
@media (min-width: 721px) {
  .viewer-backdrop { align-items: center; padding: 3vh 16px; }
  .viewer { height: auto; max-height: 94vh; max-width: 860px; border-radius: 16px; border-bottom: 1px solid var(--border); }
  .viewer-media video, .viewer-media img { max-height: 62vh; }
}

/* ----- Catégorie de communauté (colonne de droite) ----- */
.category-badge {
  display: inline-block; margin-top: 3px;
  padding: 1px 8px; border-radius: 9px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px;
}
.category-badge.insta {
  color: #fff;
  background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888);
}
.category-badge.native { color: var(--accent); background: rgba(215,255,69,.12); }

/* ----- Invitation à s'inscrire en fin de fil (visiteurs) ----- */
.visitor-gate {
  grid-column: 1 / -1;
  margin: 18px 0 8px; padding: 22px 18px;
  border: 1px solid var(--border); border-radius: 14px;
  background: linear-gradient(180deg, rgba(215,255,69,.06), rgba(215,255,69,0)), var(--panel);
  text-align: center;
}
.visitor-gate strong { display: block; font-size: 17px; margin-bottom: 6px; }
.visitor-gate p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.visitor-gate-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.admin-select { padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: #0a0f12; color: var(--text); font-size: 12.5px; }

/* ----- Barre des communautés : archives Instagram ----- */
.nav-insta {
  display: inline-block; vertical-align: 1px; margin-left: 6px;
  padding: 0 5px; border-radius: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .3px; line-height: 15px;
  color: #fff; background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888);
}
.nav-section-insta { display: flex; align-items: center; gap: 6px; }
.nav-section-insta .nav-insta { margin-left: 0; }

/* Sous-catégorie « Insta » dans « Your communities » */
.nav-subsection { margin: 4px 0 0 10px; padding-left: 8px; border-left: 2px solid #3a2a3f; }
.nav-subsection-title {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 4px 4px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
}
.nav-subsection-title .nav-insta { margin-left: 0; }
/* Dans la sous-catégorie, le badge sur chaque ligne ferait doublon. */
.nav-subsection .nav-label .nav-insta { display: none; }

/* Groupe « Insta » repliable */
.nav-subsection-title {
  width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  border-radius: 6px;
}
.nav-subsection-title:hover { color: var(--text); background: #172129; }
.nav-subsection-title .nav-new { margin-left: auto; text-transform: none; letter-spacing: 0; }
.nav-caret { display: inline-block; width: 10px; transition: transform .15s ease; }
.nav-subsection.open .nav-caret { transform: rotate(90deg); }

/* =========================================================
 * THÈME CLAIR / SOMBRE — bouton et réglage (voir theme.js, light.css)
 * ========================================================= */
.theme-toggle { width: 36px; padding: 0; justify-content: center; font-size: 16px; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 10px; }
.theme-option {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md, 10px);
  background: var(--panel-2, var(--panel)); color: var(--text); cursor: pointer; font-weight: 700;
}
.theme-option:hover { border-color: var(--border-strong, var(--border)); }
.theme-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.theme-option input { accent-color: var(--accent); margin: 0; }
.theme-swatch {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font-size: 15px; border: 1px solid var(--border);
}
.theme-swatch-light { background: #f3f5f7; color: #5e7d00; }
.theme-swatch-dark { background: #0c1216; color: #d7ff45; }
.theme-swatch-system { background: linear-gradient(135deg, #f3f5f7 50%, #0c1216 50%); color: #8997a1; }
@media (max-width: 520px) { .theme-options { grid-template-columns: 1fr; } }

/* =========================================================
 * NAVIGATION MOBILE — tiroir à droite (☰) et menu du compte
 * ========================================================= */
.nav-toggle, .drawer-only, .nav-backdrop, .user-caret { display: none; }
.user-menu-wrap { position: relative; display: inline-flex; }

.nav-toggle-bars { display: grid; gap: 4px; width: 16px; }
.nav-toggle-bars span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
body.nav-open .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.user-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 80;
  min-width: 220px; padding: 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-md, 0 18px 50px rgba(0, 0, 0, .32));
  animation: user-menu-in .14s ease-out;
}
@keyframes user-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.user-menu-head { display: grid; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
.user-menu-head strong { color: var(--text); font-size: 14px; }
.user-menu-head span { color: var(--muted); font-size: 12px; }
.user-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px; border-radius: 8px; color: var(--text); font-weight: 600;
}
.user-menu-item:hover, .user-menu-item:focus-visible { background: var(--panel-2, var(--border-soft)); }
.user-menu-icon { width: 18px; text-align: center; color: var(--muted); }
.user-menu-item.danger, .user-menu-item.danger .user-menu-icon, .nav-item.danger { color: var(--danger); }
.user-menu-sep { height: 1px; margin: 4px 6px; background: var(--border-soft); }

@media (max-width: 720px) {
  .desktop-only { display: none !important; }
  .nav-toggle { display: inline-flex; width: 38px; padding: 0; justify-content: center; }
  .user-caret { display: inline; color: var(--muted); font-size: 11px; margin-left: -2px; }

  /* La barre latérale devient un tiroir fixé à droite, hors de l'écran au repos. */
  .app .sidebar {
    display: block;
    /* Sous la barre du haut (58 px, z-index 100) : le bouton ✕ reste accessible. */
    position: fixed; top: 58px; right: 0; bottom: 0; left: auto; z-index: 90;
    width: min(320px, 86vw); height: auto;
    padding: 14px 12px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--panel);
    border-right: 0; border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg, 0 30px 90px rgba(0, 0, 0, .55));
    transform: translateX(100%); visibility: hidden;
    transition: transform .26s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .26s;
  }
  body.nav-open .app .sidebar {
    transform: none; visibility: visible;
    transition: transform .26s cubic-bezier(.22, 1, .36, 1), visibility 0s;
  }
  .nav-backdrop {
    display: block; position: fixed; inset: 58px 0 0 0; z-index: 85;
    background: rgba(4, 6, 8, .55);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }

  .drawer-only { display: block; }
  .drawer-search { margin: 0 4px 14px; }
  .drawer-search-box {
    display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: 21px;
    background: var(--panel-2, var(--bg)); color: var(--muted);
  }
  .drawer-search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 16px; }
  .app .sidebar .nav-item { min-height: 44px; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .app .sidebar, body.nav-open .app .sidebar, .nav-backdrop { transition: none; }
}

/* =========================================================================
 * AFFINAGE — design épuré (couche finale, prioritaire sur tout ce qui précède)
 *
 * Titres en Newsreader (police de presse), interface en Instrument Sans.
 * Boutons : 32 px, coins de 8 px, trois niveaux (principal / secondaire / discret).
 * Le citron reste la signature, en petites touches : logo, élément actif, focus.
 * Pour retrouver des boutons principaux citron : --btn-primary-bg: var(--accent).
 * ========================================================================= */

@font-face {
  font-family: "Instrument Sans";
  src: url("/static/fonts/instrument-sans.woff2") format("woff2-variations"), url("/static/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/newsreader.woff2") format("woff2-variations"), url("/static/fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  --font-ui: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-title: "Newsreader", Georgia, "Times New Roman", serif;

  --bg: #0a0d10;
  --bg-2: #0c1014;
  --panel: #0f1418;
  --panel-2: #141a1f;
  --raised: #182026;
  --border: #222b32;
  --border-soft: #1a2228;
  --border-strong: #2f3a42;
  --text: #e9edf0;
  --text-soft: #c3ccd2;
  --muted: #8a96a0;
  --muted-2: #66737d;

  --btn-h: 32px;
  --btn-radius: 8px;
  --btn-primary-bg: #eef2f4;
  --btn-primary-fg: #0a0d10;
  --btn-primary-hover: #ffffff;
  /* Onglet choisi des sélecteurs segmentés (Hot / New / Top…). */
  --seg-selected-bg: var(--raised);
  --seg-selected-fg: var(--text);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(215, 255, 69, .55);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, .35);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .5);
}

/* ---------- Base ---------- */
body {
  background: var(--bg);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font-family: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
::selection { background: rgba(215, 255, 69, .28); }

/* ---------- Titres : la police de presse ---------- */
.post h2, .thread-header h2, .community-title h1, .page-title, .viewer-title, .blog-post h2, .tl-title {
  font-family: var(--font-title);
  font-weight: 560;
  letter-spacing: -.012em;
  font-optical-sizing: auto;
}
.post h2 { font-size: 21px; line-height: 1.25; margin: 2px 0 6px; }
.thread-header h2 { font-size: 30px; line-height: 1.15; margin: 6px 0 4px; }
.community-title h1, .page-title { font-size: 28px; line-height: 1.15; letter-spacing: -.018em; }
.post h2 a:hover, .grid-tile:hover .grid-title { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--muted-2); }

/* ---------- Boutons : socle commun ---------- */
.pill, .btn, .new-topic, .join, .manage-btn {
  height: var(--btn-h);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-size: 13px; font-weight: 600; letter-spacing: -.005em; line-height: 1;
  white-space: nowrap;
  box-shadow: none; transform: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.pill:active, .btn:active, .new-topic:active, .join:active { transform: none; opacity: .85; }
.btn:disabled, .btn.primary:disabled { opacity: .45; cursor: default; }

/* Secondaire : contour fin, fond transparent. */
.pill, .btn.outline, .join.joined, .manage-btn {
  background: transparent;
  border-color: var(--border);
  color: var(--text-soft);
}
.pill:hover, .btn.outline:hover, .join.joined:hover, .manage-btn:hover {
  background: var(--panel-2);
  border-color: var(--border-strong);
  color: var(--text);
}

/* Principal : aplat neutre, le plus contrasté de la page. */
.pill.accent, .btn.primary, .new-topic, .join:not(.joined) {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}
.pill.accent:hover, .btn.primary:hover:not(:disabled), .new-topic:hover, .join:not(.joined):hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  color: var(--btn-primary-fg);
  box-shadow: none; transform: none;
}

/* Discret : texte seul, fond au survol. */
.btn.ghost { background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--panel-2); color: var(--text); }
.btn.danger { background: transparent; color: var(--danger); }
.btn.danger:hover { background: rgba(255, 107, 107, .08); }
.btn.danger.outline { border-color: rgba(255, 107, 107, .35); }
.btn.small { height: 28px; padding: 0 10px; font-size: 12px; }

/* Boutons-icônes carrés. Le ☰ n'existe que sur mobile (voir plus bas). */
.theme-toggle, .nav-toggle { width: var(--btn-h); padding: 0; font-size: 15px; }
.topbar .nav-toggle { display: none; }

/* Boutons pleine largeur de la colonne de droite. */
.join, .manage-btn { width: 100%; margin: 10px 0 0; }

.new-topic { padding: 0 14px; }

/* ---------- Barre du haut ---------- */
.topbar {
  background: rgba(10, 13, 16, .82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.brand { font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; border-width: 1.5px; box-shadow: none; }
.brand-mark::before { font-size: 10px; }
.search {
  height: 36px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border-soft);
}
.search:focus-within { border-color: var(--border-strong); background: var(--panel-2); }
.top-actions { gap: 6px; }
.user-chip { height: var(--btn-h); padding: 0 8px 0 4px; border-radius: var(--btn-radius); font-size: 13px; font-weight: 600; color: var(--text-soft); }
.user-chip:hover { background: var(--panel-2); color: var(--text); }
.user-chip .badge { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 5px; letter-spacing: 0; }

/* ---------- Barre latérale ---------- */
.sidebar { background: var(--bg); border-right: 1px solid var(--border-soft); padding: 16px 12px; }
.nav-item {
  min-height: 34px; padding: 0 10px; gap: 10px;
  border-radius: 8px;
  color: var(--text-soft); font-size: 13.5px; font-weight: 500;
}
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active { background: var(--panel-2); color: var(--text); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.nav-icon { color: var(--muted-2); width: 16px; text-align: center; }
.nav-section { margin: 18px 10px 6px; color: var(--muted-2); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.nav-new { background: transparent; color: var(--muted); font-weight: 600; padding: 0; }
.sidebar-bottom { color: var(--muted-2); }

/* ---------- En-tête de communauté ---------- */
.community-header { gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--border-soft); }
.community-logo {
  width: 48px; height: 48px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text-soft);
  box-shadow: none; font-size: 18px;
}
.community-title p { color: var(--muted); font-size: 13.5px; margin-top: 4px; }

/* Interrupteurs segmentés : tri (Hot / New…) et portée (My communities / Everything). */
.sortbar, .scope-switch {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: 10px;
}
.sortbar { margin: 18px 0 6px; }
.sort, .scope {
  height: 28px; display: inline-flex; align-items: center;
  padding: 0 12px; border-radius: 7px;
  color: var(--muted); font-size: 13px; font-weight: 600;
  background: transparent;
}
.sort:hover, .scope:hover { color: var(--text); background: transparent; }
.sort.selected, .scope.selected {
  background: var(--seg-selected-bg); color: var(--seg-selected-fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 0 0 1px var(--border-soft);
}

/* Onglets classiques (profil, admin…). */
.tab { font-weight: 600; font-size: 13.5px; padding: 10px 12px; }
.tab[aria-selected="true"] { border-bottom-color: var(--text); }

/* ---------- Posts ---------- */
.post { padding: 20px 4px; border-bottom: 1px solid var(--border-soft); }
.post:hover { background: transparent; }
.post-meta { font-size: 12.5px; color: var(--muted); gap: 6px; }
.post-excerpt, .post p { color: var(--text-soft); font-size: 14px; line-height: 1.55; }

/* Tags : pastilles teintées, plus d'aplats saturés. */
.tag {
  height: 20px; padding: 0 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0;
  background: var(--panel-2); color: var(--text-soft);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.tag.feature { background: rgba(215, 255, 69, .1); color: var(--accent); box-shadow: none; }
.tag.help { background: rgba(93, 169, 255, .12); color: var(--blue); box-shadow: none; }
.tag.discussion { background: rgba(167, 123, 255, .13); color: var(--purple); box-shadow: none; }
.tag.question { background: rgba(255, 107, 26, .12); color: var(--orange); box-shadow: none; }
.tag.performance { background: rgba(46, 158, 233, .13); color: #4fb3f6; box-shadow: none; }
.tag.premium { background: rgba(255, 179, 71, .14); color: #ffb347; box-shadow: none; }

/* Actions sous un post : discrètes, alignées sur le texte. */
.post-footer, .thread-actions { gap: 2px; }
.post-action, .comment-action {
  height: 30px; padding: 0 8px; gap: 6px;
  border-radius: 7px;
  color: var(--muted); font-size: 12.5px; font-weight: 500;
}
.post-action:hover, .comment-action:hover, .post-action.views.clickable:hover { background: var(--panel-2); color: var(--text); }
.post-action.views:hover { background: transparent; color: var(--muted); }
.post-action svg { width: 15px; height: 15px; stroke-width: 1.7; }

/* Vote : capsule fine. */
.vote-box.row {
  height: 30px; gap: 0; padding: 0 2px;
  background: transparent; border: 1px solid var(--border-soft); border-radius: 8px;
}
.vote-box.row .score { font-size: 12.5px; font-weight: 600; min-width: 18px; text-align: center; color: var(--text-soft); }
.vote-btn { width: 28px; height: 26px; border-radius: 6px; }
.vote-btn:hover { transform: none; }
.vote-btn.up { color: var(--muted); }
.vote-btn.down { color: var(--muted); }

/* ---------- Cartes, panneaux, colonne de droite ---------- */
.rightbar { padding-top: 18px; }
.card, .panel {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.card { padding: 16px; margin-bottom: 12px; }
.panel { padding: 22px 24px; }
.card-title { font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; color: var(--text); margin-bottom: 10px; }
.card-sub { color: var(--muted); }
.quick-link { border-radius: 7px; font-size: 13px; color: var(--text-soft); }
.panel h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.panel .sub { color: var(--muted); }

/* ---------- Champs ---------- */
.field input, .field textarea, .field select, input[type="text"], input[type="search"]:not(.search input), textarea, select {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input, .field select { height: 38px; }
.field input:focus, .field textarea:focus, .field select:focus, textarea:focus {
  outline: none; border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(215, 255, 69, .12);
}
.field label { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.hint { color: var(--muted-2); }

/* Listes déroulantes : texte centré verticalement, flèche discrète. */
select, .field select {
  height: 38px; padding: 0 32px 0 12px; line-height: normal;
  color: var(--text);
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* ---------- Fenêtres ---------- */
/* Au-dessus de la barre du haut (z-index 100) : la fenêtre n'est plus coupée. */
.modal-backdrop { z-index: 200; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.modal { border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.modal h2 { font-family: var(--font-title); font-weight: 560; font-size: 22px; letter-spacing: -.01em; }
.modal-actions { gap: 8px; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  :root { --btn-h: 34px; }
  .topbar .nav-toggle { display: inline-flex; }
  .pill { padding: 0 10px; }
  .post h2 { font-size: 19px; }
  .thread-header h2 { font-size: 25px; }
  .community-title h1, .page-title { font-size: 23px; }
  .community-logo { width: 42px; height: 42px; }
  /* Logo et titre sur la première ligne, boutons (Join, New topic) dessous. */
  .community-header { flex-wrap: wrap; align-items: flex-start; row-gap: 14px; }
  .community-header .community-title { flex: 1 1 calc(100% - 58px); }
  .community-header .community-title p { -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .sortbar { display: flex; width: 100%; }
  .sort { flex: 1; justify-content: center; padding: 0 6px; }
  .new-topic { padding: 0 12px; }
}

/* ---------- Grande recherche de l'accueil visiteur ----------
 * Une seule barre : le formulaire est le cadre (56 px). Dedans, la loupe, le
 * champ sur toute la largeur restante et le bouton « Search » encastré, à la
 * même hauteur intérieure. Les suggestions s'ouvrent sous le cadre, à sa largeur. */
.hero-form {
  position: relative;
  width: 100%; max-width: 680px; height: 56px;
  display: flex; align-items: center; gap: 0;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 32px rgba(0, 0, 0, .18);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hero-form:hover { border-color: var(--border-strong); }
.hero-form:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 4px rgba(215, 255, 69, .10), 0 12px 32px rgba(0, 0, 0, .18);
}
.hero-form .hero-field {
  flex: 1; min-width: 0; height: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px 0 12px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  cursor: text;
}
.hero-form .hero-field:focus-within { border: 0; box-shadow: none; }
.hero-form .hero-icon { display: grid; place-items: center; color: var(--muted-2); flex: 0 0 auto; font-size: 0; }
.hero-form:focus-within .hero-icon { color: var(--text-soft); }
/* Le conteneur ajouté par l'autocomplétion ne sert pas de repère : les
 * suggestions se placent par rapport au cadre entier. */
.hero-form .ac-wrap { position: static; flex: 1; min-width: 0; height: 100%; display: flex; }
.hero-form .hero-input,
.hero-form input[type="search"].hero-input {
  width: 100%; height: 100%; min-width: 0;
  padding: 0; margin: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
  color: var(--text); font-size: 16px; font-weight: 450; letter-spacing: -.005em;
  -webkit-appearance: none; appearance: none;
}
.hero-form .hero-input::placeholder { color: var(--muted-2); opacity: 1; }
.hero-form .hero-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hero-form .hero-input:focus { box-shadow: none; border: 0; }
.hero-form .hero-submit {
  flex: 0 0 auto; height: 100%;
  padding: 0 18px;
  border: 0; border-radius: 9px;
  background: var(--btn-primary-bg); color: var(--btn-primary-fg);
  font-size: 14px; font-weight: 600; letter-spacing: -.005em;
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}
.hero-form .hero-submit:hover { background: var(--btn-primary-hover); }
.hero-form .hero-submit:active { opacity: .85; }
.hero-form .ac-list {
  left: -1px; right: -1px; top: calc(100% + 8px);
  border-radius: 12px; text-align: left; max-height: 60vh; overflow-y: auto;
}

/* Puces des communautés sous la barre, accordées au nouveau style. */
.hero-chips { gap: 6px; margin-top: 4px; }
.hero-chip {
  height: 32px; padding: 0 12px 0 5px; gap: 8px;
  border-radius: 8px; border-color: var(--border-soft);
  background: transparent; color: var(--text-soft); font-weight: 500;
}
.hero-chip:hover { border-color: var(--border-strong); background: var(--panel-2); color: var(--text); }
.hero-brand { font-weight: 700; letter-spacing: -.03em; }
.hero-links a { color: var(--text-soft); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.hero-links a:hover { color: var(--text); text-decoration-color: currentColor; }

@media (max-width: 600px) {
  /* Mobile : même barre unique, bouton plus compact. */
  .hero-form { flex-direction: row; height: 52px; padding: 5px; }
  .hero-form .hero-field { padding: 0 6px 0 10px; gap: 8px; }
  .hero-form .hero-submit { height: 100%; padding: 0 14px; font-size: 13.5px; }
  .hero-form .ac-list { left: -1px; right: -1px; }
}