/* ============================================================
   Dashboard « Les introvertis » — thème CRM clair, sans dépendance externe.
   Feuille unique partagée par l'application (/) et la page publique
   du classement (/classement) : les classes de cette dernière (badge,
   banner, table.lb, lb-*, double-text, lb-meter…) sont conservées.

   RESPONSIVE : la page du classement suit les mêmes paliers que le reste du
   site (1024 / 960 / 780 / 640 / 400 px). Sous 640 px, le tableau devient une
   LISTE DE CARTES (grille `grid-template-areas`), les libellés venant de
   l'attribut `data-label` posé sur chaque cellule par `xp_public.py`.
   ============================================================ */
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --line: #e7e9ee;
  --line-strong: #d8dbe2;
  --text: #14161c;
  --muted: #6b7280;
  --accent: #5865f2;
  --accent-hi: #4752e6;
  --accent-soft: #eef0ff;
  --ok: #16a34a;
  --ok-soft: #e8f6ee;
  --warn: #d97706;
  --warn-soft: #fdf3e4;
  --danger: #dc2626;
  --danger-soft: #fdecec;
  --violet: #7c3aed;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
  --sidebar-w: 250px;
}

* { box-sizing: border-box; }

/* L'attribut `hidden` doit TOUJOURS gagner.
   Règle de cascade : une déclaration d'auteur (ici `.app { display:flex }`,
   `.login-view { display:grid }`, `.topbar { display:flex }`…) l'emporte sur la
   règle `[hidden] { display:none }` de la feuille du navigateur, à spécificité
   égale. Sans cette ligne, les écrans masqués via `el.hidden = true` resteraient
   visibles (ex. : l'écran de connexion restait affiché après l'OAuth). */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.02rem; }
a { color: var(--accent); }
code { background: var(--surface-2); border: 1px solid var(--line); padding: .05em .35em; border-radius: 6px; font-size: .88em; }
pre {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1rem; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
  font: 13px/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace; margin: 0 0 1rem;
}

/* --- COQUILLE APPLICATIVE --- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 1.1rem .8rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side-brand { display: flex; align-items: center; gap: .65rem; padding: .2rem .5rem 1.1rem; }
.side-brand img { width: 38px; height: 38px; border-radius: 11px; }
.side-brand .brand-mark {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 1.1rem;
}
.side-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.side-brand-text #bot-name { font-weight: 700; font-size: .98rem; }
.side-brand-text small { color: var(--muted); font-size: .74rem; }

.side-nav { display: flex; flex-direction: column; gap: .15rem; margin-bottom: 1rem; }

/* --- MENU : UNE SECTION PAR BOT ---
   Le dashboard gère trois bots séparés : chaque section porte le NOM de son bot
   et son STATUT (pastille + version + santé), rempli par `renderBotStatuses()`. */
.side-bot { display: flex; flex-direction: column; gap: .12rem; margin-top: .85rem; }
.side-bot-head {
  display: flex; align-items: center; gap: .45rem;
  padding: .2rem .6rem .35rem; cursor: help;
}
.side-bot-head .ico { width: 1.15rem; text-align: center; }
.side-bot-name {
  font-size: .72rem; font-weight: 700; color: var(--muted);
  letter-spacing: .04em; text-transform: uppercase;
}
.bot-state {
  margin-left: auto; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 650; color: var(--muted);
  border: 1px solid var(--line); border-radius: 99px; padding: .05rem .45rem;
  background: var(--surface-2); white-space: nowrap;
}
.bot-state .pulse { width: .45rem; height: .45rem; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.bot-state.on { color: #12723a; border-color: #bfe6cd; background: var(--ok-soft); }
.bot-state.on .pulse { background: var(--ok); }
.bot-state.warn { color: #97580a; border-color: #f2d9a8; background: var(--warn-soft); }
.bot-state.warn .pulse { background: var(--warn); }
.bot-state.off { color: #b31c1c; border-color: #f5c2c2; background: var(--danger-soft); }
.bot-state.off .pulse { background: var(--danger); }

.side-link {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  background: none; border: none; color: var(--text); cursor: pointer;
  padding: .55rem .6rem; border-radius: 9px; font: inherit; font-weight: 500; text-align: left;
}
.side-link:hover { background: var(--surface-2); }
.side-link.active { background: var(--accent-soft); color: var(--accent-hi); font-weight: 650; }
.side-link .ico { width: 1.15rem; text-align: center; }
.side-link .count {
  margin-left: auto; background: var(--accent); color: #fff; border-radius: 99px;
  font-size: .7rem; padding: .05rem .42rem; font-weight: 700;
}

.side-foot {
  margin-top: .6rem; padding-top: .8rem; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .5rem;
}
#user-box { display: flex; align-items: center; gap: .55rem; padding: 0 .35rem; }
#user-box img { width: 30px; height: 30px; border-radius: 50%; }
#user-name { font-weight: 600; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1.6rem; background: rgba(255, 255, 255, .82); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
.crumbs { font-weight: 650; font-size: 1rem; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.content { padding: 1.5rem 1.6rem 4rem; max-width: 1360px; width: 100%; margin: 0 auto; }
/* --- VUES --- */
.view { animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.muted { color: var(--muted); }
.fineprint { color: var(--muted); font-size: .82rem; }
.lbl { display: block; margin: .8rem 0 .3rem; font-size: .82rem; color: var(--muted); }
.lbl-inline { font-size: .78rem; color: var(--muted); font-weight: 600; }
.inline { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.inline input, .inline select { flex: 1 1 16rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.back { margin-bottom: .8rem; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.page-head h2 { margin-bottom: .1rem; }
.head-controls { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem; margin-bottom: 1.05rem; box-shadow: var(--shadow);
}
.card.center { max-width: 34rem; margin: 5rem auto; text-align: center; }
.card.center .btn { margin: 1rem 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; }
.card-head h3 { margin: 0; }
.section-title { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 1.4rem 0 .6rem; }

/* --- ONGLETS --- */
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin: 1rem 0 1.2rem; border-bottom: 1px solid var(--line); }
.tab {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: .55rem .85rem; border-radius: 9px 9px 0 0; font: inherit; font-weight: 550;
  border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab.active { color: var(--accent-hi); border-bottom-color: var(--accent); }
.panel { animation: fade .18s ease; }

/* --- ONGLETS REGROUPÉS PAR BOT ---
   La gestion d'un serveur est séparée en trois parties, une par bot : chaque
   ligne porte le nom de son bot, et n'affiche que ses propres écrans. */
.tab-rows { display: flex; flex-direction: column; gap: .2rem; margin: 1rem 0 1.2rem; }
.tab-row {
  display: flex; align-items: center; gap: .7rem;
  border-bottom: 1px solid var(--line);
}
.tab-row .tabs { border-bottom: none; margin: 0; flex: 1 1 auto; min-width: 0; }
.tab-row-label {
  display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto;
  font-size: .68rem; font-weight: 700; color: var(--muted);
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  min-width: 10.5rem;
}
.tab-row-label .ico { width: 1.1rem; text-align: center; }
/* Bot non connecté : ses onglets restent utilisables (ils expliquent pourquoi),
   mais la ligne se ternit pour qu'on ne cherche pas midi à quatorze heures. */
.tab-row.bot-off .tab-row-label { opacity: .55; }
.tab-row.bot-off .tab { color: #b9b6c0; }

/* --- BOUTONS --- */
.btn {
  display: inline-flex; align-items: center; gap: .4rem; background: var(--surface);
  color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: .48rem .85rem; cursor: pointer; font: inherit; font-weight: 550;
  text-decoration: none; transition: .12s; white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-hi); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--accent-hi); color: #fff; }
.btn.success { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.success:hover:not(:disabled) { background: #128a3f; color: #fff; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover:not(:disabled) { background: #bf2020; color: #fff; }
.btn.warn { background: var(--warn); border-color: var(--warn); color: #fff; }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn.sm { padding: .32rem .6rem; font-size: .82rem; }
.btn.big { padding: .7rem 1.3rem; font-size: 1rem; }
.btn.block { width: 100%; justify-content: center; }

/* --- BADGES & PILLS --- */
.badges { display: inline-flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: .3rem; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--muted); border-radius: 99px;
  padding: .12rem .58rem; font-size: .76rem; font-weight: 600; white-space: nowrap;
}
.badge.ok { background: var(--ok-soft); border-color: #bfe6cd; color: #12723a; }
.badge.warn { background: var(--warn-soft); border-color: #f2d9a8; color: #97580a; }
.badge.danger { background: var(--danger-soft); border-color: #f5c2c2; color: #b31c1c; }
.badge.info { background: var(--accent-soft); border-color: #d3d8ff; color: #3a45c9; }
.badge.violet { background: #f1e9fe; border-color: #ddc9fb; color: #6320c9; }
.badge.double {
  background: linear-gradient(92deg, #fff6d9, #ffe9a8); border-color: #f1c40f;
  color: #7a5a00; padding: .15rem .6rem;
}
.badge.double .emblem { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; }
.dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.role-pill {
  display: inline-flex; align-items: center; gap: .35rem; margin: .15rem .3rem .15rem 0;
  padding: .22rem .58rem; border-radius: 99px; background: var(--surface-2);
  border: 1px solid var(--line); font-size: .84rem;
}

/* --- BANDEAUX --- */
.banner {
  border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius-sm);
  padding: .75rem .95rem; margin-bottom: 1rem; font-size: .88rem;
}
.banner.warn { border-color: #f2d9a8; background: var(--warn-soft); color: #7a4a08; }
.banner.err { border-color: #f5c2c2; background: var(--danger-soft); color: #a11a1a; }
.banner.ok { border-color: #bfe6cd; background: var(--ok-soft); color: #12723a; }
.banner.double {
  border-color: rgba(241, 196, 15, .55); background: rgba(241, 196, 15, .1);
  display: flex; align-items: center; gap: 1rem;
}
.banner.double .emblem {
  width: 168px; height: 112px; flex-shrink: 0; object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(241, 196, 15, .35));
}
.banner.double .double-text { flex: 1 1 16rem; }
.banner ul { margin: .4rem 0 0; padding-left: 1.2rem; }
/* --- KPI / STATISTIQUES --- */
.kpis, .stats {
  display: grid; gap: .95rem; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  margin-bottom: 1.2rem;
}
.kpi, .stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.05rem; box-shadow: var(--shadow); position: relative;
}
.kpi .value, .stat .value { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.kpi .label, .stat .label { color: var(--muted); font-size: .8rem; font-weight: 550; }
.kpi .trend { font-size: .78rem; margin-top: .25rem; color: var(--muted); }
.kpi .ico { position: absolute; top: .9rem; right: 1rem; font-size: 1.15rem; opacity: .75; }
.stat { text-align: center; }
.kpi.accent-left { border-left: 3px solid var(--accent); }
.kpi.ok-left { border-left: 3px solid var(--ok); }
.kpi.warn-left { border-left: 3px solid var(--warn); }
.kpi.danger-left { border-left: 3px solid var(--danger); }

/* --- TABLEAUX --- */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
/* « Pseudo » + identifiant dans une même cellule (tableaux de modération) :
   l'identifiant est discret mais copiable, et la cellule se replie proprement
   quand la place manque. */
.member-cell { display: inline-flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.member-id {
  font-size: .76rem; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 6px; padding: .05em .35em;
  font-variant-numeric: tabular-nums; word-break: break-all;
}

/* --- FORMULAIRES --- */
input, textarea, select {
  width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: .5rem .65rem; font: inherit;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
textarea { resize: vertical; }
details { margin-top: .8rem; }
summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: .86rem; }
.form-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* --- LISTE DES SERVEURS --- */
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.guild {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; display: flex; flex-direction: column; gap: .75rem; box-shadow: var(--shadow);
  transition: .14s;
}
.guild:hover { box-shadow: var(--shadow-lg); border-color: var(--line-strong); transform: translateY(-1px); }
.guild-head { display: flex; align-items: center; gap: .7rem; }
.guild-head img, .guild-head .fallback {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; object-fit: cover;
}
.guild-head .fallback {
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
  font-weight: 700; font-size: 1.1rem;
}
.guild-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.guild .badges { margin-top: .2rem; }
.badge.absent { background: var(--danger-soft); border-color: #f5c2c2; color: #b31c1c; }
/* Liste complète des serveurs de la personne : repliée par défaut, séparée de
   « Mes serveurs » (qui ne montre que ceux où le bot est présent). */
.others { margin-top: 1.4rem; border-top: 1px dashed var(--line); padding-top: .9rem; }
.others > summary { font-size: .92rem; }
.others[open] > summary { margin-bottom: .6rem; }
.others > .grid { margin-top: .5rem; }

/* --- INVITATION DES TROIS BOTS (administration) ---
   Le niveau de permissions se choisit AVANT de préparer les liens : chaque
   option est une carte cliquable, et l'option « Administrateur compris » se
   distingue franchement (bordure et fond rouges) — un lien qui donne tous les
   droits ne doit jamais passer inaperçu. */
.inv-modes { display: flex; flex-direction: column; gap: .5rem; margin: .8rem 0 1.1rem; }
.inv-mode {
  display: flex; align-items: flex-start; gap: .65rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .7rem .8rem; background: var(--surface); transition: .12s;
}
.inv-mode:hover { border-color: var(--accent); }
.inv-mode input[type="radio"] { width: auto; margin: .2rem 0 0; flex-shrink: 0; }
.inv-mode:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.inv-mode.risky { border-color: #f5c2c2; }
.inv-mode.risky:has(input:checked) { background: var(--danger-soft); border-color: var(--danger); }
.inv-mode-body { min-width: 0; }
.inv-mode-head {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-weight: 600; font-size: .92rem;
}
.inv-mode .fineprint { margin: .25rem 0 0; line-height: 1.45; }

/* Liens préparés : une ligne par bot, avec le bouton d'autorisation. */
.inv-links { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.inv-link-row {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .5rem .7rem; background: var(--surface-2);
}
.inv-link-name { font-weight: 600; min-width: 11rem; }
#inv-result { margin-top: .9rem; border-top: 1px dashed var(--line); padding-top: .8rem; }

/* --- TOUTES LES ADRESSES DU DASHBOARD (administration) ---
   Une adresse par ligne, cliquable, copiable. L'adresse publique est rappelée
   en haut : c'est elle qui change quand le bot tourne derrière un tunnel, et
   c'est donc la seule qu'on ne peut pas deviner. */
.site-base {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: .6rem .75rem; margin-bottom: 1rem;
}
.site-base-line { margin: 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.site-base-label {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); flex-shrink: 0;
}
.site-base-url { font-weight: 600; word-break: break-all; }
.site-base .fineprint { margin: .3rem 0 0; }
.site-base code { word-break: break-all; }

.site-block { margin-bottom: 1.2rem; }
.site-block:last-child { margin-bottom: 0; }
.site-block-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.site-title { margin: 0; font-size: .95rem; }
.site-block > .fineprint { margin: .25rem 0 .55rem; line-height: 1.45; }

.site-links { display: flex; flex-direction: column; gap: .45rem; }
.site-link {
  display: flex; align-items: flex-start; gap: .65rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .55rem .7rem; background: var(--surface);
}
.site-link.off { border-style: dashed; opacity: .72; }
.site-link-icon { font-size: 1.1rem; line-height: 1.3; flex-shrink: 0; }
.site-link-body { min-width: 0; flex: 1; }
.site-link-name {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-weight: 600; font-size: .9rem;
}
.site-link-path { font-size: .78rem; color: var(--muted); }
.site-link-url {
  display: block; font-size: .8rem; word-break: break-all;
  color: var(--accent); text-decoration: none; margin-top: .15rem;
}
.site-link-url:hover { text-decoration: underline; }
.site-link-alias { font-size: .76rem; color: var(--muted); margin-top: .15rem; }
.site-link-alias a { color: inherit; }
.site-link-actions { display: flex; gap: .35rem; flex-shrink: 0; flex-wrap: wrap; }
/* --- TICKETS (boîte de réception CRM) --- */
.inbox {
  display: grid; gap: 1rem; grid-template-columns: minmax(300px, 380px) 1fr;
  align-items: start;
}
.inbox-list {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; position: sticky; top: 5rem;
}
.inbox-filters {
  display: flex; flex-direction: column; gap: .5rem; padding: .85rem;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.inbox-filters input, .inbox-filters select { padding: .42rem .55rem; font-size: .86rem; }
.ticket-list { max-height: calc(100vh - 19rem); overflow-y: auto; }
.ticket-row {
  display: flex; gap: .7rem; padding: .8rem .9rem; border-bottom: 1px solid var(--line);
  cursor: pointer; border-left: 3px solid transparent; transition: background .1s;
}
.ticket-row:last-child { border-bottom: none; }
.ticket-row:hover { background: var(--surface-2); }
.ticket-row.active { background: var(--accent-soft); border-left-color: var(--accent); }
.ticket-row .avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.ticket-row .fallback {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: .8rem;
}
.ticket-row .body { min-width: 0; flex: 1; }
.ticket-row .line1 { display: flex; align-items: center; gap: .4rem; justify-content: space-between; }
.ticket-row .who { font-weight: 650; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-row .time { color: var(--muted); font-size: .72rem; flex-shrink: 0; }
.ticket-row .line2 { display: flex; align-items: center; gap: .4rem; margin-top: .15rem; }
.ticket-row .subject { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-row .preview { color: var(--muted); font-size: .78rem; margin-top: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ticket qui attend depuis plus de 24 h : signalé dans la liste (le risque
   numéro un d'une boîte de réception, c'est le ticket oublié). */
.ticket-row.urgent { border-left-color: var(--warn); background: var(--warn-soft); }
.ticket-row.urgent.active { border-left-color: var(--accent); }
.ticket-row .line1 .badge { flex-shrink: 0; }

.inbox-detail {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; min-height: 22rem;
}
.ticket-head { padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ticket-head .title { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.ticket-head .meta { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .5rem; }
.ticket-head .meta .k { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.ticket-actions { display: flex; gap: .5rem; flex-wrap: wrap; padding: .75rem 1.15rem; border-bottom: 1px solid var(--line); }
.conversation {
  padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .85rem;
  max-height: 52vh; overflow-y: auto;
}
.msg { display: flex; gap: .6rem; }
.msg img.avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.msg .bubble { min-width: 0; flex: 1; }
.msg .who { font-weight: 650; font-size: .85rem; display: flex; align-items: center; gap: .4rem; }
.msg .who .time { color: var(--muted); font-weight: 400; font-size: .72rem; }
.msg .text { white-space: pre-wrap; word-break: break-word; font-size: .9rem; margin-top: .1rem; }
.msg.from-staff .bubble { background: var(--accent-soft); border-radius: 12px; padding: .55rem .7rem; }
.msg .embed {
  border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 8px;
  padding: .5rem .65rem; margin-top: .4rem; font-size: .84rem;
}
.msg .embed .e-title { font-weight: 650; }
.msg .attach a { font-size: .82rem; }
.reply-box { border-top: 1px solid var(--line); padding: .85rem 1.15rem; display: flex; flex-direction: column; gap: .5rem; }
.reply-box textarea { min-height: 62px; }
.empty-state { display: grid; place-items: center; min-height: 22rem; color: var(--muted); text-align: center; padding: 2rem; }
.timeline { margin: 0; padding: 0 1.15rem 1rem; list-style: none; }
.timeline li {
  display: flex; gap: .6rem; font-size: .82rem; color: var(--muted); padding: .3rem 0;
  border-top: 1px dashed var(--line);
}
.timeline li .when { margin-left: auto; flex-shrink: 0; }
.event-pill { font-weight: 650; color: var(--text); }

/* --- PROTECTION (Introvert'Protect) --- */
/* Contrôle des sanctions : grille de réglages (niveau, plafond, confiance,
   suppression du message), lisible dans un panneau de largeur variable. */
.protect-fields {
  display: grid; gap: .9rem 1.2rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.protect-fields .field { margin: 0; }
.protect-fields select, .protect-fields input[type="number"] { width: 100%; }
.protect-toggle {
  display: flex; align-items: center; gap: .5rem; font-size: .9rem;
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); align-self: end;
}
.protect-toggle input[type="checkbox"] { width: auto; margin: 0; }

/* Tableau de contrôle par détection : il défile dans son cadre (.table-wrap),
   jamais la page entière. */
table.protect-table { width: 100%; border-collapse: collapse; }
table.protect-table th, table.protect-table td {
  text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line);
  vertical-align: middle; font-size: .86rem;
}
table.protect-table th { color: var(--muted); font-weight: 600; white-space: nowrap; }
table.protect-table .protect-group {
  background: var(--surface-2); color: var(--text); font-weight: 650;
  font-size: .74rem; letter-spacing: .02em; text-transform: uppercase;
}
.protect-name { min-width: 15rem; }
.protect-meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .2rem; }
.protect-meta .muted { font-size: .78rem; }
.protect-threshold { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.protect-threshold input { width: 4.6rem; }
.protect-table select { max-width: 12rem; }
.protect-table .actions { margin-top: 0; }

.bar-chart { display: flex; flex-direction: column; gap: .4rem; }
.bar-chart .row { display: flex; align-items: center; gap: .6rem; font-size: .84rem; }
.bar-chart .row .name { width: 11rem; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-chart .row .track { flex: 1; height: 10px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar-chart .row .fill { height: 100%; background: var(--accent); border-radius: 99px; }
.bar-chart .row .n { width: 2.4rem; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.chip-list { display: flex; flex-wrap: wrap; gap: .35rem; }
/* --- CLASSEMENT XP PUBLIC (/classement) --- */
table.lb td, table.lb th { vertical-align: middle; }
table.lb tbody tr:nth-child(-n+3) { background: rgba(241, 196, 15, .1); }
table.lb tbody tr:hover { background: var(--surface-2); }
.lb-rank { white-space: nowrap; font-weight: 600; }
.lb-level { font-weight: 700; color: var(--accent-hi); }
.lb-xp { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-progress { min-width: 14rem; }
.lb-bar {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: -1px; color: var(--ok);
}
.lb-member { display: inline-flex; align-items: center; gap: .6rem; }
.lb-member img { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.lb-fallback {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--line);
  display: inline-grid; place-items: center; font-size: .75rem; color: var(--muted);
}

/* --- En-tête de la page publique (autonome, sans barre latérale) --- */
.lb-body { background: var(--bg); }
.lb-topbar { flex-wrap: wrap; }
.lb-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.lb-brand-ico { font-size: 1.25rem; line-height: 1; }
.lb-topbadge { margin-left: auto; }
.lb-page { padding-top: 1.2rem; }
.lb-head { margin-bottom: .35rem; gap: .6rem; }
.lb-head h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.lb-subtitle { margin: .1rem 0 1.1rem; }
.lb-card { padding: .9rem 1rem; }

/* --- Défilement horizontal de secours (tablette / petit écran) ---
   Le tableau ne doit JAMAIS casser la page : quand la place manque, c'est LUI
   qui défile, dans son cadre, et non la page entière. */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.lb-table-wrap { border-radius: var(--radius-sm); }

/* --- Jauge de progression (nouvelle, en plus de la barre « ▰▱ ») --- */
.lb-meter {
  display: block; height: 6px; margin: .4rem 0 .3rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 99px; overflow: hidden;
}
.lb-meter-fill {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--ok), #4ade80);
  transition: width .3s ease;
}
.lb-progress-text { font-size: .78rem; font-variant-numeric: tabular-nums; }
.lb-messages, .lb-voice { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-member-cell { min-width: 0; }
.lb-member-cell .lb-member { max-width: 100%; }
.lb-member-cell .lb-member > span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- PAGES PUBLIQUES DE CONTENU (/nouveautes, /introvert-ia, /jeux) ---
   Mêmes bases que le classement public : en-tête `.lb-*`, cartes `.card`,
   tableaux `.lb`. On n'ajoute ici que ce qui leur est propre : barre de
   navigation, grille de fonctionnalités et typographie du patch note. */
.pub-nav {
  display: flex; gap: .4rem; flex-wrap: wrap; align-items: center;
  padding: .7rem 1.6rem 0; max-width: 1360px; width: 100%; margin: 0 auto;
}
.pub-navlink {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .38rem .75rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text); text-decoration: none;
  font-size: .86rem; font-weight: 550; transition: .12s;
}
.pub-navlink:hover { border-color: var(--accent); color: var(--accent-hi); }
.pub-card { padding: 1.1rem 1.2rem; }
.pub-card h3 { margin-top: 0; }
.pub-hero p { margin: .2rem 0 .5rem; }
.pub-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.pub-list li { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-size: .92rem; }
.pub-list .muted { font-size: .82rem; }
.pub-version {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-hi);
  background: var(--accent-soft); border: 1px solid #d3d8ff; border-radius: 6px;
  padding: .05em .4em; font-size: .8rem;
}
.pub-grid {
  display: grid; gap: .7rem; margin-top: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.pub-feature {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .7rem .8rem; background: var(--surface-2);
}
.pub-feature h4 { margin: 0 0 .25rem; font-size: .92rem; }
.pub-feature p { margin: 0; font-size: .84rem; color: var(--muted); line-height: 1.45; }
/* Patch note : on rend la lecture longue confortable (titres aérés, citations
   lisibles, tableaux qui défilent tout seuls sur mobile). */
.pub-prose { line-height: 1.6; }
.pub-prose h1 { font-size: 1.35rem; margin: 0 0 .6rem; }
.pub-prose h2 {
  font-size: 1.12rem; margin: 1.6rem 0 .5rem; padding-top: .8rem;
  border-top: 1px solid var(--line);
}
.pub-prose h3 { font-size: .98rem; margin: 1.1rem 0 .4rem; }
.pub-prose h4 { font-size: .92rem; margin: .9rem 0 .3rem; }
.pub-prose p, .pub-prose li { font-size: .92rem; }
.pub-prose ul, .pub-prose ol { padding-left: 1.15rem; margin: .4rem 0; }
.pub-prose li { margin: .18rem 0; }
.pub-prose code {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px;
  padding: .05em .35em; font-size: .85em;
}
.pub-prose blockquote {
  margin: .7rem 0; padding: .55rem .85rem; border-left: 3px solid var(--accent);
  background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pub-prose blockquote p { margin: .25rem 0; }
.pub-prose hr { border: none; border-top: 1px solid var(--line); margin: 1.4rem 0; }
.pub-prose a { color: var(--accent-hi); }
.pub-prose table { margin: .6rem 0; }
.pub-prose th, .pub-prose td { font-size: .84rem; }

/* --- STRUCTURE --- */
.tree { list-style: none; padding: 0; margin: 0; }
.tree > li { margin-bottom: .9rem; }
.tree .cat { font-weight: 650; }
.tree ul { list-style: none; margin: .3rem 0 0; padding-left: 1.1rem; border-left: 1px solid var(--line); }
.tree ul li { color: var(--muted); padding: .12rem 0; }

/* --- TOAST --- */
.toast {
  position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  background: #1f2229; color: #fff; border-radius: 11px; padding: .7rem 1.1rem;
  max-width: 90vw; z-index: 80; box-shadow: var(--shadow-lg); font-size: .88rem;
}
.toast.err { background: var(--danger); }
.toast.ok { background: var(--ok); }

/* --- ÉCRAN DE CONNEXION --- */
.login-view { display: grid; place-items: center; min-height: 100vh; padding: 2rem 1rem; }
.login-view .card { margin: 0; }

/* --- Éléments hérités (page publique du classement, panneau IA) --- */
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 650; }
.brand img { width: 30px; height: 30px; border-radius: 9px; }
.field { display: flex; flex-direction: column; gap: .4rem; margin: .8rem 0; }
.field label { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem; }
.field input[type="radio"] { width: auto; margin-top: .28rem; }
.danger-toggle { display: flex; align-items: center; gap: .5rem; font-size: .88rem; margin-top: .8rem; color: var(--muted); }
.danger-toggle input[type="checkbox"] { width: auto; }
.banner.danger { border-color: #f5c2c2; background: var(--danger-soft); color: #a11a1a; }

/* --- MESSAGES AUTOMATIQUES : jours de la semaine et fiches de programmation --- */
/* Les jours sont des « puces » cliquables : on coche, rien à retenir par cœur. */
.weekdays { display: flex; gap: .4rem; flex-wrap: wrap; margin: .3rem 0 0; }
.weekday {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .85rem; cursor: pointer; user-select: none; background: var(--surface);
}
.weekday:hover { border-color: var(--accent, #5865f2); }
.weekday input[type="checkbox"] { width: auto; margin: 0; }
/* La puce cochée se voit immédiatement (l'état natif est peu lisible). */
.weekday:has(input:checked) {
  background: var(--accent-soft, #eef1ff); border-color: var(--accent, #5865f2);
  font-weight: 600;
}

.sched-list { display: flex; flex-direction: column; gap: .8rem; }
.sched-item {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem 1rem; background: var(--surface);
}
/* Une programmation en pause reste lisible, mais visiblement inactive. */
.sched-item.off { opacity: .62; }
.sched-meta { font-size: .85rem; margin: .35rem 0 .5rem; }
.sched-preview {
  margin: 0; padding: .55rem .7rem; max-height: 9rem; overflow: auto;
  background: var(--bg, #f6f7fb); border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: .86rem; white-space: pre-wrap; word-break: break-word;
}
.sched-item .actions { margin-top: .7rem; }

/* --- MODULES : interrupteurs d'activation / désactivation --- */
.module-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.module {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.05rem 1.15rem; box-shadow: var(--shadow); display: flex; gap: .9rem;
  align-items: flex-start; transition: .14s; position: relative;
}
.module:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lg); }
.module.on { border-left: 3px solid var(--ok); }
.module.off { border-left: 3px solid var(--line-strong); }
.module.off .module-ico { opacity: .45; }
.module.locked { background: var(--surface-2); }
.module-ico {
  width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: 11px; display: grid;
  place-items: center; font-size: 1.2rem; background: var(--accent-soft);
}
.module-body { flex: 1; min-width: 0; }
.module-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.module-title h4 { margin: 0; font-size: .96rem; font-weight: 650; }
.module-desc { color: var(--muted); font-size: .83rem; margin-top: .25rem; }
.module-meta { margin-top: .45rem; font-size: .76rem; color: var(--muted); display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.module-meta .env { font-family: ui-monospace, Menlo, monospace; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: .05rem .35rem; }

/* Interrupteur (switch) */
.switch { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 46px; height: 26px; border-radius: 99px; background: var(--line-strong);
  transition: background .16s; position: relative; display: block;
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.3);
  transition: transform .16s;
}
.switch input:checked + .track { background: var(--ok); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent-soft); }
.switch input:disabled + .track { opacity: .45; cursor: not-allowed; }
.switch.busy .track { background: var(--accent); }
.switch.danger input:checked + .track { background: var(--danger); }

.module-group-title {
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  font-weight: 700; margin: 1.3rem 0 .6rem;
}
.module-group-title:first-child { margin-top: 0; }

/* Bandeau d'avertissement « verrouillage » */
.risk-note {
  border-left: 3px solid var(--warn); background: var(--warn-soft); color: #7a4a08;
  border-radius: 8px; padding: .6rem .8rem; font-size: .82rem; margin-top: .8rem;
}

/* --- CASIER & LOGS (surveillance) --- */
.watch {
  display: grid; gap: 1.1rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
.watch-casier .card, .watch-logs .card { margin: 0; }
.watch-casier .card + .card { margin-top: 1.1rem; }

/* Liste des membres au casier (façon boîte de réception). */
.casier-list {
  max-height: 22rem; overflow-y: auto; margin-top: .8rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.casier-row {
  display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .75rem;
  border-bottom: 1px solid var(--line); cursor: pointer; transition: .12s;
  border-left: 3px solid transparent;
}
.casier-row:last-child { border-bottom: none; }
.casier-row:hover { background: var(--surface-2); }
.casier-row.active { background: var(--accent-soft); border-left-color: var(--accent); }
.casier-row .fallback {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--muted); font-weight: 650;
}
.casier-row .body { min-width: 0; flex: 1; }
.casier-row .line1 { display: flex; align-items: center; gap: .4rem; justify-content: space-between; }
.casier-row .who { font-weight: 650; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.casier-row .time { color: var(--muted); font-size: .72rem; flex-shrink: 0; }
.casier-row .line2 { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-top: .2rem; }
.casier-row .preview { color: var(--danger); font-size: .76rem; margin-top: .2rem; }

/* Fiche détaillée du casier d'un membre. */
.casier-detail { margin-top: 1rem; }
.casier-detail .ticket-head { border-radius: var(--radius-sm); }

/* Journal en direct. */
.live-dot {
  display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--ok); margin-right: .35rem; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); animation: pulse 1.8s infinite;
}
.live-dot.paused { background: var(--muted); animation: none; box-shadow: none; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); }
  70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.log-feed {
  max-height: 30rem; overflow-y: auto; margin-top: .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
}
.log-row {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .5rem .7rem; border-bottom: 1px solid var(--line);
}
.log-row:last-child { border-bottom: none; }
.log-dot {
  width: .5rem; height: .5rem; border-radius: 50%; margin-top: .45rem; flex-shrink: 0;
  background: var(--muted);
}
.log-dot.ok { background: var(--ok); }
.log-dot.warn { background: var(--warn); }
.log-dot.danger { background: var(--danger); }
.log-dot.info { background: var(--accent); }
.log-row .log-body { min-width: 0; flex: 1; }
.log-line1 { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.log-label { font-weight: 650; font-size: .84rem; }
.log-chan { color: var(--accent-hi); font-size: .78rem; font-weight: 600; }
.log-time { color: var(--muted); font-size: .72rem; margin-left: auto; flex-shrink: 0; }
.log-text { font-size: .82rem; color: var(--text); margin-top: .15rem; word-break: break-word; }
.log-meta { font-size: .75rem; color: var(--muted); margin-top: .1rem; }
/* ============================================================
   PILOTAGE — centre de commande d'un serveur
   Un écran qui doit se lire en dix secondes : alertes d'abord,
   chiffres ensuite, actions rapides, puis les interrupteurs.
   ============================================================ */
.pilot-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.pilot-head h3 { margin-bottom: .15rem; }

/* --- Alertes : couleur = gravité, toujours assortie d'un texte --- */
.pilot-alerts { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.2rem; }
.pilot-alert {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow);
}
.pilot-alert .pa-ico { font-size: 1.2rem; flex-shrink: 0; }
.pilot-alert .pa-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pilot-alert .pa-title { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.pilot-alert .pa-detail { color: var(--muted); font-size: .84rem; }
.pilot-alert.ok { border-color: #bfe6cd; background: var(--ok-soft); }
.pilot-alert.info { border-color: #d3d8ff; background: var(--accent-soft); }
.pilot-alert.warn { border-color: #f2d9a8; background: var(--warn-soft); }
.pilot-alert.danger { border-color: #f5c2c2; background: var(--danger-soft); }
.pilot-alert.danger .pa-title strong { color: #a11a1a; }
.pilot-alert.warn .pa-title strong { color: #7a4a08; }

/* --- Actions rapides : de grosses cibles, lisibles au doigt --- */
.quick-actions {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.quick-action {
  display: flex; align-items: center; gap: .6rem; text-align: left;
  padding: .7rem .8rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600;
}
.quick-action:hover { border-color: var(--accent); color: var(--accent-hi); background: var(--accent-soft); }
.quick-action .qa-ico { font-size: 1.15rem; }

/* --- Interrupteurs du pilotage : une ligne = un module, état à gauche --- */
.pilot-switches { display: flex; flex-direction: column; gap: .45rem; margin-top: .3rem; }
.pilot-switch {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .75rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  background: var(--surface-2);
}
.pilot-switch.on { border-left-color: var(--ok); background: var(--ok-soft); }
.pilot-switch.locked { opacity: .72; }
.pilot-switch .ps-ico { font-size: 1.1rem; flex-shrink: 0; }
.pilot-switch .ps-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pilot-switch .ps-title { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pilot-switch .ps-meta { color: var(--muted); font-size: .78rem; }

/* --- Réglages globaux (lecture seule) --- */
.pilot-globals { margin-top: 1rem; border-top: 1px dashed var(--line-strong); padding-top: .7rem; }
.pilot-globals-title { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-bottom: .4rem; }
.pilot-global {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .35rem 0; font-size: .86rem;
}
.pilot-global .pg-label { font-weight: 600; }
.pilot-global code.env { font-size: .78rem; }

/* --- Fil d'activité (journal condensé du serveur) --- */
.activity-feed { display: flex; flex-direction: column; margin-top: .3rem; }
.activity-row {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .5rem .1rem; border-bottom: 1px solid var(--line);
}
.activity-row:last-child { border-bottom: none; }
.activity-row .ar-kind {
  flex-shrink: 0; min-width: 8.5rem; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.activity-row.ok .ar-kind { color: var(--ok); }
.activity-row.warn .ar-kind { color: var(--warn); }
.activity-row.danger .ar-kind { color: var(--danger); }
.activity-row.info .ar-kind { color: var(--accent); }
.activity-row .ar-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.activity-row .ar-meta, .activity-row .ar-desc { color: var(--muted); font-size: .78rem; }
.activity-row .ar-time { color: var(--muted); font-size: .74rem; flex-shrink: 0; }

/* --- Barre d'outils de l'onglet Modules --- */
.module-toolbar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem;
}
.module-toolbar input[type="search"] { flex: 1 1 15rem; }
.filter-chips { display: flex; gap: .3rem; flex-wrap: wrap; }
.chip {
  padding: .3rem .7rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font: inherit; font-size: .8rem; font-weight: 600;
}
.chip:hover { border-color: var(--accent); color: var(--accent-hi); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.module-group-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap; margin-top: .4rem;
}
.module-bulk { display: flex; gap: .3rem; flex-wrap: wrap; }

/* --- RESPONSIVE --- */

/* Tablette large (≤ 1024px) : le tableau respire moins, la colonne « Vocal »
   (la moins consultée) disparaît pour laisser la place à la progression. */
@media (max-width: 1024px) {
  table.lb { font-size: .85rem; }
  table.lb th, table.lb td { padding: .5rem .5rem; }
  table.lb .col-voice, table.lb td.lb-voice { display: none; }
  .lb-progress { min-width: 10.5rem; }
}

/* Mobile (≤ 700px) : le fil d'activité et les interrupteurs passent en pile,
   le libellé de type ne prend plus une colonne entière. */
@media (max-width: 700px) {
  .activity-row { flex-wrap: wrap; }
  .activity-row .ar-kind { min-width: 0; }
  .activity-row .ar-time { margin-left: auto; }
  .pilot-switch { flex-wrap: wrap; }
  .pilot-switch .ps-body { flex-basis: 100%; order: 3; }
  .chip { padding: .3rem .6rem; font-size: .78rem; }
  .module-toolbar input[type="search"] { flex-basis: 100%; }
}

/* Tablette (≤ 960px) : les mises en page à deux colonnes passent en colonne. */
@media (max-width: 960px) {
  .inbox { grid-template-columns: 1fr; }
  .inbox-list { position: static; }
  .ticket-list { max-height: 22rem; }
  .watch { grid-template-columns: 1fr; }
  .casier-list { max-height: 20rem; }
  .log-feed { max-height: 24rem; }
}

@media (max-width: 780px) {
  .app { flex-direction: column; }
  .sidebar {
    width: 100%; flex: none; height: auto; position: static;
    flex-direction: row; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .6rem .8rem;
  }
  .side-brand { padding: 0 .4rem 0 0; }
  .side-nav { flex-direction: row; flex-wrap: wrap; margin: 0; }
  /* Sur petit écran, les sections de bot passent en ligne : on masque les noms
     (les icônes et les pastilles de statut suffisent) pour garder de la place. */
  .side-bot { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; }
  .side-bot-head { padding: 0 .2rem; }
  .side-bot-name, .bot-state .bot-state-text { display: none; }
  .tab-rows { gap: .5rem; }
  .tab-row { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .tab-row-label { min-width: 0; }
  .side-foot { margin: 0 0 0 auto; border: none; padding: 0; flex-direction: row; align-items: center; }
  .content { padding: 1rem .9rem 3rem; }
  .topbar { padding: .7rem .9rem; }
  /* Classement : « Messages » et « Vocal » sortent du tableau (place rare) —
     les valeurs restent visibles dès 641px et dans la vue carte en dessous. */
  table.lb .col-messages, table.lb td.lb-messages,
  table.lb .col-voice, table.lb td.lb-voice { display: none; }
  .lb-progress { min-width: 9rem; }
  .banner.double { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .banner.double .emblem { width: 126px; height: 84px; }
  .lb-card { padding: .7rem .6rem; }
}

/* Mobile (≤ 640px) : le tableau devient une LISTE DE CARTES.
   Chaque ligne est une fiche (rang + membre en tête, progression en pleine
   largeur, puis les chiffres) — plus de défilement horizontal, tout est
   lisible au pouce. Les libellés viennent de l'attribut `data-label`. */
@media (max-width: 640px) {
  .lb-page { padding-top: .9rem; }
  .lb-head h2 { font-size: 1.12rem; }
  .lb-subtitle { font-size: .84rem; }

  table.lb { display: block; font-size: .92rem; }
  table.lb thead { display: none; }
  table.lb tbody { display: block; }
  table.lb tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "rank member"
      "progress progress"
      "level xp"
      "messages voice";
    align-items: center;
    gap: .5rem .7rem;
    padding: .8rem .85rem;
    margin-bottom: .6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  table.lb tr:last-child { margin-bottom: 0; }
  table.lb tr:nth-child(-n+3) { border-color: rgba(241, 196, 15, .7); }
  table.lb td {
    display: block; padding: 0; border: none;
    min-width: 0; overflow-wrap: anywhere;
  }
  /* Libellé automatique au-dessus de chaque valeur. */
  table.lb td::before {
    content: attr(data-label);
    display: block;
    font-size: .66rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--muted);
  }
  table.lb td.lb-rank { grid-area: rank; font-size: 1.02rem; }
  table.lb td.lb-member-cell { grid-area: member; }
  table.lb td.lb-progress { grid-area: progress; min-width: 0; margin-top: .1rem; }
  table.lb td.lb-level { grid-area: level; }
  table.lb td.lb-xp { grid-area: xp; text-align: right; }
  table.lb td.lb-messages { grid-area: messages; }
  table.lb td.lb-voice { grid-area: voice; text-align: right; }
  /* Rang et membre forment la tête de carte : pas de libellé, plus gros. */
  table.lb td.lb-rank::before,
  table.lb td.lb-member-cell::before { content: none; }
  table.lb td.lb-xp::before, table.lb td.lb-voice::before { text-align: right; }
  /* La carte a la place : on RÉAFFICHE messages et vocal (masqués au tableau
     dès 780px, faute de colonnes). */
  table.lb .col-messages, table.lb td.lb-messages,
  table.lb .col-voice, table.lb td.lb-voice { display: block; }
  table.lb .lb-member img,
  table.lb .lb-fallback { width: 32px; height: 32px; }
  table.lb .lb-bar { font-size: .95rem; }
  /* La jauge graphique prend tout l'intérêt sur mobile. */
  .lb-meter { height: 8px; margin: .45rem 0 .35rem; }
  .lb-progress-text { font-size: .8rem; }
  .lb-card { background: none; border: none; box-shadow: none; padding: 0; }
}

/* Très petits écrans (≤ 400px) : on serre encore, sans rien perdre. */
@media (max-width: 400px) {
  .lb-brand-text { font-size: .95rem; }
  table.lb tr { padding: .7rem .65rem; gap: .45rem .55rem; }
  table.lb .lb-member img, table.lb .lb-fallback { width: 28px; height: 28px; }
  table.lb .lb-bar { display: none; }   /* la jauge graphique suffit ici */
  .banner.double .emblem { width: 104px; height: 70px; }
}

/* Impression / PDF : tout le tableau, sans jauge décorative ni couleurs de fond. */
@media print {
  .lb-topbar { display: none !important; }
  .lb-meter { display: none !important; }
  /* ⚠️ On ne masque PAS `.table-wrap` : la table est dedans. On annule
     simplement son défilement pour que le tableau s'imprime en entier. */
  .table-wrap { overflow: visible !important; }
  table.lb { display: table; width: 100%; }
  table.lb thead { display: table-header-group; }
  table.lb tbody { display: table-row-group; }
  table.lb tr { display: table-row; box-shadow: none; border: none; }
  table.lb td, table.lb th { display: table-cell; padding: .3rem .4rem; }
  table.lb td::before { content: none; }
  table.lb tbody tr:nth-child(-n+3) { background: none; }
}


/* ============================================================
   REFONTE « CRM » — navigation simple, vue d'ensemble, bots
   Ajouts en fin de feuille : ils prolongent (et surchargent
   quand il le faut) les règles ci-dessus, sans toucher aux
   classes partagées avec la page publique du classement.
   ============================================================ */
@font-face {
  font-family: "Inter";
  src: url(/static/fonts/inter-latin-wght-normal.woff2) format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
:root { --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
body { font-family: var(--font-ui); font-feature-settings: "cv11", "ss01"; }
h1, h2, h3, h4 { font-family: var(--font-ui); }

/* --- Barre latérale : groupes clairs, statut des bots compact --- */
.sidebar { padding: 1.1rem .75rem; gap: 0; }
.side-nav { gap: .1rem; margin-bottom: .8rem; }
.side-group-label {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; padding: 1rem .65rem .35rem;
}
.side-group-label:first-child { padding-top: .2rem; }
.side-link { padding: .5rem .65rem; border-radius: 9px; font-size: .92rem; }
.side-link.active { box-shadow: inset 3px 0 0 var(--accent); }
.side-bot { margin-top: 0; }
.side-bot-head {
  padding: .3rem .65rem; cursor: pointer; border-radius: 9px; gap: .5rem;
  min-width: 0;
}
.side-bot-head:hover { background: var(--surface-2); }
.side-bot-name {
  text-transform: none; letter-spacing: 0; font-size: .84rem; font-weight: 550;
  color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bot-state { font-size: .66rem; max-width: 9.5rem; }
.bot-state-text { overflow: hidden; text-overflow: ellipsis; }

/* --- Barre du haut : état « en direct » --- */
.live-pill {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem;
  color: var(--muted); font-weight: 600; padding: .25rem .6rem;
  border: 1px solid var(--line); border-radius: 99px; background: var(--surface);
}
.live-pill .live-dot { margin: 0; }

/* --- Indicateurs (KPI) plus lisibles --- */
.kpis-home { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpi { padding: 1rem 1.1rem; }
.kpi .value { font-size: 1.85rem; line-height: 1.15; margin: .15rem 0 .1rem; font-variant-numeric: tabular-nums; }
.kpi .trend { font-size: .76rem; color: var(--muted); }
.kpi.accent-left, .kpi.ok-left, .kpi.warn-left, .kpi.danger-left { border-left-width: 4px; }

/* --- Grilles de la vue d'ensemble --- */
.home-grid {
  display: grid; gap: 1.05rem; margin-bottom: 1.05rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}
.home-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-grid .card { margin: 0; min-width: 0; }
.card-head h3 { font-size: .98rem; }
table.plain { font-size: .9rem; }
table.plain td.row-actions { text-align: right; white-space: nowrap; }
table.plain td.row-actions .btn { margin-left: .3rem; }
.guild-cell { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; }
.guild-ico { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.guild-ico.fallback {
  display: inline-grid; place-items: center; background: var(--accent-soft);
  color: var(--accent); font-weight: 700; font-size: .8rem;
}

/* --- File « à traiter » --- */
.todo-list { display: flex; flex-direction: column; gap: .35rem; }
.todo-row {
  display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .55rem .7rem; cursor: pointer; font: inherit; color: var(--text);
  transition: .12s;
}
.todo-row:hover { border-color: var(--accent); background: var(--accent-soft); }
.todo-row .fallback {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid;
  place-items: center; background: var(--surface); border: 1px solid var(--line);
  color: var(--muted); font-weight: 650;
}
.todo-body { min-width: 0; flex: 1; }
.todo-l1 { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.todo-l2 { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-when { color: var(--muted); font-size: .76rem; flex-shrink: 0; font-weight: 600; }
.todo-when.urgent { color: #97580a; background: var(--warn-soft); border-radius: 99px; padding: .1rem .5rem; }
.empty-mini {
  text-align: center; color: var(--muted); padding: 1.6rem .8rem;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2);
}

/* --- Graphiques --- */
.chart { width: 100%; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart.small .chart-svg { max-height: 170px; }
.grid-line { stroke: var(--line); stroke-width: 1; }
.axis-text { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.axis-text.empty { font-size: 12px; }
.legend { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .76rem; color: var(--muted); font-weight: 600; }
.legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.legend-dot { width: .6rem; height: .6rem; border-radius: 3px; display: inline-block; }
.mini-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .7rem; }
.mini-total {
  display: flex; flex-direction: column; align-items: center; padding: .45rem .3rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.mini-total strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.mini-total span { font-size: .68rem; color: var(--muted); text-align: center; }

/* Barres horizontales (motifs) */
.bar-row { display: grid; grid-template-columns: minmax(5rem, 9rem) 1fr auto; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.bar-label { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 9px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), #8b93f7); }
.bar-count { font-weight: 700; font-size: .84rem; font-variant-numeric: tabular-nums; }

/* Bots sur l'accueil */
.home-bots { display: flex; flex-direction: column; gap: .5rem; }
.home-bot {
  display: flex; align-items: center; gap: .65rem; padding: .55rem .65rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
}
.hb-ico { font-size: 1.25rem; flex-shrink: 0; }
.hb-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.hb-detail { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Gérer les bots --- */
.bots-grid { display: grid; gap: 1.05rem; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); align-items: start; }
.bot-card { margin: 0; display: flex; flex-direction: column; gap: .9rem; }
.bot-card-head { display: flex; align-items: flex-start; gap: .75rem; }
.bot-card-ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); font-size: 1.3rem; flex-shrink: 0;
}
.bot-card-title { flex: 1; min-width: 0; }
.bot-card-title h3 { margin: 0 0 .1rem; }
.bot-card-title p { margin: 0; font-size: .8rem; }
.bot-card .bot-state { margin-left: 0; flex-shrink: 0; max-width: none; }
.bot-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.bot-fact {
  display: flex; flex-direction: column; align-items: center; padding: .5rem .3rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.bot-fact strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.bot-fact span { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.bot-controls { display: flex; flex-direction: column; gap: .5rem; }
.bot-card-foot { display: flex; gap: .4rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: .8rem; }
.ctl-row {
  display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem;
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.ctl-row.on { border-left-color: var(--ok); background: var(--ok-soft); }
.ctl-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.ctl-title { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ctl-desc { color: var(--muted); font-size: .77rem; }
.ctl-form { display: flex; flex-direction: column; gap: .25rem; }
.ctl-form .lbl { margin: 0; }

/* --- Boîte de réception : onglets de statut + réponses rapides --- */
.ticket-tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .55rem; }
.ticket-tabs .chip .n { opacity: .75; font-variant-numeric: tabular-nums; margin-left: .15rem; }
.ticket-tabs .chip .n:empty { display: none; }
.quick-replies { display: flex; gap: .3rem; flex-wrap: wrap; }
.reply-box .chip { font-size: .76rem; padding: .22rem .6rem; }
.inbox-list { box-shadow: var(--shadow); }

/* --- Fiche d'un serveur : sous-menu vertical à gauche, contenu à droite --- */
.guild-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.3rem; align-items: start; }
.guild-panels { min-width: 0; }
.guild-layout .tab-rows {
  margin: 0; gap: .9rem; position: sticky; top: 4.6rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem .55rem; box-shadow: var(--shadow);
}
.guild-layout .tab-row { flex-direction: column; align-items: stretch; gap: .2rem; border-bottom: none; }
.guild-layout .tab-row-label { min-width: 0; padding: 0 .55rem; font-size: .66rem; }
.guild-layout .tab-row .tabs { flex-direction: column; flex-wrap: nowrap; gap: .1rem; margin: 0; }
.guild-layout .tab {
  text-align: left; border-radius: 9px; border-bottom: none; padding: .45rem .6rem;
  font-size: .88rem; width: 100%;
}
.guild-layout .tab.active { background: var(--accent-soft); color: var(--accent-hi); box-shadow: inset 3px 0 0 var(--accent); }
.guild-layout .tab-row:not(:first-child) { border-top: 1px solid var(--line); padding-top: .7rem; }

/* --- Adaptations responsive de la refonte --- */
@media (max-width: 1100px) {
  .home-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .home-grid, .home-grid.three { grid-template-columns: 1fr; }
  .guild-layout { grid-template-columns: 1fr; }
  .guild-layout .tab-rows { position: static; flex-direction: row; flex-wrap: wrap; gap: .5rem; padding: .5rem; }
  .guild-layout .tab-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .guild-layout .tab-row:not(:first-child) { border-top: none; padding-top: 0; }
  .guild-layout .tab-row .tabs { flex-direction: row; flex-wrap: wrap; }
  .guild-layout .tab { width: auto; }
  .guild-layout .tab-row-label { display: none; }
}
@media (max-width: 780px) {
  .side-group-label { display: none; }
  .side-bot-head { padding: .2rem .35rem; }
  .side-bot-name { display: none; }
  .live-pill #live-text { display: none; }
  .bar-row { grid-template-columns: minmax(4rem, 6rem) 1fr auto; }
}
@media (max-width: 520px) {
  .kpis-home { grid-template-columns: repeat(2, 1fr); }
  .kpi .value { font-size: 1.5rem; }
  .mini-totals, .bot-facts { grid-template-columns: repeat(3, 1fr); }
  table.plain th:nth-child(n+4), table.plain td:nth-child(n+4):not(.row-actions) { display: none; }
}


/* --- Ajustements après relecture visuelle --- */
.kpis-home { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.head-controls select { width: auto; }
.home-grid { align-items: stretch; }
.home-grid > .card { display: flex; flex-direction: column; }
.home-grid > .card > .chart { flex: 1; display: flex; align-items: center; }
.side-bot-head .bot-state { max-width: 7.2rem; }


/* --- Ajustements mobile (2) --- */
.page-head .head-controls { flex-wrap: nowrap; }
.side-bot-name { flex: 1 1 auto; min-width: 0; }
@media (max-width: 780px) {
  .sidebar { gap: .4rem; padding: .6rem .8rem; }
  .side-brand { padding: 0; flex: 1 1 auto; }
  .side-foot { margin: 0; flex: 0 0 auto; }
  /* Menu en une seule ligne, défilant au doigt, au lieu d'une pile haute. */
  .side-nav {
    order: 3; width: 100%; flex-direction: row; flex-wrap: nowrap; align-items: center;
    overflow-x: auto; gap: .25rem; padding-bottom: .2rem; -webkit-overflow-scrolling: touch;
  }
  .side-nav .side-link { width: auto; white-space: nowrap; flex: 0 0 auto; }
  .side-nav .side-bot { flex: 0 0 auto; }
  .side-nav .side-bot-head { padding: .2rem .3rem; }
  .page-head .head-controls { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  table.plain td.row-actions .btn:not(.primary) { display: none; }
  table.plain th:last-child { display: none; }
}


/* --- Administration : bandeaux du site public --- */
.bn-layout { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.bn-form textarea { min-height: 4.2rem; }
.bn-align { display: flex; gap: .4rem; flex-wrap: wrap; }
.bn-align-opt {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-size: .86rem;
}
.bn-align-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hi); font-weight: 600; }
.bn-align-opt input { width: auto; margin: 0; }
.bn-preview { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: #14152a; }
.bn-list { display: flex; flex-direction: column; gap: .8rem; max-height: 34rem; overflow-y: auto; }
.bn-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .65rem; background: var(--surface-2); }
.bn-item.editing { border-color: var(--accent); background: var(--accent-soft); }
.bn-item-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; font-size: .82rem; }
.bn-item .actions { margin-top: .5rem; }
/* Aperçu : reprend l'apparence du site (couleurs de l'accent violet). */
.bn-preview .site-banner, .bn-item .site-banner {
  --bn-bg: rgba(124, 92, 255, .2); --bn-line: rgba(124, 92, 255, .5);
  background: var(--bn-bg); color: #edebfa; border-radius: 8px; border: 1px solid var(--bn-line);
}
.bn-preview .site-banner.tone-success, .bn-item .site-banner.tone-success { --bn-bg: rgba(60, 200, 130, .2); --bn-line: rgba(60, 200, 130, .5); }
.bn-preview .site-banner.tone-warning, .bn-item .site-banner.tone-warning { --bn-bg: rgba(255, 200, 80, .2); --bn-line: rgba(255, 200, 80, .55); }
.bn-preview .site-banner.tone-danger, .bn-item .site-banner.tone-danger { --bn-bg: rgba(255, 110, 125, .2); --bn-line: rgba(255, 110, 125, .55); }
.bn-preview .banner-in, .bn-item .banner-in { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; font-size: .88rem; }
.bn-preview .align-left .banner-in, .bn-item .align-left .banner-in { justify-content: flex-start; }
.bn-preview .align-center .banner-in, .bn-item .align-center .banner-in { justify-content: center; text-align: center; }
.bn-preview .align-right .banner-in, .bn-item .align-right .banner-in { justify-content: flex-end; text-align: right; }
.bn-preview .banner-btn, .bn-item .banner-btn {
  background: #5865f2; color: #fff; border-radius: 99px; padding: .15rem .7rem; font-size: .78rem; font-weight: 600; white-space: nowrap;
}
@media (max-width: 960px) { .bn-layout { grid-template-columns: 1fr; } }

/* Contraste des bandeaux de la liste : le dashboard est clair, le texte doit être foncé.
   (L'aperçu, lui, est posé sur un fond sombre comme le site : texte clair.) */
.bn-item .site-banner { color: var(--text); }
.bn-item .site-banner.tone-info { background: #e9ebff; }
.bn-item .site-banner.tone-success { background: #dff4e8; }
.bn-item .site-banner.tone-warning { background: #fdf0d6; }
.bn-item .site-banner.tone-danger { background: #fde4e6; }


/* --- Administration : planning des animations --- */
.pl-cover-box { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .4rem; }
.pl-thumb {
  width: 16rem; max-width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden;
  display: grid; place-items: center; border: 1px dashed var(--line-strong); background: var(--surface-2); font-size: .85rem;
}
.pl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-thumb.sm { width: 7rem; flex: 0 0 7rem; border-style: solid; font-size: .72rem; text-align: center; }
.pl-list { max-height: 40rem; }
.pl-item-body { display: flex; gap: .7rem; align-items: center; }
.pl-item-text { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.pl-item-text strong { overflow-wrap: anywhere; }
.bn-side .inline { margin-bottom: .6rem; }
.bn-side .inline input { flex: 1 1 10rem; min-width: 0; }


/* ============================================================
   REFONTE CRM LIGHTNING (uniquement #app-shell — tableau de bord connecté)
   ============================================================ */
#app-shell {
  --bg: #eef2f7;
  --surface: #ffffff;
  --surface-2: #f4f6fa;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #0176d3;
  --accent-hi: #015ba7;
  --accent-soft: #e8f3fd;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 3px rgba(15, 23, 42, .05), 0 4px 12px rgba(15, 23, 42, .04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, .10);
  background: var(--bg);
  color: var(--text);
}

/* --- 1. BARRE LATÉRALE GAUCHE : DOCK BLEU MARINE PROFOND --- */
#app-shell .sidebar {
  background: linear-gradient(180deg, #061c3b 0%, #032d60 100%);
  border-right: 1px solid rgba(255, 255, 255, .1);
  color: #f8fafc;
  padding: 1.15rem .85rem;
  box-shadow: 4px 0 18px rgba(3, 22, 51, .16);
}
#app-shell .side-brand {
  padding: .25rem .55rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  margin-bottom: .75rem;
}
#app-shell .side-brand .brand-mark {
  background: linear-gradient(135deg, #38bdf8, #0176d3);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(1, 118, 211, .45);
}
#app-shell .side-brand-text #bot-name {
  color: #ffffff;
  font-size: 1rem;
  letter-spacing: -.01em;
}
#app-shell .side-brand-text small { color: rgba(226, 232, 240, .72); }
#app-shell .side-group-label {
  color: rgba(148, 163, 184, .88);
  font-size: .66rem;
  letter-spacing: .1em;
  margin: 1rem 0 .35rem;
  padding: 0 .65rem;
}
#app-shell .side-link {
  color: rgba(241, 245, 249, .88);
  padding: .6rem .75rem;
  border-radius: 12px;
  border: 1.5px solid transparent;
  font-weight: 550;
  transition: all .15s ease;
}
#app-shell .side-link:hover { background: rgba(255, 255, 255, .09); color: #ffffff; }
#app-shell .side-link.active {
  background: rgba(255, 255, 255, .14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, .88);
  font-weight: 650;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
#app-shell .side-link .ico {
  width: 1.45rem; height: 1.45rem; display: inline-grid; place-items: center;
  border-radius: 7px; background: rgba(255, 255, 255, .08); font-size: .95rem;
}
#app-shell .side-link.active .ico { background: rgba(255, 255, 255, .22); }
#app-shell .side-link .count { background: #38bdf8; color: #041e42; font-weight: 800; }
#app-shell .side-bot { margin-top: .25rem; }
#app-shell .side-bot-head {
  padding: .42rem .65rem; border-radius: 10px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
  transition: background .15s ease, border-color .15s ease;
}
#app-shell .side-bot-head:hover {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22);
}
#app-shell .side-bot-name { color: rgba(241, 245, 249, .9); font-size: .74rem; }
#app-shell .side-foot { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: .9rem; }
#app-shell #user-box {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px; padding: .45rem .6rem; color: #ffffff;
}
#app-shell #logout {
  color: rgba(241, 245, 249, .88); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px; justify-content: center;
}
#app-shell #logout:hover {
  background: rgba(255, 255, 255, .12); color: #ffffff; border-color: rgba(255, 255, 255, .38);
}

/* --- 2. BARRE SUPÉRIEURE CRM --- */
#app-shell .topbar {
  background: #ffffff; border-bottom: 1px solid var(--line);
  padding: .65rem 1.75rem; gap: 1.25rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.topbar-brand-crumb { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.topbar-app-badge {
  background: var(--accent-soft); color: var(--accent); border: 1px solid #bfdbfe;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  padding: .18rem .52rem; border-radius: 6px; text-transform: uppercase;
}
#app-shell .crumbs {
  font-size: 1.02rem; font-weight: 700; color: var(--text);
  padding: .35rem .15rem; border-bottom: 3px solid var(--accent); margin-bottom: -.65rem;
}
.topbar-search { position: relative; flex: 1 1 28rem; max-width: 34rem; margin: 0 auto; }
.topbar-search-ico {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  font-size: .88rem; opacity: .65; pointer-events: none;
}
#global-search {
  width: 100%; border-radius: 999px; padding: .46rem 1rem .46rem 2.3rem;
  border: 1px solid var(--line-strong); background: var(--surface-2); font-size: .86rem;
}
#global-search:focus {
  background: #ffffff; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(1, 118, 211, .14); outline: none;
}
.topbar-search-results {
  position: absolute; top: calc(100% + .45rem); left: 0; right: 0;
  background: #ffffff; border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: .4rem; z-index: 60; max-height: 22rem; overflow-y: auto;
}
.topbar-search-item {
  display: flex; align-items: center; gap: .7rem; width: 100%; border: none; background: none;
  text-align: left; padding: .55rem .7rem; border-radius: 10px; cursor: pointer; font: inherit; color: var(--text);
}
.topbar-search-item:hover { background: var(--accent-soft); }
.tsi-ico {
  width: 2rem; height: 2rem; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--line); display: grid; place-items: center; flex-shrink: 0;
}
.tsi-body { display: flex; flex-direction: column; min-width: 0; }
.tsi-body strong { font-size: .88rem; font-weight: 650; }
.tsi-body small { font-size: .76rem; color: var(--muted); }
.topbar-search-empty { padding: .75rem .9rem; color: var(--muted); font-size: .85rem; text-align: center; }

/* --- 3. BANDEAU "RECORD HEADER" (.page-head) SUR CHAQUE PAGE --- */
#app-shell .content { padding: 1.4rem 1.75rem 4rem; max-width: 1440px; }
#app-shell .page-head {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.05rem 1.35rem; margin-bottom: 1.25rem;
  box-shadow: var(--shadow); align-items: center;
}
.page-head-main { display: flex; align-items: center; gap: .95rem; min-width: 0; }
.page-ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.35rem; flex-shrink: 0; color: #ffffff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .12);
}
.page-ico.tone-blue { background: linear-gradient(135deg, #0ea5e9, #0176d3); }
.page-ico.tone-indigo { background: linear-gradient(135deg, #6366f1, #4338ca); }
.page-ico.tone-emerald { background: linear-gradient(135deg, #10b981, #059669); }
.page-ico.tone-violet { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.page-ico.tone-amber { background: linear-gradient(135deg, #f59e0b, #d97706); }
.page-ico.tone-rose { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.page-eyebrow {
  display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin-bottom: .1rem;
}
#app-shell .page-head h2 { font-size: 1.38rem; font-weight: 700; color: #0f172a; margin: 0; }
#app-shell .page-head p.muted { margin: .18rem 0 0; font-size: .86rem; }
#app-shell .back { margin-bottom: 0; }

/* --- 4. CARTES, BANDEAUX DE SECTION GRIS CLAIR & GRILLES CRM --- */
.crm-section-label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 1.25rem 0 .6rem; padding-left: .15rem;
}
.crm-section-label::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}
.crm-split {
  display: grid; gap: 1.15rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.crm-col { display: flex; flex-direction: column; min-width: 0; }
.crm-col > .crm-section-label:first-child { margin-top: 0; }

#app-shell .card {
  background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.15rem 1.25rem; margin-bottom: 1.1rem; box-shadow: var(--shadow);
}
/* En-tête de section façon CRM (« ⌄ About » / bandeau gris doux) */
#app-shell .card-head {
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: .55rem .85rem; margin-bottom: .95rem;
}
#app-shell .card-head h3, #app-shell .card-head h4 {
  font-size: .96rem; font-weight: 700; color: #0f172a; margin: 0;
  display: flex; align-items: center; gap: .4rem;
}
#app-shell .card-head h3::before {
  content: "⌄"; color: var(--muted); font-weight: 700; font-size: .9rem; margin-right: .1rem;
}

/* Boutons en pilule façon barre d'actions CRM */
#app-shell .btn {
  border-radius: 999px; font-weight: 600; padding: .46rem .95rem;
  border-color: var(--line-strong); color: var(--accent); background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
#app-shell .btn:hover:not(:disabled) {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hi);
}
#app-shell .btn.primary {
  background: var(--accent); border-color: var(--accent); color: #ffffff;
}
#app-shell .btn.primary:hover:not(:disabled) {
  background: var(--accent-hi); border-color: var(--accent-hi); color: #ffffff;
}
#app-shell .btn.success { background: var(--ok); border-color: var(--ok); color: #ffffff; }
#app-shell .btn.danger { background: var(--danger); border-color: var(--danger); color: #ffffff; }
#app-shell .btn.ghost {
  background: #ffffff; border-color: var(--line); color: var(--text);
}
#app-shell .btn.ghost:hover:not(:disabled) {
  background: var(--surface-2); border-color: var(--line-strong); color: var(--accent);
}
#app-shell .btn.sm { padding: .3rem .72rem; font-size: .8rem; }
.owner-quicknav { gap: .35rem; }

/* KPIs épurés et lisibles */
#app-shell .kpi, #app-shell .stat {
  border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  padding: 1rem 1.15rem; box-shadow: var(--shadow);
}
#app-shell .kpi .ico {
  width: 2.1rem; height: 2.1rem; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 1rem; opacity: 1;
}

/* Tableaux dans #app-shell : en-têtes gris clair et séparateurs fins */
#app-shell table th {
  background: #f8fafc; padding: .6rem .75rem; border-bottom: 1px solid var(--line-strong);
  color: #475569; font-size: .73rem; letter-spacing: .05em;
}
#app-shell table td { padding: .65rem .75rem; border-bottom: 1px solid var(--line); }

/* Fiches membres & tickets : grille de métadonnées séparées par des traits fins */
#app-shell .ticket-head {
  background: #ffffff; border: 1px solid var(--line); border-radius: 14px;
  padding: 1rem 1.15rem; box-shadow: var(--shadow);
}
#app-shell .ticket-head .meta {
  border-top: 1px solid var(--line); margin-top: .75rem; padding-top: .75rem;
  gap: .65rem 1.2rem;
}
#app-shell .ticket-head .meta > div {
  border-bottom: 1px solid var(--line); padding-bottom: .45rem;
}

/* Responsive pour les nouvelles grilles CRM */
@media (max-width: 1024px) {
  .crm-split { grid-template-columns: 1fr; }
  .topbar-search { max-width: 20rem; }
}
@media (max-width: 780px) {
  #app-shell .topbar { flex-wrap: wrap; padding: .65rem 1rem; }
  .topbar-search { order: 3; flex: 1 1 100%; max-width: 100%; }
  #app-shell .crumbs { border-bottom: none; margin-bottom: 0; padding: 0; }
}