/* ═══════════════════════════════════════════════════════════════════════════
   NECObot — panel des modérateurs (site/public/style.css)
   Chargé après /theme/fonts/fonts.css, /theme/tokens.css, /theme/base.css et /theme/components.css :
   ce fichier n'ajoute que la mise en page du panel et ses composants propres (console de modération,
   refonte du serveur, NECOThink, journaux…).
   · Aucune couleur écrite en dur ni :root local : uniquement les jetons de tokens.css (noir et blanc,
     une seule couleur d'état, --color-danger). Contrôlé par tests/test-front.js.
   · Aucun style en ligne n'est nécessaire dans les gabarits (CSP sans 'unsafe-inline') ; les largeurs de
     barres passent par la variable --pct posée en JavaScript (el.style.setProperty).
   · Les anciennes classes du panel (form-group, form-row, toggle, chip, tbl-wrap, status-badge…) restent
     stylées : la page Anniversaires (js/anniversaires.js) s'en sert.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Utilitaires ── */
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.push { margin-left: auto; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.row-top { align-items: flex-start; }
.row-between { justify-content: space-between; }
.row-tight { gap: var(--space-2); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.text-danger { color: var(--color-danger); }
.text-muted { color: var(--color-text-muted); }
.hint { color: var(--color-text-muted); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.empty { color: var(--color-text-subtle); font-size: var(--fs-sm); font-style: italic; }
.mono { font-family: var(--font-mono); }
.emoji { filter: grayscale(1); }

/* ═══════════════════════════════════════
   COQUILLE : barre du haut, menu, contenu
   ═══════════════════════════════════════ */
body { overflow-x: hidden; }

.topnav { z-index: var(--z-nav); }
.nav-brand { flex: none; border-radius: var(--radius-md); }
.nav-brand:focus-visible { outline-offset: 4px; }
.topnav-link { border: 0; background: none; cursor: pointer; }
.theme-toggle { font-weight: var(--fw-medium); letter-spacing: 0; }
.nav-user { display: inline-flex; align-items: center; gap: var(--space-2); }
.nav-user .dot { color: var(--color-text); }
.nav-user-name {
  max-width: 12rem;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Contenu avec ou sans menu de section */
.app-layout { min-height: calc(100dvh - var(--nav-height)); }
.app-layout.has-sidebar {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}
.app-layout.has-sidebar.sb-collapsed { grid-template-columns: 4rem minmax(0, 1fr); }

/* Menu de la section (Discord, Twitch, Admin) : composant .sidenav de la marque */
#sidebar {
  position: sticky;
  top: var(--nav-height);
  height: calc(100dvh - var(--nav-height));
  overflow-y: auto;
  scrollbar-width: thin;
}
.sidenav-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.sidenav-head .sidenav-title { padding-left: var(--space-3); }
.sb-chevron {
  width: 0.5rem;
  height: 0.5rem;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease);
}
#sidebar.collapsed .sb-chevron { transform: rotate(-135deg); }
.bot-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-1) 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.bot-avatar { flex: none; border-radius: var(--radius-full); background: var(--color-avatar-bg); }
.bot-text { display: grid; min-width: 0; }
.bot-name, .bot-ping {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bot-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.bot-ping { color: var(--color-text-subtle); font-family: var(--font-mono); font-size: var(--fs-xs); }
.sidenav-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sidenav-icon { filter: grayscale(1); }
.nav-link-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Menu réduit (bureau) : icônes seules, nom en info-bulle (title) */
#sidebar.collapsed { padding-inline: var(--space-2); }
#sidebar.collapsed .sidenav-title,
#sidebar.collapsed .bot-text,
#sidebar.collapsed .nav-link-label { display: none; }
#sidebar.collapsed .sidenav-head,
#sidebar.collapsed .bot-info { justify-content: center; }
#sidebar.collapsed .bot-info { padding: var(--space-2) 0; border: 0; background: none; }
#sidebar.collapsed .sidenav-link { justify-content: center; padding: 0; }

.content {
  min-width: 0;
  padding: var(--space-8) var(--space-8) var(--space-16);
}
.content:focus { outline: none; }
.content > h2,
.page-head {
  margin-bottom: var(--space-6);
}
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.page-head h2 { margin: 0; }
/* Intertitre d'un formulaire (« Seuils de détection »…) : petites capitales discrètes */
.content h3:not(.card-title) {
  margin: var(--space-6) 0 var(--space-3);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.content h3.card-title { margin: 0 0 var(--space-4); }
.content .card > .card-title + .hint { margin-top: calc(var(--space-2) * -1); }
.content .card + .card,
.content .card + form.card,
.content form.card + .card,
.content .stats-grid + .card { margin-top: var(--space-5); }
/* Cartes côte à côte (grilles) : pas de marge d'empilement */
.content .grid-auto > .card + .card,
.content .card > .card-title,
.content .card-header .card-title { margin-bottom: var(--space-4); }
.content .card-header { margin-bottom: 0; }
.content .card-header .card-title { margin-bottom: var(--space-4); }
.content p + p { margin-top: var(--space-2); }

/* ═══════════════════════════════════════
   CONNEXION (fenêtre <dialog>)
   ═══════════════════════════════════════ */
.login-dialog {
  width: min(26rem, calc(100vw - 2 * var(--space-4)));
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.login-dialog::backdrop {
  background: var(--color-backdrop);
  backdrop-filter: blur(4px);
}
.login-dialog .login-card { width: 100%; }
.login-cancel { display: flex; margin: var(--space-3) auto 0; }

/* Fenêtre générique du panel (mot de passe…) : <dialog class="modal"> de la marque */
.modal-form { display: contents; }
.modal .modal-body > * + * { margin-top: var(--space-3); }

/* ═══════════════════════════════════════
   NOTIFICATIONS
   ═══════════════════════════════════════ */
.toast { transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.toast-out { opacity: 0; transform: translateY(0.5rem); }
.toast-title { overflow-wrap: anywhere; }

/* ═══════════════════════════════════════
   COMPOSANTS DU PANEL
   ═══════════════════════════════════════ */

/* Chiffres clés */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.stat-card {
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.stat-card .stat-value { margin-top: 0; }
.stat-card .stat-label { margin-top: var(--space-2); }
.stat-value-sm { font-size: var(--fs-xl); }

/* Formulaires (anciennes classes : pages du panel et page Anniversaires) */
.form-group { display: grid; align-content: start; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-group > label,
.form-label {
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]),
.form-group select,
.form-group textarea,
.field-control {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-inset);
  color: var(--color-text);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  transition: border-color var(--dur-fast) var(--ease);
}
.form-group input:not([type="checkbox"]):not([type="radio"]):hover,
.form-group select:hover,
.form-group textarea:hover { border-color: var(--color-text-muted); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-focus);
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: 0;
}
.form-group textarea { min-height: 6rem; resize: vertical; line-height: var(--lh-normal); }
.form-group select {
  appearance: none;
  padding-right: var(--space-10);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.9rem) 55%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
.form-group small,
.form-group .hint { color: var(--color-text-muted); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
}
.form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
input[type="color"] {
  width: 2.25rem;
  height: 2.25rem;
  padding: 2px;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-inset);
  cursor: pointer;
}

/* Interrupteur natif de la marque (.switch) : libellé Activé / Désactivé qui suit la case, sans script */
.switch-state .when-off { display: none; }
.switch-input:not(:checked) ~ .switch-state .when-on { display: none; }
.switch-input:not(:checked) ~ .switch-state .when-off { display: inline; }
.switch-state { color: var(--color-text-muted); font-size: var(--fs-sm); }
.switch-input:checked ~ .switch-state { color: var(--color-text); font-weight: var(--fw-semibold); }
.switch-sm .switch-track { width: 2.25rem; height: 1.25rem; }
.switch-sm .switch-track::after { width: calc(1.25rem - 8px); height: calc(1.25rem - 8px); }
.switch-sm .switch-input:checked + .switch-track::after { transform: translateX(1rem); }

/* Pastilles (motifs, variables) */
.chips-container { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}
.chip-remove {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}
.chip-remove:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.chip-input-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.chip-input-row > .input { flex: 1 1 14rem; }
.chip-input-row > .input-wide { flex: 2 1 18rem; }

/* États (ancienne classe .status-badge, alignée sur .badge de la marque) */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.5rem;
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.status-badge.on { border-color: var(--color-success); color: var(--color-success); }
.status-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.status-dot.off { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* Tableaux : .tbl-wrap (ancien) = .table-wrap de la marque ; tout tableau du contenu prend son style */
.tbl-wrap {
  overflow-x: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.card .tbl-wrap { border-radius: var(--radius-md); }
.content table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.content th,
.content td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}
.content thead th {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.content tbody tr:hover { background: var(--color-hover); }
.content tbody tr:last-child > * { border-bottom: 0; }
.content td.num, .content th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-dense th, .tbl-dense td { padding: var(--space-2) var(--space-3); }
.tbl-dense tfoot td { border-top: var(--border-width) dashed var(--color-border-strong); border-bottom: 0; padding-top: var(--space-3); }
.tbl-dense tfoot tr:hover { background: none; }
.cell-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cell-mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.cell-muted { color: var(--color-text-muted); font-size: var(--fs-xs); }
.col-cmd { width: 11rem; }
.col-switch { width: 5rem; }
.col-num { width: 7.5rem; }
.col-actions { width: 7rem; }

/* Ancien bouton de suppression (.btn-danger-sm) = .btn.btn-danger.btn-sm */
.btn-danger-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-height-sm);
  min-height: var(--control-height-sm);
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--color-danger-line);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-danger);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.btn-danger-sm:hover { border-color: var(--color-danger); background: var(--color-danger-soft); }

/* Liste déroulante avec recherche (mkSelect / initSelects) */
.cselect { position: relative; width: 100%; user-select: none; }
.cselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-inset);
  color: var(--color-text);
  cursor: pointer;
}
.cselect-trigger:hover,
.cselect.open .cselect-trigger { border-color: var(--color-text-muted); }
.cselect-trigger:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: 0; }
.cselect-arrow {
  width: 0.45rem;
  height: 0.45rem;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease);
}
.cselect.open .cselect-arrow { transform: rotate(-135deg); }
.cselect-value { display: flex; align-items: center; gap: var(--space-2); min-width: 0; overflow: hidden; }
.cselect-value span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: var(--z-dropdown);
  display: none;
  flex-direction: column;
  max-height: 16rem;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-3);
  box-shadow: var(--shadow-md);
}
.cselect.open .cselect-dropdown { display: flex; }
.cselect-search {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-bg-inset);
  color: var(--color-text);
  font-size: var(--fs-sm);
}
.cselect-search:focus { outline: none; box-shadow: inset 0 -2px 0 var(--color-focus); }
.cselect-list { flex: 1; overflow-y: auto; scrollbar-width: thin; }
.cselect-opt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.cselect-opt:hover { background: var(--color-hover); }
.cselect-opt.selected { background: var(--color-selected); font-weight: var(--fw-semibold); box-shadow: inset 3px 0 0 var(--color-brand); }
.cselect-opt.none-opt { color: var(--color-text-subtle); font-style: italic; }
.cselect-icon { flex: none; width: 1rem; color: var(--color-text-subtle); text-align: center; filter: grayscale(1); }
.cselect-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect-tag {
  flex: none;
  margin-left: auto;
  padding: 1px var(--space-2);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
}

/* Barres de résultats (sondages, NECOThink) : largeur = --pct, posée en JavaScript */
.bar-track {
  position: relative;
  height: 0.75rem;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-bg-inset);
  box-shadow: inset 0 0 0 var(--border-width) var(--color-border);
}
.bar-fill {
  width: var(--pct, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--color-text);
  transition: width var(--dur-slow) var(--ease);
}
.bar-rows { display: grid; gap: var(--space-3); }
.bar-row {
  display: grid;
  grid-template-columns: minmax(3rem, 12rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}
.bar-label { overflow: hidden; font-weight: var(--fw-semibold); text-overflow: ellipsis; white-space: nowrap; }
.bar-value { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bar-row.is-leading .bar-label::before {
  content: "";
  display: inline-block;
  margin-right: 0.35em;
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
  border-left: 0.45em solid currentColor;
  vertical-align: 0.05em;
}
.bar-row:not(.is-leading) .bar-fill { background: rgb(var(--color-text-rgb) / 0.55); }

/* Paliers de note (NECOThink) : intensité du gris, jamais la couleur seule (la note est écrite) */
.tier-1 { --tier-alpha: 0.3; }
.tier-2 { --tier-alpha: 0.44; }
.tier-3 { --tier-alpha: 0.58; }
.tier-4 { --tier-alpha: 0.72; }
.tier-5 { --tier-alpha: 0.86; }
.tier-6 { --tier-alpha: 1; }

/* Liste de lignes (historiques, messages planifiés…) */
.list-rows { display: grid; }
.list-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}
.list-row:last-child { border-bottom: 0; }
.list-row-title { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.list-row-meta { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--fs-xs); }

/* Adresse à copier (overlays OBS) */
.copy-field { display: flex; gap: var(--space-2); }
.copy-field .input { font-family: var(--font-mono); font-size: var(--fs-sm); }
.param-list { display: grid; gap: var(--space-1); margin: var(--space-2) 0 0; padding-left: var(--space-5); color: var(--color-text-muted); font-size: var(--fs-sm); }
.param-list code { color: var(--color-text); }

/* ═══════════════════════════════════════
   PAGES
   ═══════════════════════════════════════ */

/* Accueil public */
.landing { max-width: 60rem; margin: 0 auto; }
.landing-hero {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-4) var(--space-10);
  text-align: center;
  isolation: isolate;
}
.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--texture-pixel);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, var(--color-text) 100%);
  mask-image: radial-gradient(ellipse at center, transparent 30%, var(--color-text) 100%);
}
.landing-avatar {
  width: 7.5rem;
  height: 7.5rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-avatar-bg);
}
.landing-title { font-size: var(--fs-4xl); }
.landing-title .brand-mark { font-size: inherit; }
.landing-sub { max-width: 36rem; color: var(--color-text-muted); font-size: var(--fs-lg); }
.landing-cards { margin-top: var(--space-4); }
.landing-card { color: var(--color-text); }
.landing-card .card-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.landing-card .card-title::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}
.landing-card:hover .card-title::after { transform: translateX(3px) rotate(45deg); }
.landing-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-8); font-size: var(--fs-sm); }
.landing-footer {
  margin-top: var(--space-12);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
  color: var(--color-text-subtle);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-align: center;
  text-transform: uppercase;
}

/* Bot Twitch : commandes et messages automatiques */
.tbl-dense .input { min-height: var(--control-height-sm); font-size: var(--fs-sm); }
.builtin-note { color: var(--color-text-subtle); font-family: var(--font-mono); font-size: var(--fs-xs); }

/* NECOThink en direct */
.tt-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); color: var(--color-text-muted); font-size: var(--fs-sm); }
.ws-dot { width: 0.625rem; height: 0.625rem; flex: none; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-text-muted); }
.ws-dot.is-on { background: var(--color-text); box-shadow: none; }
.ws-dot.is-off { box-shadow: inset 0 0 0 1.5px var(--color-danger); }
.tt-grid { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.4fr) minmax(16rem, 1fr); gap: var(--space-4); align-items: start; }
.tt-grid .card + .card { margin-top: var(--space-4); }
.tt-timer {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}
.tt-timer.is-ending { color: var(--color-danger); }
.tt-timer.is-idle { color: var(--color-text-subtle); }
.tt-timer-bar { margin-top: var(--space-3); }
.tt-timer-bar .bar-fill { transition: width 1s linear; }
.tt-timer-bar.is-ending .bar-fill { background: var(--color-danger); }
.tt-numbers { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }
.tt-number { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.tt-number-unit { margin-left: var(--space-1); color: var(--color-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.tt-phrase { min-height: 1.5em; margin-top: var(--space-3); color: var(--color-text-muted); font-style: italic; text-align: center; }
.tt-avis {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-left: 3px solid var(--color-text);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.tt-avis-text { overflow-wrap: anywhere; }
.tt-avis-author { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--fs-sm); }
.tt-dist { display: grid; gap: 3px; }
.tt-dist-row { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) 2rem; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-xs); }
.tt-dist-row .bar-track { height: 0.625rem; }
.tt-dist-row .bar-fill { background: rgb(var(--color-text-rgb) / var(--tier-alpha, 1)); }
.tt-dist-score { text-align: right; font-weight: var(--fw-semibold); }
.tt-dist-count { color: var(--color-text-muted); text-align: right; }
.tt-scroll { max-height: 16rem; overflow-y: auto; scrollbar-width: thin; }
.tt-voter { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-bottom: var(--border-width) solid var(--color-border); font-size: var(--fs-sm); }
.tt-voter-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-score { font-family: var(--font-mono); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-live-score { margin-top: var(--space-4); text-align: center; }
.tt-live-score .tt-number { font-size: var(--fs-3xl); }
.tt-phrases { display: grid; gap: var(--space-1); }
.tt-phrase-row { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.tt-phrase-row label { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-align: right; }
.tt-phrase-row .input { min-height: 2rem; font-size: var(--fs-sm); }

/* Modérateurs */
.unlock-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.unlock-row .form-group { flex: 1 1 14rem; margin-bottom: 0; }

/* Logs serveur : liste d'interrupteurs */
.event-list { display: grid; }
.event-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--color-border); }
.event-row:last-child { border-bottom: 0; }

/* Twitch Live → Discord : une ligne par chaîne surveillée */
.tl-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.tl-head { color: var(--color-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }

/* Toutes les commandes */
.cmd-syntax { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; }
.cmd-syntax, .cmd-desc { filter: grayscale(1); }
.perm { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; white-space: nowrap; }
.perm-mod { color: var(--color-text); }
.perm-tous { color: var(--color-text-muted); }
.perm-admin { color: var(--color-danger); }
.cmd-section-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.cmd-section-title .emoji { font-size: var(--fs-lg); }
.cmd-section-sub { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-regular); }

/* Journaux */
.logs-tabs { margin-bottom: var(--space-4); }
.logs-tabs .tab .emoji { margin-right: var(--space-1); }
.logs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.logs-toolbar .input { flex: 1 1 14rem; width: auto; }
.logs-toolbar .select { width: auto; }
.logs-info { display: flex; gap: var(--space-3); margin-bottom: var(--space-2); color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--fs-xs); }
.logs-container {
  max-height: 65vh;
  overflow: auto;
  padding: var(--space-1) 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-inset);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  scrollbar-width: thin;
}
.log-line { padding: 1px var(--space-4); border-bottom: var(--border-width) solid var(--color-border); overflow-wrap: anywhere; white-space: pre-wrap; }
.log-line:hover { background: var(--color-hover); }
.log-error { color: var(--color-danger); background: var(--color-danger-soft); }
.log-warn { font-weight: var(--fw-bold); }
.log-warn::before { content: "! "; }
.log-success { color: var(--color-text); }
.logs-empty { padding: var(--space-10); color: var(--color-text-subtle); text-align: center; }

/* ═══════════════════════════════════════
   CONSOLE DE MODÉRATION (Twitch, en direct)
   ═══════════════════════════════════════ */
.content:has(.mod-page) {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--nav-height));
  overflow: hidden;
  padding: var(--space-3) var(--space-4) var(--space-2);
}
.mod-page { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
.mod-head { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.mod-head h2 { margin: 0; font-size: var(--fs-xl); }
.mod-ws-label { color: var(--color-text-muted); font-size: var(--fs-xs); }
.mod-head-right { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; color: var(--color-text-muted); font-size: var(--fs-xs); }
.mod-layout { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) 19rem 16rem; gap: var(--space-3); min-height: 0; overflow: hidden; }
.mod-col { display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; max-height: 100%; overflow: hidden; }
.mod-panel { padding: var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.mod-panel-scroll { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
.mod-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.mod-panel-title .mod-target { color: var(--color-text); text-transform: none; letter-spacing: 0; }
.mod-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.mod-feed-wrap { position: relative; flex: 1; min-height: 0; }
#mod-feed { height: 100%; overflow-y: auto; scrollbar-width: thin; }

.mod-stats-bar { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.mod-stat { min-width: 5.5rem; padding: var(--space-1) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); text-align: center; }
.mod-stat-val { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.mod-stat-lbl { color: var(--color-text-muted); font-size: 0.6875rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; }

.mod-raid { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-danger-line); border-radius: var(--radius-md); background: var(--color-danger-soft); }
.mod-raid-text { color: var(--color-danger); font-weight: var(--fw-semibold); }

/* Lecteur du live */
.mod-stream-panel { flex: 0 0 auto; }
.mod-stream-panel.collapsed #mod-stream-wrap { display: none; }
#mod-stream-wrap { height: 12.5rem; min-height: 5rem; max-height: 40vh; overflow: hidden; border-radius: var(--radius-md); background: var(--color-bg-inset); resize: vertical; }
#mod-stream-wrap iframe { display: block; width: 100%; height: 100%; border: 0; }
.mod-stream-msg { padding: var(--space-4); color: var(--color-text-muted); font-size: var(--fs-sm); }

/* Messages du tchat */
.mod-msg { display: flex; align-items: flex-start; gap: var(--space-1); padding: 3px var(--space-2); border-left: 3px solid transparent; border-radius: var(--radius-sm); cursor: pointer; }
.mod-msg:hover { background: var(--color-hover); }
.mod-msg-line { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 3px; min-width: 0; }
.mod-msg-time { flex-shrink: 0; color: var(--color-text-subtle); font-family: var(--font-mono); font-size: 0.6875rem; }
.mod-msg-name { font-weight: var(--fw-bold); white-space: nowrap; }
.mod-msg-name::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.3em;
  border-radius: 50%;
  background: var(--user-color, var(--color-text-subtle));
  vertical-align: 0.05em;
}
.mod-msg-text { color: var(--color-text); line-height: 1.4; overflow-wrap: anywhere; }
.mod-sep { color: var(--color-text-subtle); }
.mod-msg-actions { display: flex; flex-shrink: 0; align-items: center; gap: 1px; }
.mod-msg-btn {
  display: inline-grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0.6;
}
.mod-msg-btn:hover, .mod-msg-btn:focus-visible { background: var(--color-hover); color: var(--color-text); opacity: 1; }
.mod-msg-btn svg { width: 0.8rem; height: 0.8rem; fill: currentColor; }
.mod-btn-del:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.mod-emote { display: inline-block; width: auto; height: 1.5rem; margin: -2px 1px; vertical-align: middle; }
.mod-badge { margin-right: 2px; font-size: var(--fs-xs); vertical-align: middle; filter: grayscale(1); }

/* Repères : jamais la couleur seule (liseré de motif différent + étiquette) */
.mod-msg.mod-highlighted { border-left-color: var(--color-text); background: var(--color-selected); }
.mod-msg.mod-flagged-red { border-left: 3px solid var(--color-danger); background: var(--color-danger-soft); }
.mod-msg.mod-flagged-orange { border-left: 3px dashed var(--color-danger); background: rgb(var(--color-danger-rgb) / 0.06); }
.mod-msg.mod-flagged-yellow { border-left: 3px dotted var(--color-text-muted); background: var(--color-hover); }
.mod-msg.mod-hl-first { border-left-color: var(--color-text-muted); }
.mod-msg.mod-hl-mention { border-left: 3px double var(--color-text); background: var(--color-selected); }
.mod-msg.mod-hl-suspect { border-left: 3px solid var(--color-danger); background: var(--color-danger-soft); animation: mod-suspect 2s var(--ease) infinite; }
@keyframes mod-suspect { 50% { background: rgb(var(--color-danger-rgb) / 0.2); } }
.mod-msg.mod-hl-mod, .mod-msg.mod-hl-vip, .mod-msg.mod-hl-sub { background: var(--color-hover); }
.mod-msg.mod-hl-first .mod-msg-name::after,
.mod-msg.mod-hl-raider .mod-msg-name::after,
.mod-msg.mod-hl-suspect .mod-msg-name::after,
.mod-msg.mod-hl-mention .mod-msg-name::after {
  margin-left: 0.4em;
  padding: 0 0.35em;
  border: var(--border-width) solid currentColor;
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  vertical-align: 0.1em;
}
.mod-msg.mod-hl-first .mod-msg-name::after { content: "1er message"; }
.mod-msg.mod-hl-raider .mod-msg-name::after { content: "raid"; }
.mod-msg.mod-hl-mention .mod-msg-name::after { content: "mention"; }
.mod-msg.mod-hl-suspect .mod-msg-name::after { content: "suspect"; color: var(--color-danger); }
.mod-msg.mod-deleted .mod-msg-text { text-decoration: line-through; opacity: 0.45; }
.mod-msg.mod-deleted .mod-msg-name { opacity: 0.45; }
.mod-font-small .mod-msg-text, .mod-font-small .mod-msg-name { font-size: var(--fs-xs); }
.mod-font-medium .mod-msg-text, .mod-font-medium .mod-msg-name { font-size: var(--fs-sm); }
.mod-font-large .mod-msg-text, .mod-font-large .mod-msg-name { font-size: var(--fs-md); }
.mod-density-compact .mod-msg { padding-block: 0; }
.mod-density-normal .mod-msg { padding-block: 3px; }
.mod-density-comfortable .mod-msg { padding-block: 6px; }
.mod-hide-icons .mod-msg-actions { display: none !important; }
.mod-hide-actions .mod-event-row { display: none !important; }
.mod-event-row { margin: 2px 0; padding: var(--space-1) var(--space-2); border-left: 3px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--fs-xs); }
.mod-event-row.is-danger { border-left-color: var(--color-danger); color: var(--color-danger); }
.mod-event-time { margin-right: var(--space-2); color: var(--color-text-subtle); }
.mod-scroll-btn { position: absolute; bottom: var(--space-2); left: 50%; z-index: 2; transform: translateX(-50%); box-shadow: var(--shadow-md); }

/* Saisies de la console */
.mod-input-wrap { display: flex; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-2); border-top: var(--border-width) solid var(--color-border); }
.mod-input-wrap .input { flex: 1; min-width: 0; min-height: 2.25rem; font-size: var(--fs-sm); }
.mod-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-2); }
.mod-actions .select { width: auto; min-height: var(--control-height-sm); font-size: var(--fs-xs); }
.mod-user-detail { color: var(--color-text-muted); font-size: var(--fs-xs); }
.mod-user-name { color: var(--color-text); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.mod-user-tags { display: flex; flex-wrap: wrap; gap: 3px; margin: var(--space-1) 0; }
.mod-user-msgs { max-height: 7.5rem; margin-top: var(--space-2); overflow-y: auto; scrollbar-width: thin; }
.mod-user-msgs > div { padding: 3px 0; border-bottom: var(--border-width) solid var(--color-border); color: var(--color-text); overflow-wrap: anywhere; }
.mod-stream-info { display: grid; gap: var(--space-2); }
.mod-stream-field { position: relative; display: grid; gap: var(--space-1); }
.mod-stream-field label { color: var(--color-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.mod-stream-field .input { min-height: 2.25rem; font-size: var(--fs-sm); }
.mod-cat-results { position: absolute; top: 100%; right: 0; left: 0; z-index: var(--z-dropdown); max-height: 10rem; overflow-y: auto; border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-3); box-shadow: var(--shadow-md); }
.mod-cat-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-1) var(--space-2); border: 0; background: none; color: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.mod-cat-item:hover, .mod-cat-item:focus-visible { background: var(--color-hover); }
.mod-cat-item img { width: 1.5rem; height: 2rem; border-radius: var(--radius-xs); }
.mod-tabs { flex-shrink: 0; margin-bottom: var(--space-2); }
.mod-tabs .tab { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); }
.mod-tab-panel { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.mod-tab-log { display: flex; flex-direction: column; }
.mod-timeout-row, .mod-log-row { display: flex; align-items: center; gap: var(--space-2); padding: 3px 0; border-bottom: var(--border-width) solid var(--color-border); font-size: var(--fs-xs); }
.mod-timeout-row { justify-content: space-between; font-family: var(--font-mono); }
.mod-log-row .grow { overflow-wrap: anywhere; }
.mod-log-bar { display: flex; flex-shrink: 0; gap: var(--space-1); margin-bottom: var(--space-2); }
.mod-log-bar .input { min-width: 0; min-height: 2rem; font-size: var(--fs-xs); }
.mod-log-bar .input-user { max-width: 6rem; }
.mod-log-more { padding: var(--space-2); text-align: center; }
.mod-pin-card { margin-bottom: var(--space-1); padding: var(--space-2); border: var(--border-width) solid var(--color-border); border-left: 3px solid var(--color-text); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--fs-xs); }
.mod-pin-header { display: flex; align-items: center; gap: var(--space-2); }
.mod-pin-text { margin: var(--space-1) 0; color: var(--color-text); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.mod-pin-meta { color: var(--color-text-subtle); }
.mod-chat-msg { padding: 3px 0; border-bottom: var(--border-width) solid var(--color-border); }
.mod-chat-user { margin-right: var(--space-1); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.mod-chat-time { color: var(--color-text-subtle); font-family: var(--font-mono); font-size: 0.6875rem; }
.mod-chat-text { margin-top: 1px; font-size: var(--fs-sm); overflow-wrap: anywhere; }

/* Préférences (panneau coulissant) */
.mod-prefs-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-dropdown);
  width: min(18rem, 100%);
  overflow-y: auto;
  padding: var(--space-3);
  border-left: var(--border-width) solid var(--color-border);
  background: var(--color-surface-3);
  box-shadow: var(--shadow-lg);
  transform: translateX(105%);
  transition: transform var(--dur-base) var(--ease);
  visibility: hidden;
}
.mod-prefs-panel.open { transform: none; visibility: visible; }
.mod-prefs-section { margin: var(--space-4) 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: var(--border-width) solid var(--color-border); color: var(--color-text-muted); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.mod-pref-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--fs-sm); }
.mod-pref-row .select { width: auto; min-height: 2rem; font-size: var(--fs-xs); }
.mod-pref-sample { display: inline-block; flex: none; width: 1.25rem; height: 0.875rem; margin-right: var(--space-2); border: var(--border-width) solid var(--color-border); border-left-width: 3px; border-radius: var(--radius-xs); background: var(--color-surface-2); }
.mod-pref-sample.sample-first { border-left-color: var(--color-text-muted); }
.mod-pref-sample.sample-suspect { border-left-color: var(--color-danger); background: var(--color-danger-soft); }
.mod-pref-sample.sample-raider { border-left-style: dashed; border-left-color: var(--color-text); }
.mod-pref-sample.sample-mention { border-left-style: double; border-left-color: var(--color-text); background: var(--color-selected); }
.mod-pref-sample.sample-soft { background: var(--color-hover); }
.mod-pref-label { display: flex; flex: 1; align-items: center; }

/* ═══════════════════════════════════════
   REFONTE DU SERVEUR DISCORD (js/refonte.js)
   ═══════════════════════════════════════ */
.rf-page .callout { margin-bottom: var(--space-4); }
.rf-page .card .callout { margin: var(--space-3) 0; }
.rf-titre { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-md); }
.rf-liste { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.rf-liste li + li { margin-top: var(--space-1); }
.rf-ops { margin: 0; padding-left: var(--space-8); }
.rf-op { padding: var(--space-1) 0; border-bottom: var(--border-width) solid var(--color-border); font-size: var(--fs-sm); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.rf-op::marker { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--fs-xs); }
.rf-op-destructif, .rf-op-echec { color: var(--color-danger); }
.rf-op-saute { color: var(--color-text-muted); text-decoration: line-through; }
.rf-op-fait .rf-marque { font-weight: var(--fw-bold); }
.rf-marque { display: inline-block; width: 1.25rem; font-family: var(--font-mono); text-align: center; }
.rf-supprime td { color: var(--color-danger); }
.rf-choisie td { background: var(--color-selected); }
.rf-barre { margin-top: var(--space-3); }
.rf-detail, .rf-retour { padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.rf-page details summary { cursor: pointer; color: var(--color-text-muted); font-size: var(--fs-sm); }
.rf-page details[open] summary { margin-bottom: var(--space-2); }
.rf-page .field + .row { margin-top: var(--space-2); }
.rf-page .input.valid { border-color: var(--color-text); box-shadow: inset 3px 0 0 var(--color-text); }
/* Boutons qui portent le nom du serveur (« Prendre un instantané de « … » ») : le libellé se coupe au lieu de
   sortir de la carte sur un téléphone (vu sur la capture en 390 px) */
.rf-page .btn { max-width: 100%; white-space: normal; padding-top: var(--space-2); padding-bottom: var(--space-2); }
/* Rapport du plan refusé, avertissements : un chemin JSON ($.categories[0].permissions[0]…) se coupe où il faut */
.rf-liste li { overflow-wrap: anywhere; }

/* ═══════════════════════════════════════
   PETITS ÉCRANS (téléphone : sous 768 px)
   ═══════════════════════════════════════ */
@media (max-width: 71.99rem) {
  .tt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tt-grid > :last-child { grid-column: 1 / -1; }
  .mod-layout { grid-template-columns: minmax(0, 1fr) 18rem; }
  .mod-col-chat { display: none; }
}
@media (max-width: 47.99rem) {
  .content { padding: var(--space-5) var(--space-4) var(--space-12); }
  .app-layout.has-sidebar,
  .app-layout.has-sidebar.sb-collapsed { display: block; }
  /* Le menu de section devient un bandeau horizontal défilant sous la barre du haut (.sidenav) */
  #sidebar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    height: auto;
    overflow-y: hidden;
  }
  #sidebar .sidenav-head,
  #sidebar .bot-info { display: none; }
  .sidenav-list { flex-direction: row; gap: var(--space-1); }
  .sidenav-list > li { flex: none; }
  #sidebar.collapsed .nav-link-label { display: inline; }
  .form-row, .form-row-3 { grid-template-columns: minmax(0, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-grid { grid-template-columns: minmax(0, 1fr); }
  .tl-row { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
  .tl-head { display: none; }
  .bar-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bar-row .bar-track { grid-column: 1 / -1; grid-row: 2; }
  /* Tableaux de commandes (Toutes les commandes, Anniversaires) : la syntaxe se coupe. Sans coupure, elle
     repoussait la description hors du cadre, écrasée sur une colonne d'un mot (lignes de 200 px et plus) */
  .cmd-syntax { white-space: normal; overflow-wrap: anywhere; }
  /* Refonte : tableau des retraits assez large pour ses 5 colonnes, qui défile dans son cadre (sinon « Détail »
     s'écrasait sur une colonne de quelques lettres : lignes de 200 px) */
  .rf-retraits { min-width: 44rem; }
  .nav-user-name { max-width: 7rem; }
  .theme-toggle { display: none; }
  /* Console : colonnes empilées, défilement de la page */
  .content:has(.mod-page) { max-height: none; overflow: visible; }
  .mod-page, .mod-layout { overflow: visible; }
  .mod-layout { grid-template-columns: minmax(0, 1fr); }
  .mod-col { max-height: none; overflow: visible; }
  .mod-col-chat { display: flex; }
  .mod-panel-scroll { min-height: 22rem; max-height: 70vh; }
}

@media (max-width: 29.99rem) {
  /* Téléphone étroit : l'avatar suffit, la barre du haut tient sur une ligne avec le bouton du menu */
  .topnav .nav-brand .brand-mark { display: none; }
  .nav-user-name { max-width: 6rem; }
}

/* Animations réduites : la console ne clignote plus (base.css coupe déjà les transitions) */
@media (prefers-reduced-motion: reduce) {
  .mod-msg.mod-hl-suspect { animation: none; }
}