/* Arms — application (couleurs : tokens du :root) */
html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  display: grid;
  grid-template-rows: 36px 1fr;
  user-select: none;
  background: linear-gradient(var(--bg-black-70), var(--bg-black-70)), url("assets/bg.jpg") center / cover no-repeat, #161616;
}

code {
  font-family: Consolas, monospace;
  color: var(--secondary-color);
  font-size: .92em;
}

button {
  font: inherit;
}

/* ---------- titlebar ---------- */
.titlebar {
  display: flex;
  align-items: center;
  padding-left: 12px;
  background: var(--bg-black-65);
  border-bottom: 1px solid var(--main-color-15);
  -webkit-app-region: drag;
  font-size: 13px;
}

.tb-left,
.tb-right {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
}

.tb-drag {
  flex: 1;
}

.tb-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.tb-title .sep {
  opacity: .5;
}

.logo {
  width: 18px;
  height: 18px;
  margin-right: 2px;
  object-fit: contain;
  -webkit-user-drag: none;
}

.tb-version {
  font-size: 11px;
  opacity: .55;
}

.sys-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 12px 3px 9px;
  background: var(--bg-black-45);
  color: #fff;
  border: 1px solid var(--main-color-30);
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  -webkit-app-region: no-drag;
  transition: border-color .15s;
}

.sys-pill:hover,
.sys-pill[aria-expanded="true"] {
  border-color: var(--main-color);
}

.st-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #777;
  flex: none;
}

.st-dot.ok {
  background: #2ecc71;
  box-shadow: 0 0 6px #2ecc71aa;
}

.st-dot.warn {
  background: #f5a623;
  box-shadow: 0 0 6px #f5a623aa;
}

.st-dot.error {
  background: var(--main-color);
  box-shadow: 0 0 6px var(--main-color);
}

.st-dot.idle {
  background: #777;
}

.tb-right {
  -webkit-app-region: no-drag;
}

.spotify {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 8px;
  max-width: 480px;
}

.sp-logo {
  width: 16px;
  height: 16px;
  flex: none;
  fill: #1db954;
  stroke: #000;
  stroke-width: 1.6;
  stroke-linecap: round;
  fill-rule: evenodd;
}

.spotify.off .sp-logo {
  fill: #666;
}

.sp-cover {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 4px;
  object-fit: cover;
}

.sp-cover:not([hidden])+.sp-logo {
  display: none;
}

.sp-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 2px;
}

.sp-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #aaa;
  line-height: 1.1;
}

.sp-text b {
  color: #fff;
  font-weight: bold;
}

.sp-bar {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: var(--bg-black-60);
  overflow: hidden;
}

.sp-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: #1db954;
}

.win-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: background .15s;
}

.win-btn:hover {
  background: var(--main-color-40);
}

.win-btn.close:hover {
  background: var(--main-color);
}

.win-btn svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

/* ---------- panneau Systèmes ---------- */
.sys-panel {
  position: fixed;
  z-index: 999990;
  top: 28px; /* ajusté au bas de la titlebar par app.js */
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 450px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 0 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px;
  background: var(--bg-black-45);
  backdrop-filter: blur(3px);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 14px 40px var(--bg-black-60);
  font-size: 13px;
  user-select: text;
}

.sys-sec {
  min-width: 0;
  padding-bottom: 8px;
}

.sys-panel h3 {
  margin: 6px 6px 6px;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--main-color);
}


.sys-item {
  border-radius: 4px;
}

.sys-item:hover {
  background: var(--main-color-15);
}

.sys-item .sys-row:hover {
  background: none;
}

.sys-row .d {
  max-width: 62%;
  text-align: right;
  overflow-wrap: anywhere;
}

/* jauge de quota sous la ligne */
.sys-q {
  height: 4px;
  margin: -2px 6px 6px 22px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.sys-q i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: #2ecc71;
  transition: width .4s ease, background-color .3s;
}

.sys-q[data-lvl="warn"] i { background: #f5a623; }
.sys-q[data-lvl="error"] i { background: var(--main-color); }

.sys-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 4px;
}

.sys-row:hover {
  background: var(--main-color-15);
}

.sys-row .n {
  flex: 1;
}

.sys-row .d {
  color: #999;
  font-size: 12px;
}

/* ---------- structure ---------- */
.app {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  min-height: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  background: var(--bg-black-45);
  border-radius: 12px;
}

.side-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: background .15s;
}

.side-btn svg,
.tab svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.side-btn:hover {
  background: var(--main-color-30);
}

.side-btn.is-active {
  background: var(--main-color-30);
}

.grow {
  flex: 1;
}

/* La navbar est dans la zone qui défile (.view) : elle défile avec le contenu, elle n'est pas fixe. */
.main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.topnav {
  display: none;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 60px;
  background: var(--bg-black-45);
  border-radius: 12px;
  margin-bottom: 16px;
}

.topnav.is-visible {
  display: flex;
}

.tab {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: background .15s;
}

.tab:hover {
  background: var(--main-color-30);
}

.tab.is-active {
  background: var(--main-color-30);
}

.view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 4px 32px 0;
  user-select: text;
}

.page {
  display: none;
}

.page.is-active {
  display: block;
  animation: page-in .18s ease-out;
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

h1 {
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 8px;
}

h2 {
  font-size: 16px;
  font-weight: normal;
  margin: 30px 0 10px;
  color: var(--main-color);
}

h3.sub {
  font-size: 13px;
  font-weight: normal;
  margin: 18px 0 8px;
  opacity: .8;
}

.lead {
  opacity: .75;
  max-width: 860px;
  line-height: 1.6;
  margin-bottom: 6px;
}

p.txt {
  max-width: 860px;
  line-height: 1.6;
  opacity: .85;
  margin: 6px 0;
}

.panel {
  padding: 22px;
  background: var(--bg-black-65);
  border: 1px solid var(--main-color-15);
  border-radius: 12px;
}

/* ---------- paramètres ---------- */
.settings {
  display: grid;
  gap: 22px;
  max-width: 560px;
  margin-top: 18px;
}

.setting p {
  margin: 6px 0 0 30px;
  font-size: 13px;
  opacity: .6;
}

/* ---------- documentation ---------- */
.doc-attrs {
  width: 100%;
  max-width: 900px;
  border-collapse: collapse;
  margin: 8px 0 4px;
  font-size: 13px;
}

.doc-attrs th {
  text-align: left;
  font-weight: normal;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--main-color);
  padding: 6px 12px;
}

.doc-attrs td {
  padding: 7px 12px;
  border-top: 1px solid var(--main-color-15);
  vertical-align: top;
  line-height: 1.5;
}

.doc-attrs td:first-child {
  white-space: nowrap;
  font-family: Consolas, monospace;
  color: var(--secondary-color);
  width: 1%;
}

/* Exemple : code / documentation à gauche, rendu vivant à droite, sur la même ligne. */
.example {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  margin: 12px 0;
  max-width: 1500px;
  background: var(--bg-black-45);
  border-radius: 12px;
  overflow: hidden;
}

.example .code-wrap {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.example .demo {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 6px 24px;
  min-width: 0;
  padding: 20px;
  background: var(--bg-black-25);
  border-left: 1px solid var(--main-color-15);
}

/* pas d'exemple vivant : le code prend toute la largeur */
.example:not(:has(.demo)) .code-wrap { grid-column: 1 / -1; }
.example .note { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .example { grid-template-columns: minmax(0, 1fr); }
  .example .code-wrap,
  .example .demo { grid-column: 1; grid-row: auto; }
  .example .demo { order: -1; border-left: 0; }
}

.example .demo.col {
  display: grid;
}

.example .note {
  padding: 8px 20px;
  font-size: 12px;
  opacity: .6;
}

.code-wrap {
  position: relative;
  padding-top: 38px; /* barre du haut : le bouton « Copier » y est posé, au-dessus du code */
}

.code-wrap::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 38px;
  border-bottom: 1px solid var(--main-color-15);
  pointer-events: none;
}

.example .demo:empty+.code-wrap {
  border-top: 0;
}

.code-wrap pre {
  margin: 0;
  padding: 12px 0;
  overflow-x: auto;
  font: 12.5px/1.65 Consolas, monospace;
  color: #d6d6d6;
  user-select: text;
}

.code-wrap .line {
  display: grid;
  grid-template-columns: 46px 1fr;
  white-space: pre;
}

.code-wrap .no {
  text-align: right;
  padding-right: 14px;
  color: #666;
  user-select: none;
}

.code-wrap .src {
  padding-right: 16px;
}

.copy {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 2;
  padding: 3px 10px;
  font-size: 11px;
  color: #fff;
  background: var(--bg-black-80);
  border: 1px solid var(--main-color-30);
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.copy:hover {
  background: var(--main-color);
  border-color: var(--main-color);
}

.copy.ok {
  background: #2ecc71;
  border-color: #2ecc71;
  color: #000;
}

/* coloration syntaxique */
.tk-com {
  color: #6f7a85;
  font-style: italic;
}

.tk-str {
  color: #a6e3a1;
}

.tk-kw {
  color: #cba6f7;
}

.tk-num {
  color: #fab387;
}

.tk-fn {
  color: #89b4fa;
}

.tk-tag {
  color: var(--secondary-color);
}

.tk-attr {
  color: #f9c784;
}

.tk-punc {
  color: #8b949e;
}

.tk-var {
  color: #f38ba8;
}

.tk-cls {
  color: #f9e2af;
}

.ctx-zone {
  width: 100%;
  padding: 34px 20px;
  border: 1px dashed var(--main-color-50);
  border-radius: 8px;
  text-align: center;
}

.demo-btn {
  padding: 8px 16px;
  background: none;
  color: #fff;
  border: 1px solid var(--main-color-50);
  border-radius: 3px;
  cursor: pointer;
  transition: all .15s;
}

.demo-btn:hover {
  background: var(--main-color);
  border-color: var(--main-color);
}

.sys-act {
  margin-left: 8px;
  padding: 2px 10px;
  border: 0;
  border-radius: 999px;
  background: #1db954;
  color: #000;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.sys-act:disabled {
  opacity: .6;
  cursor: default;
}

.sp-text.paused {
  opacity: .65;
}

/* ===== page Vues ===== */
.views-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.views-head p {
  margin: 0;
  opacity: .7;
}

.view-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.view-row:last-child {
  border-bottom: 0;
}

.view-row>svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}

.vr-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vr-main span {
  font-size: 12px;
  opacity: .55;
}

.vr-badge {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.vr-badge.custom {
  background: rgba(29, 185, 84, .2);
}

.vr-actions {
  display: flex;
  gap: 6px;
}

.btn-primary,
.btn-ghost {
  font: inherit;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  color: inherit;
}

.btn-primary {
  background: #e02d3c;
  color: #fff;
}

.btn-ghost {
  background: rgba(255, 255, 255, .08);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, .15);
}

.btn-ghost.danger:hover {
  background: rgba(224, 45, 60, .5);
}

.views-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

.views-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  opacity: .95;
}

.views-form input,
.views-form select,
.views-form textarea {
  font: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .35);
  color: inherit;
}

.views-form textarea {
  font-family: Consolas, monospace;
  font-size: 13px;
  resize: vertical;
}

.views-form input:disabled {
  opacity: .5;
}

/* Modale de création / modification d'une vue : champs sur 2 colonnes */
.vf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 16px;
  align-items: start;
}
.vf-grid .vf-wide { grid-column: 1 / -1; }
.vf-radios { display: flex; gap: 24px; margin: 4px 0; }

.vf-icons {
  display: flex;
  gap: 8px;
}

.icon-pick {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .35);
  color: inherit;
  cursor: pointer;
}

.icon-pick.is-on {
  border-color: #e02d3c;
  background: rgba(224, 45, 60, .25);
}

.icon-pick svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vf-err {
  color: #ff6b76;
  margin: 0;
  min-height: 1em;
}

.vf-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ===== page Test ===== */
.test-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.test-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.test-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.test-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tag-chip {
  font: 12px Consolas, monospace;
  padding: 3px 8px;
  border-radius: 6px;
  border: 0;
  background: rgba(255, 255, 255, .08);
  color: inherit;
  cursor: pointer;
}

.tag-chip:hover {
  background: rgba(224, 45, 60, .4);
}

.test-preview {
  min-height: 240px;
  padding: 14px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, .2);
}

.test-log {
  margin: 0;
  height: 160px;
  overflow: auto;
  font: 12px Consolas, monospace;
  white-space: pre-wrap;
  opacity: .85;
}

.side-btn[hidden] {
  display: none;
}

.view-row.is-hidden {
  opacity: .55;
}

.vr-badge.custom {
  background: rgba(29, 185, 84, .2);
}

/* Réduire / Fermer : collés, sans espace entre eux */
.win-ctl {
  display: flex;
  align-items: stretch;
  height: 100%;
}

/* glisser-déposer des vues */
.view-row {
  cursor: default;
}

.vr-grip {
  width: 14px;
  flex: none;
  text-align: center;
  opacity: .35;
  cursor: grab;
  font-size: 16px;
  line-height: 1;
  user-select: none;
}

.view-row:hover .vr-grip {
  opacity: .8;
}

.view-row.is-dragging {
  opacity: .45;
  background: var(--main-color-15);
  border-radius: 6px;
}

/* ---------- Vue Comptes ---------- */
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.acc-hint {
  opacity: .6;
  margin: 4px 0 18px;
}

.acc-hint code {
  background: var(--bg-black-65);
  padding: 1px 6px;
  border-radius: 4px;
}

.acc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.acc-card {
  --acc: var(--main-color-50);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: var(--bg-black-65);
  box-shadow: inset 3px 0 0 var(--acc);
}

.acc-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.acc-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--acc) 30%, transparent);
  font-weight: 700;
  font-size: 20px;
}

.acc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acc-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.acc-who strong,
.acc-who small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acc-who small {
  opacity: .6;
}

.acc-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  opacity: .8;
}

.acc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #777;
}

.acc-dot.on {
  background: #3ecf6e;
}

.acc-dot.warn {
  background: #e0a030;
}

.acc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.acc-stats div {
  display: flex;
  flex-direction: column;
}

.acc-stats b {
  font-size: 16px;
}

.acc-stats small {
  opacity: .6;
}

.acc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

/* ---------- AniList (vue « AniList », modal d'entrée, partage « story ») ---------- */
.al-acct {
  display: flex;
  align-items: center;
  gap: 10px;
}

.al-who {
  display: flex;
  align-items: center;
  gap: 8px;
}

.al-who img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.al-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 6px;
}

.al-seg {
  display: flex;
  gap: 4px;
}

.al-seg .btn-ghost.is-on {
  background: var(--main-color-50);
}

.al-body h2 {
  margin: 22px 0 10px;
}

.al-hint {
  opacity: .6;
  margin: 10px 0;
}

.al-err {
  color: #ff6b76;
  margin: 8px 0;
}

.al-empty {
  max-width: 640px;
  margin-top: 12px;
}

.al-empty p {
  margin: 6px 0;
}

.al-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  /* marge interne : le halo de survol (box-shadow 2px) des cartes du bord ne doit pas être rogné par le conteneur */
  padding: 4px;
}

.al-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  border-radius: 10px;
  outline: none;
}

.al-card:hover .al-cover,
.al-card:focus-visible .al-cover {
  box-shadow: 0 0 0 2px var(--main-color);
  transform: translateY(-2px);
}

.al-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-black-65);
  transition: transform .15s ease, box-shadow .15s ease;
}

.al-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.al-adult {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 7px;
  border-radius: 6px;
  background: #d81f2d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  pointer-events: none;
}

.al-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.al-meta strong {
  font-weight: normal;
  font-size: 13px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.al-meta small {
  opacity: .6;
  min-height: 1em;
}

/* modal d'entrée : haut (actions) · gauche (infos) · milieu (description, personnages, trailer) · droite (cover) · bas (actions de l'entrée) */
.arms-modal.al-dlg .head {
  display: none;
}

.arms-modal.al-dlg .body {
  padding: 0;
  max-height: none;
  overflow: hidden;
  display: block;
}

.al-modal {
  display: grid;
  grid-template-columns: 230px 790px 380px;
  grid-template-rows: 100px 634px 100px;
  grid-template-areas: "left top cover" "left mid cover" "left bottom cover";
  gap: 3px;
  justify-content: center;
  width: 1410px;
  max-width: 94vw;
  height: 840px;
  max-height: 94vh;
}

.al-modal>* {
  min-width: 0;
  min-height: 0;
}

.al-top {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  overflow: hidden;
}

.al-mtitle {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.al-mtitle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.al-mtitle h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.al-adult-box {
  padding: 1px 8px;
  border: 1px solid #e0313f;
  border-radius: 6px;
  background: transparent;
  color: #ff6b76;
  font-size: 12px;
  font-weight: 700;
}

.al-msub,
.al-parent {
  opacity: .7;
  font-size: 13px;
}

.al-parent b {
  font-weight: normal;
  color: var(--secondary-color);
}

.al-mtools {
  display: flex;
  gap: 8px;
}

.al-ibtn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: inherit;
  cursor: pointer;
}

.al-ibtn:hover {
  background: var(--main-color-30);
}

.al-scroll {
  overflow-y: auto;
  min-height: 0;
  padding: 16px 18px;
}

.al-left {
  grid-area: left;
  scrollbar-width: none,
}

.al-mid {
  grid-area: mid;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.al-cover-big {
  grid-area: cover;
  padding: 0;
}

.al-cover-big img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.al-bottom {
  grid-area: bottom;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  overflow: hidden;
}

.al-form {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 14px;
  align-items: center;
}

.al-prog {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.al-prog arms-input {
  flex: 1;
  min-width: 0;
}

.al-prog .btn-ghost {
  margin-top: 6px;
}

.al-mact {
  display: flex;
  align-items: center;
  gap: 10px;
}

.al-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 300px;
}

.al-links:empty {
  display: none;
}

.al-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: inherit;
  cursor: pointer;
  font-size: 12px;
}

.al-link:hover {
  background: var(--main-color-30);
}

.al-link img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 4px;
}

.al-loading {
  opacity: .6;
  margin: 0;
}

.al-kv {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
}

.al-kv div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.al-kv dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .55;
}

.al-kv dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.al-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.al-sub {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .6;
}

.al-desc {
  margin: 0;
  padding: 12px 14px;
  line-height: 1.55;
  border: 1px solid var(--main-color-15);
  border-radius: 8px;
  background: var(--bg-black-30);
  white-space: pre-line;
  user-select: text;
}

.al-trailer {
  position: relative;
  align-self: flex-start;
  width: 340px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

.al-trailer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .85;
  transition: opacity .15s;
}

.al-trailer:hover img {
  opacity: 1;
}

.al-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-black-65);
  box-shadow: 0 0 0 2px #fff inset;
  pointer-events: none;
}

.al-play::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 17px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}

.al-chars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 12px;
}

.al-char {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 13px;
  text-align: center;
}

.al-char-img {
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-black-65);
  margin-bottom: 4px;
}

.al-char-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.al-char strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.al-char small {
  opacity: .6;
}

.al-char em {
  font-style: normal;
  opacity: .75;
  font-size: 12px;
}

/* barre de titre : bouton de recherche globale + palette (Ctrl + K) */
.gs-btn {
  -webkit-app-region: no-drag;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  min-width: 300px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--main-color-25);
  border-radius: 999px;
  background: var(--bg-black-45);
  color: inherit;
  opacity: .8;
  cursor: pointer;
  font-size: 12px;
}

.gs-btn:hover {
  opacity: 1;
  border-color: var(--main-color-60);
}

.gs-btn span {
  flex: 1;
  text-align: left;
  opacity: .7;
}

.gs-btn kbd,
.gs kbd {
  font: 11px Consolas, monospace;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .1);
}

.gs {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 11vh 0 0;
  border: 0;
  background: var(--bg-black-50);
  backdrop-filter: blur(3px);
  display: none;
  justify-content: center;
  align-items: flex-start;
}

.gs:popover-open {
  display: flex;
}

.gs-box {
  width: min(680px, 92vw);
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--main-color-40);
  border-radius: 12px;
  background: var(--bg-black-90);
  box-shadow: 0 20px 60px var(--bg-black-60);
  overflow: hidden;
}

.gs-in {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 0;
}

.gs-in arms-icon {
  --arms-icon-size: 20px;
  opacity: .7;
}

.gs-in .gs-field {
  flex: 1;
}

.gs-results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
}

.gs-group {
  padding: 10px 10px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .55;
}

.gs-hint {
  padding: 12px 14px;
  opacity: .55;
}

.gs-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.gs-item.is-active {
  background: var(--main-color-25);
}

.gs-ico {
  flex: none;
  width: 34px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg-black-45);
}

.gs-ico:not(:has(img)) {
  height: 34px;
}

.gs-ico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-ico svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gs-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.gs-t strong {
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gs-t small {
  opacity: .6;
}

.gs-tag {
  flex: none;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.gs-foot {
  padding: 8px 14px;
  font-size: 12px;
  opacity: .5;
  border-top: 1px solid var(--main-color-15);
}

/* partage « story » */
.arms-modal.st-modal .body {
  max-height: none;
}

.st-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}

.st-stage {
  position: relative;
  flex: none;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--main-color-30);
  user-select: none;
}

.st-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.st-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(255, 255, 255, .14) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .14) 1px, transparent 1px);
}

.st-layers,
.st-guides {
  position: absolute;
  inset: 0;
}

.st-guides {
  pointer-events: none;
}

.st-layer {
  position: absolute;
  box-sizing: border-box;
  border: 1px dashed rgba(255, 255, 255, .28);
  cursor: move;
  touch-action: none;
}

.st-layer:hover {
  border-color: rgba(255, 255, 255, .6);
}

.st-layer.is-sel {
  border: 1px solid var(--main-color);
}

.st-tag {
  position: absolute;
  left: 0;
  top: -16px;
  font-size: 10px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--main-color);
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.st-layer.is-sel .st-tag {
  opacity: 1;
}

.st-h {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid var(--main-color);
  cursor: nwse-resize;
}

.st-guide {
  position: absolute;
  background: #ffd23f;
  pointer-events: none;
}

.st-guide.v {
  top: 0;
  bottom: 0;
  width: 1px;
}

.st-guide.h {
  left: 0;
  right: 0;
  height: 1px;
}

.st-example {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
}

.st-example[hidden],
.st-grid[hidden] {
  display: none;
}

.st-example img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.st-loading {
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  text-align: center;
  font-size: 12px;
  opacity: .8;
  padding: 0 10px;
  pointer-events: none;
}

.st-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 700px;
  overflow-y: auto;
  padding-right: 6px;
  min-width: 0;
}

.st-sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.st-sec h4 {
  margin: 0;
  font-weight: normal;
  color: var(--main-color);
  font-size: 14px;
}

.st-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.st-hint {
  margin: 0;
  font-size: 12px;
  opacity: .6;
  line-height: 1.45;
}

.st-phone {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.st-cand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  background: var(--bg-black-45);
}

.st-cand img,
.st-noqr {
  flex: none;
  width: 120px;
  height: 120px;
  border-radius: 6px;
  background: #fff;
}

.st-noqr {
  display: grid;
  place-items: center;
  color: #333;
  font-size: 11px;
  text-align: center;
}

.st-cand>div:last-child {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  align-items: flex-start;
}

.st-cand code {
  overflow-wrap: anywhere;
  font-size: 11px;
  opacity: .8;
  user-select: text;
}
/* ===== modal d'entrée AniList : refonte (grille fixe 230 / 790 / 380 · 100 / 634 / 100, gap 3) ===== */
.arms-modal.al-dlg .wrap { width: auto; }
.arms-modal.al-dlg .frame { width: 1410px; max-width: 94vw; height: 840px; max-height: 94vh; border-radius: 6px; background: var(--bg-black-90); }
.arms-modal.al-dlg .body { padding: 0; max-height: none; height: 100%; overflow: hidden; }
.al-modal { display: grid; box-sizing: border-box; width: 100%; height: 100%; padding: 0 2px; gap: 3px; grid-template-columns: 230px minmax(0, 1fr) 380px; grid-template-rows: 100px minmax(0, 1fr) 100px; grid-template-areas: "left top cover" "left mid cover" "left bottom cover"; background: transparent; }
.al-modal > * { box-sizing: border-box; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg-black-65); }
.al-top { grid-area: top; display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.al-mtitle { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.al-mtitle-row { display: flex; align-items: flex-start; gap: 8px; }
.al-mtitle h3 { margin: 0; font-size: 17px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.al-msub, .al-parent { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-links { flex: none; display: flex; flex-wrap: nowrap; gap: 4px; max-width: none; }
.al-link { min-width: 30px; height: 30px; padding: 0 5px; white-space: nowrap; }
.al-link img { width: 20px; height: 20px; }
.al-mtools { flex: none; display: flex; gap: 6px; }
.al-ibtn { width: 30px; height: 30px; }
.al-left { grid-area: left; overflow-y: auto; padding: 14px; }
.al-mid { grid-area: mid; overflow-y: auto; padding: 14px; }
.al-cover-big { grid-area: cover; padding: 0; }
.al-cover-big img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-bottom { grid-area: bottom; display: flex; align-items: center; gap: 14px; padding: 0 14px; }
.al-form { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; }
.al-form > arms-input { flex: 0 0 150px; min-width: 0; }
.al-form .al-prog { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; }
.al-form .al-prog .btn-ghost { flex: none; margin: 0; }
.al-form > arms-input:last-child { flex: 0 0 110px; }
.al-mact { flex: none; display: flex; gap: 8px; align-items: center; }

/* bas : ligne 1 = formulaire + boutons, ligne 2 = liens externes */
/* overflow: visible (contrairement aux autres cellules de la grille .al-modal) : le panneau déroulant du
   champ Statut doit pouvoir dépasser cette cellule (haute de 100px à peine) sans être découpé — voir flipUp()
   dans list.js, qui l'ouvre vers le haut faute de place en dessous. */
.al-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 58px 30px; align-content: center; gap: 4px 14px; padding: 0 14px; overflow: visible; }
.al-form { grid-column: 1; grid-row: 1; align-self: end; }
.al-mact { grid-column: 2; grid-row: 1; align-self: center; }
.al-links { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
.al-form arms-input { --arms-input-h: 40px; }
.al-kv-h { margin: 18px 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .55; }
.al-left .al-genres { gap: 5px; }

/* modal d'entrée : fond translucide + cover entière (sans recadrage) */
.arms-modal.al-dlg .frame { background: transparent; box-shadow: none; }
.al-modal > * { background: var(--bg-black-50); }
.al-cover-big { display: flex; align-items: center; justify-content: center; }
.al-cover-big img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }

/* liens externes : couleur du site (AniList fournit `color`) */
.al-link.is-colored { background: color-mix(in srgb, var(--lk) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lk) 60%, transparent); }
.al-link.is-colored:hover { background: color-mix(in srgb, var(--lk) 40%, transparent); }
.al-link-al { gap: 6px; padding: 0 10px; font-weight: 600; background: rgba(2, 169, 255, .22); box-shadow: inset 0 0 0 1px rgba(2, 169, 255, .6); }
.al-link-al:hover { background: rgba(2, 169, 255, .4); }
.al-link-al arms-icon { --arms-icon-size: 18px; }

/* ==========================================================================
   VUE DISCORD (views/discord.js) — styles portés du tableau de bord du bot.
   ========================================================================== */
.view-discord .hidden,
.discord-modal-overlay .hidden,
.discord-modal .hidden,
#discord-context-menu .hidden { display: none !important; }
.view-discord tooltip { display: none; }

/* La page occupe toute la hauteur : le fil de messages défile en interne. */
#page-discord.is-active { display: flex; flex-direction: column; height: 100%; }

/* grids */
.grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.grid-6col {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

/* Vue Discord : dashboard reconstruit nativement (voir discord-view.js) */
.view-discord {
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.discord-gate {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    /* max-width: 480px; */
    margin: 0 2rem;
}

.discord-gate.hidden {
    display: none;
}

.discord-gate h2 {
    margin: 0;
}

.discord-error {
    color: #f28b82;
}

/* Variante en lecture seule (écran de connexion) : pas de bouton de sélection,
   juste l'aperçu du serveur. */
.discord-guild-card.is-preview {
    cursor: default;
}

.discord-app {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.discord-app.hidden {
    display: none;
}

.discord-tab {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.discord-tab svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.discord-tab:hover {
    background: var(--bg-black-40);
    color: #fff;
}

.discord-tab.is-active {
    background: var(--main-color-20);
    color: #fff;
    font-weight: 600;
}

.discord-subnav-spacer {
    flex: 1;
}

.discord-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.discord-tab-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.discord-loading,
.discord-empty {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

.discord-btn {
    border: none;
    background: var(--bg-black-60);
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.discord-btn:hover {
    background: var(--main-color-20);
}

.discord-btn-danger {
    border-color: rgba(242, 139, 130, 0.4);
    color: #f28b82;
}

.discord-guild-card-actions {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 6px;
    margin-top: 8px;
}

/* Cartes du tableau de bord */
.discord-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.discord-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 14px;
    overflow: visible;
}

.discord-card-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.discord-card-value {
    font-size: 20px;
    font-weight: 600;
    margin-top: 4px;
}

.discord-card-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

/* Formulaires génériques */
.discord-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 420px;
}

.discord-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.discord-form-msg {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.discord-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

.discord-guilds-toolbar {
    margin-bottom: 14px;
}

/* Grille de serveurs */
.discord-guild-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.discord-guild-card {
    position: relative; /* repère du « ? » en haut à droite */
    background: var(--bg-black-50);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}

.discord-guild-btn-selected {
    color: lime
}

.discord-guild-card.is-selected {
    border-color: var(--main-color-50);
}

.discord-guild-card img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-bottom: 8px;
}

.discord-guild-icon-fallback {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 22px;
}

.discord-guild-name {
    font-weight: 600;
    font-size: 13px;
}

/* Liste de membres (rows) */
.discord-search {
    width: 100%;
    max-width: 320px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    padding: 7px 10px;
    font-size: 13px;
}

.discord-members-list {
    display: grid;
    gap: 6px;
}

.discord-member-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: var(--bg-black-30);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: default;
}

/* Séparateur de catégorie "Bots" dans la liste des membres (grille à 6
   colonnes, voir .grid-6col) : doit occuper toute la largeur de la ligne. */
.discord-members-category {
    grid-column: 1 / -1;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.5);
    padding: 10px 2px 4px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.discord-member-bot-tag {
    display: inline-flex;
    align-items: center;
    background: var(--main-color);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    padding: 1px 4px;
    border-radius: 3px;
    margin: 0 4px;
    vertical-align: middle;
}

.discord-member-row img {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
}

.discord-member-info {
    flex: 1;
    min-width: 0;
}

.discord-member-name {
    font-size: 13px;
    font-weight: 600;
}

.discord-member-username {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.discord-member-roles {
    font-size: 11px;
    margin-top: 2px;
}

.discord-member-actions {
    display: flex;
    gap: 6px;
}

/* Messages privés / Serveur : liste + fil de discussion */
.discord-dm-layout {
    display: flex;
    gap: 16px;
    height: 100%;
}

.discord-dm-list {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}

.discord-dm-new-form {
    display: flex;
    gap: 6px;
}

.discord-dm-new-form button {
    font-size: 12px;
    padding: 6px 10px;
    white-space: nowrap;
}

.discord-dm-new-hint {
    font-size: 10px;
    margin: 0 0 4px;
}

#discord-dm-list-items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.discord-dm-item {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}

.discord-dm-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.discord-dm-item.is-active {
    background: var(--main-color-20);
}

.discord-dm-item img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.discord-dm-item-text {
    flex: 1;
    min-width: 0;
}

.discord-dm-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

/* Flex-item portant l'ellipsis sur le pseudo (favori/fermer restent en
   dehors, sur .discord-dm-item-tools) ; la plaque n'est plus ancrée ici mais
   sur .discord-dm-item entier (voir plus bas), affichée sur toute la case
   comme demandé plutôt que juste derrière le texte du pseudo. */
.discord-dm-username-wrap {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

.discord-dm-username {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Couvre toute la case (.discord-dm-item, position:relative + z-index:0
   au-dessus) plutôt que juste le pseudo : reproduit le rendu du vrai client
   Discord où la plaque décore toute la ligne. border-radius:inherit reprend
   l'arrondi de la case sans dupliquer la valeur ; z-index:-1 la fait peindre
   derrière tout le contenu (avatar, texte) mais au-dessus du fond de la case
   (le survol/actif de .discord-dm-item reste visible en transparence). */
.discord-dm-nameplate {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.discord-dm-preview {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discord-dm-close-btn {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    line-height: 1;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
}

.discord-dm-item:hover .discord-dm-close-btn,
.discord-dm-item.is-active .discord-dm-close-btn {
    opacity: 1;
}

.discord-dm-close-btn:hover {
    background: rgba(237, 66, 69, 0.15);
    color: #ed4245;
}

.discord-dm-thread {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
}

/* Glisser-déposer un fichier n'importe où sur le fil (voir wireComposer) —
   overlay plein cadre au survol, pas de contenu qui bouge en dessous. */
.discord-dm-thread.is-dragover {
    border-color: var(--main-color-60);
}

.discord-dm-thread.is-dragover::after {
    content: "Dépose le(s) fichier(s) pour les joindre";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main-color-15);
    border: 2px dashed var(--main-color-70);
    border-radius: 10px;
    color: var(--secondary-color);
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    z-index: 50;
}

.discord-dm-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.discord-message {
    display: flex;
    gap: 8px;
}

/* Sélecteur d'enfant direct (et non ".discord-message img") : l'avatar est le
   seul <img> directement enfant de .discord-message — les images de pièces
   jointes/embeds, elles, sont imbriquées plus profondément dans
   .discord-message-body-wrap. Un simple ".discord-message img" les aurait
   toutes forcées à 28x28 rond (spécificité CSS plus forte que leur propre
   classe), écrasant leur taille réelle — c'était le bug des miniatures
   minuscules à la place de l'image en taille normale. */
.discord-message>img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.discord-message-head {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 12px;
}

/* Enveloppe position:relative servant d'ancrage à .discord-message-nameplate
   (position:absolute; inset:0) juste en dessous : la plaque de décoration se
   dimensionne ainsi exactement sur le pseudo, pas sur toute la ligne d'en-tête
   (horodatage/tags compris). data-tooltip porte le tag complet (pseudo#0000) :
   le nom affiché peut être ambigu (plusieurs comptes peuvent partager le même
   nom d'affichage global), le tag reste unique. */
.discord-message-author-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 3px;
}

.discord-message-author {
    font-weight: 600;
}

/* Petite plaque derrière le pseudo d'un message (DM/salon) — même principe que
   .discord-profile-nameplate (modal de profil) mais dimensionnée pour un
   simple nom en ligne plutôt qu'un bloc d'identité entier. */
.discord-message-nameplate {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 4px;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.discord-message-time {
    color: rgba(255, 255, 255, 0.4);
}

.discord-message-tag {
    color: #f28b82;
    font-size: 10px;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 0 4px;
}

.discord-message-content {
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Message supprimé : texte en rouge, pas de barré (rester lisible). */
.discord-message.is-deleted .discord-message-content,
.discord-message.is-deleted .discord-message-attachment a {
    color: #f04747;
    opacity: 0.85;
}

.discord-message-body-wrap {
    flex: 1;
    min-width: 0;
}

.discord-message-attachment {
    margin-top: 4px;
    font-size: 12px;
}

.discord-message-attachment-img {
    display: block;
    /* width/height (posés en attributs HTML depuis les dimensions réelles
     renvoyées par Discord) donnent le ratio intrinsèque de l'image ; on ne
     force ici que la taille MAX d'affichage (comme Discord), en laissant le
     navigateur recalculer une des deux dimensions pour garder ce ratio plutôt
     que de l'étirer. */
    width: auto;
    height: auto;
    max-width: 320px;
    max-height: 320px;
    border-radius: 8px;
    margin-top: 6px;
    cursor: pointer;
    object-fit: contain;
}

.discord-message-attachment a {
    color: #7aa2ff;
    text-decoration: none;
}

.discord-message-attachment a:hover {
    text-decoration: underline;
}

.discord-message-attachment-video {
    display: block;
    width: auto;
    height: auto;
    max-width: 360px;
    max-height: 320px;
    border-radius: 8px;
    margin-top: 6px;
    background: #000;
}

.discord-message-attachment-audio-wrap {
    margin-top: 6px;
    max-width: 320px;
}

.discord-message-attachment-audio-name {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 3px;
}

.discord-message-attachment-audio {
    width: 100%;
    height: 32px;
}

/* Bloc de code ```lang ... ``` : cadre sombre monospace façon Discord, avec un
   petit libellé de langage en haut à droite quand il est précisé. */
.discord-codeblock {
    position: relative;
    margin: 4px 0;
    padding: 8px 10px;
    background: #1e1f22;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow-x: auto;
}

.discord-codeblock-lang {
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.35);
    font-family: inherit;
}

.discord-codeblock-code {
    display: block;
    font-family: 'Consolas', 'Cascadia Code', 'Courier New', monospace;
    font-size: 12.5px;
    line-height: 1.5;
    color: #e3e5e8;
    white-space: pre;
    word-break: normal;
}

/* Coloration syntaxique (voir highlightCode dans discord-view.js) — jeu de
   couleurs façon thème sombre classique. */
.discord-codeblock-code .tok-keyword {
    color: #ff7b9c;
}

.discord-codeblock-code .tok-string {
    color: #a5e075;
}

.discord-codeblock-code .tok-number {
    color: #f0a35c;
}

.discord-codeblock-code .tok-comment {
    color: #7a7f87;
    font-style: italic;
}

.discord-codeblock-code .tok-function {
    color: #6ec9f5;
}

/* Code en ligne `code` : pastille grise inline, comme sur Discord. */
.discord-inline-code {
    font-family: 'Consolas', 'Cascadia Code', 'Courier New', monospace;
    font-size: 85%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 1px 4px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Aperçu média d'un lien brut collé dans le texte (linkifyText) — image/vidéo/son
   pointant directement vers un fichier, affiché sous le lien même sans embed
   Discord. Même gabarit que les pièces jointes. */
.discord-message-media {
    display: block;
    width: auto;
    height: auto;
    max-width: 320px;
    max-height: 320px;
    border-radius: 8px;
    margin-top: 6px;
    cursor: pointer;
    object-fit: contain;
    /* background: #000; */
}

.discord-message-media-audio {
    display: block;
    width: 100%;
    max-width: 320px;
    height: 32px;
    margin-top: 6px;
}

/* Liens bruts collés dans le texte d'un message (linkifyText), en plus des
   liens de pièce jointe ci-dessus — même traitement visuel que les mentions. */
.discord-message-content a {
    color: #00a8fc;
    text-decoration: none;
}

.discord-message-content a:hover {
    text-decoration: underline;
}

/* Menu contextuel (clic droit) sur un message : Modifier / Supprimer / Répondre
   / Épingler / Réagir / Copier — voir openMessageContextMenu() dans discord-view.js.
   Positionné en fixed au curseur (bridé aux limites de l'écran en JS), même
   habillage visuel que .native-menu (menu système custom de la sidebar). */
.discord-context-menu {
    position: fixed;
    min-width: 190px;
    padding: 4px;
    background: var(--bg-black-85);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    font-size: 13px;
    z-index: 300;
}

.discord-context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border: none;
    background: transparent;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.discord-context-menu-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.85;
}

.discord-context-menu-item:hover {
    background: rgba(255, 255, 255, 0.12);
}

.discord-context-menu-item.is-danger {
    color: #f04747;
}

.discord-context-menu-item.is-danger:hover {
    background: rgba(240, 71, 71, 0.15);
}

/* Bannière "Réponse à ..." au-dessus du champ de saisie. */
.discord-reply-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-left: 3px solid #5865f2;
    padding: 6px 10px;
    border-radius: 6px 6px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

.discord-reply-banner.hidden {
    display: none;
}

.discord-reply-cancel {
    margin-left: auto;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 12px;
}

.discord-reply-cancel:hover {
    color: #fff;
}

/* Fichiers en attente d'envoi (sélectionnés depuis le PC). */
.discord-file-chips:empty {
    display: none;
}

.discord-file-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}

.discord-file-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 4px 8px 4px 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 220px;
}

.discord-file-chip.is-error {
    background: rgba(240, 71, 71, 0.12);
    color: #f0a3a3;
}

.discord-file-chip-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.discord-file-chip-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    font-size: 15px;
    flex-shrink: 0;
}

.discord-file-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.discord-file-remove {
    cursor: pointer;
    margin-left: 2px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.discord-file-remove:hover {
    color: #f04747;
}

.discord-attach-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    padding: 0 10px;
    cursor: pointer;
    font-size: 14px;
}

.discord-attach-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.discord-guild-tab.hidden {
    display: none;
}

/* Arborescence des salons (catégories / texte / vocal / forum), dans l'ordre. */
.discord-channel-tree {
    padding: 6px;
}

.discord-channel-category {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
    margin: 12px 0 4px;
    padding: 0 6px;
}

.discord-channel-category:first-child {
    margin-top: 0;
}

.discord-channel-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

.discord-channel-row:hover {
    background: rgba(255, 255, 255, 0.08);
}

.discord-channel-row.is-active {
    background: var(--main-color-35);
    color: #fff;
}

.discord-channel-row.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.discord-channel-icon {
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.5);
}

/* Modal double-profil (profil "sur ce serveur" + profil Discord global). */
.discord-modal-wide {
    width: min(720px, 90vw);
}

.discord-profile-decoration {
    position: absolute;
    top: -6px;
    left: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    pointer-events: none;
}

.discord-add-role {
    margin-top: 8px;
}

.discord-reply-form {
    display: flex;
    gap: 8px;
}

/* Modal générique */
.discord-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    /* Ouverture/fermeture animées (voir openModal/closeOverlayAnimated dans
       discord-view.js, qui pilotent .is-open / .is-closing) : le fond
       s'estompe, la carte elle-même apparaît en fondu + léger zoom/décalage
       (voir .discord-modal juste en dessous). */
    opacity: 0;
    transition: opacity 0.16s ease;
}

/* Enveloppe juste .discord-modal (voir openModal() dans discord-view.js) :
   position:relative + taille ajustée à son contenu (inline-flex), pour que
   .discord-modal-toolbar (ajoutée en sibling de .discord-modal par
   l'appelant) puisse s'ancrer dessus en position:absolute et suivre la
   modale quelle que soit sa taille, plutôt que tout l'écran. */
.discord-modal-frame {
    position: relative;
    display: inline-flex;
}

/* Barre d'actions "hors cadre" au-dessus d'une modale, alignée à droite —
   fermeture, téléchargement, actions média (avatar/bannière/décoration/
   plaque…) : icônes seules avec info-bulle (data-tooltip) plutôt que des
   boutons texte. Positionnée en dehors de .discord-modal (jamais rognée par
   son overflow:auto) via .discord-modal-frame juste au-dessus. Même habillage
   que #sidebar (fond flouté + coins arrondis, une seule "barre" regroupant
   les boutons) plutôt que des icônes séparées flottant individuellement. */
.discord-modal-toolbar {
    position: absolute;
    top: -62px;
    right: 0;
    display: flex;
    gap: 6px;
    padding: 8px;
    /* var(--bg-black-45) seul ne se voyait pas : la barre flotte au-dessus du
       fond DÉJÀ sombre de .discord-modal-overlay (rgba(0,0,0,0.6)), donc un
       simple noir semi-transparent s'y fondait sans aucun contraste (contraire-
       ment à la sidebar, posée sur le fond clair/normal de l'app). On reprend
       donc le fond de .discord-modal lui-même + sa bordure, pour une barre qui
       se détache nettement de l'overlay derrière elle. */
    background: var(--bg-black-60);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    backdrop-filter: blur(6px);
}

.discord-modal-overlay.is-open {
    opacity: 1;
}

.discord-modal-overlay.is-closing {
    /* Ne bloque plus les clics pendant qu'il s'estompe (ex. pour ne pas
       gêner l'interaction avec ce qui apparaît juste après). */
    pointer-events: none;
}

.discord-modal {
    position: relative;
    background: var(--bg-black-60);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    width: auto;
    height: auto;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    color: #fff;
    padding: 20px;
    opacity: 0;
    transform: scale(0.94) translateY(8px);
    transition:
        opacity 0.16s ease,
        transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.discord-modal-overlay.is-open .discord-modal {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.discord-modal-close {
    /* Ancrée au coin de la modale (.discord-modal est en position:relative) —
       en `fixed`, elle se plaquait au coin de la FENÊTRE, donc en dehors de la
       modale dès que celle-ci n'occupait pas tout l'écran. */
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: red;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
}

.discord-modal-close:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* Modale mise de côté (pas détruite) le temps qu'une visionneuse d'image
   s'affiche par-dessus — voir openImageLightbox() dans discord-view.js. */
.discord-modal-overlay-hidden {
    display: none;
}

/* Visionneuse d'image (lightbox) : pas de cadre/carte, juste l'image et deux
   boutons icône en haut à droite, comme la visionneuse d'image de Discord. */
.discord-modal-lightbox {
    width: auto;
    height: auto;
    max-width: 98vw;
    max-height: 98vh;
    background: transparent;
    border: none;
    padding: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.discord-lightbox-viewport {
    display: flex;
    align-items: center;
    justify-content: center;
}

.discord-lightbox-img {
    display: block;
    max-width: 88vw;
    max-height: 82vh;
    border-radius: 8px;
    object-fit: contain;
    cursor: default;
    user-select: none;
    touch-action: none;
}

/* Zoom à la molette : le niveau vient d'un transform: scale() posé en JS
   (voir openImageLightbox() dans discord-view.js) — pas de transition ici,
   sinon chaque cran de molette accumule un délai qui rend le zoom mou. */
.discord-lightbox-img.is-zoomed {
    cursor: grab;
}

.discord-lightbox-img.is-zoomed.is-panning {
    cursor: grabbing;
}

.discord-lightbox-btn {
    /* Même traitement que .sidebar-icon (transparent, coins arrondis, surbrillance
       douce au survol) : ces boutons vivent maintenant dans une barre groupée
       (.discord-modal-toolbar) qui porte elle-même le fond, comme la sidebar. */
    background: transparent;
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.discord-lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.discord-lightbox-trigger {
    cursor: zoom-in;
}

.discord-profile-name {
    font-size: 16px;
    font-weight: 700;
}

.discord-add-role {
    margin-top: 10px;
}

.discord-role-remove {
    cursor: pointer;
    opacity: 0.6;
}

.discord-role-remove:hover {
    opacity: 1;
}

.discord-card-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.discord-card-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 5px solid #232428;
    background: #232428;
    object-fit: cover;
}

.discord-card-status-dot {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--status-color, #747f8d);
    border: 4px solid #232428;
    box-sizing: border-box;
}

.discord-card-badges {
    display: flex;
    gap: 4px;
    align-items: center;
    padding-bottom: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.discord-card-badge {
    font-size: 15px;
    line-height: 1;
}

.discord-card-badge img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

.discord-card-owner-icon {
    color: #f0b232;
    vertical-align: -2px;
    margin-left: 2px;
}

.discord-card-btn-message {
    flex: 1;
    background: #3ba55d;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.discord-card-btn-message:hover {
    background: #359456;
}

.discord-card-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 12px 0;
}

.discord-card-link {
    color: #00a8fc;
    text-decoration: none;
}

.discord-card-link:hover {
    text-decoration: underline;
}

.discord-card-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}

.discord-card-roles {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    /* Défile dans sa propre zone plutôt que de forcer tout le modal à
       défiler quand un membre a beaucoup de rôles (voir .discord-profile-sheet,
       qui a déjà son propre overflow-y:auto pour le reste du contenu). */
    max-height: 150px;
    overflow-y: auto;
    padding-right: 4px;
}

.discord-card-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    color: #fff;
    /* Un nom de rôle long ne pouvait pas rétrécir (min-width:auto par défaut
       sur un enfant flex) et débordait de la colonne au lieu de passer à la
       ligne : la pastille se retrouvait coupée par la colonne voisine. */
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.discord-card-role-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--role-color, #99aab5);
    flex-shrink: 0;
}

.discord-card-role-pill-removable .discord-role-remove {
    margin-left: 2px;
}

/* Mentions (@utilisateur, @rôle, #salon) résolues dans le texte */
.discord-mention {
    border-radius: 4px;
    padding: 0 3px;
    font-weight: 600;
}

.discord-mention-user,
.discord-mention-role {
    background: var(--main-color-25);
    color: var(--secondary-color);
}

.discord-mention-channel {
    background: rgba(255, 255, 255, 0.1);
    color: #d5d8ff;
}

.discord-mention-command {
    background: var(--main-color-25);
    color: var(--secondary-color);
}

.discord-mention-timestamp,
.discord-mention-nav {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
}

/* Émoji personnalisé (statique ou animé) inséré dans le texte d'un message —
   taille alignée sur la ligne de texte, comme sur Discord. */
.discord-inline-emoji {
    width: 22px;
    height: 22px;
    vertical-align: -6px;
    object-fit: contain;
}

/* Embed Discord */
.discord-embed {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 4px solid #5865f2;
    border-radius: 6px;
    padding: 10px 12px;
    max-width: 480px;
}

.discord-embed-main {
    flex: 1;
    min-width: 0;
}

.discord-embed-author {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

.discord-embed-author img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.discord-embed-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.discord-embed-title a {
    color: #00a8fc;
    text-decoration: none;
}

.discord-embed-desc {
    font-size: 13px;
    white-space: pre-wrap;
    color: rgba(255, 255, 255, 0.85);
}

.discord-embed-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.discord-embed-field {
    flex: 1 1 100%;
    min-width: 120px;
}

.discord-embed-field.is-inline {
    flex: 1 1 30%;
}

.discord-embed-field-name {
    font-size: 12px;
    font-weight: 700;
}

.discord-embed-field-value {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    white-space: pre-wrap;
}

.discord-embed-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 8px;
}

.discord-embed-footer img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.discord-embed-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.discord-embed-image {
    max-width: 100%;
    border-radius: 6px;
    margin-top: 8px;
}

.discord-embed-video {
    display: block;
    width: auto;
    height: auto;
    max-width: 360px;
    max-height: 320px;
    border-radius: 6px;
    margin-top: 8px;
    background: #000;
}

.notify-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.notify-modal-overlay.is-visible {
    opacity: 1;
}

.notify-modal {
    background: var(--bg-black-65);
    color: #fff;
    border-radius: 10px;
    padding: 18px 20px;
    width: min(420px, 90vw);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    transform: scale(0.96);
    transition: transform 0.15s ease;
}

.notify-modal-overlay.is-visible .notify-modal {
    transform: scale(1);
}

.notify-modal-message {
    color: #fff;
    font-size: 14px;
    margin: 0 0 12px;
    line-height: 1.4;
}

.notify-quick-options {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.notify-quick-option {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 16px;
    cursor: pointer;
}

.notify-quick-option:hover {
    background: rgba(255, 255, 255, 0.18);
}

.notify-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.notify-btn {
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
}

.notify-btn-cancel {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.notify-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.16);
}

.notify-btn-primary {
    background: #5865f2;
    color: #fff;
}

.notify-btn-primary:hover {
    background: #4752c4;
}

.notify-btn-danger {
    background: #f04747;
    color: #fff;
}

.notify-btn-danger:hover {
    background: #d83c3c;
}

/* -----------------------------------------------------------------------
   Messages système (ex : "X a épinglé un message dans ce salon")
----------------------------------------------------------------------- */
.discord-system-message {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    font-style: italic;
    padding: 2px 4px;
}

.discord-system-message-icon {
    transform: rotate(45deg);
}

/* -----------------------------------------------------------------------
   Barre d'outils du fil de discussion (bouton actualiser)
----------------------------------------------------------------------- */
.discord-thread-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 6px;
}

/* Un rafraîchissement qui échoue n'efface plus le fil : il le signale ici, à
   gauche du bouton, et le tour suivant reprend tout seul. */
.discord-thread-error {
    margin-right: auto;
    color: #f04747;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discord-thread-error.hidden {
    display: none;
}

/* -----------------------------------------------------------------------
   Messages en cours d'envoi (bulles optimistes)
   Affichés tout en bas du fil, dans l'ordre d'écriture, jusqu'à ce que le
   vrai message renvoyé par Discord prenne leur place.
----------------------------------------------------------------------- */
/* display:contents : le conteneur disparaît de la mise en page, ses bulles
   s'intercalent donc dans la colonne de messages comme les vraies. */
.discord-pending-messages {
    display: contents;
}

.discord-message.is-pending {
    opacity: 0.55;
}

.discord-message.is-sent {
    opacity: 0.8;
}

.discord-message.is-pending .discord-pending-state,
.discord-message.is-sent .discord-pending-state {
    font-style: italic;
}

.discord-message.is-failed .discord-pending-state {
    color: #f04747;
    font-weight: 600;
}

.discord-pending-reply {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 2px;
}

.discord-pending-error {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 12px;
    color: #f04747;
}

.discord-pending-error.hidden {
    display: none;
}

.discord-pending-error button {
    background: var(--bg-black-60);
    border: none;
    color: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
}

.discord-pending-error button:hover {
    background: var(--main-color-40);
    color: #fff;
}

.discord-thread-refresh {
    background: var(--bg-black-60);
    border: none;
    color: rgba(255, 255, 255, 0.75);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

.discord-thread-refresh:hover {
    background: var(--main-color-40);
    color: #fff;
}

/* -----------------------------------------------------------------------
   Bouton embed + puce "Embed prêt" dans le composer
----------------------------------------------------------------------- */
.discord-embed-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    padding: 0 10px;
    cursor: pointer;
    font-size: 14px;
}

.discord-embed-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.discord-composer-variables-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    padding: 0 10px;
    cursor: pointer;
    font-size: 14px;
    font-family: monospace;
}

.discord-composer-variables-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.discord-embed-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--main-color-15);
    border: 1px solid var(--main-color-40);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 4px;
}

.discord-embed-chip.hidden {
    display: none;
}

.discord-embed-chip-title {
    font-weight: 600;
    flex: 1;
}

.discord-embed-chip-edit,
.discord-embed-chip-remove {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 12px;
}

.discord-embed-chip-edit:hover,
.discord-embed-chip-remove:hover {
    color: #fff;
}

/* -----------------------------------------------------------------------
   Générateur d'embed complet (modal)
----------------------------------------------------------------------- */
/* Le groupe (cadre + barre d'actions) est centré comme un tout ; la barre reste
   donc toujours visible en bas à droite, hors du cadre scrollable, quelle que
   soit la hauteur du contenu de l'embed (nombre de champs, etc.). */
.discord-embedbuilder-overlay {
    align-items: center;
}

.discord-modal-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    max-height: 90vh;
    transform: scale(0.96);
    transition: transform 0.15s ease;
}

.discord-embedbuilder-overlay.is-visible .discord-modal-group {
    transform: scale(1);
}

/* Cette modale bâtit son propre overlay (.discord-embedbuilder-overlay, pas
   .discord-modal-overlay) mais réutilise la classe .discord-modal pour le
   cadre lui-même — qui hérite donc de son opacity:0/scale(0.94) de base
   SANS jamais recevoir l'override .discord-modal-overlay.is-open qui les
   annule normalement (cet overlay-ci n'a pas la classe .discord-modal-overlay).
   Résultat sans cette règle : le cadre (donc tout le formulaire dedans) reste
   invisible en permanence, seule la barre d'actions à côté (hors de .discord-
   modal) s'affiche. .discord-modal-group anime déjà le zoom d'ensemble
   ci-dessus, donc on se contente ici d'annuler l'opacité et le transform
   propres à .discord-modal plutôt que de les animer une seconde fois. */
.discord-embedbuilder-overlay.is-visible .discord-modal {
    opacity: 1;
    transform: none;
}

.discord-embedbuilder-modal {
    width: min(1040px, 95vw);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Grid 2 colonnes : formulaire à gauche, aperçu façon Discord (sticky) à droite. */
.discord-embedbuilder {
    display: grid;
    grid-template-columns: 1fr 30rem;
    gap: 24px;
    align-items: start;
}

.discord-embedbuilder-form {
    min-width: 0;
}

.discord-embedbuilder-preview-col {
    position: sticky;
    top: 0;
    min-width: 0;
    max-height: calc(90vh - 90px);
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 20px;
}

.discord-embedbuilder-preview {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    padding: 12px;
    min-height: 120px;
    font-size: 13px;
    flex: 1;
    overflow-y: auto;
    width: 27rem;
}

.discord-embedbuilder-preview-message {
    color: #fff;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 8px;
    font-size: 13px;
}

.discord-embedbuilder-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 16px 0;
}

.discord-embedbuilder-icon-preview {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

@media (max-width: 720px) {
  .discord-embedbuilder {
        grid-template-columns: 1fr;
    }
  .discord-embedbuilder-preview-col {
        position: static;
    }
}

.discord-embedbuilder-actions-bar {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    background: var(--bg-black-60);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* -----------------------------------------------------------------------
   Couleur personnalisée : bouton "+" et popover R/V/B + hex
----------------------------------------------------------------------- */
.discord-embedbuilder-color-custom-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.discord-embedbuilder-color-custom-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.discord-color-picker-popover {
    position: absolute;
    z-index: 20;
    margin-top: 8px;
    width: 220px;
    background: var(--bg-black-60);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.discord-color-picker-popover.hidden {
    display: none;
}

.discord-color-picker-head {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.discord-color-picker-preview {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.discord-color-picker-slider {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
}

.discord-color-picker-popover .discord-btn {
    width: 100%;
    margin-top: 4px;
}

.discord-embedbuilder-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    margin: 16px 0 6px;
}

.discord-embedbuilder-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.discord-embedbuilder-top .discord-embedbuilder-label {
    margin-top: 0;
}

.discord-embedbuilder-color-wrap {
    position: relative;
}

.discord-embedbuilder-color-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 420px;
}

.discord-embedbuilder-color-current {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: var(--swatch, #57f287);
    cursor: default;
}

.discord-embedbuilder-color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--swatch);
    cursor: pointer;
}

.discord-embedbuilder-color-swatch.is-active {
    border-color: #fff;
}

.discord-embedbuilder-thumb-wrap {
    flex-shrink: 0;
    text-align: right;
}

.discord-embedbuilder-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.discord-embedbuilder-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.discord-embedbuilder-thumb-icon {
    font-size: 20px;
    opacity: 0.5;
}

.discord-embedbuilder-thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    cursor: pointer;
    line-height: 1;
}

.discord-embedbuilder-inline-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.discord-embedbuilder-icon-btn {
    background: var(--bg-black-60);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.discord-embedbuilder-icon-btn:hover {
    color: #fff;
}

.discord-embedbuilder-icon-btn-round {
    border-radius: 50%;
}

.discord-embedbuilder-counted {
    position: relative;
}

.discord-embedbuilder-counter {
    position: absolute;
    right: 8px;
    bottom: 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

.discord-embedbuilder-fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.discord-embedbuilder-field-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
}

.discord-embedbuilder-field-card label {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin: 8px 0 4px;
}

.discord-embedbuilder-field-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.discord-embedbuilder-field-remove {
    background: none;
    border: none;
    color: #f04747;
    cursor: pointer;
    font-size: 12px;
}

.discord-embedbuilder-checkbox {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 8px !important;
}

.discord-embedbuilder-image-box {
    width: 100%;
    height: 90px;
    border-radius: 8px;
    background: var(--bg-black-60);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.discord-embedbuilder-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.discord-embedbuilder-timestamp {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

/* =========================================================================
   Page Logs — destinations en grille + réglages d'affichage
   Voir renderLogs() dans assets/js/discord-view.js.
   ========================================================================= */
.logs-page {
    display: flex;
    flex-direction: column;
    gap: 26px;
    max-width: 106rem;
    padding-bottom: 24px;
}

.logs-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.logs-section-head h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
}

.logs-section-head p {
    margin: 0;
    max-width: 720px;
    color: rgba(255, 255, 255, .55);
    font-size: 12.5px;
    line-height: 1.5;
}

.logs-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.logs-field-wide {
    max-width: 460px;
}

.logs-field-label {
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
}

/* ---- Grille des destinations ---- */
.logs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 12px;
}

.logs-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    background: var(--bg-black-40);
    transition: opacity .12s ease, border-color .12s ease;
}

.logs-card-new {
    display: flex;
    /* flex-direction: column; */
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    background: var(--bg-black-40);
    transition: opacity .12s ease, border-color .12s ease;
    justify-content: center;
    align-items: center;
}

.logs-card.is-off {
    opacity: .45;
}

.logs-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* Hauteur de l'interrupteur : la carte « Global » n'en a pas, et sans cette
       réserve elle serait plus courte que les autres — les listes déroulantes
       de la grille ne s'aligneraient plus. */
    min-height: 19px;
}

.logs-card-title {
    font-size: 13.5px;
    font-weight: 600;
}

.logs-card-hint {
    margin: 0;
    min-height: 30px;
    color: rgba(255, 255, 255, .45);
    font-size: 11.5px;
    line-height: 1.4;
}

.logs-card-hint-new {
    margin: 0;
    min-height: 30px;
    color: white;
    font-size: 11.5px;
    line-height: 1.4;
    font-size: 3rem;
}

/* ---- Réglages d'affichage + aperçu, côte à côte ---- */
.logs-style {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(320px, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
  .logs-style {
        grid-template-columns: 1fr;
    }
}

.logs-style-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    background: var(--bg-black-40);
}

.logs-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: center;
    font-size: 13px;
}

.logs-choice-column {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.logs-choice label {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    cursor: pointer;
}

.logs-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Bandeau « le bot tourne encore avec son ancien code » — visible sans être
   alarmant : les réglages restent utilisables, seule leur prise en compte
   attend un redémarrage. */
.logs-warning {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(250, 166, 26, 0.35);
    background: rgba(250, 166, 26, 0.10);
    color: #f0c674;
    font-size: 13px;
    line-height: 1.5;
}

.logs-warning strong {
    color: #ffd98a;
}

/* ---- Logs : messages par type d'événement ------------------------------- */

.logs-variables-hint {
    margin: 0 0 14px;
    font-size: 12.5px;
    color: var(--text-secondary, #9aa0a6);
}

.logs-variables-hint code {
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    font-family: var(--mono-font, Consolas, monospace);
    color: var(--secondary-color);
}

.logs-event-card.is-custom {
    border-color: var(--main-color-60);
}

/* Pastille colorée derrière l'emoji : reprend la couleur réelle de
   l'événement, celle que le bot utilisera dans l'embed. */
.logs-event-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--event-color) 22%, transparent);
    font-size: 13px;
    vertical-align: middle;
}

.logs-event-badge {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--main-color-20);
    color: var(--secondary-color);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

.logs-event-summary {
    min-height: 34px;
}

.logs-event-muted {
    margin: 0 0 8px;
    font-size: 11.5px;
    color: #f0c674;
}

.logs-event-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.logs-event-actions .discord-btn {
    padding: 5px 10px;
    font-size: 12px;
}

/* Ancré en position fixe : le panneau doit pouvoir déborder de la modale, qui
   a son propre défilement et masquerait sinon les suggestions du bas. */
.discord-varpicker {
    position: fixed;
    z-index: 10002;
    display: none;
    width: 340px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #1b1d22;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.discord-varpicker.is-open {
    display: block;
}

.discord-varpicker-group {
    padding: 8px 8px 4px;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary, #9aa0a6);
}

.discord-varpicker-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.discord-varpicker-item:hover,
.discord-varpicker-item.is-active {
    background: var(--main-color-20);
}

.discord-varpicker-item code {
    font-family: var(--mono-font, Consolas, monospace);
    font-size: 12px;
    color: var(--secondary-color);
}

.discord-varpicker-item span {
    font-size: 11px;
    color: var(--text-secondary, #9aa0a6);
}

/* ---- Dump des variables -------------------------------------------------- */

/* .discord-modal impose une hauteur fixe : pour le dump, on la laisse suivre
   le contenu, sinon une liste courte flotte au milieu d'un grand vide. */
.discord-dump-modal {
    height: auto;
    max-height: 82vh;
    padding: 20px 22px;
}

.discord-modal-title {
    margin: 0 0 10px;
    font-size: 16px;
}

.discord-dump-summary {
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary, #9aa0a6);
}

.discord-dump-broken {
    display: block;
    margin-top: 4px;
    color: #f28b82;
}

.discord-dump-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: var(--text-secondary, #9aa0a6);
    cursor: pointer;
}

.discord-dump-group {
    margin-bottom: 16px;
}

.discord-dump-group h5 {
    margin: 0 0 6px;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary, #9aa0a6);
}

.discord-dump-row {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 12px;
}

.discord-dump-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

.discord-dump-row code {
    font-family: var(--mono-font, Consolas, monospace);
    color: #8ab4f8;
    word-break: break-all;
}

/* Renseignée, vide, inconnue : trois états qui se distinguent d'un coup d'œil,
   parce que c'est exactement la question que le dump sert à trancher. */
.discord-dump-value {
    color: var(--text-secondary, #9aa0a6);
    word-break: break-word;
}

.discord-dump-row.is-filled .discord-dump-value {
    color: var(--text-primary, #e8eaed);
}

.discord-dump-row.is-broken code,
.discord-dump-row.is-broken .discord-dump-value {
    color: #f28b82;
}

/* ---------------------------------------------------------------------------
   Onglet « Profil du bot » de la vue Discord
   ---------------------------------------------------------------------------
   L'aperçu reprend la disposition de la carte de profil Discord (bannière,
   avatar débordant, nom, description). Il se met à jour à chaque frappe, avant
   tout enregistrement : c'est ce qui permet de juger un cadrage sans imposer
   ce cadrage au serveur.
*/
.botprofile-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.botprofile-intro {
    margin: 0;
    font-size: 13px;
    opacity: 0.75;
}

.botprofile-error {
    margin: 0;
}

.botprofile-columns {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.botprofile-preview-col {
    width: 320px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.botprofile-form {
    flex: 1 1 380px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 320px;
}

.botprofile-preview {
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-black-60);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.botprofile-preview-banner {
    height: 110px;
    background: linear-gradient(135deg, var(--main-color-80), var(--main-color-35));
    background-size: cover;
    background-position: center;
}

.botprofile-preview-body {
    padding: 0 16px 16px;
}

.botprofile-preview-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: -38px;
    border: 5px solid rgba(0, 0, 0, 0.75);
    background: rgba(0, 0, 0, 0.75);
    display: block;
}

.botprofile-preview-name {
    margin-top: 8px;
    font-size: 17px;
    font-weight: 700;
}

.botprofile-preview-tag {
    font-size: 12px;
    opacity: 0.6;
}

.botprofile-preview-bio {
    margin: 10px 0 0;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

.botprofile-badge,
.botprofile-flag {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--main-color-20);
}

.botprofile-flag {
    margin: 0 0 0 8px;
    background: var(--main-color-15);
    border-color: var(--main-color-4);
}

.botprofile-sync {
    font-size: 12px;
    opacity: 0.7;
}

.botprofile-sync.is-synced {
    color: var(--main-color-30);
    opacity: 1;
}

.botprofile-sync.is-dirty {
    color: var(--main-color-30);
    opacity: 1;
}

.botprofile-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.botprofile-label {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
}

.botprofile-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    opacity: 0.7;
}

.botprofile-hint {
    font-size: 11px;
    opacity: 0.65;
}

.botprofile-mini-btn {
    padding: 3px 10px;
    font-size: 11px;
}

.botprofile-media {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.botprofile-media-side {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.botprofile-drop {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    opacity: 0.9;
    cursor: pointer;
    overflow: hidden;
    background: var(--bg-black-65);
}

.botprofile-drop-banner {
    width: 240px;
    height: 120px;
}

.botprofile-drop:hover,
.botprofile-drop:focus-visible,
.botprofile-drop.is-dragover {
    background: var(--main-color-35);
    outline: none;
}

.botprofile-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.botprofile-unavailable {
    font-size: 12px;
    opacity: 0.75;
}

.botprofile-unavailable ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.botprofile-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.botprofile-actions .botprofile-save-btn {
    margin-left: auto;
    background: var(--main-color);
}

.botprofile-actions .botprofile-save-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.botprofile-dirty {
    font-size: 12px;
    color: var(--main-color-30);
}

.botprofile-history h3 {
    margin: 0 0 8px;
    font-size: 14px;
}

.botprofile-history-row {
    display: flex;
    gap: 12px;
    font-size: 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.botprofile-history-row:last-child {
    border-bottom: none;
}

.botprofile-history-date {
    opacity: 0.6;
    min-width: 130px;
}

/* --- Correctifs de l'onglet « Profil du bot » ------------------------------
   Deux choses qui manquaient et se voient tout de suite :

   1. `.hidden` n'est PAS une règle générique dans cette feuille — chaque
      composant déclare la sienne (`.discord-gate.hidden`, `.discord-app.hidden`…).
      Sans la règle ci-dessous, les pastilles « personnalisé ici » et l'état
      « Modifications non enregistrées » restaient affichés en permanence,
      alors même que le JavaScript posait bien la classe.
   2. Les champs de saisie n'héritent d'aucun style ici : sans règle, le
      navigateur les rend en blanc pleine largeur, façon formulaire de 1998.
*/
.botprofile-page .hidden {
    display: none !important;
}

.botprofile-form {
    max-width: 640px;
}

/* Les boutons d'une image tiennent sur une ligne, à leur largeur : dans une
   colonne flex ils s'étiraient sur toute la largeur restante. */
.botprofile-media-side {
    align-items: flex-start;
}

.botprofile-media-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.botprofile-media-side .discord-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.botprofile-hint {
    max-width: 260px;
    line-height: 1.4;
}

/* --- Les deux profils, l'un au-dessus de l'autre ---------------------------
   Le profil global et celui du serveur partagent exactement le même gabarit :
   c'est la comparaison, à format identique, qui fait comprendre d'un coup d'œil
   ce que la page change et ce qu'elle ne change pas. Le global est légèrement
   en retrait — il est en lecture seule.
*/
.botprofile-preview--global {
    opacity: 0.82;
}

.botprofile-badge--global {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.75);
}

.botprofile-preview-caption {
    margin: -2px 0 6px;
    font-size: 11px;
    line-height: 1.4;
    opacity: 0.55;
}

/* --- Onglets Serveur et Messages privés : deux colonnes, deux ascenseurs ----
   La liste des salons et le fil de messages partagent la hauteur disponible.
   Sans `overflow` sur la colonne de gauche, une longue liste de salons
   débordait : c'était alors TOUTE la zone d'onglet qui prenait un ascenseur, et
   le fil de droite descendait avec elle — d'où l'impression qu'il y avait
   quelque chose sous les messages, et un fil dont la hauteur suivait le nombre
   de salons au lieu de la fenêtre.

   Chaque colonne gère donc son propre défilement, et le conteneur, lui, ne
   défile plus du tout. */
.discord-dm-layout {
    min-height: 0;
    overflow: hidden;
}

.discord-dm-list {
    overflow-y: auto;
    /* Arrivé en bout de liste, la molette ne se propage pas au conteneur. */
    overscroll-behavior: contain;
}

.discord-dm-thread {
    min-height: 0;
    overflow: hidden;
}

.tok-comment {
    color: #6272a4;
    font-style: italic;
}

.tok-string {
    color: #f1fa8c;
}

.tok-number {
    color: #bd93f9;
}

.tok-keyword {
    color: #ff79c6;
}

.tok-function {
    color: #50fa7b;
}

/* Mise en forme Discord dans les messages : souligné, barré, spoiler. */
.discord-message-content u,
.discord-embed-desc u,
.discord-embed-field-value u {
    text-decoration: underline;
}

.discord-spoiler {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    color: transparent;
    cursor: pointer;
    transition: color 0.1s ease, background 0.1s ease;
}

.discord-spoiler.is-revealed {
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    cursor: text;
}

/* --- Page Logs : cartes de catégorie, deux boutons ------------------------- */
.logs-card-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logs-card-delete {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 6px;
    cursor: pointer;
}

.logs-card-delete:hover {
    background: rgba(242, 139, 130, 0.16);
    color: #f28b82;
}

.logs-card-buttons {
    display: flex;
    gap: 8px;
    margin-top: auto;
    flex-wrap: wrap;
}

.logs-card-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    /* flex: 1 1 auto; */
    min-width: 0;
    justify-content: space-between;
    text-align: left;
}

/* Destination : une liste dans la carte — la valeur se lit sans rien ouvrir,
   et se change en un clic. */
.logs-card-dest-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.logs-card-dest-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.logs-card-count {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--main-color-20);
}

.logs-add-category {
    margin-top: 12px;
}

.logs-orphans {
    margin: 12px 0 0;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    color: #ffd479;
    background: rgba(255, 212, 121, 0.1);
    border: 1px solid rgba(255, 212, 121, 0.28);
}

/* --- Modales des deux boutons --------------------------------------------- */
.logs-modal {
    width: min(520px, 92vw);
}

.logs-modal-title {
    margin: 0 0 4px;
    font-size: 15px;
}

.logs-modal-hint {
    margin: 0 0 12px;
    font-size: 12.5px;
    opacity: 0.65;
    line-height: 1.45;
}

.logs-modal-body {
    margin-bottom: 14px;
}

.logs-pick-list {
    max-height: 46vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logs-pick-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 13px;
    cursor: pointer;
}

.logs-pick-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.logs-pick-emoji {
    width: 18px;
    text-align: center;
}

.logs-pick-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logs-pick-where {
    font-size: 10.5px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    opacity: 0.75;
    white-space: nowrap;
}

/* Déjà dans cette catégorie : la pastille le confirme au lieu de disparaître. */
.logs-pick-where.is-here {
    background: var(--main-color-25);
    color: #fff;
    opacity: 1;
}

.logs-pick-where.is-none {
    background: rgba(255, 212, 121, 0.14);
    color: #ffd479;
    opacity: 1;
}

/* Le « ? » se place dans le coin de SA carte : `position: fixed` le collait au
   bord de la fenêtre, puisqu'un élément fixe se repère sur la fenêtre et non
   sur son conteneur. En absolu, il suit la carte, qui lui sert de repère. */
.discord-guild-question {
    position: absolute;
    top: 6px;
    right: 6px;
    line-height: 0;
}

.discord-guild-question-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    font: inherit;
    font-size: 11px;
    line-height: 1;
    cursor: help;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.discord-guild-question-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* --- Page Logs : la carte « + » qui suit la grille ------------------------- */
.logs-card-new {
    display: flex;
    gap: 8px;
    padding: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: var(--bg-black-40);
    transition: opacity 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* Même hauteur que ses voisines : une carte d'ajout qui dépasse ou qui
       s'écrase casserait l'alignement de la grille. */
    min-height: 100%;
}

.logs-card-new:hover {
    border-color: rgba(88, 101, 242, 0.6);
    background: rgba(88, 101, 242, 0.1);
}

.logs-card-hint-new {
    margin: 0;
    min-height: 30px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
    font-size: 3rem;
    display: flex;
    align-items: center;
}

.logs-card-new:hover .logs-card-hint-new {
    color: #fff;
}

/* --- Fiche serveur du « ? » ------------------------------------------------ */
.discord-guild-info-desc {
    margin: 0 0 8px;
    opacity: 0.75;
    font-size: 12px;
}

.discord-guild-info-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
}

.discord-guild-info-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.discord-guild-info-row span {
    opacity: 0.6;
}

.discord-guild-info-sub {
    opacity: 0.55;
    font-weight: 400;
}

.discord-guild-info-bot {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 11.5px;
    opacity: 0.8;
}

/* --- Messages privés : favoris --------------------------------------------- */
.discord-dm-item-tools {
    display: flex;
    align-items: center;
    gap: 4px;
}

.discord-dm-fav-btn {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease;
}

.discord-dm-fav-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffd479;
}

/* Une conversation en favori se repère sans lire : étoile pleine et dorée,
   et un liseré à gauche pour la distinguer du reste de la liste. */
.discord-dm-item.is-favorite .discord-dm-fav-btn {
    color: #ffd479;
}

.discord-dm-item.is-favorite {
    border-left: 2px solid rgba(255, 212, 121, 0.55);
}

/* ---------------------------------------------------------------------------
   Fiche de profil (modale membre)
   ---------------------------------------------------------------------------
   Bannière pleine largeur, avatar qui la chevauche, puis deux colonnes : ce
   qui concerne CE serveur à gauche, le compte Discord à droite. La bannière et
   les avatars sont cliquables — ils ouvrent la visionneuse, qui sait déjà les
   agrandir et les télécharger.
*/
.discord-profile-sheet {
    width: min(875px, 92vw);
    max-height: 86vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.discord-profile-hero {
    position: relative;
    height: 160px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
}

.discord-profile-hero.has-banner {
    cursor: zoom-in;
}

.discord-profile-hero-hint {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.discord-profile-hero:hover .discord-profile-hero-hint {
    opacity: 1;
}

.discord-profile-identity {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    padding: 0 6px;
    margin-top: -42px;
}

/* Plaque de décoration ("nameplate") : vidéo/image officielle Discord affichée
   en fond de la zone identité, derrière l'avatar et le pseudo (z-index négatif
   dans le contexte d'empilement de .discord-profile-identity : passe donc
   sous ses enfants normaux sans qu'il faille leur ajouter de z-index à eux).
   `pointer-events: none` pour ne jamais intercepter un clic destiné à
   l'avatar/à la bannière. */
.discord-profile-nameplate {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 12px;
    overflow: hidden;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.04);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

.discord-profile-identity-avatar {
    cursor: zoom-in;
    flex: 0 0 auto;
}

.discord-profile-identity-avatar .discord-card-avatar {
    width: 88px;
    height: 88px;
    border: 5px solid var(--bg-black-90, #16171a);
    border-radius: 50%;
}

.discord-profile-identity-text {
    flex: 1;
    min-width: 0;
    padding-bottom: 4px;
}

.discord-profile-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.discord-profile-name {
    font-size: 19px;
    font-weight: 700;
}

.discord-profile-handle {
    font-size: 12.5px;
    opacity: 0.6;
}

.discord-profile-bio {
    margin: 14px 6px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-black-40);
    font-size: 13px;
    line-height: 1.5;
}

.discord-profile-columns {
    display: flex;
    gap: 18px;
    margin: 16px 6px 15rem;
    flex-wrap: wrap;
}

.discord-profile-col {
    flex: 1 1 300px;
    min-width: 0;
}

/* Modal profil membre : grille 2x2 - en haut les deux fiches profil (sur ce
   serveur / profil global), en bas leurs informations respectives, chaque
   colonne alignée à la fiche du dessus. Une vraie grille (et non deux
   colonnes empilées indépendamment) pour que la rangée du haut et celle du
   bas s'alignent chacune sur leur contenu le plus grand, sans dépendre de
   la hauteur totale de l'autre colonne. */
.discord-profile-quad-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 14px;
    margin: 4px 6px 4px;
    align-items: start;
}

@media (max-width: 620px) {
  .discord-profile-quad-grid {
        grid-template-columns: 1fr;
    }
}

.discord-profile-grid-header {
    min-width: 0;
}

.discord-profile-grid-body {
    min-width: 0;
}

.discord-profile-mini-hero {
    position: relative;
    height: 90px;
    background-size: cover;
    background-position: center;
}

.discord-profile-mini-hero.has-banner {
    cursor: zoom-in;
}

.discord-profile-mini-identity {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    margin-top: -30px;
    margin-bottom: 10px;
}

.discord-profile-mini-avatar-wrap {
    cursor: zoom-in;
    flex: 0 0 auto;
}

.discord-profile-mini-avatar {
    width: 60px;
    height: 60px;
    border: 4px solid var(--bg-black-40);
    border-radius: 50%;
    background: #232428;
}

.discord-profile-mini-info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding-top: 25px;
}

.discord-profile-mini-text {
    min-width: 0;
}

.discord-profile-mini-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.5);
    /* Au-dessus de la bannière (voir discord-profile-grid-header), pas de
       l'identité : un petit espace la sépare de l'image en dessous. */
    margin-bottom: 4px;
}

.discord-profile-mini-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.discord-profile-mini-name {
    font-size: 14.5px;
    font-weight: 700;
}

.discord-profile-mini-actions {
    flex: 0 0 auto;
}

.discord-profile-mini-actions .discord-card-btn-message {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-black-65);
}

.discord-profile-mini-actions .discord-card-btn-message:hover {
    background: var(--main-color-85);
}

.discord-profile-mini-body {
    padding: 10px 12px 14px;
}

/* La plaque de décoration se pose dans la mini-fiche "sur ce serveur" ; le
   positionnement (position:relative) vient déjà de .discord-profile-mini-identity,
   on ajuste seulement le rayon de coin pour suivre celui, plus petit, de la
   mini-fiche (au lieu des 12px pensés pour le grand bandeau). */
.discord-profile-mini-identity .discord-profile-nameplate {
    border-radius: 10px;
}

.discord-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12.5px;
}

.discord-detail-row:last-child {
    border-bottom: 0;
}

.discord-detail-label {
    opacity: 0.6;
    display: flex;
    align-items: center;
    gap: 7px;
}

.discord-detail-value {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    text-align: right;
}

.discord-detail-value code {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 11.5px;
}

.discord-detail-copy {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
}

.discord-detail-copy:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.discord-detail-swatch {
    width: 13px;
    height: 13px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: inline-block;
}

.discord-profile-media-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.discord-profile-media-hint {
    margin: 6px 0 0;
    font-size: 11px;
    opacity: 0.5;
}

/* Serveurs en commun, dans la fiche du compte connecté. */
.discord-profile-guilds {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.discord-profile-guild {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.discord-profile-guild:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.discord-profile-guild img,
.discord-profile-guild-fallback {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
}

.discord-profile-guild-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.discord-profile-guild-name {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discord-profile-guild-sub {
    font-size: 11px;
    opacity: 0.6;
}

/* Le bouton d'avatar de la barre devient cliquable : on le dit. */
.discord-user-btn {
    cursor: pointer;
}



/* carte : épisodes + titre sur la couverture, titre coloré selon le statut */
.al-cover { position: relative; }
.al-over { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 34px 9px 8px; background: linear-gradient(to top, rgba(0, 0, 0, .92), rgba(0, 0, 0, .6) 55%, transparent); pointer-events: none; }
.al-over small { font-size: 12px; color: #fff; opacity: .9; }
.al-over strong { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--st, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-card.st-COMPLETED { --st: #4ade80; }
.al-card.st-PLANNING { --st: #fb923c; }
.al-card.st-CURRENT { --st: #38bdf8; }
.al-card.st-DROPPED { --st: #f87171; }

/* --- Discord : onglet Rich Presence (views/discord-rpc.js) --- */
.discord-rpc { padding: 4px 2px 24px; }
.discord-rpc-status { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; }
.discord-rpc-dot { width: 10px; height: 10px; border-radius: 50%; background: #80868b; flex-shrink: 0; }
.discord-rpc-dot[data-status="connected"] { background: #3ba55d; }
.discord-rpc-dot[data-status="connecting"] { background: #f0b232; }
.discord-rpc-dot[data-status="error"] { background: #ed4245; }
.discord-rpc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 28px; align-items: start; }
.discord-rpc-form { max-width: none; }
.discord-rpc-row { display: flex; gap: 10px; }
.discord-rpc-row > label { flex: 1; min-width: 0; }
.discord-rpc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.discord-rpc-side h3 { margin: 0 0 8px; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.discord-rpc-preview {
    background: var(--bg-black-40); border-radius: 10px; padding: 14px; margin-bottom: 18px;
    font-size: 14px; display: flex; flex-direction: column; gap: 10px;
}
.discord-rpc-pv-head { font-size: 14px; font-weight: 700; color: #fff; }
.discord-rpc-pv-body { display: flex; gap: 14px; align-items: center; min-width: 0; }
.discord-rpc-pv-imgs { position: relative; flex-shrink: 0; width: 90px; height: 90px; }
.discord-rpc-pv-big { width: 90px; height: 90px; border-radius: 10px; object-fit: cover; display: block; }
.discord-rpc-pv-small { position: absolute; right: -8px; bottom: -8px; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg-black-40); box-sizing: content-box; }
.discord-rpc-pv-asset { display: flex; align-items: center; justify-content: center; background: var(--bg-black-30); font-size: 26px; }
.discord-rpc-pv-small.discord-rpc-pv-asset { font-size: 14px; }
.discord-rpc-pv-asset.is-empty { opacity: 0.4; }
.discord-rpc-pv-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.discord-rpc-pv-name { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.discord-rpc-pv-line { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.78); overflow-wrap: anywhere; }
.discord-rpc-pv-time { display: flex; align-items: center; gap: 6px; color: #3ba55d; font-variant-numeric: tabular-nums; }
.discord-rpc-pv-text .pv-ico { display: inline-flex; flex: none; width: 16px; height: 16px; }
.discord-rpc-pv-text .pv-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.discord-rpc-pv-line .pv-ico { color: rgba(255, 255, 255, 0.6); }
.discord-rpc-pv-btn { text-align: center; padding: 6px; border-radius: 6px; background: var(--bg-black-30); font-weight: 600; }
.discord-rpc-presets { display: flex; flex-direction: column; gap: 6px; }
.discord-rpc-preset { display: flex; gap: 6px; }
.discord-rpc-preset > [data-act="load"] { flex: 1; text-align: left; }
@media (max-width: 900px) { .discord-rpc-cols { grid-template-columns: 1fr; } }

/* --- Discord : champs <arms-input> (mise en page seulement, l'apparence vient de la lib) --- */
.discord-form arms-input,
.logs-field arms-input,
.botprofile-field arms-input,
.discord-embedbuilder arms-input,
.notify-modal arms-input,
.discord-rpc-form arms-input { display: block; width: 100%; min-width: 0; }
.discord-rpc-row > arms-input { flex: 1; min-width: 0; }
.discord-embedbuilder-inline-row > arms-input { flex: 1; min-width: 0; }
.discord-embedbuilder-inline-row > arms-input[type="checkbox"] { flex: 0 0 auto; width: auto; }
.discord-embedbuilder-counted { position: relative; }
/* Compteurs : ceux de la vue (n / max) restent, on masque celui du textarea Arms. */
.discord-embedbuilder-counted arms-input[type="textarea"]::after,
.botprofile-field arms-input[type="textarea"]::after { content: none; }
.discord-color-picker-head { display: flex; align-items: center; gap: 8px; }
.discord-color-picker-head arms-input { flex: 1; }
.discord-reply-form { align-items: center; }
.discord-reply-form > arms-input { flex: 1; min-width: 0; }
.discord-dm-new-form { align-items: center; }
.discord-dm-new-form > arms-input { flex: 1; min-width: 0; }
.discord-search { width: 100%; max-width: 320px; }
.logs-choice arms-input { width: auto; }
.logs-choice-column arms-input { width: 100%; }
.logs-card-dest-field { min-width: 0; width: 100%; }
.logs-pick-row arms-input { width: auto; flex: 0 0 auto; }
.notify-modal arms-input { margin: 8px 0; }

/* =====================================================================
   Style « classique » des <arms-input> — celui des anciens champs de la vue
   Discord (fond translucide, bordure fine, angles arrondis, liste déroulante
   sombre), appliqué à TOUTE l'application. Le préfixe :root sert à passer
   devant les feuilles de la lib, qui se chargent après app.css.
   ===================================================================== */
arms-input:has(> .arms-text) { display: block; margin: 4px 0; padding-top: 18px; } /* place du libellé, qui remonte AU-DESSUS du cadre */

/* Champs texte, nombre, liste, date… : boîte de 40 px, libellé dans le champ */
:root .arms-text {
    position: relative;
    width: 100%;
    margin: 0;
}

:root .arms-text[data-type] { width: 100%; }

:root .arms-text arms-field {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    min-height: 0;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    line-height: 38px; /* champ d'une ligne : texte centré verticalement dans la boîte de 40 px */
    outline: none;
    transition: border-color 0.15s ease;
}

:root .arms-text arms-field:hover { border-color: rgba(255, 255, 255, 0.3); }

:root .arms-text arms-field:focus { border-color: var(--main-color-60); }

:root .arms-text arms-field[data-empty]::before { color: transparent; }
:root .arms-text arms-field:focus[data-empty]::before,
:root .arms-text.is-filled arms-field[data-empty]::before { color: rgba(255, 255, 255, 0.35); }

/* Libellé : dans le champ tant qu'il est vide, petite légende en haut ensuite */
:root .arms-text .label {
    top: 20px;
    left: 11px;
    transform: translateY(-50%);
    max-width: calc(100% - 44px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    transition: all 0.15s ease;
}

:root .arms-text arms-field:focus ~ .label,
:root .arms-text.is-filled .label {
    top: -9px;
    left: 2px;
    font-size: 11px;
    line-height: 14px;
    color: rgba(255, 255, 255, 0.7);
}
:root .arms-text arms-field:focus ~ .label { color: var(--main-color); }

:root .arms-text .underline { display: none; }

:root .arms-text.is-invalid arms-field { border-color: var(--secondary-color); }
:root .arms-text.is-invalid .label { color: var(--secondary-color); }

:root .arms-text.has-toggle arms-field { padding-right: 32px; }
:root .arms-text .toggle {
    top: auto;
    right: 8px;
    bottom: 8px;
    height: 24px;
    color: rgba(255, 255, 255, 0.5);
}
:root .arms-text .toggle:hover,
:root .arms-text .toggle:focus-visible { color: #fff; }

:root .arms-text[data-type="list"] arms-field { padding-right: 32px; }
:root .arms-text[data-type="list"].is-open arms-field { border-color: var(--main-color-60); }

/* Zone de texte */
:root arms-input[type="textarea"] {
    display: block;
    width: 100%;
    margin: 22px 0 4px;
    padding: 9px 10px;
    min-height: calc(var(--rows, 4) * 20px + 20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 13px;
    line-height: 20px;
    transition: border-color 0.15s ease;
}
:root arms-input[type="textarea"]:hover { border-color: rgba(255, 255, 255, 0.3); }
:root arms-input[type="textarea"]:focus { border-color: var(--main-color-60); }
:root arms-input[type="textarea"]::before {
    top: 9px;
    left: 10px;
    font-size: 13px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.45);
    transition: all 0.15s ease;
}
:root arms-input[type="textarea"]:focus::before,
:root arms-input[type="textarea"][data-filled]::before {
    top: -20px;
    left: 2px;
    font-size: 11px;
    line-height: 14px;
    color: rgba(255, 255, 255, 0.7);
}
:root arms-input[type="textarea"]:focus::before { color: var(--main-color); }
:root arms-input[type="textarea"]::after {
    top: -18px;
    right: 2px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
}
:root arms-input[type="textarea"][data-invalid] { border-color: var(--secondary-color); }
:root arms-input[type="textarea"][data-invalid]::before { color: var(--secondary-color); }

/* Liste déroulante : panneau sombre, éléments arrondis */
:root .arms-list-panel {
    padding: 4px;
    border: none;
    border-radius: 8px;
    background: var(--bg-black-65);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    font-size: 13px;
    /* au-dessus des modales (500) */
    z-index: 600;
    scrollbar-width: none;
}
:root .arms-list-panel .opt { padding: 7px 10px; border-radius: 5px; }
:root .arms-list-panel .opt.is-active { background: rgba(255, 255, 255, 0.1); }
:root .arms-list-panel .opt.is-selected { background: var(--main-color-20); color: #fff; }

/* Cases à cocher et boutons radio : cases compactes */
:root .arms-checkbox .cbx span:first-child { width: 16px; height: 16px; border-color: rgba(255, 255, 255, 0.3); }
:root .arms-checkbox .cbx span:first-child svg { top: 2px; left: 1px; }
:root .arms-checkbox .cbx span:last-child,
:root .arms-radio .rdo .text { padding-left: 8px; font-size: 13px; }
:root .arms-radio .rdo .dot { width: 16px; height: 16px; border-color: rgba(255, 255, 255, 0.3); }
:root .arms-checkbox .cbx:hover span:first-child,
:root .arms-radio .rdo:hover .dot { border-color: var(--main-color); }
:root .arms-checkbox .inp-cbx[checked] + .cbx span:first-child { border-color: var(--main-color); }
:root .arms-radio .inp-rdo[checked] + .rdo .dot { border-color: var(--main-color); }

/* Sélecteur de couleur : pastille rectangulaire */
:root .arms-color .swatch {
    width: 34px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
}
:root .arms-color .swatch:hover { border-color: var(--main-color); transform: none; }
:root .arms-color .code { min-width: 0; font-size: 12px; }
:root .arms-color .label,
:root .arms-range .label { font-size: 13px; }

/* Cas particuliers de mise en page */
.discord-reply-form > arms-input,
.discord-dm-new-form > arms-input,
.discord-embedbuilder-inline-row > arms-input,
.discord-color-picker-head > arms-input,
.gs-in > arms-input,
.al-form > arms-input,
.al-prog > arms-input { margin: 0; }
.discord-search arms-input { max-width: 320px; }
.discord-rpc-row { align-items: flex-end; }
#t-src { font-family: Consolas, monospace; white-space: pre; overflow: auto; }

/* modal d'entrée : textes réduits de 20 % */
.al-modal { font-size: 12.8px; }
.al-mtitle h3 { font-size: 13.6px; }
.al-msub, .al-parent { font-size: 9.6px; }
.al-parent small { font-size: 8px; }
.al-kv dt, .al-kv-h { font-size: 8.8px; }
.al-sub { font-size: 9.6px; }
.al-char { font-size: 10.4px; }
.al-char small, .al-char em { font-size: 9.6px; }
.al-modal .vr-badge { font-size: 8.8px; }
.al-link { font-size: 9.6px; }
.al-timer { font-variant-numeric: tabular-nums; color: #4ade80; }

/* liens cliquables : studios, producteurs, catégories */
.al-lk { padding: 0; border: 0; background: none; color: var(--secondary-color, #ff5d6c); font: inherit; cursor: pointer; text-align: left; }
.al-lk:hover { text-decoration: underline; }
.al-lk-badge { border: 0; color: inherit; font-family: inherit; cursor: pointer; }
.al-lk-badge:hover { background: var(--main-color-30); }

.al-over .al-eta { color: #4ade80; }
.al-over { pointer-events: auto; }

.al-more { padding: 18px 0 28px; text-align: center; opacity: .6; font-size: 12px; }

/* icône de sidebar prise dans la bibliothèque de médias (image, SVG ou vidéo) */
.side-btn .side-media {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 4px;
  pointer-events: none;
}
.view-row > .vr-img {
  width: 22px;
  height: 22px;
  flex: none;
  object-fit: contain;
  border-radius: 4px;
}

/* formulaire de vue : icône de la bibliothèque + option sidebar */
.vf-icon-row { display: flex; align-items: center; gap: 12px; }
.vf-icon-row small { opacity: .6; font-size: 12px; line-height: 1.4; }

/* Vues : liste séparée en deux zones (haut / bas de la sidebar) */
.views-zone { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.views-zone-title { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 15px; }
.views-zone-title small { font-size: 12px; font-weight: 400; opacity: .5; }
.views-zone .views-list { min-height: 56px; }
.views-zone .views-list:empty::after { content: 'Glisse une vue ici'; display: block; padding: 18px; text-align: center; font-size: 13px; opacity: .4; }

/* Titlebar : message « Redémarrage requis » (fichier du processus principal modifié) */
.restart-pill { -webkit-app-region: no-drag; display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; padding: 4px 6px 4px 11px; border: 1px solid #ffb020; border-radius: 999px; background: rgba(255, 176, 32, .12); color: #ffcf70; font: inherit; font-size: 12px; cursor: pointer; animation: restart-pulse 2.4s ease-in-out infinite; }
.restart-pill[hidden] { display: none; }
.restart-pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.restart-pill b { padding: 2px 9px; border-radius: 999px; background: #ffb020; color: #1a1200; font-weight: 600; }
.restart-pill:hover b { background: #ffc857; }
@keyframes restart-pulse { 50% { box-shadow: 0 0 0 4px rgba(255, 176, 32, .18); } }
@media (prefers-reduced-motion: reduce) { .restart-pill { animation: none; } }

/* Titlebar : pastille « Mise à jour disponible » (voir updater.js / update-pill dans index.html) */
.update-pill { -webkit-app-region: no-drag; display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; padding: 4px 6px 4px 11px; border: 1px solid #2ecc71; border-radius: 999px; background: rgba(46, 204, 113, .12); color: #8be9ae; font: inherit; font-size: 12px; cursor: pointer; }
.update-pill[hidden] { display: none; }
.update-pill:disabled { opacity: .7; cursor: default; }
.update-pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.update-pill b { padding: 2px 9px; border-radius: 999px; background: #2ecc71; color: #042913; font-weight: 600; }
.update-pill:hover:not(:disabled) b { background: #55d98c; }

/* Rich Presence : champs en grille de 2 colonnes (identité + images | statut, chrono, groupe, boutons), aperçu à droite */
.discord-rpc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; align-items: start; }
.discord-rpc-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.discord-rpc-row { flex-wrap: wrap; }
.discord-rpc-row > * { flex: 1 1 130px; min-width: 0; }
.discord-rpc-form > .discord-hint, .discord-rpc-form > .discord-rpc-actions { margin-top: 14px; }
@media (max-width: 1250px) { .discord-rpc-cols { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .discord-rpc-grid { grid-template-columns: 1fr; } }

/* icône manette (Discord) : pleine, couleur du chrono */
.discord-rpc-pv-text .pv-ico svg.pv-fill { fill: currentColor; stroke: none; width: 14px; height: 14px; }

/* Recherche globale : icône d'une page = celle de la sidebar (image / vidéo de la bibliothèque : carré, pas format affiche) */
.gs-ico:has(.gs-pg) { height: 34px; }
.gs-ico .gs-pg { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }

/* AniList : onglet « Filtres » */
.al-filters { display: flex; flex-direction: column; gap: 16px; padding: 18px; margin-bottom: 16px; }
.al-fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 22px; align-items: start; }
.al-fgrp { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.al-fgrp.al-fnums { flex-direction: row; gap: 10px; }
.al-fgrp.al-fnums > * { flex: 1; min-width: 0; }
.al-flabel { font-size: 12px; opacity: .6; text-transform: uppercase; letter-spacing: .04em; }
.al-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.al-tags { max-height: 150px; overflow-y: auto; padding: 2px; }
.al-chip { padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: var(--bg-black-40); color: inherit; font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.al-chip:hover { border-color: var(--main-color-50); }
.al-chip.is-on { border-color: var(--main-color); background: var(--main-color-40); }
.al-chip[hidden] { display: none; }
.al-filters:not(.adult-on) .al-chip[data-adult] { display: none; }
.al-ffoot { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.al-ffoot .btn-ghost { margin-left: auto; }
.al-fcount { margin: 4px 0 12px; font-size: 13px; opacity: .6; }

/* AniList : compte dans la navbar (à droite, à l'opposé des onglets) + boutons de filtres à côté d'« Actualiser » */
.al-nav-right { margin-left: auto; }
.al-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.al-fbar[hidden] { display: none; }
.al-fbtn { display: inline-flex; align-items: center; gap: 6px; }
.al-fbtn.is-set { background: var(--main-color-40); }
.al-fbtn.is-open { outline: 1px solid var(--main-color); }
.al-fbtn i { font-style: normal; min-width: 16px; padding: 0 5px; border-radius: 8px; background: var(--main-color); color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.al-freset { margin-left: auto; opacity: .75; }
.al-pop { position: fixed; z-index: 500; display: flex; flex-direction: column; gap: 10px; width: max-content; min-width: 240px; max-width: min(560px, calc(100vw - 24px)); max-height: 60vh; overflow-y: auto; padding: 14px; border: 1px solid var(--main-color-40); border-radius: 12px; background: var(--bg-black-65); backdrop-filter: blur(8px); box-shadow: 0 14px 40px var(--bg-black-60); }
.al-pop-genre { width: 560px; }
.al-pop .al-fnums { display: flex; gap: 10px; }
.al-pop .al-fnums > * { flex: 1; min-width: 0; }
.al-fnote { margin: 0; max-width: 300px; font-size: 12px; opacity: .6; line-height: 1.5; }

/* AniList : filtres = champs Arms directement dans la rangée (sous « Actualiser ») */
.al-bar { flex-wrap: wrap; }
.al-fbar { flex-basis: 100%; align-items: flex-end; gap: 10px 14px; margin-top: 4px; }
.al-fbar > arms-input[type="list"], .al-fbar > arms-input[type="list-checkbox"], .al-fbar > arms-input[type="text"] { width: 170px; }
.al-fbar > arms-input[name="f-ep"] { width: 220px; }
.al-fbar > arms-input[type="checkbox"] { align-self: center; }
.al-fbtns { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }

/* AniList : tout sur UNE ligne (Anime / Manga, Actualiser, filtres, boutons), alignés au centre */
.al-bar { flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.al-fbar { flex: 1 1 auto; flex-basis: auto; flex-wrap: wrap; align-items: center; margin-top: 0; gap: 10px 12px; min-width: 0; }
.al-fbar > arms-input[type="list"], .al-fbar > arms-input[type="list-checkbox"], .al-fbar > arms-input[type="text"] { width: 150px; }
.al-fbar > arms-input[name="f-ep"] { width: 190px; }
.al-fbar > arms-input[type="checkbox"] { align-self: center; }
.al-fbtns { display: inline-flex; align-items: center; align-self: center; gap: 8px; margin-left: auto; }

/* AniList : les champs Arms réservent 20px au-dessus pour le libellé flottant → sans cela ils paraissent plus bas que les boutons */
.al-fbar > arms-input:has(> .arms-text) { padding-top: 0; margin: 0; } /* le libellé flottant déborde vers le haut, sans agrandir le champ */

/* Discord remplit la hauteur de la vue : on retire celle de la navbar (60px + 16px) qui est maintenant dans le même conteneur */
.topnav.is-visible ~ #page-discord.is-active { height: calc(100% - 76px); }