/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px;
  max-width: 1120px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: var(--ink); }
.brand svg { width: 30px; height: 24px; display: block; }
.brand b { font-family: "IBM Plex Mono", monospace; font-weight: 600; letter-spacing: .13em; font-size: .74rem; text-transform: uppercase; }
.topbar .spacer { flex: 1; }
.iconbtn {
  background: var(--surface); border: 1px solid var(--border); color: var(--ink-soft);
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  font-size: .95rem; transition: border-color .15s, color .15s;
}
.iconbtn:hover { color: var(--accent); border-color: var(--border-strong); }
.langwrap { position: relative; display: flex; }
.langmenu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: var(--shadow); padding: 5px; min-width: 150px;
  display: flex; flex-direction: column;
}
.langmenu[hidden] { display: none; }
.langbtn .langflag { font-size: 1.05rem; line-height: 1; }
.langopt {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 0; color: var(--ink); text-align: left;
  padding: 8px 12px; border-radius: 7px; font-size: .88rem; cursor: pointer;
}
.langopt .langflag { font-size: 1.05rem; line-height: 1; flex: none; }
.langopt .langname { flex: 1; }
.langopt:hover { background: var(--surface-2); }
.langopt.on { color: var(--accent); font-weight: 600; }
.langopt.on::after { content: "✓"; margin-left: auto; font-size: .8rem; }
.backbtn {
  background: none; border: 0; color: var(--ink-soft); padding: 6px 4px;
  font-family: "IBM Plex Mono", monospace; font-size: .78rem; letter-spacing: .04em;
}
.backbtn:hover { color: var(--accent); }

/* ---------- bouton profil (barre du haut) ---------- */
.profbtn {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); color: var(--ink);
  border-radius: 999px; padding: 3px 11px 3px 4px; transition: border-color .15s;
}
.profbtn:hover { border-color: var(--accent); }
.profbtn .prof-crab { width: 28px; height: 21px; flex: none; }
.profbtn .prof-lvl { font-family: "IBM Plex Mono", monospace; font-size: .68rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 520px) { .brand b { display: none; } }